npm - @videojs/html - Versions diffs - 10.0.1 → 10.2.0 - Mend

@videojs/html 10.0.1 → 10.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (455) hide show

package/dist/default/internal/skins/default-live-video/skin.css CHANGED Viewed

@@ -84,7 +84,7 @@
   :where(.media-skin) {
     --media-caption-track-duration: var(--media-duration-controls);
     --media-caption-track-delay: 25ms;
-    --media-caption-track-y: calc(var(--media-spacing) * -2);
+    --media-caption-track-y: calc(var(--media-spacing) * -3);
   }
   :where(.media-skin) video::-webkit-media-text-track-container {
@@ -107,9 +107,13 @@
     transition-property: transform;
   }
-  @container media-root (width >= 42rem) {
+  @container media-root (width < 42rem) {
+    :where(.media-skin)[data-theme="default"][data-controls-visible] video {
+      --media-caption-track-y: calc(var(--media-spacing) * -14);
+    }
     :where(.media-skin)[data-theme="neutral"][data-controls-visible] video {
-      --media-caption-track-y: calc(var(--media-spacing) * -12);
+      --media-caption-track-y: calc(var(--media-spacing) * -17);
     }
   }
@@ -404,7 +408,7 @@
     transform-origin: top;
     padding-inline: calc(var(--media-spacing) * 6);
     padding-top: calc(var(--media-spacing) * 2.5);
-    font-size: calc(var(--media-spacing) * 3.25);
+    font-size: calc(var(--media-spacing) * 4);
     letter-spacing: -.0125em;
     overflow-wrap: anywhere;
     color: var(--media-controls-foreground);
@@ -438,7 +442,6 @@
     :where(.media-skin[data-theme="default"]) .media-title {
       padding-inline: calc(var(--media-spacing) * 6);
       padding-top: calc(var(--media-spacing) * 4);
-      font-size: calc(var(--media-spacing) * 4.25);
     }
   }
@@ -1969,7 +1972,7 @@
       color-mix(in oklab, var(--media-backdrop) 40%, transparent),
       color-mix(in oklab, var(--media-backdrop) 20%, transparent),
       color-mix(in oklab, var(--media-backdrop) 50%, transparent));
-    --media-caption-controls-y: calc(var(--media-spacing) * -14);
+    --media-caption-controls-y: calc(var(--media-spacing) * -16);
     --media-slider-preview-offset: calc(var(--media-spacing) * 9);
     --media-thumbnail-gradient: linear-gradient(to top,
       color-mix(in oklab, var(--media-backdrop) 50%, transparent),
@@ -2004,10 +2007,18 @@
       color-mix(in oklab, var(--media-backdrop) 35%, transparent),
       color-mix(in oklab, var(--media-backdrop) 20%, transparent) calc(var(--media-spacing) * 12),
       transparent);
-    --media-caption-controls-y: calc(var(--media-spacing) * -18);
+    --media-caption-controls-y: calc(var(--media-spacing) * -14);
     --media-slider-preview-offset: calc(var(--media-spacing) * 11);
   }
