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

@videojs/html 10.2.0 → 10.4.0

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

Files changed (374) hide show

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

@@ -32,11 +32,37 @@ 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-center-buffering">
+<media-controls-group class="video-controls-center">
+<media-seek-button class="media-button media-seek-button video-controls-center-button video-controls-center-seek" seconds="-10">
+<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-play-button class="media-button media-play-button video-controls-center-button video-controls-center-play">
+<media-icon name="restart" class="media-button-icon media-play-button-restart-icon video-controls-center-play-icon">
+</media-icon>
+<media-icon name="play" class="media-button-icon media-play-button-play-icon video-controls-center-play-icon">
+</media-icon>
+<media-icon name="pause" class="media-button-icon media-play-button-pause-icon video-controls-center-play-icon">
+</media-icon>
+</media-play-button>
+<media-seek-button class="media-button media-seek-button video-controls-center-button video-controls-center-seek" seconds="10">
+<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-controls-group>
+</media-buffering-indicator>
 <media-controls-backdrop class="video-controls-backdrop">
 </media-controls-backdrop>
 <media-controls-content class="video-controls video-controls-content">
 <media-tooltip-group>
-<media-controls-group class="video-controls-primary">
+<media-controls-group class="video-controls-primary video-controls-compact-primary">
 <media-play-button class="media-button media-play-button" id="vjs-iSAklLIk-0-trigger">
 <media-icon name="restart" class="media-button-icon media-play-button-restart-icon">
 </media-icon>
@@ -76,9 +102,9 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-volume-slider>
 </media-volume-popover>
 <media-controls-group class="video-time-slider-group">
-<media-time class="media-time-value video-time-value" type="current">
+<media-time class="media-time-value video-controls-current-time-value" type="current">
 </media-time>
-<media-time-slider class="media-slider media-time-slider">
+<media-time-slider class="media-slider media-time-slider video-controls-time-slider">
 <media-time-slider-chapters class="media-time-slider-chapters">
 <template>
 <div class="media-time-slider-chapter">
@@ -109,7 +135,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </div>
 </media-slider-preview>
 </media-time-slider>
-<media-time class="media-time-toggle video-time-value" type="remaining" toggle>
+<media-time class="media-time-toggle video-controls-remaining-time-value" type="remaining" toggle>
 </media-time>
 </media-controls-group>
 <media-captions-button class="media-button media-captions-button video-controls-captions-button" id="vjs-iSAklLIk-0-3-trigger">
@@ -260,6 +286,8 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-menu-radio-item class="media-menu-radio-item">
 <span data-part="label">
 </span>
+<span data-part="badge" class="media-menu-badge">
+</span>
 <media-menu-item-indicator force-mount class="media-menu-item-indicator">
 <media-icon name="check" class="media-menu-radio-item-icon">
 </media-icon>
@@ -271,7 +299,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-menu-content>
 </media-menu>
 </media-controls-group>
-<media-controls-group class="video-controls-secondary">
+<media-controls-group class="video-controls-secondary video-controls-top-controls">
 <media-cast-button class="media-button media-cast-button" id="vjs-iSAklLIk-0-5-trigger">
 <media-icon name="cast-enter" class="media-button-icon media-cast-button-enter-icon">
 </media-icon>

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

	@@ -1 +1 @@
1	- {"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/default-video/template.ts"],"sourcesContent":["import { createTemplate } from '@videojs/utils/dom';\n\n/** Static template rendered from the finalized VJSC module graph. /\nexport const template =\n createTemplate(/ html */ `<media-container class=\"media-skin media-container video-skin\" data-theme=\"default\" data-preset=\"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 name=\"spinner\" class=\"media-buffering-indicator-spinner-icon\">\n</media-icon>\n</media-buffering-indicator>\n<media-error-dialog class=\"media-dialog-root\">\n<media-dialog-backdrop class=\"media-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"media-dialog-popup\">\n<div class=\"media-dialog-content\">\n<media-dialog-title class=\"media-dialog-title\">\n</media-dialog-title>\n<media-dialog-description class=\"media-dialog-description\">\n</media-dialog-description>\n</div>\n<div class=\"media-dialog-actions\">\n<media-dialog-close class=\"media-button media-dialog-close\">\n</media-dialog-close>\n</div>\n</media-dialog-popup>\n</media-error-dialog>\n<media-title class=\"media-title\">\n</media-title>\n<media-controls>\n<media-controls-backdrop class=\"video-controls-backdrop\">\n</media-controls-backdrop>\n<media-controls-content class=\"video-controls video-controls-content\">\n<media-tooltip-group>\n<media-controls-group class=\"video-controls-primary\">\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-iSAklLIk-0-trigger\">\n<media-icon name=\"restart\" class=\"media-button-icon media-play-button-restart-icon\">\n</media-icon>\n<media-icon name=\"play\" class=\"media-button-icon media-play-button-play-icon\">\n</media-icon>\n<media-icon name=\"pause\" class=\"media-button-icon media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-iSAklLIk-0-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-mute-button commandfor=\"vjs-F3QfBzzz-0-popup\" class=\"media-button media-mute-button video-controls-volume-button\" id=\"vjs-iSAklLIk-0-2-trigger\">\n<media-icon name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon name=\"volume-low\" class=\"media-button-icon media-mute-button-low-icon\">\n</media-icon>\n<media-icon name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-iSAklLIk-0-2-trigger\" delay=\"0\" disabled sticky side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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-popup-surface media-volume-popover\" id=\"vjs-F3QfBzzz-0-popup\">\n<media-volume-slider class=\"media-slider media-volume-slider\" thumb-alignment=\"edge\" orientation=\"vertical\">\n<media-slider-track class=\"media-slider-track\">\n<media-slider-fill class=\"media-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-slider-thumb media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n<media-controls-group class=\"video-time-slider-group\">\n<media-time class=\"media-time-value video-time-value\" type=\"current\">\n</media-time>\n<media-time-slider class=\"media-slider media-time-slider\">\n<media-time-slider-chapters class=\"media-time-slider-chapters\">\n<template>\n<div class=\"media-time-slider-chapter\">\n<media-slider-track class=\"media-slider-track media-time-slider-chapter-track\">\n<media-slider-buffer class=\"media-slider-buffer media-time-slider-chapter-layer\">\n</media-slider-buffer>\n<media-slider-fill class=\"media-slider-fill media-time-slider-chapter-layer\">\n</media-slider-fill>\n</media-slider-track>\n</div>\n</template>\n</media-time-slider-chapters>\n<media-slider-thumb class=\"media-slider-thumb media-time-slider-thumb\">\n</media-slider-thumb>\n<media-slider-preview class=\"media-slider-preview\" overflow=\"visible\">\n<media-slider-thumbnail class=\"media-slider-preview-content media-popup-surface media-slider-thumbnail\">\n<slot name=\"thumbnail\">\n<img alt=\"\" aria-hidden=\"true\" decoding=\"async\" class=\"media-slider-thumbnail-image\">\n</slot>\n<media-icon name=\"spinner\" class=\"media-slider-thumbnail-spinner-icon\">\n</media-icon>\n</media-slider-thumbnail>\n<div class=\"media-slider-preview-content media-time-slider-preview-content\">\n<media-time-slider-chapter-title class=\"media-time-slider-chapter-title\">\n</media-time-slider-chapter-title>\n<media-slider-value class=\"media-time-slider-value\" type=\"pointer\">\n</media-slider-value>\n</div>\n</media-slider-preview>\n</media-time-slider>\n<media-time class=\"media-time-toggle video-time-value\" type=\"remaining\" toggle>\n</media-time>\n</media-controls-group>\n<media-captions-button class=\"media-button media-captions-button video-controls-captions-button\" id=\"vjs-iSAklLIk-0-3-trigger\">\n<media-icon name=\"captions-off\" class=\"media-button-icon media-captions-button-off-icon\">\n</media-icon>\n<media-icon name=\"captions-on\" class=\"media-button-icon media-captions-button-on-icon\">\n</media-icon>\n</media-captions-button>\n<media-tooltip trigger=\"vjs-iSAklLIk-0-3-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<button commandfor=\"vjs-28BtKs3v-0-popup\" class=\"media-button media-settings-menu-trigger video-controls-settings-button\" id=\"vjs-iSAklLIk-0-4-trigger\">\n<media-icon name=\"gear\" class=\"media-button-icon-base media-settings-menu-trigger-icon\">\n</media-icon>\n<media-text class=\"media-settings-menu-trigger-label\" token=\"menu.settings\">Settings</media-text>\n</button>\n<media-tooltip trigger=\"vjs-iSAklLIk-0-4-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-text token=\"menu.settings\">Settings</media-text>\n</media-tooltip>\n<media-menu side=\"top\" align=\"center\" class=\"media-popup media-popup-surface media-menu-popup media-menu-resizable-popup\" id=\"vjs-28BtKs3v-0-popup\">\n<media-menu-content class=\"media-menu-content\">\n<media-menu-item commandfor=\"vjs-ZGpCKm5h-0-content\" class=\"media-menu-trigger-item\">\n<media-icon name=\"switches\" class=\"media-menu-trigger-item-icon\">\n</media-icon>\n<media-text token=\"menu.quality\">Quality</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-ZGpCKm5h-0-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.quality\">Quality</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-quality-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span>\n<span data-part=\"label\">\n</span>\n<sup data-part=\"tier\" class=\"media-menu-tier\">\n</sup>\n</span>\n<span data-part=\"badge\" class=\"media-menu-badge\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-quality-radio-group>\n</media-menu-content>\n<media-menu-item commandfor=\"vjs-rPcYSc7i-0-content\" class=\"media-menu-trigger-item\">\n<media-icon name=\"speech\" class=\"media-menu-trigger-item-icon\">\n</media-icon>\n<media-text token=\"menu.audio\">Audio</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-rPcYSc7i-0-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.audio\">Audio</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-audio-track-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-audio-track-radio-group>\n</media-menu-content>\n<media-menu-item commandfor=\"vjs-8B_qQK6x-0-content\" class=\"media-menu-trigger-item\">\n<media-icon name=\"speed\" class=\"media-menu-trigger-item-icon\">\n</media-icon>\n<media-text token=\"menu.speed\">Speed</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-8B_qQK6x-0-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.speed\">Speed</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-playback-rate-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-playback-rate-radio-group>\n</media-menu-content>\n<media-menu-item commandfor=\"vjs-fVL6fVBf-0-content\" class=\"media-menu-trigger-item\">\n<media-icon name=\"captions-off\" class=\"media-menu-trigger-item-icon\">\n</media-icon>\n<media-text token=\"menu.captions\">Captions</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-fVL6fVBf-0-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.captions\">Captions</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-captions-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-captions-radio-group>\n</media-menu-content>\n</media-menu-content>\n</media-menu>\n</media-controls-group>\n<media-controls-group class=\"video-controls-secondary\">\n<media-cast-button class=\"media-button media-cast-button\" id=\"vjs-iSAklLIk-0-5-trigger\">\n<media-icon name=\"cast-enter\" class=\"media-button-icon media-cast-button-enter-icon\">\n</media-icon>\n<media-icon name=\"cast-exit\" class=\"media-button-icon media-cast-button-exit-icon\">\n</media-icon>\n</media-cast-button>\n<media-tooltip trigger=\"vjs-iSAklLIk-0-5-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-airplay-button class=\"media-button media-airplay-button\" id=\"vjs-iSAklLIk-0-6-trigger\">\n<media-icon name=\"airplay-enter\" class=\"media-button-icon media-airplay-button-enter-icon\">\n</media-icon>\n<media-icon name=\"airplay-exit\" class=\"media-button-icon media-airplay-button-exit-icon\">\n</media-icon>\n</media-airplay-button>\n<media-tooltip trigger=\"vjs-iSAklLIk-0-6-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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-iSAklLIk-0-7-trigger\">\n<media-icon name=\"pip-enter\" class=\"media-button-icon media-pip-button-enter-icon\">\n</media-icon>\n<media-icon name=\"pip-exit\" class=\"media-button-icon media-pip-button-exit-icon\">\n</media-icon>\n</media-pip-button>\n<media-tooltip trigger=\"vjs-iSAklLIk-0-7-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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-iSAklLIk-0-8-trigger\">\n<media-icon name=\"fullscreen-enter\" class=\"media-button-icon media-fullscreen-button-enter-icon\">\n</media-icon>\n<media-icon name=\"fullscreen-exit\" class=\"media-button-icon media-fullscreen-button-exit-icon\">\n</media-icon>\n</media-fullscreen-button>\n<media-tooltip trigger=\"vjs-iSAklLIk-0-8-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</media-controls-group>\n</media-tooltip-group>\n</media-controls-content>\n</media-controls>\n<media-hotkey keys=\"Space\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"k\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"m\" action=\"toggleMuted\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowRight\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowLeft\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"l\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"j\" action=\"seekStep\">\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=\"0-9\" action=\"seekToPercent\">\n</media-hotkey>\n<media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\">\n</media-hotkey>\n<media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\">\n</media-hotkey>\n<media-hotkey keys=\">\" action=\"speedUp\">\n</media-hotkey>\n<media-hotkey keys=\"<\" action=\"speedDown\">\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=\"seekStep\" region=\"left\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"seekStep\" region=\"right\">\n</media-gesture>\n<media-status-announcer class=\"media-status-announcer\">\n</media-status-announcer>\n<div class=\"video-status-indicators\">\n<media-volume-indicator class=\"media-indicator media-volume-indicator\">\n<media-volume-indicator-fill class=\"media-indicator-content media-volume-indicator-fill\">\n<media-icon name=\"volume-high\" class=\"media-volume-indicator-high-icon\">\n</media-icon>\n<media-icon name=\"volume-low\" class=\"media-volume-indicator-low-icon\">\n</media-icon>\n<media-icon name=\"volume-off\" class=\"media-volume-indicator-off-icon\">\n</media-icon>\n<media-volume-indicator-value class=\"media-volume-indicator-value\">\n</media-volume-indicator-value>\n</media-volume-indicator-fill>\n</media-volume-indicator>\n<media-status-indicator actions=\"toggleSubtitles,toggleFullscreen,togglePictureInPicture\" class=\"media-indicator media-status-indicator\">\n<div class=\"media-indicator-content media-status-indicator-content\">\n<media-icon name=\"captions-on\" class=\"media-status-indicator-captions-on-icon\">\n</media-icon>\n<media-icon name=\"captions-off\" class=\"media-status-indicator-captions-off-icon\">\n</media-icon>\n<media-icon name=\"fullscreen-enter\" class=\"media-status-indicator-fullscreen-enter-icon\">\n</media-icon>\n<media-icon name=\"fullscreen-exit\" class=\"media-status-indicator-fullscreen-exit-icon\">\n</media-icon>\n<media-icon name=\"pip-enter\" class=\"media-status-indicator-pip-enter-icon\">\n</media-icon>\n<media-icon name=\"pip-exit\" class=\"media-status-indicator-pip-exit-icon\">\n</media-icon>\n<media-status-indicator-value class=\"media-status-indicator-value\">\n</media-status-indicator-value>\n</div>\n</media-status-indicator>\n<media-seek-indicator class=\"media-seek-indicator\">\n<media-icon name=\"chevron\" class=\"media-seek-indicator-icon\">\n</media-icon>\n<media-seek-indicator-value class=\"media-seek-indicator-value\">\n</media-seek-indicator-value>\n</media-seek-indicator>\n<media-status-indicator actions=\"togglePaused\" class=\"media-playback-status-indicator\">\n<media-icon name=\"play\" class=\"media-playback-status-indicator-play-icon\">\n</media-icon>\n<media-icon name=\"pause\" class=\"media-playback-status-indicator-pause-icon\">\n</media-icon>\n</media-status-indicator>\n</div>\n</media-container>`);\n"],"mappings":";;;AAGA,MAAa,WACX,eAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA6ZT"}
1	+ {"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/default-video/template.ts"],"sourcesContent":["import { createTemplate } from '@videojs/utils/dom';\n\n/** Static template rendered from the finalized VJSC module graph. /\nexport const template =\n createTemplate(/ html */ `<media-container class=\"media-skin media-container video-skin\" data-theme=\"default\" data-preset=\"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 name=\"spinner\" class=\"media-buffering-indicator-spinner-icon\">\n</media-icon>\n</media-buffering-indicator>\n<media-error-dialog class=\"media-dialog-root\">\n<media-dialog-backdrop class=\"media-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"media-dialog-popup\">\n<div class=\"media-dialog-content\">\n<media-dialog-title class=\"media-dialog-title\">\n</media-dialog-title>\n<media-dialog-description class=\"media-dialog-description\">\n</media-dialog-description>\n</div>\n<div class=\"media-dialog-actions\">\n<media-dialog-close class=\"media-button media-dialog-close\">\n</media-dialog-close>\n</div>\n</media-dialog-popup>\n</media-error-dialog>\n<media-title class=\"media-title\">\n</media-title>\n<media-controls>\n<media-buffering-indicator class=\"video-controls-center-buffering\">\n<media-controls-group class=\"video-controls-center\">\n<media-seek-button class=\"media-button media-seek-button video-controls-center-button video-controls-center-seek\" seconds=\"-10\">\n<div class=\"media-seek-button-content\">\n<media-icon name=\"seek\" class=\"media-button-icon media-seek-button-backward-icon\">\n</media-icon>\n<span class=\"media-seek-button-label media-seek-button-backward-label\">10</span>\n</div>\n</media-seek-button>\n<media-play-button class=\"media-button media-play-button video-controls-center-button video-controls-center-play\">\n<media-icon name=\"restart\" class=\"media-button-icon media-play-button-restart-icon video-controls-center-play-icon\">\n</media-icon>\n<media-icon name=\"play\" class=\"media-button-icon media-play-button-play-icon video-controls-center-play-icon\">\n</media-icon>\n<media-icon name=\"pause\" class=\"media-button-icon media-play-button-pause-icon video-controls-center-play-icon\">\n</media-icon>\n</media-play-button>\n<media-seek-button class=\"media-button media-seek-button video-controls-center-button video-controls-center-seek\" seconds=\"10\">\n<div class=\"media-seek-button-content\">\n<media-icon name=\"seek\" class=\"media-button-icon\">\n</media-icon>\n<span class=\"media-seek-button-label media-seek-button-forward-label\">10</span>\n</div>\n</media-seek-button>\n</media-controls-group>\n</media-buffering-indicator>\n<media-controls-backdrop class=\"video-controls-backdrop\">\n</media-controls-backdrop>\n<media-controls-content class=\"video-controls video-controls-content\">\n<media-tooltip-group>\n<media-controls-group class=\"video-controls-primary video-controls-compact-primary\">\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-iSAklLIk-0-trigger\">\n<media-icon name=\"restart\" class=\"media-button-icon media-play-button-restart-icon\">\n</media-icon>\n<media-icon name=\"play\" class=\"media-button-icon media-play-button-play-icon\">\n</media-icon>\n<media-icon name=\"pause\" class=\"media-button-icon media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-iSAklLIk-0-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-mute-button commandfor=\"vjs-F3QfBzzz-0-popup\" class=\"media-button media-mute-button video-controls-volume-button\" id=\"vjs-iSAklLIk-0-2-trigger\">\n<media-icon name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon name=\"volume-low\" class=\"media-button-icon media-mute-button-low-icon\">\n</media-icon>\n<media-icon name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-iSAklLIk-0-2-trigger\" delay=\"0\" disabled sticky side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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-popup-surface media-volume-popover\" id=\"vjs-F3QfBzzz-0-popup\">\n<media-volume-slider class=\"media-slider media-volume-slider\" thumb-alignment=\"edge\" orientation=\"vertical\">\n<media-slider-track class=\"media-slider-track\">\n<media-slider-fill class=\"media-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-slider-thumb media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n<media-controls-group class=\"video-time-slider-group\">\n<media-time class=\"media-time-value video-controls-current-time-value\" type=\"current\">\n</media-time>\n<media-time-slider class=\"media-slider media-time-slider video-controls-time-slider\">\n<media-time-slider-chapters class=\"media-time-slider-chapters\">\n<template>\n<div class=\"media-time-slider-chapter\">\n<media-slider-track class=\"media-slider-track media-time-slider-chapter-track\">\n<media-slider-buffer class=\"media-slider-buffer media-time-slider-chapter-layer\">\n</media-slider-buffer>\n<media-slider-fill class=\"media-slider-fill media-time-slider-chapter-layer\">\n</media-slider-fill>\n</media-slider-track>\n</div>\n</template>\n</media-time-slider-chapters>\n<media-slider-thumb class=\"media-slider-thumb media-time-slider-thumb\">\n</media-slider-thumb>\n<media-slider-preview class=\"media-slider-preview\" overflow=\"visible\">\n<media-slider-thumbnail class=\"media-slider-preview-content media-popup-surface media-slider-thumbnail\">\n<slot name=\"thumbnail\">\n<img alt=\"\" aria-hidden=\"true\" decoding=\"async\" class=\"media-slider-thumbnail-image\">\n</slot>\n<media-icon name=\"spinner\" class=\"media-slider-thumbnail-spinner-icon\">\n</media-icon>\n</media-slider-thumbnail>\n<div class=\"media-slider-preview-content media-time-slider-preview-content\">\n<media-time-slider-chapter-title class=\"media-time-slider-chapter-title\">\n</media-time-slider-chapter-title>\n<media-slider-value class=\"media-time-slider-value\" type=\"pointer\">\n</media-slider-value>\n</div>\n</media-slider-preview>\n</media-time-slider>\n<media-time class=\"media-time-toggle video-controls-remaining-time-value\" type=\"remaining\" toggle>\n</media-time>\n</media-controls-group>\n<media-captions-button class=\"media-button media-captions-button video-controls-captions-button\" id=\"vjs-iSAklLIk-0-3-trigger\">\n<media-icon name=\"captions-off\" class=\"media-button-icon media-captions-button-off-icon\">\n</media-icon>\n<media-icon name=\"captions-on\" class=\"media-button-icon media-captions-button-on-icon\">\n</media-icon>\n</media-captions-button>\n<media-tooltip trigger=\"vjs-iSAklLIk-0-3-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<button commandfor=\"vjs-28BtKs3v-0-popup\" class=\"media-button media-settings-menu-trigger video-controls-settings-button\" id=\"vjs-iSAklLIk-0-4-trigger\">\n<media-icon name=\"gear\" class=\"media-button-icon-base media-settings-menu-trigger-icon\">\n</media-icon>\n<media-text class=\"media-settings-menu-trigger-label\" token=\"menu.settings\">Settings</media-text>\n</button>\n<media-tooltip trigger=\"vjs-iSAklLIk-0-4-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-text token=\"menu.settings\">Settings</media-text>\n</media-tooltip>\n<media-menu side=\"top\" align=\"center\" class=\"media-popup media-popup-surface media-menu-popup media-menu-resizable-popup\" id=\"vjs-28BtKs3v-0-popup\">\n<media-menu-content class=\"media-menu-content\">\n<media-menu-item commandfor=\"vjs-ZGpCKm5h-0-content\" class=\"media-menu-trigger-item\">\n<media-icon name=\"switches\" class=\"media-menu-trigger-item-icon\">\n</media-icon>\n<media-text token=\"menu.quality\">Quality</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-ZGpCKm5h-0-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.quality\">Quality</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-quality-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span>\n<span data-part=\"label\">\n</span>\n<sup data-part=\"tier\" class=\"media-menu-tier\">\n</sup>\n</span>\n<span data-part=\"badge\" class=\"media-menu-badge\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-quality-radio-group>\n</media-menu-content>\n<media-menu-item commandfor=\"vjs-rPcYSc7i-0-content\" class=\"media-menu-trigger-item\">\n<media-icon name=\"speech\" class=\"media-menu-trigger-item-icon\">\n</media-icon>\n<media-text token=\"menu.audio\">Audio</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-rPcYSc7i-0-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.audio\">Audio</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-audio-track-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-audio-track-radio-group>\n</media-menu-content>\n<media-menu-item commandfor=\"vjs-8B_qQK6x-0-content\" class=\"media-menu-trigger-item\">\n<media-icon name=\"speed\" class=\"media-menu-trigger-item-icon\">\n</media-icon>\n<media-text token=\"menu.speed\">Speed</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-8B_qQK6x-0-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.speed\">Speed</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-playback-rate-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-playback-rate-radio-group>\n</media-menu-content>\n<media-menu-item commandfor=\"vjs-fVL6fVBf-0-content\" class=\"media-menu-trigger-item\">\n<media-icon name=\"captions-off\" class=\"media-menu-trigger-item-icon\">\n</media-icon>\n<media-text token=\"menu.captions\">Captions</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-fVL6fVBf-0-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.captions\">Captions</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\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<span data-part=\"badge\" class=\"media-menu-badge\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-captions-radio-group>\n</media-menu-content>\n</media-menu-content>\n</media-menu>\n</media-controls-group>\n<media-controls-group class=\"video-controls-secondary video-controls-top-controls\">\n<media-cast-button class=\"media-button media-cast-button\" id=\"vjs-iSAklLIk-0-5-trigger\">\n<media-icon name=\"cast-enter\" class=\"media-button-icon media-cast-button-enter-icon\">\n</media-icon>\n<media-icon name=\"cast-exit\" class=\"media-button-icon media-cast-button-exit-icon\">\n</media-icon>\n</media-cast-button>\n<media-tooltip trigger=\"vjs-iSAklLIk-0-5-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-airplay-button class=\"media-button media-airplay-button\" id=\"vjs-iSAklLIk-0-6-trigger\">\n<media-icon name=\"airplay-enter\" class=\"media-button-icon media-airplay-button-enter-icon\">\n</media-icon>\n<media-icon name=\"airplay-exit\" class=\"media-button-icon media-airplay-button-exit-icon\">\n</media-icon>\n</media-airplay-button>\n<media-tooltip trigger=\"vjs-iSAklLIk-0-6-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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-iSAklLIk-0-7-trigger\">\n<media-icon name=\"pip-enter\" class=\"media-button-icon media-pip-button-enter-icon\">\n</media-icon>\n<media-icon name=\"pip-exit\" class=\"media-button-icon media-pip-button-exit-icon\">\n</media-icon>\n</media-pip-button>\n<media-tooltip trigger=\"vjs-iSAklLIk-0-7-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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-iSAklLIk-0-8-trigger\">\n<media-icon name=\"fullscreen-enter\" class=\"media-button-icon media-fullscreen-button-enter-icon\">\n</media-icon>\n<media-icon name=\"fullscreen-exit\" class=\"media-button-icon media-fullscreen-button-exit-icon\">\n</media-icon>\n</media-fullscreen-button>\n<media-tooltip trigger=\"vjs-iSAklLIk-0-8-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</media-controls-group>\n</media-tooltip-group>\n</media-controls-content>\n</media-controls>\n<media-hotkey keys=\"Space\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"k\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"m\" action=\"toggleMuted\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowRight\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowLeft\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"l\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"j\" action=\"seekStep\">\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=\"0-9\" action=\"seekToPercent\">\n</media-hotkey>\n<media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\">\n</media-hotkey>\n<media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\">\n</media-hotkey>\n<media-hotkey keys=\">\" action=\"speedUp\">\n</media-hotkey>\n<media-hotkey keys=\"<\" action=\"speedDown\">\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=\"seekStep\" region=\"left\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"seekStep\" region=\"right\">\n</media-gesture>\n<media-status-announcer class=\"media-status-announcer\">\n</media-status-announcer>\n<div class=\"video-status-indicators\">\n<media-volume-indicator class=\"media-indicator media-volume-indicator\">\n<media-volume-indicator-fill class=\"media-indicator-content media-volume-indicator-fill\">\n<media-icon name=\"volume-high\" class=\"media-volume-indicator-high-icon\">\n</media-icon>\n<media-icon name=\"volume-low\" class=\"media-volume-indicator-low-icon\">\n</media-icon>\n<media-icon name=\"volume-off\" class=\"media-volume-indicator-off-icon\">\n</media-icon>\n<media-volume-indicator-value class=\"media-volume-indicator-value\">\n</media-volume-indicator-value>\n</media-volume-indicator-fill>\n</media-volume-indicator>\n<media-status-indicator actions=\"toggleSubtitles,toggleFullscreen,togglePictureInPicture\" class=\"media-indicator media-status-indicator\">\n<div class=\"media-indicator-content media-status-indicator-content\">\n<media-icon name=\"captions-on\" class=\"media-status-indicator-captions-on-icon\">\n</media-icon>\n<media-icon name=\"captions-off\" class=\"media-status-indicator-captions-off-icon\">\n</media-icon>\n<media-icon name=\"fullscreen-enter\" class=\"media-status-indicator-fullscreen-enter-icon\">\n</media-icon>\n<media-icon name=\"fullscreen-exit\" class=\"media-status-indicator-fullscreen-exit-icon\">\n</media-icon>\n<media-icon name=\"pip-enter\" class=\"media-status-indicator-pip-enter-icon\">\n</media-icon>\n<media-icon name=\"pip-exit\" class=\"media-status-indicator-pip-exit-icon\">\n</media-icon>\n<media-status-indicator-value class=\"media-status-indicator-value\">\n</media-status-indicator-value>\n</div>\n</media-status-indicator>\n<media-seek-indicator class=\"media-seek-indicator\">\n<media-icon name=\"chevron\" class=\"media-seek-indicator-icon\">\n</media-icon>\n<media-seek-indicator-value class=\"media-seek-indicator-value\">\n</media-seek-indicator-value>\n</media-seek-indicator>\n<media-status-indicator actions=\"togglePaused\" class=\"media-playback-status-indicator\">\n<media-icon name=\"play\" class=\"media-playback-status-indicator-play-icon\">\n</media-icon>\n<media-icon name=\"pause\" class=\"media-playback-status-indicator-pause-icon\">\n</media-icon>\n</media-status-indicator>\n</div>\n</media-container>`);\n"],"mappings":";;;AAGA,MAAa,WACX,eAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAybT"}

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

@@ -11,6 +11,8 @@
     --media-text-shadow-dialog: 0 1px 0 #00000080;
     --media-backdrop-filter-dialog: blur(16px) saturate(120%);
     --media-shadow-tooltip: 0 0 0 1px var(--media-border), 0 4px 6px -1px oklch(0% 0 0 / .2), 0 2px 4px -2px oklch(0% 0 0 / .2);
+    --media-filter-feedback: drop-shadow(0 0 1px oklch(0% 0 0 / .3)) drop-shadow(0 1px 3px oklch(0% 0 0 / .2))
+      drop-shadow(0 2px 12px oklch(0% 0 0 / .15));
     --media-duration-dialog: var(--media-duration);
     --media-duration-indicator: .4s;
     --media-hidden-offset: 100%;
@@ -27,39 +29,39 @@
   }
   .media-skin {
-    --media-background: oklch(0% 0 0);
-    --media-foreground: oklch(100% 0 0);
-    --media-controls: oklch(0% 0 0 / .35);
+    --media-background: #000;
+    --media-foreground: #fff;
+    --media-controls: #00000059;
     --media-controls-foreground: var(--media-foreground);
-    --media-popover: oklch(100% 0 0 / .1);
+    --media-popover: #ffffff1a;
     --media-popover-foreground: var(--media-foreground);
     --media-primary: var(--media-accent-color, var(--media-default-accent-color));
     --media-primary-foreground: var(--media-accent-text-color, var(--media-default-accent-text-color));
-    --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
+    --media-accent: var(--media-accent-color, #ffffff1a);
     --media-accent-foreground: var(--media-accent-text-color, currentColor);
-    --media-muted: oklch(100% 0 0 / .15);
-    --media-muted-foreground: oklch(100% 0 0 / .65);
-    --media-border: oklch(0% 0 0 / .1);
-    --media-ring: oklch(100% 0 0);
-    --media-backdrop: oklch(0% 0 0);
-    --media-live-color: oklch(65% .22 27);
-    --media-shadow-surface: 0 1px 3px 0 oklch(0% 0 0 / .15), 0 1px 2px -1px oklch(0% 0 0 / .15);
+    --media-muted: #ffffff26;
+    --media-muted-foreground: #ffffffa6;
+    --media-border: #0000001a;
+    --media-ring: #fff;
+    --media-backdrop: #000;
+    --media-live-color: #f9423d;
+    --media-shadow-surface: 0 1px 3px 0 #00000026, 0 1px 2px -1px #00000026;
     --media-shadow-surface-inset: inset 0 1px 0 0 #ffffff1a, inset 0 0 0 1px #ffffff0d;
     --media-shadow-thumb: 0 0 0 1px #0000001a, 0 1px 3px 0 #00000059, 0 1px 2px -1px #00000059;
     --media-shadow-tooltip: 0 0 0 1px var(--media-border), var(--media-shadow-surface);
-    --media-shadow-separator: 0 1px 0 0 oklch(100% 0 0 / .075);
+    --media-shadow-separator: 0 1px 0 0 #ffffff13;
     --media-shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));
-    --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
+    --media-shadow-subtle-current-color: transparent;
     --media-text-shadow-dialog: 0 1px 0 #00000040;
-    --media-backdrop-filter-surface: blur(16px) saturate(110%);
+    --media-backdrop-filter-surface: blur(16px) saturate(125%);
     --media-backdrop-filter-indicator: blur(8px);
-    --media-backdrop-filter-dialog: blur(16px) saturate(110%);
+    --media-backdrop-filter-dialog: blur(16px) saturate(125%);
     --media-control-corner-shape: round;
     --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
     --media-controls-radius: var(--media-control-radius);
-    --media-default-accent-color: oklch(100% 0 0);
-    --media-default-accent-text-color: oklch(0% 0 0);
+    --media-default-accent-color: #fff;
+    --media-default-accent-text-color: #000;
     --media-duration-instant: 50ms;
     --media-duration-fast: .1s;
     --media-duration: .15s;
@@ -96,16 +98,31 @@
     --media-slider-preview-label-offset: calc(var(--media-spacing) * 10.5);
     --media-video-border-radius: var(--media-border-radius, 28px);
     --media-scale: 1;
-    --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
+    --media-scrollbar-thumb-color: #80808080;
     --media-spacing: calc(var(--media-scale-unit, 16px) * var(--media-scale) / 4);
     scrollbar-color: var(--media-scrollbar-thumb-color) transparent;
     scrollbar-width: thin;
   }
+  @supports (color: color-mix(in oklab, red, red)) {
+    .media-skin {
+      --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
+      --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
+      --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
+      --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
+    }
+  }
+  @supports (color: oklch(0 0 0)) {
+    .media-skin {
+      --media-live-color: oklch(65% .22 27);
+    }
+  }
   @supports (color: contrast-color(red)) {
     .media-skin {
       --media-primary-foreground: var(--media-accent-text-color, contrast-color(var(--media-primary)));
-      --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, oklch(0% 0 0)))));
+      --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, #000))));
     }
   }
@@ -152,19 +169,20 @@
 @layer base.preset {
   .media-skin:is([data-preset="audio"], [data-preset="live-audio"]) {
-    --media-background: oklch(100% 0 0);
-    --media-foreground: oklch(0% 0 0);
-    --media-controls: oklch(100% 0 0 / .5);
+    --media-background: #fff;
+    --media-foreground: #000;
+    --media-controls: #ffffff80;
     --media-controls-foreground: var(--media-foreground);
     --media-popover: var(--media-controls);
     --media-popover-foreground: var(--media-foreground);
-    --media-surface-border: oklch(0% 0 0 / .05);
+    --media-muted: #0000001a;
+    --media-surface-border: #0000000d;
     --media-primary: var(--media-accent-color, var(--media-foreground));
-    --media-border: oklch(0% 0 0 / .1);
+    --media-border: #0000001a;
     --media-ring: var(--media-foreground);
-    --media-default-accent-color: oklch(0% 0 0);
-    --media-default-accent-text-color: oklch(100% 0 0);
-    --media-internal-accent-text-fallback: oklch(100% 0 0);
+    --media-default-accent-color: #000;
+    --media-default-accent-text-color: #fff;
+    --media-internal-accent-text-fallback: #fff;
     --media-popover-boundary-offset: calc(var(--media-spacing) * 2);
     --media-popover-side-offset: calc(var(--media-spacing) * 3);
     --media-slider-preview-label-offset: calc(var(--media-spacing) * 10);
@@ -176,6 +194,7 @@
       --media-foreground: light-dark(oklch(0% 0 0), oklch(100% 0 0));
       --media-controls: light-dark(oklch(100% 0 0 / .5), oklch(0% 0 0 / .4));
       --media-border: light-dark(oklch(0% 0 0 / .1), oklch(100% 0 0 / .1));
+      --media-muted: light-dark(oklch(0% 0 0 / .1), oklch(100% 0 0 / .1));
       --media-default-accent-color: light-dark(oklch(0% 0 0), oklch(100% 0 0));
       --media-default-accent-text-color: light-dark(oklch(100% 0 0), oklch(0% 0 0));
       --media-internal-accent-text-fallback: light-dark(oklch(100% 0 0), oklch(0% 0 0));
@@ -192,7 +211,7 @@
   @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
     .media-skin:is([data-preset="audio"], [data-preset="live-audio"]) {
       --media-controls: var(--media-background);
-      --media-surface-border: oklch(0% 0 0 / .05);
+      --media-surface-border: #0000000d;
     }
     @supports (color: light-dark(red, red)) {
@@ -250,7 +269,7 @@
   @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
     .media-skin {
       --media-popover: var(--media-background);
-      --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
+      --media-scrollbar-thumb-color: currentColor;
       --media-backdrop-filter-surface: none;
       --media-backdrop-filter-indicator: none;
       --media-backdrop-filter-dialog: none;
@@ -258,6 +277,12 @@
       scrollbar-width: auto;
     }
+    @supports (color: color-mix(in oklab, red, red)) {
+      .media-skin {
+        --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
+      }
+    }
     @supports (color: oklch(from currentColor l c h)) {
       .media-skin {
         --media-scrollbar-thumb-color: oklch(from currentColor l c h / .8);
@@ -426,9 +451,9 @@
     object-position: var(--media-object-position, center);
     width: 100%;
     max-width: 100%;
-    height: 100%;
     margin: 0;
     display: block;
+    height: 100% !important;
   }
   :where(.media-skin[data-theme="neutral"]) .media-button {
@@ -1155,9 +1180,19 @@
     font-variant-numeric: tabular-nums;
   }
+  @supports not (text-fit: shrink) {
+    :where(.media-skin[data-theme="neutral"]) .media-playback-rate-button {
+      font-size: min(1em, calc(4em / (var(--media-playback-rate-length, 3) + 1)));
+    }
+  }
   :where(.media-skin[data-theme="neutral"]) .media-playback-rate-button:after {
+    text-align: center;
+    white-space: nowrap;
     content: attr(data-rate) "×";
-    width: 4ch;
+    text-fit: shrink;
+    width: 80%;
+    min-width: 0;
   }
   :where(.media-skin[data-theme="neutral"]) .media-menu-item-indicator {
@@ -1207,6 +1242,10 @@
     opacity: .5;
   }
+  :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[data-custom] {
+    font-style: italic;
+  }
   :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[data-availability="unavailable"], :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[data-availability="unsupported"] {
     display: none;
   }
@@ -1307,7 +1346,6 @@
   }
   :where(.media-skin[data-theme="neutral"][data-preset="audio"]) .media-menu-content {
-    max-height: inherit;
     overscroll-behavior: none;
     transition-property: translate, filter;
     transition-duration: .15s;
@@ -1329,6 +1367,8 @@
   :where(.media-skin[data-theme="neutral"][data-preset="audio"]) .media-menu-content:not([data-submenu]) {
     inset-inline: var(--media-spacing);
     top: var(--media-spacing);
+    max-height: calc(min(var(--media-menu-available-height, calc(var(--media-spacing) * 56)), calc(var(--media-spacing) * 56)) -
+        (calc(var(--media-spacing) * 2)));
     gap: calc(var(--media-spacing) * .5);
     flex-direction: column;
     display: flex;
@@ -1423,7 +1463,6 @@
   }
   :where(.media-skin[data-theme="neutral"][data-preset="audio"]) .media-menu-radio-group {
-    max-height: inherit;
     gap: calc(var(--media-spacing) * .5);
     anchor-scope: --media-menu-item-highlight-anchor;
     flex-direction: column;

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

@@ -11,6 +11,8 @@
     --media-text-shadow-dialog: 0 1px 0 #00000080;
     --media-backdrop-filter-dialog: blur(16px) saturate(120%);
     --media-shadow-tooltip: 0 0 0 1px var(--media-border), 0 4px 6px -1px oklch(0% 0 0 / .2), 0 2px 4px -2px oklch(0% 0 0 / .2);
+    --media-filter-feedback: drop-shadow(0 0 1px oklch(0% 0 0 / .3)) drop-shadow(0 1px 3px oklch(0% 0 0 / .2))
+      drop-shadow(0 2px 12px oklch(0% 0 0 / .15));
     --media-duration-dialog: var(--media-duration);
     --media-duration-indicator: .4s;
     --media-hidden-offset: 100%;
@@ -27,39 +29,39 @@
   }
   .media-skin {
-    --media-background: oklch(0% 0 0);
-    --media-foreground: oklch(100% 0 0);
-    --media-controls: oklch(0% 0 0 / .35);
+    --media-background: #000;
+    --media-foreground: #fff;
+    --media-controls: #00000059;
     --media-controls-foreground: var(--media-foreground);
-    --media-popover: oklch(100% 0 0 / .1);
+    --media-popover: #ffffff1a;
     --media-popover-foreground: var(--media-foreground);
     --media-primary: var(--media-accent-color, var(--media-default-accent-color));
     --media-primary-foreground: var(--media-accent-text-color, var(--media-default-accent-text-color));
-    --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
+    --media-accent: var(--media-accent-color, #ffffff1a);
     --media-accent-foreground: var(--media-accent-text-color, currentColor);
-    --media-muted: oklch(100% 0 0 / .15);
-    --media-muted-foreground: oklch(100% 0 0 / .65);
-    --media-border: oklch(0% 0 0 / .1);
-    --media-ring: oklch(100% 0 0);
-    --media-backdrop: oklch(0% 0 0);
-    --media-live-color: oklch(65% .22 27);
-    --media-shadow-surface: 0 1px 3px 0 oklch(0% 0 0 / .15), 0 1px 2px -1px oklch(0% 0 0 / .15);
+    --media-muted: #ffffff26;
+    --media-muted-foreground: #ffffffa6;
+    --media-border: #0000001a;
+    --media-ring: #fff;
+    --media-backdrop: #000;
+    --media-live-color: #f9423d;
+    --media-shadow-surface: 0 1px 3px 0 #00000026, 0 1px 2px -1px #00000026;
     --media-shadow-surface-inset: inset 0 1px 0 0 #ffffff1a, inset 0 0 0 1px #ffffff0d;
     --media-shadow-thumb: 0 0 0 1px #0000001a, 0 1px 3px 0 #00000059, 0 1px 2px -1px #00000059;
     --media-shadow-tooltip: 0 0 0 1px var(--media-border), var(--media-shadow-surface);
-    --media-shadow-separator: 0 1px 0 0 oklch(100% 0 0 / .075);
+    --media-shadow-separator: 0 1px 0 0 #ffffff13;
     --media-shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));
-    --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
+    --media-shadow-subtle-current-color: transparent;
     --media-text-shadow-dialog: 0 1px 0 #00000040;
-    --media-backdrop-filter-surface: blur(16px) saturate(110%);
+    --media-backdrop-filter-surface: blur(16px) saturate(125%);
     --media-backdrop-filter-indicator: blur(8px);
-    --media-backdrop-filter-dialog: blur(16px) saturate(110%);
+    --media-backdrop-filter-dialog: blur(16px) saturate(125%);
     --media-control-corner-shape: round;
     --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
     --media-controls-radius: var(--media-control-radius);
-    --media-default-accent-color: oklch(100% 0 0);
-    --media-default-accent-text-color: oklch(0% 0 0);
+    --media-default-accent-color: #fff;
+    --media-default-accent-text-color: #000;
     --media-duration-instant: 50ms;
     --media-duration-fast: .1s;
     --media-duration: .15s;
@@ -96,16 +98,31 @@
     --media-slider-preview-label-offset: calc(var(--media-spacing) * 10.5);
     --media-video-border-radius: var(--media-border-radius, 28px);
     --media-scale: 1;
-    --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
+    --media-scrollbar-thumb-color: #80808080;
     --media-spacing: calc(var(--media-scale-unit, 16px) * var(--media-scale) / 4);
     scrollbar-color: var(--media-scrollbar-thumb-color) transparent;
     scrollbar-width: thin;
   }
+  @supports (color: color-mix(in oklab, red, red)) {
+    .media-skin {
+      --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
+      --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
+      --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
+      --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
+    }
+  }
+  @supports (color: oklch(0 0 0)) {
+    .media-skin {
+      --media-live-color: oklch(65% .22 27);
+    }
+  }
   @supports (color: contrast-color(red)) {
     .media-skin {
       --media-primary-foreground: var(--media-accent-text-color, contrast-color(var(--media-primary)));
-      --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, oklch(0% 0 0)))));
+      --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, #000))));
     }
   }
@@ -152,19 +169,20 @@
 @layer base.preset {
   .media-skin:is([data-preset="audio"], [data-preset="live-audio"]) {
-    --media-background: oklch(100% 0 0);
-    --media-foreground: oklch(0% 0 0);
-    --media-controls: oklch(100% 0 0 / .5);
+    --media-background: #fff;
+    --media-foreground: #000;
+    --media-controls: #ffffff80;
     --media-controls-foreground: var(--media-foreground);
     --media-popover: var(--media-controls);
     --media-popover-foreground: var(--media-foreground);
-    --media-surface-border: oklch(0% 0 0 / .05);
+    --media-muted: #0000001a;
+    --media-surface-border: #0000000d;
     --media-primary: var(--media-accent-color, var(--media-foreground));
-    --media-border: oklch(0% 0 0 / .1);
+    --media-border: #0000001a;
     --media-ring: var(--media-foreground);
-    --media-default-accent-color: oklch(0% 0 0);
-    --media-default-accent-text-color: oklch(100% 0 0);
-    --media-internal-accent-text-fallback: oklch(100% 0 0);
+    --media-default-accent-color: #000;
+    --media-default-accent-text-color: #fff;
+    --media-internal-accent-text-fallback: #fff;
     --media-popover-boundary-offset: calc(var(--media-spacing) * 2);
     --media-popover-side-offset: calc(var(--media-spacing) * 3);
     --media-slider-preview-label-offset: calc(var(--media-spacing) * 10);
@@ -176,6 +194,7 @@
       --media-foreground: light-dark(oklch(0% 0 0), oklch(100% 0 0));
       --media-controls: light-dark(oklch(100% 0 0 / .5), oklch(0% 0 0 / .4));
       --media-border: light-dark(oklch(0% 0 0 / .1), oklch(100% 0 0 / .1));
+      --media-muted: light-dark(oklch(0% 0 0 / .1), oklch(100% 0 0 / .1));
       --media-default-accent-color: light-dark(oklch(0% 0 0), oklch(100% 0 0));
       --media-default-accent-text-color: light-dark(oklch(100% 0 0), oklch(0% 0 0));
       --media-internal-accent-text-fallback: light-dark(oklch(100% 0 0), oklch(0% 0 0));
@@ -192,7 +211,7 @@
   @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
     .media-skin:is([data-preset="audio"], [data-preset="live-audio"]) {
       --media-controls: var(--media-background);
-      --media-surface-border: oklch(0% 0 0 / .05);
+      --media-surface-border: #0000000d;
     }
     @supports (color: light-dark(red, red)) {
@@ -250,7 +269,7 @@
   @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
     .media-skin {
       --media-popover: var(--media-background);
-      --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
+      --media-scrollbar-thumb-color: currentColor;
       --media-backdrop-filter-surface: none;
       --media-backdrop-filter-indicator: none;
       --media-backdrop-filter-dialog: none;
@@ -258,6 +277,12 @@
       scrollbar-width: auto;
     }
+    @supports (color: color-mix(in oklab, red, red)) {
+      .media-skin {
+        --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
+      }
+    }
     @supports (color: oklch(from currentColor l c h)) {
       .media-skin {
         --media-scrollbar-thumb-color: oklch(from currentColor l c h / .8);
@@ -426,9 +451,9 @@
     object-position: var(--media-object-position, center);
     width: 100%;
     max-width: 100%;
-    height: 100%;
     margin: 0;
     display: block;
+    height: 100% !important;
   }
   :where(.media-skin[data-theme="neutral"]) .media-button {