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

@videojs/html 10.0.1 → 10.1.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 (403) hide show

package/dist/dev/internal/skins/neutral-live-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-Fk-vJ5H4-0-trigger">
+<media-play-button class="media-button media-play-button" id="vjs-I2MG-wVd-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,7 +37,7 @@ 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-Fk-vJ5H4-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-I2MG-wVd-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">
@@ -50,7 +50,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <div aria-hidden="true" class="audio-controls-spacer">
 </div>
 <media-controls-group class="audio-controls-end">
-<media-mute-button commandfor="vjs-zg01E7C9-0-popup" class="media-button media-mute-button" id="vjs-Fk-vJ5H4-0-2-trigger">
+<media-mute-button commandfor="vjs-fH0EWHVS-0-popup" class="media-button media-mute-button" id="vjs-I2MG-wVd-0-2-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">
@@ -58,13 +58,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-Fk-vJ5H4-0-2-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-I2MG-wVd-0-2-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-zg01E7C9-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-fH0EWHVS-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">

package/dist/dev/internal/skins/neutral-live-audio/template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/neutral-live-audio/template.ts"],"sourcesContent":["import { createTemplate } from '@videojs/utils/dom';\n\n/** Static template rendered from the finalized VJSC module graph. /\nexport const template =\n createTemplate(/ html */ `<media-container class=\"media-skin media-container audio-skin\" data-theme=\"neutral\" data-preset=\"live-audio\">\n<slot>\n</slot>\n<media-error-dialog class=\"audio-dialog-root\">\n<media-dialog-backdrop class=\"audio-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"audio-dialog-popup\">\n<div class=\"audio-dialog-content\">\n<media-dialog-title class=\"audio-dialog-title\">\n</media-dialog-title>\n<media-dialog-description class=\"audio-dialog-description\">\n</media-dialog-description>\n</div>\n<div class=\"audio-dialog-actions\">\n<media-dialog-close class=\"media-button audio-dialog-close\">\n</media-dialog-close>\n</div>\n</media-dialog-popup>\n</media-error-dialog>\n<media-controls visibility=\"always\">\n<media-controls-content class=\"audio-controls audio-controls-content\">\n<media-tooltip-group>\n<media-controls-group class=\"audio-controls-start\">\n<div class=\"audio-play-button\">\n<media-buffering-indicator class=\"media-buffering-indicator audio-play-button-buffering-indicator\">\n<media-icon family=\"neutral\" name=\"spinner\" class=\"media-buffering-indicator-spinner-icon\">\n</media-icon>\n</media-buffering-indicator>\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-Fk-~~vJ5H4~~-0-trigger\">\n<media-icon family=\"neutral\" name=\"restart\" class=\"media-button-icon media-play-button-restart-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"play\" class=\"media-button-icon media-play-button-play-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pause\" class=\"media-button-icon media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-Fk-~~vJ5H4~~-0-trigger\" boundary=\"viewport\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</div>\n<media-live-button class=\"media-button media-live-button\">\n</media-live-button>\n</media-controls-group>\n<div aria-hidden=\"true\" class=\"audio-controls-spacer\">\n</div>\n<media-controls-group class=\"audio-controls-end\">\n<media-mute-button commandfor=\"vjs-~~zg01E7C9~~-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-Fk-~~vJ5H4~~-0-2-trigger\">\n<media-icon family=\"neutral\" name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-low\" class=\"media-button-icon media-mute-button-low-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-Fk-~~vJ5H4~~-0-2-trigger\" delay=\"0\" sticky side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<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-~~zg01E7C9~~-0-popup\">\n<media-volume-slider class=\"media-slider media-volume-slider\" thumb-alignment=\"edge\" orientation=\"horizontal\">\n<media-slider-track class=\"media-slider-track\">\n<media-slider-fill class=\"media-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-slider-thumb media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n</media-controls-group>\n</media-tooltip-group>\n</media-controls-content>\n</media-controls>\n<media-hotkey keys=\"Space\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"k\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"m\" action=\"toggleMuted\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowUp\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowDown\" action=\"volumeStep\">\n</media-hotkey>\n<media-status-announcer class=\"media-status-announcer\">\n</media-status-announcer>\n</media-container>`);\n"],"mappings":";;;AAGA,MAAa,WACX,eAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAyFT"}
1	+ {"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/neutral-live-audio/template.ts"],"sourcesContent":["import { createTemplate } from '@videojs/utils/dom';\n\n/** Static template rendered from the finalized VJSC module graph. /\nexport const template =\n createTemplate(/ html */ `<media-container class=\"media-skin media-container audio-skin\" data-theme=\"neutral\" data-preset=\"live-audio\">\n<slot>\n</slot>\n<media-error-dialog class=\"audio-dialog-root\">\n<media-dialog-backdrop class=\"audio-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"audio-dialog-popup\">\n<div class=\"audio-dialog-content\">\n<media-dialog-title class=\"audio-dialog-title\">\n</media-dialog-title>\n<media-dialog-description class=\"audio-dialog-description\">\n</media-dialog-description>\n</div>\n<div class=\"audio-dialog-actions\">\n<media-dialog-close class=\"media-button audio-dialog-close\">\n</media-dialog-close>\n</div>\n</media-dialog-popup>\n</media-error-dialog>\n<media-controls visibility=\"always\">\n<media-controls-content class=\"audio-controls audio-controls-content\">\n<media-tooltip-group>\n<media-controls-group class=\"audio-controls-start\">\n<div class=\"audio-play-button\">\n<media-buffering-indicator class=\"media-buffering-indicator audio-play-button-buffering-indicator\">\n<media-icon family=\"neutral\" name=\"spinner\" class=\"media-buffering-indicator-spinner-icon\">\n</media-icon>\n</media-buffering-indicator>\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-I2MG-wVd-0-trigger\">\n<media-icon family=\"neutral\" name=\"restart\" class=\"media-button-icon media-play-button-restart-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"play\" class=\"media-button-icon media-play-button-play-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pause\" class=\"media-button-icon media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-I2MG-wVd-0-trigger\" boundary=\"viewport\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</div>\n<media-live-button class=\"media-button media-live-button\">\n</media-live-button>\n</media-controls-group>\n<div aria-hidden=\"true\" class=\"audio-controls-spacer\">\n</div>\n<media-controls-group class=\"audio-controls-end\">\n<media-mute-button commandfor=\"vjs-fH0EWHVS-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-I2MG-wVd-0-2-trigger\">\n<media-icon family=\"neutral\" name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-low\" class=\"media-button-icon media-mute-button-low-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-I2MG-wVd-0-2-trigger\" delay=\"0\" sticky side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<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-fH0EWHVS-0-popup\">\n<media-volume-slider class=\"media-slider media-volume-slider\" thumb-alignment=\"edge\" orientation=\"horizontal\">\n<media-slider-track class=\"media-slider-track\">\n<media-slider-fill class=\"media-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-slider-thumb media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n</media-controls-group>\n</media-tooltip-group>\n</media-controls-content>\n</media-controls>\n<media-hotkey keys=\"Space\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"k\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"m\" action=\"toggleMuted\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowUp\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowDown\" action=\"volumeStep\">\n</media-hotkey>\n<media-status-announcer class=\"media-status-announcer\">\n</media-status-announcer>\n</media-container>`);\n"],"mappings":";;;AAGA,MAAa,WACX,eAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAyFT"}

