@mux/mux-player 0.1.0-beta.23 → 0.1.0-beta.26

package/src/template.ts

@@ -1,7 +1,12 @@
-import './media-theme-mux/media-theme-mux';
+import { parts } from './media-theme-mux/media-theme-mux';
 import './dialog';
-import { getSrcFromPlaybackId, getPosterURLFromPlaybackId, getStoryboardURLFromPlaybackId } from './helpers';
-import { html } from './html';
+import {
+  castThemeName,
+  getSrcFromPlaybackId,
+  getPosterURLFromPlaybackId,
+  getStoryboardURLFromPlaybackId,
+} from './helpers';
+import { html, unsafeStatic } from './html';
 // @ts-ignore
 import cssStr from './styles.css';
 import { i18n, stylePropsToString } from './utils';
@@ -16,21 +21,26 @@ export const template = (props: MuxTemplateProps) => html`
   ${content(props)}
 `;
 
+const flatCSSParts = Object.values(parts).flatMap((group) => group.split(' '));
+const forwardUniqueCSSParts = [...new Set(flatCSSParts)].join(', ');
+
 export const content = (props: MuxTemplateProps) => html`
-  <media-theme-mux
+  <${unsafeStatic(castThemeName(props.theme) ?? 'media-theme-mux')}
+    nohotkeys="${props.noHotKeys ?? false}"
     audio="${props.audio || false}"
-    style="${stylePropsToString({
-      '--primary-color': props.primaryColor,
-      '--secondary-color': props.secondaryColor,
-      '--mux-time-range-padding': props.secondaryColor ? '0' : null,
-      '--media-range-track-border-radius': props.secondaryColor ? '0' : null,
-    }) ?? false}"
-    class="size-${props.playerSize}"
+    style="${
+      stylePropsToString({
+        '--primary-color': props.primaryColor,
+        '--secondary-color': props.secondaryColor,
+      }) ?? false
+    }"
+    class="size-${props.playerSize}${props.secondaryColor ? ' two-tone' : ''}"
     stream-type="${props.streamType}"
     player-size="${props.playerSize}"
     default-hidden-captions="${props.defaultHiddenCaptions}"
     forward-seek-offset="${props.forwardSeekOffset}"
     backward-seek-offset="${props.backwardSeekOffset}"
+    exportparts="seek-live, ${forwardUniqueCSSParts}"
   >
     <mux-video
       slot="media"
@@ -43,52 +53,62 @@ export const content = (props: MuxTemplateProps) => html`
       debug="${props.debug ?? false}"
       prefer-mse="${props.preferMse ?? false}"
       start-time="${props.startTime != null ? props.startTime : false}"
-      metadata-video-id="${props.metadataVideoId ?? props.metadata?.video_id ?? false}"
-      metadata-video-title="${props.metadataVideoTitle ?? props.metadata?.video_title ?? false}"
-      metadata-viewer-user-id="${props.metadataViewerUserId ?? props.metadata?.viewer_user_id ?? false}"
+      metadata-video-id="${props.metadataVideoId ?? false}"
+      metadata-video-title="${props.metadataVideoTitle ?? false}"
+      metadata-viewer-user-id="${props.metadataViewerUserId ?? false}"
       beacon-collection-domain="${props.beaconCollectionDomain ?? false}"
       player-software-name="${props.playerSoftwareName}"
       player-software-version="${props.playerSoftwareVersion}"
       env-key="${props.envKey ?? false}"
       stream-type="${props.streamType ?? false}"
       custom-domain="${props.customDomain ?? false}"
