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

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

@@ -639,7 +639,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;
   }
@@ -683,9 +683,13 @@ media-container {
 }
 
 .media-minimal-skin .media-slider {
+  --track-size: calc(var(--spacing) * 1);
+  --track-highlighted-size: calc(var(--spacing) * 1.75);
+  --track-border-radius: 99px;
   --thumb-size: calc(var(--spacing) * 3);
-  --thumb-active-size: calc(var(--spacing) * 3);
-  --track-border-radius: calc(Infinity * 1px);
+  --chapter-gap: calc(var(--spacing) * 1);
+  --chapter-inset-start: calc(var(--chapter-gap) / 2);
+  --chapter-inset-end: calc(var(--chapter-gap) / 2);
 
   position: relative;
   display: flex;
@@ -717,68 +721,14 @@ media-container {
 
     &[data-orientation="horizontal"] {
       width: 100%;
-      height: calc(var(--spacing) * 0.75);
+      height: var(--track-size);
     }
     &[data-orientation="vertical"] {
-      width: calc(var(--spacing) * 0.75);
+      width: var(--track-size);
       height: 100%;
     }
   }
 
-  /* Thumb */
-  .media-slider__thumb {
-    position: absolute;
-    z-index: 10;
-    width: var(--thumb-size);
-    height: var(--thumb-size);
-    user-select: none;
-    outline: 2px solid transparent;
-    outline-offset: -2px;
-    background-color: currentColor;
-    border-radius: calc(Infinity * 1px);
-    box-shadow:
-      0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.15)),
-      0 1px 3px 0 oklch(0 0 0 / 0.15),
-      0 1px 2px -1px oklch(0 0 0 / 0.15);
-    opacity: 0;
-    transform-origin: center;
-    scale: 0.7;
-    translate: -50% -50%;
-    transition-timing-function: ease-out;
-    transition-duration: 150ms;
-
-    &[data-orientation="horizontal"] {
-      top: 50%;
-      left: var(--media-slider-fill);
-    }
-    &[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-fill));
-      left: 50%;
-    }
-
-    &:focus-visible {
-      outline-color: var(--focus-ring-color);
-      outline-offset: 2px;
-    }
-  }
-
-  &:focus-within .media-slider__thumb,
-  .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 .media-slider__thumb {
-      width: var(--thumb-active-size);
-      height: var(--thumb-active-size);
-      opacity: 1;
-      scale: 1;
-    }
-  }
-
   /* Shared track fills */
   .media-slider__buffer,
   .media-slider__fill {
@@ -790,13 +740,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;
     }
   }
 
@@ -823,6 +782,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 {
@@ -846,9 +813,6 @@ media-container {
   }
 
   .media-slider__chapter {
-    --chapter-gap: calc(var(--spacing) * 1);
-    --chapter-inset-start: calc(var(--chapter-gap) / 2);
-    --chapter-inset-end: calc(var(--chapter-gap) / 2);
     position: absolute;
     inset: 0;
     display: flex;
@@ -865,8 +829,6 @@ media-container {
     }
 
     .media-slider__chapter-track {
-      --chapter-track-size: calc(var(--spacing) * 0.75);
-      --chapter-track-highlighted-size: calc(var(--spacing) * 1.25);
       border-radius: var(--track-border-radius);
 
       @media (prefers-reduced-motion: no-preference) {
@@ -879,7 +841,7 @@ media-container {
       clip-path: inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start));
 
       .media-slider__chapter-track {
-        height: var(--chapter-track-size);
+        height: var(--track-size);
         clip-path: inset(
           0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
             calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
@@ -887,7 +849,7 @@ media-container {
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        height: var(--chapter-track-highlighted-size);
+        height: var(--track-highlighted-size);
       }
     }
 
@@ -895,7 +857,7 @@ media-container {
       clip-path: inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0);
 
       .media-slider__chapter-track {
-        width: var(--chapter-track-size);
+        width: var(--track-size);
         clip-path: inset(
           calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
             calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
@@ -903,63 +865,102 @@ media-container {
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        width: var(--chapter-track-highlighted-size);
+        width: var(--track-highlighted-size);
       }
     }
   }
 
-  /* Dragging — thumb and fill follow the pointer position */
-  &[data-dragging] {
-    .media-slider__thumb[data-orientation="horizontal"] {
-      left: var(--media-slider-pointer);
-    }
-    .media-slider__thumb[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-pointer));
-    }
-    .media-slider__fill[data-orientation="horizontal"] {
-      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+  /* Thumb */
+  .media-slider__thumb {
+    position: absolute;
+    z-index: 10;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    user-select: none;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    background-color: currentColor;
+    border-radius: calc(Infinity * 1px);
+    box-shadow:
+      0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.15)),
+      0 1px 3px 0 oklch(0 0 0 / 0.15),
+      0 1px 2px -1px oklch(0 0 0 / 0.15);
+    opacity: 0;
+    transform-origin: center;
+    scale: 0.7;
+    translate: -50% -50%;
+
+    &[data-orientation="horizontal"] {
+      top: 50%;
+      left: var(--media-slider-fill);
     }
-    .media-slider__fill[data-orientation="vertical"] {
-      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-fill));
+      left: 50%;
     }
-  }
 