package/dist/dev/internal/skins/neutral-live-video/register.d.ts CHANGED Viewed

@@ -6,6 +6,7 @@ import "../../../define/ui/dialog-title.js";
 import "../../../define/ui/dialog-description.js";
 import "../../../define/ui/dialog-close.js";
 import "../../../define/ui/controls.js";
+import "../../../define/ui/buffering-indicator.js";
 import "../../../define/ui/controls-content.js";
 import "../../../define/ui/tooltip-group.js";
 import "../../../define/ui/slider-track.js";
@@ -27,7 +28,6 @@ import "../../../define/ui/volume-slider.js";
 import "../../../define/ui/airplay-button.js";
 import "../../../define/ui/hotkey.js";
 import "../../../define/ui/status-announcer.js";
-import "../../../define/ui/buffering-indicator.js";
 import "../../../define/ui/live-button.js";
 import "../../../define/ui/poster.js";
 import "../../../define/ui/title.js";

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

@@ -157,7 +157,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),
@@ -192,10 +192,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,
@@ -384,7 +392,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 {
@@ -407,9 +415,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);
     }
   }
@@ -691,8 +703,8 @@
     z-index: 20;
     transform-origin: top;
     padding-inline: calc(var(--media-spacing) * 4);
-    padding-top: calc(var(--media-spacing) * 2.5);
-    font-size: calc(var(--media-spacing) * 3.25);
+    padding-top: calc(var(--media-spacing) * 3.5);
+    font-size: calc(var(--media-spacing) * 4);
     letter-spacing: -.0125em;
     overflow-wrap: anywhere;
     color: var(--media-controls-foreground);
