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

package/src/media-theme-mux/media-theme-mux.ts

@@ -1,4 +1,4 @@
-import 'media-chrome';
+import { MediaTheme } from 'media-chrome';
 import { html, render } from '../html';
 import '../media-chrome/time-display';
 
@@ -14,26 +14,88 @@ const MediaChromeSizes = {
 };
 
 type ThemeMuxTemplateProps = {
-  streamType: string;
+  streamType: string | null;
+  nohotkeys?: boolean;
   audio: boolean;
-  playerSize: string;
+  playerSize: string | null;
   defaultHiddenCaptions: boolean;
-  forwardSeekOffset: number;
-  backwardSeekOffset: number;
+  forwardSeekOffset: string | null;
+  backwardSeekOffset: string | null;
 };
 
-const template = (props: ThemeMuxTemplateProps) => html`
-  <style>
-    ${cssStr}
-  </style>
-
-  <media-controller audio="${props.audio || false}" class="size-${props.playerSize}">
-    <slot name="media" slot="media"></slot>
-    <media-loading-indicator slot="centered-chrome" no-auto-hide></media-loading-indicator>
-    ${ChromeRenderer(props)}
-    <slot></slot>
-  </media-controller>
-`;
+export const parts = {
+  mediaChrome: 'layer media-layer poster-layer vertical-layer centered-layer',
+  centerPlay: 'center play button',
+  centerSeekBackward: 'center seek-backward button',
+  centerSeekForward: 'center seek-forward button',
+  play: 'play button',
+  seekBackward: 'seek-backward button',
+  seekForward: 'seek-forward button',
+  mute: 'mute button',
+  captions: 'captions button',
+  airplay: 'airplay button',
+  pip: 'pip button',
+  fullscreen: 'fullscreen button',
+  cast: 'cast button',
+  playbackRate: 'playbackrate button',
+  volumeRange: 'volume range',
+  timeRange: 'time range',
+  timeDisplay: 'time display',
+};
+
+export default class MediaThemeMux extends MediaTheme {
+  static get observedAttributes() {
+    return [
+      'audio',
+      'nohotkeys',
+      'stream-type',
+      'player-size',
+      'default-hidden-captions',
+      'forward-seek-offset',
+      'backward-seek-offset',
+    ];
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const props = {
+      audio: this.hasAttribute('audio'),
+      nohotkeys: this.hasAttribute('nohotkeys'),
+      streamType: this.getAttribute('stream-type'),
+      playerSize: this.getAttribute('player-size'),
+      defaultHiddenCaptions: this.hasAttribute('default-hidden-captions'),
+      forwardSeekOffset: this.getAttribute('forward-seek-offset'),
+      backwardSeekOffset: this.getAttribute('backward-seek-offset'),
+    };
+
+    render(
+      html`
+        <style>
+          ${cssStr}
+        </style>
+        <media-controller
+          nohotkeys="${props.nohotkeys || false}"
+          audio="${props.audio || false}"
+          class="size-${props.playerSize}"
+          exportparts="${parts.mediaChrome.split(' ').join(', ')}"
+        >
+          <slot name="media" slot="media"></slot>
+          <media-loading-indicator slot="centered-chrome" no-auto-hide></media-loading-indicator>
+          ${ChromeRenderer(props)}
+          <slot></slot>
+        </media-controller>
+      `,
+      this.shadowRoot as Node
+    );
+  }
+}
+
+if (!customElements.get('media-theme-mux')) {
+  customElements.define('media-theme-mux', MediaThemeMux);
+}
 
 const ChromeRenderer = (props: ThemeMuxTemplateProps) => {
   const { streamType, playerSize, audio } = props;
@@ -41,7 +103,7 @@ const ChromeRenderer = (props: ThemeMuxTemplateProps) => {
     switch (streamType) {
       case StreamTypes.LIVE:
       case StreamTypes.LL_LIVE: {
-        return AudioLiveChrome(props);
+        return AudioLiveChrome();
       }
       case StreamTypes.DVR:
       case StreamTypes.LL_DVR: {
@@ -93,30 +155,32 @@ const ChromeRenderer = (props: ThemeMuxTemplateProps) => {
 };
 
 // prettier-ignore
-const MediaPlayButton = () => html`
-  <media-play-button>
+const MediaPlayButton = ({ part = parts.play } = {}) => html`
+  <media-play-button part="${part}">
     ${icons.Play()}
     ${icons.Pause()}
   </media-play-button>
 `;
 
 // prettier-ignore
-const MediaSeekBackwardButton = (props: Partial<ThemeMuxTemplateProps>) => html`
-  <media-seek-backward-button seek-offset="${props.backwardSeekOffset}">
-    ${icons.SeekBackward({ value: props.backwardSeekOffset })}
+type SeekBackwardButtonProps = { backwardSeekOffset: string, part?: string };
+const MediaSeekBackwardButton = ({ backwardSeekOffset, part = parts.seekBackward }: SeekBackwardButtonProps) => html`
+  <media-seek-backward-button seek-offset="${backwardSeekOffset}" part="${part}">
+    ${icons.SeekBackward({ value: backwardSeekOffset })}
   </media-seek-backward-button>
 `;
 
 // prettier-ignore
-const MediaSeekForwardButton = (props: Partial<ThemeMuxTemplateProps>) => html`
-  <media-seek-forward-button seek-offset="${props.forwardSeekOffset}">
-    ${icons.SeekForward({ value: props.forwardSeekOffset })}
+type SeekForwardButtonProps = { forwardSeekOffset: string, part?: string };
+const MediaSeekForwardButton = ({ forwardSeekOffset, part = parts.seekForward }: SeekForwardButtonProps) => html`
+  <media-seek-forward-button seek-offset="${forwardSeekOffset}" part="${part}">
+    ${icons.SeekForward({ value: forwardSeekOffset })}
   </media-seek-forward-button>
 `;
 
 // prettier-ignore
 const MediaMuteButton = () => html`
-  <media-mute-button>
+  <media-mute-button part="${parts.mute}">
     ${icons.VolumeHigh()}
     ${icons.VolumeMedium()}
     ${icons.VolumeLow()}
@@ -126,67 +190,100 @@ const MediaMuteButton = () => html`
 
 // prettier-ignore
 const MediaCaptionsButton = (props: ThemeMuxTemplateProps) => html`
-<media-captions-button default-showing="${!props.defaultHiddenCaptions}" >
+<media-captions-button default-showing="${!props.defaultHiddenCaptions}" part="${parts.captions}">
   ${icons.CaptionsOff()}
   ${icons.CaptionsOn()}
 </media-captions-button>`;
 
 // prettier-ignore
 const MediaAirplayButton = () => html`
-<media-airplay-button>
+<media-airplay-button part="${parts.airplay}">
   ${icons.Airplay()}
 </media-airplay-button>`;
 
 // prettier-ignore
 const MediaPipButton = () => html`
-<media-pip-button>
+<media-pip-button part="${parts.pip}">
   ${icons.PipEnter()}
   ${icons.PipExit()}
 </media-pip-button>`;
 
 // prettier-ignore
 const MediaFullscreenButton = () => html`
-<media-fullscreen-button>
+<media-fullscreen-button part="${parts.fullscreen}">
   ${icons.FullscreenEnter()}
   ${icons.FullscreenExit()}
 </media-fullscreen-button>`;
 
+// prettier-ignore
+const MediaCastButton = () => html`
+<media-cast-button part="${parts.cast}">
+  ${icons.CastEnter()}
+  ${icons.CastExit()}
+</media-cast-button>`;
+
+// prettier-ignore
+const MediaPlaybackRateButton = () => html`
+<media-playback-rate-button part="${parts.playbackRate}">
+</media-playback-rate-button>`;
+
+// prettier-ignore
+const MediaVolumeRange = () => html`
+<media-volume-range part="${parts.volumeRange}">
+</media-volume-range>`;
+
+// prettier-ignore
+const MediaTimeRange = () => html`
+<media-time-range part="${parts.timeRange}">
+</media-time-range>`;
+
+// prettier-ignore
+const TimeDisplay = () => html`
+<mxp-time-display part="${parts.timeDisplay}">
+</mxp-time-display>`;
+
+// prettier-ignore
 export const AudioVodChrome = (props: ThemeMuxTemplateProps) => html`
   <media-control-bar>
-    ${MediaPlayButton()} ${MediaSeekBackwardButton(props)} ${MediaSeekForwardButton(props)}
-    <mxp-time-display></mxp-time-display>
-    <media-time-range></media-time-range>
+    ${MediaPlayButton()}
+    ${MediaSeekBackwardButton(props as SeekBackwardButtonProps)}
+    ${MediaSeekForwardButton(props as SeekForwardButtonProps)}
+    ${TimeDisplay()}
+    ${MediaTimeRange()}
     ${MediaMuteButton()}
-    <media-volume-range></media-volume-range>
-    <media-playback-rate-button></media-playback-rate-button>
+    ${MediaVolumeRange()}
+    ${MediaPlaybackRateButton()}
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
   </media-control-bar>
 `;
 
+// prettier-ignore
 export const AudioDvrChrome = (props: ThemeMuxTemplateProps) => html`
   <media-control-bar>
     ${MediaPlayButton()}
     <slot name="seek-to-live-button"></slot>
-    ${MediaSeekBackwardButton(props)} ${MediaSeekForwardButton(props)}
-    <mxp-time-display></mxp-time-display>
-    <media-time-range></media-time-range>
+    ${MediaSeekBackwardButton(props as SeekBackwardButtonProps)}
+    ${MediaSeekForwardButton(props as SeekForwardButtonProps)}
+    ${TimeDisplay()}
+    ${MediaTimeRange()}
     ${MediaMuteButton()}
-    <media-volume-range></media-volume-range>
-    <media-playback-rate-button></media-playback-rate-button>
+    ${MediaVolumeRange()}
+    ${MediaPlaybackRateButton()}
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
   </media-control-bar>
 `;
 
-export const AudioLiveChrome = (_props: ThemeMuxTemplateProps) => html`
+// prettier-ignore
+export const AudioLiveChrome = () => html`
   <media-control-bar>
     ${MediaPlayButton()}
     <slot name="seek-to-live-button"></slot>
     ${MediaMuteButton()}
-    <media-volume-range></media-volume-range>
+    ${MediaVolumeRange()}
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
   </media-control-bar>
 `;
 
@@ -196,11 +293,11 @@ export const VodChromeExtraSmall = (props: ThemeMuxTemplateProps) => html`
     ${MediaCaptionsButton(props)}
     <div class="mxp-spacer"></div>
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
   </media-control-bar>
   <div slot="centered-chrome" class="mxp-center-controls">
-    ${MediaPlayButton()}
+    ${MediaPlayButton({ part: parts.centerPlay })}
   </div>
   <media-control-bar>
     ${MediaMuteButton()}
@@ -214,21 +311,21 @@ export const VodChromeSmall = (props: ThemeMuxTemplateProps) => html`
   <media-control-bar slot="top-chrome" style="justify-content: flex-end;">
     ${MediaCaptionsButton(props)}
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
   </media-control-bar>
   <div slot="centered-chrome" class="mxp-center-controls">
-    ${MediaSeekBackwardButton(props)}
-    ${MediaPlayButton()}
-    ${MediaSeekForwardButton(props)}
+    ${MediaSeekBackwardButton({ ...props, part: parts.centerSeekBackward } as SeekBackwardButtonProps)}
+    ${MediaPlayButton({ part: parts.centerPlay })}
+    ${MediaSeekForwardButton({ ...props, part: parts.centerSeekForward } as SeekForwardButtonProps)}
   </div>
-  <media-time-range></media-time-range>
+  ${MediaTimeRange()}
   <media-control-bar>
-    <mxp-time-display></mxp-time-display>
+    ${TimeDisplay()}
     ${MediaMuteButton()}
-    <media-volume-range></media-volume-range>
+    ${MediaVolumeRange()}
     <div class="mxp-spacer"></div>
-    <media-playback-rate-button></media-playback-rate-button>
+    ${MediaPlaybackRateButton()}
     ${MediaFullscreenButton()}
     <div class="mxp-padding-2"></div>
   </media-control-bar>
@@ -237,21 +334,21 @@ export const VodChromeSmall = (props: ThemeMuxTemplateProps) => html`
 // prettier-ignore
 export const VodChromeLarge = (props: ThemeMuxTemplateProps) => html`
   <div slot="centered-chrome" class="mxp-center-controls">
-    ${MediaPlayButton()}
+    ${MediaPlayButton({ part: parts.centerPlay })}
   </div>
-  <media-time-range></media-time-range>
+  ${MediaTimeRange()}
   <media-control-bar>
     ${MediaPlayButton()}
-    ${MediaSeekBackwardButton(props)}
-    ${MediaSeekForwardButton(props)}
-    <mxp-time-display></mxp-time-display>
+    ${MediaSeekBackwardButton(props as SeekBackwardButtonProps)}
+    ${MediaSeekForwardButton(props as SeekForwardButtonProps)}
+    ${TimeDisplay()}
     ${MediaMuteButton()}
-    <media-volume-range></media-volume-range>
+    ${MediaVolumeRange()}
     <div class="mxp-spacer"></div>
-    <media-playback-rate-button></media-playback-rate-button>
+    ${MediaPlaybackRateButton()}
     ${MediaCaptionsButton(props)}
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
     ${MediaFullscreenButton()}
     <div class="mxp-padding-2"></div>
@@ -268,15 +365,15 @@ export const LiveChromeSmall = (props: ThemeMuxTemplateProps) => html`
     <div class="mxp-spacer"></div>
     ${MediaCaptionsButton(props)}
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
   </media-control-bar>
   <div slot="centered-chrome" class="mxp-center-controls">
-    ${MediaPlayButton()}
+    ${MediaPlayButton({ part: parts.centerPlay })}
   </div>
   <media-control-bar>
     ${MediaMuteButton()}
-    <media-volume-range></media-volume-range>
+    ${MediaVolumeRange()}
     <div class="mxp-spacer"></div>
     ${MediaFullscreenButton()}
   </media-control-bar>
@@ -288,15 +385,15 @@ export const LiveChromeLarge = (props: ThemeMuxTemplateProps) => html`
     <slot name="seek-to-live-button"></slot>
   </media-control-bar>
   <div slot="centered-chrome" class="mxp-center-controls">
-    ${MediaPlayButton()}
+    ${MediaPlayButton({ part: parts.centerPlay })}
   </div>
   <media-control-bar>
     ${MediaMuteButton()}
-    <media-volume-range></media-volume-range>
+    ${MediaVolumeRange()}
     <div class="mxp-spacer"></div>
     ${MediaCaptionsButton(props)}
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
     ${MediaFullscreenButton()}
   </media-control-bar>
@@ -310,18 +407,18 @@ export const DvrChromeSmall = (props: ThemeMuxTemplateProps) => html`
   <media-control-bar slot="top-chrome" style="justify-content: flex-end;">
     ${MediaCaptionsButton(props)}
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
   </media-control-bar>
   <div slot="centered-chrome" class="mxp-center-controls">
-    ${MediaSeekBackwardButton(props)}
-    ${MediaPlayButton()}
-    ${MediaSeekForwardButton(props)}
+    ${MediaSeekBackwardButton({ ...props, part: parts.centerSeekBackward } as SeekBackwardButtonProps)}
+    ${MediaPlayButton({ part: parts.centerPlay })}
+    ${MediaSeekForwardButton({ ...props, part: parts.centerSeekForward } as SeekForwardButtonProps)}
   </div>
-  <media-time-range></media-time-range>
+  ${MediaTimeRange()}
   <media-control-bar>
     ${MediaMuteButton()}
-    <media-volume-range></media-volume-range>
+    ${MediaVolumeRange()}
     <slot name="seek-to-live-button"></slot>
     <div class="mxp-spacer"></div>
     ${MediaFullscreenButton()}
@@ -332,64 +429,22 @@ export const DvrChromeSmall = (props: ThemeMuxTemplateProps) => html`
 // prettier-ignore
 export const DvrChromeLarge = (props: ThemeMuxTemplateProps) => html`
   <div slot="centered-chrome" class="mxp-center-controls">
-    ${MediaPlayButton()}
+    ${MediaPlayButton({ part: parts.centerPlay })}
   </div>
-  <media-time-range></media-time-range>
+  ${MediaTimeRange()}
   <media-control-bar>
     ${MediaPlayButton()}
-    ${MediaSeekBackwardButton(props)}
-    ${MediaSeekForwardButton(props)}
+    ${MediaSeekBackwardButton(props as SeekBackwardButtonProps)}
+    ${MediaSeekForwardButton(props as SeekForwardButtonProps)}
     ${MediaMuteButton()}
-    <media-volume-range></media-volume-range>
+    ${MediaVolumeRange()}
     <slot name="seek-to-live-button"></slot>
     <div class="mxp-spacer"></div>
     ${MediaCaptionsButton(props)}
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
     ${MediaFullscreenButton()}
     <div class="mxp-padding-2"></div>
   </media-control-bar>
 `;
-
-function getProps(el: MediaThemeMux, state?: any): ThemeMuxTemplateProps {
-  return {
-    audio: el.hasAttribute('audio'),
-    streamType: el.getAttribute('stream-type'),
-    playerSize: el.getAttribute('player-size'),
-    defaultHiddenCaptions: el.hasAttribute('default-hidden-captions'),
-    forwardSeekOffset: el.getAttribute('forward-seek-offset'),
-    backwardSeekOffset: el.getAttribute('backward-seek-offset'),
-    ...state,
-  };
-}
-
-class MediaThemeMux extends HTMLElement {
-  static get observedAttributes() {
-    return [
-      'audio',
-      'stream-type',
-      'player-size',
-      'default-hidden-captions',
-      'forward-seek-offset',
-      'backward-seek-offset',
-    ];
-  }
-
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' });
-    render(template(getProps(this)), this.shadowRoot as Node);
-  }
-
-  attributeChangedCallback() {
-    render(template(getProps(this)), this.shadowRoot as Node);
-  }
-}
-
-if (!customElements.get('media-theme-mux')) {
-  customElements.define('media-theme-mux', MediaThemeMux);
-}
-
-export default MediaThemeMux;

package/src/media-theme-mux/styles.css

@@ -3,20 +3,44 @@
 }
 
 :host {
-  color: var(--primary-color);
-  --media-icon-color: var(--primary-color);
-  --media-range-thumb-background: var(--primary-color);
-  --media-range-bar-color: var(--primary-color);
+  --_primary-color: var(--primary-color, #fff);
+
+  --media-icon-color: var(--_primary-color);
+  --media-range-thumb-background: var(--_primary-color);
+  --media-range-bar-color: var(--_primary-color);
   --media-control-background: var(--secondary-color);
   --media-control-hover-background: var(--secondary-color);
-  --media-time-buffered-color: rgba(255, 255, 255, 0.7);
+  --media-time-buffered-color: rgba(255, 255, 255, 0.4);
   --media-range-track-background: rgba(255, 255, 255, 0.5);
   --media-range-track-border-radius: 3px;
+  --media-preview-thumbnail-border: 1px solid #fff;
+  --media-preview-thumbnail-border-radius: 2px;
+  --media-preview-time-margin: 5px 0 2px;
+  color: var(--_primary-color);
   display: inline-block;
   width: 100%;
   height: 100%;
 }
 
+:host(.two-tone:not([audio])) {
+  --mux-time-range-padding: 0px; /* px is needed in calc() */
+  --media-preview-thumbnail-border: 0;
+  --media-preview-thumbnail-border-radius: 2px 2px 0 0;
+  --media-preview-time-border-radius: 0 0 2px 2px;
+  --media-preview-time-margin: 0 0 8px;
+  --media-preview-time-text-shadow: none;
+}
+
+:host([audio]) {
+  --media-preview-time-border-radius: 3px;
+  --media-preview-time-margin: 0 0 5px;
+  --media-preview-time-text-shadow: none;
+}
+
+:host(.two-tone:not([audio])) media-time-range {
+  --media-range-track-border-radius: 0;
+}
+
 :host([audio]) ::slotted([slot='media']) {
   height: 0px;
 }
@@ -54,13 +78,26 @@ media-controller {
   height: 100%;
 }
 
+:host media-time-range {
+  color: var(--_primary-color);
+}
+
 :host(:not([audio])) media-time-range {
-  padding: var(--mux-time-range-padding, 0 10px);
-  z-index: 10;
+  --media-range-padding-left: var(--mux-time-range-padding, 10px);
+  --media-range-padding-right: var(--mux-time-range-padding, 10px);
   width: 100%;
-  height: 22px;
-  --media-range-track-translate-y: 6px;
-  background: linear-gradient(180deg, transparent, transparent 15px, var(--media-control-background) 15px);
+  z-index: 10;
+  height: 10px;
+  bottom: -2px;
+  background: linear-gradient(
+    180deg,
+    transparent,
+    transparent 3px,
+    var(--media-control-background) 3px,
+    var(--media-control-background) 8px,
+    transparent 8px,
+    transparent
+  );
 }
 
 media-control-bar {
@@ -71,10 +108,6 @@ media-control-bar :is([role='button'], [role='switch'], button) {
   height: 44px;
 }
 
-media-cast-button {
-  width: 40px;
-}
-
 .size-extra-small media-control-bar [role='button'],
 .size-extra-small media-control-bar [role='switch'] {
   height: auto;