@mux/mux-player 2.8.0 → 2.8.1

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

@@ -107,16 +107,28 @@ var classic_default = `<!-- prettier-ignore -->
 
     /* 0.433s is the transition duration for VTT Regions.
      * Borrowed here, so the captions don't move too fast. */
-    media-controller ::slotted([slot='media']) {
+    media-controller {
       --media-webkit-text-track-transition: transform 0.433s ease-out 0.3s;
     }
-    media-controller:is([mediapaused],:not([userinactive])) ::slotted([slot='media']) {
+    media-controller:is([mediapaused],:not([userinactive])) {
       /* 42px is the height of the control bar and progress bar
        * with an additional 5px as a buffer, to get 47px */
       --media-webkit-text-track-transform: translateY(-47px);
       --media-webkit-text-track-transition: transform 0.15s ease;
     }
 
+    /*
+     * CSS specific to iOS devices.
+     * See: https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices/60220757#60220757
+     */
+     @supports (-webkit-touch-callout: none) {
+      /* Disable subtitle adjusting for iOS Safari */
+      media-controller[mediaisfullscreen] {
+        --media-webkit-text-track-transform: unset;
+        --media-webkit-text-track-transition: unset;
+      }
+    }
+
     :host media-time-range {
       color: var(--_primary-color);
       --media-range-thumb-opacity: 0;
@@ -1014,7 +1026,6 @@ var documentShim = {
   dispatchEvent(event) {
     return false;
   }
-  // eslint-disable-line no-unused-vars
 };
 var globalThisShim2 = {
   ResizeObserver,
@@ -1036,11 +1047,10 @@ var globalThisShim2 = {
     /**
      * @param {string} key
      * @returns {string|null}
-    */
+     */
     getItem(key) {
       return null;
     },
-    // eslint-disable-line no-unused-vars
     /**
      * @param {string} key
      * @param {string} value
@@ -1050,7 +1060,7 @@ var globalThisShim2 = {
     // eslint-disable-line no-unused-vars
     /**
      * @param {string} key
-    */
+     */
     removeItem(key) {
     }
     // eslint-disable-line no-unused-vars
@@ -1471,7 +1481,9 @@ var processor = {
     for (const [expression, part] of parts) {
       if (part instanceof InnerTemplatePart) {
         if (!part.directive) {
-          const directive = DirectiveNames.find((n) => part.template.hasAttribute(n));
+          const directive = DirectiveNames.find(
+            (n) => part.template.hasAttribute(n)
+          );
           if (directive) {
             part.directive = directive;
             part.expression = part.template.getAttribute(directive);
@@ -1484,11 +1496,7 @@ var processor = {
       if (value instanceof PartialTemplate) {
         if (templates.get(part) !== value.template) {
           templates.set(part, value.template);
-          value = new TemplateInstance(
-            value.template,
-            value.state,
-            processor
-          );
+          value = new TemplateInstance(value.template, value.state, processor);
           part.value = value;
           templateInstances.set(part, value);
         } else {
@@ -1766,7 +1774,10 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
       attributes: true,
       subtree: true
     });
-    this.addEventListener(MediaStateChangeEvents.BREAKPOINTS_COMPUTED, this.render);
+    this.addEventListener(
+      MediaStateChangeEvents.BREAKPOINTS_COMPUTED,
+      this.render
+    );
     __privateMethod(this, _upgradeProperty, upgradeProperty_fn).call(this, "template");
   }
   /** @type {HTMLElement & { breakpointsComputed?: boolean }} */
@@ -1785,9 +1796,11 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
   get props() {
     var _a2, _b2, _c;
     const observedAttributes = [
-      ...Array.from((_b2 = (_a2 = this.mediaController) == null ? void 0 : _a2.attributes) != null ? _b2 : []).filter(({ name }) => {
-        return observedMediaAttributes[name] || name.startsWith("breakpoint");
-      }),
+      ...Array.from((_b2 = (_a2 = this.mediaController) == null ? void 0 : _a2.attributes) != null ? _b2 : []).filter(
+        ({ name }) => {
+          return observedMediaAttributes[name] || name.startsWith("breakpoint");
+        }
+      ),
       ...Array.from(this.attributes)
     ];
     const props = {};
@@ -1889,7 +1902,9 @@ function isValidUrl(url) {
 async function request(resource) {
   const response = await fetch(resource);
   if (response.status !== 200) {
-    throw new Error(`Failed to load resource: the server responded with a status of ${response.status}`);
+    throw new Error(
+      `Failed to load resource: the server responded with a status of ${response.status}`
+    );
   }
   return response.text();
 }

package/dist/themes/classic/index.js

@@ -107,16 +107,28 @@ var mediaThemeClassic = (() => {
 
     /* 0.433s is the transition duration for VTT Regions.
      * Borrowed here, so the captions don't move too fast. */
-    media-controller ::slotted([slot='media']) {
+    media-controller {
       --media-webkit-text-track-transition: transform 0.433s ease-out 0.3s;
     }
-    media-controller:is([mediapaused],:not([userinactive])) ::slotted([slot='media']) {
+    media-controller:is([mediapaused],:not([userinactive])) {
       /* 42px is the height of the control bar and progress bar
        * with an additional 5px as a buffer, to get 47px */
       --media-webkit-text-track-transform: translateY(-47px);
       --media-webkit-text-track-transition: transform 0.15s ease;
     }
 
+    /*
+     * CSS specific to iOS devices.
+     * See: https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices/60220757#60220757
+     */
+     @supports (-webkit-touch-callout: none) {
+      /* Disable subtitle adjusting for iOS Safari */
+      media-controller[mediaisfullscreen] {
+        --media-webkit-text-track-transform: unset;
+        --media-webkit-text-track-transition: unset;
+      }
+    }
+
     :host media-time-range {
       color: var(--_primary-color);
       --media-range-thumb-opacity: 0;
@@ -1014,7 +1026,6 @@ var mediaThemeClassic = (() => {
     dispatchEvent(event) {
       return false;
     }
-    // eslint-disable-line no-unused-vars
   };
   var globalThisShim2 = {
     ResizeObserver,
@@ -1036,11 +1047,10 @@ var mediaThemeClassic = (() => {
       /**
        * @param {string} key
        * @returns {string|null}
-      */
+       */
       getItem(key) {
         return null;
       },
-      // eslint-disable-line no-unused-vars
       /**
        * @param {string} key
        * @param {string} value
@@ -1050,7 +1060,7 @@ var mediaThemeClassic = (() => {
       // eslint-disable-line no-unused-vars
       /**
        * @param {string} key
-      */
+       */
       removeItem(key) {
       }
       // eslint-disable-line no-unused-vars
@@ -1471,7 +1481,9 @@ var mediaThemeClassic = (() => {
       for (const [expression, part] of parts) {
         if (part instanceof InnerTemplatePart) {
           if (!part.directive) {
-            const directive = DirectiveNames.find((n) => part.template.hasAttribute(n));
+            const directive = DirectiveNames.find(
+              (n) => part.template.hasAttribute(n)
+            );
             if (directive) {
               part.directive = directive;
               part.expression = part.template.getAttribute(directive);
@@ -1484,11 +1496,7 @@ var mediaThemeClassic = (() => {
         if (value instanceof PartialTemplate) {
           if (templates.get(part) !== value.template) {
             templates.set(part, value.template);
-            value = new TemplateInstance(
-              value.template,
-              value.state,
-              processor
-            );
+            value = new TemplateInstance(value.template, value.state, processor);
             part.value = value;
             templateInstances.set(part, value);
           } else {
@@ -1766,7 +1774,10 @@ var mediaThemeClassic = (() => {
         attributes: true,
         subtree: true
       });
-      this.addEventListener(MediaStateChangeEvents.BREAKPOINTS_COMPUTED, this.render);
+      this.addEventListener(
+        MediaStateChangeEvents.BREAKPOINTS_COMPUTED,
+        this.render
+      );
       __privateMethod(this, _upgradeProperty, upgradeProperty_fn).call(this, "template");
     }
     /** @type {HTMLElement & { breakpointsComputed?: boolean }} */
@@ -1785,9 +1796,11 @@ var mediaThemeClassic = (() => {
     get props() {
       var _a2, _b2, _c;
       const observedAttributes = [
-        ...Array.from((_b2 = (_a2 = this.mediaController) == null ? void 0 : _a2.attributes) != null ? _b2 : []).filter(({ name }) => {
-          return observedMediaAttributes[name] || name.startsWith("breakpoint");
-        }),
+        ...Array.from((_b2 = (_a2 = this.mediaController) == null ? void 0 : _a2.attributes) != null ? _b2 : []).filter(
+          ({ name }) => {
+            return observedMediaAttributes[name] || name.startsWith("breakpoint");
+          }
+        ),
         ...Array.from(this.attributes)
       ];
       const props = {};
@@ -1889,7 +1902,9 @@ var mediaThemeClassic = (() => {
   async function request(resource) {
     const response = await fetch(resource);
     if (response.status !== 200) {
-      throw new Error(`Failed to load resource: the server responded with a status of ${response.status}`);
+      throw new Error(
+        `Failed to load resource: the server responded with a status of ${response.status}`
+      );
     }
     return response.text();
   }

package/dist/themes/classic/index.mjs

@@ -82,16 +82,28 @@ var classic_default = `<!-- prettier-ignore -->
 
     /* 0.433s is the transition duration for VTT Regions.
      * Borrowed here, so the captions don't move too fast. */
