@mux/mux-player - npm Package Compare versions

Comparing version 0.1.0-canary.10-94d000a to 0.1.0-canary.10-958b850

dist/types-ts3.4/helpers.d.ts

@@ -16,2 +16,3 @@ import MuxPlayerElement from '.';
 }) => string;
+export declare function castThemeName(themeName?: string): string | undefined;
 export declare function toPropName(attrName: string): string;
@@ -18,0 +19,0 @@ export declare const getLiveTime: (el: MuxPlayerElement) => number | undefined;

dist/types-ts3.4/html.d.ts

@@ -19,1 +19,6 @@ import { TemplateInstance, NodeTemplatePart } from '@github/template-parts';
 export declare function createTemplateInstance(content: string, props?: any): TemplateInstance;
+export declare const unsafeStatic: (...values: any[]) => {
+    $static$: (TemplateResult | {
+        strings: any[];
+    })[];
+};

dist/types-ts3.4/index.d.ts

@@ -12,5 +12,2 @@ import '@mux/playback-core';
 };
-declare type MediaController = Element & {
-    media: HTMLVideoElement;
-};
 declare class MuxPlayerElement extends VideoApiElement {
@@ -17,0 +14,0 @@ private "MuxPlayerElement.#private";

dist/types-ts3.4/media-theme-mux/media-theme-mux.d.ts

@@ -1,14 +0,19 @@
-import 'media-chrome';
+import { MediaTheme } from 'media-chrome';
 import '../media-chrome/time-display';
 declare type ThemeMuxTemplateProps = {
-    streamType: string;
+    streamType: string | null;
     audio: boolean;
-    playerSize: string;
+    playerSize: string | null;
     defaultHiddenCaptions: boolean;
-    forwardSeekOffset: number;
-    backwardSeekOffset: number;
+    forwardSeekOffset: string | null;
+    backwardSeekOffset: string | null;
 };
+export default class MediaThemeMux extends MediaTheme {
+    static readonly observedAttributes: string[];
+    attributeChangedCallback(): void;
+    render(): void;
+}
 export declare const AudioVodChrome: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
 export declare const AudioDvrChrome: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
-export declare const AudioLiveChrome: (_props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
+export declare const AudioLiveChrome: () => import("../html").TemplateResult;
 export declare const VodChromeExtraSmall: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
@@ -23,7 +28,2 @@ export declare const VodChromeSmall: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
 export declare const DvrChromeLarge: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
-declare class MediaThemeMux extends HTMLElement {
-    static readonly observedAttributes: string[];
-    constructor();
-    attributeChangedCallback(): void;
-}
-export default MediaThemeMux;
+export {};

dist/types/helpers.d.ts

@@ -16,2 +16,3 @@ import type MuxPlayerElement from '.';
 }) => string;
+export declare function castThemeName(themeName?: string): string | undefined;
 export declare function toPropName(attrName: string): string;
@@ -18,0 +19,0 @@ export declare const getLiveTime: (el: MuxPlayerElement) => number | undefined;

dist/types/html.d.ts

@@ -19,1 +19,6 @@ import { TemplateInstance, NodeTemplatePart } from '@github/template-parts';
 export declare function createTemplateInstance(content: string, props?: any): TemplateInstance;
+export declare const unsafeStatic: (...values: any[]) => {
+    $static$: (TemplateResult | {
+        strings: any[];
+    })[];
+};

dist/types/index.d.ts

@@ -12,5 +12,2 @@ import '@mux/playback-core';
 };