-      src="${!!props.src
-        ? props.src
-        : props.playbackId
-        ? getSrcFromPlaybackId(props.playbackId, { domain: props.customDomain, token: props.tokens.playback })
-        : false}"
-      poster="${!!props.poster
-        ? props.poster
-        : props.playbackId && !props.audio
-        ? getPosterURLFromPlaybackId(props.playbackId, {
-            domain: props.customDomain,
-            thumbnailTime: props.thumbnailTime ?? props.startTime,
-            token: props.tokens.thumbnail,
-          })
-        : false}"
-      cast-src="${!!props.src
-        ? props.src
-        : props.playbackId
-        ? getSrcFromPlaybackId(props.playbackId, { domain: props.customDomain, token: props.tokens.playback })
-        : false}"
+      src="${
+        !!props.src
+          ? props.src
+          : props.playbackId
+          ? getSrcFromPlaybackId(props.playbackId, { domain: props.customDomain, token: props.tokens.playback })
+          : false
+      }"
+      poster="${
+        !!props.poster
+          ? props.poster
+          : props.playbackId && !props.audio
+          ? getPosterURLFromPlaybackId(props.playbackId, {
+              domain: props.customDomain,
+              thumbnailTime: props.thumbnailTime ?? props.startTime,
+              token: props.tokens.thumbnail,
+            })
+          : false
+      }"
+      cast-src="${
+        !!props.src
+          ? props.src
+          : props.playbackId
+          ? getSrcFromPlaybackId(props.playbackId, { domain: props.customDomain, token: props.tokens.playback })
+          : false
+      }"
       cast-stream-type="${[StreamTypes.LIVE, StreamTypes.LL_LIVE].includes(props.streamType as any) ? 'live' : false}"
     >
-      ${props.playbackId &&
-      !props.audio &&
-      ![StreamTypes.LIVE, StreamTypes.LL_LIVE, StreamTypes.DVR, StreamTypes.LL_DVR].includes(props.streamType as any)
-        ? html`<track
-            label="thumbnails"
-            default
-            kind="metadata"
-            src="${getStoryboardURLFromPlaybackId(props.playbackId, {
-              domain: props.customDomain,
-              token: props.tokens.storyboard,
-            })}"
-          />`
-        : html``}
+      ${
+        props.playbackId &&
+        !props.audio &&
+        ![StreamTypes.LIVE, StreamTypes.LL_LIVE, StreamTypes.DVR, StreamTypes.LL_DVR].includes(props.streamType as any)
+          ? html`<track
+              label="thumbnails"
+              default
+              kind="metadata"
+              src="${getStoryboardURLFromPlaybackId(props.playbackId, {
+                domain: props.customDomain,
+                token: props.tokens.storyboard,
+              })}"
+            />`
+          : html``
+      }
     </mux-video>
     <button
       slot="seek-to-live-button"
+      part="seek-live button"
+      class="mxp-seek-to-live-button"
       aria-disabled="${props.inLiveWindow}"
       onclick="${function (this: HTMLButtonElement, evt: Event) {
         props.onSeekToLive?.(evt);
@@ -97,7 +117,6 @@ export const content = (props: MuxTemplateProps) => html`
           (this as HTMLButtonElement).dispatchEvent(playRequestEvt);
         }
       }}"
-      class="mxp-seek-to-live-button"
     >
       Live
     </button>
@@ -110,16 +129,18 @@ export const content = (props: MuxTemplateProps) => html`
       ${props.dialog?.title ? html`<h3>${props.dialog.title}</h3>` : html``}
       <p>
         ${props.dialog?.message}
-        ${props.dialog?.linkUrl
-          ? html`<a
-              href="${props.dialog.linkUrl}"
-              target="_blank"
-              rel="external noopener"
-              aria-label="${props.dialog.linkText ?? ''} ${i18n(`(opens in a new window)`)}"
-              >${props.dialog.linkText ?? props.dialog.linkUrl}</a
-            >`
-          : html``}
+        ${
+          props.dialog?.linkUrl
+            ? html`<a
+                href="${props.dialog.linkUrl}"
+                target="_blank"
+                rel="external noopener"
+                aria-label="${props.dialog.linkText ?? ''} ${i18n(`(opens in a new window)`)}"
+                >${props.dialog.linkText ?? props.dialog.linkUrl}</a
+              >`
+            : html``
+        }
       </p>
     </mxp-dialog>
