@mux/mux-player 2.2.0 → 2.3.0

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

@@ -377,7 +377,7 @@ var classic_default = `<!-- prettier-ignore -->
           <path d="M2.25 14.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
         </svg>
       </media-rendition-button>
-      <media-rendition-listbox slot="listbox" part="bottom rendition listbox">
+      <media-rendition-listbox slot="listbox" exportparts="option" part="bottom rendition listbox">
         <div slot="header">Quality</div>
       </media-rendition-listbox>
     </media-rendition-selectmenu>
@@ -391,7 +391,7 @@ var classic_default = `<!-- prettier-ignore -->
           <path d="M7.25 9.75a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 .75-.75Zm3-3a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 .75-.75Zm3 2a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0v-5a.75.75 0 0 1 .75-.75Zm3-1a.75.75 0 0 1 .75.75v7a.75.75 0 0 1-1.5 0v-7a.75.75 0 0 1 .75-.75Z"/>
         </svg>
       </media-audio-track-button>
-      <media-audio-track-listbox slot="listbox" part="bottom audio-track listbox">
+      <media-audio-track-listbox slot="listbox" exportparts="option" part="bottom audio-track listbox">
         <div slot="header">Audio</div>
       </media-audio-track-listbox>
     </media-audio-track-selectmenu>
@@ -407,7 +407,7 @@ var classic_default = `<!-- prettier-ignore -->
           <path d="M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-1.81-.12-4.67-.18-7.53-.18-2.86 0-5.72.06-7.53.18a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c1.81.12 4.67.18 7.53.18 2.86 0 5.72-.06 7.53-.18a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-1.49 12.53a1.11 1.11 0 0 1-.91 1.11c-1.67.11-4.45.18-7.43.18-2.98 0-5.76-.07-7.43-.18a1.11 1.11 0 0 1-.91-1.11c-.21-4.137-.21-8.283 0-12.42a1.11 1.11 0 0 1 .91-1.11c1.67-.11 4.43-.18 7.43-.18s5.76.07 7.43.18a1.11 1.11 0 0 1 .91 1.11c.21 4.137.21 8.283 0 12.42ZM10.843 14a1.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.099 2.099 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-.42c.23-.103.479-.158.73-.16.241-.004.48.044.7.14.199.088.373.222.51.39l1.08-.89a2.179 2.179 0 0 0-.47-.44 2.81 2.81 0 0 0-.54-.32 2.91 2.91 0 0 0-.58-.15 2.71 2.71 0 0 0-.56 0 4.08 4.08 0 0 0-1.38.15 3.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.06c.316.293.687.52 1.09.67.443.16.91.238 1.38.23a3.2 3.2 0 0 0 1.28-.27c.401-.183.747-.47 1-.83l-1.17-.88a1.42 1.42 0 0 1-.53.52Zm6.62 0a1.58 1.58 0 0 1-.76.18 1.54 1.54 0 0 1-.7-.18 1.69 1.69 0 0 1-.57-.42 2.12 2.12 0 0 1-.43-.58 2.29 2.29 0 0 1 .39-2.3 1.84 1.84 0 0 1 1.32-.58c.241-.003.48.045.7.14.199.088.373.222.51.39l1.08-.92a2.43 2.43 0 0 0-.47-.44 3.22 3.22 0 0 0-.53-.29 2.999 2.999 0 0 0-.57-.15 2.87 2.87 0 0 0-.57 0 4.06 4.06 0 0 0-1.36.15 3.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.38c.16.402.405.764.72 1.06a3.17 3.17 0 0 0 1.09.67c.44.16.904.237 1.37.23.441 0 .877-.092 1.28-.27a2.45 2.45 0 0 0 1-.83l-1.15-.85a1.49 1.49 0 0 1-.54.49Z"/>
         </svg>
       </media-captions-button>
-      <media-captions-listbox slot="listbox" part="bottom captions listbox"></media-captions-listbox>
+      <media-captions-listbox slot="listbox" exportparts="option" part="bottom captions listbox"></media-captions-listbox>
     </media-captions-selectmenu>
   </template>
 
@@ -528,6 +528,7 @@ var classic_default = `<!-- prettier-ignore -->
     audio="{{audio}}"
     noautoseektolive="{{noautoseektolive}}"
     defaultsubtitles="{{defaultsubtitles}}"
+    defaultduration="{{defaultduration ?? false}}"
     exportparts="layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer"
   >
     <slot name="media" slot="media"></slot>
