@videojs/html 10.0.0 → 10.1.0

package/dist/dev/internal/skins/compat-live-audio/template.js

@@ -17,12 +17,13 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-dialog-popup>
 </media-error-dialog>
 <media-controls visibility="always">
+<media-buffering-indicator class="video-controls-buffering">
 <media-controls-content class="video-controls-content audio-controls-content">
 <media-tooltip-group>
 <div class="video-controls-bottom audio-controls-bottom">
 <media-controls-group class="video-controls-row">
 <media-controls-group class="video-controls-group video-controls-start">
-<media-play-button class="media-button media-play-button" id="vjs-q5W_U_lJ-0-trigger">
+<media-play-button class="media-button media-play-button" id="vjs-vkMVyeox-0-trigger">
 <media-icon family="compat" name="restart" class="media-button-icon-base media-play-button-restart-icon">
 </media-icon>
 <media-icon family="compat" name="play" class="media-button-icon-base media-play-button-play-icon">
@@ -30,7 +31,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon family="compat" name="pause" class="media-button-icon-base media-play-button-pause-icon">
 </media-icon>
 </media-play-button>
-<media-tooltip trigger="vjs-q5W_U_lJ-0-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-vkMVyeox-0-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
@@ -43,31 +44,31 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-live-button>
 </media-controls-group>
 <media-controls-group class="video-controls-group">
-<media-captions-button class="media-button media-captions-button" id="vjs-q5W_U_lJ-0-2-trigger">
+<media-captions-button class="media-button media-captions-button" id="vjs-vkMVyeox-0-2-trigger">
 <media-icon family="compat" name="captions-off" class="media-button-icon media-captions-button-off-icon">
 </media-icon>
 <media-icon family="compat" name="captions-on" class="media-button-icon media-captions-button-on-icon">
 </media-icon>
 </media-captions-button>
-<media-tooltip trigger="vjs-q5W_U_lJ-0-2-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-vkMVyeox-0-2-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-mute-button commandfor="vjs-KxTx8gmk-0-popup" class="media-button media-mute-button" id="vjs-q5W_U_lJ-0-3-trigger">
+<media-mute-button commandfor="vjs-UWQs13wo-0-popup" class="media-button media-mute-button" id="vjs-vkMVyeox-0-3-trigger">
 <media-icon family="compat" name="volume-off" class="media-button-icon media-mute-button-off-icon">
 </media-icon>
 <media-icon family="compat" name="volume-high" class="media-button-icon media-mute-button-high-icon">
 </media-icon>
 </media-mute-button>
-<media-tooltip trigger="vjs-q5W_U_lJ-0-3-trigger" delay="0" disabled side="top" sticky class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-vkMVyeox-0-3-trigger" delay="0" disabled side="top" sticky class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
 <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-volume-popover-popup" id="vjs-KxTx8gmk-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-volume-popover-popup" id="vjs-UWQs13wo-0-popup">
 <media-volume-slider class="media-volume-slider" orientation="vertical" thumb-alignment="edge">
 <media-slider-track class="media-volume-slider-track">
 <media-slider-fill class="media-volume-slider-fill">
@@ -77,13 +78,13 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-slider-thumb>
 </media-volume-slider>
 </media-volume-popover>
-<media-airplay-button class="media-button media-airplay-button" id="vjs-q5W_U_lJ-0-4-trigger">
+<media-airplay-button class="media-button media-airplay-button" id="vjs-vkMVyeox-0-4-trigger">
 <media-icon family="compat" name="airplay-enter" class="media-button-icon media-airplay-button-enter-icon">
 </media-icon>
 <media-icon family="compat" name="airplay-exit" class="media-button-icon media-airplay-button-exit-icon">
 </media-icon>
 </media-airplay-button>
-<media-tooltip trigger="vjs-q5W_U_lJ-0-4-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-vkMVyeox-0-4-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
@@ -94,6 +95,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </div>
 </media-tooltip-group>
 </media-controls-content>
+</media-buffering-indicator>
 </media-controls>
 <media-hotkey keys="Space" action="togglePaused">
 </media-hotkey>

