@mux/mux-player 2.3.3 → 2.4.0

package/dist/themes/gerwig/index.mjs

@@ -46,10 +46,6 @@ var gerwig_default = `<template id="media-theme-gerwig">
       --media-control-background: var(--_secondary-color);
       --media-control-hover-background: var(--_accent-color);
       --media-time-buffered-color: rgba(255, 255, 255, 0.4);
-      --media-preview-thumbnail-border: 0;
-      --media-preview-thumbnail-border-radius: 2px 2px 0 0;
-      --media-preview-time-border-radius: 0 0 2px 2px;
-      --media-preview-time-margin: 0 0 8px;
       --media-preview-time-text-shadow: none;
       --media-control-height: 14px;
       --media-control-padding: 6px;
@@ -62,8 +58,6 @@ var gerwig_default = `<template id="media-theme-gerwig">
 
     :host([audio]) {
       --_secondary-color: var(--media-secondary-color, black);
-      --media-preview-time-border-radius: 3px;
-      --media-preview-time-margin: 0 0 5px;
       --media-preview-time-text-shadow: none;
     }
 
@@ -102,6 +96,8 @@ var gerwig_default = `<template id="media-theme-gerwig">
     }
 
     media-time-range {
+      --media-box-padding-left: 6px;
+      --media-box-padding-right: 6px;
       --media-range-bar-color: var(--_accent-color);
       --media-time-range-buffered-color: var(--_primary-color);
       --media-range-track-color: transparent;
@@ -118,41 +114,27 @@ var gerwig_default = `<template id="media-theme-gerwig">
       --media-range-thumb-transform: scale(0);
       --media-range-thumb-transition: transform 0.3s;
       --media-range-thumb-opacity: 1;
-      --media-preview-thumbnail-background: var(--_primary-color);
+      --media-preview-background: var(--_primary-color);
+      --media-box-arrow-background: var(--_primary-color);
       --media-preview-thumbnail-border: 5px solid var(--_primary-color);
-      --media-preview-thumbnail-border-radius: 5px 5px 0 0;
-      --media-preview-time-background: var(--_primary-color);
-      --media-preview-time-border-radius: 0 0 5px 5px;
-      --media-preview-time-margin: 0 0 10px;
-      --media-preview-time-padding: 2px 0 6px;
+      --media-preview-border-radius: 5px;
       --media-text-color: var(--_text-color);
-      --media-preview-thumbnail-max-width: 150px;
-      --media-range-track-pointer-border-right: 2px solid #000;
       --media-control-hover-background: transparent;
       color: var(--_accent-color);
       padding: 0 6px;
     }
 
     :host([audio]) media-time-range {
-      --media-preview-time-border-radius: 5px;
-      --media-preview-time-padding: 5px;
+      --media-preview-time-padding: 1.5px 6px;
+      --media-preview-box-margin: 0 0 -5px;
     }
 
     media-time-range:hover {
       --media-range-thumb-transform: scale(1);
     }
 