-  </media-theme-mux>
+  </${unsafeStatic(castThemeName(props.theme) ?? 'media-theme-mux')}>
 `;

package/src/types.d.ts

@@ -1,11 +1,13 @@
 import type MuxVideoElement, { MediaError } from '@mux/mux-video';
 
 export type MuxPlayerProps = Partial<MuxVideoElement> & {
+  nohotkeys?: boolean;
   preferMse?: boolean;
 };
 
 export type MuxTemplateProps = Partial<MuxPlayerProps> & {
   audio: boolean;
+  theme?: string;
   playerSize: string;
   showLoading: boolean;
   thumbnailTime: number;
@@ -28,6 +30,7 @@ export type MuxTemplateProps = Partial<MuxPlayerProps> & {
   metadataVideoId: string;
   metadataVideoTitle: string;
   metadataViewerUserId: string;
+  noHotKeys: boolean;
 };
 
 export type DialogOptions = {

package/src/video-api.ts

@@ -1,6 +1,7 @@
 import { VideoEvents } from '@mux/mux-video';
 import type MuxVideoElement from '@mux/mux-video';
 import * as logger from './logger';
+import { toNumberOrUndefined } from './utils';
 
 export type CastOptions = {
   receiverApplicationId: string;
@@ -99,6 +100,7 @@ class VideoApiElement extends HTMLElement {
       case CustomVideoAttributes.MUTED: {
         if (this.media) {
           this.media.muted = newValue != null;
+          this.media.defaultMuted = newValue != null;
         }
         return;
       }
@@ -113,6 +115,7 @@ class VideoApiElement extends HTMLElement {
         const val = +newValue;
         if (this.media && !Number.isNaN(val)) {
           this.media.playbackRate = val;
+          this.media.defaultPlaybackRate = val;
         }
         return;
       }
@@ -217,6 +220,19 @@ class VideoApiElement extends HTMLElement {
     }
   }
 
+  get defaultPlaybackRate() {
+    return toNumberOrUndefined(this.getAttribute(CustomVideoAttributes.PLAYBACKRATE)) ?? 1;
+  }
+
+  set defaultPlaybackRate(val) {
+    if (val != null) {
+      this.setAttribute(CustomVideoAttributes.PLAYBACKRATE, `${val}`);
+    } else {
+      // Remove boolean attribute if false, 0, '', null, undefined.
+      this.removeAttribute(CustomVideoAttributes.PLAYBACKRATE);
+    }
+  }
+
   get crossOrigin() {
     return getVideoAttribute(this, AllowedVideoAttributes.CROSSORIGIN);
   }
@@ -252,10 +268,20 @@ class VideoApiElement extends HTMLElement {
   }
 
   get muted() {
-    return getVideoAttribute(this, AllowedVideoAttributes.MUTED) != null;
+    return this.media?.muted ?? false;
   }
 
   set muted(val) {
+    if (this.media) {
+      this.media.muted = Boolean(val);
+    }
+  }
+
+  get defaultMuted() {
+    return getVideoAttribute(this, AllowedVideoAttributes.MUTED) != null;
+  }
+
+  set defaultMuted(val) {
     if (val) {
       this.setAttribute(AllowedVideoAttributes.MUTED, '');
     } else {

package/test/player.test.js

@@ -283,17 +283,29 @@ describe('<mux-player>', () => {
     assert(muxVideo.muted, 'muxVideo.muted is true');
     assert(nativeVideo.muted, 'nativeVideo.muted is true');
 
+    assert(player.defaultMuted, 'player.defaultMuted is true');
+    assert(muxVideo.defaultMuted, 'muxVideo.defaultMuted is true');
+    assert(nativeVideo.defaultMuted, 'nativeVideo.defaultMuted is true');
+
     player.removeAttribute('muted');
 
     assert(!player.muted, 'player.muted is false');
     assert(!muxVideo.muted, 'muxVideo.muted is false');
     assert(!nativeVideo.muted, 'nativeVideo.muted is false');
 
+    assert(!player.defaultMuted, 'player.defaultMuted is false');
+    assert(!muxVideo.defaultMuted, 'muxVideo.defaultMuted is false');
+    assert(!nativeVideo.defaultMuted, 'nativeVideo.defaultMuted is false');
+
     player.setAttribute('muted', '');
 
     assert(player.muted, 'player.muted is true');
     assert(muxVideo.muted, 'muxVideo.muted is true');
     assert(nativeVideo.muted, 'nativeVideo.muted is true');
+
+    assert(player.defaultMuted, 'player.defaultMuted is true');
+    assert(muxVideo.defaultMuted, 'muxVideo.defaultMuted is true');
+    assert(nativeVideo.defaultMuted, 'nativeVideo.defaultMuted is true');
   });
 
   it('volume attribute behaves like expected', async function () {
@@ -342,6 +354,28 @@ describe('<mux-player>', () => {
     assert.equal(nativeVideo.playbackRate, 0.7, 'nativeVideo.playbackRate is 0.7');
   });
 
+  it('defaultPlaybackRate property behaves like expected', async function () {
+    const player = await fixture(`<mux-player
+      playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
+      stream-type="on-demand"
+    ></mux-player>`);
+
+    assert.equal(player.defaultPlaybackRate, 1);
+
+    const muxVideo = player.media;
+    const nativeVideo = muxVideo.shadowRoot.querySelector('video');
+
+    assert.equal(player.defaultPlaybackRate, 1, 'player.defaultPlaybackRate is 1');
+    assert.equal(muxVideo.defaultPlaybackRate, 1, 'muxVideo.defaultPlaybackRate is 1');
+    assert.equal(nativeVideo.defaultPlaybackRate, 1, 'nativeVideo.defaultPlaybackRate is 1');
+
+    player.defaultPlaybackRate = 0.7;
+
+    assert.equal(player.defaultPlaybackRate, 0.7, 'player.defaultPlaybackRate is 0.7');
+    assert.equal(muxVideo.defaultPlaybackRate, 0.7, 'muxVideo.defaultPlaybackRate is 0.7');
+    assert.equal(nativeVideo.defaultPlaybackRate, 0.7, 'nativeVideo.defaultPlaybackRate is 0.7');
+  });
+
   it("signing tokens generate correct asset URL's", async function () {
     // tokens expire in 10 years
     const player = await fixture(`<mux-player

