@mux/mux-player 0.1.0-beta.21

package/src/errors.ts

@@ -0,0 +1,163 @@
+import { MediaError } from '@mux/mux-video';
+// @ts-ignore
+import lang from '../lang/en.json';
+import { i18n, parseJwt } from './utils';
+import type { DialogOptions, DevlogOptions } from './types';
+
+export function getErrorLogs(
+  error: MediaError,
+  offline?: boolean,
+  playbackId?: string,
+  playbackToken?: string,
+  translate?: boolean
+): { dialog: DialogOptions; devlog: DevlogOptions } {
+  let dialog: DialogOptions = {};
+  let devlog: DevlogOptions = {};
+
+  switch (error.code) {
+    case MediaError.MEDIA_ERR_NETWORK: {
+      dialog.title = i18n(`Network Error`, translate);
+      dialog.message = error.message;
+
+      switch (error.data?.response.code) {
+        case 412: {
+          dialog.title = i18n(`Video is not currently available`, translate);
+          dialog.message = i18n(`The live stream or video file are not yet ready.`, translate);
+          devlog.message = i18n(
+            `This playback-id may belong to a live stream that is not currently active or an asset that is not ready.`,
+            translate
+          );
+          devlog.file = '412-not-playable.md';
+          break;
+        }
+        case 404: {
+          dialog.title = i18n(`Video does not exist`, translate);
+          dialog.message = '';
+          devlog.message = i18n(
+            `This playback-id does not exist. You may have used an Asset ID or an ID from a different resource.`,
+            translate
+          );
+          devlog.file = '404-not-found.md';
+          break;
+        }
+        case 403: {
+          dialog.title = i18n(`Invalid playback URL`, translate);
+          dialog.message = i18n(
+            `The video URL or playback-token are formatted with incorrect or incomplete information.`,
+            translate
+          );
+          devlog.message = i18n(
+            `403 error trying to access this playback URL. If this is a signed URL, you might need to provide a playback-token.`,
+            translate
+          );
+          devlog.file = 'missing-signed-tokens.md';
+
+          if (!playbackToken) break;
+
+          const { exp: tokenExpiry, aud: tokenType, sub: tokenPlaybackId } = parseJwt(playbackToken);
+          const tokenExpired = Date.now() > tokenExpiry * 1000;
+          const playbackIdMismatch = tokenPlaybackId !== playbackId;
+          const badTokenType = tokenType !== 'v';
+          const dateOptions: any = {
+            timeStyle: 'medium',
+            dateStyle: 'medium',
+          };
+
+          if (tokenExpired) {
+            dialog.title = i18n(`Video URL has expired`, translate);
+            dialog.message = i18n(`The video’s secured playback-token has expired.`, translate);
+            devlog.message = i18n(
+              `This playback is using signed URLs and the playback-token has expired. Expired at: {expiredDate}. Current time: {currentDate}.`,
+              translate
+            ).format({
+              expiredDate: new Intl.DateTimeFormat(lang.code, dateOptions).format(tokenExpiry * 1000),
+              currentDate: new Intl.DateTimeFormat(lang.code, dateOptions).format(Date.now()),
+            });
+            devlog.file = '403-expired-token.md';
+            break;
+          }
+
+          if (playbackIdMismatch) {
+            dialog.title = i18n(`Video URL is formatted incorrectly`, translate);
+            dialog.message = i18n(
+              `The video’s playback ID does not match the one encoded in the playback-token.`,
+              translate
+            );
+            devlog.message = i18n(
+              `The specified playback ID {playbackId} and the playback ID encoded in the playback-token {tokenPlaybackId} do not match.`,
+              translate
+            ).format({
+              playbackId,
+              tokenPlaybackId,
+            });
+            devlog.file = '403-playback-id-mismatch.md';
+            break;
+          }
+
+          if (badTokenType) {
+            dialog.title = i18n(`Video URL is formatted incorrectly`, translate);
+            dialog.message = i18n(`The playback-token is formatted with incorrect information.`, translate);
+            devlog.message = i18n(
+              `The playback-token has an incorrect aud value: {tokenType}. aud value should be v.`,
+              translate
+            ).format({
+              tokenType,
+            });
+            devlog.file = '403-incorrect-aud-value.md';
+            break;
+          }
+
+          devlog.message = i18n(
+            `403 error trying to access this playback URL. If this is a signed playback ID, the token might not have been generated correctly.`,
+            translate
+          );
+          devlog.file = '403-malformatted-token.md';
+          break;
+        }
+      }
+      break;
+    }
+    case MediaError.MEDIA_ERR_DECODE: {
+      const { message } = error;
+      dialog = {
+        title: i18n(`Media Error`, translate),
+        message,
+      };
+      devlog.file = 'media-decode-error.md';
+      break;
+    }
+    case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED: {
+      // If native HLS is used on Safari, M3U8 response errors cause media src not supported errors.
+      // If the response returns an error code, fix the MediaError.code and get detailed error logs.
+      const status = error.data?.response?.code;
+      if (status >= 400 && status < 500) {
+        error.code = MediaError.MEDIA_ERR_NETWORK;
+        error.data = { response: { code: status } };
+        ({ dialog, devlog } = getErrorLogs(error, offline, playbackId, playbackToken));
+        break;
+      }
+
+      dialog = {
+        title: i18n(`Source Not Supported`, translate),
+        message: error.message,
+      };
+      devlog.file = 'media-src-not-supported.md';
+      break;
+    }
+    default:
+      dialog = {
+        title: i18n(`Error`, translate),
+        message: error.message,
+      };
+      break;
+  }
+
+  if (offline) {
+    dialog = {
+      title: i18n(`Your device appears to be offline`, translate),
+      message: i18n(`Check your internet connection and try reloading this video.`, translate),
+    };
+  }
+
+  return { dialog, devlog };
+}