+  .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="compat"] {
+    --media-caption-controls-y: calc(var(--media-spacing) * -18);
+  }
+  .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="scaffold"] {
+    --media-caption-controls-y: calc(var(--media-spacing) * -20);
+  }
   @supports (color: oklch(from red l c h)) and (background-image: linear-gradient(in oklab, red, red)) {
     .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
       --media-controls-gradient: linear-gradient(to top in oklab,

package/dist/default/internal/skins/default-live-video/template.js CHANGED Viewed

@@ -37,7 +37,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-controls-content class="video-controls video-controls-content video-controls-spaced">
 <media-tooltip-group>
 <media-controls-group class="video-controls-primary video-controls-spaced">
-<media-play-button class="media-button media-play-button" id="vjs-dnLBW76d-0-trigger">
+<media-play-button class="media-button media-play-button" id="vjs-GwMvn1qb-0-trigger">
 <media-icon name="restart" class="media-button-icon media-play-button-restart-icon">
 </media-icon>
 <media-icon name="play" class="media-button-icon media-play-button-play-icon">
@@ -45,7 +45,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon name="pause" class="media-button-icon media-play-button-pause-icon">
 </media-icon>
 </media-play-button>
-<media-tooltip trigger="vjs-dnLBW76d-0-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-GwMvn1qb-0-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
@@ -55,7 +55,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-live-button>
 <div aria-hidden="true" class="video-controls-spacer">
 </div>
-<media-mute-button commandfor="vjs-LfeqRD7o-0-popup" class="media-button media-mute-button" id="vjs-dnLBW76d-0-2-trigger">
+<media-mute-button commandfor="vjs-nFWpFKR6-0-popup" class="media-button media-mute-button" id="vjs-GwMvn1qb-0-2-trigger">
 <media-icon name="volume-off" class="media-button-icon media-mute-button-off-icon">
 </media-icon>
 <media-icon name="volume-low" class="media-button-icon media-mute-button-low-icon">
@@ -63,13 +63,13 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon name="volume-high" class="media-button-icon media-mute-button-high-icon">
 </media-icon>
 </media-mute-button>
-<media-tooltip trigger="vjs-dnLBW76d-0-2-trigger" delay="0" disabled sticky side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-GwMvn1qb-0-2-trigger" delay="0" disabled sticky side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-volume-popover open-on-hover delay="200" close-delay="100" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover" id="vjs-LfeqRD7o-0-popup">
+<media-volume-popover open-on-hover delay="200" close-delay="100" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover" id="vjs-nFWpFKR6-0-popup">
 <media-volume-slider class="media-slider media-volume-slider" thumb-alignment="edge" orientation="vertical">
 <media-slider-track class="media-slider-track">
 <media-slider-fill class="media-slider-fill">
@@ -79,19 +79,19 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-slider-thumb>
 </media-volume-slider>
 </media-volume-popover>
-<media-captions-button commandfor="vjs-ttz7HPcm-0-popup" class="media-button media-captions-button video-controls-captions-menu" id="vjs-dnLBW76d-0-3-trigger">
+<media-captions-button commandfor="vjs-ePSMNeK8-0-popup" class="media-button media-captions-button video-controls-captions-menu" id="vjs-GwMvn1qb-0-3-trigger">
 <media-icon name="captions-off" class="media-button-icon media-captions-button-off-icon">
 </media-icon>
 <media-icon name="captions-on" class="media-button-icon media-captions-button-on-icon">
 </media-icon>
 </media-captions-button>
-<media-tooltip trigger="vjs-dnLBW76d-0-3-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-GwMvn1qb-0-3-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-menu side="top" align="center" boundary="viewport" class="media-popup media-popup-surface media-menu-popup" id="vjs-ttz7HPcm-0-popup">
+<media-menu side="top" align="center" boundary="viewport" class="media-popup media-popup-surface media-menu-popup" id="vjs-ePSMNeK8-0-popup">
 <media-menu-content class="media-menu-content">
 <media-captions-radio-group class="media-menu-radio-group">
 <template>
@@ -107,49 +107,49 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-captions-radio-group>
 </media-menu-content>
 </media-menu>
-<media-cast-button class="media-button media-cast-button" id="vjs-dnLBW76d-0-4-trigger">
+<media-cast-button class="media-button media-cast-button" id="vjs-GwMvn1qb-0-4-trigger">
 <media-icon name="cast-enter" class="media-button-icon media-cast-button-enter-icon">
 </media-icon>
 <media-icon name="cast-exit" class="media-button-icon media-cast-button-exit-icon">
 </media-icon>
 </media-cast-button>
-<media-tooltip trigger="vjs-dnLBW76d-0-4-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-GwMvn1qb-0-4-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-airplay-button class="media-button media-airplay-button" id="vjs-dnLBW76d-0-5-trigger">
+<media-airplay-button class="media-button media-airplay-button" id="vjs-GwMvn1qb-0-5-trigger">
 <media-icon name="airplay-enter" class="media-button-icon media-airplay-button-enter-icon">
 </media-icon>
 <media-icon name="airplay-exit" class="media-button-icon media-airplay-button-exit-icon">
 </media-icon>
 </media-airplay-button>
-<media-tooltip trigger="vjs-dnLBW76d-0-5-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-GwMvn1qb-0-5-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-pip-button class="media-button media-pip-button" id="vjs-dnLBW76d-0-6-trigger">
+<media-pip-button class="media-button media-pip-button" id="vjs-GwMvn1qb-0-6-trigger">
 <media-icon name="pip-enter" class="media-button-icon media-pip-button-enter-icon">
 </media-icon>
 <media-icon name="pip-exit" class="media-button-icon media-pip-button-exit-icon">
 </media-icon>
 </media-pip-button>
-<media-tooltip trigger="vjs-dnLBW76d-0-6-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-GwMvn1qb-0-6-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-fullscreen-button class="media-button media-fullscreen-button" id="vjs-dnLBW76d-0-7-trigger">
+<media-fullscreen-button class="media-button media-fullscreen-button" id="vjs-GwMvn1qb-0-7-trigger">
 <media-icon name="fullscreen-enter" class="media-button-icon media-fullscreen-button-enter-icon">
 </media-icon>
 <media-icon name="fullscreen-exit" class="media-button-icon media-fullscreen-button-exit-icon">
 </media-icon>
 </media-fullscreen-button>
-<media-tooltip trigger="vjs-dnLBW76d-0-7-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-GwMvn1qb-0-7-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">

package/dist/default/internal/skins/default-video/skin.css CHANGED Viewed

@@ -84,7 +84,7 @@
   :where(.media-skin) {
     --media-caption-track-duration: var(--media-duration-controls);
     --media-caption-track-delay: 25ms;
-    --media-caption-track-y: calc(var(--media-spacing) * -2);
+    --media-caption-track-y: calc(var(--media-spacing) * -3);
   }
   :where(.media-skin) video::-webkit-media-text-track-container {
@@ -107,9 +107,13 @@
     transition-property: transform;
   }
-  @container media-root (width >= 42rem) {
+  @container media-root (width < 42rem) {
+    :where(.media-skin)[data-theme="default"][data-controls-visible] video {
+      --media-caption-track-y: calc(var(--media-spacing) * -14);
+    }
     :where(.media-skin)[data-theme="neutral"][data-controls-visible] video {
-      --media-caption-track-y: calc(var(--media-spacing) * -12);
+      --media-caption-track-y: calc(var(--media-spacing) * -17);
     }
   }
@@ -404,7 +408,7 @@
     transform-origin: top;
     padding-inline: calc(var(--media-spacing) * 6);
     padding-top: calc(var(--media-spacing) * 2.5);
-    font-size: calc(var(--media-spacing) * 3.25);
+    font-size: calc(var(--media-spacing) * 4);
     letter-spacing: -.0125em;
     overflow-wrap: anywhere;
     color: var(--media-controls-foreground);
@@ -438,7 +442,6 @@
     :where(.media-skin[data-theme="default"]) .media-title {
       padding-inline: calc(var(--media-spacing) * 6);
       padding-top: calc(var(--media-spacing) * 4);
-      font-size: calc(var(--media-spacing) * 4.25);
     }
   }
@@ -1521,6 +1524,12 @@
     opacity: 1;
   }
+  :where(.media-skin[data-theme="default"]) .media-time-slider[data-playing] {
+    transition-property: --media-slider-buffer;
+    transition-duration: .15s;
+    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+  }
   :where(.media-skin[data-theme="default"]) .media-time-slider-chapter {
     --media-chapter-inset-end: .5;
     --media-chapter-inset-start: .5;
@@ -2652,7 +2661,7 @@
       color-mix(in oklab, var(--media-backdrop) 40%, transparent),
       color-mix(in oklab, var(--media-backdrop) 20%, transparent),
       color-mix(in oklab, var(--media-backdrop) 50%, transparent));
-    --media-caption-controls-y: calc(var(--media-spacing) * -14);
+    --media-caption-controls-y: calc(var(--media-spacing) * -16);
     --media-slider-preview-offset: calc(var(--media-spacing) * 9);
     --media-thumbnail-gradient: linear-gradient(to top,
       color-mix(in oklab, var(--media-backdrop) 50%, transparent),
@@ -2687,10 +2696,18 @@
       color-mix(in oklab, var(--media-backdrop) 35%, transparent),
       color-mix(in oklab, var(--media-backdrop) 20%, transparent) calc(var(--media-spacing) * 12),
       transparent);
-    --media-caption-controls-y: calc(var(--media-spacing) * -18);
+    --media-caption-controls-y: calc(var(--media-spacing) * -14);
     --media-slider-preview-offset: calc(var(--media-spacing) * 11);
   }
