@mux/mux-player 0.1.0-beta.21

package/src/logger.ts

@@ -0,0 +1,26 @@
+import { i18n } from './utils';
+import { getPlayerVersion } from './helpers';
+import type { DevlogOptions } from './types';
+
+const prefix = `[mux-player ${getPlayerVersion()}]`;
+
+export function log(...args: any[]) {
+  console.log(prefix, ...args);
+}
+
+export function warn(...args: any[]) {
+  console.warn(prefix, ...args);
+}
+
+export function error(...args: any[]) {
+  console.error(prefix, ...args);
+}
+
+export function devlog(opts: DevlogOptions) {
+  let message = opts.message ?? '';
+  if (opts.file) {
+    const githubErrorsBase = 'https://github.com/muxinc/elements/blob/main/errors/';
+    message += ` ${i18n(`Read more: `)}\n${githubErrorsBase}${opts.file}`;
+  }
+  warn(message);
+}

package/src/media-chrome/dialog.ts

@@ -0,0 +1,192 @@
+/* Inspired by HTMLDialogElement &
+   https://github.com/GoogleChrome/dialog-polyfill/blob/master/index.js */
+
+const styles = `
+  :host {
+    z-index: 100;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    color: #fff;
+    line-height: 18px;
+    font-family: Arial, sans-serif;
+    padding: var(--media-dialog-backdrop-padding, 0);
+    background: var(--media-dialog-backdrop-background,
+      linear-gradient(to bottom, rgba(20, 20, 30, 0.7) 50%, rgba(20, 20, 30, 0.9))
+    );
+    /* Needs to use !important to prevent overwrite of media-chrome */
+    transition: var(--media-dialog-transition-open, visibility .2s, opacity .2s) !important;
+    transform: var(--media-dialog-transform-open, none) !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+    pointer-events: auto !important;
+  }
+
+  :host(:not([open])) {
+    /* Needs to use !important to prevent overwrite of media-chrome */
+    transition: var(--media-dialog-transition-close, visibility .1s, opacity .1s) !important;
+    transform: var(--media-dialog-transform-close, none) !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+  }
+
+  /*
+    Only show outline when keyboard focusing.
+    https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
+    :host-context support is bad https://caniuse.com/mdn-css_selectors_host-context
+  */
+  :host-context([media-keyboard-control]) ::slotted(:focus),
+  :host-context([media-keyboard-control]) :focus {
+    box-shadow: 0 0 0 2px rgba(27, 127, 204, 0.9);
+  }
+
+  .dialog {
+    position: relative;
+    box-sizing: border-box;
+    background: var(--media-dialog-background, none);
+    padding: var(--media-dialog-padding, 10px);
+    width: min(320px, 100%);
+    word-wrap: break-word;
+    max-height: 100%;
+    overflow: auto;
+    text-align: center;
+    line-height: 1.4;
+  }
+`;
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+    ${styles}
+  </style>
+
+  <div class="dialog">
+    <slot></slot>
+  </div>
+`;
+
+class MediaDialog extends HTMLElement {
+  static styles: string = styles;
+  static template: HTMLTemplateElement = template;
+  static observedAttributes = ['open'];
+
+  _previouslyFocusedElement?: Element | null;
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot?.appendChild((this.constructor as any).template.content.cloneNode(true));
+  }
+
+  show() {
+    this.setAttribute('open', '');
+    this.dispatchEvent(new CustomEvent('open', { composed: true, bubbles: true }));
+    focus(this);
+  }
+
+  close() {
+    // If already closed, don't re-emit value (circular due to attributeChangedCallback()) (CJP)
+    if (!this.hasAttribute('open')) return;
+    this.removeAttribute('open');
+    this.dispatchEvent(new CustomEvent('close', { composed: true, bubbles: true }));
+    restoreFocus(this);
+  }
+
+  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string) {
+    if (attrName === 'open' && oldValue !== newValue) {
+      newValue != null ? this.show() : this.close();
+    }
+  }
+
+  connectedCallback() {
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'dialog');
+    }
+
+    if (this.hasAttribute('open')) {
+      focus(this);
+    }
+  }
+}
+
+function focus(el: MediaDialog) {
+  const initFocus = new CustomEvent('initfocus', { composed: true, bubbles: true, cancelable: true });
+  el.dispatchEvent(initFocus);
+
+  // If `event.preventDefault()` was called in a listener prevent focusing.
+  if (initFocus.defaultPrevented) return;
+
+  // Find element with `autofocus` attribute, or fall back to the first form/tabindex control.
+  let target: Element | null | undefined = el.querySelector('[autofocus]:not([disabled])');
+  if (!target && (el as HTMLElement).tabIndex >= 0) {
+    target = el;
+  }
+  if (!target) {
+    target = findFocusableElementWithin(el.shadowRoot);
+  }
+
+  el._previouslyFocusedElement = document.activeElement;
+  if (document.activeElement instanceof HTMLElement) {
+    document.activeElement.blur();
+  }
+
+  el.addEventListener(
+    'transitionend',
+    () => {
+      if (target instanceof HTMLElement) {
+        target.focus({ preventScroll: true });
+      }
+    },
+    { once: true }
+  );
+}
+
+function findFocusableElementWithin(hostElement: Element | ShadowRoot | null | undefined): Element | null | undefined {
+  // Note that this is 'any focusable area'. This list is probably not exhaustive, but the
+  // alternative involves stepping through and trying to focus everything.
+  const opts = ['button', 'input', 'keygen', 'select', 'textarea'];
+  const query = opts.map(function (el) {
+    return el + ':not([disabled])';
+  });
+  // TODO(samthor): tabindex values that are not numeric are not focusable.
+  query.push('[tabindex]:not([disabled]):not([tabindex=""])'); // tabindex != "", not disabled
+  let target = hostElement?.querySelector(query.join(', '));
+
+  if (!target && 'attachShadow' in Element.prototype) {
+    // If we haven't found a focusable target, see if the host element contains an element
+    // which has a shadowRoot.
+    // Recursively search for the first focusable item in shadow roots.
+    const elems = hostElement?.querySelectorAll('*') || [];
+    for (let i = 0; i < elems.length; i++) {
+      if (elems[i].tagName && elems[i].shadowRoot) {
+        target = findFocusableElementWithin(elems[i].shadowRoot);
+        if (target) {
+          break;
+        }
+      }
+    }
+  }
+
+  return target;
+}
+
+function restoreFocus(el: MediaDialog) {
+  if (el._previouslyFocusedElement instanceof HTMLElement) {
+    el._previouslyFocusedElement.focus();
+  }
+}
+
+if (!globalThis.customElements.get('media-dialog')) {
+  globalThis.customElements.define('media-dialog', MediaDialog);
+  (globalThis as any).MediaDialog = MediaDialog;
+}
+
+export default MediaDialog;

package/src/media-chrome/time-display.ts

@@ -0,0 +1,70 @@
+const styles = `
+  :host {
+    cursor: pointer;
+  }
+  media-time-display {
+    color: inherit;
+  }
+`;
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+    ${styles}
+  </style>
+  <media-time-display show-duration></media-time-display>
+`;
+
+const ButtonPressedKeys = ['Enter', ' '];
+
+class MxpTimeDisplay extends HTMLElement {
+  static styles: string = styles;
+  static template: HTMLTemplateElement = template;
+  timeDisplayEl: HTMLElement | null | undefined;
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot?.appendChild((this.constructor as any).template.content.cloneNode(true));
+    this.timeDisplayEl = this.shadowRoot?.querySelector('media-time-display');
+  }
+
+  toggleTimeDisplay() {
+    if (this.timeDisplayEl?.hasAttribute('remaining')) {
+      this.timeDisplayEl?.removeAttribute('remaining');
+    } else {
+      this.timeDisplayEl?.setAttribute('remaining', '');
+    }
+  }
+
+  connectedCallback() {
+    const keyUpHandler = (e: KeyboardEvent) => {
+      const { key } = e;
+      if (!ButtonPressedKeys.includes(key)) {
+        this.removeEventListener('keyup', keyUpHandler);
+        return;
+      }
+
+      this.toggleTimeDisplay();
+    };
+
+    this.addEventListener('keydown', (e) => {
+      const { metaKey, altKey, key } = e;
+      if (metaKey || altKey || !ButtonPressedKeys.includes(key)) {
+        this.removeEventListener('keyup', keyUpHandler);
+        return;
+      }
+      this.addEventListener('keyup', keyUpHandler);
+    });
+
+    this.addEventListener('click', this.toggleTimeDisplay);
+  }
+}
+
+if (!globalThis.customElements.get('mxp-time-display')) {
+  globalThis.customElements.define('mxp-time-display', MxpTimeDisplay);
+  (globalThis as any).MxpTimeDisplay = MxpTimeDisplay;
+}
+
+export default MxpTimeDisplay;