-    media-time-range::part(preview-box)::after {
-      position: absolute;
-      content: '';
-      width: 0;
-      height: 0;
-      border-style: solid;
-      border-width: 10px 8.5px 0 8.5px;
-      border-color: var(--_primary-color) transparent transparent transparent;
-      top: 100%;
-      left: 50%;
-      transform: translate(-50%, -10px);
+    media-preview-thumbnail {
+      border-bottom-width: 0;
     }
 
     [part~='listbox'] {
@@ -243,12 +225,20 @@ var gerwig_default = `<template id="media-theme-gerwig">
       pointer-events: none;
     }
 
+    media-control-bar {
+      --gradient-steps: hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / 0.013) 8.1%, hsl(0 0% 0% / 0.049) 15.5%,
+        hsl(0 0% 0% / 0.104) 22.5%, hsl(0 0% 0% / 0.175) 29%, hsl(0 0% 0% / 0.259) 35.3%, hsl(0 0% 0% / 0.352) 41.2%,
+        hsl(0 0% 0% / 0.45) 47.1%, hsl(0 0% 0% / 0.55) 52.9%, hsl(0 0% 0% / 0.648) 58.8%, hsl(0 0% 0% / 0.741) 64.7%,
+        hsl(0 0% 0% / 0.825) 71%, hsl(0 0% 0% / 0.896) 77.5%, hsl(0 0% 0% / 0.951) 84.5%, hsl(0 0% 0% / 0.987) 91.9%,
+        hsl(0 0% 0%) 100%;
+    }
+
     :host([title]:not([audio])) media-control-bar[slot='top-chrome']::before {
       content: '';
       position: absolute;
       width: 100%;
       padding-bottom: min(100px, 25%);
-      background: linear-gradient(#000, transparent);
+      background: linear-gradient(to top, var(--gradient-steps));
       opacity: 0.8;
       pointer-events: none;
     }
@@ -260,7 +250,7 @@ var gerwig_default = `<template id="media-theme-gerwig">
       bottom: 0;
       left: 0;
       padding-bottom: min(100px, 25%);
-      background: linear-gradient(transparent, #000);
+      background: linear-gradient(to bottom, var(--gradient-steps));
       opacity: 0.8;
       z-index: 1;
       pointer-events: none;
@@ -410,7 +400,7 @@ var gerwig_default = `<template id="media-theme-gerwig">
     }
 
     /* Intentionally don't target the div for transition but the children
-		 of the div. Prevents messing with media-chrome's autohide feature. */
+     of the div. Prevents messing with media-chrome's autohide feature. */
     media-loading-indicator + div * {
       transition: opacity 0.15s;
       opacity: 1;
@@ -807,7 +797,12 @@ var gerwig_default = `<template id="media-theme-gerwig">
   </template>
 
   <template partial="TimeRange">
-    <media-time-range part="bottom time range" disabled="{{disabled}}" aria-disabled="{{disabled}}"></media-time-range>
+    <media-time-range part="bottom time range" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <media-preview-thumbnail slot="preview"></media-preview-thumbnail>
+      <media-preview-chapter-display slot="preview"></media-preview-chapter-display>
+      <media-preview-time-display slot="preview"></media-preview-time-display>
+      <div slot="preview" part="arrow"></div>
+    </media-time-range>
   </template>
 
   <template partial="AudioTrackSelect">
@@ -897,6 +892,8 @@ var gerwig_default = `<template id="media-theme-gerwig">
     noautoseektolive="{{noautoseektolive}}"
     defaultsubtitles="{{defaultsubtitles}}"
     defaultduration="{{defaultduration ?? false}}"
+    keyboardforwardseekoffset="{{forwardseekoffset}}"
+    keyboardbackwardseekoffset="{{backwardseekoffset}}"
     exportparts="layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer"
     style="--_pre-playback-place:{{preplaybackplace ?? 'center'}}"
   >
@@ -1116,21 +1113,35 @@ var MediaUIProps = {
   MEDIA_AUDIO_TRACK_ENABLED: "mediaAudioTrackEnabled",
   MEDIA_CHAPTERS_CUES: "mediaChaptersCues"
 };
-var MediaUIPropsEntries = Object.entries(MediaUIProps);
-var MediaUIAttributes = MediaUIPropsEntries.reduce((dictObj, [key, propName]) => {
-  dictObj[key] = `${propName.toLowerCase()}`;
-  return dictObj;
-}, {});
-var MediaStateChangeEvents = MediaUIPropsEntries.reduce(
-  (dictObj, [key, propName]) => {
-    dictObj[key] = `${propName.toLowerCase()}`;
-    return dictObj;
-  },
-  {
-    USER_INACTIVE: "userinactivechange",
-    BREAKPOINTS_CHANGE: "breakpointchange",
-    BREAKPOINTS_COMPUTED: "breakpointscomputed"
-  }
+var MediaUIPropsEntries = (
+  /** @type {[keyof MediaUIProps, string][]} */
+  Object.entries(MediaUIProps)
+);
+var MediaUIAttributes = (
+  /** @type {{ [k in keyof MediaUIProps]: string }} */
+  MediaUIPropsEntries.reduce(
+    (dictObj, [key, propName]) => {
+      dictObj[key] = `${propName.toLowerCase()}`;
+      return dictObj;
+    },
+    /** @type {Partial<{ [k in keyof MediaUIProps]: string }>} */
+    {}
+  )
+);
+var MediaStateChangeEvents = (
+  /** @type {{ [k in keyof MediaUIProps | 'USER_INACTIVE' | 'BREAKPOINTS_CHANGE' | 'BREAKPOINTS_COMPUTED']: string }} */
+  MediaUIPropsEntries.reduce(
+    (dictObj, [key, propName]) => {
+      dictObj[key] = `${propName.toLowerCase()}`;
+      return dictObj;
+    },
+    /** @type {Partial<{ [k in keyof MediaUIProps | 'USER_INACTIVE' | 'BREAKPOINTS_CHANGE' | 'BREAKPOINTS_COMPUTED']: string  }>} */
+    {
+      USER_INACTIVE: "userinactivechange",
+      BREAKPOINTS_CHANGE: "breakpointchange",
+      BREAKPOINTS_COMPUTED: "breakpointscomputed"
+    }
+  )
 );
 var StateChangeEventToAttributeMap = Object.entries(
   MediaStateChangeEvents
@@ -1167,6 +1178,8 @@ var EventTarget2 = class {
     return true;
   }
 };
+var Node = class extends EventTarget2 {
+};
 var ResizeObserver = class {
   observe() {
   }
@@ -1185,12 +1198,22 @@ var documentShim = {
   addEventListener() {
   },
   removeEventListener() {
+  },
+  /**
+   *
+   * @param {Event} event
+   * @returns {boolean}
+   */
+  dispatchEvent(event) {
+    return false;
   }
+  // eslint-disable-line no-unused-vars
 };
 var globalThisShim2 = {
   ResizeObserver,
   document: documentShim,
-  HTMLElement: class HTMLElement2 extends EventTarget2 {
+  Node,
+  HTMLElement: class HTMLElement2 extends Node {
   },
   DocumentFragment: class DocumentFragment2 extends EventTarget2 {
   },
@@ -1202,6 +1225,29 @@ var globalThisShim2 = {
     whenDefined: function() {
     }
   },
+  localStorage: {
+    /**
+     * @param {string} key
+     * @returns {string|null}
+    */
+    getItem(key) {
+      return null;
+    },
+    // eslint-disable-line no-unused-vars
+    /**
+     * @param {string} key
+     * @param {string} value
+     */
+    setItem(key, value) {
+    },
+    // eslint-disable-line no-unused-vars
+    /**
+     * @param {string} key
+    */
+    removeItem(key) {
+    }
+    // eslint-disable-line no-unused-vars
+  },
   CustomEvent: function CustomEvent2() {
   },
   getComputedStyle: function() {
@@ -1212,6 +1258,9 @@ var globalThisShim2 = {
       return "";
     }
   },
+  /**
+   * @param {string} media
+   */
   matchMedia(media) {
     return {
       matches: false,
@@ -1455,6 +1504,7 @@ var AttrPart = class extends Part {
       );
     }
   }
+  /** @type boolean */
   get booleanValue() {
     return __privateGet2(this, _element).hasAttributeNS(
       __privateGet2(this, _namespaceURI),
@@ -1496,6 +1546,7 @@ var ChildNodePart = class extends Part {
   get previousSibling() {
     return __privateGet2(this, _nodes)[0].previousSibling;
   }
+  // FIXME: not sure why do we need string serialization here? Just because parent class has type DOMString?
   get value() {
     return __privateGet2(this, _nodes).map((node) => node.textContent).join("");
   }
@@ -1839,7 +1890,8 @@ var observedMediaAttributes = {
   mediastreamtype: "streamtype"
 };
 var prependTemplate = Document.createElement("template");
-prependTemplate.innerHTML = `
+prependTemplate.innerHTML = /*html*/
+`
   <style>
     :host {
       display: inline-block;
@@ -1885,7 +1937,10 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
       if (this.mediaController && !((_a2 = this.mediaController) == null ? void 0 : _a2.breakpointsComputed))
         return;
       if (mutationList.some((mutation) => {
-        const target = mutation.target;
+        const target = (
+          /** @type {HTMLElement} */
+          mutation.target
+        );
         if (target === this)
           return true;
         if (target.localName !== "media-controller")
@@ -1907,6 +1962,7 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
     this.addEventListener(MediaStateChangeEvents.BREAKPOINTS_COMPUTED, this.render);
     __privateMethod(this, _upgradeProperty, upgradeProperty_fn).call(this, "template");
   }
+  /** @type {HTMLElement & { breakpointsComputed?: boolean }} */
   get mediaController() {
     return this.renderRoot.querySelector("media-controller");
   }
@@ -1956,6 +2012,7 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
       this.renderer = new TemplateInstance(
         this.template,
         this.props,
+        // @ts-ignore
         this.constructor.processor
       );
       this.renderRoot.textContent = "";
@@ -1987,7 +2044,10 @@ updateTemplate_fn = function() {
   const templateId = this.getAttribute("template");
   if (!templateId || templateId === __privateGet3(this, _prevTemplateId))
     return;
-  const rootNode = this.getRootNode();
+  const rootNode = (
+    /** @type HTMLDocument | ShadowRoot */
+    this.getRootNode()
+  );
   const template2 = (_a2 = rootNode == null ? void 0 : rootNode.getElementById) == null ? void 0 : _a2.call(rootNode, templateId);
   if (template2) {
     __privateSet3(this, _prevTemplateId, templateId);

package/dist/themes/microvideo/index.cjs.js

@@ -27,6 +27,8 @@ var EventTarget = class {
     return true;
   }
 };
+var Node = class extends EventTarget {
+};
 var ResizeObserver = class {
   observe() {
   }
@@ -45,12 +47,22 @@ var documentShim = {
   addEventListener() {
   },
   removeEventListener() {
+  },
+  /**
+   *
+   * @param {Event} event
+   * @returns {boolean}
+   */
+  dispatchEvent(event) {
+    return false;
   }
+  // eslint-disable-line no-unused-vars
 };
 var globalThisShim = {
   ResizeObserver,
   document: documentShim,
-  HTMLElement: class HTMLElement extends EventTarget {
+  Node,
+  HTMLElement: class HTMLElement extends Node {
   },
   DocumentFragment: class DocumentFragment extends EventTarget {
   },
@@ -62,6 +74,29 @@ var globalThisShim = {
     whenDefined: function() {
     }
   },
+  localStorage: {
+    /**
+     * @param {string} key
+     * @returns {string|null}
+    */
+    getItem(key) {
+      return null;
+    },
+    // eslint-disable-line no-unused-vars
+    /**
+     * @param {string} key
+     * @param {string} value
+     */
+    setItem(key, value) {
+    },
+    // eslint-disable-line no-unused-vars
+    /**
+     * @param {string} key
+    */
+    removeItem(key) {
+    }
+    // eslint-disable-line no-unused-vars
+  },
   CustomEvent: function CustomEvent() {
   },
   getComputedStyle: function() {
@@ -72,6 +107,9 @@ var globalThisShim = {
       return "";
     }
   },
+  /**
+   * @param {string} media
+   */
   matchMedia(media) {
     return {
       matches: false,
@@ -124,21 +162,35 @@ var MediaUIProps = {
   MEDIA_AUDIO_TRACK_ENABLED: "mediaAudioTrackEnabled",
   MEDIA_CHAPTERS_CUES: "mediaChaptersCues"
 };
-var MediaUIPropsEntries = Object.entries(MediaUIProps);
-var MediaUIAttributes = MediaUIPropsEntries.reduce((dictObj, [key, propName]) => {
-  dictObj[key] = `${propName.toLowerCase()}`;
-  return dictObj;
-}, {});
-var MediaStateChangeEvents = MediaUIPropsEntries.reduce(
-  (dictObj, [key, propName]) => {
-    dictObj[key] = `${propName.toLowerCase()}`;
-    return dictObj;
-  },
-  {
-    USER_INACTIVE: "userinactivechange",
-    BREAKPOINTS_CHANGE: "breakpointchange",
-    BREAKPOINTS_COMPUTED: "breakpointscomputed"
-  }
+var MediaUIPropsEntries = (
+  /** @type {[keyof MediaUIProps, string][]} */
+  Object.entries(MediaUIProps)
+);
+var MediaUIAttributes = (
+  /** @type {{ [k in keyof MediaUIProps]: string }} */
+  MediaUIPropsEntries.reduce(
+    (dictObj, [key, propName]) => {
+      dictObj[key] = `${propName.toLowerCase()}`;
+      return dictObj;
+    },
+    /** @type {Partial<{ [k in keyof MediaUIProps]: string }>} */
+    {}
+  )
+);
+var MediaStateChangeEvents = (
+  /** @type {{ [k in keyof MediaUIProps | 'USER_INACTIVE' | 'BREAKPOINTS_CHANGE' | 'BREAKPOINTS_COMPUTED']: string }} */
+  MediaUIPropsEntries.reduce(
+    (dictObj, [key, propName]) => {
+      dictObj[key] = `${propName.toLowerCase()}`;
+      return dictObj;
+    },
+    /** @type {Partial<{ [k in keyof MediaUIProps | 'USER_INACTIVE' | 'BREAKPOINTS_CHANGE' | 'BREAKPOINTS_COMPUTED']: string  }>} */
+    {
+      USER_INACTIVE: "userinactivechange",
+      BREAKPOINTS_CHANGE: "breakpointchange",
+      BREAKPOINTS_COMPUTED: "breakpointscomputed"
+    }
+  )
 );
 var StateChangeEventToAttributeMap = Object.entries(
   MediaStateChangeEvents
@@ -396,6 +448,7 @@ var AttrPart = class extends Part {
       );
     }
   }
+  /** @type boolean */
   get booleanValue() {
     return __privateGet(this, _element).hasAttributeNS(
       __privateGet(this, _namespaceURI),
@@ -437,6 +490,7 @@ var ChildNodePart = class extends Part {
   get previousSibling() {
     return __privateGet(this, _nodes)[0].previousSibling;
   }
+  // FIXME: not sure why do we need string serialization here? Just because parent class has type DOMString?
   get value() {
     return __privateGet(this, _nodes).map((node) => node.textContent).join("");
   }
@@ -780,7 +834,8 @@ var observedMediaAttributes = {
   mediastreamtype: "streamtype"
 };
 var prependTemplate = Document.createElement("template");
-prependTemplate.innerHTML = `
+prependTemplate.innerHTML = /*html*/
+`
   <style>
     :host {
       display: inline-block;
@@ -826,7 +881,10 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
       if (this.mediaController && !((_a = this.mediaController) == null ? void 0 : _a.breakpointsComputed))
         return;
       if (mutationList.some((mutation) => {
-        const target = mutation.target;
+        const target = (
+          /** @type {HTMLElement} */
+          mutation.target
+        );
         if (target === this)
           return true;
         if (target.localName !== "media-controller")
@@ -848,6 +906,7 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
     this.addEventListener(MediaStateChangeEvents.BREAKPOINTS_COMPUTED, this.render);
     __privateMethod(this, _upgradeProperty, upgradeProperty_fn).call(this, "template");
   }
+  /** @type {HTMLElement & { breakpointsComputed?: boolean }} */
   get mediaController() {
     return this.renderRoot.querySelector("media-controller");
   }
@@ -897,6 +956,7 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
       this.renderer = new TemplateInstance(
         this.template,
         this.props,
+        // @ts-ignore
         this.constructor.processor
       );
       this.renderRoot.textContent = "";
@@ -928,7 +988,10 @@ updateTemplate_fn = function() {
   const templateId = this.getAttribute("template");
   if (!templateId || templateId === __privateGet2(this, _prevTemplateId))
     return;
-  const rootNode = this.getRootNode();
+  const rootNode = (
+    /** @type HTMLDocument | ShadowRoot */
+    this.getRootNode()
+  );
   const template2 = (_a = rootNode == null ? void 0 : rootNode.getElementById) == null ? void 0 : _a.call(rootNode, templateId);
   if (template2) {
     __privateSet2(this, _prevTemplateId, templateId);
@@ -979,7 +1042,8 @@ var __publicField3 = (obj, key, value) => {
   return value;
 };
 var template = Document.createElement("template");
-template.innerHTML = `
+template.innerHTML = /*html*/
+`
 <style>
   :host {
     --_primary-color: var(--media-primary-color, rgb(255 255 255 / .9));
@@ -1033,7 +1097,8 @@ template.innerHTML = `
 
   media-loading-indicator {
     place-self: center;
-    ${""}
+    ${/* Stack the grid items on top of each other */
+""}
     grid-area: 1 / 1;
   }
 
@@ -1156,7 +1221,7 @@ template.innerHTML = `
     --media-range-padding-left: 0;
     --media-range-padding-right: 0;
     --media-preview-time-background: var(--_secondary-color);
-    --media-preview-time-margin: 0 0 8px;
+    --media-preview-box-margin: 0 0 3px;
 
     display: var(--controls, var(--time-range, inline-block));
     width: 100%;
@@ -1180,7 +1245,8 @@ template.innerHTML = `
     width: 7px;
   }
 
-  ${""}
+  ${/* Turn some buttons off by default */
+""}
   media-seek-backward-button {
     display: var(--media-control-display, var(--media-seek-backward-button-display, none));
   }
@@ -1383,6 +1449,7 @@ template.innerHTML = `
 </template>
 
 <media-controller
+  nodefaultstore="{{nodefaultstore}}"
   defaultsubtitles="{{defaultsubtitles}}"
   style="--_control-bar-place-self:{{controlbarplace ?? 'unset'}}"
   gesturesdisabled="{{disabled}}"