@@ -722,8 +734,7 @@
   @container media-root (width >= 28rem) {
     :where(.media-skin[data-theme="neutral"]) .media-title {
       padding-inline: calc(var(--media-spacing) * 6);
-      padding-top: calc(var(--media-spacing) * 4);
-      font-size: calc(var(--media-spacing) * 4.25);
+      padding-top: calc(var(--media-spacing) * 5);
     }
   }

package/dist/dev/internal/skins/neutral-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">
 <media-tooltip-group>
 <media-controls-group class="video-controls-start">
-<media-play-button class="media-button media-play-button" id="vjs-OeFZ9JA8-0-trigger">
+<media-play-button class="media-button media-play-button" id="vjs-jbUkCTd_-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">
@@ -45,7 +45,7 @@ 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-OeFZ9JA8-0-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-jbUkCTd_-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">
@@ -53,7 +53,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-tooltip>
 <media-live-button class="media-button media-live-button">
 </media-live-button>
-<media-mute-button commandfor="vjs-mDtO2tpE-0-popup" class="media-button media-mute-button" id="vjs-OeFZ9JA8-0-2-trigger">
+<media-mute-button commandfor="vjs-MF4qw3hR-0-popup" class="media-button media-mute-button" id="vjs-jbUkCTd_-0-2-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">
@@ -61,13 +61,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-OeFZ9JA8-0-2-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-jbUkCTd_-0-2-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="right" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover" id="vjs-mDtO2tpE-0-popup">
+<media-volume-popover open-on-hover delay="200" close-delay="100" side="right" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover" id="vjs-MF4qw3hR-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">
@@ -81,19 +81,19 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <div aria-hidden="true" class="video-controls-spacer">
 </div>
 <media-controls-group class="video-controls-end">
-<media-captions-button commandfor="vjs-V8IJ3MFn-0-popup" class="media-button media-captions-button" id="vjs-OeFZ9JA8-0-3-trigger">
+<media-captions-button commandfor="vjs-j3vmcnxZ-0-popup" class="media-button media-captions-button" id="vjs-jbUkCTd_-0-3-trigger">
 <media-icon family="neutral" name="captions-off" class="media-button-icon media-captions-button-off-icon">
 </media-icon>
 <media-icon family="neutral" name="captions-on" class="media-button-icon media-captions-button-on-icon">
 </media-icon>
 </media-captions-button>
-<media-tooltip trigger="vjs-OeFZ9JA8-0-3-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-jbUkCTd_-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-V8IJ3MFn-0-popup">
+<media-menu side="top" align="center" boundary="viewport" class="media-popup media-popup-surface media-menu-popup" id="vjs-j3vmcnxZ-0-popup">
 <media-menu-content class="media-menu-content">
 <media-captions-radio-group class="media-menu-radio-group">
 <template>
@@ -109,49 +109,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-OeFZ9JA8-0-4-trigger">
+<media-cast-button class="media-button media-cast-button" id="vjs-jbUkCTd_-0-4-trigger">
 <media-icon family="neutral" name="cast-enter" class="media-button-icon media-cast-button-enter-icon">
 </media-icon>
 <media-icon family="neutral" name="cast-exit" class="media-button-icon media-cast-button-exit-icon">
 </media-icon>
 </media-cast-button>
