@videojs/html 10.0.0-beta.27 → 10.0.0-beta.29

package/dist/dev/define/live-video/minimal-skin.tailwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.tailwind.js","names":[],"sources":["../../../../src/define/live-video/minimal-skin.tailwind.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render/minimal';\nimport {\n  bufferingIndicator,\n  button,\n  buttonGroupEnd,\n  buttonGroupStart,\n  container,\n  controls,\n  error,\n  icon,\n  iconState,\n  inputIndicatorOverlay,\n  menu,\n  overlay,\n  popup,\n  poster,\n  slider,\n  spacer,\n  statusIndicator,\n  volumeIndicator,\n} from '@videojs/skins/minimal/tailwind/video.tailwind';\nimport { createTemplate } from '@videojs/utils/dom';\nimport { cn } from '@videojs/utils/style';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\n\n// Register the live video player, container, and minimal UI custom elements.\nimport './minimal-ui';\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${container(true)}\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <media-poster class=\"${poster(true)}\">\n        <slot name=\"poster\"></slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"${bufferingIndicator}\">\n        ${renderIcon('spinner')}\n      </media-buffering-indicator>\n\n      <media-error-dialog class=\"${error.root}\">\n        <div class=\"${error.dialog}\">\n          <div class=\"${error.content}\">\n            <media-alert-dialog-title class=\"${error.title}\"></media-alert-dialog-title>\n            <media-alert-dialog-description class=\"${error.description}\"></media-alert-dialog-description>\n          </div>\n          <div class=\"${error.actions}\">\n            <media-alert-dialog-close class=\"${cn(button.base, button.primary)}\"></media-alert-dialog-close>\n          </div>\n        </div>\n      </media-error-dialog>\n\n      <media-controls data-controls=\"\" class=\"${controls}\">\n        <media-tooltip-group>\n          <div class=\"${buttonGroupStart}\">\n              <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.play.button)}\">\n                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n              </media-play-button>\n              <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-live-button class=\"${cn(button.base, button.subtle, button.live)}\"></media-live-button>\n\n              <media-mute-button commandfor=\"live-video-volume-popover\" class=\"${cn(button.base, button.subtle, button.icon, iconState.mute.button)}\">\n                ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n                ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n                ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n              </media-mute-button>\n\n              <media-popover id=\"live-video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"right\" class=\"${cn(popup.volume)}\">\n                <media-volume-slider class=\"${slider.root}\" orientation=\"horizontal\" thumb-alignment=\"edge\">\n                  <media-slider-track class=\"${slider.track}\">\n                    <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n                  </media-slider-track>\n                  <media-slider-thumb class=\"${slider.thumb.base}\"></media-slider-thumb>\n                </media-volume-slider>\n              </media-popover>\n          </div>\n\n          <div class=\"${spacer}\" aria-hidden=\"true\"></div>\n\n          <div class=\"${buttonGroupEnd}\">\n              <media-captions-button menu-for=\"captions-menu\" commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.captions.button)}\">\n                ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n                ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n              </media-captions-button>\n              <media-menu id=\"captions-menu\" side=\"top\" align=\"center\" class=\"${cn(popup.popover, menu.root)}\">\n                <media-captions-radio-group class=\"${menu.group}\">\n                  <template>\n                    <media-menu-radio-item class=\"${menu.item}\">\n                      <span data-part=\"label\"></span>\n                      <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n                        ${renderIcon('check', { class: cn(icon, menu.icon) })}\n                      </media-menu-item-indicator>\n                    </media-menu-radio-item>\n                  </template>\n                </media-captions-radio-group>\n              </media-menu>\n              <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n              <media-cast-button commandfor=\"cast-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.cast.button)}\">\n                ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}\n                ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}\n              </media-cast-button>\n              <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n              <media-airplay-button commandfor=\"airplay-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}\">\n                ${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}\n                ${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}\n              </media-airplay-button>\n              <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n              <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.pip.button)}\">\n                ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}\n                ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}\n              </media-pip-button>\n              <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n              <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}\">\n                ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n                ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n              </media-fullscreen-button>\n              <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"${overlay}\"></div>\n\n      <!-- Hotkeys -->\n      <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n      <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n      <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n      <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n      <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n      <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n\n      <!-- Gestures -->\n      <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n      <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n\n      <!-- Input Indicators -->\n      <media-status-announcer class=\"sr-only\"></media-status-announcer>\n      <div class=\"${inputIndicatorOverlay}\">\n        <media-volume-indicator hidden class=\"${volumeIndicator.root}\">\n          <media-volume-indicator-fill class=\"${volumeIndicator.content}\">\n            ${renderIcon('volume-high', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.high) })}\n            ${renderIcon('volume-low', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.low) })}\n            ${renderIcon('volume-off', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.off) })}\n            <div aria-hidden=\"true\" class=\"${volumeIndicator.progress}\"></div>\n            <media-volume-indicator-value class=\"${volumeIndicator.value}\"></media-volume-indicator-value>\n          </media-volume-indicator-fill>\n        </media-volume-indicator>\n        <media-status-indicator\n          hidden\n          actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\"\n          class=\"${statusIndicator.root}\"\n        >\n          <div class=\"${statusIndicator.content}\">\n            ${renderIcon('captions-on', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOn) })}\n            ${renderIcon('captions-off', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOff) })}\n            ${renderIcon('fullscreen-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenEnter) })}\n            ${renderIcon('fullscreen-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenExit) })}\n            ${renderIcon('pip-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipEnter) })}\n            ${renderIcon('pip-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipExit) })}\n            <media-status-indicator-value class=\"${statusIndicator.value}\"></media-status-indicator-value>\n          </div>\n        </media-status-indicator>\n        <media-status-indicator hidden actions=\"togglePaused\" class=\"${statusIndicator.playback.root}\">\n          ${renderIcon('play', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.play) })}\n          ${renderIcon('pause', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.pause) })}\n        </media-status-indicator>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class MinimalLiveVideoSkinTailwindElement extends SkinElement {\n  static readonly tagName = 'live-video-minimal-skin-tailwind';\n  static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(MinimalLiveVideoSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalLiveVideoSkinTailwindElement.tagName]: MinimalLiveVideoSkinTailwindElement;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"minimal-skin.tailwind.js","names":[],"sources":["../../../../src/define/live-video/minimal-skin.tailwind.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render/minimal';\nimport {\n  bufferingIndicator,\n  button,\n  buttonGroupEnd,\n  buttonGroupStart,\n  container,\n  controls,\n  error,\n  icon,\n  iconState,\n  inputIndicatorOverlay,\n  menu,\n  overlay,\n  popup,\n  poster,\n  slider,\n  spacer,\n  statusIndicator,\n  volumeIndicator,\n} from '@videojs/skins/minimal/tailwind/video.tailwind';\nimport { createTemplate } from '@videojs/utils/dom';\nimport { cn } from '@videojs/utils/style';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\n\n// Register the live video player, container, and minimal UI custom elements.\nimport './minimal-ui';\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${container(true)}\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <media-poster class=\"${poster(true)}\">\n        <slot name=\"poster\">\n          <img alt=\"\" decoding=\"async\">\n        </slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"${bufferingIndicator}\">\n        ${renderIcon('spinner')}\n      </media-buffering-indicator>\n\n      <media-error-dialog class=\"${error.root}\">\n        <div class=\"${error.dialog}\">\n          <div class=\"${error.content}\">\n            <media-alert-dialog-title class=\"${error.title}\"></media-alert-dialog-title>\n            <media-alert-dialog-description class=\"${error.description}\"></media-alert-dialog-description>\n          </div>\n          <div class=\"${error.actions}\">\n            <media-alert-dialog-close class=\"${cn(button.base, button.primary)}\"></media-alert-dialog-close>\n          </div>\n        </div>\n      </media-error-dialog>\n\n      <media-controls data-controls=\"\" class=\"${controls}\">\n        <media-tooltip-group>\n          <div class=\"${buttonGroupStart}\">\n              <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.play.button)}\">\n                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n              </media-play-button>\n              <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-live-button class=\"${cn(button.base, button.subtle, button.live)}\"></media-live-button>\n\n              <media-mute-button commandfor=\"live-video-volume-popover\" class=\"${cn(button.base, button.subtle, button.icon, iconState.mute.button)}\">\n                ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n                ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n                ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n              </media-mute-button>\n\n              <media-popover id=\"live-video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"right\" class=\"${cn(popup.volume)}\">\n                <media-volume-slider class=\"${slider.root}\" orientation=\"horizontal\" thumb-alignment=\"edge\">\n                  <media-slider-track class=\"${slider.track}\">\n                    <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n                  </media-slider-track>\n                  <media-slider-thumb class=\"${slider.thumb.base}\"></media-slider-thumb>\n                </media-volume-slider>\n              </media-popover>\n          </div>\n\n          <div class=\"${spacer}\" aria-hidden=\"true\"></div>\n\n          <div class=\"${buttonGroupEnd}\">\n              <media-captions-button menu-for=\"captions-menu\" commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.captions.button)}\">\n                ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n                ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n              </media-captions-button>\n              <media-menu id=\"captions-menu\" side=\"top\" align=\"center\" class=\"${cn(popup.popover, menu.root)}\">\n                <media-captions-radio-group class=\"${menu.group}\">\n                  <template>\n                    <media-menu-radio-item class=\"${menu.item}\">\n                      <span data-part=\"label\"></span>\n                      <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n                        ${renderIcon('check', { class: cn(icon, menu.icon) })}\n                      </media-menu-item-indicator>\n                    </media-menu-radio-item>\n                  </template>\n                </media-captions-radio-group>\n              </media-menu>\n              <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n              <media-cast-button commandfor=\"cast-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.cast.button)}\">\n                ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}\n                ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}\n              </media-cast-button>\n              <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n              <media-airplay-button commandfor=\"airplay-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}\">\n                ${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}\n                ${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}\n              </media-airplay-button>\n              <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n              <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.pip.button)}\">\n                ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}\n                ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}\n              </media-pip-button>\n              <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n              <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}\">\n                ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n                ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n              </media-fullscreen-button>\n              <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"${overlay}\"></div>\n\n      <!-- Hotkeys -->\n      <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n      <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n      <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n      <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n      <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n      <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n\n      <!-- Gestures -->\n      <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n      <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n\n      <!-- Input Indicators -->\n      <media-status-announcer class=\"sr-only\"></media-status-announcer>\n      <div class=\"${inputIndicatorOverlay}\">\n        <media-volume-indicator hidden class=\"${volumeIndicator.root}\">\n          <media-volume-indicator-fill class=\"${volumeIndicator.content}\">\n            ${renderIcon('volume-high', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.high) })}\n            ${renderIcon('volume-low', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.low) })}\n            ${renderIcon('volume-off', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.off) })}\n            <div aria-hidden=\"true\" class=\"${volumeIndicator.progress}\"></div>\n            <media-volume-indicator-value class=\"${volumeIndicator.value}\"></media-volume-indicator-value>\n          </media-volume-indicator-fill>\n        </media-volume-indicator>\n        <media-status-indicator\n          hidden\n          actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\"\n          class=\"${statusIndicator.root}\"\n        >\n          <div class=\"${statusIndicator.content}\">\n            ${renderIcon('captions-on', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOn) })}\n            ${renderIcon('captions-off', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOff) })}\n            ${renderIcon('fullscreen-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenEnter) })}\n            ${renderIcon('fullscreen-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenExit) })}\n            ${renderIcon('pip-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipEnter) })}\n            ${renderIcon('pip-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipExit) })}\n            <media-status-indicator-value class=\"${statusIndicator.value}\"></media-status-indicator-value>\n          </div>\n        </media-status-indicator>\n        <media-status-indicator hidden actions=\"togglePaused\" class=\"${statusIndicator.playback.root}\">\n          ${renderIcon('play', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.play) })}\n          ${renderIcon('pause', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.pause) })}\n        </media-status-indicator>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class MinimalLiveVideoSkinTailwindElement extends SkinElement {\n  static readonly tagName = 'live-video-minimal-skin-tailwind';\n  static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(MinimalLiveVideoSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalLiveVideoSkinTailwindElement.tagName]: MinimalLiveVideoSkinTailwindElement;\n  }\n}\n"],"mappings":"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"}

package/dist/dev/define/live-video/skin.css

@@ -614,7 +614,7 @@ media-container {
     position: relative;
     display: block;
     max-width: var(--thumbnail-max-width);
-    max-height: var(--max-height);
+    max-height: var(--thumbnail-max-height);
     overflow: clip;
     border-radius: inherit;
 
@@ -666,9 +666,13 @@ media-container {
 }
 
 .media-default-skin .media-slider {
-  --thumb-size: calc(var(--spacing) * 2.5);
-  --thumb-active-size: calc(var(--spacing) * 3);
-  --track-border-radius: calc(Infinity * 1px);
+  --track-size: calc(var(--spacing) * 1);
+  --track-highlighted-size: calc(var(--spacing) * 1.75);
+  --track-border-radius: 99px;
+  --thumb-size: calc(var(--spacing) * 3);
+  --chapter-gap: calc(var(--spacing) * 1);
+  --chapter-inset-start: calc(var(--chapter-gap) / 2);
+  --chapter-inset-end: calc(var(--chapter-gap) / 2);
 
   position: relative;
   display: flex;
@@ -699,10 +703,10 @@ media-container {
 
     &[data-orientation="horizontal"] {
       width: 100%;
-      height: calc(var(--spacing) * 1);
+      height: var(--track-size);
     }
     &[data-orientation="vertical"] {
-      width: calc(var(--spacing) * 1);
+      width: var(--track-size);
       height: 100%;
     }
   }
@@ -718,13 +722,22 @@ media-container {
       inset-block: 0;
       left: 0;
       width: 100%;
-      transition-property: clip-path;
     }
     &[data-orientation="vertical"] {
       inset-inline: 0;
       bottom: 0;
       height: 100%;
-      transition-property: clip-path;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: clip-path 200ms ease-out;
+    }
+  }
+  &[data-dragging],
+  &[data-seeking] {
+    .media-slider__fill,
+    .media-slider__buffer {
+      transition-duration: 0ms;
     }
   }
 
@@ -751,6 +764,14 @@ media-container {
       clip-path: inset(calc(100% - var(--media-slider-fill)) 0 0 0 round var(--track-border-radius));
     }
   }
+  &[data-dragging] {
+    .media-slider__fill[data-orientation="horizontal"] {
+      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+    }
+    .media-slider__fill[data-orientation="vertical"] {
+      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    }
+  }
 
   /* Chapters */
   .media-slider__chapters {
@@ -774,10 +795,6 @@ media-container {
   }
 
   .media-slider__chapter {
-    --chapter-gap: calc(var(--spacing) * 1);
-    --chapter-inset-start: 0.5;
-    --chapter-inset-end: 0.5;
-
     position: absolute;
     inset: 0;
     display: flex;
@@ -788,16 +805,13 @@ media-container {
     border-radius: inherit;
 
     &:first-child {
-      --chapter-inset-start: 0;
+      --chapter-inset-start: 0px;
     }
     &:last-child {
-      --chapter-inset-end: 0;
+      --chapter-inset-end: 0px;
     }
 
     .media-slider__chapter-track {
-      --chapter-track-size: calc(var(--spacing) * 1);
-      --chapter-track-highlighted-size: calc(var(--spacing) * 1.75);
-
       border-radius: inherit;
 
       @media (prefers-reduced-motion: no-preference) {
@@ -810,16 +824,15 @@ media-container {
       clip-path: inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start));
 
       .media-slider__chapter-track {
-        height: var(--chapter-track-size);
+        height: var(--track-size);
         clip-path: inset(
-          0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
-            calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) round
-            var(--track-border-radius)
+          0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
+            calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
         );
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        height: var(--chapter-track-highlighted-size);
+        height: var(--track-highlighted-size);
       }
     }
 
@@ -827,59 +840,19 @@ media-container {
       clip-path: inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0);
 
       .media-slider__chapter-track {
-        width: var(--chapter-track-size);
+        width: var(--track-size);
         clip-path: inset(
-          calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
-            calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) 0 round
-            var(--track-border-radius)
+          calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
+            calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
         );
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        width: var(--chapter-track-highlighted-size);
+        width: var(--track-highlighted-size);
       }
     }
   }
 
-  /* Dragging — thumb and fill follow the pointer position */
-  &[data-dragging] {
-    .media-slider__thumb[data-orientation="horizontal"] {
-      left: var(--media-slider-pointer);
-    }
-    .media-slider__thumb[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-pointer));
-    }
-    .media-slider__fill[data-orientation="horizontal"] {
-      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
-    }
-    .media-slider__fill[data-orientation="vertical"] {
-      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
-    }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .media-slider__thumb {
-      transition-property: opacity, height, width, outline-offset, left, top;
-    }
-    .media-slider__fill {
-      transition-timing-function: linear;
-      transition-duration: 200ms;
-    }
-    .media-slider__buffer {
-      transition-timing-function: ease-out;
-      transition-duration: 250ms;
-    }
-  }
-
-  &[data-dragging],
-  &[data-seeking] {
-    .media-slider__thumb,
-    .media-slider__fill,
-    .media-slider__buffer {
-      transition-duration: 0ms;
-    }
-  }
-
   /* Thumb */
   .media-slider__thumb {
     position: absolute;
@@ -896,10 +869,8 @@ media-container {
       0 1px 3px 0 oklch(0 0 0 / 0.35),
       0 1px 2px -1px oklch(0 0 0 / 0.35);
     opacity: 0;
+    scale: 0.8;
     translate: -50% -50%;
-    transition-timing-function: ease-out;
-    transition-duration: 150ms;
-    transition-property: opacity, height, width, outline-offset;
 
     &[data-orientation="horizontal"] {
       top: 50%;
@@ -916,22 +887,12 @@ media-container {
       opacity: 1;
     }
 
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        outline-color: oklch(from currentColor l c h / 0.15);
-        outline-offset: 0;
-      }
-    }
-
     &::after {
       position: absolute;
       inset: -4px;
       content: "";
       border-radius: inherit;
       box-shadow: 0 0 0 2px currentColor;
-      transition-timing-function: ease-out;
-      transition-duration: 150ms;
-      transition-property: opacity, scale;
     }
 
     &:not(:focus-visible)::after {
@@ -940,37 +901,70 @@ media-container {
     }
 
     &.media-slider__thumb--persistent {
-      width: var(--thumb-active-size);
-      height: var(--thumb-active-size);
       opacity: 1;
+      scale: 1;
     }
-  }
 
-  &:active .media-slider__thumb,
-  &:focus-within .media-slider__thumb {
-    width: var(--thumb-active-size);
-    height: var(--thumb-active-size);
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        outline-color: oklch(from currentColor l c h / 0.15);
+        outline-offset: 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-timing-function: ease-out;
+      transition-duration: 150ms;
+      transition-property: opacity, outline-offset, left, top, scale;
+
+      &::after {
+        transition-timing-function: ease-out;
+        transition-duration: 150ms;
+        transition-property: opacity, scale;
+      }
+    }
   }
 
   @media (hover: hover) and (pointer: fine) {
     &:hover .media-slider__thumb {
       opacity: 1;
+      scale: 1;
+    }
+  }
+
+  &[data-dragging] .media-slider__thumb {
+    opacity: 1;
+    scale: 0.9;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-property: opacity, outline-offset, scale;
+    }
+
+    &[data-orientation="horizontal"] {
+      left: var(--media-slider-pointer);
+    }
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-pointer));
     }
   }
 
   /* Preview */
   .media-slider__preview {
-    --max-width: min(calc(var(--spacing) * 48), 100cqi);
-    --max-height: calc(var(--spacing) * 32);
+    --max-size-factor: 36;
+    --max-size: min(calc(var(--spacing) * var(--max-size-factor)), 100cqi);
 
-    min-width: var(--max-width);
+    min-width: var(--max-size);
     height: calc(var(--spacing) * 1);
 
+    @container media-root (width > 42rem) {
+      --max-size-factor: 48;
+    }
+
     .media-slider__thumbnail,
     .media-slider__value {
       position: absolute;
       left: 50%;
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       opacity: 0;
       filter: blur(8px);
       transform-origin: bottom;
@@ -981,7 +975,8 @@ media-container {
     }
 
     .media-slider__thumbnail {
-      --thumbnail-max-width: var(--max-width);
+      --thumbnail-max-width: var(--max-size);
+      --thumbnail-max-height: var(--max-size);
       bottom: calc(100% + (var(--spacing) * 9));
     }
 
@@ -995,8 +990,8 @@ media-container {
 
     .media-slider__chapter-title {
       min-width: 0;
-      max-width: var(--max-width);
-      padding-inline: calc(var(--spacing) * 3);
+      max-width: var(--max-size);
+      padding-inline: calc(var(--spacing) * 6);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -1027,14 +1022,15 @@ media-container {
       transition-duration: 200ms;
       transition-property: opacity, scale;
     }
+  }
 
-    &[data-pointing]:not([data-dragging])::before,
-    &[data-pointing] :is(.media-slider__thumbnail, .media-slider__value),
-    &[data-interactive]:not([data-pointing]):not([data-dragging]) :is(.media-slider__value, .media-slider__thumbnail) {
-      opacity: 1;
-      filter: blur(0);
-      scale: 1;
-    }
+  &:is([data-pointing], :has(:focus-visible))
+    .media-slider__preview
+    :is(.media-slider__value, .media-slider__thumbnail),
+  .media-slider__preview[data-pointing]:not([data-dragging])::before {
+    opacity: 1;
+    filter: blur(0);
+    scale: 1;
   }
 }
 
@@ -1741,8 +1737,8 @@ media-container {
    still in the DOM — just `display: none` — so its animations would keep
    running. Set the variables to `none` to short-circuit the keyframes. */
 .media-button--airplay:not([data-airplay-state="connected"]) {
-  --media-icon--airplay__fill-animation: none;
-  --media-icon--airplay__triangle-animation: none;
+  --media-icon-airplay-fill-animation: none;
+  --media-icon-airplay-triangle-animation: none;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -1838,6 +1834,10 @@ media-container {
       --scale: 1.75;
     }
   }
+
+  * {
+    --focus-ring-color: oklch(1 0 0);
+  }
 }
 
 /* Error Dialog  */
@@ -1905,6 +1905,12 @@ media-container {
   .media-controls--primary,
   .media-controls--secondary {
     position: absolute;
+  }
+  /* Primary must be higher for the preview/thumbnail */
+  .media-controls--primary {
+    z-index: 20;
+  }
+  .media-controls--secondary {
     z-index: 10;
   }
 
@@ -1921,6 +1927,11 @@ media-container {
     transform-origin: top;
   }
 
+  .media-time-controls {
+    flex: 1;
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
   @container media-root (width < 32rem) {
     .media-controls--primary,
     .media-controls--secondary {
@@ -1971,6 +1982,10 @@ media-container {
         }
       }
     }
+
+    .media-button--captions {
+      display: none;
+    }
   }
 
   @container media-root (width >= 32rem) {
@@ -2007,11 +2022,10 @@ media-container {
         translate: 0 4px;
       }
     }
-  }
 
-  .media-time-controls {
-    flex: 1;
-    padding-inline: calc(var(--spacing) * 3);
+    .media-time-controls {
+      padding-inline: calc(var(--spacing) * 3);
+    }
   }
 
   @media (pointer: fine) {

package/dist/dev/define/live-video/skin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/define/live-video/skin.ts"],"mappings":";;;cAyLa,6BAA6B;kBACxB;SACT,qCAAM;SACN,UAAQ;;QAKT;YACI;KACP,qBAAqB,UAAU"}
+{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/define/live-video/skin.ts"],"mappings":";;;cA2La,6BAA6B;kBACxB;SACT,qCAAM;SACN,UAAQ;;QAKT;YACI;KACP,qBAAqB,UAAU"}

package/dist/dev/define/live-video/skin.js

@@ -13,7 +13,9 @@ function getTemplateHTML() {
       <slot></slot>
 
       <media-poster>
-        <slot name="poster"></slot>
+        <slot name="poster">
+          <img alt="" decoding="async">
+        </slot>
       </media-poster>
 
       <media-buffering-indicator class="media-buffering-indicator">

package/dist/dev/define/live-video/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/define/live-video/skin.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\nimport styles from './skin.css?inline';\n\n// Register the live video player, container, and all UI custom elements.\nimport './ui';\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-default-skin media-default-skin--video\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <media-poster>\n        <slot name=\"poster\"></slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        ${renderIcon('spinner', { class: 'media-icon' })}\n      </media-buffering-indicator>\n\n      <media-error-dialog class=\"media-error\">\n        <div class=\"media-error__dialog media-surface\">\n          <div class=\"media-error__content\">\n            <media-alert-dialog-title class=\"media-error__title\"></media-alert-dialog-title>\n            <media-alert-dialog-description class=\"media-error__description\"></media-alert-dialog-description>\n          </div>\n          <div class=\"media-error__actions\">\n            <media-alert-dialog-close class=\"media-button media-button--primary\"></media-alert-dialog-close>\n          </div>\n        </div>\n      </media-error-dialog>\n\n      <media-controls class=\"media-surface media-controls media-controls--root\">\n        <media-tooltip-group>\n          <div class=\"media-surface media-controls media-controls--primary\">\n            <div class=\"media-button-group\">\n              <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--play\">\n                ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n                ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n                ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n              </media-play-button>\n              <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-live-button class=\"media-button media-button--subtle media-button--live\"></media-live-button>\n            </div>\n\n            <div class=\"media-time-controls\" aria-hidden=\"true\"></div>\n\n            <div class=\"media-button-group\">\n              <media-mute-button commandfor=\"live-video-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n                ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n                ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n                ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n              </media-mute-button>\n\n              <media-popover id=\"live-video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-surface media-popover media-popover--volume\">\n                <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n                  <media-slider-track class=\"media-slider__track\">\n                    <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                  </media-slider-track>\n                  <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n                </media-volume-slider>\n              </media-popover>\n\n              <media-captions-button menu-for=\"captions-menu\" commandfor=\"captions-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--captions\">\n                ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n                ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n              </media-captions-button>\n              <media-menu id=\"captions-menu\" side=\"top\" align=\"center\" class=\"media-surface media-popover media-menu media-menu--captions\">\n                <media-captions-radio-group class=\"media-menu__group\">\n                  <template>\n                    <media-menu-radio-item class=\"media-menu__item\">\n                      <span data-part=\"label\"></span>\n                      <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n                        ${renderIcon('check', { class: 'media-icon' })}\n                      </media-menu-item-indicator>\n                    </media-menu-radio-item>\n                  </template>\n                </media-captions-radio-group>\n              </media-menu>\n              <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-cast-button commandfor=\"cast-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--cast\">\n                ${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}\n                ${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}\n              </media-cast-button>\n              <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-airplay-button commandfor=\"airplay-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--airplay\">\n                ${renderIcon('airplay-enter', { class: 'media-icon media-icon--airplay-enter' })}\n                ${renderIcon('airplay-exit', { class: 'media-icon media-icon--airplay-exit' })}\n              </media-airplay-button>\n              <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--pip\">\n                ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n                ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n              </media-pip-button>\n              <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--fullscreen\">\n                ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n                ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n              </media-fullscreen-button>\n              <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n            </div>\n          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n\n      <!-- Hotkeys -->\n      <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n      <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n      <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n      <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n      <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n      <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n\n      <!-- Gestures -->\n      <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n      <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n\n      <!-- Input Indicators -->\n      <media-status-announcer class=\"media-sr-only\"></media-status-announcer>\n      <div class=\"media-input-indicator-overlay\">\n        <media-volume-indicator hidden class=\"media-surface media-volume-indicator\">\n          <media-volume-indicator-fill class=\"media-volume-indicator__content\">\n            ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n            ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n            ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n            <media-volume-indicator-value class=\"media-volume-indicator__value\"></media-volume-indicator-value>\n          </media-volume-indicator-fill>\n        </media-volume-indicator>\n        <media-status-indicator\n          hidden\n          actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\"\n          class=\"media-surface media-status-indicator media-status-indicator--state\"\n        >\n          <div class=\"media-status-indicator__content\">\n            ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n            ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n            ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n            ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n            ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n            ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n            <media-status-indicator-value class=\"media-status-indicator__value\"></media-status-indicator-value>\n          </div>\n        </media-status-indicator>\n        <media-status-indicator hidden actions=\"togglePaused\" class=\"media-status-indicator media-status-indicator--playback\">\n          ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n          ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n        </media-status-indicator>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class LiveVideoSkinElement extends SkinElement {\n  static readonly tagName = 'live-video-skin';\n  static styles = createShadowStyle(styles);\n  static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(LiveVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [LiveVideoSkinElement.tagName]: LiveVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;AASA,SAAS,kBAAkB;CACzB,OAAgB;;;;;;;;;;;UAWR,WAAW,WAAW,EAAE,OAAO,aAAa,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;kBAoBvC,WAAW,WAAW,EAAE,OAAO,iCAAiC,CAAC,EAAE;kBACnE,WAAW,QAAQ,EAAE,OAAO,8BAA8B,CAAC,EAAE;kBAC7D,WAAW,SAAS,EAAE,OAAO,+BAA+B,CAAC,EAAE;;;;;;;;;;;;;;kBAc/D,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;kBACzE,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;kBACzE,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;;;;;;;;;;;;;kBAa3E,WAAW,gBAAgB,EAAE,OAAO,sCAAsC,CAAC,EAAE;kBAC7E,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;;;;;;;;0BAQnE,WAAW,SAAS,EAAE,OAAO,aAAa,CAAC,EAAE;;;;;;;;;;;;kBAYrD,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;kBACzE,WAAW,aAAa,EAAE,OAAO,mCAAmC,CAAC,EAAE;;;;;;;;kBAQvE,WAAW,iBAAiB,EAAE,OAAO,uCAAuC,CAAC,EAAE;kBAC/E,WAAW,gBAAgB,EAAE,OAAO,sCAAsC,CAAC,EAAE;;;;;;;;kBAQ7E,WAAW,aAAa,EAAE,OAAO,mCAAmC,CAAC,EAAE;kBACvE,WAAW,YAAY,EAAE,OAAO,kCAAkC,CAAC,EAAE;;;;;;;;kBAQrE,WAAW,oBAAoB,EAAE,OAAO,0CAA0C,CAAC,EAAE;kBACrF,WAAW,mBAAmB,EAAE,OAAO,yCAAyC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkCvF,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;cAC3E,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;cACzE,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;;;;;;;;;;cAUzE,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;cAC3E,WAAW,gBAAgB,EAAE,OAAO,sCAAsC,CAAC,EAAE;cAC7E,WAAW,oBAAoB,EAAE,OAAO,0CAA0C,CAAC,EAAE;cACrF,WAAW,mBAAmB,EAAE,OAAO,yCAAyC,CAAC,EAAE;cACnF,WAAW,aAAa,EAAE,OAAO,mCAAmC,CAAC,EAAE;cACvE,WAAW,YAAY,EAAE,OAAO,kCAAkC,CAAC,EAAE;;;;;YAKvE,WAAW,QAAQ,EAAE,OAAO,8BAA8B,CAAC,EAAE;YAC7D,WAAW,SAAS,EAAE,OAAO,+BAA+B,CAAC,EAAE;;;;;AAK3E;AAEA,IAAa,uBAAb,cAA0C,YAAY;;EAC1B,KAAA,UAAA;;;EACV,KAAA,SAAA,kBAAkBA,YAAM;;;EACtB,KAAA,WAAA,eAAe,gBAAgB,CAAC;;AACpD;AAEA,WAAW,oBAAoB"}
+{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/define/live-video/skin.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\nimport styles from './skin.css?inline';\n\n// Register the live video player, container, and all UI custom elements.\nimport './ui';\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-default-skin media-default-skin--video\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <media-poster>\n        <slot name=\"poster\">\n          <img alt=\"\" decoding=\"async\">\n        </slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        ${renderIcon('spinner', { class: 'media-icon' })}\n      </media-buffering-indicator>\n\n      <media-error-dialog class=\"media-error\">\n        <div class=\"media-error__dialog media-surface\">\n          <div class=\"media-error__content\">\n            <media-alert-dialog-title class=\"media-error__title\"></media-alert-dialog-title>\n            <media-alert-dialog-description class=\"media-error__description\"></media-alert-dialog-description>\n          </div>\n          <div class=\"media-error__actions\">\n            <media-alert-dialog-close class=\"media-button media-button--primary\"></media-alert-dialog-close>\n          </div>\n        </div>\n      </media-error-dialog>\n\n      <media-controls class=\"media-surface media-controls media-controls--root\">\n        <media-tooltip-group>\n          <div class=\"media-surface media-controls media-controls--primary\">\n            <div class=\"media-button-group\">\n              <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--play\">\n                ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n                ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n                ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n              </media-play-button>\n              <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-live-button class=\"media-button media-button--subtle media-button--live\"></media-live-button>\n            </div>\n\n            <div class=\"media-time-controls\" aria-hidden=\"true\"></div>\n\n            <div class=\"media-button-group\">\n              <media-mute-button commandfor=\"live-video-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n                ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n                ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n                ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n              </media-mute-button>\n\n              <media-popover id=\"live-video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-surface media-popover media-popover--volume\">\n                <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n                  <media-slider-track class=\"media-slider__track\">\n                    <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                  </media-slider-track>\n                  <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n                </media-volume-slider>\n              </media-popover>\n\n              <media-captions-button menu-for=\"captions-menu\" commandfor=\"captions-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--captions\">\n                ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n                ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n              </media-captions-button>\n              <media-menu id=\"captions-menu\" side=\"top\" align=\"center\" class=\"media-surface media-popover media-menu media-menu--captions\">\n                <media-captions-radio-group class=\"media-menu__group\">\n                  <template>\n                    <media-menu-radio-item class=\"media-menu__item\">\n                      <span data-part=\"label\"></span>\n                      <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n                        ${renderIcon('check', { class: 'media-icon' })}\n                      </media-menu-item-indicator>\n                    </media-menu-radio-item>\n                  </template>\n                </media-captions-radio-group>\n              </media-menu>\n              <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-cast-button commandfor=\"cast-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--cast\">\n                ${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}\n                ${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}\n              </media-cast-button>\n              <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-airplay-button commandfor=\"airplay-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--airplay\">\n                ${renderIcon('airplay-enter', { class: 'media-icon media-icon--airplay-enter' })}\n                ${renderIcon('airplay-exit', { class: 'media-icon media-icon--airplay-exit' })}\n              </media-airplay-button>\n              <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--pip\">\n                ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n                ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n              </media-pip-button>\n              <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--fullscreen\">\n                ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n                ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n              </media-fullscreen-button>\n              <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n            </div>\n          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n\n      <!-- Hotkeys -->\n      <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n      <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n      <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n      <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n      <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n      <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n\n      <!-- Gestures -->\n      <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n      <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n\n      <!-- Input Indicators -->\n      <media-status-announcer class=\"media-sr-only\"></media-status-announcer>\n      <div class=\"media-input-indicator-overlay\">\n        <media-volume-indicator hidden class=\"media-surface media-volume-indicator\">\n          <media-volume-indicator-fill class=\"media-volume-indicator__content\">\n            ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n            ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n            ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n            <media-volume-indicator-value class=\"media-volume-indicator__value\"></media-volume-indicator-value>\n          </media-volume-indicator-fill>\n        </media-volume-indicator>\n        <media-status-indicator\n          hidden\n          actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\"\n          class=\"media-surface media-status-indicator media-status-indicator--state\"\n        >\n          <div class=\"media-status-indicator__content\">\n            ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n            ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n            ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n            ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n            ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n            ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n            <media-status-indicator-value class=\"media-status-indicator__value\"></media-status-indicator-value>\n          </div>\n        </media-status-indicator>\n        <media-status-indicator hidden actions=\"togglePaused\" class=\"media-status-indicator media-status-indicator--playback\">\n          ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n          ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n        </media-status-indicator>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class LiveVideoSkinElement extends SkinElement {\n  static readonly tagName = 'live-video-skin';\n  static styles = createShadowStyle(styles);\n  static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(LiveVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [LiveVideoSkinElement.tagName]: LiveVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;AASA,SAAS,kBAAkB;CACzB,OAAgB;;;;;;;;;;;;;UAaR,WAAW,WAAW,EAAE,OAAO,aAAa,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;kBAoBvC,WAAW,WAAW,EAAE,OAAO,iCAAiC,CAAC,EAAE;kBACnE,WAAW,QAAQ,EAAE,OAAO,8BAA8B,CAAC,EAAE;kBAC7D,WAAW,SAAS,EAAE,OAAO,+BAA+B,CAAC,EAAE;;;;;;;;;;;;;;kBAc/D,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;kBACzE,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;kBACzE,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;;;;;;;;;;;;;kBAa3E,WAAW,gBAAgB,EAAE,OAAO,sCAAsC,CAAC,EAAE;kBAC7E,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;;;;;;;;0BAQnE,WAAW,SAAS,EAAE,OAAO,aAAa,CAAC,EAAE;;;;;;;;;;;;kBAYrD,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;kBACzE,WAAW,aAAa,EAAE,OAAO,mCAAmC,CAAC,EAAE;;;;;;;;kBAQvE,WAAW,iBAAiB,EAAE,OAAO,uCAAuC,CAAC,EAAE;kBAC/E,WAAW,gBAAgB,EAAE,OAAO,sCAAsC,CAAC,EAAE;;;;;;;;kBAQ7E,WAAW,aAAa,EAAE,OAAO,mCAAmC,CAAC,EAAE;kBACvE,WAAW,YAAY,EAAE,OAAO,kCAAkC,CAAC,EAAE;;;;;;;;kBAQrE,WAAW,oBAAoB,EAAE,OAAO,0CAA0C,CAAC,EAAE;kBACrF,WAAW,mBAAmB,EAAE,OAAO,yCAAyC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkCvF,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;cAC3E,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;cACzE,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;;;;;;;;;;cAUzE,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;cAC3E,WAAW,gBAAgB,EAAE,OAAO,sCAAsC,CAAC,EAAE;cAC7E,WAAW,oBAAoB,EAAE,OAAO,0CAA0C,CAAC,EAAE;cACrF,WAAW,mBAAmB,EAAE,OAAO,yCAAyC,CAAC,EAAE;cACnF,WAAW,aAAa,EAAE,OAAO,mCAAmC,CAAC,EAAE;cACvE,WAAW,YAAY,EAAE,OAAO,kCAAkC,CAAC,EAAE;;;;;YAKvE,WAAW,QAAQ,EAAE,OAAO,8BAA8B,CAAC,EAAE;YAC7D,WAAW,SAAS,EAAE,OAAO,+BAA+B,CAAC,EAAE;;;;;AAK3E;AAEA,IAAa,uBAAb,cAA0C,YAAY;;EAC1B,KAAA,UAAA;;;EACV,KAAA,SAAA,kBAAkBA,YAAM;;;EACtB,KAAA,WAAA,eAAe,gBAAgB,CAAC;;AACpD;AAEA,WAAW,oBAAoB"}

package/dist/dev/define/live-video/skin.tailwind.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skin.tailwind.d.ts","names":[],"sources":["../../../../src/define/live-video/skin.tailwind.ts"],"mappings":";;;cA4Ma,qCAAqC;kBAChC;SACT,UAAQ;;QAKT;YACI;KACP,6BAA6B,UAAU"}
+{"version":3,"file":"skin.tailwind.d.ts","names":[],"sources":["../../../../src/define/live-video/skin.tailwind.ts"],"mappings":";;;cA8Ma,qCAAqC;kBAChC;SACT,UAAQ;;QAKT;YACI;KACP,6BAA6B,UAAU"}

package/dist/dev/define/live-video/skin.tailwind.js

@@ -20,7 +20,9 @@ function getTemplateHTML() {
       <slot></slot>
 
       <media-poster class="${poster(true)}">
-        <slot name="poster"></slot>
+        <slot name="poster">
+          <img alt="" decoding="async">
+        </slot>
       </media-poster>
 
       <media-buffering-indicator class="${bufferingIndicator.root}">
@@ -73,7 +75,7 @@ function getTemplateHTML() {
                   <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
                 </media-volume-slider>
               </media-popover>
-              <media-captions-button menu-for="captions-menu" commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}">
+              <media-captions-button menu-for="captions-menu" commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, button.captions, iconState.captions.button)}">
                 ${renderIcon("captions-off", { class: cn(icon, iconState.captions.off) })}
                 ${renderIcon("captions-on", { class: cn(icon, iconState.captions.on) })}
               </media-captions-button>