-    media-controller ::slotted([slot='media']) {
+    media-controller {
       --media-webkit-text-track-transition: transform 0.433s ease-out 0.3s;
     }
-    media-controller:is([mediapaused],:not([userinactive])) ::slotted([slot='media']) {
+    media-controller:is([mediapaused],:not([userinactive])) {
       /* 42px is the height of the control bar and progress bar
        * with an additional 5px as a buffer, to get 47px */
       --media-webkit-text-track-transform: translateY(-47px);
       --media-webkit-text-track-transition: transform 0.15s ease;
     }
 
+    /*
+     * CSS specific to iOS devices.
+     * See: https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices/60220757#60220757
+     */
+     @supports (-webkit-touch-callout: none) {
+      /* Disable subtitle adjusting for iOS Safari */
+      media-controller[mediaisfullscreen] {
+        --media-webkit-text-track-transform: unset;
+        --media-webkit-text-track-transition: unset;
+      }
+    }
+
     :host media-time-range {
       color: var(--_primary-color);
       --media-range-thumb-opacity: 0;
@@ -989,7 +1001,6 @@ var documentShim = {
   dispatchEvent(event) {
     return false;
   }
-  // eslint-disable-line no-unused-vars
 };
 var globalThisShim2 = {
   ResizeObserver,
@@ -1011,11 +1022,10 @@ var globalThisShim2 = {
     /**
      * @param {string} key
      * @returns {string|null}
-    */
+     */
     getItem(key) {
       return null;
     },
-    // eslint-disable-line no-unused-vars
     /**
      * @param {string} key
      * @param {string} value
@@ -1025,7 +1035,7 @@ var globalThisShim2 = {
     // eslint-disable-line no-unused-vars
     /**
      * @param {string} key
-    */
+     */
     removeItem(key) {
     }
     // eslint-disable-line no-unused-vars
@@ -1446,7 +1456,9 @@ var processor = {
     for (const [expression, part] of parts) {
       if (part instanceof InnerTemplatePart) {
         if (!part.directive) {
-          const directive = DirectiveNames.find((n) => part.template.hasAttribute(n));
+          const directive = DirectiveNames.find(
+            (n) => part.template.hasAttribute(n)
+          );
           if (directive) {
             part.directive = directive;
             part.expression = part.template.getAttribute(directive);
@@ -1459,11 +1471,7 @@ var processor = {
       if (value instanceof PartialTemplate) {
         if (templates.get(part) !== value.template) {
           templates.set(part, value.template);
-          value = new TemplateInstance(
-            value.template,
-            value.state,
-            processor
-          );
+          value = new TemplateInstance(value.template, value.state, processor);
           part.value = value;
           templateInstances.set(part, value);
         } else {
@@ -1741,7 +1749,10 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
       attributes: true,
       subtree: true
     });
-    this.addEventListener(MediaStateChangeEvents.BREAKPOINTS_COMPUTED, this.render);
+    this.addEventListener(
+      MediaStateChangeEvents.BREAKPOINTS_COMPUTED,
+      this.render
+    );
     __privateMethod(this, _upgradeProperty, upgradeProperty_fn).call(this, "template");
   }
   /** @type {HTMLElement & { breakpointsComputed?: boolean }} */
@@ -1760,9 +1771,11 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
   get props() {
     var _a2, _b2, _c;
     const observedAttributes = [
-      ...Array.from((_b2 = (_a2 = this.mediaController) == null ? void 0 : _a2.attributes) != null ? _b2 : []).filter(({ name }) => {
-        return observedMediaAttributes[name] || name.startsWith("breakpoint");
-      }),
+      ...Array.from((_b2 = (_a2 = this.mediaController) == null ? void 0 : _a2.attributes) != null ? _b2 : []).filter(
+        ({ name }) => {
+          return observedMediaAttributes[name] || name.startsWith("breakpoint");
+        }
+      ),
       ...Array.from(this.attributes)
     ];
     const props = {};
@@ -1864,7 +1877,9 @@ function isValidUrl(url) {
 async function request(resource) {
   const response = await fetch(resource);
   if (response.status !== 200) {
-    throw new Error(`Failed to load resource: the server responded with a status of ${response.status}`);
+    throw new Error(
+      `Failed to load resource: the server responded with a status of ${response.status}`
+    );
   }
   return response.text();
 }

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

@@ -111,15 +111,27 @@ var gerwig_default = `<template id="media-theme-gerwig">
      * 0.433s is the transition duration for VTT Regions.
      * Borrowed here, so the captions don't move too fast.
      */
-    media-controller ::slotted([slot='media']) {
+    media-controller {
       --media-webkit-text-track-transform: translateY(0) scale(0.98);
       --media-webkit-text-track-transition: transform 0.433s ease-out 0.3s;
     }
-    media-controller:is([mediapaused], :not([userinactive])) ::slotted([slot='media']) {
+    media-controller:is([mediapaused], :not([userinactive])) {
       --media-webkit-text-track-transform: translateY(-50px) scale(0.98);
       --media-webkit-text-track-transition: transform 0.15s ease;
     }
 
+    /*
+     * CSS specific to iOS devices.
+     * See: https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices/60220757#60220757
+     */
+    @supports (-webkit-touch-callout: none) {
+      /* Disable subtitle adjusting for iOS Safari */
+      media-controller[mediaisfullscreen] {
+        --media-webkit-text-track-transform: unset;
+        --media-webkit-text-track-transition: unset;
+      }
+    }
+
     media-time-range {
       --media-box-padding-left: 6px;
       --media-box-padding-right: 6px;
@@ -1235,7 +1247,6 @@ var documentShim = {
   dispatchEvent(event) {
     return false;
   }
-  // eslint-disable-line no-unused-vars
 };
 var globalThisShim2 = {
   ResizeObserver,
@@ -1257,11 +1268,10 @@ var globalThisShim2 = {
     /**
      * @param {string} key
      * @returns {string|null}
-    */
+     */
     getItem(key) {
       return null;
     },
-    // eslint-disable-line no-unused-vars
     /**
      * @param {string} key
      * @param {string} value
@@ -1271,7 +1281,7 @@ var globalThisShim2 = {
     // eslint-disable-line no-unused-vars
     /**
      * @param {string} key
-    */
+     */
     removeItem(key) {
     }
     // eslint-disable-line no-unused-vars
@@ -1692,7 +1702,9 @@ var processor = {
     for (const [expression, part] of parts) {
       if (part instanceof InnerTemplatePart) {
         if (!part.directive) {
-          const directive = DirectiveNames.find((n) => part.template.hasAttribute(n));
+          const directive = DirectiveNames.find(
+            (n) => part.template.hasAttribute(n)
+          );
           if (directive) {
             part.directive = directive;
             part.expression = part.template.getAttribute(directive);
@@ -1705,11 +1717,7 @@ var processor = {
       if (value instanceof PartialTemplate) {
         if (templates.get(part) !== value.template) {
           templates.set(part, value.template);
-          value = new TemplateInstance(
-            value.template,
-            value.state,
-            processor
-          );
+          value = new TemplateInstance(value.template, value.state, processor);
           part.value = value;
           templateInstances.set(part, value);
         } else {
@@ -1987,7 +1995,10 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
       attributes: true,
       subtree: true
     });
-    this.addEventListener(MediaStateChangeEvents.BREAKPOINTS_COMPUTED, this.render);
+    this.addEventListener(
+      MediaStateChangeEvents.BREAKPOINTS_COMPUTED,
+      this.render
+    );
     __privateMethod(this, _upgradeProperty, upgradeProperty_fn).call(this, "template");
   }
   /** @type {HTMLElement & { breakpointsComputed?: boolean }} */
@@ -2006,9 +2017,11 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
   get props() {
     var _a2, _b2, _c;
     const observedAttributes = [
-      ...Array.from((_b2 = (_a2 = this.mediaController) == null ? void 0 : _a2.attributes) != null ? _b2 : []).filter(({ name }) => {
-        return observedMediaAttributes[name] || name.startsWith("breakpoint");
-      }),
+      ...Array.from((_b2 = (_a2 = this.mediaController) == null ? void 0 : _a2.attributes) != null ? _b2 : []).filter(
+        ({ name }) => {
+          return observedMediaAttributes[name] || name.startsWith("breakpoint");
+        }
+      ),
       ...Array.from(this.attributes)
     ];
     const props = {};
@@ -2110,7 +2123,9 @@ function isValidUrl(url) {
 async function request(resource) {
   const response = await fetch(resource);
   if (response.status !== 200) {
-    throw new Error(`Failed to load resource: the server responded with a status of ${response.status}`);
+    throw new Error(
+      `Failed to load resource: the server responded with a status of ${response.status}`
+    );
   }
   return response.text();
 }

package/dist/themes/gerwig/index.js

@@ -111,15 +111,27 @@ var mediaThemeGerwig = (() => {
      * 0.433s is the transition duration for VTT Regions.
      * Borrowed here, so the captions don't move too fast.
      */
-    media-controller ::slotted([slot='media']) {
+    media-controller {
       --media-webkit-text-track-transform: translateY(0) scale(0.98);
       --media-webkit-text-track-transition: transform 0.433s ease-out 0.3s;
     }
-    media-controller:is([mediapaused], :not([userinactive])) ::slotted([slot='media']) {
+    media-controller:is([mediapaused], :not([userinactive])) {
       --media-webkit-text-track-transform: translateY(-50px) scale(0.98);
       --media-webkit-text-track-transition: transform 0.15s ease;
     }
 
+    /*
+     * CSS specific to iOS devices.
+     * See: https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices/60220757#60220757
+     */
+    @supports (-webkit-touch-callout: none) {
+      /* Disable subtitle adjusting for iOS Safari */
+      media-controller[mediaisfullscreen] {
+        --media-webkit-text-track-transform: unset;
+        --media-webkit-text-track-transition: unset;
+      }
+    }
+
     media-time-range {
       --media-box-padding-left: 6px;
       --media-box-padding-right: 6px;
@@ -1235,7 +1247,6 @@ var mediaThemeGerwig = (() => {
     dispatchEvent(event) {
       return false;
     }
-    // eslint-disable-line no-unused-vars
   };
   var globalThisShim2 = {
     ResizeObserver,
@@ -1257,11 +1268,10 @@ var mediaThemeGerwig = (() => {
       /**
        * @param {string} key
        * @returns {string|null}
-      */
+       */
       getItem(key) {
         return null;
       },
-      // eslint-disable-line no-unused-vars
       /**
        * @param {string} key
        * @param {string} value
@@ -1271,7 +1281,7 @@ var mediaThemeGerwig = (() => {
       // eslint-disable-line no-unused-vars
       /**
        * @param {string} key
-      */
+       */
       removeItem(key) {
       }
       // eslint-disable-line no-unused-vars
@@ -1692,7 +1702,9 @@ var mediaThemeGerwig = (() => {
       for (const [expression, part] of parts) {
         if (part instanceof InnerTemplatePart) {
           if (!part.directive) {
-            const directive = DirectiveNames.find((n) => part.template.hasAttribute(n));
+            const directive = DirectiveNames.find(
+              (n) => part.template.hasAttribute(n)
+            );
             if (directive) {
               part.directive = directive;
               part.expression = part.template.getAttribute(directive);
@@ -1705,11 +1717,7 @@ var mediaThemeGerwig = (() => {
         if (value instanceof PartialTemplate) {
           if (templates.get(part) !== value.template) {
             templates.set(part, value.template);
-            value = new TemplateInstance(
-              value.template,
-              value.state,
-              processor
-            );
+            value = new TemplateInstance(value.template, value.state, processor);
             part.value = value;
             templateInstances.set(part, value);
           } else {
@@ -1987,7 +1995,10 @@ var mediaThemeGerwig = (() => {
         attributes: true,
         subtree: true
       });
-      this.addEventListener(MediaStateChangeEvents.BREAKPOINTS_COMPUTED, this.render);
+      this.addEventListener(
+        MediaStateChangeEvents.BREAKPOINTS_COMPUTED,
+        this.render
+      );
       __privateMethod(this, _upgradeProperty, upgradeProperty_fn).call(this, "template");
     }
     /** @type {HTMLElement & { breakpointsComputed?: boolean }} */
@@ -2006,9 +2017,11 @@ var mediaThemeGerwig = (() => {
     get props() {
       var _a2, _b2, _c;
       const observedAttributes = [
-        ...Array.from((_b2 = (_a2 = this.mediaController) == null ? void 0 : _a2.attributes) != null ? _b2 : []).filter(({ name }) => {
-          return observedMediaAttributes[name] || name.startsWith("breakpoint");
-        }),
+        ...Array.from((_b2 = (_a2 = this.mediaController) == null ? void 0 : _a2.attributes) != null ? _b2 : []).filter(
+          ({ name }) => {
+            return observedMediaAttributes[name] || name.startsWith("breakpoint");
+          }
+        ),
         ...Array.from(this.attributes)
       ];
       const props = {};
@@ -2110,7 +2123,9 @@ var mediaThemeGerwig = (() => {
   async function request(resource) {
     const response = await fetch(resource);
     if (response.status !== 200) {
-      throw new Error(`Failed to load resource: the server responded with a status of ${response.status}`);
+      throw new Error(
+        `Failed to load resource: the server responded with a status of ${response.status}`
+      );
     }
     return response.text();
   }