package/src/helpers.ts

@@ -0,0 +1,131 @@
+import { toQuery, camelCase } from './utils';
+import type MuxPlayerElement from '.';
+import { StreamTypes } from '@mux/playback-core';
+
+const MUX_VIDEO_DOMAIN = 'mux.com';
+
+/* eslint-disable */
+const getEnvPlayerVersion = () => {
+  try {
+    // @ts-ignore
+    return PLAYER_VERSION;
+  } catch {}
+  return 'UNKNOWN';
+};
+
+const player_version = getEnvPlayerVersion();
+export const getPlayerVersion = () => player_version;
+
+export const getSrcFromPlaybackId = (
+  playbackId?: string,
+  { token, domain = MUX_VIDEO_DOMAIN }: { token?: string; domain?: string } = {}
+) => {
+  /*
+   * 2022-04-01 djhaveri
+   *
+   * `redundant_streams` query param can only be added to public
+   * playback IDs, in order to use this feature with signed URLs
+   * the query param must be added to the signing token.
+   *
+   * https://docs.mux.com/guides/video/play-your-videos#add-delivery-redundancy-with-redundant-streams
+   *
+   * */
+  const isSignedUrl = !!token;
+  const query = isSignedUrl ? { token } : { redundant_streams: true };
+  return `https://stream.${domain}/${playbackId}.m3u8${toQuery(query)}`;
+};
+
+export const getPosterURLFromPlaybackId = (
+  playbackId?: string,
+  { token, thumbnailTime, domain = MUX_VIDEO_DOMAIN }: { token?: string; domain?: string; thumbnailTime?: number } = {}
+) => {
+  // NOTE: thumbnailTime is not supported when using a signedURL/token. Remove under these cases. (CJP)
+  const time = token == null ? thumbnailTime : undefined;
+  return `https://image.${domain}/${playbackId}/thumbnail.jpg${toQuery({
+    token,
+    time,
+  })}`;
+};
+
+export const getStoryboardURLFromPlaybackId = (
+  playbackId?: string,
+  { token, domain = MUX_VIDEO_DOMAIN }: { token?: string; domain?: string } = {}
+) => {
+  return `https://image.${domain}/${playbackId}/storyboard.vtt${toQuery({
+    token,
+  })}`;
+};
+
+const attrToPropNameMap: Record<string, string> = {
+  crossorigin: 'crossOrigin',
+  playsinline: 'playsInline',
+};
+
+export function toPropName(attrName: string) {
+  return attrToPropNameMap[attrName] ?? camelCase(attrName);
+}
+
+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) => {
+  const { media } = el;
+  return (
+    media?._hls?.liveSyncPosition ??
+    (media?.seekable.length ? media?.seekable.end(media.seekable.length - 1) : undefined)
+  );
+};
+
+export const seekToLive = (el: MuxPlayerElement) => {
+  const liveTime = getLiveTime(el);
+  if (liveTime == undefined) {
+    console.warn('attempting to seek to live but cannot determine live edge time!');
+    return;
+  }
+  el.currentTime = liveTime;
+};
+
+export const LL_LIVE_SEGMENT_SECS = 1;
+export const LIVE_SEGMENT_SECS = 5;
+export const DEFAULT_HOLDBACK = 3;
+export const LIVE_HOLDBACK_MOE = 0.5;
+
+export const isInLiveWindow = (el: MuxPlayerElement) => {
+  const { streamType } = el;
+  const liveTime = getLiveTime(el);
+  const currentTime = el.media?.currentTime;
+  if (liveTime == undefined || currentTime == undefined) {
+    return false;
+  }
+  const delta = liveTime - currentTime;
+  // The live window is based on whether or not the current playhead is within n segment durations (plus a margin of error)
+  // of the live edge (CJP)
+  if (streamType === StreamTypes.LL_LIVE || streamType === StreamTypes.LL_DVR) {
+    return delta <= LL_LIVE_SEGMENT_SECS * (DEFAULT_HOLDBACK + LIVE_HOLDBACK_MOE);
+  }
+  if (streamType === StreamTypes.LIVE || streamType === StreamTypes.DVR) {
+    return delta <= LIVE_SEGMENT_SECS * (DEFAULT_HOLDBACK + LIVE_HOLDBACK_MOE);
+  }
+  return false;
+};