package/src/media-theme-mux/icons/airplay.svg

@@ -0,0 +1,8 @@
+<svg aria-hidden="true" viewBox="0 0 20 18" slot="airplay">
+  <path
+    d="M10.19 11.22a.25.25 0 0 0-.38 0l-5.46 6.37a.25.25 0 0 0 .19.41h10.92a.25.25 0 0 0 .19-.41Z"
+  />
+  <path
+    d="M19 0H1a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h2.94L5 13.75H1.25V1.25h17.5v12.5H15L16.06 15H19a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1Z"
+  />
+</svg>

package/src/media-theme-mux/icons/captions-off.svg

@@ -0,0 +1,5 @@
+<svg aria-hidden="true" viewBox="0 0 20 18" slot="off">
+  <path
+    d="M19.83 2.68a2.58 2.58 0 0 0-2.3-2.5C15.72.06 12.86 0 10 0S4.28.06 2.47.18a2.58 2.58 0 0 0-2.3 2.5 115.86 115.86 0 0 0 0 12.64 2.58 2.58 0 0 0 2.3 2.5c1.81.12 4.67.18 7.53.18s5.72-.06 7.53-.18a2.58 2.58 0 0 0 2.3-2.5 115.86 115.86 0 0 0 0-12.64Zm-1.49 12.53a1.11 1.11 0 0 1-.91 1.11c-1.67.11-4.45.18-7.43.18s-5.76-.07-7.43-.18a1.11 1.11 0 0 1-.91-1.11 122.5 122.5 0 0 1 0-12.42 1.11 1.11 0 0 1 .91-1.11C4.24 1.57 7 1.5 10 1.5s5.76.07 7.43.18a1.11 1.11 0 0 1 .91 1.11 122.5 122.5 0 0 1 0 12.42ZM7.84 11a1.55 1.55 0 0 1-.76.18 1.57 1.57 0 0 1-.71-.18 1.69 1.69 0 0 1-.57-.42 2.1 2.1 0 0 1-.38-.58 2.47 2.47 0 0 1 0-1.64 2 2 0 0 1 .39-.66 1.73 1.73 0 0 1 .58-.42 1.81 1.81 0 0 1 .73-.16 1.68 1.68 0 0 1 .7.14 1.39 1.39 0 0 1 .51.39l1.08-.89a2.18 2.18 0 0 0-.47-.44A2.81 2.81 0 0 0 8.4 6a2.91 2.91 0 0 0-.58-.15 2.71 2.71 0 0 0-.56 0A4.08 4.08 0 0 0 5.88 6a3.27 3.27 0 0 0-1.09.67 3.14 3.14 0 0 0-.71 1.06 3.62 3.62 0 0 0-.26 1.39 3.57 3.57 0 0 0 .26 1.38 3 3 0 0 0 .71 1.06 3.27 3.27 0 0 0 1.09.67 3.85 3.85 0 0 0 1.38.23 3.2 3.2 0 0 0 1.28-.27 2.49 2.49 0 0 0 1-.83l-1.17-.88a1.42 1.42 0 0 1-.53.52Zm6.62 0a1.58 1.58 0 0 1-.76.18A1.54 1.54 0 0 1 13 11a1.69 1.69 0 0 1-.57-.42A2.12 2.12 0 0 1 12 10a2.29 2.29 0 0 1 .39-2.3 1.84 1.84 0 0 1 1.32-.58 1.71 1.71 0 0 1 .7.14 1.39 1.39 0 0 1 .51.39L16 6.73a2.43 2.43 0 0 0-.47-.44A3.22 3.22 0 0 0 15 6a3 3 0 0 0-.57-.15 2.87 2.87 0 0 0-.57 0A4.06 4.06 0 0 0 12.5 6a3.17 3.17 0 0 0-1.09.67 3 3 0 0 0-.72 1.06 3.62 3.62 0 0 0-.25 1.39 3.57 3.57 0 0 0 .25 1.38 2.93 2.93 0 0 0 .72 1.06 3.17 3.17 0 0 0 1.09.67 3.83 3.83 0 0 0 1.37.23 3.16 3.16 0 0 0 1.28-.27 2.45 2.45 0 0 0 1-.83L15 10.51a1.49 1.49 0 0 1-.54.49Z"
+  />
+</svg>