-  @media (prefers-reduced-motion: no-preference) {
-    .media-slider__thumb {
-      transition-property: opacity, scale, height, width, outline-offset, left, top;
+    &:focus-visible {
+      outline-color: var(--focus-ring-color);
+      outline-offset: 2px;
     }
-    .media-slider__fill {
-      transition-timing-function: linear;
-      transition-duration: 200ms;
+
+    &:focus-visible,
+    &.media-slider__thumb--persistent {
+      opacity: 1;
+      scale: 1;
     }
-    .media-slider__buffer {
+
+    @media (prefers-reduced-motion: no-preference) {
       transition-timing-function: ease-out;
-      transition-duration: 250ms;
+      transition-duration: 150ms;
+      transition-property: opacity, outline-offset, left, top, scale;
     }
   }
 
-  &[data-dragging],
-  &[data-seeking] {
-    .media-slider__thumb,
-    .media-slider__fill,
-    .media-slider__buffer {
-      transition-duration: 0ms;
+  @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: 28;
+    --max-size: min(calc(var(--spacing) * var(--max-size-factor)), 100cqi);
 
     min-width: 100%;
     height: calc(var(--spacing) * 1);
 
+    @container media-root (width > 32rem) {
+      --max-size-factor: 36;
+    }
+
+    @container media-root (width > 42rem) {
+      --max-size-factor: 48;
+    }
+
     .media-slider__thumbnail,
     .media-slider__value {
       position: absolute;
       left: var(--preview-left, var(--media-slider-pointer));
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       opacity: 0;
       filter: blur(8px);
       transform-origin: bottom;
@@ -971,8 +972,9 @@ media-container {
     }
 
     .media-slider__thumbnail {
-      --thumbnail-max-width: var(--max-width);
-      bottom: calc(100% + (var(--spacing) * 12));
+      --thumbnail-max-width: var(--max-size);
+      --thumbnail-max-height: var(--max-size);
+      bottom: calc(100% + (var(--spacing) * 11));
     }
 
     .media-slider__value {
@@ -1772,8 +1774,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) {
@@ -1935,6 +1937,7 @@ media-container {
   --base-boundary-offset: 1;
   --inset-factor: 1;
   --inset: calc(var(--spacing) * var(--inset-factor));
+  --volume-mask: linear-gradient(to right, transparent 10%, #000 25%, #000 100%);
 
   position: absolute;
   inset-inline: var(--inset);
@@ -1990,6 +1993,37 @@ media-container {
     justify-content: end;
   }
 
+  :is(.media-time-controls, .media-button-group:last-child) {
+    mask-image: var(--volume-mask-image, none);
+    mask-repeat: no-repeat;
+    mask-position: var(--volume-mask-position, 100% 0);
+    mask-size: var(--volume-mask-size, 200% 100%);
+    transition: mask-position 50ms ease-out;
+  }
+
+  @container media-root (width <= 42rem) {
+    .media-popover--volume {
+      --media-popover-side-offset: calc(var(--spacing) * 3);
+    }
+  }
+
+  &:has(.media-button--mute[aria-expanded="true"]) {
+    @container media-root (width <= 42rem) {
+      .media-button-group:last-child {
+        --volume-mask-image: var(--volume-mask);
+        --volume-mask-position: 0 0;
+        --volume-mask-size: 400% 100%;
+      }
+    }
+
+    @container media-root (width > 42rem) {
+      .media-time-controls {
+        --volume-mask-image: var(--volume-mask);
+        --volume-mask-position: 0 0;
+      }
+    }
+  }
+
   @container media-root (width > 42rem) {
     --inset-factor: 2;
     --base-side-offset: 2;
@@ -2007,20 +2041,6 @@ media-container {
     .media-button-group:last-child {
       flex: 0 0 auto;
     }
-
-    .media-time-controls {
-      mask-position: 100% 0;
-      mask-size: 200% 100%;
-      transition: mask-position 50ms ease-out;
-    }
-
-    &:has(.media-button--mute[aria-expanded="true"]) .media-time-controls {
-      mask-image: linear-gradient(to right, transparent 10%, #000 25%, #000 100%);
-    }
-
-    &:has(.media-button--mute[aria-expanded="true"]) .media-time-controls {
-      mask-position: 0 0;
-    }
   }
 }
 
@@ -2045,9 +2065,9 @@ media-container {
 .media-minimal-skin--video .media-slider .media-slider__preview {
   --preview-end-inset: calc(100cqi - 100%);
   --preview-left: clamp(
-    calc(var(--max-width) / 2),
+    calc(var(--max-size) / 2),
     var(--media-slider-pointer),
-    calc(100% - var(--max-width) / 2 + var(--preview-end-inset))
+    calc(100% - var(--max-size) / 2 + var(--preview-end-inset))
   );
 
   @container media-root (width > 42rem) {

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

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.d.ts","names":[],"sources":["../../../../src/define/video/minimal-skin.ts"],"mappings":";;;cAgVa,gCAAgC;kBAC3B;SACT,qCAAM;SACN,UAAQ;;QAKT;YACI;KACP,wBAAwB,UAAU"}
+{"version":3,"file":"minimal-skin.d.ts","names":[],"sources":["../../../../src/define/video/minimal-skin.ts"],"mappings":";;;cAkVa,gCAAgC;kBAC3B;SACT,qCAAM;SACN,UAAQ;;QAKT;YACI;KACP,wBAAwB,UAAU"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.js","names":["styles"],"sources":["../../../../src/define/video/minimal-skin.ts"],"sourcesContent":["import { audioText, captionsText, qualityText, settingsText, speedText } from '@videojs/core/i18n/text/menu';\nimport { renderIcon } from '@videojs/icons/render/minimal';\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 './minimal-skin.css?inline';\n\n// Register the player, container, and all UI custom elements.\nimport './minimal-ui';\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-minimal-skin media-minimal-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\">\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-controls\">\n        <media-tooltip-group>\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-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=\"right\" class=\"media-popover media-popover--volume\">\n              <media-volume-slider class=\"media-slider\" orientation=\"horizontal\" 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-group class=\"media-time-group\">\n              <media-time toggle type=\"current\" class=\"media-time media-time--current\"></media-time>\n              <media-time-separator class=\"media-time-separator\"></media-time-separator>\n              <media-time type=\"duration\" class=\"media-time media-time--duration\"></media-time>\n            </media-time-group>\n\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 class=\"media-slider__preview\">\n                <div class=\"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          </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-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-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-tooltip\">\n              ${renderText(settingsText)}\n            </media-tooltip>\n\n            <media-cast-button commandfor=\"cast-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--cast\">\n              ${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}\n              ${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}\n            </media-cast-button>\n            <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"media-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-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-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-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        </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-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            <div class=\"media-volume-indicator__progress\" aria-hidden=\"true\"></div>\n            <media-volume-indicator-value class=\"media-volume-indicator__value\"></media-volume-indicator-value>\n          </media-volume-indicator-fill>\n        </media-volume-indicator>\n\n        <media-status-indicator hidden actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\" class=\"media-status-indicator media-status-indicator--state\">\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\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\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 MinimalVideoSkinElement extends SkinElement {\n  static readonly tagName = 'video-minimal-skin';\n  static styles = createShadowStyle(styles);\n  static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(MinimalVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalVideoSkinElement.tagName]: MinimalVideoSkinElement;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"minimal-skin.js","names":["styles"],"sources":["../../../../src/define/video/minimal-skin.ts"],"sourcesContent":["import { audioText, captionsText, qualityText, settingsText, speedText } from '@videojs/core/i18n/text/menu';\nimport { renderIcon } from '@videojs/icons/render/minimal';\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 './minimal-skin.css?inline';\n\n// Register the player, container, and all UI custom elements.\nimport './minimal-ui';\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-minimal-skin media-minimal-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\">\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-controls\">\n        <media-tooltip-group>\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-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=\"right\" class=\"media-popover media-popover--volume\">\n              <media-volume-slider class=\"media-slider\" orientation=\"horizontal\" 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-group class=\"media-time-group\">\n              <media-time toggle type=\"current\" class=\"media-time media-time--current\"></media-time>\n              <media-time-separator class=\"media-time-separator\"></media-time-separator>\n              <media-time type=\"duration\" class=\"media-time media-time--duration\"></media-time>\n            </media-time-group>\n\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 class=\"media-slider__preview\">\n                <div class=\"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          </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-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-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-tooltip\">\n              ${renderText(settingsText)}\n            </media-tooltip>\n\n            <media-cast-button commandfor=\"cast-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--cast\">\n              ${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}\n              ${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}\n            </media-cast-button>\n            <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"media-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-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-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-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        </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-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            <div class=\"media-volume-indicator__progress\" aria-hidden=\"true\"></div>\n            <media-volume-indicator-value class=\"media-volume-indicator__value\"></media-volume-indicator-value>\n          </media-volume-indicator-fill>\n        </media-volume-indicator>\n\n        <media-status-indicator hidden actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\" class=\"media-status-indicator media-status-indicator--state\">\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\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\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 MinimalVideoSkinElement extends SkinElement {\n  static readonly tagName = 'video-minimal-skin';\n  static styles = createShadowStyle(styles);\n  static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(MinimalVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalVideoSkinElement.tagName]: MinimalVideoSkinElement;\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.tailwind.d.ts","names":[],"sources":["../../../../src/define/video/minimal-skin.tailwind.ts"],"mappings":";;;cAuWa,wCAAwC;kBACnC;SACT,UAAQ;;QAKT;YACI;KACP,gCAAgC,UAAU"}
+{"version":3,"file":"minimal-skin.tailwind.d.ts","names":[],"sources":["../../../../src/define/video/minimal-skin.tailwind.ts"],"mappings":";;;cAyWa,wCAAwC;kBACnC;SACT,UAAQ;;QAKT;YACI;KACP,gCAAgC,UAAU"}

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

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