package/test/template.test.js

@@ -7,11 +7,13 @@ const minify = (html) => html.trim().replace(/>\s+</g, '><');
 describe('<mux-player> template render', () => {
   const div = document.createElement('div');
 
+  const exportParts = `seek-live, layer, media-layer, poster-layer, vertical-layer, centered-layer, center, play, button, seek-backward, seek-forward, mute, captions, airplay, pip, fullscreen, cast, playbackrate, volume, range, time, display`;
+
   it('default template without props', function () {
     render(content({}), div);
     assert.equal(
       minify(div.innerHTML),
-      '<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>'
+      `<media-theme-mux class="size-" stream-type="" player-size="" default-hidden-captions="" forward-seek-offset="" backward-seek-offset="" exportparts="${exportParts}"><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version=""></mux-video><button slot="seek-to-live-button" part="seek-live button" class="mxp-seek-to-live-button" aria-disabled="">\n      Live\n    </button><mxp-dialog no-auto-hide="" open=""><p></p></mxp-dialog></media-theme-mux>`
     );
   });
 
@@ -29,7 +31,7 @@ describe('<mux-player> template render', () => {
     div.querySelectorAll('svg').forEach((svg) => svg.remove());
     assert.equal(
       minify(div.innerHTML),
-      '<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>'
+      `<media-theme-mux class="size-extra-small" stream-type="on-demand" player-size="extra-small" default-hidden-captions="" forward-seek-offset="" backward-seek-offset="" exportparts="${exportParts}"><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" part="seek-live button" class="mxp-seek-to-live-button" aria-disabled="">\n      Live\n    </button><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme-mux>`
     );
   });
 
@@ -45,7 +47,7 @@ describe('<mux-player> template render', () => {
     div.querySelectorAll('svg').forEach((svg) => svg.remove());
     assert.equal(
       minify(div.innerHTML),
-      '<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>'
+      `<media-theme-mux class="size-large" stream-type="on-demand" player-size="large" default-hidden-captions="" forward-seek-offset="" backward-seek-offset="" exportparts="${exportParts}"><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" part="seek-live button" class="mxp-seek-to-live-button" aria-disabled="">\n      Live\n    </button><mxp-dialog no-auto-hide="" open=""><p></p></mxp-dialog></media-theme-mux>`
     );
   });
 
@@ -64,7 +66,7 @@ describe('<mux-player> template render', () => {
     div.querySelectorAll('svg').forEach((svg) => svg.remove());
     assert.equal(
       minify(div.innerHTML),
-      '<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=""><h3>Errr</h3><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="" exportparts="${exportParts}"><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" part="seek-live button" class="mxp-seek-to-live-button" aria-disabled="">\n      Live\n    </button><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme-mux>`
     );
   });
 });