package/src/media-theme-mux/icons/captions-on.svg

@@ -0,0 +1,5 @@
+<svg aria-hidden="true" viewBox="0 0 20 18" slot="on">
+  <path
+    d="M19.83 2.68a2.58 2.58 0 0 0-2.3-2.5C13.91-.06 6.09-.06 2.47.18a2.58 2.58 0 0 0-2.3 2.5 115.86 115.86 0 0 0 0 12.64 2.58 2.58 0 0 0 2.3 2.5c3.62.24 11.44.24 15.06 0a2.58 2.58 0 0 0 2.3-2.5 115.86 115.86 0 0 0 0-12.64ZM8.42 12.78a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27A4 4 0 0 1 4 12a3.67 3.67 0 0 1-.84-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64A3.53 3.53 0 0 1 4 6.26a3.89 3.89 0 0 1 1.29-.8 4.76 4.76 0 0 1 1.63-.27 4.06 4.06 0 0 1 .67.06 4.57 4.57 0 0 1 .68.18 3.59 3.59 0 0 1 .64.34 2.7 2.7 0 0 1 .55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.35 2.35 0 0 0-.46.77 2.78 2.78 0 0 0-.16 1 2.74 2.74 0 0 0 .16 1 2.39 2.39 0 0 0 .46.77 2.07 2.07 0 0 0 .67.5 2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.88 2.88 0 0 1-1.22 1.01Zm7.52 0a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 3.89 3.89 0 0 1-1.28-.83 3.55 3.55 0 0 1-.85-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.43 3.43 0 0 1 .85-1.25 3.75 3.75 0 0 1 1.28-.8 4.76 4.76 0 0 1 1.63-.27 4 4 0 0 1 .67.06 4.27 4.27 0 0 1 .68.18 3.59 3.59 0 0 1 .64.34 2.46 2.46 0 0 1 .55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.35 2.35 0 0 0-.46.77 3 3 0 0 0-.16 1 3 3 0 0 0 .16 1 2.58 2.58 0 0 0 .46.77 2.07 2.07 0 0 0 .67.5 2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.82 2.82 0 0 1-1.21 1.05Z"
+  />
+</svg>

