Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@mux/mux-player
Advanced tools
@mux/mux-player - npm Package Compare versions
Comparing version 0.1.0-canary.10-8eff156 to 0.1.0-canary.10-b05142f
@@ -17,5 +17,2 @@ import MuxPlayerElement from '.'; | ||
| export declare function toPropName(attrName: string): string; | ||
| export declare const getTestMediaEl: (nodeName?: string) => HTMLMediaElement | undefined; | ||
| export declare const hasVolumeSupportAsync: (mediaEl?: HTMLMediaElement | undefined) => Promise<boolean>; | ||
| export declare function getCcSubTracks(el: MuxPlayerElement): TextTrack[]; | ||
| export declare const getLiveTime: (el: MuxPlayerElement) => number | undefined; | ||
@@ -22,0 +19,0 @@ export declare const seekToLive: (el: MuxPlayerElement) => void; |
@@ -8,3 +8,2 @@ import 'media-chrome'; | ||
| defaultHiddenCaptions: boolean; | ||
| hasCaptions: boolean; | ||
| forwardSeekOffset: number; | ||
@@ -11,0 +10,0 @@ backwardSeekOffset: number; |
@@ -17,5 +17,2 @@ import type MuxPlayerElement from '.'; | ||
| export declare function toPropName(attrName: string): string; | ||
| export declare const getTestMediaEl: (nodeName?: string) => HTMLMediaElement | undefined; | ||
| export declare const hasVolumeSupportAsync: (mediaEl?: HTMLMediaElement | undefined) => Promise<boolean>; | ||
| export declare function getCcSubTracks(el: MuxPlayerElement): TextTrack[]; | ||
| export declare const getLiveTime: (el: MuxPlayerElement) => number | undefined; | ||
@@ -22,0 +19,0 @@ export declare const seekToLive: (el: MuxPlayerElement) => void; |
@@ -8,3 +8,2 @@ import 'media-chrome'; | ||
| defaultHiddenCaptions: boolean; | ||
| hasCaptions: boolean; | ||
| forwardSeekOffset: number; | ||
@@ -11,0 +10,0 @@ backwardSeekOffset: number; |
| { | ||
| "name": "@mux/mux-player", | ||
| "version": "0.1.0-canary.10-8eff156", | ||
| "version": "0.1.0-canary.10-b05142f", | ||
| "description": "An open source Mux player web component that Just Works™", | ||
@@ -5,0 +5,0 @@ "main": "./dist/index.cjs.js", |
@@ -141,30 +141,30 @@ <p align="center"> | ||
| | Attribute | Type | Description | Default | | ||
| | -------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | | ||
| | `playback-id` | `string` | The playback ID for your Mux Asset or Mux Live Stream. This will also be used for automatically assigning a [poster image](https://docs.mux.com/guides/video/get-images-from-a-video) and (thumbnail previews)[https://docs.mux.com/guides/video/create-timeline-hover-previews]. For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id). | N/A | | ||
| | `env-key` | `string` | Your Mux Data environment key. Note that this is different than your API Key. Get your env key from the "Mux Data" part of your [Mux Environments Dashboard](https://dashboard.mux.com/environments). If undefined, the environment will be inferred based on your Mux Video asset. | `undefined` | | ||
| | `playback-token` | `string` | The playback token for signing the `src` URL. | N/A | | ||
| | `thumbnail-token` | `string` | The thumbnail token for signing the `poster` URL. | N/A | | ||
| | `storyboard-token` | `string` | The storyboard token for signing the storyboard URL. | N/A | | ||
| | `stream-type` | `"on-demand" \| "live" \| "ll-live"` | The type of stream associated with your Mux Asset. Used to determine what UI/controls to show and what optimizations to make for playback. | `"on-demand"` | | ||
| | `audio` | `boolean` | Indicate that you want an "audio only" UI/chrome. This may be used for audio-only assets or audio+video assets. | `false` | | ||
| | `metadata-video-title` | `string` | This is an arbitrary title for your video that will be passed in as metadata into Mux Data. Adding a title will give you useful context in your Mux Data dashboard. (optional, but encouraged) | N/A | | ||
| | `metadata-viewer-user-id` | `string` | If you have a logged-in user this should be an anonymized ID value that maps back to the user in your database. Take care to not expose personal identifiable information like names, usernames or email addresses. (optional, but encouraged) | N/A | | ||
| | `metadata-video-id` | `string` | This is an arbitrary ID that should map back to a record of this video in your database. | N/A | | ||
| | `debug` | `boolean` | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console. | `false` | | ||
| | `start-time` | `number` (seconds) | Specify where in the media's timeline you want playback to start. | `0` | | ||
| | `thumbnail-time` | `number` (seconds) | Offset for the poster image you want to show before loading media. If no `thumbnail-time` is specified, `start-time` will be used by default. NOTE: This feature currently cannot be used with `thumbnail-token`. | `0` | | ||
| | `prefer-mse` | `boolean` | Use the underlying playback engine (currently hls.js), even if native playback is supported (e.g. in Safari). For more, see the section on [`prefer-mse`](#prefer-mse) | `false` | | ||
| | `default-hidden-captions` | `boolean` | Hide captions by default instead of showing them on initial load (when available) | `false` | | ||
| | `forward-seek-offset` | `number` (seconds) | Offset applied to the forward seek button | `10` | | ||
| | `backward-seek-offset` | `number` (seconds) | Offset applied to the backward seek button | `10` | | ||
| | `primary-color` | (Any valid CSS color style) | The primary color used by the player | N/A | | ||
| | `secondary-color` | (Any valid CSS color style) | The secondary color used by the player | N/A | | ||
| | `volume` | `number` (0-1) | Sets the volume of the player from 0 to 1. | Varies | | ||
| | `muted` | `boolean` | Toggles the muted state of the player. | Varies | | ||
| | `autoplay` | `boolean` | Toggles whether or not media should auto-play when initially loaded | false | | ||
| | `playback-rate` | `number` | Applies a multiplier to the media's playback rate, either speeding it up or slowing it down. | `1` | | ||
| | `loop` | `boolean` | Automatically loop playback of your media when it finishes. | `false` | | ||
| | `poster` | `string` (URL) | Assigns a poster image URL. Will use the automatically generated poster based on your playback-id by default. | Derived | | ||
| | `beacon-collection-domain` | `string` (domain name) | Assigns a custom domain to be used for Mux Data collection. | N/A | | ||
| | Attribute | Type | Description | Default | | ||
| | -------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | | ||
| | `playback-id` | `string` | The playback ID for your Mux Asset or Mux Live Stream. This will also be used for automatically assigning a [poster image](https://docs.mux.com/guides/video/get-images-from-a-video) and (thumbnail previews)[https://docs.mux.com/guides/video/create-timeline-hover-previews]. For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id). | N/A | | ||
| | `env-key` | `string` | Your Mux Data environment key. Note that this is different than your API Key. Get your env key from the "Mux Data" part of your [Mux Environments Dashboard](https://dashboard.mux.com/environments). If undefined, the environment will be inferred based on your Mux Video asset. | `undefined` | | ||
| | `playback-token` | `string` | The playback token for signing the `src` URL. | N/A | | ||
| | `thumbnail-token` | `string` | The thumbnail token for signing the `poster` URL. | N/A | | ||
| | `storyboard-token` | `string` | The storyboard token for signing the storyboard URL. | N/A | | ||
| | `stream-type` | `"on-demand" \| "live" \| "ll-live" \| "dvr" \| "ll-dvr"` | The type of stream associated with your Mux Asset. Used to determine what UI/controls to show and what optimizations to make for playback. | `"on-demand"` | | ||
| | `audio` | `boolean` | Indicate that you want an "audio only" UI/chrome. This may be used for audio-only assets or audio+video assets. | `false` | | ||
| | `metadata-video-title` | `string` | This is an arbitrary title for your video that will be passed in as metadata into Mux Data. Adding a title will give you useful context in your Mux Data dashboard. (optional, but encouraged) | N/A | | ||
| | `metadata-viewer-user-id` | `string` | If you have a logged-in user this should be an anonymized ID value that maps back to the user in your database. Take care to not expose personal identifiable information like names, usernames or email addresses. (optional, but encouraged) | N/A | | ||
| | `metadata-video-id` | `string` | This is an arbitrary ID that should map back to a record of this video in your database. | N/A | | ||
| | `debug` | `boolean` | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console. | `false` | | ||
| | `start-time` | `number` (seconds) | Specify where in the media's timeline you want playback to start. | `0` | | ||
| | `thumbnail-time` | `number` (seconds) | Offset for the poster image you want to show before loading media. If no `thumbnail-time` is specified, `start-time` will be used by default. NOTE: This feature currently cannot be used with `thumbnail-token`. | `0` | | ||
| | `prefer-mse` | `boolean` | Use the underlying playback engine (currently hls.js), even if native playback is supported (e.g. in Safari). For more, see the section on [`prefer-mse`](#prefer-mse) | `false` | | ||
| | `default-hidden-captions` | `boolean` | Hide captions by default instead of showing them on initial load (when available) | `false` | | ||
| | `forward-seek-offset` | `number` (seconds) | Offset applied to the forward seek button | `10` | | ||
| | `backward-seek-offset` | `number` (seconds) | Offset applied to the backward seek button | `10` | | ||
| | `primary-color` | (Any valid CSS color style) | The primary color used by the player | N/A | | ||
| | `secondary-color` | (Any valid CSS color style) | The secondary color used by the player | N/A | | ||
| | `volume` | `number` (0-1) | Sets the volume of the player from 0 to 1. | Varies | | ||
| | `muted` | `boolean` | Toggles the muted state of the player. | Varies | | ||
| | `autoplay` | `boolean` | Toggles whether or not media should auto-play when initially loaded | false | | ||
| | `playback-rate` | `number` | Applies a multiplier to the media's playback rate, either speeding it up or slowing it down. | `1` | | ||
| | `loop` | `boolean` | Automatically loop playback of your media when it finishes. | `false` | | ||
| | `poster` | `string` (URL) | Assigns a poster image URL. Will use the automatically generated poster based on your playback-id by default. | Derived | | ||
| | `beacon-collection-domain` | `string` (domain name) | Assigns a custom domain to be used for Mux Data collection. | N/A | | ||
@@ -171,0 +171,0 @@ ### Methods |
@@ -68,26 +68,2 @@ import { toQuery, camelCase } from './utils'; | ||
| let testMediaEl: HTMLMediaElement | undefined; | ||
| export const getTestMediaEl = (nodeName = 'video') => { | ||
| if (testMediaEl) return testMediaEl; | ||
| if (typeof window !== 'undefined') { | ||
| testMediaEl = document.createElement(nodeName as 'video' | 'audio'); | ||
| } | ||
| return testMediaEl; | ||
| }; | ||
| export const hasVolumeSupportAsync = async (mediaEl: HTMLMediaElement | undefined = getTestMediaEl()) => { | ||
| if (!mediaEl) return false; | ||
| const prevVolume = mediaEl.volume; | ||
| mediaEl.volume = prevVolume / 2 + 0.1; | ||
| return new Promise<boolean>((resolve, reject) => { | ||
| setTimeout(() => { | ||
| resolve(mediaEl.volume !== prevVolume); | ||
| }, 0); | ||
| }); | ||
| }; | ||
| export function getCcSubTracks(el: MuxPlayerElement) { | ||
| return Array.from(el.media?.textTracks ?? []).filter(({ kind }) => kind === 'subtitles' || kind === 'captions'); | ||
| } | ||
| export const getLiveTime = (el: MuxPlayerElement) => { | ||
@@ -94,0 +70,0 @@ const { media } = el; |
@@ -9,10 +9,3 @@ // import playback-core here to make sure that the polyfill is loaded | ||
| import VideoApiElement, { initVideoApi } from './video-api'; | ||
| import { | ||
| getCcSubTracks, | ||
| getPlayerVersion, | ||
| hasVolumeSupportAsync, | ||
| isInLiveWindow, | ||
| seekToLive, | ||
| toPropName, | ||
| } from './helpers'; | ||
| import { getPlayerVersion, isInLiveWindow, seekToLive, toPropName } from './helpers'; | ||
| import { template } from './template'; | ||
@@ -123,3 +116,2 @@ import { render } from './html'; | ||
| playerSize: getPlayerSize(el.mediaController ?? el), | ||
| hasCaptions: !!getCcSubTracks(el).length, | ||
| // NOTE: In order to guarantee all expected metadata props are set "from the outside" when used | ||
@@ -152,4 +144,2 @@ // and to guarantee they'll all be set *before* the playback id is set, using attr values here (CJP) | ||
| ...initialState, | ||
| supportsAirPlay: false, | ||
| supportsVolume: false, | ||
| onCloseErrorDialog: () => this.#setState({ dialog: undefined, isDialogOpen: false }), | ||
@@ -219,4 +209,2 @@ onInitFocusDialog: (e) => { | ||
| this.#setUpCaptionsButton(); | ||
| this.#setUpAirplayButton(); | ||
| this.#setUpVolumeRange(); | ||
| this.#monitorLiveWindow(); | ||
@@ -499,18 +487,2 @@ this.#userInactive = this.mediaController?.hasAttribute('user-inactive') ?? true; | ||
| #setUpAirplayButton() { | ||
| if (!!(globalThis as any).WebKitPlaybackTargetAvailabilityEvent) { | ||
| const onPlaybackTargetAvailability = (evt: any) => { | ||
| const supportsAirPlay = evt.availability === 'available'; | ||
| this.#setState({ supportsAirPlay }); | ||
| }; | ||
| this.media?.addEventListener('webkitplaybacktargetavailabilitychanged', onPlaybackTargetAvailability); | ||
| } | ||
| } | ||
| async #setUpVolumeRange() { | ||
| const supportsVolume = await hasVolumeSupportAsync(); | ||
| this.#setState({ supportsVolume }); | ||
| } | ||
| attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string) { | ||
@@ -517,0 +489,0 @@ if (!this.#isInit) { |
@@ -21,3 +21,2 @@ import 'media-chrome'; | ||
| defaultHiddenCaptions: boolean; | ||
| hasCaptions: boolean; | ||
| forwardSeekOffset: number; | ||
@@ -198,3 +197,3 @@ backwardSeekOffset: number; | ||
| <media-control-bar slot="top-chrome"> | ||
| ${props.hasCaptions ? MediaCaptionsButton(props) : html``} | ||
| ${MediaCaptionsButton(props)} | ||
| <div class="mxp-spacer"></div> | ||
@@ -218,3 +217,3 @@ ${MediaAirplayButton()} | ||
| <media-control-bar slot="top-chrome" style="justify-content: flex-end;"> | ||
| ${props.hasCaptions ? MediaCaptionsButton(props) : html``} | ||
| ${MediaCaptionsButton(props)} | ||
| ${MediaAirplayButton()} | ||
@@ -256,3 +255,3 @@ <media-cast-button></media-cast-button> | ||
| <media-playback-rate-button></media-playback-rate-button> | ||
| ${props.hasCaptions ? MediaCaptionsButton(props) : html``} | ||
| ${MediaCaptionsButton(props)} | ||
| ${MediaAirplayButton()} | ||
@@ -274,3 +273,3 @@ <media-cast-button></media-cast-button> | ||
| <div class="mxp-spacer"></div> | ||
| ${props.hasCaptions ? MediaCaptionsButton(props) : html``} | ||
| ${MediaCaptionsButton(props)} | ||
| ${MediaAirplayButton()} | ||
@@ -303,3 +302,3 @@ <media-cast-button></media-cast-button> | ||
| <div class="mxp-spacer"></div> | ||
| ${props.hasCaptions ? MediaCaptionsButton(props) : html``} | ||
| ${MediaCaptionsButton(props)} | ||
| ${MediaAirplayButton()} | ||
@@ -318,3 +317,3 @@ <media-cast-button></media-cast-button> | ||
| <media-control-bar slot="top-chrome" style="justify-content: flex-end;"> | ||
| ${props.hasCaptions ? MediaCaptionsButton(props) : html``} | ||
| ${MediaCaptionsButton(props)} | ||
| ${MediaAirplayButton()} | ||
@@ -354,3 +353,3 @@ <media-cast-button></media-cast-button> | ||
| <div class="mxp-spacer"></div> | ||
| ${props.hasCaptions ? MediaCaptionsButton(props) : html``} | ||
| ${MediaCaptionsButton(props)} | ||
| ${MediaAirplayButton()} | ||
@@ -370,3 +369,2 @@ <media-cast-button></media-cast-button> | ||
| defaultHiddenCaptions: el.hasAttribute('default-hidden-captions'), | ||
| hasCaptions: el.hasAttribute('has-captions'), | ||
| forwardSeekOffset: el.getAttribute('forward-seek-offset'), | ||
@@ -385,3 +383,2 @@ backwardSeekOffset: el.getAttribute('backward-seek-offset'), | ||
| 'default-hidden-captions', | ||
| 'has-captions', | ||
| 'forward-seek-offset', | ||
@@ -388,0 +385,0 @@ 'backward-seek-offset', |
@@ -31,3 +31,2 @@ import './media-theme-mux/media-theme-mux'; | ||
| player-size="${props.playerSize}" | ||
| has-captions="${props.hasCaptions}" | ||
| default-hidden-captions="${props.defaultHiddenCaptions}" | ||
@@ -34,0 +33,0 @@ forward-seek-offset="${props.forwardSeekOffset}" |
@@ -11,5 +11,2 @@ import type MuxVideoElement, { MediaError } from '@mux/mux-video'; | ||
| showLoading: boolean; | ||
| hasCaptions: boolean; | ||
| supportsAirPlay: boolean; | ||
| supportsVolume: boolean; | ||
| thumbnailTime: number; | ||
@@ -16,0 +13,0 @@ primaryColor: string; |
@@ -14,3 +14,3 @@ import { assert } from '@open-wc/testing'; | ||
| minify(div.innerHTML), | ||
| '<media-theme-mux class="size-" stream-type="" player-size="" has-captions="" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version=""></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n Live\n </button><mxp-dialog no-auto-hide="" open=""><p></p></mxp-dialog></media-theme-mux>' | ||
| '<media-theme-mux class="size-" stream-type="" player-size="" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version=""></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n Live\n </button><mxp-dialog no-auto-hide="" open=""><p></p></mxp-dialog></media-theme-mux>' | ||
| ); | ||
@@ -33,3 +33,3 @@ }); | ||
| minify(div.innerHTML), | ||
| '<media-theme-mux class="size-extra-small" stream-type="on-demand" player-size="extra-small" has-captions="" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n Live\n </button><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme-mux>' | ||
| '<media-theme-mux class="size-extra-small" stream-type="on-demand" player-size="extra-small" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n Live\n </button><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme-mux>' | ||
| ); | ||
@@ -50,3 +50,3 @@ }); | ||
| minify(div.innerHTML), | ||
| '<media-theme-mux class="size-large" stream-type="on-demand" player-size="large" has-captions="" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n Live\n </button><mxp-dialog no-auto-hide="" open=""><p></p></mxp-dialog></media-theme-mux>' | ||
| '<media-theme-mux class="size-large" stream-type="on-demand" player-size="large" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n Live\n </button><mxp-dialog no-auto-hide="" open=""><p></p></mxp-dialog></media-theme-mux>' | ||
| ); | ||
@@ -53,0 +53,0 @@ }); |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-0.35%
1703154
- Lines of code
- decreased by-0.51%
13886
No dependency changes