@mux/mux-player 0.1.0-beta.21

package/src/template.ts

@@ -0,0 +1,126 @@
+import './media-theme-mux/media-theme-mux';
+import './dialog';
+import { getSrcFromPlaybackId, getPosterURLFromPlaybackId, getStoryboardURLFromPlaybackId } from './helpers';
+import { html } from './html';
+// @ts-ignore
+import cssStr from './styles.css';
+import { i18n, stylePropsToString } from './utils';
+
+import type { MuxTemplateProps } from './types';
+import { StreamTypes } from '@mux/playback-core';
+
+export const template = (props: MuxTemplateProps) => html`
+  <style>
+    ${cssStr}
+  </style>
+  ${content(props)}
+`;
+
+export const content = (props: MuxTemplateProps) => html`
+  <media-theme-mux
+    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}"
+    stream-type="${props.streamType}"
+    player-size="${props.playerSize}"
+    has-captions="${props.hasCaptions}"
+    default-hidden-captions="${props.defaultHiddenCaptions}"
+    forward-seek-offset="${props.forwardSeekOffset}"
+    backward-seek-offset="${props.backwardSeekOffset}"
+  >
+    <mux-video
+      slot="media"
+      crossorigin
+      playsinline
+      autoplay="${props.autoplay ?? false}"
+      muted="${props.muted ?? false}"
+      loop="${props.loop ?? false}"
+      preload="${props.preload ?? false}"
+      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}"
+      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}"
+      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``}
+    </mux-video>
+    <button
+      slot="seek-to-live-button"
+      aria-disabled="${props.inLiveWindow}"
+      onclick="${function (this: HTMLButtonElement, evt: Event) {
+        props.onSeekToLive?.(evt);
+        if (props.paused) {
+          const playRequestEvt = new CustomEvent('mediaplayrequest', { composed: true, bubbles: true });
+          (this as HTMLButtonElement).dispatchEvent(playRequestEvt);
+        }
+      }}"
+      class="mxp-seek-to-live-button"
+    >
+      Live
+    </button>
+    <mxp-dialog
+      no-auto-hide
+      open="${props.isDialogOpen}"
+      onclose="${props.onCloseErrorDialog}"
+      oninitfocus="${props.onInitFocusDialog}"
+    >
+      ${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``}
+      </p>
+    </mxp-dialog>
+  </media-theme-mux>
+`;

package/src/types.d.ts

@@ -0,0 +1,52 @@
+import type MuxVideoElement, { MediaError } from '@mux/mux-video';
+
+export type MuxPlayerProps = Partial<MuxVideoElement> & {
+  preferMse?: boolean;
+};
+
+export type MuxTemplateProps = Partial<MuxPlayerProps> & {
+  audio: boolean;
+  playerSize: string;
+  showLoading: boolean;
+  hasCaptions: boolean;
+  supportsAirPlay: boolean;
+  supportsVolume: boolean;
+  thumbnailTime: number;
+  primaryColor: string;
+  secondaryColor: string;
+  forwardSeekOffset: number;
+  backwardSeekOffset: number;
+  isDialogOpen: boolean;
+  defaultHiddenCaptions: boolean;
+  onCloseErrorDialog: (evt: CustomEvent) => void;
+  onInitFocusDialog: (evt: CustomEvent) => void;
+  dialog: DialogOptions;
+  inLiveWindow: boolean;
+  onSeekToLive: (_evt: Event) => void;
+  tokens: {
+    playback?: string;
+    thumbnail?: string;
+    storyboard?: string;
+  };
+  metadataVideoId: string;
+  metadataVideoTitle: string;
+  metadataViewerUserId: string;
+};
+
+export type DialogOptions = {
+  title?: string;
+  message?: string;
+  linkText?: string;
+  linkUrl?: string;
+};
+
+export type DevlogOptions = {
+  message?: string;
+  file?: string;
+};
+
+export type ErrorEvent = {
+  player_error?: MediaError;
+  player_error_code?: number;
+  player_error_message?: string;
+};