package/src/media-theme-mux/icons/fullscreen-enter.svg

@@ -0,0 +1,5 @@
+<svg aria-hidden="true" viewBox="0 0 18 18" slot="enter">
+  <path
+    d="M17.25 11.5a.76.76 0 0 0-.75.75v4.25h-4.25a.75.75 0 0 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5a.76.76 0 0 0-.75-.75Zm0-11.5h-5a.76.76 0 0 0-.75.75.76.76 0 0 0 .75.75h4.25v4.25a.75.75 0 0 0 1.5 0v-5a.76.76 0 0 0-.75-.75ZM5.75 16.5H1.5v-4.25a.76.76 0 0 0-.75-.75.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75h5a.75.75 0 0 0 0-1.5Zm0-16.5h-5A.76.76 0 0 0 0 .75v5a.76.76 0 0 0 .75.75.76.76 0 0 0 .75-.75V1.5h4.25A.76.76 0 0 0 6.5.75.76.76 0 0 0 5.75 0Z"
+  />
+</svg>

package/src/media-theme-mux/icons/fullscreen-exit.svg

@@ -0,0 +1,5 @@
+<svg aria-hidden="true" viewBox="0 0 18 18" slot="exit">
+  <path
+    d="M17.25 11.5h-5a.76.76 0 0 0-.75.75v5a.75.75 0 0 0 1.5 0V13h4.25a.75.75 0 0 0 0-1.5Zm-5-5h5a.75.75 0 0 0 0-1.5H13V.75a.75.75 0 0 0-1.5 0v5a.76.76 0 0 0 .75.75Zm-6.5 5h-5a.75.75 0 0 0 0 1.5H5v4.25a.75.75 0 0 0 1.5 0v-5a.76.76 0 0 0-.75-.75Zm0-11.5A.76.76 0 0 0 5 .75V5H.75a.75.75 0 0 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5A.76.76 0 0 0 5.75 0Z"
+  />
+</svg>