@@ -896,6 +897,7 @@ var MediaUIProps = {
   MEDIA_VOLUME_UNAVAILABLE: "mediaVolumeUnavailable",
   MEDIA_IS_PIP: "mediaIsPip",
   MEDIA_IS_CASTING: "mediaIsCasting",
+  MEDIA_IS_AIRPLAYING: "mediaIsAirplaying",
   MEDIA_SUBTITLES_LIST: "mediaSubtitlesList",
   MEDIA_SUBTITLES_SHOWING: "mediaSubtitlesShowing",
   MEDIA_IS_FULLSCREEN: "mediaIsFullscreen",
@@ -1002,6 +1004,9 @@ var globalThisShim2 = {
   CustomEvent: function CustomEvent2() {
   },
   getComputedStyle: function() {
+  },
+  navigator: {
+    languages: []
   }
 };
 var isServer2 = typeof window === "undefined" || typeof window.customElements === "undefined";

package/dist/themes/classic/index.js

@@ -377,7 +377,7 @@ var mediaThemeClassic = (() => {
           <path d="M2.25 14.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
         </svg>
       </media-rendition-button>
-      <media-rendition-listbox slot="listbox" part="bottom rendition listbox">
+      <media-rendition-listbox slot="listbox" exportparts="option" part="bottom rendition listbox">
         <div slot="header">Quality</div>
       </media-rendition-listbox>
     </media-rendition-selectmenu>
@@ -391,7 +391,7 @@ var mediaThemeClassic = (() => {
           <path d="M7.25 9.75a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 .75-.75Zm3-3a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 .75-.75Zm3 2a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0v-5a.75.75 0 0 1 .75-.75Zm3-1a.75.75 0 0 1 .75.75v7a.75.75 0 0 1-1.5 0v-7a.75.75 0 0 1 .75-.75Z"/>
         </svg>
       </media-audio-track-button>
-      <media-audio-track-listbox slot="listbox" part="bottom audio-track listbox">
+      <media-audio-track-listbox slot="listbox" exportparts="option" part="bottom audio-track listbox">
         <div slot="header">Audio</div>
       </media-audio-track-listbox>
     </media-audio-track-selectmenu>
@@ -407,7 +407,7 @@ var mediaThemeClassic = (() => {
           <path d="M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-1.81-.12-4.67-.18-7.53-.18-2.86 0-5.72.06-7.53.18a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c1.81.12 4.67.18 7.53.18 2.86 0 5.72-.06 7.53-.18a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-1.49 12.53a1.11 1.11 0 0 1-.91 1.11c-1.67.11-4.45.18-7.43.18-2.98 0-5.76-.07-7.43-.18a1.11 1.11 0 0 1-.91-1.11c-.21-4.137-.21-8.283 0-12.42a1.11 1.11 0 0 1 .91-1.11c1.67-.11 4.43-.18 7.43-.18s5.76.07 7.43.18a1.11 1.11 0 0 1 .91 1.11c.21 4.137.21 8.283 0 12.42ZM10.843 14a1.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.099 2.099 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-.42c.23-.103.479-.158.73-.16.241-.004.48.044.7.14.199.088.373.222.51.39l1.08-.89a2.179 2.179 0 0 0-.47-.44 2.81 2.81 0 0 0-.54-.32 2.91 2.91 0 0 0-.58-.15 2.71 2.71 0 0 0-.56 0 4.08 4.08 0 0 0-1.38.15 3.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.06c.316.293.687.52 1.09.67.443.16.91.238 1.38.23a3.2 3.2 0 0 0 1.28-.27c.401-.183.747-.47 1-.83l-1.17-.88a1.42 1.42 0 0 1-.53.52Zm6.62 0a1.58 1.58 0 0 1-.76.18 1.54 1.54 0 0 1-.7-.18 1.69 1.69 0 0 1-.57-.42 2.12 2.12 0 0 1-.43-.58 2.29 2.29 0 0 1 .39-2.3 1.84 1.84 0 0 1 1.32-.58c.241-.003.48.045.7.14.199.088.373.222.51.39l1.08-.92a2.43 2.43 0 0 0-.47-.44 3.22 3.22 0 0 0-.53-.29 2.999 2.999 0 0 0-.57-.15 2.87 2.87 0 0 0-.57 0 4.06 4.06 0 0 0-1.36.15 3.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.38c.16.402.405.764.72 1.06a3.17 3.17 0 0 0 1.09.67c.44.16.904.237 1.37.23.441 0 .877-.092 1.28-.27a2.45 2.45 0 0 0 1-.83l-1.15-.85a1.49 1.49 0 0 1-.54.49Z"/>
         </svg>
       </media-captions-button>
-      <media-captions-listbox slot="listbox" part="bottom captions listbox"></media-captions-listbox>
+      <media-captions-listbox slot="listbox" exportparts="option" part="bottom captions listbox"></media-captions-listbox>
     </media-captions-selectmenu>
   </template>
 
@@ -528,6 +528,7 @@ var mediaThemeClassic = (() => {
     audio="{{audio}}"
     noautoseektolive="{{noautoseektolive}}"
     defaultsubtitles="{{defaultsubtitles}}"
+    defaultduration="{{defaultduration ?? false}}"
     exportparts="layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer"
   >
     <slot name="media" slot="media"></slot>
@@ -896,6 +897,7 @@ var mediaThemeClassic = (() => {
     MEDIA_VOLUME_UNAVAILABLE: "mediaVolumeUnavailable",
     MEDIA_IS_PIP: "mediaIsPip",
     MEDIA_IS_CASTING: "mediaIsCasting",
+    MEDIA_IS_AIRPLAYING: "mediaIsAirplaying",
     MEDIA_SUBTITLES_LIST: "mediaSubtitlesList",
     MEDIA_SUBTITLES_SHOWING: "mediaSubtitlesShowing",
     MEDIA_IS_FULLSCREEN: "mediaIsFullscreen",
@@ -1002,6 +1004,9 @@ var mediaThemeClassic = (() => {
     CustomEvent: function CustomEvent2() {
     },
     getComputedStyle: function() {
+    },
+    navigator: {
+      languages: []
     }
   };
   var isServer2 = typeof window === "undefined" || typeof window.customElements === "undefined";

package/dist/themes/classic/index.mjs

@@ -352,7 +352,7 @@ var classic_default = `<!-- prettier-ignore -->
           <path d="M2.25 14.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
         </svg>
       </media-rendition-button>
-      <media-rendition-listbox slot="listbox" part="bottom rendition listbox">
+      <media-rendition-listbox slot="listbox" exportparts="option" part="bottom rendition listbox">
         <div slot="header">Quality</div>
       </media-rendition-listbox>
     </media-rendition-selectmenu>
@@ -366,7 +366,7 @@ var classic_default = `<!-- prettier-ignore -->
           <path d="M7.25 9.75a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 .75-.75Zm3-3a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 .75-.75Zm3 2a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0v-5a.75.75 0 0 1 .75-.75Zm3-1a.75.75 0 0 1 .75.75v7a.75.75 0 0 1-1.5 0v-7a.75.75 0 0 1 .75-.75Z"/>
         </svg>
       </media-audio-track-button>
-      <media-audio-track-listbox slot="listbox" part="bottom audio-track listbox">
+      <media-audio-track-listbox slot="listbox" exportparts="option" part="bottom audio-track listbox">
         <div slot="header">Audio</div>
       </media-audio-track-listbox>
     </media-audio-track-selectmenu>
@@ -382,7 +382,7 @@ var classic_default = `<!-- prettier-ignore -->
           <path d="M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-1.81-.12-4.67-.18-7.53-.18-2.86 0-5.72.06-7.53.18a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c1.81.12 4.67.18 7.53.18 2.86 0 5.72-.06 7.53-.18a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-1.49 12.53a1.11 1.11 0 0 1-.91 1.11c-1.67.11-4.45.18-7.43.18-2.98 0-5.76-.07-7.43-.18a1.11 1.11 0 0 1-.91-1.11c-.21-4.137-.21-8.283 0-12.42a1.11 1.11 0 0 1 .91-1.11c1.67-.11 4.43-.18 7.43-.18s5.76.07 7.43.18a1.11 1.11 0 0 1 .91 1.11c.21 4.137.21 8.283 0 12.42ZM10.843 14a1.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.099 2.099 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-.42c.23-.103.479-.158.73-.16.241-.004.48.044.7.14.199.088.373.222.51.39l1.08-.89a2.179 2.179 0 0 0-.47-.44 2.81 2.81 0 0 0-.54-.32 2.91 2.91 0 0 0-.58-.15 2.71 2.71 0 0 0-.56 0 4.08 4.08 0 0 0-1.38.15 3.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.06c.316.293.687.52 1.09.67.443.16.91.238 1.38.23a3.2 3.2 0 0 0 1.28-.27c.401-.183.747-.47 1-.83l-1.17-.88a1.42 1.42 0 0 1-.53.52Zm6.62 0a1.58 1.58 0 0 1-.76.18 1.54 1.54 0 0 1-.7-.18 1.69 1.69 0 0 1-.57-.42 2.12 2.12 0 0 1-.43-.58 2.29 2.29 0 0 1 .39-2.3 1.84 1.84 0 0 1 1.32-.58c.241-.003.48.045.7.14.199.088.373.222.51.39l1.08-.92a2.43 2.43 0 0 0-.47-.44 3.22 3.22 0 0 0-.53-.29 2.999 2.999 0 0 0-.57-.15 2.87 2.87 0 0 0-.57 0 4.06 4.06 0 0 0-1.36.15 3.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.38c.16.402.405.764.72 1.06a3.17 3.17 0 0 0 1.09.67c.44.16.904.237 1.37.23.441 0 .877-.092 1.28-.27a2.45 2.45 0 0 0 1-.83l-1.15-.85a1.49 1.49 0 0 1-.54.49Z"/>
         </svg>
       </media-captions-button>
-      <media-captions-listbox slot="listbox" part="bottom captions listbox"></media-captions-listbox>
+      <media-captions-listbox slot="listbox" exportparts="option" part="bottom captions listbox"></media-captions-listbox>
     </media-captions-selectmenu>
   </template>
 
@@ -503,6 +503,7 @@ var classic_default = `<!-- prettier-ignore -->
     audio="{{audio}}"
     noautoseektolive="{{noautoseektolive}}"
     defaultsubtitles="{{defaultsubtitles}}"
+    defaultduration="{{defaultduration ?? false}}"
     exportparts="layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer"
   >
     <slot name="media" slot="media"></slot>
@@ -871,6 +872,7 @@ var MediaUIProps = {
   MEDIA_VOLUME_UNAVAILABLE: "mediaVolumeUnavailable",
   MEDIA_IS_PIP: "mediaIsPip",
   MEDIA_IS_CASTING: "mediaIsCasting",
+  MEDIA_IS_AIRPLAYING: "mediaIsAirplaying",
   MEDIA_SUBTITLES_LIST: "mediaSubtitlesList",
   MEDIA_SUBTITLES_SHOWING: "mediaSubtitlesShowing",
   MEDIA_IS_FULLSCREEN: "mediaIsFullscreen",
@@ -977,6 +979,9 @@ var globalThisShim2 = {
   CustomEvent: function CustomEvent2() {
   },
   getComputedStyle: function() {
+  },
+  navigator: {
+    languages: []
   }
 };
 var isServer2 = typeof window === "undefined" || typeof window.customElements === "undefined";

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

@@ -86,6 +86,7 @@ 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;
@@ -109,6 +110,7 @@ var gerwig_default = `<template id="media-theme-gerwig">
 
     :host([audio]) media-control-bar {
       width: 100%;
+      background-color: var(--media-control-background);
     }
 
     /*
@@ -116,10 +118,11 @@ var gerwig_default = `<template id="media-theme-gerwig">
      * Borrowed here, so the captions don't move too fast.
      */
     media-controller ::slotted([slot='media']) {
+      --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-webkit-text-track-transform: translateY(-50px);
+      --media-webkit-text-track-transform: translateY(-50px) scale(0.98);
       --media-webkit-text-track-transition: transform 0.15s ease;
     }
 
@@ -438,7 +441,7 @@ var gerwig_default = `<template id="media-theme-gerwig">
       opacity: 1;
     }
 
-    media-loading-indicator[media-loading]:not([media-paused]) ~ div > * {
+    media-loading-indicator[medialoading]:not([mediapaused]) ~ div > * {
       opacity: 0;
       transition-delay: 400ms;
     }
@@ -526,6 +529,19 @@ var gerwig_default = `<template id="media-theme-gerwig">
     media-mute-button[mediavolumelevel='off'] .muted {
       opacity: 1;
     }
+
+    /**
+     * Our defaults for these buttons are to hide them at small sizes
+     * users can override this with CSS
+     */
+    media-controller:not([breakpointsm]):not([audio]) {
+      --bottom-play-button: none;
+      --bottom-seek-backward-button: none;
+      --bottom-seek-forward-button: none;
+      --bottom-time-display: none;
+      --bottom-playback-rate-selectmenu: none;
+      --bottom-pip-button: none;
+    }
   </style>
 
   <template partial="TitleDisplay">
@@ -687,7 +703,7 @@ var gerwig_default = `<template id="media-theme-gerwig">
           />
         </svg>
       </media-captions-button>
-      <media-captions-listbox slot="listbox" part="bottom captions listbox">
+      <media-captions-listbox slot="listbox" exportparts="option" part="bottom captions listbox">
         <div slot="select-indicator">
           <style>
             .listbox-indicator {
@@ -766,7 +782,7 @@ var gerwig_default = `<template id="media-theme-gerwig">
           d="M16.0072 0H2.0291C0.9185 0 0.0181 0.9003 0.0181 2.011V5.5009C0.357 5.5016 0.6895 5.5275 1.0181 5.5669V2.011C1.0181 1.4536 1.4716 1 2.029 1H16.0072C16.5646 1 17.0181 1.4536 17.0181 2.011V11.9891C17.0181 12.5465 16.5646 13 16.0072 13H8.4358C8.4746 13.3286 8.4999 13.6611 8.4999 13.9999H16.0071C17.1177 13.9999 18.018 13.0996 18.018 11.989V2.011C18.0181 0.9003 17.1178 0 16.0072 0ZM0 6.4999V7.4999C3.584 7.4999 6.5 10.4159 6.5 13.9999H7.5C7.5 9.8642 4.1357 6.4999 0 6.4999ZM0 8.7499V9.7499C2.3433 9.7499 4.25 11.6566 4.25 13.9999H5.25C5.25 11.1049 2.895 8.7499 0 8.7499ZM0.0181 11V14H3.0181C3.0181 12.3431 1.675 11 0.0181 11Z"
         />
       </svg>
-      <svg viewBox="0 0 18 14" aria-hidden="true" slot="exist">
+      <svg viewBox="0 0 18 14" aria-hidden="true" slot="exit">
         <path
           d="M15.9891 0H2.01103C0.900434 0 3.35947e-05 0.9003 3.35947e-05 2.011V5.5009C0.338934 5.5016 0.671434 5.5275 1.00003 5.5669V2.011C1.00003 1.4536 1.45353 1 2.01093 1H15.9891C16.5465 1 17 1.4536 17 2.011V11.9891C17 12.5465 16.5465 13 15.9891 13H8.41773C8.45653 13.3286 8.48183 13.6611 8.48183 13.9999H15.989C17.0996 13.9999 17.9999 13.0996 17.9999 11.989V2.011C18 0.9003 17.0997 0 15.9891 0ZM-0.0180664 6.4999V7.4999C3.56593 7.4999 6.48193 10.4159 6.48193 13.9999H7.48193C7.48193 9.8642 4.11763 6.4999 -0.0180664 6.4999ZM-0.0180664 8.7499V9.7499C2.32523 9.7499 4.23193 11.6566 4.23193 13.9999H5.23193C5.23193 11.1049 2.87693 8.7499 -0.0180664 8.7499ZM3.35947e-05 11V14H3.00003C3.00003 12.3431 1.65693 11 3.35947e-05 11Z"
         />
@@ -783,13 +799,17 @@ var gerwig_default = `<template id="media-theme-gerwig">
 
   <template partial="PlaybackRateSelect">
     <media-playback-rate-selectmenu
-      rates="{{playbackrates}}"
       part="bottom playback-rate selectmenu"
       disabled="{{disabled}}"
       aria-disabled="{{disabled}}"
     >
       <media-playback-rate-button slot="button" part="bottom playback-rate button"></media-playback-rate-button>
-      <media-playback-rate-listbox slot="listbox" part="bottom playback-rate listbox"></media-playback-rate-listbox>
+      <media-playback-rate-listbox
+        slot="listbox"
+        rates="{{playbackrates}}"
+        exportparts="option"
+        part="bottom playback-rate listbox"
+      ></media-playback-rate-listbox>
     </media-playback-rate-selectmenu>
   </template>
 
@@ -829,7 +849,7 @@ var gerwig_default = `<template id="media-theme-gerwig">
           />
         </svg>
       </media-audio-track-button>
-      <media-audio-track-listbox slot="listbox" part="bottom audio-track listbox">
+      <media-audio-track-listbox slot="listbox" exportparts="option" part="bottom audio-track listbox">
         <div slot="select-indicator">
           <style>
             .listbox-indicator {
@@ -864,7 +884,7 @@ var gerwig_default = `<template id="media-theme-gerwig">
           />
         </svg>
       </media-rendition-button>
-      <media-rendition-listbox slot="listbox" part="bottom rendition listbox">
+      <media-rendition-listbox slot="listbox" exportparts="option" part="bottom rendition listbox">
         <div slot="select-indicator">
           <style>
             .listbox-indicator {
@@ -891,6 +911,7 @@ var gerwig_default = `<template id="media-theme-gerwig">
   </template>
 
   <media-controller
+    part="controller"
     defaultstreamtype="{{defaultstreamtype ?? 'on-demand'}}"
     breakpoints="sm:470"
     gesturesdisabled="{{disabled}}"
@@ -900,13 +921,14 @@ var gerwig_default = `<template id="media-theme-gerwig">
     audio="{{audio}}"
     noautoseektolive="{{noautoseektolive}}"
     defaultsubtitles="{{defaultsubtitles}}"
+    defaultduration="{{defaultduration ?? false}}"
     exportparts="layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer"
     style="--_pre-playback-place:{{preplaybackplace ?? 'center'}}"
   >
     <slot name="media" slot="media"></slot>
     <slot name="poster" slot="poster"></slot>
 
-    <media-loading-indicator slot="centered-chrome" no-auto-hide></media-loading-indicator>
+    <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
 
     <template if="!audio">
       <!-- Pre-playback UI -->
@@ -955,16 +977,11 @@ var gerwig_default = `<template id="media-theme-gerwig">
         </template>
         {{>TimeRange}}
         <media-control-bar part="control-bar bottom">
-          <template if="breakpointsm">
-            {{>PlayButton}} {{>SeekBackwardButton}} {{>SeekForwardButton}} {{>TimeDisplay}}
-          </template>
-          {{>MuteButton}} {{>VolumeRange}}
+          {{>PlayButton}} {{>SeekBackwardButton}} {{>SeekForwardButton}} {{>TimeDisplay}} {{>MuteButton}}
+          {{>VolumeRange}}
           <div class="spacer"></div>
-          {{>RenditionSelect}}
-          <template if="breakpointsm"> {{>PlaybackRateSelect}} </template>
-          {{>AudioTrackSelect}} {{>CaptionsMenuButton}} {{>AirplayButton}} {{>CastButton}}
-          <template if="breakpointsm"> {{>PipButton}} </template>
-          {{>FullscreenButton}}
+          {{>RenditionSelect}} {{>PlaybackRateSelect}} {{>AudioTrackSelect}} {{>CaptionsMenuButton}} {{>AirplayButton}}
+          {{>CastButton}} {{>PipButton}} {{>FullscreenButton}}
         </media-control-bar>
       </template>
 
@@ -975,15 +992,12 @@ var gerwig_default = `<template id="media-theme-gerwig">
         </media-control-bar>
         <template if="targetlivewindow > 0">{{>TimeRange}}</template>
         <media-control-bar part="control-bar bottom">
-          <template if="breakpointsm">
-            {{>PlayButton}}
-            <template if="targetlivewindow > 0"> {{>SeekBackwardButton}} {{>SeekForwardButton}} </template>
-          </template>
+          {{>PlayButton}}
+          <template if="targetlivewindow > 0">{{>SeekBackwardButton}} {{>SeekForwardButton}}</template>
           {{>MuteButton}} {{>VolumeRange}}
           <div class="spacer"></div>
           {{>RenditionSelect}} {{>AudioTrackSelect}} {{>CaptionsMenuButton}} {{>AirplayButton}} {{>CastButton}}
-          <template if="breakpointsm">{{>PipButton}}</template>
-          {{>FullscreenButton}}
+          {{>PipButton}} {{>FullscreenButton}}
         </media-control-bar>
       </template>
     </template>
@@ -999,7 +1013,6 @@ var gerwig_default = `<template id="media-theme-gerwig">
           {{>MuteButton}}
           <template if="breakpointsm">{{>VolumeRange}}</template>
           {{>TimeDisplay}} {{>TimeRange}}
-          <div class="spacer"></div>
           <template if="breakpointsm">{{>PlaybackRateSelect}}</template>
           {{>AirplayButton}} {{>CastButton}}
         </media-control-bar>
@@ -1015,7 +1028,7 @@ var gerwig_default = `<template id="media-theme-gerwig">
             <template if="targetlivewindow > 0"> {{>SeekBackwardButton}} {{>SeekForwardButton}} </template>
           </template>
           <template if="targetlivewindow > 0"> {{>TimeDisplay}} {{>TimeRange}} </template>
-          <div class="spacer"></div>
+          <template if="!targetlivewindow"><div class="spacer"></div></template>
           {{>AirplayButton}} {{>CastButton}}
         </media-control-bar>
       </template>
@@ -1105,6 +1118,7 @@ var MediaUIProps = {
   MEDIA_VOLUME_UNAVAILABLE: "mediaVolumeUnavailable",
   MEDIA_IS_PIP: "mediaIsPip",
   MEDIA_IS_CASTING: "mediaIsCasting",
+  MEDIA_IS_AIRPLAYING: "mediaIsAirplaying",
   MEDIA_SUBTITLES_LIST: "mediaSubtitlesList",
   MEDIA_SUBTITLES_SHOWING: "mediaSubtitlesShowing",
   MEDIA_IS_FULLSCREEN: "mediaIsFullscreen",
@@ -1211,6 +1225,9 @@ var globalThisShim2 = {
   CustomEvent: function CustomEvent2() {
   },
   getComputedStyle: function() {
+  },
+  navigator: {
+    languages: []
   }
 };
 var isServer2 = typeof window === "undefined" || typeof window.customElements === "undefined";

package/dist/themes/gerwig/index.js

@@ -86,6 +86,7 @@ var mediaThemeGerwig = (() => {
     }
 
     :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;
@@ -109,6 +110,7 @@ var mediaThemeGerwig = (() => {
 
     :host([audio]) media-control-bar {
       width: 100%;
+      background-color: var(--media-control-background);
     }
 
     /*
@@ -116,10 +118,11 @@ var mediaThemeGerwig = (() => {
      * Borrowed here, so the captions don't move too fast.
      */
     media-controller ::slotted([slot='media']) {
+      --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-webkit-text-track-transform: translateY(-50px);
+      --media-webkit-text-track-transform: translateY(-50px) scale(0.98);
       --media-webkit-text-track-transition: transform 0.15s ease;
     }
 
@@ -438,7 +441,7 @@ var mediaThemeGerwig = (() => {
       opacity: 1;
     }
 
-    media-loading-indicator[media-loading]:not([media-paused]) ~ div > * {
+    media-loading-indicator[medialoading]:not([mediapaused]) ~ div > * {
       opacity: 0;
       transition-delay: 400ms;
     }
@@ -526,6 +529,19 @@ var mediaThemeGerwig = (() => {
     media-mute-button[mediavolumelevel='off'] .muted {
       opacity: 1;
     }
+
+    /**
+     * Our defaults for these buttons are to hide them at small sizes
+     * users can override this with CSS
+     */
+    media-controller:not([breakpointsm]):not([audio]) {
+      --bottom-play-button: none;
+      --bottom-seek-backward-button: none;
+      --bottom-seek-forward-button: none;
+      --bottom-time-display: none;
+      --bottom-playback-rate-selectmenu: none;
+      --bottom-pip-button: none;
+    }
   </style>
 
   <template partial="TitleDisplay">
@@ -687,7 +703,7 @@ var mediaThemeGerwig = (() => {
           />
         </svg>
       </media-captions-button>
-      <media-captions-listbox slot="listbox" part="bottom captions listbox">
+      <media-captions-listbox slot="listbox" exportparts="option" part="bottom captions listbox">
         <div slot="select-indicator">
           <style>
             .listbox-indicator {
@@ -766,7 +782,7 @@ var mediaThemeGerwig = (() => {
           d="M16.0072 0H2.0291C0.9185 0 0.0181 0.9003 0.0181 2.011V5.5009C0.357 5.5016 0.6895 5.5275 1.0181 5.5669V2.011C1.0181 1.4536 1.4716 1 2.029 1H16.0072C16.5646 1 17.0181 1.4536 17.0181 2.011V11.9891C17.0181 12.5465 16.5646 13 16.0072 13H8.4358C8.4746 13.3286 8.4999 13.6611 8.4999 13.9999H16.0071C17.1177 13.9999 18.018 13.0996 18.018 11.989V2.011C18.0181 0.9003 17.1178 0 16.0072 0ZM0 6.4999V7.4999C3.584 7.4999 6.5 10.4159 6.5 13.9999H7.5C7.5 9.8642 4.1357 6.4999 0 6.4999ZM0 8.7499V9.7499C2.3433 9.7499 4.25 11.6566 4.25 13.9999H5.25C5.25 11.1049 2.895 8.7499 0 8.7499ZM0.0181 11V14H3.0181C3.0181 12.3431 1.675 11 0.0181 11Z"
         />
       </svg>
-      <svg viewBox="0 0 18 14" aria-hidden="true" slot="exist">
+      <svg viewBox="0 0 18 14" aria-hidden="true" slot="exit">
         <path
           d="M15.9891 0H2.01103C0.900434 0 3.35947e-05 0.9003 3.35947e-05 2.011V5.5009C0.338934 5.5016 0.671434 5.5275 1.00003 5.5669V2.011C1.00003 1.4536 1.45353 1 2.01093 1H15.9891C16.5465 1 17 1.4536 17 2.011V11.9891C17 12.5465 16.5465 13 15.9891 13H8.41773C8.45653 13.3286 8.48183 13.6611 8.48183 13.9999H15.989C17.0996 13.9999 17.9999 13.0996 17.9999 11.989V2.011C18 0.9003 17.0997 0 15.9891 0ZM-0.0180664 6.4999V7.4999C3.56593 7.4999 6.48193 10.4159 6.48193 13.9999H7.48193C7.48193 9.8642 4.11763 6.4999 -0.0180664 6.4999ZM-0.0180664 8.7499V9.7499C2.32523 9.7499 4.23193 11.6566 4.23193 13.9999H5.23193C5.23193 11.1049 2.87693 8.7499 -0.0180664 8.7499ZM3.35947e-05 11V14H3.00003C3.00003 12.3431 1.65693 11 3.35947e-05 11Z"
         />
@@ -783,13 +799,17 @@ var mediaThemeGerwig = (() => {
 
   <template partial="PlaybackRateSelect">
     <media-playback-rate-selectmenu
-      rates="{{playbackrates}}"
       part="bottom playback-rate selectmenu"
       disabled="{{disabled}}"
       aria-disabled="{{disabled}}"
     >
       <media-playback-rate-button slot="button" part="bottom playback-rate button"></media-playback-rate-button>
-      <media-playback-rate-listbox slot="listbox" part="bottom playback-rate listbox"></media-playback-rate-listbox>
+      <media-playback-rate-listbox
+        slot="listbox"
+        rates="{{playbackrates}}"
+        exportparts="option"
+        part="bottom playback-rate listbox"
+      ></media-playback-rate-listbox>
     </media-playback-rate-selectmenu>
   </template>
 
@@ -829,7 +849,7 @@ var mediaThemeGerwig = (() => {
           />
         </svg>
       </media-audio-track-button>
-      <media-audio-track-listbox slot="listbox" part="bottom audio-track listbox">
+      <media-audio-track-listbox slot="listbox" exportparts="option" part="bottom audio-track listbox">
         <div slot="select-indicator">
           <style>
             .listbox-indicator {
@@ -864,7 +884,7 @@ var mediaThemeGerwig = (() => {
           />
         </svg>
       </media-rendition-button>
-      <media-rendition-listbox slot="listbox" part="bottom rendition listbox">
+      <media-rendition-listbox slot="listbox" exportparts="option" part="bottom rendition listbox">
         <div slot="select-indicator">
           <style>
             .listbox-indicator {
@@ -891,6 +911,7 @@ var mediaThemeGerwig = (() => {
   </template>
 
   <media-controller
+    part="controller"
     defaultstreamtype="{{defaultstreamtype ?? 'on-demand'}}"
     breakpoints="sm:470"
     gesturesdisabled="{{disabled}}"
@@ -900,13 +921,14 @@ var mediaThemeGerwig = (() => {
     audio="{{audio}}"
     noautoseektolive="{{noautoseektolive}}"
     defaultsubtitles="{{defaultsubtitles}}"
+    defaultduration="{{defaultduration ?? false}}"
     exportparts="layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer"
     style="--_pre-playback-place:{{preplaybackplace ?? 'center'}}"
   >
     <slot name="media" slot="media"></slot>
     <slot name="poster" slot="poster"></slot>
 
-    <media-loading-indicator slot="centered-chrome" no-auto-hide></media-loading-indicator>
+    <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
 
     <template if="!audio">
       <!-- Pre-playback UI -->
@@ -955,16 +977,11 @@ var mediaThemeGerwig = (() => {
         </template>
         {{>TimeRange}}
         <media-control-bar part="control-bar bottom">
-          <template if="breakpointsm">
-            {{>PlayButton}} {{>SeekBackwardButton}} {{>SeekForwardButton}} {{>TimeDisplay}}
-          </template>
-          {{>MuteButton}} {{>VolumeRange}}
+          {{>PlayButton}} {{>SeekBackwardButton}} {{>SeekForwardButton}} {{>TimeDisplay}} {{>MuteButton}}
+          {{>VolumeRange}}
           <div class="spacer"></div>
-          {{>RenditionSelect}}
-          <template if="breakpointsm"> {{>PlaybackRateSelect}} </template>
-          {{>AudioTrackSelect}} {{>CaptionsMenuButton}} {{>AirplayButton}} {{>CastButton}}
-          <template if="breakpointsm"> {{>PipButton}} </template>
-          {{>FullscreenButton}}
+          {{>RenditionSelect}} {{>PlaybackRateSelect}} {{>AudioTrackSelect}} {{>CaptionsMenuButton}} {{>AirplayButton}}
+          {{>CastButton}} {{>PipButton}} {{>FullscreenButton}}
         </media-control-bar>
       </template>
 
@@ -975,15 +992,12 @@ var mediaThemeGerwig = (() => {
         </media-control-bar>
         <template if="targetlivewindow > 0">{{>TimeRange}}</template>
         <media-control-bar part="control-bar bottom">
-          <template if="breakpointsm">
-            {{>PlayButton}}
-            <template if="targetlivewindow > 0"> {{>SeekBackwardButton}} {{>SeekForwardButton}} </template>
-          </template>
+          {{>PlayButton}}
+          <template if="targetlivewindow > 0">{{>SeekBackwardButton}} {{>SeekForwardButton}}</template>
           {{>MuteButton}} {{>VolumeRange}}
           <div class="spacer"></div>
           {{>RenditionSelect}} {{>AudioTrackSelect}} {{>CaptionsMenuButton}} {{>AirplayButton}} {{>CastButton}}
-          <template if="breakpointsm">{{>PipButton}}</template>
-          {{>FullscreenButton}}
+          {{>PipButton}} {{>FullscreenButton}}
         </media-control-bar>
       </template>
     </template>
@@ -999,7 +1013,6 @@ var mediaThemeGerwig = (() => {
           {{>MuteButton}}
           <template if="breakpointsm">{{>VolumeRange}}</template>
           {{>TimeDisplay}} {{>TimeRange}}
-          <div class="spacer"></div>
           <template if="breakpointsm">{{>PlaybackRateSelect}}</template>
           {{>AirplayButton}} {{>CastButton}}
         </media-control-bar>
@@ -1015,7 +1028,7 @@ var mediaThemeGerwig = (() => {
             <template if="targetlivewindow > 0"> {{>SeekBackwardButton}} {{>SeekForwardButton}} </template>
           </template>
           <template if="targetlivewindow > 0"> {{>TimeDisplay}} {{>TimeRange}} </template>
-          <div class="spacer"></div>
+          <template if="!targetlivewindow"><div class="spacer"></div></template>
           {{>AirplayButton}} {{>CastButton}}
         </media-control-bar>
       </template>
@@ -1105,6 +1118,7 @@ var mediaThemeGerwig = (() => {
     MEDIA_VOLUME_UNAVAILABLE: "mediaVolumeUnavailable",
     MEDIA_IS_PIP: "mediaIsPip",
     MEDIA_IS_CASTING: "mediaIsCasting",
+    MEDIA_IS_AIRPLAYING: "mediaIsAirplaying",
     MEDIA_SUBTITLES_LIST: "mediaSubtitlesList",
     MEDIA_SUBTITLES_SHOWING: "mediaSubtitlesShowing",
     MEDIA_IS_FULLSCREEN: "mediaIsFullscreen",
@@ -1211,6 +1225,9 @@ var mediaThemeGerwig = (() => {
     CustomEvent: function CustomEvent2() {
     },
     getComputedStyle: function() {
+    },
+    navigator: {
+      languages: []
     }
   };
   var isServer2 = typeof window === "undefined" || typeof window.customElements === "undefined";