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

package/dist/default/define/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;
 
@@ -669,8 +669,7 @@ media-container {
   --track-size: calc(var(--spacing) * 1);
   --track-highlighted-size: calc(var(--spacing) * 1.75);
   --track-border-radius: 99px;
-  --thumb-size: calc(var(--spacing) * 2.5);
-  --thumb-active-size: calc(var(--spacing) * 3);
+  --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);
@@ -723,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;
     }
   }
 
@@ -756,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 {
@@ -837,45 +853,6 @@ media-container {
     }
   }
 
-  /* 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;
@@ -892,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%;
@@ -912,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 {
@@ -936,37 +901,70 @@ media-container {
     }
 
     &.media-slider__thumb--persistent {
-      width: var(--thumb-active-size);
-      height: var(--thumb-active-size);
       opacity: 1;
+      scale: 1;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        outline-color: oklch(from currentColor l c h / 0.15);
+        outline-offset: 0;
+      }
     }
-  }
 
-  &:active .media-slider__thumb,
-  &:focus-within .media-slider__thumb {
-    width: var(--thumb-active-size);
-    height: var(--thumb-active-size);
+    @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;
@@ -977,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));
     }
 
@@ -991,7 +990,7 @@ media-container {
 
     .media-slider__chapter-title {
       min-width: 0;
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       padding-inline: calc(var(--spacing) * 6);
       overflow: hidden;
       text-overflow: ellipsis;
@@ -1738,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) {
@@ -1906,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;
   }
 
@@ -1922,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 {
@@ -1972,6 +1982,10 @@ media-container {
         }
       }
     }
+
+    .media-button--captions {
+      display: none;
+    }
   }
 
   @container media-root (width >= 32rem) {
@@ -2008,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/default/define/video/skin.js

@@ -8,7 +8,7 @@ import { createShadowStyle, createTemplate } from "@videojs/utils/dom";
 import { audioText, captionsText, qualityText, settingsText, speedText } from "@videojs/core/i18n/text/menu";
 //#region src/define/video/skin.ts
 function getTemplateHTML() {
-	return `<media-container class="media-default-skin media-default-skin--video"><slot name="media"></slot><slot></slot><media-poster><slot name="poster"></slot></media-poster><media-buffering-indicator class="media-buffering-indicator"> ${renderIcon("spinner", { class: "media-icon" })} </media-buffering-indicator><media-error-dialog class="media-error"><div class="media-error__dialog media-surface"><div class="media-error__content"><media-alert-dialog-title class="media-error__title"></media-alert-dialog-title><media-alert-dialog-description class="media-error__description"></media-alert-dialog-description></div><div class="media-error__actions"><media-alert-dialog-close class="media-button media-button--primary"></media-alert-dialog-close></div></div></media-error-dialog><media-controls class="media-surface media-controls media-controls--root"><media-tooltip-group><div class="media-surface media-controls media-controls--primary"><div class="media-button-group"><media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play"> ${renderIcon("restart", { class: "media-icon media-icon--restart" })} ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"><media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut></media-tooltip><media-mute-button commandfor="video-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute"> ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })} ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })} ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })} </media-mute-button><media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume"><media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill></media-slider-track><media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb></media-volume-slider></media-popover></div><div class="media-time-controls"><media-time type="current" class="media-time"></media-time><media-time-slider class="media-slider"><media-time-slider-chapters class="media-slider__chapters"><template><div class="media-slider__chapter"><media-slider-track class="media-slider__track media-slider__chapter-track"><media-slider-buffer class="media-slider__buffer"></media-slider-buffer><media-slider-fill class="media-slider__fill"></media-slider-fill></media-slider-track></div></template></media-time-slider-chapters><media-slider-thumb class="media-slider__thumb"></media-slider-thumb><media-slider-preview overflow="visible" class="media-slider__preview"><div class="media-surface media-thumbnail media-slider__thumbnail"><media-slider-thumbnail class="media-thumbnail__image"></media-slider-thumbnail> ${renderIcon("spinner", { class: "media-thumbnail__spinner media-icon" })} </div><div class="media-slider__value"><media-time-slider-chapter-title class="media-slider__chapter-title"></media-time-slider-chapter-title><media-slider-value type="pointer" class="media-time"></media-slider-value></div></media-slider-preview></media-time-slider><media-time toggle type="remaining" class="media-time"></media-time></div><div class="media-button-group"><media-captions-button commandfor="captions-tooltip" class="media-button media-button--subtle media-button--icon media-button--captions"> ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })} ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })} </media-captions-button><media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip"><media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut></media-tooltip><button id="settings-trigger" commandfor="settings-menu" aria-labelledby="settings-label" class="media-button media-button--subtle media-button--icon media-button--settings"> ${renderIcon("gear", { class: "media-icon media-icon--settings" })} ${renderText(settingsText, {
+	return `<media-container class="media-default-skin media-default-skin--video"><slot name="media"></slot><slot></slot><media-poster><slot name="poster"><img alt="" decoding="async"></slot></media-poster><media-buffering-indicator class="media-buffering-indicator"> ${renderIcon("spinner", { class: "media-icon" })} </media-buffering-indicator><media-error-dialog class="media-error"><div class="media-error__dialog media-surface"><div class="media-error__content"><media-alert-dialog-title class="media-error__title"></media-alert-dialog-title><media-alert-dialog-description class="media-error__description"></media-alert-dialog-description></div><div class="media-error__actions"><media-alert-dialog-close class="media-button media-button--primary"></media-alert-dialog-close></div></div></media-error-dialog><media-controls class="media-surface media-controls media-controls--root"><media-tooltip-group><div class="media-surface media-controls media-controls--primary"><div class="media-button-group"><media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play"> ${renderIcon("restart", { class: "media-icon media-icon--restart" })} ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"><media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut></media-tooltip><media-mute-button commandfor="video-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute"> ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })} ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })} ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })} </media-mute-button><media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume"><media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill></media-slider-track><media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb></media-volume-slider></media-popover></div><div class="media-time-controls"><media-time type="current" class="media-time"></media-time><media-time-slider class="media-slider"><media-time-slider-chapters class="media-slider__chapters"><template><div class="media-slider__chapter"><media-slider-track class="media-slider__track media-slider__chapter-track"><media-slider-buffer class="media-slider__buffer"></media-slider-buffer><media-slider-fill class="media-slider__fill"></media-slider-fill></media-slider-track></div></template></media-time-slider-chapters><media-slider-thumb class="media-slider__thumb"></media-slider-thumb><media-slider-preview overflow="visible" class="media-slider__preview"><div class="media-surface media-thumbnail media-slider__thumbnail"><media-slider-thumbnail class="media-thumbnail__image"></media-slider-thumbnail> ${renderIcon("spinner", { class: "media-thumbnail__spinner media-icon" })} </div><div class="media-slider__value"><media-time-slider-chapter-title class="media-slider__chapter-title"></media-time-slider-chapter-title><media-slider-value type="pointer" class="media-time"></media-slider-value></div></media-slider-preview></media-time-slider><media-time toggle type="remaining" class="media-time"></media-time></div><div class="media-button-group"><media-captions-button commandfor="captions-tooltip" class="media-button media-button--subtle media-button--icon media-button--captions"> ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })} ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })} </media-captions-button><media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip"><media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut></media-tooltip><button id="settings-trigger" commandfor="settings-menu" aria-labelledby="settings-label" class="media-button media-button--subtle media-button--icon media-button--settings"> ${renderIcon("gear", { class: "media-icon media-icon--settings" })} ${renderText(settingsText, {
 		id: "settings-label",
 		class: "media-sr-only"
 	})} </button><media-menu id="settings-menu" side="top" align="center" class="media-surface media-popover media-menu media-menu--settings"><div class="media-menu__group"><media-menu-item commandfor="settings-quality-menu" class="media-menu__item media-menu__item--submenu"> ${renderIcon("switches", { class: "media-icon" })} ${renderText(qualityText)} <span class="media-menu__hint"><span data-part="hint" class="media-menu__hint-label"></span> ${renderIcon("chevron", { class: "media-icon media-menu__chevron" })} </span></media-menu-item><media-menu-item commandfor="settings-audio-menu" class="media-menu__item media-menu__item--submenu"> ${renderIcon("speech", { class: "media-icon" })} ${renderText(audioText)} <span class="media-menu__hint"><span data-part="hint" class="media-menu__hint-label"></span> ${renderIcon("chevron", { class: "media-icon media-menu__chevron" })} </span></media-menu-item><media-menu-item commandfor="settings-speed-menu" class="media-menu__item media-menu__item--submenu"> ${renderIcon("speed", { class: "media-icon" })} ${renderText(speedText)} <span class="media-menu__hint"><span data-part="hint" class="media-menu__hint-label"></span> ${renderIcon("chevron", { class: "media-icon media-menu__chevron" })} </span></media-menu-item><media-menu-item commandfor="settings-captions-menu" class="media-menu__item media-menu__item--submenu"> ${renderIcon("captions-off", { class: "media-icon" })} ${renderText(captionsText)} <span class="media-menu__hint"><span data-part="hint" class="media-menu__hint-label"></span> ${renderIcon("chevron", { class: "media-icon media-menu__chevron" })} </span></media-menu-item></div><media-menu id="settings-quality-menu" class="media-menu__panel"><media-menu-item class="media-menu__back"> ${renderIcon("chevron", { class: "media-icon media-menu__chevron media-icon--flipped" })} ${renderText(qualityText)} </media-menu-item><div class="media-menu__separator"></div><media-quality-radio-group class="media-menu__group"><template><media-menu-radio-item class="media-menu__item"><span><span data-part="label"></span><sup data-part="tier" class="media-menu__tier"></sup></span><span data-part="badge" class="media-badge"></span><media-menu-item-indicator force-mount class="media-menu__indicator"> ${renderIcon("check", { class: "media-icon" })} </media-menu-item-indicator></media-menu-radio-item></template></media-quality-radio-group></media-menu><media-menu id="settings-audio-menu" class="media-menu__panel"><media-menu-item class="media-menu__back"> ${renderIcon("chevron", { class: "media-icon media-menu__chevron media-icon--flipped" })} ${renderText(audioText)} </media-menu-item><div class="media-menu__separator"></div><media-audio-track-radio-group class="media-menu__group"><template><media-menu-radio-item class="media-menu__item"><span data-part="label"></span><media-menu-item-indicator force-mount class="media-menu__indicator"> ${renderIcon("check", { class: "media-icon" })} </media-menu-item-indicator></media-menu-radio-item></template></media-audio-track-radio-group></media-menu><media-menu id="settings-speed-menu" class="media-menu__panel"><media-menu-item class="media-menu__back"> ${renderIcon("chevron", { class: "media-icon media-menu__chevron media-icon--flipped" })} ${renderText(speedText)} </media-menu-item><div class="media-menu__separator"></div><media-playback-rate-radio-group class="media-menu__group"><template><media-menu-radio-item class="media-menu__item"><span data-part="label"></span><media-menu-item-indicator force-mount class="media-menu__indicator"> ${renderIcon("check", { class: "media-icon" })} </media-menu-item-indicator></media-menu-radio-item></template></media-playback-rate-radio-group></media-menu><media-menu id="settings-captions-menu" class="media-menu__panel"><media-menu-item class="media-menu__back"> ${renderIcon("chevron", { class: "media-icon media-menu__chevron media-icon--flipped" })} ${renderText(captionsText)} </media-menu-item><div class="media-menu__separator"></div><media-captions-radio-group class="media-menu__group"><template><media-menu-radio-item class="media-menu__item"><span data-part="label"></span><media-menu-item-indicator force-mount class="media-menu__indicator"> ${renderIcon("check", { class: "media-icon" })} </media-menu-item-indicator></media-menu-radio-item></template></media-captions-radio-group></media-menu></media-menu><media-tooltip id="settings-tooltip" trigger="settings-trigger" side="top" class="media-surface media-tooltip"> ${renderText(settingsText)} </media-tooltip></div></div><div class="media-surface media-controls media-controls--secondary"><div class="media-button-group"><media-cast-button commandfor="cast-tooltip" class="media-button media-button--subtle media-button--icon media-button--cast"> ${renderIcon("cast-enter", { class: "media-icon media-icon--cast-enter" })} ${renderIcon("cast-exit", { class: "media-icon media-icon--cast-exit" })} </media-cast-button><media-tooltip id="cast-tooltip" side="top" class="media-surface media-tooltip"><media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut></media-tooltip><media-airplay-button commandfor="airplay-tooltip" class="media-button media-button--subtle media-button--icon media-button--airplay"> ${renderIcon("airplay-enter", { class: "media-icon media-icon--airplay-enter" })} ${renderIcon("airplay-exit", { class: "media-icon media-icon--airplay-exit" })} </media-airplay-button><media-tooltip id="airplay-tooltip" side="top" class="media-surface media-tooltip"><media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut></media-tooltip><media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip"> ${renderIcon("pip-enter", { class: "media-icon media-icon--pip-enter" })} ${renderIcon("pip-exit", { class: "media-icon media-icon--pip-exit" })} </media-pip-button><media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip"><media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut></media-tooltip><media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen"> ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })} ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })} </media-fullscreen-button><media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip"><media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut></media-tooltip></div></div></media-tooltip-group></media-controls><div class="media-overlay"></div><media-hotkey keys="Space" action="togglePaused"></media-hotkey><media-hotkey keys="k" action="togglePaused"></media-hotkey><media-hotkey keys="m" action="toggleMuted"></media-hotkey><media-hotkey keys="f" action="toggleFullscreen"></media-hotkey><media-hotkey keys="c" action="toggleSubtitles"></media-hotkey><media-hotkey keys="i" action="togglePictureInPicture"></media-hotkey><media-hotkey keys="ArrowRight" action="seekStep" value="5"></media-hotkey><media-hotkey keys="ArrowLeft" action="seekStep" value="-5"></media-hotkey><media-hotkey keys="l" action="seekStep" value="10"></media-hotkey><media-hotkey keys="j" action="seekStep" value="-10"></media-hotkey><media-hotkey keys="ArrowUp" action="volumeStep" value="0.05"></media-hotkey><media-hotkey keys="ArrowDown" action="volumeStep" value="-0.05"></media-hotkey><media-hotkey keys="0-9" action="seekToPercent"></media-hotkey><media-hotkey keys="Home" action="seekToPercent" value="0"></media-hotkey><media-hotkey keys="End" action="seekToPercent" value="100"></media-hotkey><media-hotkey keys=">" action="speedUp"></media-hotkey><media-hotkey keys="<" action="speedDown"></media-hotkey><media-gesture type="tap" action="togglePaused" pointer="mouse" region="center"></media-gesture><media-gesture type="tap" action="toggleControls" pointer="touch"></media-gesture><media-gesture type="doubletap" action="seekStep" value="-10" region="left"></media-gesture><media-gesture type="doubletap" action="toggleFullscreen" region="center"></media-gesture><media-gesture type="doubletap" action="seekStep" value="10" region="right"></media-gesture><media-status-announcer class="media-sr-only"></media-status-announcer><div class="media-input-indicator-overlay"><media-volume-indicator hidden class="media-surface media-volume-indicator"><media-volume-indicator-fill class="media-volume-indicator__content"> ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })} ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })} ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })} <media-volume-indicator-value class="media-volume-indicator__value"></media-volume-indicator-value></media-volume-indicator-fill></media-volume-indicator><media-status-indicator hidden actions="toggleSubtitles toggleFullscreen togglePictureInPicture" class="media-surface media-status-indicator media-status-indicator--state" ><div class="media-status-indicator__content"> ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })} ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })} ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })} ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })} ${renderIcon("pip-enter", { class: "media-icon media-icon--pip-enter" })} ${renderIcon("pip-exit", { class: "media-icon media-icon--pip-exit" })} <media-status-indicator-value class="media-status-indicator__value"></media-status-indicator-value></div></media-status-indicator><media-seek-indicator hidden class="media-seek-indicator"> ${renderIcon("chevron", { class: "media-icon media-icon--seek" })} <media-seek-indicator-value class="media-seek-indicator__value"></media-seek-indicator-value></media-seek-indicator><media-status-indicator hidden actions="togglePaused" class="media-status-indicator media-status-indicator--playback"> ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-status-indicator></div></media-container>`;

package/dist/default/define/video/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/video/skin.ts"],"sourcesContent":["import { audioText, captionsText, qualityText, settingsText, speedText } from '@videojs/core/i18n/text/menu';\nimport { renderIcon } from '@videojs/icons/render';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { renderText } from '../../i18n/render-text';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\nimport styles from './skin.css?inline';\n\n// Register the 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-mute-button commandfor=\"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=\"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            </div>\n\n            <div class=\"media-time-controls\">\n              <media-time type=\"current\" class=\"media-time\"></media-time>\n              <media-time-slider class=\"media-slider\">\n                <media-time-slider-chapters class=\"media-slider__chapters\">\n                  <template>\n                    <div class=\"media-slider__chapter\">\n                      <media-slider-track class=\"media-slider__track media-slider__chapter-track\">\n                        <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n                        <media-slider-fill class=\"media-slider__fill\"></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-slider-thumb>\n\n                <media-slider-preview overflow=\"visible\" class=\"media-slider__preview\">\n                  <div class=\"media-surface media-thumbnail media-slider__thumbnail\">\n                    <media-slider-thumbnail class=\"media-thumbnail__image\"></media-slider-thumbnail>\n                    ${renderIcon('spinner', { class: 'media-thumbnail__spinner media-icon' })}\n                  </div>\n                  <div class=\"media-slider__value\">\n                    <media-time-slider-chapter-title class=\"media-slider__chapter-title\"></media-time-slider-chapter-title>\n                    <media-slider-value type=\"pointer\" class=\"media-time\"></media-slider-value>\n                  </div>\n                </media-slider-preview>\n              </media-time-slider>\n              <media-time toggle type=\"remaining\" class=\"media-time\"></media-time>\n            </div>\n\n            <div class=\"media-button-group\">\n              <media-captions-button 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-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              <button id=\"settings-trigger\" commandfor=\"settings-menu\" aria-labelledby=\"settings-label\" class=\"media-button media-button--subtle media-button--icon media-button--settings\">\n                ${renderIcon('gear', { class: 'media-icon media-icon--settings' })}\n                ${renderText(settingsText, { id: 'settings-label', class: 'media-sr-only' })}\n              </button>\n              <media-menu id=\"settings-menu\" side=\"top\" align=\"center\" class=\"media-surface media-popover media-menu media-menu--settings\">\n                <div class=\"media-menu__group\">\n                    <media-menu-item commandfor=\"settings-quality-menu\" class=\"media-menu__item media-menu__item--submenu\">\n                      ${renderIcon('switches', { class: 'media-icon' })}\n                      ${renderText(qualityText)}\n                      <span class=\"media-menu__hint\">\n                        <span data-part=\"hint\" class=\"media-menu__hint-label\"></span>\n                        ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n                      </span>\n                    </media-menu-item>\n                    <media-menu-item commandfor=\"settings-audio-menu\" class=\"media-menu__item media-menu__item--submenu\">\n                      ${renderIcon('speech', { class: 'media-icon' })}\n                      ${renderText(audioText)}\n                      <span class=\"media-menu__hint\">\n                        <span data-part=\"hint\" class=\"media-menu__hint-label\"></span>\n                        ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n                      </span>\n                    </media-menu-item>\n                    <media-menu-item commandfor=\"settings-speed-menu\" class=\"media-menu__item media-menu__item--submenu\">\n                      ${renderIcon('speed', { class: 'media-icon' })}\n                      ${renderText(speedText)}\n                      <span class=\"media-menu__hint\">\n                        <span data-part=\"hint\" class=\"media-menu__hint-label\"></span>\n                        ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n                      </span>\n                    </media-menu-item>\n                    <media-menu-item commandfor=\"settings-captions-menu\" class=\"media-menu__item media-menu__item--submenu\">\n                      ${renderIcon('captions-off', { class: 'media-icon' })}\n                      ${renderText(captionsText)}\n                      <span class=\"media-menu__hint\">\n                        <span data-part=\"hint\" class=\"media-menu__hint-label\"></span>\n                        ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n                      </span>\n                    </media-menu-item>\n                </div>\n\n                <media-menu id=\"settings-quality-menu\" class=\"media-menu__panel\">\n                  <media-menu-item class=\"media-menu__back\">\n                    ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n                    ${renderText(qualityText)}\n                  </media-menu-item>\n                  <div class=\"media-menu__separator\"></div>\n                  <media-quality-radio-group class=\"media-menu__group\">\n                    <template>\n                      <media-menu-radio-item class=\"media-menu__item\">\n                        <span>\n                          <span data-part=\"label\"></span>\n                          <sup data-part=\"tier\" class=\"media-menu__tier\"></sup>\n                        </span>\n                        <span data-part=\"badge\" class=\"media-badge\"></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-quality-radio-group>\n                </media-menu>\n\n                <media-menu id=\"settings-audio-menu\" class=\"media-menu__panel\">\n                  <media-menu-item class=\"media-menu__back\">\n                    ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n                    ${renderText(audioText)}\n                  </media-menu-item>\n                  <div class=\"media-menu__separator\"></div>\n                  <media-audio-track-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-audio-track-radio-group>\n                </media-menu>\n\n                <media-menu id=\"settings-speed-menu\" class=\"media-menu__panel\">\n                  <media-menu-item class=\"media-menu__back\">\n                    ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n                    ${renderText(speedText)}\n                  </media-menu-item>\n                  <div class=\"media-menu__separator\"></div>\n                  <media-playback-rate-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-playback-rate-radio-group>\n                </media-menu>\n\n                <media-menu id=\"settings-captions-menu\" class=\"media-menu__panel\">\n                  <media-menu-item class=\"media-menu__back\">\n                    ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n                    ${renderText(captionsText)}\n                  </media-menu-item>\n                  <div class=\"media-menu__separator\"></div>\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-menu>\n              <media-tooltip id=\"settings-tooltip\" trigger=\"settings-trigger\" side=\"top\" class=\"media-surface media-tooltip\">\n                ${renderText(settingsText)}\n              </media-tooltip>\n            </div>\n          </div>\n\n          <div class=\"media-surface media-controls media-controls--secondary\">\n            <div class=\"media-button-group\">\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            </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=\"ArrowRight\" action=\"seekStep\" value=\"5\"></media-hotkey>\n      <media-hotkey keys=\"ArrowLeft\" action=\"seekStep\" value=\"-5\"></media-hotkey>\n      <media-hotkey keys=\"l\" action=\"seekStep\" value=\"10\"></media-hotkey>\n      <media-hotkey keys=\"j\" action=\"seekStep\" value=\"-10\"></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      <media-hotkey keys=\"0-9\" action=\"seekToPercent\"></media-hotkey>\n      <media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\"></media-hotkey>\n      <media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\"></media-hotkey>\n      <media-hotkey keys=\">\" action=\"speedUp\"></media-hotkey>\n      <media-hotkey keys=\"<\" action=\"speedDown\"></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=\"seekStep\" value=\"-10\" region=\"left\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"10\" region=\"right\"></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-seek-indicator hidden class=\"media-seek-indicator\">\n          ${renderIcon('chevron', { class: 'media-icon media-icon--seek' })}\n          <media-seek-indicator-value class=\"media-seek-indicator__value\"></media-seek-indicator-value>\n        </media-seek-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 VideoSkinElement extends SkinElement {\n  static readonly tagName = 'video-skin';\n  static styles = createShadowStyle(styles);\n  static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(VideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinElement.tagName]: VideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;;AAWA,SAAS,kBAAkB;CACzB,OAAO,sOAAA,WAAA,WAAA,EAAA,OAAA,aAAA,CAAA,EAAA,kzBAAA,WAAA,WAAA,EAAA,OAAA,iCAAA,CAAA,EAAA,GAAA,WAAA,QAAA,EAAA,OAAA,8BAAA,CAAA,EAAA,GAAA,WAAA,SAAA,EAAA,OAAA,+BAAA,CAAA,EAAA,oXAAA,WAAA,cAAA,EAAA,OAAA,oCAAA,CAAA,EAAA,GAAA,WAAA,cAAA,EAAA,OAAA,oCAAA,CAAA,EAAA,GAAA,WAAA,eAAA,EAAA,OAAA,qCAAA,CAAA,EAAA,s0CAAA,WAAA,WAAA,EAAA,OAAA,sCAAA,CAAA,EAAA,igBAAA,WAAA,gBAAA,EAAA,OAAA,sCAAA,CAAA,EAAA,GAAA,WAAA,eAAA,EAAA,OAAA,qCAAA,CAAA,EAAA,qaAAA,WAAA,QAAA,EAAA,OAAA,kCAAA,CAAA,EAAA,GAAA,WAAA,cAAA;EAAA,IAAA;EAAA,OAAA;CAAA,CAAA,EAAA,gRAAA,WAAA,YAAA,EAAA,OAAA,aAAA,CAAA,EAAA,GAAA,WAAA,WAAA,EAAA,gGAAA,WAAA,WAAA,EAAA,OAAA,iCAAA,CAAA,EAAA,kIAAA,WAAA,UAAA,EAAA,OAAA,aAAA,CAAA,EAAA,GAAA,WAAA,SAAA,EAAA,gGAAA,WAAA,WAAA,EAAA,OAAA,iCAAA,CAAA,EAAA,kIAAA,WAAA,SAAA,EAAA,OAAA,aAAA,CAAA,EAAA,GAAA,WAAA,SAAA,EAAA,gGAAA,WAAA,WAAA,EAAA,OAAA,iCAAA,CAAA,EAAA,qIAAA,WAAA,gBAAA,EAAA,OAAA,aAAA,CAAA,EAAA,GAAA,WAAA,YAAA,EAAA,gGAAA,WAAA,WAAA,EAAA,OAAA,iCAAA,CAAA,EAAA,8IAAA,WAAA,WAAA,EAAA,OAAA,qDAAA,CAAA,EAAA,GAAA,WAAA,WAAA,EAAA,uYAAA,WAAA,SAAA,EAAA,OAAA,aAAA,CAAA,EAAA,qNAAA,WAAA,WAAA,EAAA,OAAA,qDAAA,CAAA,EAAA,GAAA,WAAA,SAAA,EAAA,sRAAA,WAAA,SAAA,EAAA,OAAA,aAAA,CAAA,EAAA,yNAAA,WAAA,WAAA,EAAA,OAAA,qDAAA,CAAA,EAAA,GAAA,WAAA,SAAA,EAAA,wRAAA,WAAA,SAAA,EAAA,OAAA,aAAA,CAAA,EAAA,8NAAA,WAAA,WAAA,EAAA,OAAA,qDAAA,CAAA,EAAA,GAAA,WAAA,YAAA,EAAA,mRAAA,WAAA,SAAA,EAAA,OAAA,aAAA,CAAA,EAAA,yOAAA,WAAA,YAAA,EAAA,iQAAA,WAAA,cAAA,EAAA,OAAA,oCAAA,CAAA,EAAA,GAAA,WAAA,aAAA,EAAA,OAAA,mCAAA,CAAA,EAAA,qXAAA,WAAA,iBAAA,EAAA,OAAA,uCAAA,CAAA,EAAA,GAAA,WAAA,gBAAA,EAAA,OAAA,sCAAA,CAAA,EAAA,+WAAA,WAAA,aAAA,EAAA,OAAA,mCAAA,CAAA,EAAA,GAAA,WAAA,YAAA,EAAA,OAAA,kCAAA,CAAA,EAAA,4XAAA,WAAA,oBAAA,EAAA,OAAA,0CAAA,CAAA,EAAA,GAAA,WAAA,mBAAA,EAAA,OAAA,yCAAA,CAAA,EAAA,gpEAAA,WAAA,eAAA,EAAA,OAAA,qCAAA,CAAA,EAAA,GAAA,WAAA,cAAA,EAAA,OAAA,oCAAA,CAAA,EAAA,GAAA,WAAA,cAAA,EAAA,OAAA,oCAAA,CAAA,EAAA,wXAAA,WAAA,eAAA,EAAA,OAAA,qCAAA,CAAA,EAAA,GAAA,WAAA,gBAAA,EAAA,OAAA,sCAAA,CAAA,EAAA,GAAA,WAAA,oBAAA,EAAA,OAAA,0CAAA,CAAA,EAAA,GAAA,WAAA,mBAAA,EAAA,OAAA,yCAAA,CAAA,EAAA,GAAA,WAAA,aAAA,EAAA,OAAA,mCAAA,CAAA,EAAA,GAAA,WAAA,YAAA,EAAA,OAAA,kCAAA,CAAA,EAAA,gMAAA,WAAA,WAAA,EAAA,OAAA,8BAAA,CAAA,EAAA,8OAAA,WAAA,QAAA,EAAA,OAAA,8BAAA,CAAA,EAAA,GAAA,WAAA,SAAA,EAAA,OAAA,+BAAA,CAAA,EAAA;AAoUT;AAEA,IAAa,mBAAb,cAAsC,YAAY;;EACtB,KAAA,UAAA;;;EACV,KAAA,SAAA,kBAAkB,YAAM;;;EACtB,KAAA,WAAA,eAAe,gBAAgB,CAAC;;AACpD;AAEA,WAAW,gBAAgB"}
+{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/video/skin.ts"],"sourcesContent":["import { audioText, captionsText, qualityText, settingsText, speedText } from '@videojs/core/i18n/text/menu';\nimport { renderIcon } from '@videojs/icons/render';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { renderText } from '../../i18n/render-text';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\nimport styles from './skin.css?inline';\n\n// Register the 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-mute-button commandfor=\"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=\"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            </div>\n\n            <div class=\"media-time-controls\">\n              <media-time type=\"current\" class=\"media-time\"></media-time>\n              <media-time-slider class=\"media-slider\">\n                <media-time-slider-chapters class=\"media-slider__chapters\">\n                  <template>\n                    <div class=\"media-slider__chapter\">\n                      <media-slider-track class=\"media-slider__track media-slider__chapter-track\">\n                        <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n                        <media-slider-fill class=\"media-slider__fill\"></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-slider-thumb>\n\n                <media-slider-preview overflow=\"visible\" class=\"media-slider__preview\">\n                  <div class=\"media-surface media-thumbnail media-slider__thumbnail\">\n                    <media-slider-thumbnail class=\"media-thumbnail__image\"></media-slider-thumbnail>\n                    ${renderIcon('spinner', { class: 'media-thumbnail__spinner media-icon' })}\n                  </div>\n                  <div class=\"media-slider__value\">\n                    <media-time-slider-chapter-title class=\"media-slider__chapter-title\"></media-time-slider-chapter-title>\n                    <media-slider-value type=\"pointer\" class=\"media-time\"></media-slider-value>\n                  </div>\n                </media-slider-preview>\n              </media-time-slider>\n              <media-time toggle type=\"remaining\" class=\"media-time\"></media-time>\n            </div>\n\n            <div class=\"media-button-group\">\n              <media-captions-button 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-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              <button id=\"settings-trigger\" commandfor=\"settings-menu\" aria-labelledby=\"settings-label\" class=\"media-button media-button--subtle media-button--icon media-button--settings\">\n                ${renderIcon('gear', { class: 'media-icon media-icon--settings' })}\n                ${renderText(settingsText, { id: 'settings-label', class: 'media-sr-only' })}\n              </button>\n              <media-menu id=\"settings-menu\" side=\"top\" align=\"center\" class=\"media-surface media-popover media-menu media-menu--settings\">\n                <div class=\"media-menu__group\">\n                    <media-menu-item commandfor=\"settings-quality-menu\" class=\"media-menu__item media-menu__item--submenu\">\n                      ${renderIcon('switches', { class: 'media-icon' })}\n                      ${renderText(qualityText)}\n                      <span class=\"media-menu__hint\">\n                        <span data-part=\"hint\" class=\"media-menu__hint-label\"></span>\n                        ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n                      </span>\n                    </media-menu-item>\n                    <media-menu-item commandfor=\"settings-audio-menu\" class=\"media-menu__item media-menu__item--submenu\">\n                      ${renderIcon('speech', { class: 'media-icon' })}\n                      ${renderText(audioText)}\n                      <span class=\"media-menu__hint\">\n                        <span data-part=\"hint\" class=\"media-menu__hint-label\"></span>\n                        ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n                      </span>\n                    </media-menu-item>\n                    <media-menu-item commandfor=\"settings-speed-menu\" class=\"media-menu__item media-menu__item--submenu\">\n                      ${renderIcon('speed', { class: 'media-icon' })}\n                      ${renderText(speedText)}\n                      <span class=\"media-menu__hint\">\n                        <span data-part=\"hint\" class=\"media-menu__hint-label\"></span>\n                        ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n                      </span>\n                    </media-menu-item>\n                    <media-menu-item commandfor=\"settings-captions-menu\" class=\"media-menu__item media-menu__item--submenu\">\n                      ${renderIcon('captions-off', { class: 'media-icon' })}\n                      ${renderText(captionsText)}\n                      <span class=\"media-menu__hint\">\n                        <span data-part=\"hint\" class=\"media-menu__hint-label\"></span>\n                        ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n                      </span>\n                    </media-menu-item>\n                </div>\n\n                <media-menu id=\"settings-quality-menu\" class=\"media-menu__panel\">\n                  <media-menu-item class=\"media-menu__back\">\n                    ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n                    ${renderText(qualityText)}\n                  </media-menu-item>\n                  <div class=\"media-menu__separator\"></div>\n                  <media-quality-radio-group class=\"media-menu__group\">\n                    <template>\n                      <media-menu-radio-item class=\"media-menu__item\">\n                        <span>\n                          <span data-part=\"label\"></span>\n                          <sup data-part=\"tier\" class=\"media-menu__tier\"></sup>\n                        </span>\n                        <span data-part=\"badge\" class=\"media-badge\"></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-quality-radio-group>\n                </media-menu>\n\n                <media-menu id=\"settings-audio-menu\" class=\"media-menu__panel\">\n                  <media-menu-item class=\"media-menu__back\">\n                    ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n                    ${renderText(audioText)}\n                  </media-menu-item>\n                  <div class=\"media-menu__separator\"></div>\n                  <media-audio-track-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-audio-track-radio-group>\n                </media-menu>\n\n                <media-menu id=\"settings-speed-menu\" class=\"media-menu__panel\">\n                  <media-menu-item class=\"media-menu__back\">\n                    ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n                    ${renderText(speedText)}\n                  </media-menu-item>\n                  <div class=\"media-menu__separator\"></div>\n                  <media-playback-rate-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-playback-rate-radio-group>\n                </media-menu>\n\n                <media-menu id=\"settings-captions-menu\" class=\"media-menu__panel\">\n                  <media-menu-item class=\"media-menu__back\">\n                    ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n                    ${renderText(captionsText)}\n                  </media-menu-item>\n                  <div class=\"media-menu__separator\"></div>\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-menu>\n              <media-tooltip id=\"settings-tooltip\" trigger=\"settings-trigger\" side=\"top\" class=\"media-surface media-tooltip\">\n                ${renderText(settingsText)}\n              </media-tooltip>\n            </div>\n          </div>\n\n          <div class=\"media-surface media-controls media-controls--secondary\">\n            <div class=\"media-button-group\">\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            </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=\"ArrowRight\" action=\"seekStep\" value=\"5\"></media-hotkey>\n      <media-hotkey keys=\"ArrowLeft\" action=\"seekStep\" value=\"-5\"></media-hotkey>\n      <media-hotkey keys=\"l\" action=\"seekStep\" value=\"10\"></media-hotkey>\n      <media-hotkey keys=\"j\" action=\"seekStep\" value=\"-10\"></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      <media-hotkey keys=\"0-9\" action=\"seekToPercent\"></media-hotkey>\n      <media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\"></media-hotkey>\n      <media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\"></media-hotkey>\n      <media-hotkey keys=\">\" action=\"speedUp\"></media-hotkey>\n      <media-hotkey keys=\"<\" action=\"speedDown\"></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=\"seekStep\" value=\"-10\" region=\"left\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"10\" region=\"right\"></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-seek-indicator hidden class=\"media-seek-indicator\">\n          ${renderIcon('chevron', { class: 'media-icon media-icon--seek' })}\n          <media-seek-indicator-value class=\"media-seek-indicator__value\"></media-seek-indicator-value>\n        </media-seek-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 VideoSkinElement extends SkinElement {\n  static readonly tagName = 'video-skin';\n  static styles = createShadowStyle(styles);\n  static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(VideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinElement.tagName]: VideoSkinElement;\n  }\n}\n"],"mappings":"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"}

package/dist/default/define/video/skin.tailwind.js

@@ -17,7 +17,7 @@ import { audioText, captionsText, qualityText, settingsText, speedText } from "@
 import { cn } from "@videojs/utils/style";
 //#region src/define/video/skin.tailwind.ts
 function getTemplateHTML() {
-	return `<media-container class="${container(true)}"> <slot name="media"></slot><slot></slot><media-poster class="${poster(true)}"> <slot name="poster"></slot></media-poster><media-buffering-indicator class="${bufferingIndicator.root}"> ${renderIcon("spinner", { class: icon })} </media-buffering-indicator><media-error-dialog class="${error.root}"> <div class="${error.dialog}"> <div class="${error.content}"> <media-alert-dialog-title class="${error.title}"></media-alert-dialog-title><media-alert-dialog-description class="${error.description}"></media-alert-dialog-description></div><div class="${error.actions}"> <media-alert-dialog-close class="${cn(button.base, button.primary)}"></media-alert-dialog-close></div></div></media-error-dialog><media-controls data-controls="" class="${controls}"> <media-tooltip-group><div class="${primaryControls}"> <div class="${buttonGroupStart}"> <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}"> ${renderIcon("restart", { class: cn(icon, iconState.play.restart) })} ${renderIcon("play", { class: cn(icon, iconState.play.play) })} ${renderIcon("pause", { class: cn(icon, iconState.play.pause) })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"> <media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut></media-tooltip><media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}"> ${renderIcon("volume-off", { class: cn(icon, iconState.mute.volumeOff) })} ${renderIcon("volume-low", { class: cn(icon, iconState.mute.volumeLow) })} ${renderIcon("volume-high", { class: cn(icon, iconState.mute.volumeHigh) })} </media-mute-button><media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}"> <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge"> <media-slider-track class="${slider.track}"> <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb></media-volume-slider></media-popover></div><div class="${time.group}"> <media-time type="current" class="${time.current}"></media-time><media-time-slider class="${slider.root}"> <media-time-slider-chapters class="${slider.chapters}"> <template><div class="${slider.chapter.base}"> <media-slider-track class="${slider.chapter.track}"> <media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer><media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill></media-slider-track></div></template></media-time-slider-chapters><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb><media-slider-preview overflow="visible" class="${slider.preview}"> <div class="${cn(thumbnail.root, slider.thumbnail)}"> <media-slider-thumbnail class="${thumbnail.image}"></media-slider-thumbnail> ${renderIcon("spinner", { class: cn(icon, thumbnail.spinner) })} </div><div class="${slider.value}"> <media-time-slider-chapter-title class="${slider.chapterTitle}"></media-time-slider-chapter-title><media-slider-value type="pointer"></media-slider-value></div></media-slider-preview></media-time-slider><media-time toggle type="remaining" class="${time.duration}"></media-time></div><div class="${cn(buttonGroupEnd, menu.settingsGroup)}"> <media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}"> ${renderIcon("captions-off", { class: cn(icon, iconState.captions.off) })} ${renderIcon("captions-on", { class: cn(icon, iconState.captions.on) })} </media-captions-button><media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"> <media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut></media-tooltip><button id="settings-trigger" commandfor="settings-menu" aria-labelledby="settings-label" class="${cn(button.base, button.subtle, button.icon, menu.settingsTrigger)}"> ${renderIcon("gear", { class: cn(icon, menu.settingsIcon) })} ${renderText(settingsText, {
+	return `<media-container class="${container(true)}"> <slot name="media"></slot><slot></slot><media-poster class="${poster(true)}"> <slot name="poster"><img alt="" decoding="async"></slot></media-poster><media-buffering-indicator class="${bufferingIndicator.root}"> ${renderIcon("spinner", { class: icon })} </media-buffering-indicator><media-error-dialog class="${error.root}"> <div class="${error.dialog}"> <div class="${error.content}"> <media-alert-dialog-title class="${error.title}"></media-alert-dialog-title><media-alert-dialog-description class="${error.description}"></media-alert-dialog-description></div><div class="${error.actions}"> <media-alert-dialog-close class="${cn(button.base, button.primary)}"></media-alert-dialog-close></div></div></media-error-dialog><media-controls data-controls="" class="${controls}"> <media-tooltip-group><div class="${primaryControls}"> <div class="${buttonGroupStart}"> <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}"> ${renderIcon("restart", { class: cn(icon, iconState.play.restart) })} ${renderIcon("play", { class: cn(icon, iconState.play.play) })} ${renderIcon("pause", { class: cn(icon, iconState.play.pause) })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"> <media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut></media-tooltip><media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}"> ${renderIcon("volume-off", { class: cn(icon, iconState.mute.volumeOff) })} ${renderIcon("volume-low", { class: cn(icon, iconState.mute.volumeLow) })} ${renderIcon("volume-high", { class: cn(icon, iconState.mute.volumeHigh) })} </media-mute-button><media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}"> <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge"> <media-slider-track class="${slider.track}"> <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb></media-volume-slider></media-popover></div><div class="${time.group}"> <media-time type="current" class="${time.current}"></media-time><media-time-slider class="${slider.root}"> <media-time-slider-chapters class="${slider.chapters}"> <template><div class="${slider.chapter.base}"> <media-slider-track class="${slider.chapter.track}"> <media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer><media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill></media-slider-track></div></template></media-time-slider-chapters><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb><media-slider-preview overflow="visible" class="${slider.preview}"> <div class="${cn(thumbnail.root, slider.thumbnail)}"> <media-slider-thumbnail class="${thumbnail.image}"></media-slider-thumbnail> ${renderIcon("spinner", { class: cn(icon, thumbnail.spinner) })} </div><div class="${slider.value}"> <media-time-slider-chapter-title class="${slider.chapterTitle}"></media-time-slider-chapter-title><media-slider-value type="pointer"></media-slider-value></div></media-slider-preview></media-time-slider><media-time toggle type="remaining" class="${time.duration}"></media-time></div><div class="${cn(buttonGroupEnd, menu.settingsGroup)}"> <media-captions-button 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><media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"> <media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut></media-tooltip><button id="settings-trigger" commandfor="settings-menu" aria-labelledby="settings-label" class="${cn(button.base, button.subtle, button.icon, menu.settingsTrigger)}"> ${renderIcon("gear", { class: cn(icon, menu.settingsIcon) })} ${renderText(settingsText, {
 		id: "settings-label",
 		class: "sr-only"
 	})} </button><media-menu id="settings-menu" side="top" align="center" class="${menu.settings}"> <div class="${menu.group}"> <media-menu-item commandfor="settings-quality-menu" class="${menu.item}"> ${renderIcon("switches", { class: cn(icon, menu.icon) })} ${renderText(qualityText)} <span class="${menu.hint}"> <span data-part="hint" class="${menu.hintLabel}"></span> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron) })} </span></media-menu-item><media-menu-item commandfor="settings-audio-menu" class="${menu.item}"> ${renderIcon("speech", { class: icon })} ${renderText(audioText)} <span class="${menu.hint}"> <span data-part="hint" class="${menu.hintLabel}"></span> ${renderIcon("chevron", { class: cn(icon, menu.chevron) })} </span></media-menu-item><media-menu-item commandfor="settings-speed-menu" class="${menu.item}"> ${renderIcon("speed", { class: cn(icon, menu.icon) })} ${renderText(speedText)} <span class="${menu.hint}"> <span data-part="hint" class="${menu.hintLabel}"></span> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron) })} </span></media-menu-item><media-menu-item commandfor="settings-captions-menu" class="${menu.item}"> ${renderIcon("captions-off", { class: cn(icon, menu.icon) })} ${renderText(captionsText)} <span class="${menu.hint}"> <span data-part="hint" class="${menu.hintLabel}"></span> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron) })} </span></media-menu-item></div><media-menu id="settings-quality-menu" class="${menu.submenuPanel}"> <media-menu-item class="${menu.back}"> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })} ${renderText(qualityText)} </media-menu-item><div class="${menu.separator}"></div><media-quality-radio-group class="${menu.group}"> <template><media-menu-radio-item class="${menu.item}"> <span><span data-part="label"></span><sup data-part="tier" class="${menu.tier}"></sup></span><span data-part="badge" class="${badge}"></span><media-menu-item-indicator force-mount class="${menu.indicator}"> ${renderIcon("check", { class: cn(icon, menu.icon) })} </media-menu-item-indicator></media-menu-radio-item></template></media-quality-radio-group></media-menu><media-menu id="settings-audio-menu" class="${menu.submenuPanel}"> <media-menu-item class="${menu.back}"> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })} ${renderText(audioText)} </media-menu-item><div class="${menu.separator}"></div><media-audio-track-radio-group class="${menu.group}"> <template><media-menu-radio-item class="${menu.item}"> <span data-part="label"></span><media-menu-item-indicator force-mount class="${menu.indicator}"> ${renderIcon("check", { class: icon })} </media-menu-item-indicator></media-menu-radio-item></template></media-audio-track-radio-group></media-menu><media-menu id="settings-speed-menu" class="${menu.submenuPanel}"> <media-menu-item class="${menu.back}"> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })} ${renderText(speedText)} </media-menu-item><div class="${menu.separator}"></div><media-playback-rate-radio-group class="${menu.group}"> <template><media-menu-radio-item class="${menu.item}"> <span data-part="label"></span><media-menu-item-indicator force-mount class="${menu.indicator}"> ${renderIcon("check", { class: cn(icon, menu.icon) })} </media-menu-item-indicator></media-menu-radio-item></template></media-playback-rate-radio-group></media-menu><media-menu id="settings-captions-menu" class="${menu.submenuPanel}"> <media-menu-item class="${menu.back}"> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })} ${renderText(captionsText)} </media-menu-item><div class="${menu.separator}"></div><media-captions-radio-group class="${menu.group}"> <template><media-menu-radio-item class="${menu.item}"> <span data-part="label"></span><media-menu-item-indicator force-mount class="${menu.indicator}"> ${renderIcon("check", { class: cn(icon, menu.icon) })} </media-menu-item-indicator></media-menu-radio-item></template></media-captions-radio-group></media-menu></media-menu><media-tooltip id="settings-tooltip" trigger="settings-trigger" side="top" class="${cn(popup.tooltip)}"> ${renderText(settingsText)} </media-tooltip></div></div><div class="${secondaryControls}"> <div class="${buttonGroupEnd}"> <media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}"> ${renderIcon("cast-enter", { class: cn(icon, iconState.cast.enter) })} ${renderIcon("cast-exit", { class: cn(icon, iconState.cast.exit) })} </media-cast-button><media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}"> <media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut></media-tooltip><media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}"> ${renderIcon("airplay-enter", { class: cn(icon, iconState.airplay.enter) })} ${renderIcon("airplay-exit", { class: cn(icon, iconState.airplay.exit) })} </media-airplay-button><media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}"> <media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut></media-tooltip><media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}"> ${renderIcon("pip-enter", { class: cn(icon, iconState.pip.off) })} ${renderIcon("pip-exit", { class: cn(icon, iconState.pip.on) })} </media-pip-button><media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}"> <media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut></media-tooltip><media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}"> ${renderIcon("fullscreen-enter", { class: cn(icon, iconState.fullscreen.enter) })} ${renderIcon("fullscreen-exit", { class: cn(icon, iconState.fullscreen.exit) })} </media-fullscreen-button><media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}"> <media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut></media-tooltip></div></div></media-tooltip-group></media-controls><div class="${overlay}"></div><media-hotkey keys="Space" action="togglePaused"></media-hotkey><media-hotkey keys="k" action="togglePaused"></media-hotkey><media-hotkey keys="m" action="toggleMuted"></media-hotkey><media-hotkey keys="f" action="toggleFullscreen"></media-hotkey><media-hotkey keys="c" action="toggleSubtitles"></media-hotkey><media-hotkey keys="i" action="togglePictureInPicture"></media-hotkey><media-hotkey keys="ArrowRight" action="seekStep" value="5"></media-hotkey><media-hotkey keys="ArrowLeft" action="seekStep" value="-5"></media-hotkey><media-hotkey keys="l" action="seekStep" value="10"></media-hotkey><media-hotkey keys="j" action="seekStep" value="-10"></media-hotkey><media-hotkey keys="ArrowUp" action="volumeStep" value="0.05"></media-hotkey><media-hotkey keys="ArrowDown" action="volumeStep" value="-0.05"></media-hotkey><media-hotkey keys="0-9" action="seekToPercent"></media-hotkey><media-hotkey keys="Home" action="seekToPercent" value="0"></media-hotkey><media-hotkey keys="End" action="seekToPercent" value="100"></media-hotkey><media-hotkey keys=">" action="speedUp"></media-hotkey><media-hotkey keys="<" action="speedDown"></media-hotkey><media-gesture type="tap" action="togglePaused" pointer="mouse" region="center"></media-gesture><media-gesture type="tap" action="toggleControls" pointer="touch"></media-gesture><media-gesture type="doubletap" action="seekStep" value="-10" region="left"></media-gesture><media-gesture type="doubletap" action="toggleFullscreen" region="center"></media-gesture><media-gesture type="doubletap" action="seekStep" value="10" region="right"></media-gesture><media-status-announcer class="sr-only"></media-status-announcer><div class="${inputIndicatorOverlay}"> <media-volume-indicator hidden class="${volumeIndicator.root}" > <media-volume-indicator-fill class="${volumeIndicator.content}"> ${renderIcon("volume-high", { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.high) })} ${renderIcon("volume-low", { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.low) })} ${renderIcon("volume-off", { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.off) })} <media-volume-indicator-value class="${volumeIndicator.value}"></media-volume-indicator-value></media-volume-indicator-fill></media-volume-indicator><media-status-indicator hidden actions="toggleSubtitles toggleFullscreen togglePictureInPicture" class="${statusIndicator.root}"> <div class="${statusIndicator.content}"> ${renderIcon("captions-on", { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOn) })} ${renderIcon("captions-off", { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOff) })} ${renderIcon("fullscreen-enter", { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenEnter) })} ${renderIcon("fullscreen-exit", { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenExit) })} ${renderIcon("pip-enter", { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipEnter) })} ${renderIcon("pip-exit", { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipExit) })} <media-status-indicator-value class="${statusIndicator.value}"></media-status-indicator-value></div></media-status-indicator><media-seek-indicator hidden class="${seekIndicator.root}"> ${renderIcon("chevron", { class: seekIndicator.icon })} <media-seek-indicator-value class="${seekIndicator.value}"></media-seek-indicator-value></media-seek-indicator><media-status-indicator hidden actions="togglePaused" class="${statusIndicator.playback.root}"> ${renderIcon("play", { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.play) })} ${renderIcon("pause", { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.pause) })} </media-status-indicator></div></media-container>`;