package/src/utils.ts

@@ -0,0 +1,100 @@
+// @ts-ignore
+import lang from '../lang/en.json';
+
+const DEFAULT_LOCALE = 'en';
+
+// NL example
+// lang = {
+//   "Network Error": "Netwerk Fout",
+// };
+export function i18n(str: string, translate = true): any {
+  const message = translate ? lang?.[str] ?? str : str;
+  const locale = translate ? lang.code : DEFAULT_LOCALE;
+  return new IntlMessageFormat(message, locale);
+}
+
+/**
+ * Poor man's IntlMessageFormat, enrich if need be.
+ * @see https://formatjs.io/docs/intl-messageformat/
+ */
+class IntlMessageFormat {
+  message: string;
+  locale: string;
+
+  constructor(message: string, locale = lang.code ?? DEFAULT_LOCALE) {
+    this.message = message;
+    this.locale = locale;
+  }
+
+  format(values: Record<string, any>): string {
+    return this.message.replace(/\{(\w+)\}/g, (match, key) => {
+      return values[key] ?? '';
+    });
+  }
+
+  toString() {
+    return this.message;
+  }
+}
+
+export function stylePropsToString(props: any) {
+  let style = '';
+  Object.entries(props).forEach(([key, value]) => {
+    if (value == null) return;
+    style += `${kebabCase(key)}: ${value}; `;
+  });
+  return style ? style.trim() : undefined;
+}
+
+export function kebabCase(name: string) {
+  return name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+export function camelCase(name: string) {
+  return name.replace(/[-_]([a-z])/g, ($0, $1) => $1.toUpperCase());
+}
+
+let idCounter = 0;
+export function uniqueId(prefix: string) {
+  const id = ++idCounter;
+  return `${prefix}${id}`;
+}
+
+export function toNumberOrUndefined(val: any) {
+  if (val == null) return undefined;
+  const num = +val;
+  return !Number.isNaN(num) ? num : undefined;
+}
+
+export function toQuery(obj: Record<string, any>) {
+  const params = toParams(obj).toString();
+  return params ? '?' + params : '';
+}
+
+export function toParams(obj: Record<string, any>) {
+  const params: Record<string, any> = {};
+  for (const key in obj) {
+    if (obj[key] != null) params[key] = obj[key];
+  }
+  return new URLSearchParams(params);
+}
+
+export function parseJwt(token: string) {
+  const base64Url = token.split('.')[1];
+  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+  const jsonPayload = decodeURIComponent(
+    atob(base64)
+      .split('')
+      .map(function (c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+      })
+      .join('')
+  );
+  return JSON.parse(jsonPayload);
+}
+
+export const containsComposedNode = (rootNode: Node, childNode?: Node | Element | null): boolean => {
+  if (!rootNode || !childNode) return false;
+  if (rootNode.contains(childNode)) return true;
+  return containsComposedNode(rootNode, (childNode.getRootNode() as ShadowRoot).host);
+};

package/src/video-api.ts

@@ -0,0 +1,298 @@
+import { VideoEvents } from '@mux/mux-video';
+import type MuxVideoElement from '@mux/mux-video';
+import * as logger from './logger';
+
+export type CastOptions = {
+  receiverApplicationId: string;
+  autoJoinPolicy: string;
+  androidReceiverCompatible: boolean;
+  language: string;
+  resumeSavedSession: boolean;
+};
+
+export type MuxVideoElementExt = MuxVideoElement & {
+  requestCast(options: CastOptions): Promise<undefined>;
+};
+
+const AllowedVideoAttributes = {
+  AUTOPLAY: 'autoplay',
+  CROSSORIGIN: 'crossorigin',
+  LOOP: 'loop',
+  MUTED: 'muted',
+  PLAYSINLINE: 'playsinline',
+  SRC: 'src',
+  POSTER: 'poster',
+  PRELOAD: 'preload',
+};
+
+const CustomVideoAttributes = {
+  VOLUME: 'volume',
+  PLAYBACKRATE: 'playbackrate',
+  // This muted attribute also reflects to the muted property while the muted
+  // attribute on a native video element reflects only to video.defaultMuted.
+  MUTED: 'muted',
+};
+
+const AllowedVideoEvents = VideoEvents.filter((type) => type !== 'error');
+const AllowedVideoAttributeNames = Object.values(AllowedVideoAttributes);
+const CustomVideoAttributesNames = Object.values(CustomVideoAttributes);
+
+/**
+ * Gets called from mux-player when mux-video is rendered and upgraded.
+ * We might just merge VideoApiElement in MuxPlayerElement and remove this?
+ */
+export function initVideoApi(el: VideoApiElement) {
+  el.querySelectorAll(':scope > track').forEach((track) => {
+    el.media?.append(track.cloneNode());
+  });
+
+  // The video events are dispatched on the VideoApiElement instance.
+  // This makes it possible to add event listeners before the element is upgraded.
+  AllowedVideoEvents.forEach((type) => {
+    el.media?.addEventListener(type, (evt) => {
+      el.dispatchEvent(new Event(evt.type));
+    });
+  });
+}
+
+class VideoApiElement extends HTMLElement {
+  static get observedAttributes() {
+    return [...AllowedVideoAttributeNames, ...CustomVideoAttributesNames];
+  }
+
+  /**
+   * Create a HTMLVideoElement like API with opt-in methods to expose publicly.
+   * This class is intentionally not extending MuxVideoElement but composing it
+   * to opt in methods and not expose too much. More flexibility in the future.
+   */
+  constructor() {
+    super();
+
+    this.querySelectorAll(':scope > track').forEach((track) => {
+      this.media?.append(track.cloneNode());
+    });
+
+    // Watch for child adds/removes and update the native element if necessary
+    /** @type {(mutationList: MutationRecord[]) => void} */
+    const mutationCallback = (mutationsList: MutationRecord[]) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'childList') {
+          // Child being removed
+          mutation.removedNodes.forEach((node) => {
+            const track = this.media?.querySelector(`track[src="${(node as HTMLTrackElement).src}"]`);
+            if (track) this.media?.removeChild(track);
+          });
+
+          mutation.addedNodes.forEach((node) => {
+            this.media?.append(node.cloneNode());
+          });
+        }
+      }
+    };
+
+    const observer = new MutationObserver(mutationCallback);
+    observer.observe(this, { childList: true, subtree: true });
+  }
+
+  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string) {
+    switch (attrName) {
+      case CustomVideoAttributes.MUTED: {
+        if (this.media) {
+          this.media.muted = newValue != null;
+        }
+        return;
+      }
+      case CustomVideoAttributes.VOLUME: {
+        const val = +newValue;
+        if (this.media && !Number.isNaN(val)) {
+          this.media.volume = val;
+        }
+        return;
+      }
+      case CustomVideoAttributes.PLAYBACKRATE: {
+        const val = +newValue;
+        if (this.media && !Number.isNaN(val)) {
+          this.media.playbackRate = val;
+        }
+        return;
+      }
+    }
+  }
+
+  play() {
+    return this.media?.play();
+  }
+
+  pause() {
+    this.media?.pause();
+  }
+
+  requestCast(options: CastOptions) {
+    return this.media?.requestCast(options);
+  }
+
+  get media(): MuxVideoElementExt | null | undefined {
+    return this.shadowRoot?.querySelector('mux-video');
+  }
+
+  /**
+   * @deprecated please use .media instead
+   */
+  get video(): MuxVideoElementExt | null | undefined {
+    logger.warn('<mux-player>.video is deprecated, please use .media instead');
+    return this.media;
+  }
+
+  get paused() {
+    return this.media?.paused ?? true;
+  }
+
+  get duration() {
+    return this.media?.duration ?? NaN;
+  }
+
+  get ended() {
+    return this.media?.ended ?? false;
+  }
+
+  get buffered() {
+    return this.media?.buffered;
+  }
+
+  get readyState() {
+    return this.media?.readyState ?? 0;
+  }
+
+  get videoWidth() {
+    return this.media?.videoWidth;
+  }
+
+  get videoHeight() {
+    return this.media?.videoHeight;
+  }
+
+  get currentTime() {
+    return this.media?.currentTime ?? 0;
+  }
+
+  set currentTime(val) {
+    if (this.media) {
+      this.media.currentTime = Number(val);
+    }
+  }
+
+  get volume() {
+    return this.media?.volume ?? 1;
+  }
+
+  set volume(val) {
+    if (this.media) {
+      this.media.volume = Number(val);
+    }
+  }
+
+  get src() {
+    return getVideoAttribute(this, AllowedVideoAttributes.SRC);
+  }
+
+  set src(val) {
+    this.setAttribute(AllowedVideoAttributes.SRC, `${val}`);
+  }
+
+  get poster() {
+    return getVideoAttribute(this, AllowedVideoAttributes.POSTER) ?? '';
+  }
+
+  set poster(val) {
+    this.setAttribute(AllowedVideoAttributes.POSTER, `${val}`);
+  }
+
+  get playbackRate() {
+    return this.media?.playbackRate ?? 1;
+  }
+
+  set playbackRate(val) {
+    if (this.media) {
+      this.media.playbackRate = Number(val);
+    }
+  }
+
+  get crossOrigin() {
+    return getVideoAttribute(this, AllowedVideoAttributes.CROSSORIGIN);
+  }
+
+  set crossOrigin(val) {
+    this.setAttribute(AllowedVideoAttributes.CROSSORIGIN, `${val}`);
+  }
+
+  get autoplay() {
+    return getVideoAttribute(this, AllowedVideoAttributes.AUTOPLAY) != null;
+  }
+
+  set autoplay(val) {
+    if (val) {
+      this.setAttribute(AllowedVideoAttributes.AUTOPLAY, typeof val === 'string' ? val : '');
+    } else {
+      // Remove boolean attribute if false, 0, '', null, undefined.
+      this.removeAttribute(AllowedVideoAttributes.AUTOPLAY);
+    }
+  }
+
+  get loop() {
+    return getVideoAttribute(this, AllowedVideoAttributes.LOOP) != null;
+  }
+
+  set loop(val) {
+    if (val) {
+      this.setAttribute(AllowedVideoAttributes.LOOP, '');
+    } else {
+      // Remove boolean attribute if false, 0, '', null, undefined.
+      this.removeAttribute(AllowedVideoAttributes.LOOP);
+    }
+  }
+
+  get muted() {
+    return getVideoAttribute(this, AllowedVideoAttributes.MUTED) != null;
+  }
+
+  set muted(val) {
+    if (val) {
+      this.setAttribute(AllowedVideoAttributes.MUTED, '');
+    } else {
+      // Remove boolean attribute if false, 0, '', null, undefined.
+      this.removeAttribute(AllowedVideoAttributes.MUTED);
+    }
+  }
+
+  get playsInline() {
+    return getVideoAttribute(this, AllowedVideoAttributes.PLAYSINLINE) != null;
+  }
+
+  set playsInline(val) {
+    if (val) {
+      this.setAttribute(AllowedVideoAttributes.PLAYSINLINE, '');
+    } else {
+      // Remove boolean attribute if false, 0, '', null, undefined.
+      this.removeAttribute(AllowedVideoAttributes.PLAYSINLINE);
+    }
+  }
+
+  get preload() {
+    return getVideoAttribute(this, AllowedVideoAttributes.PRELOAD);
+  }
+
+  set preload(val) {
+    if (val) {
+      this.setAttribute(AllowedVideoAttributes.PRELOAD, val);
+    } else {
+      // Remove boolean attribute if false, 0, '', null, undefined.
+      this.removeAttribute(AllowedVideoAttributes.PRELOAD);
+    }
+  }
+}
+
+function getVideoAttribute(el: VideoApiElement, name: string) {
+  return el.media ? el.media.getAttribute(name) : el.getAttribute(name);
+}
+
+export default VideoApiElement;