package/dist/dev/internal/skins/compat-live-audio/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/compat-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 media-audio\" data-theme=\"compat\" data-preset=\"live-audio\">\n<slot>\n</slot>\n<media-error-dialog>\n<media-dialog-backdrop class=\"media-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"media-dialog-popup\">\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<media-dialog-close class=\"media-button media-dialog-close\">\n</media-dialog-close>\n</media-dialog-popup>\n</media-error-dialog>\n<media-controls visibility=\"always\">\n<media-controls-content class=\"video-controls-content audio-controls-content\">\n<media-tooltip-group>\n<div class=\"video-controls-bottom audio-controls-bottom\">\n<media-controls-group class=\"video-controls-row\">\n<media-controls-group class=\"video-controls-group video-controls-start\">\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-q5W_U_lJ-0-trigger\">\n<media-icon family=\"compat\" name=\"restart\" class=\"media-button-icon-base media-play-button-restart-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"play\" class=\"media-button-icon-base media-play-button-play-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pause\" class=\"media-button-icon-base media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-q5W_U_lJ-0-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\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<div aria-hidden=\"true\" class=\"media-live-button-dot\">\n</div>\n<media-text token=\"live.badge\">Live</media-text>\n</media-live-button>\n</media-controls-group>\n<media-controls-group class=\"video-controls-group\">\n<media-captions-button class=\"media-button media-captions-button\" id=\"vjs-q5W_U_lJ-0-2-trigger\">\n<media-icon family=\"compat\" name=\"captions-off\" class=\"media-button-icon media-captions-button-off-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"captions-on\" class=\"media-button-icon media-captions-button-on-icon\">\n</media-icon>\n</media-captions-button>\n<media-tooltip trigger=\"vjs-q5W_U_lJ-0-2-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\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-mute-button commandfor=\"vjs-KxTx8gmk-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-q5W_U_lJ-0-3-trigger\">\n<media-icon family=\"compat\" name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-q5W_U_lJ-0-3-trigger\" delay=\"0\" disabled side=\"top\" sticky class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\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=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-volume-popover-popup\" id=\"vjs-KxTx8gmk-0-popup\">\n<media-volume-slider class=\"media-volume-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n<media-slider-track class=\"media-volume-slider-track\">\n<media-slider-fill class=\"media-volume-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n<media-airplay-button class=\"media-button media-airplay-button\" id=\"vjs-q5W_U_lJ-0-4-trigger\">\n<media-icon family=\"compat\" name=\"airplay-enter\" class=\"media-button-icon media-airplay-button-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"airplay-exit\" class=\"media-button-icon media-airplay-button-exit-icon\">\n</media-icon>\n</media-airplay-button>\n<media-tooltip trigger=\"vjs-q5W_U_lJ-0-4-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\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-controls-group>\n</div>\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA0GT"}
+{"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/compat-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 media-audio\" data-theme=\"compat\" data-preset=\"live-audio\">\n<slot>\n</slot>\n<media-error-dialog>\n<media-dialog-backdrop class=\"media-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"media-dialog-popup\">\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<media-dialog-close class=\"media-button media-dialog-close\">\n</media-dialog-close>\n</media-dialog-popup>\n</media-error-dialog>\n<media-controls visibility=\"always\">\n<media-buffering-indicator class=\"video-controls-buffering\">\n<media-controls-content class=\"video-controls-content audio-controls-content\">\n<media-tooltip-group>\n<div class=\"video-controls-bottom audio-controls-bottom\">\n<media-controls-group class=\"video-controls-row\">\n<media-controls-group class=\"video-controls-group video-controls-start\">\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-vkMVyeox-0-trigger\">\n<media-icon family=\"compat\" name=\"restart\" class=\"media-button-icon-base media-play-button-restart-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"play\" class=\"media-button-icon-base media-play-button-play-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pause\" class=\"media-button-icon-base media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-vkMVyeox-0-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\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<div aria-hidden=\"true\" class=\"media-live-button-dot\">\n</div>\n<media-text token=\"live.badge\">Live</media-text>\n</media-live-button>\n</media-controls-group>\n<media-controls-group class=\"video-controls-group\">\n<media-captions-button class=\"media-button media-captions-button\" id=\"vjs-vkMVyeox-0-2-trigger\">\n<media-icon family=\"compat\" name=\"captions-off\" class=\"media-button-icon media-captions-button-off-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"captions-on\" class=\"media-button-icon media-captions-button-on-icon\">\n</media-icon>\n</media-captions-button>\n<media-tooltip trigger=\"vjs-vkMVyeox-0-2-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\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-mute-button commandfor=\"vjs-UWQs13wo-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-vkMVyeox-0-3-trigger\">\n<media-icon family=\"compat\" name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-vkMVyeox-0-3-trigger\" delay=\"0\" disabled side=\"top\" sticky class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\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=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-volume-popover-popup\" id=\"vjs-UWQs13wo-0-popup\">\n<media-volume-slider class=\"media-volume-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n<media-slider-track class=\"media-volume-slider-track\">\n<media-slider-fill class=\"media-volume-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n<media-airplay-button class=\"media-button media-airplay-button\" id=\"vjs-vkMVyeox-0-4-trigger\">\n<media-icon family=\"compat\" name=\"airplay-enter\" class=\"media-button-icon media-airplay-button-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"airplay-exit\" class=\"media-button-icon media-airplay-button-exit-icon\">\n</media-icon>\n</media-airplay-button>\n<media-tooltip trigger=\"vjs-vkMVyeox-0-4-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\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-controls-group>\n</div>\n</media-tooltip-group>\n</media-controls-content>\n</media-buffering-indicator>\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA4GT"}