-<media-tooltip trigger="vjs-OeFZ9JA8-0-4-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-jbUkCTd_-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-OeFZ9JA8-0-5-trigger">
+<media-airplay-button class="media-button media-airplay-button" id="vjs-jbUkCTd_-0-5-trigger">
 <media-icon family="neutral" name="airplay-enter" class="media-button-icon media-airplay-button-enter-icon">
 </media-icon>
 <media-icon family="neutral" name="airplay-exit" class="media-button-icon media-airplay-button-exit-icon">
 </media-icon>
 </media-airplay-button>
-<media-tooltip trigger="vjs-OeFZ9JA8-0-5-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-jbUkCTd_-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-OeFZ9JA8-0-6-trigger">
+<media-pip-button class="media-button media-pip-button" id="vjs-jbUkCTd_-0-6-trigger">
 <media-icon family="neutral" name="pip-enter" class="media-button-icon media-pip-button-enter-icon">
 </media-icon>
 <media-icon family="neutral" name="pip-exit" class="media-button-icon media-pip-button-exit-icon">
 </media-icon>
 </media-pip-button>
-<media-tooltip trigger="vjs-OeFZ9JA8-0-6-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-jbUkCTd_-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-OeFZ9JA8-0-7-trigger">
+<media-fullscreen-button class="media-button media-fullscreen-button" id="vjs-jbUkCTd_-0-7-trigger">
 <media-icon family="neutral" name="fullscreen-enter" class="media-button-icon media-fullscreen-button-enter-icon">
 </media-icon>
 <media-icon family="neutral" name="fullscreen-exit" class="media-button-icon media-fullscreen-button-exit-icon">
 </media-icon>
 </media-fullscreen-button>