package/src/html.ts

@@ -0,0 +1,165 @@
+import { TemplateInstance, NodeTemplatePart, createProcessor, AttributeTemplatePart } from '@github/template-parts';
+import type { TemplatePart, TemplateTypeInit } from '@github/template-parts';
+
+// NOTE: These are either direct ports or significantly based off of github's jtml template part processing logic. For more, see: https://github.com/github/jtml
+
+const eventListeners = new WeakMap<Element, Map<string, EventHandler>>();
+class EventHandler {
+  handleEvent!: EventListener;
+  constructor(private element: Element, private type: string) {
+    this.element.addEventListener(this.type, this);
+    const elementMap = eventListeners.get(this.element);
+    if (elementMap) {
+      elementMap.set(this.type, this);
+    }
+  }
+  set(listener: EventListener) {
+    if (typeof listener == 'function') {
+      this.handleEvent = listener.bind(this.element);
+    } else if (typeof listener === 'object' && typeof (listener as EventHandler).handleEvent === 'function') {
+      this.handleEvent = (listener as EventHandler).handleEvent.bind(listener);
+    } else {
+      this.element.removeEventListener(this.type, this);
+      const elementMap = eventListeners.get(this.element);
+      if (elementMap) {
+        elementMap.delete(this.type);
+      }
+    }
+  }
+  static for(part: AttributeTemplatePart): EventHandler {
+    if (!eventListeners.has(part.element)) eventListeners.set(part.element, new Map());
+    const type = part.attributeName.slice(2);
+    const elementListeners = eventListeners.get(part.element);
+    if (elementListeners && elementListeners.has(type)) return elementListeners.get(type) as EventHandler;
+    return new EventHandler(part.element, type);
+  }
+}
+
+export function processEvent(part: TemplatePart, value: unknown): boolean {
+  if (part instanceof AttributeTemplatePart && part.attributeName.startsWith('on')) {
+    EventHandler.for(part).set(value as unknown as EventListener);
+    part.element.removeAttributeNS(part.attributeNamespace, part.attributeName);
+    return true;
+  }
+  return false;
+}
+
+function processSubTemplate(part: TemplatePart, value: unknown): boolean {
+  if (value instanceof TemplateResult && part instanceof NodeTemplatePart) {
+    value.renderInto(part);
+    return true;
+  }
+  return false;
+}
+
+function processDocumentFragment(part: TemplatePart, value: unknown): boolean {
+  if (value instanceof DocumentFragment && part instanceof NodeTemplatePart) {
+    if (value.childNodes.length) part.replace(...value.childNodes);
+    return true;
+  }
+  return false;
+}
+
+export function processPropertyIdentity(part: TemplatePart, value: unknown): boolean {
+  if (part instanceof AttributeTemplatePart) {
+    const ns = part.attributeNamespace;
+    const oldValue = part.element.getAttributeNS(ns, part.attributeName);
+    if (String(value) !== oldValue) {
+      part.value = String(value);
+    }
+    return true;
+  }
+  part.value = String(value);
+  return true;
+}
+
+export function processBooleanAttribute(part: TemplatePart, value: unknown): boolean {
+  if (
+    typeof value === 'boolean' &&
+    part instanceof AttributeTemplatePart
+    // can't use this because on custom elements the props are always undefined
+    // typeof part.element[part.attributeName as keyof Element] === 'boolean'
+  ) {
+    const ns = part.attributeNamespace;
+    const oldValue = part.element.hasAttributeNS(ns, part.attributeName);
+    if (value !== oldValue) {
+      part.booleanValue = value;
+    }
+    return true;
+  }
+  return false;
+}
+
+export function processBooleanNode(part: TemplatePart, value: unknown): boolean {
+  if (value === false && part instanceof NodeTemplatePart) {
+    part.replace('');
+    return true;
+  }
+  return false;
+}
+
+export function processPart(part: TemplatePart, value: unknown): void {
+  processBooleanAttribute(part, value) ||
+    processEvent(part, value) ||
+    processBooleanNode(part, value) ||
+    processSubTemplate(part, value) ||
+    processDocumentFragment(part, value) ||
+    processPropertyIdentity(part, value);
+}
+
+const templates = new WeakMap<TemplateStringsArray, HTMLTemplateElement>();
+const renderedTemplates = new WeakMap<Node | NodeTemplatePart, HTMLTemplateElement>();
+const renderedTemplateInstances = new WeakMap<Node | NodeTemplatePart, TemplateInstance>();
+export class TemplateResult {
+  constructor(
+    public readonly strings: TemplateStringsArray,
+    public readonly values: unknown[],
+    public readonly processor: TemplateTypeInit
+  ) {}
+
+  get template(): HTMLTemplateElement {
+    if (templates.has(this.strings)) {
+      return templates.get(this.strings) as HTMLTemplateElement;
+    } else {
+      const template = document.createElement('template');
+      const end = this.strings.length - 1;
+      template.innerHTML = this.strings.reduce((str, cur, i) => str + cur + (i < end ? `{{ ${i} }}` : ''), '');
+      templates.set(this.strings, template);
+      return template;
+    }
+  }
+
+  renderInto(element: Node | NodeTemplatePart): void {
+    const template = this.template;
+    if (renderedTemplates.get(element) !== template) {
+      renderedTemplates.set(element, template);
+      const instance = new TemplateInstance(template, this.values, this.processor);
+      renderedTemplateInstances.set(element, instance);
+      if (element instanceof NodeTemplatePart) {
+        element.replace(...instance.children);
+      } else {
+        element.appendChild(instance);
+      }
+      return;
+    }
+    const templateInstance = renderedTemplateInstances.get(element);
+    if (templateInstance) {
+      templateInstance.update(this.values as unknown as Record<string, unknown>);
+    }
+  }
+}
+
+const defaultProcessor = createProcessor(processPart);
+export function html(strings: TemplateStringsArray, ...values: unknown[]): TemplateResult {
+  return new TemplateResult(strings, values, defaultProcessor);
+}
+
+export function render(result: TemplateResult, element: Node | NodeTemplatePart): void {
+  result.renderInto(element);
+}
+
+export function createTemplateInstance(content: string, props?: any) {
+  const template = document.createElement('template');
+  template.innerHTML = content;
+  return new TemplateInstance(template, props);
+}