-declare type MediaController = Element & {
-    media: HTMLVideoElement;
-};
 declare class MuxPlayerElement extends VideoApiElement {
@@ -17,0 +14,0 @@ #private;

dist/types/media-theme-mux/media-theme-mux.d.ts

@@ -1,14 +0,19 @@
-import 'media-chrome';
+import { MediaTheme } from 'media-chrome';
 import '../media-chrome/time-display';
 declare type ThemeMuxTemplateProps = {
-    streamType: string;
+    streamType: string | null;
     audio: boolean;
-    playerSize: string;
+    playerSize: string | null;
     defaultHiddenCaptions: boolean;
-    forwardSeekOffset: number;
-    backwardSeekOffset: number;
+    forwardSeekOffset: string | null;
+    backwardSeekOffset: string | null;
 };
+export default class MediaThemeMux extends MediaTheme {
+    static get observedAttributes(): string[];
+    attributeChangedCallback(): void;
+    render(): void;
+}
 export declare const AudioVodChrome: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
 export declare const AudioDvrChrome: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
-export declare const AudioLiveChrome: (_props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
+export declare const AudioLiveChrome: () => import("../html").TemplateResult;
 export declare const VodChromeExtraSmall: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
@@ -23,7 +28,2 @@ export declare const VodChromeSmall: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
 export declare const DvrChromeLarge: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
-declare class MediaThemeMux extends HTMLElement {
-    static get observedAttributes(): string[];
-    constructor();
-    attributeChangedCallback(): void;
-}
-export default MediaThemeMux;
+export {};

package.json

 {
   "name": "@mux/mux-player",
-  "version": "0.1.0-canary.10-94d000a",
+  "version": "0.1.0-canary.10-958b850",
   "description": "An open source Mux player web component that Just Works™",
@@ -5,0 +5,0 @@ "main": "./dist/index.cjs.js",

src/helpers.ts

@@ -59,2 +59,9 @@ import { toQuery, camelCase } from './utils';
 
+export function castThemeName(themeName?: string): string | undefined {
+  if (themeName && /^media-theme-[\w-]+$/.test(themeName)) {
+    return themeName;
+  }
+  return undefined;
+}
+
 const attrToPropNameMap: Record<string, string> = {
@@ -61,0 +68,0 @@ crossorigin: 'crossOrigin',

src/html.ts

@@ -152,4 +152,45 @@ import { TemplateInstance, NodeTemplatePart, createProcessor, AttributeTemplatePart } from '@github/template-parts';
 
+const stringsCache = new Map();
 const defaultProcessor = createProcessor(processPart);
 export function html(strings: TemplateStringsArray, ...values: unknown[]): TemplateResult {
+  const staticStrings: any = [''];
+  const dynamicValues: any[] = [];
+  let staticValues;
+  let hasStatics = false;
+
+  // Here the unsafe static values are moved from the string expressions
+  // to the static strings so they can be used in the cache key and later
+  // be used to generate the HTML via the <template> element.
+  const join = (strs: TemplateStringsArray, vals: any[] = []) => {
+    staticStrings[staticStrings.length - 1] = staticStrings[staticStrings.length - 1] + strs[0];
+
+    vals.forEach((dynamicValue, i) => {
+      if ((staticValues = dynamicValue?.$static$) !== undefined) {
+        staticValues.forEach((staticValue: TemplateResult) => {
+          join(staticValue.strings, staticValue.values);
+        });
+
+        staticStrings[staticStrings.length - 1] = staticStrings[staticStrings.length - 1] + strs[i + 1];
+        hasStatics = true;
+      } else {
+        dynamicValues.push(dynamicValue);
+        staticStrings.push(strs[i + 1]);
+      }
+    });
+  };
+
+  join(strings, values);
+
+  if (hasStatics) {
+    // Tagged template literals with the same static strings return the same
+    // TemplateStringsArray, aka they are cached. emulate this behavior w/ a Map.
+    const key = staticStrings.join('$$html$$');
+    strings = stringsCache.get(key);
+    if (strings === undefined) {
+      (staticStrings as any).raw = staticStrings;
+      stringsCache.set(key, (strings = staticStrings));
+    }
+    values = dynamicValues;
+  }
+
   return new TemplateResult(strings, values, defaultProcessor);
@@ -167,1 +208,10 @@ }
 }
+
+export const unsafeStatic = (...values: any[]) => ({
+  ['$static$']: values.map((value) => {
+    if (value instanceof TemplateResult) return value;
+    // Only allow word characters and dashes for security.
+    if (!/\w-/.test(value)) return { strings: [] };
+    return { strings: [value] };
+  }),
+});

src/index.ts

@@ -5,3 +5,2 @@ // import playback-core here to make sure that the polyfill is loaded
 import { MediaController } from 'media-chrome';
-import MediaThemeMux from './media-theme-mux/media-theme-mux';
 import MuxVideoElement, { MediaError } from '@mux/mux-video';
@@ -25,4 +24,2 @@ import { Metadata, StreamTypes } from '@mux/playback-core';
 
-type MediaController = Element & { media: HTMLVideoElement };
-
 const streamTypeValues = Object.values(StreamTypes);
@@ -90,2 +87,3 @@
     poster: el.getAttribute('poster'),
+    theme: el.getAttribute('theme'),
     thumbnailTime: !el.tokens.thumbnail && el.thumbnailTime,
@@ -181,15 +179,21 @@ autoplay: el.autoplay,
     // even before they are connected to the main document.
-    customElements.upgrade(this.theme as Node);
-    if (!(this.theme instanceof MediaThemeMux)) {
-      logger.error('<media-theme-mux> failed to upgrade!');
+    try {
+      customElements.upgrade(this.theme as Node);
+      if (!(this.theme instanceof HTMLElement)) throw '';
+    } catch (error) {
+      logger.error(`<${this.theme?.localName}> failed to upgrade!`);
     }
 
-    customElements.upgrade(this.media as Node);
-    if (!(this.media instanceof MuxVideoElement)) {
+    try {
+      customElements.upgrade(this.media as Node);
+      if (!(this.media instanceof MuxVideoElement)) throw '';
+    } catch (error) {
       logger.error('<mux-video> failed to upgrade!');
     }
 
-    customElements.upgrade(this.mediaController as Node);
-    if (!(this.mediaController instanceof MediaController)) {
-      logger.error('<media-controller> failed to upgrade!');
+    try {
+      customElements.upgrade(this.mediaController as Node);
+      if (!(this.mediaController instanceof MediaController)) throw '';
+    } catch (error) {
+      logger.error(`<media-controller> failed to upgrade!`);
     }
@@ -196,0 +200,0 @@

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

@@ -1,2 +0,2 @@
-import 'media-chrome';
+import { MediaTheme } from 'media-chrome';
 import { html, render } from '../html';
@@ -17,23 +17,57 @@ import '../media-chrome/time-display';
 type ThemeMuxTemplateProps = {
-  streamType: string;
+  streamType: string | null;
   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>
+export default class MediaThemeMux extends MediaTheme {
+  static get observedAttributes() {
+    return [
+      'audio',
+      'stream-type',
+      'player-size',
+      'default-hidden-captions',
+      'forward-seek-offset',
+      'backward-seek-offset',
+    ];
+  }
 
-  <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>
-`;
+  attributeChangedCallback() {
+    this.render();
+  }
 
+  render() {
+    const props = {
+      audio: this.hasAttribute('audio'),
+      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 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>
+      `,
+      this.shadowRoot as Node
+    );
+  }
+}
+
+if (!customElements.get('media-theme-mux')) {
+  customElements.define('media-theme-mux', MediaThemeMux);
+}
+
 const ChromeRenderer = (props: ThemeMuxTemplateProps) => {
@@ -45,3 +79,3 @@ const { streamType, playerSize, audio } = props;
       case StreamTypes.LL_LIVE: {
-        return AudioLiveChrome(props);
+        return AudioLiveChrome();
       }
@@ -184,3 +218,3 @@ case StreamTypes.DVR:
 
-export const AudioLiveChrome = (_props: ThemeMuxTemplateProps) => html`
+export const AudioLiveChrome = () => html`
   <media-control-bar>
@@ -357,43 +391,1 @@ ${MediaPlayButton()}
 `;
-
-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;

src/template.ts

 import './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
@@ -20,10 +25,12 @@ import cssStr from './styles.css';
 export const content = (props: MuxTemplateProps) => html`
-  <media-theme-mux
+  <${unsafeStatic(castThemeName(props.theme) ?? '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}"
+    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}"
@@ -56,36 +63,44 @@ stream-type="${props.streamType}"
       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>
@@ -115,14 +130,16 @@ <button
         ${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')}>
 `;

src/types.d.ts

@@ -9,2 +9,3 @@ import type MuxVideoElement, { MediaError } from '@mux/mux-video';
   audio: boolean;
+  theme?: string;
   playerSize: string;
@@ -11,0 +12,0 @@ showLoading: boolean;

No alert changes

Improved metrics

Total package byte prevSize

1708720

increased by0.32%

Lines of code

13973

increased by0.63%

No dependency changes