-<media-tooltip trigger="vjs-OeFZ9JA8-0-7-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-jbUkCTd_-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/dev/internal/skins/neutral-live-video/template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/neutral-live-video/template.ts"],"sourcesContent":["import { createTemplate } from '@videojs/utils/dom';\n\n/** Static template rendered from the finalized VJSC module graph. /\nexport const template =\n createTemplate(/ html */ `<media-container class=\"media-skin media-container video-skin\" data-theme=\"neutral\" data-preset=\"live-video\">\n<slot>\n</slot>\n<media-poster class=\"media-poster\">\n<slot name=\"poster\">\n<img alt=\"\" decoding=\"async\" class=\"media-poster-image\">\n</slot>\n</media-poster>\n<media-buffering-indicator class=\"media-buffering-indicator\">\n<media-icon family=\"neutral\" name=\"spinner\" class=\"media-buffering-indicator-spinner-icon\">\n</media-icon>\n</media-buffering-indicator>\n<media-error-dialog class=\"media-dialog-root\">\n<media-dialog-backdrop class=\"media-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"media-dialog-popup\">\n<div class=\"media-dialog-content\">\n<media-dialog-title class=\"media-dialog-title\">\n</media-dialog-title>\n<media-dialog-description class=\"media-dialog-description\">\n</media-dialog-description>\n</div>\n<div class=\"media-dialog-actions\">\n<media-dialog-close class=\"media-button media-dialog-close\">\n</media-dialog-close>\n</div>\n</media-dialog-popup>\n</media-error-dialog>\n<media-title class=\"media-title\">\n</media-title>\n<media-controls>\n<media-controls-backdrop class=\"video-controls-backdrop\">\n</media-controls-backdrop>\n<media-controls-content class=\"video-controls video-controls-content\">\n<media-tooltip-group>\n<media-controls-group class=\"video-controls-start\">\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-OeFZ9JA8-0-trigger\">\n<media-icon family=\"neutral\" name=\"restart\" class=\"media-button-icon media-play-button-restart-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"play\" class=\"media-button-icon media-play-button-play-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pause\" class=\"media-button-icon media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-OeFZ9JA8-0-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-live-button class=\"media-button media-live-button\">\n</media-live-button>\n<media-mute-button commandfor=\"vjs-mDtO2tpE-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-OeFZ9JA8-0-2-trigger\">\n<media-icon family=\"neutral\" name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-low\" class=\"media-button-icon media-mute-button-low-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-OeFZ9JA8-0-2-trigger\" delay=\"0\" sticky side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-volume-popover open-on-hover delay=\"200\" close-delay=\"100\" side=\"right\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover\" id=\"vjs-mDtO2tpE-0-popup\">\n<media-volume-slider class=\"media-slider media-volume-slider\" thumb-alignment=\"edge\" orientation=\"horizontal\">\n<media-slider-track class=\"media-slider-track\">\n<media-slider-fill class=\"media-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-slider-thumb media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n</media-controls-group>\n<div aria-hidden=\"true\" class=\"video-controls-spacer\">\n</div>\n<media-controls-group class=\"video-controls-end\">\n<media-captions-button commandfor=\"vjs-V8IJ3MFn-0-popup\" class=\"media-button media-captions-button\" id=\"vjs-OeFZ9JA8-0-3-trigger\">\n<media-icon family=\"neutral\" name=\"captions-off\" class=\"media-button-icon media-captions-button-off-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"captions-on\" class=\"media-button-icon media-captions-button-on-icon\">\n</media-icon>\n</media-captions-button>\n<media-tooltip trigger=\"vjs-OeFZ9JA8-0-3-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-menu side=\"top\" align=\"center\" boundary=\"viewport\" class=\"media-popup media-popup-surface media-menu-popup\" id=\"vjs-V8IJ3MFn-0-popup\">\n<media-menu-content class=\"media-menu-content\">\n<media-captions-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon family=\"neutral\" name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-captions-radio-group>\n</media-menu-content>\n</media-menu>\n<media-cast-button class=\"media-button media-cast-button\" id=\"vjs-OeFZ9JA8-0-4-trigger\">\n<media-icon family=\"neutral\" name=\"cast-enter\" class=\"media-button-icon media-cast-button-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"cast-exit\" class=\"media-button-icon media-cast-button-exit-icon\">\n</media-icon>\n</media-cast-button>\n<media-tooltip trigger=\"vjs-OeFZ9JA8-0-4-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-airplay-button class=\"media-button media-airplay-button\" id=\"vjs-OeFZ9JA8-0-5-trigger\">\n<media-icon family=\"neutral\" name=\"airplay-enter\" class=\"media-button-icon media-airplay-button-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"airplay-exit\" class=\"media-button-icon media-airplay-button-exit-icon\">\n</media-icon>\n</media-airplay-button>\n<media-tooltip trigger=\"vjs-OeFZ9JA8-0-5-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-pip-button class=\"media-button media-pip-button\" id=\"vjs-OeFZ9JA8-0-6-trigger\">\n<media-icon family=\"neutral\" name=\"pip-enter\" class=\"media-button-icon media-pip-button-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pip-exit\" class=\"media-button-icon media-pip-button-exit-icon\">\n</media-icon>\n</media-pip-button>\n<media-tooltip trigger=\"vjs-OeFZ9JA8-0-6-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-fullscreen-button class=\"media-button media-fullscreen-button\" id=\"vjs-OeFZ9JA8-0-7-trigger\">\n<media-icon family=\"neutral\" name=\"fullscreen-enter\" class=\"media-button-icon media-fullscreen-button-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"fullscreen-exit\" class=\"media-button-icon media-fullscreen-button-exit-icon\">\n</media-icon>\n</media-fullscreen-button>\n<media-tooltip trigger=\"vjs-OeFZ9JA8-0-7-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</media-controls-group>\n</media-tooltip-group>\n</media-controls-content>\n</media-controls>\n<media-hotkey keys=\"Space\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"k\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"m\" action=\"toggleMuted\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowUp\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowDown\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"f\" action=\"toggleFullscreen\">\n</media-hotkey>\n<media-hotkey keys=\"c\" action=\"toggleSubtitles\">\n</media-hotkey>\n<media-hotkey keys=\"i\" action=\"togglePictureInPicture\">\n</media-hotkey>\n<media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\">\n</media-gesture>\n<media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\">\n</media-gesture>\n<media-status-announcer class=\"media-status-announcer\">\n</media-status-announcer>\n<div class=\"video-status-indicators\">\n<media-volume-indicator class=\"media-indicator media-volume-indicator\">\n<media-volume-indicator-fill class=\"media-indicator-content media-volume-indicator-fill\">\n<media-icon family=\"neutral\" name=\"volume-high\" class=\"media-volume-indicator-high-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-low\" class=\"media-volume-indicator-low-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-off\" class=\"media-volume-indicator-off-icon\">\n</media-icon>\n<media-volume-indicator-value class=\"media-volume-indicator-value\">\n</media-volume-indicator-value>\n</media-volume-indicator-fill>\n</media-volume-indicator>\n<media-status-indicator actions=\"toggleSubtitles,toggleFullscreen,togglePictureInPicture\" class=\"media-indicator media-status-indicator\">\n<div class=\"media-indicator-content media-status-indicator-content\">\n<media-icon family=\"neutral\" name=\"captions-on\" class=\"media-status-indicator-captions-on-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"captions-off\" class=\"media-status-indicator-captions-off-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"fullscreen-enter\" class=\"media-status-indicator-fullscreen-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"fullscreen-exit\" class=\"media-status-indicator-fullscreen-exit-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pip-enter\" class=\"media-status-indicator-pip-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pip-exit\" class=\"media-status-indicator-pip-exit-icon\">\n</media-icon>\n<media-status-indicator-value class=\"media-status-indicator-value\">\n</media-status-indicator-value>\n</div>\n</media-status-indicator>\n<media-status-indicator actions=\"togglePaused\" class=\"media-playback-status-indicator\">\n<media-icon family=\"neutral\" name=\"play\" class=\"media-playback-status-indicator-play-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pause\" class=\"media-playback-status-indicator-pause-icon\">\n</media-icon>\n</media-status-indicator>\n</div>\n</media-container>`);\n"],"mappings":";;;AAGA,MAAa,WACX,eAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA8NT"}
1	+ {"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/neutral-live-video/template.ts"],"sourcesContent":["import { createTemplate } from '@videojs/utils/dom';\n\n/** Static template rendered from the finalized VJSC module graph. /\nexport const template =\n createTemplate(/ html */ `<media-container class=\"media-skin media-container video-skin\" data-theme=\"neutral\" data-preset=\"live-video\">\n<slot>\n</slot>\n<media-poster class=\"media-poster\">\n<slot name=\"poster\">\n<img alt=\"\" decoding=\"async\" class=\"media-poster-image\">\n</slot>\n</media-poster>\n<media-buffering-indicator class=\"media-buffering-indicator\">\n<media-icon family=\"neutral\" name=\"spinner\" class=\"media-buffering-indicator-spinner-icon\">\n</media-icon>\n</media-buffering-indicator>\n<media-error-dialog class=\"media-dialog-root\">\n<media-dialog-backdrop class=\"media-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"media-dialog-popup\">\n<div class=\"media-dialog-content\">\n<media-dialog-title class=\"media-dialog-title\">\n</media-dialog-title>\n<media-dialog-description class=\"media-dialog-description\">\n</media-dialog-description>\n</div>\n<div class=\"media-dialog-actions\">\n<media-dialog-close class=\"media-button media-dialog-close\">\n</media-dialog-close>\n</div>\n</media-dialog-popup>\n</media-error-dialog>\n<media-title class=\"media-title\">\n</media-title>\n<media-controls>\n<media-controls-backdrop class=\"video-controls-backdrop\">\n</media-controls-backdrop>\n<media-controls-content class=\"video-controls video-controls-content\">\n<media-tooltip-group>\n<media-controls-group class=\"video-controls-start\">\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-jbUkCTd_-0-trigger\">\n<media-icon family=\"neutral\" name=\"restart\" class=\"media-button-icon media-play-button-restart-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"play\" class=\"media-button-icon media-play-button-play-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pause\" class=\"media-button-icon media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-live-button class=\"media-button media-live-button\">\n</media-live-button>\n<media-mute-button commandfor=\"vjs-MF4qw3hR-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-jbUkCTd_-0-2-trigger\">\n<media-icon family=\"neutral\" name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-low\" class=\"media-button-icon media-mute-button-low-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-2-trigger\" delay=\"0\" sticky side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-volume-popover open-on-hover delay=\"200\" close-delay=\"100\" side=\"right\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover\" id=\"vjs-MF4qw3hR-0-popup\">\n<media-volume-slider class=\"media-slider media-volume-slider\" thumb-alignment=\"edge\" orientation=\"horizontal\">\n<media-slider-track class=\"media-slider-track\">\n<media-slider-fill class=\"media-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-slider-thumb media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n</media-controls-group>\n<div aria-hidden=\"true\" class=\"video-controls-spacer\">\n</div>\n<media-controls-group class=\"video-controls-end\">\n<media-captions-button commandfor=\"vjs-j3vmcnxZ-0-popup\" class=\"media-button media-captions-button\" id=\"vjs-jbUkCTd_-0-3-trigger\">\n<media-icon family=\"neutral\" name=\"captions-off\" class=\"media-button-icon media-captions-button-off-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"captions-on\" class=\"media-button-icon media-captions-button-on-icon\">\n</media-icon>\n</media-captions-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-3-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-menu side=\"top\" align=\"center\" boundary=\"viewport\" class=\"media-popup media-popup-surface media-menu-popup\" id=\"vjs-j3vmcnxZ-0-popup\">\n<media-menu-content class=\"media-menu-content\">\n<media-captions-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon family=\"neutral\" name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-captions-radio-group>\n</media-menu-content>\n</media-menu>\n<media-cast-button class=\"media-button media-cast-button\" id=\"vjs-jbUkCTd_-0-4-trigger\">\n<media-icon family=\"neutral\" name=\"cast-enter\" class=\"media-button-icon media-cast-button-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"cast-exit\" class=\"media-button-icon media-cast-button-exit-icon\">\n</media-icon>\n</media-cast-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-4-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-airplay-button class=\"media-button media-airplay-button\" id=\"vjs-jbUkCTd_-0-5-trigger\">\n<media-icon family=\"neutral\" name=\"airplay-enter\" class=\"media-button-icon media-airplay-button-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"airplay-exit\" class=\"media-button-icon media-airplay-button-exit-icon\">\n</media-icon>\n</media-airplay-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-5-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-pip-button class=\"media-button media-pip-button\" id=\"vjs-jbUkCTd_-0-6-trigger\">\n<media-icon family=\"neutral\" name=\"pip-enter\" class=\"media-button-icon media-pip-button-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pip-exit\" class=\"media-button-icon media-pip-button-exit-icon\">\n</media-icon>\n</media-pip-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-6-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-fullscreen-button class=\"media-button media-fullscreen-button\" id=\"vjs-jbUkCTd_-0-7-trigger\">\n<media-icon family=\"neutral\" name=\"fullscreen-enter\" class=\"media-button-icon media-fullscreen-button-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"fullscreen-exit\" class=\"media-button-icon media-fullscreen-button-exit-icon\">\n</media-icon>\n</media-fullscreen-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-7-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</media-controls-group>\n</media-tooltip-group>\n</media-controls-content>\n</media-controls>\n<media-hotkey keys=\"Space\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"k\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"m\" action=\"toggleMuted\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowUp\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowDown\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"f\" action=\"toggleFullscreen\">\n</media-hotkey>\n<media-hotkey keys=\"c\" action=\"toggleSubtitles\">\n</media-hotkey>\n<media-hotkey keys=\"i\" action=\"togglePictureInPicture\">\n</media-hotkey>\n<media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\">\n</media-gesture>\n<media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\">\n</media-gesture>\n<media-status-announcer class=\"media-status-announcer\">\n</media-status-announcer>\n<div class=\"video-status-indicators\">\n<media-volume-indicator class=\"media-indicator media-volume-indicator\">\n<media-volume-indicator-fill class=\"media-indicator-content media-volume-indicator-fill\">\n<media-icon family=\"neutral\" name=\"volume-high\" class=\"media-volume-indicator-high-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-low\" class=\"media-volume-indicator-low-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-off\" class=\"media-volume-indicator-off-icon\">\n</media-icon>\n<media-volume-indicator-value class=\"media-volume-indicator-value\">\n</media-volume-indicator-value>\n</media-volume-indicator-fill>\n</media-volume-indicator>\n<media-status-indicator actions=\"toggleSubtitles,toggleFullscreen,togglePictureInPicture\" class=\"media-indicator media-status-indicator\">\n<div class=\"media-indicator-content media-status-indicator-content\">\n<media-icon family=\"neutral\" name=\"captions-on\" class=\"media-status-indicator-captions-on-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"captions-off\" class=\"media-status-indicator-captions-off-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"fullscreen-enter\" class=\"media-status-indicator-fullscreen-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"fullscreen-exit\" class=\"media-status-indicator-fullscreen-exit-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pip-enter\" class=\"media-status-indicator-pip-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pip-exit\" class=\"media-status-indicator-pip-exit-icon\">\n</media-icon>\n<media-status-indicator-value class=\"media-status-indicator-value\">\n</media-status-indicator-value>\n</div>\n</media-status-indicator>\n<media-status-indicator actions=\"togglePaused\" class=\"media-playback-status-indicator\">\n<media-icon family=\"neutral\" name=\"play\" class=\"media-playback-status-indicator-play-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pause\" class=\"media-playback-status-indicator-pause-icon\">\n</media-icon>\n</media-status-indicator>\n</div>\n</media-container>`);\n"],"mappings":";;;AAGA,MAAa,WACX,eAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA8NT"}

