@videojs/html 10.0.0-rc.1 → 10.0.0-rc.2

package/dist/dev/internal/skins/minimal-video/skin.css

@@ -404,8 +404,6 @@
     .media-poster {
       pointer-events: none;
       border-radius: inherit;
-      object-fit: var(--media-object-fit, contain);
-      object-position: var(--media-object-position, center);
       width: 100%;
       height: 100%;
       transition-property: opacity;
@@ -420,7 +418,7 @@
       opacity: 0;
     }
 
-    .media-poster img {
+    .media-poster-image {
       border-radius: inherit;
       object-fit: var(--media-object-fit, contain);
       object-position: var(--media-object-position, center);
@@ -430,7 +428,7 @@
       inset: 0;
     }
 
-    .media-poster:is(img):not([src]):not([srcset]) {
+    .media-poster-image:not([src]):not([srcset]) {
       visibility: hidden;
     }
   }
@@ -445,8 +443,38 @@
     inset: 0;
   }
 
-  .media-poster > slot::slotted(img:not([src]):not([srcset])),
-  .media-poster > slot > img:not([src]):not([srcset]) {
+  .media-poster > slot::slotted(img:not([src]):not([srcset])) {
+    visibility: hidden;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-poster {
+    pointer-events: none;
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+    transition-property: opacity;
+    transition-duration: 0.15s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: var(--media-duration-slower);
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-poster:not([data-visible]) {
+    opacity: 0;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-poster-image {
+    border-radius: inherit;
+    object-fit: var(--media-object-fit, contain);
+    object-position: var(--media-object-position, center);
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-poster-image:not([src]):not([srcset]) {
     visibility: hidden;
   }
 
@@ -1054,6 +1082,26 @@
     }
   }
 
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-popup-surface {
+    background-color: var(--media-popover);
+    color: var(--media-popover-foreground);
+    box-shadow:
+      0 0 0 1px var(--media-surface-border, var(--media-border)),
+      var(--media-shadow-surface);
+    backdrop-filter: var(--media-backdrop-filter-surface);
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-popup-surface:after {
+    z-index: 10;
+    pointer-events: none;
+    border-radius: inherit;
+    box-shadow: var(--media-shadow-surface-inset);
+    content: "";
+    display: none;
+    position: absolute;
+    inset: 0;
+  }
+
   @scope (.media-skin[data-theme="minimal"][data-preset="video"]) {
     .media-captions-button-off-icon {
       opacity: 0;
@@ -1243,6 +1291,7 @@
     }
 
     @scope (.media-slider) {
+      &:focus-within .media-slider-buffer,
       &[data-dragging] .media-slider-buffer,
       &[data-seeking] .media-slider-buffer {
         transition-duration: 0s;
@@ -1275,6 +1324,7 @@
     }
 
     @scope (.media-slider) {
+      &:focus-within .media-slider-fill,
       &[data-dragging] .media-slider-fill,
       &[data-seeking] .media-slider-fill {
         transition-duration: 0s;
@@ -1333,6 +1383,14 @@
       translate: -50% -50%;
     }
 
+    @scope (.media-slider) {
+      &:focus-within .media-slider-thumb {
+        transition-property: opacity, height, width, outline-offset, scale;
+        transition-duration: 0.15s;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+
     @scope (.media-slider) {
       &[data-dragging] .media-slider-thumb {
         transition-property: opacity, height, width, outline-offset, scale;
@@ -1410,6 +1468,10 @@
       }
     }
 
+    .media-slider[data-disabled] {
+      pointer-events: none;
+    }
+
     .media-slider[data-orientation="horizontal"] {
       height: var(--media-slider-height, calc(var(--media-spacing) * 8));
       min-width: calc(var(--media-spacing) * 20);
@@ -1569,6 +1631,7 @@
       pointer-events: none;
       bottom: calc(100% + var(--media-slider-preview-offset));
       left: var(--media-preview-left, var(--media-slider-pointer));
+      max-height: var(--media-slider-preview-max-height);
       border-radius: var(--media-popup-radius);
       background-color: var(--media-backdrop);
       overflow: hidden;
@@ -1580,12 +1643,27 @@
       }
     }
 
-    .media-slider-thumbnail:has([data-loading]) {
+    .media-slider-thumbnail[data-loading] {
       aspect-ratio: 16 / 9;
       width: var(--media-slider-preview-max-width);
     }
 
+    .media-slider-thumbnail-image {
+      transition-property: opacity;
+      transition-duration: 0.15s;
+      transition-duration: var(--media-duration);
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      display: block;
+    }
+
+    @scope (.media-slider-thumbnail) {
+      &[data-loading] .media-slider-thumbnail-image {
+        opacity: 0;
+      }
+    }
+
     .media-slider-thumbnail-spinner-icon {
+      z-index: 10;
       width: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
       height: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
       opacity: 0;
@@ -1601,13 +1679,13 @@
     }
 
     @scope (.media-slider-thumbnail) {
-      &:not(:has([role="img"][data-loading])) .media-slider-thumbnail-spinner-icon {
+      &:not([data-loading]) .media-slider-thumbnail-spinner-icon {
         --media-spinner-animation: none;
       }
     }
 
     @scope (.media-slider-thumbnail) {
-      &:has([role="img"][data-loading]) .media-slider-thumbnail-spinner-icon {
+      &[data-loading] .media-slider-thumbnail-spinner-icon {
         opacity: 1;
       }
     }
@@ -1739,21 +1817,92 @@
     }
   }
 
-  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-slider-thumbnail-image {
-    max-height: var(--media-slider-preview-max-height);
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-slider-preview-content {
     max-width: var(--media-slider-preview-max-width);
-    border-radius: inherit;
+    transform-origin: bottom;
+    translate: -50% var(--media-hidden-preview-offset);
+    scale: var(--media-hidden-preview-scale) var(--media-hidden-preview-scale);
+    opacity: 0;
+    filter: blur(var(--media-hidden-blur));
+    transition-property: filter, opacity, scale;
+    transition-duration: 0.15s;
+    transition-duration: var(--media-duration);
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    position: absolute;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"])
+    :where(.media-slider):has(:focus-visible)
+    .media-slider-preview-content,
+  :where(.media-skin[data-theme="minimal"][data-preset="video"])
+    :where(.media-slider-preview)[data-pointing]
+    .media-slider-preview-content {
+    opacity: 1;
+    filter: none;
+    scale: 1;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-slider-thumbnail {
+    pointer-events: none;
+    bottom: calc(100% + var(--media-slider-preview-offset));
+    left: var(--media-preview-left, var(--media-slider-pointer));
+    max-height: var(--media-slider-preview-max-height);
+    border-radius: var(--media-popup-radius);
+    background-color: var(--media-backdrop);
+    overflow: hidden;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-slider-thumbnail {
+      background-color: color-mix(in oklab, var(--media-backdrop) 90%, transparent);
+    }
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-slider-thumbnail[data-loading] {
+    aspect-ratio: 16 / 9;
+    width: var(--media-slider-preview-max-width);
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-slider-thumbnail-image {
     transition-property: opacity;
     transition-duration: 0.15s;
     transition-duration: var(--media-duration);
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
     display: block;
-    position: relative;
-    overflow: clip;
   }
 
-  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-slider-thumbnail-image[data-loading] {
+  :where(.media-skin[data-theme="minimal"][data-preset="video"])
+    :where(.media-slider-thumbnail)[data-loading]
+    .media-slider-thumbnail-image {
+    opacity: 0;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-slider-thumbnail-spinner-icon {
+    z-index: 10;
+    width: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
+    height: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
     opacity: 0;
+    filter: drop-shadow(0 1px 0 var(--media-shadow-current-color));
+    transition-property: opacity;
+    transition-duration: 0.15s;
+    transition-duration: var(--media-duration);
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"])
+    :where(.media-slider-thumbnail):not([data-loading])
+    .media-slider-thumbnail-spinner-icon {
+    --media-spinner-animation: none;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"])
+    :where(.media-slider-thumbnail)[data-loading]
+    .media-slider-thumbnail-spinner-icon {
+    opacity: 1;
   }
 
   @scope (.media-skin[data-theme="minimal"][data-preset="video"]) {
@@ -2413,10 +2562,16 @@
       opacity: 0;
     }
 
+    @container media-root (width < 20rem) {
+      .video-controls-captions-button {
+        display: none;
+      }
+    }
+
     .video-controls-content {
       inset-inline: calc(var(--media-spacing) * 1);
       bottom: calc(var(--media-spacing) * 1);
-      z-index: 20;
+      z-index: 30;
       align-items: center;
       column-gap: calc(var(--media-spacing) * 2);
       border-radius: var(--media-controls-radius);
@@ -2566,6 +2721,14 @@
 
     .media-time-duration-value {
       font-variant-numeric: tabular-nums;
+      transition-property: opacity;
+      transition-duration: 0.15s;
+      transition-duration: var(--media-duration-slow);
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .media-time-duration-value[data-unavailable] {
+      opacity: 0.5;
     }
 
     @container media-root (width >= 42rem) {
@@ -2620,6 +2783,11 @@
       outline-color: var(--media-ring);
     }
 
+    .media-time-toggle[aria-disabled="true"] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
     @supports (corner-shape: squircle) {
       .media-time-toggle {
         corner-shape: squircle;
@@ -2676,7 +2844,7 @@
     --media-backdrop-filter-indicator: blur(8px);
     --media-backdrop-filter-dialog: blur(16px) saturate(150%);
     --media-control-corner-shape: round;
-    --media-control-radius: calc(infinity * 1px);
+    --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
     --media-controls-radius: var(--media-control-radius);
     --media-default-accent-color: oklch(100% 0 0);

package/dist/dev/internal/skins/minimal-video/template.js

@@ -6,7 +6,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </slot>
 <media-poster class="media-poster">
 <slot name="poster">
-<img alt="" decoding="async">
+<img alt="" decoding="async" class="media-poster-image">
 </img>
 </slot>
 </media-poster>
@@ -100,12 +100,12 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-slider-thumb class="media-slider-thumb media-time-slider-thumb">
 </media-slider-thumb>
 <media-slider-preview class="media-slider-preview" overflow="clamp">
-<div class="media-slider-preview-content media-popup-surface media-slider-thumbnail">
-<media-slider-thumbnail class="media-slider-thumbnail-image">
-</media-slider-thumbnail>
+<media-slider-thumbnail class="media-slider-preview-content media-popup-surface media-slider-thumbnail">
+<img alt="" aria-hidden="true" decoding="async" class="media-slider-thumbnail-image">
+</img>
 <media-icon family="minimal" name="spinner" class="media-slider-thumbnail-spinner-icon">
 </media-icon>
-</div>
+</media-slider-thumbnail>
 <div class="media-slider-preview-content media-time-slider-preview-content">
 <media-time-slider-chapter-title class="media-time-slider-chapter-title">
 </media-time-slider-chapter-title>
@@ -116,7 +116,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-time-slider>
 </media-controls-group>
 <media-controls-group class="video-controls-end">
-<media-captions-button class="media-button media-captions-button" id="vjs-q3nMcnUa-0-3-trigger">
+<media-captions-button class="media-button media-captions-button video-controls-captions-button" id="vjs-q3nMcnUa-0-3-trigger">
 <media-icon family="minimal" name="captions-off" class="media-button-icon media-captions-button-off-icon">
 </media-icon>
 <media-icon family="minimal" name="captions-on" class="media-button-icon media-captions-button-on-icon">

package/dist/dev/internal/skins/minimal-video/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/minimal-video/template.ts"],"sourcesContent":["import { createTemplate } from '@videojs/utils/dom';\n\n/** Static template rendered from the finalized VJSC module graph. */\nexport const template =\n  createTemplate(/* html */ `<media-container class=\"media-skin media-container video-skin\" data-theme=\"minimal\" data-preset=\"video\">\n<slot>\n</slot>\n<media-poster class=\"media-poster\">\n<slot name=\"poster\">\n<img alt=\"\" decoding=\"async\">\n</img>\n</slot>\n</media-poster>\n<media-buffering-indicator class=\"media-buffering-indicator\">\n<media-icon family=\"minimal\" name=\"spinner\" class=\"media-buffering-indicator-spinner-icon\">\n</media-icon>\n</media-buffering-indicator>\n<media-error-dialog class=\"media-dialog-root\">\n<media-dialog-backdrop class=\"media-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"media-dialog-popup\">\n<div class=\"media-dialog-content\">\n<media-dialog-title class=\"media-dialog-title\">\n</media-dialog-title>\n<media-dialog-description class=\"media-dialog-description\">\n</media-dialog-description>\n</div>\n<div class=\"media-dialog-actions\">\n<media-dialog-close class=\"media-button media-dialog-close\">\n</media-dialog-close>\n</div>\n</media-dialog-popup>\n</media-error-dialog>\n<media-controls>\n<media-controls-backdrop class=\"video-controls-backdrop\">\n</media-controls-backdrop>\n<media-controls-content class=\"video-controls video-controls-content video-controls-wrap\">\n<media-tooltip-group>\n<media-controls-group class=\"video-controls-start\">\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-q3nMcnUa-0-trigger\">\n<media-icon family=\"minimal\" name=\"restart\" class=\"media-button-icon media-play-button-restart-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"play\" class=\"media-button-icon media-play-button-play-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"pause\" class=\"media-button-icon media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-q3nMcnUa-0-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-mute-button commandfor=\"vjs-oQzbzmzn-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-q3nMcnUa-0-2-trigger\">\n<media-icon family=\"minimal\" name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"volume-low\" class=\"media-button-icon media-mute-button-low-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-q3nMcnUa-0-2-trigger\" delay=\"0\" sticky side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-volume-popover open-on-hover delay=\"200\" close-delay=\"100\" side=\"right\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover\" id=\"vjs-oQzbzmzn-0-popup\">\n<media-volume-slider class=\"media-slider media-volume-slider\" thumb-alignment=\"edge\" orientation=\"horizontal\">\n<media-slider-track class=\"media-slider-track\">\n<media-slider-fill class=\"media-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-slider-thumb media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n</media-controls-group>\n<media-controls-group class=\"video-time-slider-group\">\n<media-time-group class=\"media-time-group\">\n<media-time class=\"media-time-toggle media-time-current-value\" type=\"current\" toggle>\n</media-time>\n<media-time-separator class=\"media-time-separator\">\n</media-time-separator>\n<media-time class=\"media-time-duration-value\" type=\"duration\">\n</media-time>\n</media-time-group>\n<media-time-slider class=\"media-slider media-time-slider\">\n<media-time-slider-chapters class=\"media-time-slider-chapters\">\n<template>\n<div class=\"media-time-slider-chapter\">\n<media-slider-track class=\"media-slider-track media-time-slider-chapter-track\">\n<media-slider-buffer class=\"media-slider-buffer\">\n</media-slider-buffer>\n<media-slider-fill class=\"media-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n</div>\n</template>\n</media-time-slider-chapters>\n<media-slider-thumb class=\"media-slider-thumb media-time-slider-thumb\">\n</media-slider-thumb>\n<media-slider-preview class=\"media-slider-preview\" overflow=\"clamp\">\n<div class=\"media-slider-preview-content media-popup-surface media-slider-thumbnail\">\n<media-slider-thumbnail class=\"media-slider-thumbnail-image\">\n</media-slider-thumbnail>\n<media-icon family=\"minimal\" name=\"spinner\" class=\"media-slider-thumbnail-spinner-icon\">\n</media-icon>\n</div>\n<div class=\"media-slider-preview-content media-time-slider-preview-content\">\n<media-time-slider-chapter-title class=\"media-time-slider-chapter-title\">\n</media-time-slider-chapter-title>\n<media-slider-value class=\"media-time-slider-value\" type=\"pointer\">\n</media-slider-value>\n</div>\n</media-slider-preview>\n</media-time-slider>\n</media-controls-group>\n<media-controls-group class=\"video-controls-end\">\n<media-captions-button class=\"media-button media-captions-button\" id=\"vjs-q3nMcnUa-0-3-trigger\">\n<media-icon family=\"minimal\" name=\"captions-off\" class=\"media-button-icon media-captions-button-off-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"captions-on\" class=\"media-button-icon media-captions-button-on-icon\">\n</media-icon>\n</media-captions-button>\n<media-tooltip trigger=\"vjs-q3nMcnUa-0-3-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<button commandfor=\"vjs-CcJz5pDC-0-popup\" class=\"media-button media-settings-menu-trigger\" id=\"vjs-q3nMcnUa-0-4-trigger\">\n<media-icon family=\"minimal\" name=\"gear\" class=\"media-button-icon media-settings-menu-trigger-icon\">\n</media-icon>\n<media-text class=\"media-settings-menu-trigger-label\" token=\"menu.settings\">Settings</media-text>\n</button>\n<media-tooltip trigger=\"vjs-q3nMcnUa-0-4-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-text token=\"menu.settings\">Settings</media-text>\n</media-tooltip>\n<media-menu side=\"top\" align=\"center\" class=\"media-popup media-popup-surface media-menu-popup media-menu-resizable-popup\" id=\"vjs-CcJz5pDC-0-popup\">\n<media-menu-content class=\"media-menu-content\">\n<media-menu-item commandfor=\"vjs-uaE9WgnI-0-content\" class=\"media-menu-trigger-item\">\n<media-icon family=\"minimal\" name=\"switches\" class=\"media-menu-trigger-item-icon\">\n</media-icon>\n<media-text token=\"menu.quality\">Quality</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon family=\"minimal\" name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-uaE9WgnI-0-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon family=\"minimal\" name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.quality\">Quality</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-quality-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span>\n<span data-part=\"label\">\n</span>\n<sup data-part=\"tier\" class=\"media-menu-tier\">\n</sup>\n</span>\n<span data-part=\"badge\" class=\"media-menu-badge\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon family=\"minimal\" name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-quality-radio-group>\n</media-menu-content>\n<media-menu-item commandfor=\"vjs-TWDyaZVz-0-content\" class=\"media-menu-trigger-item\">\n<media-icon family=\"minimal\" name=\"speech\" class=\"media-menu-trigger-item-icon\">\n</media-icon>\n<media-text token=\"menu.audio\">Audio</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon family=\"minimal\" name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-TWDyaZVz-0-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon family=\"minimal\" name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.audio\">Audio</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-audio-track-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon family=\"minimal\" name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-audio-track-radio-group>\n</media-menu-content>\n<media-menu-item commandfor=\"vjs--UyvX1df-0-content\" class=\"media-menu-trigger-item\">\n<media-icon family=\"minimal\" name=\"speed\" class=\"media-menu-trigger-item-icon\">\n</media-icon>\n<media-text token=\"menu.speed\">Speed</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon family=\"minimal\" name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs--UyvX1df-0-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon family=\"minimal\" name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.speed\">Speed</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-playback-rate-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon family=\"minimal\" name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-playback-rate-radio-group>\n</media-menu-content>\n<media-menu-item commandfor=\"vjs-bjptDrPx-0-content\" class=\"media-menu-trigger-item\">\n<media-icon family=\"minimal\" name=\"captions-off\" class=\"media-menu-trigger-item-icon\">\n</media-icon>\n<media-text token=\"menu.captions\">Captions</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon family=\"minimal\" name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-bjptDrPx-0-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon family=\"minimal\" name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.captions\">Captions</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-captions-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon family=\"minimal\" name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-captions-radio-group>\n</media-menu-content>\n</media-menu-content>\n</media-menu>\n<media-controls-group class=\"video-controls-trailing\">\n<media-cast-button class=\"media-button media-cast-button\" id=\"vjs-q3nMcnUa-0-5-trigger\">\n<media-icon family=\"minimal\" name=\"cast-enter\" class=\"media-button-icon media-cast-button-enter-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"cast-exit\" class=\"media-button-icon media-cast-button-exit-icon\">\n</media-icon>\n</media-cast-button>\n<media-tooltip trigger=\"vjs-q3nMcnUa-0-5-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-airplay-button class=\"media-button media-airplay-button\" id=\"vjs-q3nMcnUa-0-6-trigger\">\n<media-icon family=\"minimal\" name=\"airplay-enter\" class=\"media-button-icon media-airplay-button-enter-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"airplay-exit\" class=\"media-button-icon media-airplay-button-exit-icon\">\n</media-icon>\n</media-airplay-button>\n<media-tooltip trigger=\"vjs-q3nMcnUa-0-6-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-pip-button class=\"media-button media-pip-button\" id=\"vjs-q3nMcnUa-0-7-trigger\">\n<media-icon family=\"minimal\" name=\"pip-enter\" class=\"media-button-icon media-pip-button-enter-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"pip-exit\" class=\"media-button-icon media-pip-button-exit-icon\">\n</media-icon>\n</media-pip-button>\n<media-tooltip trigger=\"vjs-q3nMcnUa-0-7-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-fullscreen-button class=\"media-button media-fullscreen-button\" id=\"vjs-q3nMcnUa-0-8-trigger\">\n<media-icon family=\"minimal\" name=\"fullscreen-enter\" class=\"media-button-icon media-fullscreen-button-enter-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"fullscreen-exit\" class=\"media-button-icon media-fullscreen-button-exit-icon\">\n</media-icon>\n</media-fullscreen-button>\n<media-tooltip trigger=\"vjs-q3nMcnUa-0-8-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</media-controls-group>\n</media-controls-group>\n</media-tooltip-group>\n</media-controls-content>\n</media-controls>\n<media-hotkey keys=\"Space\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"k\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"m\" action=\"toggleMuted\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowRight\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowLeft\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"l\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"j\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowUp\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowDown\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"0-9\" action=\"seekToPercent\">\n</media-hotkey>\n<media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\">\n</media-hotkey>\n<media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\">\n</media-hotkey>\n<media-hotkey keys=\"&gt;\" action=\"speedUp\">\n</media-hotkey>\n<media-hotkey keys=\"&lt;\" action=\"speedDown\">\n</media-hotkey>\n<media-hotkey keys=\"f\" action=\"toggleFullscreen\">\n</media-hotkey>\n<media-hotkey keys=\"c\" action=\"toggleSubtitles\">\n</media-hotkey>\n<media-hotkey keys=\"i\" action=\"togglePictureInPicture\">\n</media-hotkey>\n<media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\">\n</media-gesture>\n<media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"seekStep\" region=\"left\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"seekStep\" region=\"right\">\n</media-gesture>\n<media-status-announcer class=\"media-status-announcer\">\n</media-status-announcer>\n<div class=\"video-status-indicators\">\n<media-volume-indicator class=\"media-indicator media-volume-indicator\">\n<media-volume-indicator-fill class=\"media-indicator-content media-volume-indicator-fill\">\n<media-icon family=\"minimal\" name=\"volume-high\" class=\"media-volume-indicator-high-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"volume-low\" class=\"media-volume-indicator-low-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"volume-off\" class=\"media-volume-indicator-off-icon\">\n</media-icon>\n<media-volume-indicator-value class=\"media-volume-indicator-value\">\n</media-volume-indicator-value>\n</media-volume-indicator-fill>\n</media-volume-indicator>\n<media-status-indicator actions=\"toggleSubtitles,toggleFullscreen,togglePictureInPicture\" class=\"media-indicator media-status-indicator\">\n<div class=\"media-indicator-content media-status-indicator-content\">\n<media-icon family=\"minimal\" name=\"captions-on\" class=\"media-status-indicator-captions-on-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"captions-off\" class=\"media-status-indicator-captions-off-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"fullscreen-enter\" class=\"media-status-indicator-fullscreen-enter-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"fullscreen-exit\" class=\"media-status-indicator-fullscreen-exit-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"pip-enter\" class=\"media-status-indicator-pip-enter-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"pip-exit\" class=\"media-status-indicator-pip-exit-icon\">\n</media-icon>\n<media-status-indicator-value class=\"media-status-indicator-value\">\n</media-status-indicator-value>\n</div>\n</media-status-indicator>\n<media-seek-indicator class=\"media-seek-indicator\">\n<media-icon family=\"minimal\" name=\"chevron\" class=\"media-seek-indicator-icon\">\n</media-icon>\n<media-seek-indicator-value class=\"media-seek-indicator-value\">\n</media-seek-indicator-value>\n</media-seek-indicator>\n<media-status-indicator actions=\"togglePaused\" class=\"media-playback-status-indicator\">\n<media-icon family=\"minimal\" name=\"play\" class=\"media-playback-status-indicator-play-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"pause\" class=\"media-playback-status-indicator-pause-icon\">\n</media-icon>\n</media-status-indicator>\n</div>\n</media-container>`);\n"],"mappings":";;;AAGA,MAAa,WACX,eAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAiaT"}
+{"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/minimal-video/template.ts"],"sourcesContent":["import { createTemplate } from '@videojs/utils/dom';\n\n/** Static template rendered from the finalized VJSC module graph. */\nexport const template =\n  createTemplate(/* html */ `<media-container class=\"media-skin media-container video-skin\" data-theme=\"minimal\" data-preset=\"video\">\n<slot>\n</slot>\n<media-poster class=\"media-poster\">\n<slot name=\"poster\">\n<img alt=\"\" decoding=\"async\" class=\"media-poster-image\">\n</img>\n</slot>\n</media-poster>\n<media-buffering-indicator class=\"media-buffering-indicator\">\n<media-icon family=\"minimal\" name=\"spinner\" class=\"media-buffering-indicator-spinner-icon\">\n</media-icon>\n</media-buffering-indicator>\n<media-error-dialog class=\"media-dialog-root\">\n<media-dialog-backdrop class=\"media-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"media-dialog-popup\">\n<div class=\"media-dialog-content\">\n<media-dialog-title class=\"media-dialog-title\">\n</media-dialog-title>\n<media-dialog-description class=\"media-dialog-description\">\n</media-dialog-description>\n</div>\n<div class=\"media-dialog-actions\">\n<media-dialog-close class=\"media-button media-dialog-close\">\n</media-dialog-close>\n</div>\n</media-dialog-popup>\n</media-error-dialog>\n<media-controls>\n<media-controls-backdrop class=\"video-controls-backdrop\">\n</media-controls-backdrop>\n<media-controls-content class=\"video-controls video-controls-content video-controls-wrap\">\n<media-tooltip-group>\n<media-controls-group class=\"video-controls-start\">\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-q3nMcnUa-0-trigger\">\n<media-icon family=\"minimal\" name=\"restart\" class=\"media-button-icon media-play-button-restart-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"play\" class=\"media-button-icon media-play-button-play-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"pause\" class=\"media-button-icon media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-q3nMcnUa-0-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-mute-button commandfor=\"vjs-oQzbzmzn-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-q3nMcnUa-0-2-trigger\">\n<media-icon family=\"minimal\" name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"volume-low\" class=\"media-button-icon media-mute-button-low-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-q3nMcnUa-0-2-trigger\" delay=\"0\" sticky side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-volume-popover open-on-hover delay=\"200\" close-delay=\"100\" side=\"right\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover\" id=\"vjs-oQzbzmzn-0-popup\">\n<media-volume-slider class=\"media-slider media-volume-slider\" thumb-alignment=\"edge\" orientation=\"horizontal\">\n<media-slider-track class=\"media-slider-track\">\n<media-slider-fill class=\"media-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-slider-thumb media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n</media-controls-group>\n<media-controls-group class=\"video-time-slider-group\">\n<media-time-group class=\"media-time-group\">\n<media-time class=\"media-time-toggle media-time-current-value\" type=\"current\" toggle>\n</media-time>\n<media-time-separator class=\"media-time-separator\">\n</media-time-separator>\n<media-time class=\"media-time-duration-value\" type=\"duration\">\n</media-time>\n</media-time-group>\n<media-time-slider class=\"media-slider media-time-slider\">\n<media-time-slider-chapters class=\"media-time-slider-chapters\">\n<template>\n<div class=\"media-time-slider-chapter\">\n<media-slider-track class=\"media-slider-track media-time-slider-chapter-track\">\n<media-slider-buffer class=\"media-slider-buffer\">\n</media-slider-buffer>\n<media-slider-fill class=\"media-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n</div>\n</template>\n</media-time-slider-chapters>\n<media-slider-thumb class=\"media-slider-thumb media-time-slider-thumb\">\n</media-slider-thumb>\n<media-slider-preview class=\"media-slider-preview\" overflow=\"clamp\">\n<media-slider-thumbnail class=\"media-slider-preview-content media-popup-surface media-slider-thumbnail\">\n<img alt=\"\" aria-hidden=\"true\" decoding=\"async\" class=\"media-slider-thumbnail-image\">\n</img>\n<media-icon family=\"minimal\" name=\"spinner\" class=\"media-slider-thumbnail-spinner-icon\">\n</media-icon>\n</media-slider-thumbnail>\n<div class=\"media-slider-preview-content media-time-slider-preview-content\">\n<media-time-slider-chapter-title class=\"media-time-slider-chapter-title\">\n</media-time-slider-chapter-title>\n<media-slider-value class=\"media-time-slider-value\" type=\"pointer\">\n</media-slider-value>\n</div>\n</media-slider-preview>\n</media-time-slider>\n</media-controls-group>\n<media-controls-group class=\"video-controls-end\">\n<media-captions-button class=\"media-button media-captions-button video-controls-captions-button\" id=\"vjs-q3nMcnUa-0-3-trigger\">\n<media-icon family=\"minimal\" name=\"captions-off\" class=\"media-button-icon media-captions-button-off-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"captions-on\" class=\"media-button-icon media-captions-button-on-icon\">\n</media-icon>\n</media-captions-button>\n<media-tooltip trigger=\"vjs-q3nMcnUa-0-3-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<button commandfor=\"vjs-CcJz5pDC-0-popup\" class=\"media-button media-settings-menu-trigger\" id=\"vjs-q3nMcnUa-0-4-trigger\">\n<media-icon family=\"minimal\" name=\"gear\" class=\"media-button-icon media-settings-menu-trigger-icon\">\n</media-icon>\n<media-text class=\"media-settings-menu-trigger-label\" token=\"menu.settings\">Settings</media-text>\n</button>\n<media-tooltip trigger=\"vjs-q3nMcnUa-0-4-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-text token=\"menu.settings\">Settings</media-text>\n</media-tooltip>\n<media-menu side=\"top\" align=\"center\" class=\"media-popup media-popup-surface media-menu-popup media-menu-resizable-popup\" id=\"vjs-CcJz5pDC-0-popup\">\n<media-menu-content class=\"media-menu-content\">\n<media-menu-item commandfor=\"vjs-uaE9WgnI-0-content\" class=\"media-menu-trigger-item\">\n<media-icon family=\"minimal\" name=\"switches\" class=\"media-menu-trigger-item-icon\">\n</media-icon>\n<media-text token=\"menu.quality\">Quality</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon family=\"minimal\" name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-uaE9WgnI-0-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon family=\"minimal\" name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.quality\">Quality</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-quality-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span>\n<span data-part=\"label\">\n</span>\n<sup data-part=\"tier\" class=\"media-menu-tier\">\n</sup>\n</span>\n<span data-part=\"badge\" class=\"media-menu-badge\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon family=\"minimal\" name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-quality-radio-group>\n</media-menu-content>\n<media-menu-item commandfor=\"vjs-TWDyaZVz-0-content\" class=\"media-menu-trigger-item\">\n<media-icon family=\"minimal\" name=\"speech\" class=\"media-menu-trigger-item-icon\">\n</media-icon>\n<media-text token=\"menu.audio\">Audio</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon family=\"minimal\" name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-TWDyaZVz-0-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon family=\"minimal\" name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.audio\">Audio</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-audio-track-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon family=\"minimal\" name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-audio-track-radio-group>\n</media-menu-content>\n<media-menu-item commandfor=\"vjs--UyvX1df-0-content\" class=\"media-menu-trigger-item\">\n<media-icon family=\"minimal\" name=\"speed\" class=\"media-menu-trigger-item-icon\">\n</media-icon>\n<media-text token=\"menu.speed\">Speed</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon family=\"minimal\" name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs--UyvX1df-0-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon family=\"minimal\" name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.speed\">Speed</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-playback-rate-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon family=\"minimal\" name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-playback-rate-radio-group>\n</media-menu-content>\n<media-menu-item commandfor=\"vjs-bjptDrPx-0-content\" class=\"media-menu-trigger-item\">\n<media-icon family=\"minimal\" name=\"captions-off\" class=\"media-menu-trigger-item-icon\">\n</media-icon>\n<media-text token=\"menu.captions\">Captions</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon family=\"minimal\" name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-bjptDrPx-0-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon family=\"minimal\" name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.captions\">Captions</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-captions-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-item-indicator\">\n<media-icon family=\"minimal\" name=\"check\" class=\"media-menu-radio-item-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-captions-radio-group>\n</media-menu-content>\n</media-menu-content>\n</media-menu>\n<media-controls-group class=\"video-controls-trailing\">\n<media-cast-button class=\"media-button media-cast-button\" id=\"vjs-q3nMcnUa-0-5-trigger\">\n<media-icon family=\"minimal\" name=\"cast-enter\" class=\"media-button-icon media-cast-button-enter-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"cast-exit\" class=\"media-button-icon media-cast-button-exit-icon\">\n</media-icon>\n</media-cast-button>\n<media-tooltip trigger=\"vjs-q3nMcnUa-0-5-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-airplay-button class=\"media-button media-airplay-button\" id=\"vjs-q3nMcnUa-0-6-trigger\">\n<media-icon family=\"minimal\" name=\"airplay-enter\" class=\"media-button-icon media-airplay-button-enter-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"airplay-exit\" class=\"media-button-icon media-airplay-button-exit-icon\">\n</media-icon>\n</media-airplay-button>\n<media-tooltip trigger=\"vjs-q3nMcnUa-0-6-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-pip-button class=\"media-button media-pip-button\" id=\"vjs-q3nMcnUa-0-7-trigger\">\n<media-icon family=\"minimal\" name=\"pip-enter\" class=\"media-button-icon media-pip-button-enter-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"pip-exit\" class=\"media-button-icon media-pip-button-exit-icon\">\n</media-icon>\n</media-pip-button>\n<media-tooltip trigger=\"vjs-q3nMcnUa-0-7-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-fullscreen-button class=\"media-button media-fullscreen-button\" id=\"vjs-q3nMcnUa-0-8-trigger\">\n<media-icon family=\"minimal\" name=\"fullscreen-enter\" class=\"media-button-icon media-fullscreen-button-enter-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"fullscreen-exit\" class=\"media-button-icon media-fullscreen-button-exit-icon\">\n</media-icon>\n</media-fullscreen-button>\n<media-tooltip trigger=\"vjs-q3nMcnUa-0-8-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</media-controls-group>\n</media-controls-group>\n</media-tooltip-group>\n</media-controls-content>\n</media-controls>\n<media-hotkey keys=\"Space\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"k\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"m\" action=\"toggleMuted\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowRight\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowLeft\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"l\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"j\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowUp\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowDown\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"0-9\" action=\"seekToPercent\">\n</media-hotkey>\n<media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\">\n</media-hotkey>\n<media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\">\n</media-hotkey>\n<media-hotkey keys=\"&gt;\" action=\"speedUp\">\n</media-hotkey>\n<media-hotkey keys=\"&lt;\" action=\"speedDown\">\n</media-hotkey>\n<media-hotkey keys=\"f\" action=\"toggleFullscreen\">\n</media-hotkey>\n<media-hotkey keys=\"c\" action=\"toggleSubtitles\">\n</media-hotkey>\n<media-hotkey keys=\"i\" action=\"togglePictureInPicture\">\n</media-hotkey>\n<media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\">\n</media-gesture>\n<media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"seekStep\" region=\"left\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"seekStep\" region=\"right\">\n</media-gesture>\n<media-status-announcer class=\"media-status-announcer\">\n</media-status-announcer>\n<div class=\"video-status-indicators\">\n<media-volume-indicator class=\"media-indicator media-volume-indicator\">\n<media-volume-indicator-fill class=\"media-indicator-content media-volume-indicator-fill\">\n<media-icon family=\"minimal\" name=\"volume-high\" class=\"media-volume-indicator-high-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"volume-low\" class=\"media-volume-indicator-low-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"volume-off\" class=\"media-volume-indicator-off-icon\">\n</media-icon>\n<media-volume-indicator-value class=\"media-volume-indicator-value\">\n</media-volume-indicator-value>\n</media-volume-indicator-fill>\n</media-volume-indicator>\n<media-status-indicator actions=\"toggleSubtitles,toggleFullscreen,togglePictureInPicture\" class=\"media-indicator media-status-indicator\">\n<div class=\"media-indicator-content media-status-indicator-content\">\n<media-icon family=\"minimal\" name=\"captions-on\" class=\"media-status-indicator-captions-on-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"captions-off\" class=\"media-status-indicator-captions-off-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"fullscreen-enter\" class=\"media-status-indicator-fullscreen-enter-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"fullscreen-exit\" class=\"media-status-indicator-fullscreen-exit-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"pip-enter\" class=\"media-status-indicator-pip-enter-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"pip-exit\" class=\"media-status-indicator-pip-exit-icon\">\n</media-icon>\n<media-status-indicator-value class=\"media-status-indicator-value\">\n</media-status-indicator-value>\n</div>\n</media-status-indicator>\n<media-seek-indicator class=\"media-seek-indicator\">\n<media-icon family=\"minimal\" name=\"chevron\" class=\"media-seek-indicator-icon\">\n</media-icon>\n<media-seek-indicator-value class=\"media-seek-indicator-value\">\n</media-seek-indicator-value>\n</media-seek-indicator>\n<media-status-indicator actions=\"togglePaused\" class=\"media-playback-status-indicator\">\n<media-icon family=\"minimal\" name=\"play\" class=\"media-playback-status-indicator-play-icon\">\n</media-icon>\n<media-icon family=\"minimal\" name=\"pause\" class=\"media-playback-status-indicator-pause-icon\">\n</media-icon>\n</media-status-indicator>\n</div>\n</media-container>`);\n"],"mappings":";;;AAGA,MAAa,WACX,eAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAiaT"}

package/dist/dev/player/controller.d.ts

@@ -0,0 +1,60 @@
+import { PlayerContext } from "./context.js";
+import { PlayerStore } from "@videojs/core/dom";
+import { ReactiveController, ReactiveControllerHost } from "@videojs/element";
+import { InferStoreState, Selector } from "@videojs/store";
+//#region src/player/controller.d.ts
+type PlayerControllerHost = ReactiveControllerHost & HTMLElement;
+/**
+ * Reactive controller for accessing player store state.
+ *
+ * Without selector: Returns the store, does NOT subscribe to changes. With selector: Returns selected state, subscribes
+ * with shallowEqual comparison.
+ *
+ * @example
+ *   ```ts
+ *   // Store access (no subscription)
+ *   class Controls extends UIElement {
+ *     #player = new PlayerController(this, playerContext);
+ *
+ *     handleClick() {
+ *       this.#player.value.setVolume(0.5);
+ *     }
+ *   }
+ *
+ *   // Selector-based subscription
+ *   class PlayButton extends UIElement {
+ *     #playback = new PlayerController(this, playerContext, selectPlayback);
+ *   }
+ *   ```;
+ */
+declare class PlayerController<Store extends PlayerStore, Result = Store> implements ReactiveController {
+  #private;
+  /**
+   * @param host - The host element that owns this controller.
+   * @param context - Player context to resolve the store from.
+   * @label Without Selector
+   */
+  constructor(host: PlayerControllerHost, context: PlayerContext<Store>);
+  /**
+   * @param host - The host element that owns this controller.
+   * @param context - Player context to resolve the store from.
+   * @param selector - Derives a value from the player store state.
+   * @label With Selector
+   */
+  constructor(host: PlayerControllerHost, context: PlayerContext<Store>, selector: Selector<InferStoreState<Store>, Result>);
+  get value(): Result | undefined;
+  get displayName(): string | undefined;
+  hostConnected(): void;
+  hostDisconnected(): void;
+}
+declare namespace PlayerController {
+  type Host = PlayerControllerHost;
+  type Constructor<Store extends PlayerStore = PlayerStore, Result = Store> = typeof PlayerController<Store, Result>;
+  interface ConfiguredConstructor<Store extends PlayerStore> {
+    new (host: PlayerControllerHost): PlayerController<Store>;
+    new <Result>(host: PlayerControllerHost, selector: Selector<InferStoreState<Store>, Result>): PlayerController<Store, Result>;
+  }
+}
+//#endregion
+export { PlayerController, PlayerControllerHost };
+//# sourceMappingURL=controller.d.ts.map

package/dist/dev/player/controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.d.ts","names":[],"sources":["../../../src/player/controller.ts"],"mappings":";;;;;KAQY,uBAAuB,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;cAyB/C,iBAAiB,cAAc,aAAa,SAAS,kBAAkB;;;;;;;EAYlF,YAAY,MAAM,sBAAsB,SAAS,cAAc;;;;;;;EAO/D,YACE,MAAM,sBACN,SAAS,cAAc,QACvB,UAAU,SAAS,gBAAgB,QAAQ;MAmBzC,SAAS;MAWT;EAIJ;EAMA;;kBA2Be;OACH,OAAO;OAEP,YAAY,cAAc,cAAc,aAAa,SAAS,gBAAgB,iBACxF,OACA;YAGe,sBAAsB,cAAc;SAC9C,MAAM,uBAAuB,iBAAiB;SAC9C,QACH,MAAM,sBACN,UAAU,SAAS,gBAAgB,QAAQ,UAC1C,iBAAiB,OAAO"}

package/dist/dev/player/controller.js

@@ -0,0 +1,74 @@
+import { ContextConsumer } from "@videojs/element/context";
+import { StoreController } from "@videojs/store/html";
+//#region src/player/controller.ts
+/**
+* Reactive controller for accessing player store state.
+*
+* Without selector: Returns the store, does NOT subscribe to changes. With selector: Returns selected state, subscribes
+* with shallowEqual comparison.
+*
+* @example
+*   ```ts
+*   // Store access (no subscription)
+*   class Controls extends UIElement {
+*     #player = new PlayerController(this, playerContext);
+*
+*     handleClick() {
+*       this.#player.value.setVolume(0.5);
+*     }
+*   }
+*
+*   // Selector-based subscription
+*   class PlayButton extends UIElement {
+*     #playback = new PlayerController(this, playerContext, selectPlayback);
+*   }
+*   ```;
+*/
+var PlayerController = class {
+	#host;
+	#selector;
+	#consumer;
+	#store = null;
+	constructor(host, context, selector) {
+		this.#host = host;
+		this.#selector = selector;
+		this.#consumer = new ContextConsumer(host, {
+			context,
+			callback: (ctx) => this.#connect(ctx),
+			subscribe: true
+		});
+		host.addController(this);
+	}
+	get value() {
+		const store = this.#consumer.value;
+		if (!store) return void 0;
+		if (!this.#selector) return store;
+		return this.#store?.value;
+	}
+	get displayName() {
+		return this.#selector?.displayName;
+	}
+	hostConnected() {
+		const store = this.#consumer.value;
+		if (store) this.#connect(store);
+	}
+	hostDisconnected() {
+		this.#store = null;
+	}
+	#connect(store) {
+		if (!this.#store && this.#selector) this.#store = new StoreController(this.#host, store, this.#selector);
+	}
+};
+function createPlayerController(context) {
+	class ConfiguredPlayerController extends PlayerController {
+		constructor(host, selector) {
+			if (selector) super(host, context, selector);
+			else super(host, context);
+		}
+	}
+	return ConfiguredPlayerController;
+}
+//#endregion
+export { PlayerController, createPlayerController };
+
+//# sourceMappingURL=controller.js.map

package/dist/dev/player/controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.js","names":["#host","#selector","#consumer","#connect","#store"],"sources":["../../../src/player/controller.ts"],"sourcesContent":["import type { PlayerStore } from '@videojs/core/dom';\nimport type { ReactiveController, ReactiveControllerHost } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { InferStoreState, Selector } from '@videojs/store';\nimport { StoreController } from '@videojs/store/html';\n\nimport type { PlayerContext } from './context';\n\nexport type PlayerControllerHost = ReactiveControllerHost & HTMLElement;\n\n/**\n * Reactive controller for accessing player store state.\n *\n * Without selector: Returns the store, does NOT subscribe to changes. With selector: Returns selected state, subscribes\n * with shallowEqual comparison.\n *\n * @example\n *   ```ts\n *   // Store access (no subscription)\n *   class Controls extends UIElement {\n *     #player = new PlayerController(this, playerContext);\n *\n *     handleClick() {\n *       this.#player.value.setVolume(0.5);\n *     }\n *   }\n *\n *   // Selector-based subscription\n *   class PlayButton extends UIElement {\n *     #playback = new PlayerController(this, playerContext, selectPlayback);\n *   }\n *   ```;\n */\nexport class PlayerController<Store extends PlayerStore, Result = Store> implements ReactiveController {\n  readonly #host: PlayerControllerHost;\n  readonly #selector: Selector<InferStoreState<Store>, Result> | undefined;\n\n  #consumer: ContextConsumer<PlayerContext<Store>, PlayerControllerHost>;\n  #store: StoreController<Store, Result> | null = null;\n\n  /**\n   * @param host - The host element that owns this controller.\n   * @param context - Player context to resolve the store from.\n   * @label Without Selector\n   */\n  constructor(host: PlayerControllerHost, context: PlayerContext<Store>);\n  /**\n   * @param host - The host element that owns this controller.\n   * @param context - Player context to resolve the store from.\n   * @param selector - Derives a value from the player store state.\n   * @label With Selector\n   */\n  constructor(\n    host: PlayerControllerHost,\n    context: PlayerContext<Store>,\n    selector: Selector<InferStoreState<Store>, Result>\n  );\n  constructor(\n    host: PlayerControllerHost,\n    context: PlayerContext<Store>,\n    selector?: Selector<InferStoreState<Store>, Result>\n  ) {\n    this.#host = host;\n    this.#selector = selector;\n\n    this.#consumer = new ContextConsumer(host, {\n      context,\n      callback: (ctx) => this.#connect(ctx),\n      subscribe: true,\n    });\n\n    host.addController(this);\n  }\n\n  get value(): Result | undefined {\n    const store = this.#consumer.value;\n    if (!store) return undefined;\n\n    // Without selector: return store directly\n    if (!this.#selector) return store as unknown as Result;\n\n    // With selector: use StoreController\n    return this.#store?.value;\n  }\n\n  get displayName(): string | undefined {\n    return this.#selector?.displayName;\n  }\n\n  hostConnected(): void {\n    const store = this.#consumer.value;\n\n    if (store) this.#connect(store);\n  }\n\n  hostDisconnected(): void {\n    this.#store = null;\n  }\n\n  #connect(store: Store): void {\n    if (!this.#store && this.#selector) {\n      this.#store = new StoreController(this.#host, store, this.#selector);\n    }\n  }\n}\n\nexport function createPlayerController<Store extends PlayerStore>(\n  context: PlayerContext<Store>\n): PlayerController.ConfiguredConstructor<Store> {\n  class ConfiguredPlayerController<Result = Store> extends PlayerController<Store, Result> {\n    constructor(host: PlayerControllerHost, selector?: Selector<InferStoreState<Store>, Result>) {\n      if (selector) {\n        super(host, context, selector);\n      } else {\n        super(host, context);\n      }\n    }\n  }\n\n  return ConfiguredPlayerController;\n}\n\nexport namespace PlayerController {\n  export type Host = PlayerControllerHost;\n\n  export type Constructor<Store extends PlayerStore = PlayerStore, Result = Store> = typeof PlayerController<\n    Store,\n    Result\n  >;\n\n  export interface ConfiguredConstructor<Store extends PlayerStore> {\n    new (host: PlayerControllerHost): PlayerController<Store>;\n    new <Result>(\n      host: PlayerControllerHost,\n      selector: Selector<InferStoreState<Store>, Result>\n    ): PlayerController<Store, Result>;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAa,mBAAb,MAAuG;CACrG;CACA;CAEA;CACA,SAAgD;CAmBhD,YACE,MACA,SACA,UACA;EACA,KAAKA,QAAQ;EACb,KAAKC,YAAY;EAEjB,KAAKC,YAAY,IAAI,gBAAgB,MAAM;GACzC;GACA,WAAW,QAAQ,KAAKC,SAAS,GAAG;GACpC,WAAW;EACb,CAAC;EAED,KAAK,cAAc,IAAI;CACzB;CAEA,IAAI,QAA4B;EAC9B,MAAM,QAAQ,KAAKD,UAAU;EAC7B,IAAI,CAAC,OAAO,OAAO,KAAA;EAGnB,IAAI,CAAC,KAAKD,WAAW,OAAO;EAG5B,OAAO,KAAKG,QAAQ;CACtB;CAEA,IAAI,cAAkC;EACpC,OAAO,KAAKH,WAAW;CACzB;CAEA,gBAAsB;EACpB,MAAM,QAAQ,KAAKC,UAAU;EAE7B,IAAI,OAAO,KAAKC,SAAS,KAAK;CAChC;CAEA,mBAAyB;EACvB,KAAKC,SAAS;CAChB;CAEA,SAAS,OAAoB;EAC3B,IAAI,CAAC,KAAKA,UAAU,KAAKH,WACvB,KAAKG,SAAS,IAAI,gBAAgB,KAAKJ,OAAO,OAAO,KAAKC,SAAS;CAEvE;AACF;AAEA,SAAgB,uBACd,SAC+C;CAC/C,MAAM,mCAAmD,iBAAgC;EACvF,YAAY,MAA4B,UAAqD;GAC3F,IAAI,UACF,MAAM,MAAM,SAAS,QAAQ;QAE7B,MAAM,MAAM,OAAO;EAEvB;CACF;CAEA,OAAO;AACT"}

package/dist/dev/player/create-player.d.ts

@@ -1,6 +1,6 @@
 import { PlayerContext } from "./context.js";
 import { PlayerElementConstructor } from "../store/types.js";
-import { PlayerController } from "./player-controller.js";
+import { PlayerController } from "./controller.js";
 import { AnyPlayerFeature, AudioFeatures, AudioPlayerStore, PlayerStore, VideoFeatures, VideoPlayerStore } from "@videojs/core/dom";
 //#region src/player/create-player.d.ts
 interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {