@videojs/html 10.0.0 → 10.1.0

package/dist/default/internal/skins/compat-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-m_pMjKs5-0-trigger">
+<media-airplay-button class="media-button media-airplay-button" id="vjs-71RVFabZ-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-m_pMjKs5-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-71RVFabZ-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-m_pMjKs5-0-2-trigger">
+<media-cast-button class="media-button media-cast-button" id="vjs-71RVFabZ-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-m_pMjKs5-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-71RVFabZ-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-m_pMjKs5-0-3-trigger">
+<media-pip-button class="media-button media-pip-button" id="vjs-71RVFabZ-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-m_pMjKs5-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-71RVFabZ-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-m_pMjKs5-0-4-trigger">
+<media-fullscreen-button class="media-button media-fullscreen-button" id="vjs-71RVFabZ-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-m_pMjKs5-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-71RVFabZ-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,20 +84,20 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-tooltip>
 </media-controls-group>
 <media-controls-group class="video-controls-center">
-<media-seek-button seconds="-10" class="media-button video-controls-center-button video-controls-center-seek" id="vjs-m_pMjKs5-0-5-trigger">
+<media-seek-button seconds="-10" class="media-button video-controls-center-button video-controls-center-seek" id="vjs-71RVFabZ-0-5-trigger">
 <div class="media-seek-button-content">
 <media-icon family="compat" name="seek" class="media-button-icon media-seek-button-backward-icon video-controls-center-seek-icon">
 </media-icon>
 <span class="media-seek-button-label media-seek-button-backward-label">10</span>
 </div>
 </media-seek-button>
-<media-tooltip trigger="vjs-m_pMjKs5-0-5-trigger" disabled side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-71RVFabZ-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">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-play-button class="media-button media-play-button video-controls-center-button video-controls-center-play" id="vjs-m_pMjKs5-0-6-trigger">
+<media-play-button class="media-button media-play-button video-controls-center-button video-controls-center-play" id="vjs-71RVFabZ-0-6-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">
@@ -104,20 +105,20 @@ 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-m_pMjKs5-0-6-trigger" disabled side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-71RVFabZ-0-6-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">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-seek-button seconds="10" class="media-button video-controls-center-button video-controls-center-seek" id="vjs-m_pMjKs5-0-7-trigger">
+<media-seek-button seconds="10" class="media-button video-controls-center-button video-controls-center-seek" id="vjs-71RVFabZ-0-7-trigger">
 <div class="media-seek-button-content">
 <media-icon family="compat" name="seek" class="media-button-icon video-controls-center-seek-icon">
 </media-icon>
 <span class="media-seek-button-label media-seek-button-forward-label">10</span>
 </div>
 </media-seek-button>
-<media-tooltip trigger="vjs-m_pMjKs5-0-7-trigger" disabled side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-71RVFabZ-0-7-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">
@@ -158,7 +159,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </div>
 <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-m_pMjKs5-0-8-trigger">
+<media-play-button class="media-button media-play-button" id="vjs-71RVFabZ-0-8-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">
@@ -166,25 +167,25 @@ 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-m_pMjKs5-0-8-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-71RVFabZ-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-mute-button commandfor="vjs-KeOJ7gyd-0-popup" class="media-button media-mute-button" id="vjs-m_pMjKs5-0-9-trigger">
+<media-mute-button commandfor="vjs-TMNcKA4q-0-popup" class="media-button media-mute-button" id="vjs-71RVFabZ-0-9-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-m_pMjKs5-0-9-trigger" delay="0" disabled side="top" sticky class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-71RVFabZ-0-9-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-KeOJ7gyd-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-TMNcKA4q-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">
@@ -206,29 +207,29 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-time-group>
 </media-controls-group>
 <media-controls-group class="video-controls-group">
-<media-captions-button class="media-button media-captions-button" id="vjs-m_pMjKs5-0-10-trigger">
+<media-captions-button class="media-button media-captions-button" id="vjs-71RVFabZ-0-10-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-m_pMjKs5-0-10-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-71RVFabZ-0-10-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>
-<button commandfor="vjs-eirWFcST-h-popup" class="media-button media-settings-button" id="vjs-m_pMjKs5-0-11-trigger">
+<button commandfor="vjs-V6zIdvRf-h-popup" class="media-button media-settings-button" id="vjs-71RVFabZ-0-11-trigger">
 <media-icon family="compat" name="gear" class="media-button-icon media-settings-button-icon">
 </media-icon>
 <media-text class="media-settings-button-label" token="menu.settings">Settings</media-text>
 </button>
-<media-tooltip trigger="vjs-m_pMjKs5-0-11-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-71RVFabZ-0-11-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
 <media-text token="menu.settings">Settings</media-text>
 </media-tooltip>
-<media-menu side="top" align="center" class="media-popup media-popup-safe-area media-menu-popup media-menu-resizable-popup" id="vjs-eirWFcST-h-popup">
+<media-menu side="top" align="center" class="media-popup media-popup-safe-area media-menu-popup media-menu-resizable-popup" id="vjs-V6zIdvRf-h-popup">
 <media-menu-content class="media-menu-content">
-<media-menu-item commandfor="vjs-eirWFcST-1-content" class="media-menu-item">
+<media-menu-item commandfor="vjs-V6zIdvRf-1-content" class="media-menu-item">
 <media-icon family="compat" name="switches" class="media-menu-trigger-icon">
 </media-icon>
 <media-text token="menu.quality">Quality</media-text>
@@ -239,7 +240,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-eirWFcST-1-content">
+<media-menu-content class="media-menu-content" id="vjs-V6zIdvRf-1-content">
 <media-menu-item class="media-menu-back-item">
 <media-icon family="compat" name="chevron" class="media-menu-back-chevron">
 </media-icon>
@@ -266,7 +267,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </template>
 </media-quality-radio-group>
 </media-menu-content>
-<media-menu-item commandfor="vjs-eirWFcST-5-content" class="media-menu-item">
+<media-menu-item commandfor="vjs-V6zIdvRf-5-content" class="media-menu-item">
 <media-icon family="compat" name="speech" class="media-menu-trigger-icon">
 </media-icon>
 <media-text token="menu.audio">Audio</media-text>
@@ -277,7 +278,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-eirWFcST-5-content">
+<media-menu-content class="media-menu-content" id="vjs-V6zIdvRf-5-content">
 <media-menu-item class="media-menu-back-item">
 <media-icon family="compat" name="chevron" class="media-menu-back-chevron">
 </media-icon>
@@ -298,7 +299,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </template>
 </media-audio-track-radio-group>
 </media-menu-content>
-<media-menu-item commandfor="vjs-eirWFcST-9-content" class="media-menu-item">
+<media-menu-item commandfor="vjs-V6zIdvRf-9-content" class="media-menu-item">
 <media-icon family="compat" name="speed" class="media-menu-trigger-icon">
 </media-icon>
 <media-text token="menu.speed">Speed</media-text>
@@ -309,7 +310,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-eirWFcST-9-content">
+<media-menu-content class="media-menu-content" id="vjs-V6zIdvRf-9-content">
 <media-menu-item class="media-menu-back-item">
 <media-icon family="compat" name="chevron" class="media-menu-back-chevron">
 </media-icon>
@@ -330,7 +331,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </template>
 </media-playback-rate-radio-group>
 </media-menu-content>
-<media-menu-item commandfor="vjs-eirWFcST-d-content" class="media-menu-item">
+<media-menu-item commandfor="vjs-V6zIdvRf-d-content" class="media-menu-item">
 <media-icon family="compat" name="captions-off" class="media-menu-trigger-icon">
 </media-icon>
 <media-text token="menu.captions">Captions</media-text>
@@ -341,7 +342,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-eirWFcST-d-content">
+<media-menu-content class="media-menu-content" id="vjs-V6zIdvRf-d-content">
 <media-menu-item class="media-menu-back-item">
 <media-icon family="compat" name="chevron" class="media-menu-back-chevron">
 </media-icon>
@@ -369,6 +370,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/default/internal/skins/default-audio/template.js

@@ -29,7 +29,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon name="spinner" class="media-buffering-indicator-spinner-icon">
 </media-icon>
 </media-buffering-indicator>
-<media-play-button class="media-button media-play-button" id="vjs-UACASmvn-0-trigger">
+<media-play-button class="media-button media-play-button" id="vjs-YCBr5ls1-0-trigger">
 <media-icon name="restart" class="media-button-icon media-play-button-restart-icon">
 </media-icon>
 <media-icon name="play" class="media-button-icon media-play-button-play-icon">
@@ -37,34 +37,34 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon name="pause" class="media-button-icon media-play-button-pause-icon">
 </media-icon>
 </media-play-button>
-<media-tooltip trigger="vjs-UACASmvn-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-YCBr5ls1-0-trigger" boundary="viewport" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
 </div>
-<media-seek-button seconds="-10" class="media-button media-seek-button audio-seek-button" id="vjs-UACASmvn-0-2-trigger">
+<media-seek-button seconds="-10" class="media-button media-seek-button audio-seek-button" id="vjs-YCBr5ls1-0-2-trigger">
 <div class="media-seek-button-content">
 <media-icon name="seek" class="media-button-icon media-seek-button-backward-icon">
 </media-icon>
 <span class="media-seek-button-label media-seek-button-backward-label">10</span>
 </div>
 </media-seek-button>
-<media-tooltip trigger="vjs-UACASmvn-0-2-trigger" boundary="viewport" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-YCBr5ls1-0-2-trigger" boundary="viewport" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-seek-button seconds="10" class="media-button media-seek-button audio-seek-button" id="vjs-UACASmvn-0-3-trigger">
+<media-seek-button seconds="10" class="media-button media-seek-button audio-seek-button" id="vjs-YCBr5ls1-0-3-trigger">
 <div class="media-seek-button-content">
 <media-icon name="seek" class="media-button-icon">
 </media-icon>
 <span class="media-seek-button-label media-seek-button-forward-label">10</span>
 </div>
 </media-seek-button>
-<media-tooltip trigger="vjs-UACASmvn-0-3-trigger" boundary="viewport" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-YCBr5ls1-0-3-trigger" boundary="viewport" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
@@ -94,15 +94,15 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-time>
 </media-controls-group>
 <media-controls-group class="audio-controls-end">
-<media-playback-rate-button commandfor="vjs-6dNpqwRT-0-popup" class="media-button media-playback-rate-button" id="vjs-UACASmvn-0-4-trigger">
+<media-playback-rate-button commandfor="vjs-IYqgEwNi-0-popup" class="media-button media-playback-rate-button" id="vjs-YCBr5ls1-0-4-trigger">
 </media-playback-rate-button>
-<media-tooltip trigger="vjs-UACASmvn-0-4-trigger" boundary="viewport" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-YCBr5ls1-0-4-trigger" boundary="viewport" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-menu side="top" align="center" boundary="viewport" class="media-popup media-popup-surface media-menu-popup audio-settings-menu-popup" id="vjs-6dNpqwRT-0-popup">
+<media-menu side="top" align="center" boundary="viewport" class="media-popup media-popup-surface media-menu-popup audio-settings-menu-popup" id="vjs-IYqgEwNi-0-popup">
 <media-menu-content class="media-menu-content">
 <media-playback-rate-radio-group class="media-menu-radio-group">
 <template>
@@ -118,7 +118,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-playback-rate-radio-group>
 </media-menu-content>
 </media-menu>
-<media-mute-button commandfor="vjs-OQ7iLMJy-0-popup" class="media-button media-mute-button" id="vjs-UACASmvn-0-5-trigger">
+<media-mute-button commandfor="vjs-vz1xrwnK-0-popup" class="media-button media-mute-button" id="vjs-YCBr5ls1-0-5-trigger">
 <media-icon name="volume-off" class="media-button-icon media-mute-button-off-icon">
 </media-icon>
 <media-icon name="volume-low" class="media-button-icon media-mute-button-low-icon">
@@ -126,13 +126,13 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon name="volume-high" class="media-button-icon media-mute-button-high-icon">
 </media-icon>
 </media-mute-button>
-<media-tooltip trigger="vjs-UACASmvn-0-5-trigger" delay="0" disabled sticky side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-YCBr5ls1-0-5-trigger" delay="0" disabled sticky side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-volume-popover open-on-hover delay="200" close-delay="100" side="top" boundary="viewport" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover" id="vjs-OQ7iLMJy-0-popup">
+<media-volume-popover open-on-hover delay="200" close-delay="100" side="top" boundary="viewport" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover" id="vjs-vz1xrwnK-0-popup">
 <media-volume-slider class="media-slider media-volume-slider" thumb-alignment="edge" orientation="vertical">
 <media-slider-track class="media-slider-track">
 <media-slider-fill class="media-slider-fill">

package/dist/default/internal/skins/default-live-audio/template.js

@@ -29,7 +29,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon name="spinner" class="media-buffering-indicator-spinner-icon">
 </media-icon>
 </media-buffering-indicator>
-<media-play-button class="media-button media-play-button" id="vjs-Dl61mo2s-0-trigger">
+<media-play-button class="media-button media-play-button" id="vjs-X4LxMHIJ-0-trigger">
 <media-icon name="restart" class="media-button-icon media-play-button-restart-icon">
 </media-icon>
 <media-icon name="play" class="media-button-icon media-play-button-play-icon">
@@ -37,7 +37,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon name="pause" class="media-button-icon media-play-button-pause-icon">
 </media-icon>
 </media-play-button>
-<media-tooltip trigger="vjs-Dl61mo2s-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-X4LxMHIJ-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-y25m1WBb-0-popup" class="media-button media-mute-button" id="vjs-Dl61mo2s-0-2-trigger">
+<media-mute-button commandfor="vjs-f_YvqjcV-0-popup" class="media-button media-mute-button" id="vjs-X4LxMHIJ-0-2-trigger">
 <media-icon name="volume-off" class="media-button-icon media-mute-button-off-icon">
 </media-icon>
 <media-icon name="volume-low" class="media-button-icon media-mute-button-low-icon">
@@ -58,13 +58,13 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon name="volume-high" class="media-button-icon media-mute-button-high-icon">
 </media-icon>
 </media-mute-button>
-<media-tooltip trigger="vjs-Dl61mo2s-0-2-trigger" delay="0" disabled sticky side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-X4LxMHIJ-0-2-trigger" delay="0" disabled sticky side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-volume-popover open-on-hover delay="200" close-delay="100" side="top" boundary="viewport" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover" id="vjs-y25m1WBb-0-popup">
+<media-volume-popover open-on-hover delay="200" close-delay="100" side="top" boundary="viewport" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover" id="vjs-f_YvqjcV-0-popup">
 <media-volume-slider class="media-slider media-volume-slider" thumb-alignment="edge" orientation="vertical">
 <media-slider-track class="media-slider-track">
 <media-slider-fill class="media-slider-fill">

package/dist/default/internal/skins/default-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);
     }
   }
 
@@ -404,7 +408,7 @@
     transform-origin: top;
     padding-inline: calc(var(--media-spacing) * 6);
     padding-top: calc(var(--media-spacing) * 2.5);
-    font-size: calc(var(--media-spacing) * 3.25);
+    font-size: calc(var(--media-spacing) * 4);
     letter-spacing: -.0125em;
     overflow-wrap: anywhere;
     color: var(--media-controls-foreground);
@@ -438,7 +442,6 @@
     :where(.media-skin[data-theme="default"]) .media-title {
       padding-inline: calc(var(--media-spacing) * 6);
       padding-top: calc(var(--media-spacing) * 4);
-      font-size: calc(var(--media-spacing) * 4.25);
     }
   }
 
@@ -1969,7 +1972,7 @@
       color-mix(in oklab, var(--media-backdrop) 40%, transparent),
       color-mix(in oklab, var(--media-backdrop) 20%, transparent),
       color-mix(in oklab, var(--media-backdrop) 50%, transparent));
-    --media-caption-controls-y: calc(var(--media-spacing) * -14);
+    --media-caption-controls-y: calc(var(--media-spacing) * -16);
     --media-slider-preview-offset: calc(var(--media-spacing) * 9);
     --media-thumbnail-gradient: linear-gradient(to top,
       color-mix(in oklab, var(--media-backdrop) 50%, transparent),
@@ -2004,10 +2007,18 @@
       color-mix(in oklab, var(--media-backdrop) 35%, transparent),
       color-mix(in oklab, var(--media-backdrop) 20%, transparent) calc(var(--media-spacing) * 12),
       transparent);
-    --media-caption-controls-y: calc(var(--media-spacing) * -18);
+    --media-caption-controls-y: calc(var(--media-spacing) * -14);
     --media-slider-preview-offset: calc(var(--media-spacing) * 11);
   }
 
+  .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="compat"] {
+    --media-caption-controls-y: calc(var(--media-spacing) * -18);
+  }
+
+  .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="scaffold"] {
+    --media-caption-controls-y: calc(var(--media-spacing) * -20);
+  }
+
   @supports (color: oklch(from red l c h)) and (background-image: linear-gradient(in oklab, red, red)) {
     .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
       --media-controls-gradient: linear-gradient(to top in oklab,

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

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