package/src/media-theme-mux/icons/pause.svg

@@ -0,0 +1,5 @@
+<svg aria-hidden="true" viewBox="0 0 18 18" slot="pause">
+  <path
+    d="M3 16.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v15ZM11.5 1a.5.5 0 0 0-.5.5v15a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-3Z"
+  />
+</svg>

package/src/media-theme-mux/icons/pip-enter.svg

@@ -0,0 +1,5 @@
+<svg aria-hidden="true" viewBox="0 0 20 18" slot="enter">
+  <path
+    d="M19 0H1a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V1.25h17.5v6.5H20V1a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7Z"
+  />
+</svg>

package/src/media-theme-mux/icons/pip-exit.svg

@@ -0,0 +1,5 @@
+<svg aria-hidden="true" viewBox="0 0 20 18" slot="exit">
+  <path
+    d="M19 0H1a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V1.25h17.5v6.5H20V1a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7Z"
+  />
+</svg>

package/src/media-theme-mux/icons/play.svg

@@ -0,0 +1,5 @@
+<svg aria-hidden="true" viewBox="0 0 18 18" slot="play">
+  <path
+    d="m3.73 17.93 14.05-8.54a.46.46 0 0 0 0-.78L3.73.07A.48.48 0 0 0 3 .46v17.07a.48.48 0 0 0 .73.4Z"
+  />
+</svg>

package/src/media-theme-mux/icons/seek-backward.svg

@@ -0,0 +1,13 @@
+<svg aria-hidden="true" viewBox="0 0 16 18" slot="backward">
+  <path
+    d="M8.75 3.42H4.68l2.14-2.14A.75.75 0 0 0 5.76.22L2.22 3.75a.77.77 0 0 0 0 1.07l3.54 3.53a.75.75 0 0 0 1.06 0 .75.75 0 0 0 0-1.06L4.45 4.92h4.3A5.75 5.75 0 0 1 11 16a.75.75 0 0 0 .29 1.44.72.72 0 0 0 .29-.06A7.25 7.25 0 0 0 8.75 3.42Z"
+  />
+  <text
+    class="value"
+    transform="translate(.6 17.8)"
+    style="font-size: 8px; font-family: 'ArialMT', 'Arial'"
+  >
+    {{value}}
+  </text>
+  <path style="fill: none" d="M0 0h16v18H0z" />
+</svg>

package/src/media-theme-mux/icons/seek-forward.svg

@@ -0,0 +1,13 @@
+<svg aria-hidden="true" viewBox="0 0 16 18" slot="forward">
+  <path
+    d="M7.25 3.42h4.07L9.18 1.28A.75.75 0 0 1 10.24.22l3.54 3.53a.77.77 0 0 1 0 1.07l-3.54 3.53a.75.75 0 0 1-1.06 0 .75.75 0 0 1 0-1.06l2.37-2.37h-4.3A5.75 5.75 0 0 0 5 16a.75.75 0 0 1-.29 1.44.72.72 0 0 1-.29-.06A7.25 7.25 0 0 1 7.25 3.42Z"
+  />
+  <text
+    class="value"
+    transform="translate(6.5 17.8)"
+    style="font-size: 8px; font-family: 'ArialMT', 'Arial'"
+  >
+    {{value}}
+  </text>
+  <path style="fill: none" d="M0 0h16v18H0z" />
+</svg>

package/src/media-theme-mux/icons/volume-high.svg

@@ -0,0 +1,6 @@
+<svg aria-hidden="true" viewBox="0 0 18 18" slot="high">
+  <path
+    d="m8.14 1.86-4 4a.49.49 0 0 1-.35.14H.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V2.21a.5.5 0 0 0-.86-.35ZM10.88.3v1.52A7.52 7.52 0 0 1 16.47 9a7.52 7.52 0 0 1-5.59 7.18v1.52A9 9 0 0 0 18 9 9 9 0 0 0 10.88.3ZM14.44 9a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66A5.49 5.49 0 0 0 14.44 9Z"
+  />
+  <path style="fill: none" d="M0 0h18v18H0z" />
+</svg>

package/src/media-theme-mux/icons/volume-low.svg