package/dist/dev/internal/skins/compat-live-video/register.d.ts

@@ -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/slider-track.js";
@@ -28,7 +29,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/compat-live-video/skin.css

@@ -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);
     }
   }
 
@@ -482,7 +486,7 @@
 
   :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .media-title {
     pointer-events: none;
-    inset-inline-start: calc(var(--media-spacing) * 6);
+    inset-inline-start: calc(var(--media-spacing) * 5);
     inset-inline-end: calc(var(--media-spacing) * 34);
     top: calc(var(--media-spacing) * 4);
     z-index: 20;
@@ -531,6 +535,12 @@
     }
   }
 
+  @container media-root (width < 42rem) {
+    :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .media-title {
+      top: calc(var(--media-spacing) * 3.5);
+    }
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .media-poster {
     width: 100%;
     height: 100%;
@@ -551,6 +561,7 @@
 
   :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .media-buffering-indicator {
     pointer-events: none;
+    z-index: 20;
     place-items: center;
     display: grid;
     position: absolute;
@@ -1378,6 +1389,24 @@
     }
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-backdrop {
+    pointer-events: none;
+    z-index: 10;
+    background-image: linear-gradient(to top, #000000b3, #0003, #00000080);
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(:where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-buffering):not([data-visible]) .video-controls-backdrop:not([data-visible]) {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-backdrop {
+      background-image: none;
+    }
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-bottom {
     pointer-events: auto;
     inset-inline: calc(var(--media-spacing) * 2);
@@ -1424,6 +1453,10 @@
     }
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-buffering {
+    display: contents;
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-center {
     pointer-events: auto;
     align-items: center;
@@ -1445,6 +1478,10 @@
     transition-duration: var(--media-duration);
   }
 
+  :where(:where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-buffering)[data-visible] .video-controls-center {
+    display: none !important;
+  }
+
   @media (prefers-reduced-motion: no-preference) {
     :where(:where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-content):not([data-visible]) .video-controls-center {
       transform: translate(-50%, -50%) scale(.9);
@@ -1620,6 +1657,22 @@
     }
   }
 
+  @container media-root (width < 42rem) {
+    :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-top {
+      inset-inline-end: calc(var(--media-spacing) * 2);
+      top: calc(var(--media-spacing) * 2);
+    }
+
+    @media (forced-colors: active) {
+      :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-top {
+        padding-inline: calc(var(--media-spacing) * 2);
+        padding-block: calc(var(--media-spacing) * 2);
+        inset-inline-end: 0;
+        top: 0;
+      }
+    }
+  }
+
   @media (forced-colors: active) {
     :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-video-bottom {
       padding-inline: calc(var(--media-spacing) * 2);
@@ -1765,23 +1818,6 @@
     display: block;
   }
 
-  :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-backdrop {
-    pointer-events: none;
-    background-image: linear-gradient(to top, #000000b3, #0003, #00000080);
-    position: absolute;
-    inset: 0;
-  }
-
-  :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-backdrop:not([data-visible]) {
-    display: none;
-  }
-
-  @media (forced-colors: active) {
-    :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .video-controls-backdrop {
-      background-image: none;
-    }
-  }
-
   :where(.media-skin[data-theme="compat"][data-preset="live-video"]) .media-container, :where(.media-skin[data-theme="compat"][data-preset="live-video"]).media-container {
     border-radius: var(--media-video-border-radius);
     width: 100%;
@@ -1955,7 +1991,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),
@@ -1990,10 +2026,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/dev/internal/skins/compat-live-video/template.js

@@ -28,54 +28,55 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-title class="media-title">
 </media-title>
 <media-controls>
+<media-buffering-indicator class="video-controls-buffering">
 <media-controls-backdrop class="video-controls-backdrop">
 </media-controls-backdrop>
 <media-controls-content class="video-controls-content">
 <media-tooltip-group>
 <media-controls-group class="video-controls-top">
-<media-airplay-button class="media-button media-airplay-button" id="vjs-DzQ7xA3l-0-trigger">
+<media-airplay-button class="media-button media-airplay-button" id="vjs-WvnGKrjP-0-trigger">
 <media-icon family="compat" name="airplay-enter" class="media-button-icon media-airplay-button-enter-icon">
 </media-icon>
 <media-icon family="compat" name="airplay-exit" class="media-button-icon media-airplay-button-exit-icon">
 </media-icon>
 </media-airplay-button>
-<media-tooltip trigger="vjs-DzQ7xA3l-0-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup">
+<media-tooltip trigger="vjs-WvnGKrjP-0-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-cast-button class="media-button media-cast-button" id="vjs-DzQ7xA3l-0-2-trigger">
+<media-cast-button class="media-button media-cast-button" id="vjs-WvnGKrjP-0-2-trigger">
 <media-icon family="compat" name="cast-enter" class="media-button-icon media-cast-button-enter-icon">
 </media-icon>
 <media-icon family="compat" name="cast-exit" class="media-button-icon media-cast-button-exit-icon">
 </media-icon>
 </media-cast-button>
-<media-tooltip trigger="vjs-DzQ7xA3l-0-2-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup">
+<media-tooltip trigger="vjs-WvnGKrjP-0-2-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup">
 <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-DzQ7xA3l-0-3-trigger">
+<media-pip-button class="media-button media-pip-button" id="vjs-WvnGKrjP-0-3-trigger">
 <media-icon family="compat" name="pip-enter" class="media-button-icon media-pip-button-enter-icon">
 </media-icon>
 <media-icon family="compat" name="pip-exit" class="media-button-icon media-pip-button-exit-icon">
 </media-icon>
 </media-pip-button>
-<media-tooltip trigger="vjs-DzQ7xA3l-0-3-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup">
+<media-tooltip trigger="vjs-WvnGKrjP-0-3-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup">
 <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-DzQ7xA3l-0-4-trigger">
+<media-fullscreen-button class="media-button media-fullscreen-button" id="vjs-WvnGKrjP-0-4-trigger">
 <media-icon family="compat" name="fullscreen-enter" class="media-button-icon media-fullscreen-button-enter-icon">
 </media-icon>
 <media-icon family="compat" name="fullscreen-exit" class="media-button-icon media-fullscreen-button-exit-icon">
 </media-icon>
 </media-fullscreen-button>
-<media-tooltip trigger="vjs-DzQ7xA3l-0-4-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup">
+<media-tooltip trigger="vjs-WvnGKrjP-0-4-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
@@ -83,7 +84,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-tooltip>
 </media-controls-group>
 <media-controls-group class="video-controls-center">
-<media-play-button class="media-button media-play-button video-controls-center-button video-controls-center-play" id="vjs-DzQ7xA3l-0-5-trigger">
+<media-play-button class="media-button media-play-button video-controls-center-button video-controls-center-play" id="vjs-WvnGKrjP-0-5-trigger">
 <media-icon family="compat" name="restart" class="media-button-icon-base media-play-button-restart-icon video-controls-center-play-icon">
 </media-icon>
 <media-icon family="compat" name="play" class="media-button-icon-base media-play-button-play-icon video-controls-center-play-icon">
@@ -91,7 +92,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon family="compat" name="pause" class="media-button-icon-base media-play-button-pause-icon video-controls-center-play-icon">
 </media-icon>
 </media-play-button>
-<media-tooltip trigger="vjs-DzQ7xA3l-0-5-trigger" disabled side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-WvnGKrjP-0-5-trigger" disabled side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
@@ -101,7 +102,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <div class="video-controls-bottom video-controls-video-bottom">
 <media-controls-group class="video-controls-row">
 <media-controls-group class="video-controls-group video-controls-start">
-<media-play-button class="media-button media-play-button" id="vjs-DzQ7xA3l-0-6-trigger">
+<media-play-button class="media-button media-play-button" id="vjs-WvnGKrjP-0-6-trigger">
 <media-icon family="compat" name="restart" class="media-button-icon-base media-play-button-restart-icon">
 </media-icon>
 <media-icon family="compat" name="play" class="media-button-icon-base media-play-button-play-icon">
@@ -109,7 +110,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon family="compat" name="pause" class="media-button-icon-base media-play-button-pause-icon">
 </media-icon>
 </media-play-button>
-<media-tooltip trigger="vjs-DzQ7xA3l-0-6-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-WvnGKrjP-0-6-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
@@ -120,19 +121,19 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </div>
 <media-text token="live.badge">Live</media-text>
 </media-live-button>
-<media-mute-button commandfor="vjs-lu9jnDMD-0-popup" class="media-button media-mute-button" id="vjs-DzQ7xA3l-0-7-trigger">
+<media-mute-button commandfor="vjs-vjL9cA1N-0-popup" class="media-button media-mute-button" id="vjs-WvnGKrjP-0-7-trigger">
 <media-icon family="compat" name="volume-off" class="media-button-icon media-mute-button-off-icon">
 </media-icon>
 <media-icon family="compat" name="volume-high" class="media-button-icon media-mute-button-high-icon">
 </media-icon>
 </media-mute-button>
-<media-tooltip trigger="vjs-DzQ7xA3l-0-7-trigger" delay="0" disabled side="top" sticky class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-WvnGKrjP-0-7-trigger" delay="0" disabled side="top" sticky class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
 <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-volume-popover-popup" id="vjs-lu9jnDMD-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-volume-popover-popup" id="vjs-vjL9cA1N-0-popup">
 <media-volume-slider class="media-volume-slider" orientation="vertical" thumb-alignment="edge">
 <media-slider-track class="media-volume-slider-track">
 <media-slider-fill class="media-volume-slider-fill">
@@ -144,19 +145,19 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-volume-popover>
 </media-controls-group>
 <media-controls-group class="video-controls-group">
-<media-captions-button commandfor="vjs-kVStkIHi-0-popup" class="media-button media-captions-button" id="vjs-DzQ7xA3l-0-8-trigger">
+<media-captions-button commandfor="vjs-iDIj4hLJ-0-popup" class="media-button media-captions-button" id="vjs-WvnGKrjP-0-8-trigger">
 <media-icon family="compat" name="captions-off" class="media-button-icon media-captions-button-off-icon">
 </media-icon>
 <media-icon family="compat" name="captions-on" class="media-button-icon media-captions-button-on-icon">
 </media-icon>
 </media-captions-button>
-<media-tooltip trigger="vjs-DzQ7xA3l-0-8-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-WvnGKrjP-0-8-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-menu side="top" align="center" class="media-popup media-popup-safe-area media-menu-popup" id="vjs-kVStkIHi-0-popup">
+<media-menu side="top" align="center" class="media-popup media-popup-safe-area media-menu-popup" id="vjs-iDIj4hLJ-0-popup">
 <media-menu-content class="media-menu-content">
 <media-captions-radio-group class="media-menu-radio-group">
 <template>
@@ -177,6 +178,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </div>
 </media-tooltip-group>
 </media-controls-content>
+</media-buffering-indicator>
 </media-controls>
 <media-hotkey keys="Space" action="togglePaused">
 </media-hotkey>

package/dist/dev/internal/skins/compat-live-video/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/compat-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 media-video\" data-theme=\"compat\" 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=\"compat\" name=\"spinner\" class=\"media-buffering-indicator-spinner-icon\">\n</media-icon>\n</media-buffering-indicator>\n<media-error-dialog>\n<media-dialog-backdrop class=\"media-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"media-dialog-popup\">\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<media-dialog-close class=\"media-button media-dialog-close\">\n</media-dialog-close>\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-content\">\n<media-tooltip-group>\n<media-controls-group class=\"video-controls-top\">\n<media-airplay-button class=\"media-button media-airplay-button\" id=\"vjs-DzQ7xA3l-0-trigger\">\n<media-icon family=\"compat\" name=\"airplay-enter\" class=\"media-button-icon media-airplay-button-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"airplay-exit\" class=\"media-button-icon media-airplay-button-exit-icon\">\n</media-icon>\n</media-airplay-button>\n<media-tooltip trigger=\"vjs-DzQ7xA3l-0-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup\">\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-cast-button class=\"media-button media-cast-button\" id=\"vjs-DzQ7xA3l-0-2-trigger\">\n<media-icon family=\"compat\" name=\"cast-enter\" class=\"media-button-icon media-cast-button-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"cast-exit\" class=\"media-button-icon media-cast-button-exit-icon\">\n</media-icon>\n</media-cast-button>\n<media-tooltip trigger=\"vjs-DzQ7xA3l-0-2-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup\">\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-DzQ7xA3l-0-3-trigger\">\n<media-icon family=\"compat\" name=\"pip-enter\" class=\"media-button-icon media-pip-button-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pip-exit\" class=\"media-button-icon media-pip-button-exit-icon\">\n</media-icon>\n</media-pip-button>\n<media-tooltip trigger=\"vjs-DzQ7xA3l-0-3-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup\">\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-DzQ7xA3l-0-4-trigger\">\n<media-icon family=\"compat\" name=\"fullscreen-enter\" class=\"media-button-icon media-fullscreen-button-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"fullscreen-exit\" class=\"media-button-icon media-fullscreen-button-exit-icon\">\n</media-icon>\n</media-fullscreen-button>\n<media-tooltip trigger=\"vjs-DzQ7xA3l-0-4-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup\">\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-controls-group class=\"video-controls-center\">\n<media-play-button class=\"media-button media-play-button video-controls-center-button video-controls-center-play\" id=\"vjs-DzQ7xA3l-0-5-trigger\">\n<media-icon family=\"compat\" name=\"restart\" class=\"media-button-icon-base media-play-button-restart-icon video-controls-center-play-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"play\" class=\"media-button-icon-base media-play-button-play-icon video-controls-center-play-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pause\" class=\"media-button-icon-base media-play-button-pause-icon video-controls-center-play-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-DzQ7xA3l-0-5-trigger\" disabled side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\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<div class=\"video-controls-bottom video-controls-video-bottom\">\n<media-controls-group class=\"video-controls-row\">\n<media-controls-group class=\"video-controls-group video-controls-start\">\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-DzQ7xA3l-0-6-trigger\">\n<media-icon family=\"compat\" name=\"restart\" class=\"media-button-icon-base media-play-button-restart-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"play\" class=\"media-button-icon-base media-play-button-play-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pause\" class=\"media-button-icon-base media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-DzQ7xA3l-0-6-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\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<div aria-hidden=\"true\" class=\"media-live-button-dot\">\n</div>\n<media-text token=\"live.badge\">Live</media-text>\n</media-live-button>\n<media-mute-button commandfor=\"vjs-lu9jnDMD-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-DzQ7xA3l-0-7-trigger\">\n<media-icon family=\"compat\" name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-DzQ7xA3l-0-7-trigger\" delay=\"0\" disabled side=\"top\" sticky class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\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=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-volume-popover-popup\" id=\"vjs-lu9jnDMD-0-popup\">\n<media-volume-slider class=\"media-volume-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n<media-slider-track class=\"media-volume-slider-track\">\n<media-slider-fill class=\"media-volume-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n</media-controls-group>\n<media-controls-group class=\"video-controls-group\">\n<media-captions-button commandfor=\"vjs-kVStkIHi-0-popup\" class=\"media-button media-captions-button\" id=\"vjs-DzQ7xA3l-0-8-trigger\">\n<media-icon family=\"compat\" name=\"captions-off\" class=\"media-button-icon media-captions-button-off-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"captions-on\" class=\"media-button-icon media-captions-button-on-icon\">\n</media-icon>\n</media-captions-button>\n<media-tooltip trigger=\"vjs-DzQ7xA3l-0-8-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\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\" class=\"media-popup media-popup-safe-area media-menu-popup\" id=\"vjs-kVStkIHi-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-indicator\">\n<media-icon family=\"compat\" name=\"check\" class=\"media-menu-radio-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-controls-group>\n</media-controls-group>\n</div>\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 aria-hidden=\"true\" class=\"media-indicator-group\">\n<media-volume-indicator class=\"media-indicator media-volume-indicator\">\n<media-volume-indicator-fill class=\"media-volume-indicator-fill\">\n<media-icon family=\"compat\" name=\"volume-high\" class=\"media-volume-indicator-icon media-volume-indicator-high-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"volume-low\" class=\"media-volume-indicator-icon media-volume-indicator-low-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"volume-off\" class=\"media-volume-indicator-icon 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<media-icon family=\"compat\" name=\"captions-on\" class=\"media-status-indicator-icon media-status-indicator-captions-on-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"captions-off\" class=\"media-status-indicator-icon media-status-indicator-captions-off-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"fullscreen-enter\" class=\"media-status-indicator-icon media-status-indicator-fullscreen-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"fullscreen-exit\" class=\"media-status-indicator-icon media-status-indicator-fullscreen-exit-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pip-enter\" class=\"media-status-indicator-icon media-status-indicator-pip-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pip-exit\" class=\"media-status-indicator-icon media-status-indicator-pip-exit-icon\">\n</media-icon>\n<media-status-indicator-value>\n</media-status-indicator-value>\n</media-status-indicator>\n</div>\n</media-container>`);\n"],"mappings":";;;AAGA,MAAa,WACX,eAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAuOT"}
+{"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/compat-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 media-video\" data-theme=\"compat\" 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=\"compat\" name=\"spinner\" class=\"media-buffering-indicator-spinner-icon\">\n</media-icon>\n</media-buffering-indicator>\n<media-error-dialog>\n<media-dialog-backdrop class=\"media-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"media-dialog-popup\">\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<media-dialog-close class=\"media-button media-dialog-close\">\n</media-dialog-close>\n</media-dialog-popup>\n</media-error-dialog>\n<media-title class=\"media-title\">\n</media-title>\n<media-controls>\n<media-buffering-indicator class=\"video-controls-buffering\">\n<media-controls-backdrop class=\"video-controls-backdrop\">\n</media-controls-backdrop>\n<media-controls-content class=\"video-controls-content\">\n<media-tooltip-group>\n<media-controls-group class=\"video-controls-top\">\n<media-airplay-button class=\"media-button media-airplay-button\" id=\"vjs-WvnGKrjP-0-trigger\">\n<media-icon family=\"compat\" name=\"airplay-enter\" class=\"media-button-icon media-airplay-button-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"airplay-exit\" class=\"media-button-icon media-airplay-button-exit-icon\">\n</media-icon>\n</media-airplay-button>\n<media-tooltip trigger=\"vjs-WvnGKrjP-0-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup\">\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-cast-button class=\"media-button media-cast-button\" id=\"vjs-WvnGKrjP-0-2-trigger\">\n<media-icon family=\"compat\" name=\"cast-enter\" class=\"media-button-icon media-cast-button-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"cast-exit\" class=\"media-button-icon media-cast-button-exit-icon\">\n</media-icon>\n</media-cast-button>\n<media-tooltip trigger=\"vjs-WvnGKrjP-0-2-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup\">\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-WvnGKrjP-0-3-trigger\">\n<media-icon family=\"compat\" name=\"pip-enter\" class=\"media-button-icon media-pip-button-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pip-exit\" class=\"media-button-icon media-pip-button-exit-icon\">\n</media-icon>\n</media-pip-button>\n<media-tooltip trigger=\"vjs-WvnGKrjP-0-3-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup\">\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-WvnGKrjP-0-4-trigger\">\n<media-icon family=\"compat\" name=\"fullscreen-enter\" class=\"media-button-icon media-fullscreen-button-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"fullscreen-exit\" class=\"media-button-icon media-fullscreen-button-exit-icon\">\n</media-icon>\n</media-fullscreen-button>\n<media-tooltip trigger=\"vjs-WvnGKrjP-0-4-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup\">\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-controls-group class=\"video-controls-center\">\n<media-play-button class=\"media-button media-play-button video-controls-center-button video-controls-center-play\" id=\"vjs-WvnGKrjP-0-5-trigger\">\n<media-icon family=\"compat\" name=\"restart\" class=\"media-button-icon-base media-play-button-restart-icon video-controls-center-play-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"play\" class=\"media-button-icon-base media-play-button-play-icon video-controls-center-play-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pause\" class=\"media-button-icon-base media-play-button-pause-icon video-controls-center-play-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-WvnGKrjP-0-5-trigger\" disabled side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\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<div class=\"video-controls-bottom video-controls-video-bottom\">\n<media-controls-group class=\"video-controls-row\">\n<media-controls-group class=\"video-controls-group video-controls-start\">\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-WvnGKrjP-0-6-trigger\">\n<media-icon family=\"compat\" name=\"restart\" class=\"media-button-icon-base media-play-button-restart-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"play\" class=\"media-button-icon-base media-play-button-play-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pause\" class=\"media-button-icon-base media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-WvnGKrjP-0-6-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\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<div aria-hidden=\"true\" class=\"media-live-button-dot\">\n</div>\n<media-text token=\"live.badge\">Live</media-text>\n</media-live-button>\n<media-mute-button commandfor=\"vjs-vjL9cA1N-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-WvnGKrjP-0-7-trigger\">\n<media-icon family=\"compat\" name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-WvnGKrjP-0-7-trigger\" delay=\"0\" disabled side=\"top\" sticky class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\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=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-volume-popover-popup\" id=\"vjs-vjL9cA1N-0-popup\">\n<media-volume-slider class=\"media-volume-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n<media-slider-track class=\"media-volume-slider-track\">\n<media-slider-fill class=\"media-volume-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n</media-controls-group>\n<media-controls-group class=\"video-controls-group\">\n<media-captions-button commandfor=\"vjs-iDIj4hLJ-0-popup\" class=\"media-button media-captions-button\" id=\"vjs-WvnGKrjP-0-8-trigger\">\n<media-icon family=\"compat\" name=\"captions-off\" class=\"media-button-icon media-captions-button-off-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"captions-on\" class=\"media-button-icon media-captions-button-on-icon\">\n</media-icon>\n</media-captions-button>\n<media-tooltip trigger=\"vjs-WvnGKrjP-0-8-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\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\" class=\"media-popup media-popup-safe-area media-menu-popup\" id=\"vjs-iDIj4hLJ-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-indicator\">\n<media-icon family=\"compat\" name=\"check\" class=\"media-menu-radio-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-controls-group>\n</media-controls-group>\n</div>\n</media-tooltip-group>\n</media-controls-content>\n</media-buffering-indicator>\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 aria-hidden=\"true\" class=\"media-indicator-group\">\n<media-volume-indicator class=\"media-indicator media-volume-indicator\">\n<media-volume-indicator-fill class=\"media-volume-indicator-fill\">\n<media-icon family=\"compat\" name=\"volume-high\" class=\"media-volume-indicator-icon media-volume-indicator-high-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"volume-low\" class=\"media-volume-indicator-icon media-volume-indicator-low-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"volume-off\" class=\"media-volume-indicator-icon 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<media-icon family=\"compat\" name=\"captions-on\" class=\"media-status-indicator-icon media-status-indicator-captions-on-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"captions-off\" class=\"media-status-indicator-icon media-status-indicator-captions-off-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"fullscreen-enter\" class=\"media-status-indicator-icon media-status-indicator-fullscreen-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"fullscreen-exit\" class=\"media-status-indicator-icon media-status-indicator-fullscreen-exit-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pip-enter\" class=\"media-status-indicator-icon media-status-indicator-pip-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pip-exit\" class=\"media-status-indicator-icon media-status-indicator-pip-exit-icon\">\n</media-icon>\n<media-status-indicator-value>\n</media-status-indicator-value>\n</media-status-indicator>\n</div>\n</media-container>`);\n"],"mappings":";;;AAGA,MAAa,WACX,eAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAyOT"}

package/dist/dev/internal/skins/compat-video/register.d.ts

@@ -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";
@@ -40,7 +41,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";