+  .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="compat"] {
+    --media-caption-controls-y: calc(var(--media-spacing) * -18);
+  }
+  .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="scaffold"] {
+    --media-caption-controls-y: calc(var(--media-spacing) * -20);
+  }
   @supports (color: oklch(from red l c h)) and (background-image: linear-gradient(in oklab, red, red)) {
     .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
       --media-controls-gradient: linear-gradient(to top in oklab,

package/dist/default/internal/skins/default-video/template.js CHANGED Viewed

@@ -37,7 +37,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-controls-content class="video-controls video-controls-content">
 <media-tooltip-group>
 <media-controls-group class="video-controls-primary">
-<media-play-button class="media-button media-play-button" id="vjs-QuClibja-0-trigger">
+<media-play-button class="media-button media-play-button" id="vjs-iSAklLIk-0-trigger">
 <media-icon name="restart" class="media-button-icon media-play-button-restart-icon">
 </media-icon>
 <media-icon name="play" class="media-button-icon media-play-button-play-icon">
@@ -45,13 +45,13 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon name="pause" class="media-button-icon media-play-button-pause-icon">
 </media-icon>
 </media-play-button>
-<media-tooltip trigger="vjs-QuClibja-0-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-iSAklLIk-0-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-mute-button commandfor="vjs-OetjWaXX-0-popup" class="media-button media-mute-button video-controls-volume-button" id="vjs-QuClibja-0-2-trigger">
+<media-mute-button commandfor="vjs-F3QfBzzz-0-popup" class="media-button media-mute-button video-controls-volume-button" id="vjs-iSAklLIk-0-2-trigger">
 <media-icon name="volume-off" class="media-button-icon media-mute-button-off-icon">
 </media-icon>
 <media-icon name="volume-low" class="media-button-icon media-mute-button-low-icon">
@@ -59,13 +59,13 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon name="volume-high" class="media-button-icon media-mute-button-high-icon">
 </media-icon>
 </media-mute-button>
-<media-tooltip trigger="vjs-QuClibja-0-2-trigger" delay="0" disabled sticky side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-iSAklLIk-0-2-trigger" delay="0" disabled sticky side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-volume-popover open-on-hover delay="200" close-delay="100" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover" id="vjs-OetjWaXX-0-popup">
+<media-volume-popover open-on-hover delay="200" close-delay="100" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover" id="vjs-F3QfBzzz-0-popup">
 <media-volume-slider class="media-slider media-volume-slider" thumb-alignment="edge" orientation="vertical">
 <media-slider-track class="media-slider-track">
 <media-slider-fill class="media-slider-fill">
@@ -112,29 +112,29 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-time class="media-time-toggle video-time-value" type="remaining" toggle>
 </media-time>
 </media-controls-group>
-<media-captions-button class="media-button media-captions-button video-controls-captions-button" id="vjs-QuClibja-0-3-trigger">
+<media-captions-button class="media-button media-captions-button video-controls-captions-button" id="vjs-iSAklLIk-0-3-trigger">
 <media-icon name="captions-off" class="media-button-icon media-captions-button-off-icon">
 </media-icon>
 <media-icon name="captions-on" class="media-button-icon media-captions-button-on-icon">
 </media-icon>
 </media-captions-button>
-<media-tooltip trigger="vjs-QuClibja-0-3-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-iSAklLIk-0-3-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<button commandfor="vjs-oFdCBVms-0-popup" class="media-button media-settings-menu-trigger video-controls-settings-button" id="vjs-QuClibja-0-4-trigger">
+<button commandfor="vjs-28BtKs3v-0-popup" class="media-button media-settings-menu-trigger video-controls-settings-button" id="vjs-iSAklLIk-0-4-trigger">
 <media-icon name="gear" class="media-button-icon-base media-settings-menu-trigger-icon">
 </media-icon>
 <media-text class="media-settings-menu-trigger-label" token="menu.settings">Settings</media-text>
 </button>
-<media-tooltip trigger="vjs-QuClibja-0-4-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-iSAklLIk-0-4-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-text token="menu.settings">Settings</media-text>
 </media-tooltip>
-<media-menu side="top" align="center" class="media-popup media-popup-surface media-menu-popup media-menu-resizable-popup" id="vjs-oFdCBVms-0-popup">
+<media-menu side="top" align="center" class="media-popup media-popup-surface media-menu-popup media-menu-resizable-popup" id="vjs-28BtKs3v-0-popup">
 <media-menu-content class="media-menu-content">
-<media-menu-item commandfor="vjs-moIPS8Sb-0-content" class="media-menu-trigger-item">
+<media-menu-item commandfor="vjs-ZGpCKm5h-0-content" class="media-menu-trigger-item">
 <media-icon name="switches" class="media-menu-trigger-item-icon">
 </media-icon>
 <media-text token="menu.quality">Quality</media-text>
@@ -145,7 +145,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-moIPS8Sb-0-content">
+<media-menu-content class="media-menu-content" id="vjs-ZGpCKm5h-0-content">
 <media-menu-item class="media-menu-back-item">
 <media-icon name="chevron" class="media-menu-back-chevron">
 </media-icon>
@@ -172,7 +172,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </template>
 </media-quality-radio-group>
 </media-menu-content>
-<media-menu-item commandfor="vjs-rgOMyneB-0-content" class="media-menu-trigger-item">
+<media-menu-item commandfor="vjs-rPcYSc7i-0-content" class="media-menu-trigger-item">
 <media-icon name="speech" class="media-menu-trigger-item-icon">
 </media-icon>
 <media-text token="menu.audio">Audio</media-text>
@@ -183,7 +183,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-rgOMyneB-0-content">
+<media-menu-content class="media-menu-content" id="vjs-rPcYSc7i-0-content">
 <media-menu-item class="media-menu-back-item">
 <media-icon name="chevron" class="media-menu-back-chevron">
 </media-icon>
@@ -204,7 +204,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </template>
 </media-audio-track-radio-group>
 </media-menu-content>
-<media-menu-item commandfor="vjs-Uj2fjhhP-0-content" class="media-menu-trigger-item">
+<media-menu-item commandfor="vjs-8B_qQK6x-0-content" class="media-menu-trigger-item">
 <media-icon name="speed" class="media-menu-trigger-item-icon">
 </media-icon>
 <media-text token="menu.speed">Speed</media-text>
@@ -215,7 +215,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-Uj2fjhhP-0-content">
+<media-menu-content class="media-menu-content" id="vjs-8B_qQK6x-0-content">
 <media-menu-item class="media-menu-back-item">
 <media-icon name="chevron" class="media-menu-back-chevron">
 </media-icon>
@@ -236,7 +236,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </template>
 </media-playback-rate-radio-group>
 </media-menu-content>
-<media-menu-item commandfor="vjs-pnYuA7i8-0-content" class="media-menu-trigger-item">
+<media-menu-item commandfor="vjs-fVL6fVBf-0-content" class="media-menu-trigger-item">
 <media-icon name="captions-off" class="media-menu-trigger-item-icon">
 </media-icon>
 <media-text token="menu.captions">Captions</media-text>
@@ -247,7 +247,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-pnYuA7i8-0-content">
+<media-menu-content class="media-menu-content" id="vjs-fVL6fVBf-0-content">
 <media-menu-item class="media-menu-back-item">
 <media-icon name="chevron" class="media-menu-back-chevron">
 </media-icon>
@@ -272,49 +272,49 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-menu>
 </media-controls-group>
 <media-controls-group class="video-controls-secondary">
-<media-cast-button class="media-button media-cast-button" id="vjs-QuClibja-0-5-trigger">
+<media-cast-button class="media-button media-cast-button" id="vjs-iSAklLIk-0-5-trigger">
 <media-icon name="cast-enter" class="media-button-icon media-cast-button-enter-icon">
 </media-icon>
 <media-icon name="cast-exit" class="media-button-icon media-cast-button-exit-icon">
 </media-icon>
 </media-cast-button>
-<media-tooltip trigger="vjs-QuClibja-0-5-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-iSAklLIk-0-5-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-airplay-button class="media-button media-airplay-button" id="vjs-QuClibja-0-6-trigger">
+<media-airplay-button class="media-button media-airplay-button" id="vjs-iSAklLIk-0-6-trigger">
 <media-icon name="airplay-enter" class="media-button-icon media-airplay-button-enter-icon">
 </media-icon>
 <media-icon name="airplay-exit" class="media-button-icon media-airplay-button-exit-icon">
 </media-icon>
 </media-airplay-button>
-<media-tooltip trigger="vjs-QuClibja-0-6-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-iSAklLIk-0-6-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-pip-button class="media-button media-pip-button" id="vjs-QuClibja-0-7-trigger">
+<media-pip-button class="media-button media-pip-button" id="vjs-iSAklLIk-0-7-trigger">
 <media-icon name="pip-enter" class="media-button-icon media-pip-button-enter-icon">
 </media-icon>
 <media-icon name="pip-exit" class="media-button-icon media-pip-button-exit-icon">
 </media-icon>
 </media-pip-button>
-<media-tooltip trigger="vjs-QuClibja-0-7-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-iSAklLIk-0-7-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-fullscreen-button class="media-button media-fullscreen-button" id="vjs-QuClibja-0-8-trigger">
+<media-fullscreen-button class="media-button media-fullscreen-button" id="vjs-iSAklLIk-0-8-trigger">
 <media-icon name="fullscreen-enter" class="media-button-icon media-fullscreen-button-enter-icon">
 </media-icon>
 <media-icon name="fullscreen-exit" class="media-button-icon media-fullscreen-button-exit-icon">
 </media-icon>
 </media-fullscreen-button>
-<media-tooltip trigger="vjs-QuClibja-0-8-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-iSAklLIk-0-8-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">

package/dist/default/internal/skins/neutral-audio/skin.css CHANGED Viewed

@@ -553,7 +553,6 @@
     outline-style: none;
     flex-direction: row;
     padding-block: 0;
-    padding-inline-end: var(--media-spacing);
     transition-timing-function: cubic-bezier(0, 0, .2, 1);
     display: flex;
     position: absolute;
@@ -1706,22 +1705,13 @@
     }
   }