package/dist/dev/internal/skins/neutral-video/register.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ import "../../../define/ui/dialog-title.js";
 import "../../../define/ui/dialog-description.js";
 import "../../../define/ui/dialog-close.js";
 import "../../../define/ui/controls.js";
+import "../../../define/ui/buffering-indicator.js";
 import "../../../define/ui/controls-content.js";
 import "../../../define/ui/tooltip-group.js";
 import "../../../define/ui/time-slider.js";
@@ -39,7 +40,6 @@ import "../../../define/ui/volume-slider.js";
 import "../../../define/ui/airplay-button.js";
 import "../../../define/ui/hotkey.js";
 import "../../../define/ui/status-announcer.js";
-import "../../../define/ui/buffering-indicator.js";
 import "../../../define/ui/poster.js";
 import "../../../define/ui/title.js";
 import "../../../define/ui/controls-backdrop.js";

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

@@ -157,7 +157,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),
@@ -192,10 +192,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,
@@ -384,7 +392,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 {
@@ -407,9 +415,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);
     }
   }
@@ -691,8 +703,8 @@
     z-index: 20;
     transform-origin: top;
     padding-inline: calc(var(--media-spacing) * 4);
-    padding-top: calc(var(--media-spacing) * 2.5);
-    font-size: calc(var(--media-spacing) * 3.25);
+    padding-top: calc(var(--media-spacing) * 3.5);
+    font-size: calc(var(--media-spacing) * 4);
     letter-spacing: -.0125em;
     overflow-wrap: anywhere;
     color: var(--media-controls-foreground);
@@ -722,8 +734,7 @@
   @container media-root (width >= 28rem) {
     :where(.media-skin[data-theme="neutral"]) .media-title {
       padding-inline: calc(var(--media-spacing) * 6);
-      padding-top: calc(var(--media-spacing) * 4);
-      font-size: calc(var(--media-spacing) * 4.25);
+      padding-top: calc(var(--media-spacing) * 5);
     }
   }
@@ -1812,6 +1823,12 @@
     opacity: 1;
   }
+  :where(.media-skin[data-theme="neutral"]) .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="neutral"]) .media-time-slider-chapter {
     --media-chapter-inset-end: .5;
     --media-chapter-inset-start: .5;