@mux/mux-player 0.1.0-beta.21

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

@@ -0,0 +1,398 @@
+import 'media-chrome';
+import { html, render } from '../html';
+import '../media-chrome/time-display';
+
+// @ts-ignore
+import cssStr from './styles.css';
+import * as icons from './icons';
+import { StreamTypes } from '@mux/playback-core';
+
+const MediaChromeSizes = {
+  LG: 'large',
+  SM: 'small',
+  XS: 'extra-small',
+};
+
+type ThemeMuxTemplateProps = {
+  streamType: string;
+  audio: boolean;
+  playerSize: string;
+  defaultHiddenCaptions: boolean;
+  hasCaptions: boolean;
+  forwardSeekOffset: number;
+  backwardSeekOffset: number;
+};
+
+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>
+`;
+
+const ChromeRenderer = (props: ThemeMuxTemplateProps) => {
+  const { streamType, playerSize, audio } = props;
+  if (audio) {
+    switch (streamType) {
+      case StreamTypes.LIVE:
+      case StreamTypes.LL_LIVE: {
+        return AudioLiveChrome(props);
+      }
+      case StreamTypes.DVR:
+      case StreamTypes.LL_DVR: {
+        return AudioDvrChrome(props);
+      }
+      case StreamTypes.ON_DEMAND:
+      default: {
+        return AudioVodChrome(props);
+      }
+    }
+  }
+  /* eslint-disable no-fallthrough */
+  switch (streamType) {
+    case StreamTypes.LIVE:
+    case StreamTypes.LL_LIVE: {
+      switch (playerSize) {
+        case MediaChromeSizes.LG:
+          return LiveChromeLarge(props);
+        case MediaChromeSizes.SM:
+          return LiveChromeSmall(props);
+        case MediaChromeSizes.XS:
+          return LiveChromeExtraSmall(props);
+      }
+    }
+    case StreamTypes.DVR:
+    case StreamTypes.LL_DVR: {
+      switch (playerSize) {
+        case MediaChromeSizes.LG:
+          return DvrChromeLarge(props);
+        case MediaChromeSizes.SM:
+          return DvrChromeSmall(props);
+        case MediaChromeSizes.XS:
+          return DvrChromeExtraSmall(props);
+      }
+    }
+    case StreamTypes.ON_DEMAND:
+    default: {
+      switch (playerSize) {
+        case MediaChromeSizes.LG:
+          return VodChromeLarge(props);
+        case MediaChromeSizes.SM:
+          return VodChromeSmall(props);
+        case MediaChromeSizes.XS:
+          return VodChromeExtraSmall(props);
+      }
+    }
+  }
+  /* eslint-enable */
+};
+
+// prettier-ignore
+const MediaPlayButton = () => html`
+  <media-play-button>
+    ${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 })}
+  </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 })}
+  </media-seek-forward-button>
+`;
+
+// prettier-ignore
+const MediaMuteButton = () => html`
+  <media-mute-button>
+    ${icons.VolumeHigh()}
+    ${icons.VolumeMedium()}
+    ${icons.VolumeLow()}
+    ${icons.VolumeOff()}
+  </media-mute-button>
+`;
+
+// prettier-ignore
+const MediaCaptionsButton = (props: ThemeMuxTemplateProps) => html`
+<media-captions-button default-showing="${!props.defaultHiddenCaptions}" >
+  ${icons.CaptionsOff()}
+  ${icons.CaptionsOn()}
+</media-captions-button>`;
+
+// prettier-ignore
+const MediaAirplayButton = () => html`
+<media-airplay-button>
+  ${icons.Airplay()}
+</media-airplay-button>`;
+
+// prettier-ignore
+const MediaPipButton = () => html`
+<media-pip-button>
+  ${icons.PipEnter()}
+  ${icons.PipExit()}
+</media-pip-button>`;
+
+// prettier-ignore
+const MediaFullscreenButton = () => html`
+<media-fullscreen-button>
+  ${icons.FullscreenEnter()}
+  ${icons.FullscreenExit()}
+</media-fullscreen-button>`;
+
+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>
+    ${MediaMuteButton()}
+    <media-volume-range></media-volume-range>
+    <media-playback-rate-button></media-playback-rate-button>
+    ${MediaAirplayButton()}
+    <media-cast-button></media-cast-button>
+  </media-control-bar>
+`;
+
+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>
+    ${MediaMuteButton()}
+    <media-volume-range></media-volume-range>
+    <media-playback-rate-button></media-playback-rate-button>
+    ${MediaAirplayButton()}
+    <media-cast-button></media-cast-button>
+  </media-control-bar>
+`;
+
+export const AudioLiveChrome = (_props: ThemeMuxTemplateProps) => html`
+  <media-control-bar>
+    ${MediaPlayButton()}
+    <slot name="seek-to-live-button"></slot>
+    ${MediaMuteButton()}
+    <media-volume-range></media-volume-range>
+    ${MediaAirplayButton()}
+    <media-cast-button></media-cast-button>
+  </media-control-bar>
+`;
+
+// prettier-ignore
+export const VodChromeExtraSmall = (props: ThemeMuxTemplateProps) => html`
+  <media-control-bar slot="top-chrome">
+    ${props.hasCaptions ? MediaCaptionsButton(props) : html``}
+    <div class="mxp-spacer"></div>
+    ${MediaAirplayButton()}
+    <media-cast-button></media-cast-button>
+    ${MediaPipButton()}
+  </media-control-bar>
+  <div slot="centered-chrome" class="mxp-center-controls">
+    ${MediaPlayButton()}
+  </div>
+  <media-control-bar>
+    ${MediaMuteButton()}
+    <div class="mxp-spacer"></div>
+    ${MediaFullscreenButton()}
+  </media-control-bar>
+`;
+
+// prettier-ignore
+export const VodChromeSmall = (props: ThemeMuxTemplateProps) => html`
+  <media-control-bar slot="top-chrome" style="justify-content: flex-end;">
+    ${props.hasCaptions ? MediaCaptionsButton(props) : html``}
+    ${MediaAirplayButton()}
+    <media-cast-button></media-cast-button>
+    ${MediaPipButton()}
+  </media-control-bar>
+  <div slot="centered-chrome" class="mxp-center-controls">
+    ${MediaSeekBackwardButton(props)}
+    ${MediaPlayButton()}
+    ${MediaSeekForwardButton(props)}
+  </div>
+  <media-time-range></media-time-range>
+  <media-control-bar>
+    <mxp-time-display></mxp-time-display>
+    ${MediaMuteButton()}
+    <media-volume-range></media-volume-range>
+    <div class="mxp-spacer"></div>
+    <media-playback-rate-button></media-playback-rate-button>
+    ${MediaFullscreenButton()}
+    <div class="mxp-padding-2"></div>
+  </media-control-bar>
+`;
+
+// prettier-ignore
+export const VodChromeLarge = (props: ThemeMuxTemplateProps) => html`
+  <div slot="centered-chrome" class="mxp-center-controls">
+    ${MediaPlayButton()}
+  </div>
+  <media-time-range></media-time-range>
+  <media-control-bar>
+    ${MediaPlayButton()}
+    ${MediaSeekBackwardButton(props)}
+    ${MediaSeekForwardButton(props)}
+    <mxp-time-display></mxp-time-display>
+    ${MediaMuteButton()}
+    <media-volume-range></media-volume-range>
+    <div class="mxp-spacer"></div>
+    <media-playback-rate-button></media-playback-rate-button>
+    ${props.hasCaptions ? MediaCaptionsButton(props) : html``}
+    ${MediaAirplayButton()}
+    <media-cast-button></media-cast-button>
+    ${MediaPipButton()}
+    ${MediaFullscreenButton()}
+    <div class="mxp-padding-2"></div>
+  </media-control-bar>
+`;
+
+// prettier-ignore
+export const LiveChromeExtraSmall = VodChromeExtraSmall;
+
+// prettier-ignore
+export const LiveChromeSmall = (props: ThemeMuxTemplateProps) => html`
+  <media-control-bar slot="top-chrome">
+    <slot name="seek-to-live-button"></slot>
+    <div class="mxp-spacer"></div>
+    ${props.hasCaptions ? MediaCaptionsButton(props) : html``}
+    ${MediaAirplayButton()}
+    <media-cast-button></media-cast-button>
+    ${MediaPipButton()}
+  </media-control-bar>
+  <div slot="centered-chrome" class="mxp-center-controls">
+    ${MediaPlayButton()}
+  </div>
+  <media-control-bar>
+    ${MediaMuteButton()}
+    <media-volume-range></media-volume-range>
+    <div class="mxp-spacer"></div>
+    ${MediaFullscreenButton()}
+  </media-control-bar>
+`;
+
+// prettier-ignore
+export const LiveChromeLarge = (props: ThemeMuxTemplateProps) => html`
+  <media-control-bar slot="top-chrome">
+    <slot name="seek-to-live-button"></slot>
+  </media-control-bar>
+  <div slot="centered-chrome" class="mxp-center-controls">
+    ${MediaPlayButton()}
+  </div>
+  <media-control-bar>
+    ${MediaMuteButton()}
+    <media-volume-range></media-volume-range>
+    <div class="mxp-spacer"></div>
+    ${props.hasCaptions ? MediaCaptionsButton(props) : html``}
+    ${MediaAirplayButton()}
+    <media-cast-button></media-cast-button>
+    ${MediaPipButton()}
+    ${MediaFullscreenButton()}
+  </media-control-bar>
+`;
+
+// prettier-ignore
+export const DvrChromeExtraSmall = VodChromeExtraSmall;
+
+// prettier-ignore
+export const DvrChromeSmall = (props: ThemeMuxTemplateProps) => html`
+  <media-control-bar slot="top-chrome" style="justify-content: flex-end;">
+    ${props.hasCaptions ? MediaCaptionsButton(props) : html``}
+    ${MediaAirplayButton()}
+    <media-cast-button></media-cast-button>
+    ${MediaPipButton()}
+  </media-control-bar>
+  <div slot="centered-chrome" class="mxp-center-controls">
+    ${MediaSeekBackwardButton(props)}
+    ${MediaPlayButton()}
+    ${MediaSeekForwardButton(props)}
+  </div>
+  <media-time-range></media-time-range>
+  <media-control-bar>
+    ${MediaMuteButton()}
+    <media-volume-range></media-volume-range>
+    <slot name="seek-to-live-button"></slot>
+    <div class="mxp-spacer"></div>
+    ${MediaFullscreenButton()}
+    <div class="mxp-padding-2"></div>
+  </media-control-bar>
+`;
+
+// prettier-ignore
+export const DvrChromeLarge = (props: ThemeMuxTemplateProps) => html`
+  <div slot="centered-chrome" class="mxp-center-controls">
+    ${MediaPlayButton()}
+  </div>
+  <media-time-range></media-time-range>
+  <media-control-bar>
+    ${MediaPlayButton()}
+    ${MediaSeekBackwardButton(props)}
+    ${MediaSeekForwardButton(props)}
+    ${MediaMuteButton()}
+    <media-volume-range></media-volume-range>
+    <slot name="seek-to-live-button"></slot>
+    <div class="mxp-spacer"></div>
+    ${props.hasCaptions ? MediaCaptionsButton(props) : html``}
+    ${MediaAirplayButton()}
+    <media-cast-button></media-cast-button>
+    ${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'),
+    hasCaptions: el.hasAttribute('has-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',
+      'has-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

@@ -0,0 +1,167 @@
+:host(:not([audio])) {
+  --secondary-color: transparent;
+}
+
+: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);
+  --media-control-background: var(--secondary-color);
+  --media-control-hover-background: var(--secondary-color);
+  --media-time-buffered-color: rgba(255, 255, 255, 0.7);
+  --media-range-track-background: rgba(255, 255, 255, 0.5);
+  --media-range-track-border-radius: 3px;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
+:host([audio]) ::slotted([slot='media']) {
+  height: 0px;
+}
+
+:host([audio]) media-controller {
+  background: transparent;
+}
+
+:host([audio]) media-controller::part(vertical-layer) {
+  background: transparent;
+}
+
+:host([audio]) media-control-bar {
+  width: 100%;
+}
+
+media-airplay-button[media-airplay-unavailable],
+media-cast-button[media-cast-unavailable],
+media-volume-range[media-volume-unavailable],
+media-airplay-button[media-airplay-unavailable] {
+  display: none;
+}
+
+media-volume-range[media-volume-unavailable] {
+  display: none;
+}
+
+media-pip-button[media-pip-unavailable] {
+  display: none;
+}
+
+media-controller {
+  width: 100%;
+  height: 100%;
+}
+
+:host(:not([audio])) media-time-range {
+  padding: var(--mux-time-range-padding, 0 10px);
+  z-index: 10;
+  width: 100%;
+  height: 22px;
+  --media-range-track-translate-y: 6px;
+  background: linear-gradient(180deg, transparent, transparent 15px, var(--media-control-background) 15px);
+}
+
+media-control-bar {
+  --media-button-icon-width: 18px;
+}
+
+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;
+  padding: 4.4% 3.2%;
+}
+
+.mxp-spacer {
+  flex-grow: 1;
+  height: 100%;
+  background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));
+}
+
+/* Add a small space on the right to have the play button and
+ * fullscreen button aligned in relation to the progress bar. */
+.size-large .mxp-padding-2 {
+  width: 2px;
+  height: 100%;
+  background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));
+}
+
+media-controller::part(vertical-layer) {
+  transition: background-color 1s;
+}
+
+media-controller:is([media-paused], :not([user-inactive]))::part(vertical-layer) {
+  background-color: rgba(0, 0, 0, 0.6);
+  transition: background-color 0.25s;
+}
+
+.mxp-center-controls {
+  --media-button-icon-width: 100%;
+  --media-button-icon-height: auto;
+  pointer-events: none;
+  width: 100%;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.mxp-center-controls media-play-button {
+  --media-control-background: transparent;
+  --media-control-hover-background: transparent;
+  padding: 0;
+  width: max(27px, min(9%, 90px));
+}
+
+.mxp-center-controls media-seek-backward-button,
+.mxp-center-controls media-seek-forward-button {
+  --media-control-background: transparent;
+  --media-control-hover-background: transparent;
+  padding: 0;
+  margin: 0 10%;
+  width: min(7%, 70px);
+}
+
+media-loading-indicator {
+  --media-loading-icon-width: 100%;
+  --media-button-icon-height: auto;
+  pointer-events: none;
+  position: absolute;
+  width: min(15%, 150px);
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Intentionally don't target the div for transition but the children
+ of the div. Prevents messing with media-chrome's autohide feature. */
+media-loading-indicator + div * {
+  transition: opacity 0.15s;
+  opacity: 1;
+}
+
+media-loading-indicator[media-loading]:not([media-paused]) ~ div > * {
+  opacity: 0;
+  transition-delay: 400ms;
+}
+
+media-volume-range {
+  width: min(100%, 100px);
+}
+
+media-time-display {
+  white-space: nowrap;
+}
+
+:is(media-time-display, media-text-display, media-playback-rate-button) {
+  color: inherit;
+}

package/src/styles.css

@@ -0,0 +1,42 @@
+:host {
+  display: inline-block;
+}
+
+/* Hide custom elements that are not defined yet */
+:not(:defined) {
+  display: none;
+}
+
+a {
+  color: #fff;
+  font-size: 0.9em;
+  text-decoration: underline;
+}
+
+media-controller {
+  width: 100%;
+  height: 100%;
+}
+
+.mxp-seek-to-live-button {
+  height: 44px;
+  background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+.mxp-seek-to-live-button[aria-disabled] {
+  cursor: default;
+  pointer-events: none;
+}
+
+.mxp-seek-to-live-button::before {
+  content: '● ';
+  color: rgb(118, 118, 118);
+  padding-right: 5px;
+}
+
+.mxp-seek-to-live-button[aria-disabled]::before {
+  color: #fb3c4d;
+}