-  :where(.media-skin[data-theme="neutral"][data-preset="audio"]) .media-time-current-value {
-    display: none;
-  }
-  @container media-root (width >= 42rem) {
-    :where(.media-skin[data-theme="neutral"][data-preset="audio"]) .media-time-current-value {
-      display: inline;
-    }
-  }
   :where(.media-skin[data-theme="neutral"][data-preset="audio"]) .media-time-duration-value {
     font-variant-numeric: tabular-nums;
     transition-property: opacity;
     transition-duration: .15s;
     transition-duration: var(--media-duration-slow);
     transition-timing-function: cubic-bezier(0, 0, .2, 1);
+    display: none;
   }
   :where(.media-skin[data-theme="neutral"][data-preset="audio"]) .media-time-duration-value[data-unavailable] {
@@ -1731,6 +1721,7 @@
   @container media-root (width >= 42rem) {
     :where(.media-skin[data-theme="neutral"][data-preset="audio"]) .media-time-duration-value {
       color: var(--media-controls-foreground);
+      display: inline;
     }
     @supports (color: color-mix(in lab, red, red)) {

package/dist/default/internal/skins/neutral-audio/template.js CHANGED Viewed

@@ -29,7 +29,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon family="neutral" name="spinner" class="media-buffering-indicator-spinner-icon">
 </media-icon>
 </media-buffering-indicator>
-<media-play-button class="media-button media-play-button" id="vjs-nAo4ezjf-0-trigger">
+<media-play-button class="media-button media-play-button" id="vjs-W_MfTVYB-0-trigger">
 <media-icon family="neutral" name="restart" class="media-button-icon media-play-button-restart-icon">
 </media-icon>
 <media-icon family="neutral" name="play" class="media-button-icon media-play-button-play-icon">
@@ -37,34 +37,34 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon family="neutral" name="pause" class="media-button-icon media-play-button-pause-icon">
 </media-icon>
 </media-play-button>
-<media-tooltip trigger="vjs-nAo4ezjf-0-trigger" boundary="viewport" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-W_MfTVYB-0-trigger" boundary="viewport" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
 </div>
-<media-seek-button seconds="-10" class="media-button media-seek-button" id="vjs-nAo4ezjf-0-2-trigger">
+<media-seek-button seconds="-10" class="media-button media-seek-button" id="vjs-W_MfTVYB-0-2-trigger">
 <div class="media-seek-button-content">
 <media-icon family="neutral" name="seek" class="media-button-icon media-seek-button-backward-icon">
 </media-icon>
 <span class="media-seek-button-label media-seek-button-backward-label">10</span>
 </div>
 </media-seek-button>
-<media-tooltip trigger="vjs-nAo4ezjf-0-2-trigger" boundary="viewport" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-W_MfTVYB-0-2-trigger" boundary="viewport" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-seek-button seconds="10" class="media-button media-seek-button" id="vjs-nAo4ezjf-0-3-trigger">
+<media-seek-button seconds="10" class="media-button media-seek-button" id="vjs-W_MfTVYB-0-3-trigger">
 <div class="media-seek-button-content">
 <media-icon family="neutral" name="seek" class="media-button-icon">
 </media-icon>
 <span class="media-seek-button-label media-seek-button-forward-label">10</span>
 </div>
 </media-seek-button>
-<media-tooltip trigger="vjs-nAo4ezjf-0-3-trigger" boundary="viewport" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-W_MfTVYB-0-3-trigger" boundary="viewport" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
@@ -73,7 +73,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-controls-group>
 <media-controls-group class="audio-time-slider-group">
 <media-time-group class="media-time-group">
-<media-time class="media-time-toggle media-time-current-value" type="current" toggle>
+<media-time class="media-time-toggle" type="current" toggle>
 </media-time>
 <media-time-separator class="media-time-separator">
 </media-time-separator>
@@ -98,7 +98,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-time-slider>
 </media-controls-group>
 <media-controls-group class="audio-controls-end">
-<media-mute-button commandfor="vjs-IMkbfqkS-0-popup" class="media-button media-mute-button" id="vjs-nAo4ezjf-0-4-trigger">
+<media-mute-button commandfor="vjs-4kthzEOq-0-popup" class="media-button media-mute-button" id="vjs-W_MfTVYB-0-4-trigger">
 <media-icon family="neutral" name="volume-off" class="media-button-icon media-mute-button-off-icon">
 </media-icon>
 <media-icon family="neutral" name="volume-low" class="media-button-icon media-mute-button-low-icon">
@@ -106,13 +106,13 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon family="neutral" name="volume-high" class="media-button-icon media-mute-button-high-icon">
 </media-icon>
 </media-mute-button>
-<media-tooltip trigger="vjs-nAo4ezjf-0-4-trigger" delay="0" sticky side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-W_MfTVYB-0-4-trigger" delay="0" sticky side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-volume-popover open-on-hover delay="200" close-delay="100" side="left" boundary="viewport" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover" id="vjs-IMkbfqkS-0-popup">
+<media-volume-popover open-on-hover delay="200" close-delay="100" side="left" boundary="viewport" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover" id="vjs-4kthzEOq-0-popup">
 <media-volume-slider class="media-slider media-volume-slider" thumb-alignment="edge" orientation="horizontal">
 <media-slider-track class="media-slider-track">
 <media-slider-fill class="media-slider-fill">
@@ -122,15 +122,15 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-slider-thumb>
 </media-volume-slider>
 </media-volume-popover>
-<media-playback-rate-button commandfor="vjs-Dapd3-W_-0-popup" class="media-button media-playback-rate-button" id="vjs-nAo4ezjf-0-5-trigger">
+<media-playback-rate-button commandfor="vjs-ALt053S7-0-popup" class="media-button media-playback-rate-button" id="vjs-W_MfTVYB-0-5-trigger">
 </media-playback-rate-button>
-<media-tooltip trigger="vjs-nAo4ezjf-0-5-trigger" boundary="viewport" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-W_MfTVYB-0-5-trigger" boundary="viewport" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-menu side="top" align="center" boundary="viewport" class="media-popup media-popup-surface media-menu-popup audio-settings-menu-popup" id="vjs-Dapd3-W_-0-popup">
+<media-menu side="top" align="center" boundary="viewport" class="media-popup media-popup-surface media-menu-popup audio-settings-menu-popup" id="vjs-ALt053S7-0-popup">
 <media-menu-content class="media-menu-content">
 <media-playback-rate-radio-group class="media-menu-radio-group">
 <template>

package/dist/default/internal/skins/neutral-live-audio/skin.css CHANGED Viewed

@@ -553,7 +553,6 @@
     outline-style: none;
     flex-direction: row;
     padding-block: 0;
-    padding-inline-end: var(--media-spacing);
     transition-timing-function: cubic-bezier(0, 0, .2, 1);
     display: flex;
     position: absolute;