@@ -0,0 +1,6 @@
+<svg aria-hidden="true" viewBox="0 0 18 18" slot="low">
+  <path
+    d="m8.14 1.86-4 4a.49.49 0 0 1-.35.14H.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V2.21a.5.5 0 0 0-.86-.35ZM14.44 9a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66A5.49 5.49 0 0 0 14.44 9Z"
+  />
+  <path style="fill: none" d="M0 0h18v18H0z" />
+</svg>

package/src/media-theme-mux/icons/volume-medium.svg

@@ -0,0 +1,6 @@
+<svg aria-hidden="true" viewBox="0 0 18 18" slot="medium">
+  <path
+    d="m8.14 1.86-4 4a.49.49 0 0 1-.35.14H.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V2.21a.5.5 0 0 0-.86-.35ZM14.44 9a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66A5.49 5.49 0 0 0 14.44 9Z"
+  />
+  <path style="fill: none" d="M0 0h18v18H0z" />
+</svg>

package/src/media-theme-mux/icons/volume-off.svg

@@ -0,0 +1,6 @@
+<svg aria-hidden="true" viewBox="0 0 18 18" slot="off">
+  <path
+    d="m0 1.05 4.48 4.47-.33.33a.49.49 0 0 1-.36.15H.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.48.48 0 0 0 .36.15.5.5 0 0 0 .5-.5v-5.75l4.67 4.66a7.71 7.71 0 0 1-2.79 1.47v1.52a9.32 9.32 0 0 0 3.87-1.91L17 18l1-1L1.06 0Zm5.36 5.36L7.75 8.8V14L5 11.26a1.74 1.74 0 0 0-1.24-.51H1.25v-3.5h2.54A1.74 1.74 0 0 0 5 6.74ZM16.47 9a7.19 7.19 0 0 1-.89 3.47l1.11 1.1A8.64 8.64 0 0 0 18 9 9 9 0 0 0 10.88.3v1.52A7.52 7.52 0 0 1 16.47 9ZM9 5.88V2.21a.5.5 0 0 0-.5-.5.48.48 0 0 0-.36.15L6.56 3.44ZM12.91 9a4.28 4.28 0 0 1-.07.72l1.22 1.22A5.2 5.2 0 0 0 14.44 9a5.49 5.49 0 0 0-3.56-5.1v1.66A4 4 0 0 1 12.91 9Z"
+  />
+  <path style="fill: none" d="M0 0h18v18H0z" />
+</svg>

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

@@ -0,0 +1,33 @@
+// @ts-nocheck
+import { createTemplateInstance } from '../html';
+import airplayIcon from './icons/airplay.svg';
+import captionsOffIcon from './icons/captions-off.svg';
+import captionsOnIcon from './icons/captions-on.svg';
+import fullscreenEnter from './icons/fullscreen-enter.svg';
+import fullscreenExit from './icons/fullscreen-exit.svg';
+import pause from './icons/pause.svg';
+import pipEnter from './icons/pip-enter.svg';
+import pipExit from './icons/pip-exit.svg';
+import play from './icons/play.svg';
+import seekBackward from './icons/seek-backward.svg';
+import seekForward from './icons/seek-forward.svg';
+import volumeHigh from './icons/volume-high.svg';
+import volumeLow from './icons/volume-low.svg';
+import volumeMedium from './icons/volume-medium.svg';
+import volumeOff from './icons/volume-off.svg';
+
+export const Airplay = () => createTemplateInstance(airplayIcon);
+export const CaptionsOff = () => createTemplateInstance(captionsOffIcon);
+export const CaptionsOn = () => createTemplateInstance(captionsOnIcon);
+export const FullscreenEnter = () => createTemplateInstance(fullscreenEnter);
+export const FullscreenExit = () => createTemplateInstance(fullscreenExit);
+export const Pause = () => createTemplateInstance(pause);
+export const PipEnter = () => createTemplateInstance(pipEnter);
+export const PipExit = () => createTemplateInstance(pipExit);
+export const Play = () => createTemplateInstance(play);
+export const SeekBackward = (p: any) => createTemplateInstance(seekBackward, p);
+export const SeekForward = (p: any) => createTemplateInstance(seekForward, p);
+export const VolumeHigh = () => createTemplateInstance(volumeHigh);
+export const VolumeLow = () => createTemplateInstance(volumeLow);
+export const VolumeMedium = () => createTemplateInstance(volumeMedium);
+export const VolumeOff = () => createTemplateInstance(volumeOff);