npm - @videojs/html - Versions diffs - 10.0.0-rc.1 → 10.0.0-rc.3 - Mend

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

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

Files changed (2259) hide show

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

@@ -6,8 +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>
+<img alt="" decoding="async" class="media-poster-image">
 </slot>
 </media-poster>
 <media-buffering-indicator class="media-buffering-indicator">
@@ -30,13 +29,15 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </div>
 </media-dialog-popup>
 </media-error-dialog>
+<media-title class="media-title">
+</media-title>
 <media-controls>
 <media-controls-backdrop class="video-controls-backdrop">
 </media-controls-backdrop>
 <media-controls-content class="video-controls video-controls-content video-controls-wrap">
 <media-tooltip-group>
 <media-controls-group class="video-controls-start">
-<media-play-button class="media-button media-play-button" id="vjs-q3nMcnUa-0-trigger">
+<media-play-button class="media-button media-play-button" id="vjs-2-jm2KhB-0-trigger">
 <media-icon family="minimal" name="restart" class="media-button-icon media-play-button-restart-icon">
 </media-icon>
 <media-icon family="minimal" name="play" class="media-button-icon media-play-button-play-icon">
@@ -44,13 +45,13 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon family="minimal" name="pause" class="media-button-icon media-play-button-pause-icon">
 </media-icon>
 </media-play-button>
-<media-tooltip trigger="vjs-q3nMcnUa-0-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-2-jm2KhB-0-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-mute-button commandfor="vjs-oQzbzmzn-0-popup" class="media-button media-mute-button" id="vjs-q3nMcnUa-0-2-trigger">
+<media-mute-button commandfor="vjs-_CJqkLPg-0-popup" class="media-button media-mute-button" id="vjs-2-jm2KhB-0-2-trigger">
 <media-icon family="minimal" name="volume-off" class="media-button-icon media-mute-button-off-icon">
 </media-icon>
 <media-icon family="minimal" name="volume-low" class="media-button-icon media-mute-button-low-icon">
@@ -58,13 +59,13 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon family="minimal" name="volume-high" class="media-button-icon media-mute-button-high-icon">
 </media-icon>
 </media-mute-button>
-<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">
+<media-tooltip trigger="vjs-2-jm2KhB-0-2-trigger" delay="0" sticky side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<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">
+<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-_CJqkLPg-0-popup">
 <media-volume-slider class="media-slider media-volume-slider" thumb-alignment="edge" orientation="horizontal">
 <media-slider-track class="media-slider-track">
 <media-slider-fill class="media-slider-fill">
@@ -89,9 +90,9 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <template>
 <div class="media-time-slider-chapter">
 <media-slider-track class="media-slider-track media-time-slider-chapter-track">
-<media-slider-buffer class="media-slider-buffer">
+<media-slider-buffer class="media-slider-buffer media-time-slider-chapter-layer">
 </media-slider-buffer>
-<media-slider-fill class="media-slider-fill">
+<media-slider-fill class="media-slider-fill media-time-slider-chapter-layer">
 </media-slider-fill>
 </media-slider-track>
 </div>
@@ -100,12 +101,13 @@ 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">
+<slot name="thumbnail">
+<img alt="" aria-hidden="true" decoding="async" class="media-slider-thumbnail-image">
+</slot>
 <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,29 +118,29 @@ 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-2-jm2KhB-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">
 </media-icon>
 </media-captions-button>
-<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">
+<media-tooltip trigger="vjs-2-jm2KhB-0-3-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<button commandfor="vjs-CcJz5pDC-0-popup" class="media-button media-settings-menu-trigger" id="vjs-q3nMcnUa-0-4-trigger">
-<media-icon family="minimal" name="gear" class="media-button-icon media-settings-menu-trigger-icon">
+<button commandfor="vjs-KAH5OVwj-0-popup" class="media-button media-settings-menu-trigger" id="vjs-2-jm2KhB-0-4-trigger">
+<media-icon family="minimal" name="gear" class="media-button-icon-base media-settings-menu-trigger-icon">
 </media-icon>
 <media-text class="media-settings-menu-trigger-label" token="menu.settings">Settings</media-text>
 </button>
-<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">
+<media-tooltip trigger="vjs-2-jm2KhB-0-4-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-text token="menu.settings">Settings</media-text>
 </media-tooltip>
-<media-menu side="top" align="center" class="media-popup media-popup-surface media-menu-popup media-menu-resizable-popup" id="vjs-CcJz5pDC-0-popup">
+<media-menu side="top" align="center" class="media-popup media-popup-surface media-menu-popup media-menu-resizable-popup" id="vjs-KAH5OVwj-0-popup">
 <media-menu-content class="media-menu-content">
-<media-menu-item commandfor="vjs-uaE9WgnI-0-content" class="media-menu-trigger-item">
+<media-menu-item commandfor="vjs-I6c5p-Yc-0-content" class="media-menu-trigger-item">
 <media-icon family="minimal" name="switches" class="media-menu-trigger-item-icon">
 </media-icon>
 <media-text token="menu.quality">Quality</media-text>
@@ -149,7 +151,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-uaE9WgnI-0-content">
+<media-menu-content class="media-menu-content" id="vjs-I6c5p-Yc-0-content">
 <media-menu-item class="media-menu-back-item">
 <media-icon family="minimal" name="chevron" class="media-menu-back-chevron">
 </media-icon>
@@ -176,7 +178,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </template>
 </media-quality-radio-group>
 </media-menu-content>
-<media-menu-item commandfor="vjs-TWDyaZVz-0-content" class="media-menu-trigger-item">
+<media-menu-item commandfor="vjs-eQz9_VRM-0-content" class="media-menu-trigger-item">
 <media-icon family="minimal" name="speech" class="media-menu-trigger-item-icon">
 </media-icon>
 <media-text token="menu.audio">Audio</media-text>
@@ -187,7 +189,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-TWDyaZVz-0-content">
+<media-menu-content class="media-menu-content" id="vjs-eQz9_VRM-0-content">
 <media-menu-item class="media-menu-back-item">
 <media-icon family="minimal" name="chevron" class="media-menu-back-chevron">
 </media-icon>
@@ -208,7 +210,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </template>
 </media-audio-track-radio-group>
 </media-menu-content>
-<media-menu-item commandfor="vjs--UyvX1df-0-content" class="media-menu-trigger-item">
+<media-menu-item commandfor="vjs-GeTatn3M-0-content" class="media-menu-trigger-item">
 <media-icon family="minimal" name="speed" class="media-menu-trigger-item-icon">
 </media-icon>
 <media-text token="menu.speed">Speed</media-text>
@@ -219,7 +221,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs--UyvX1df-0-content">
+<media-menu-content class="media-menu-content" id="vjs-GeTatn3M-0-content">
 <media-menu-item class="media-menu-back-item">
 <media-icon family="minimal" name="chevron" class="media-menu-back-chevron">
 </media-icon>
@@ -240,7 +242,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </template>
 </media-playback-rate-radio-group>
 </media-menu-content>
-<media-menu-item commandfor="vjs-bjptDrPx-0-content" class="media-menu-trigger-item">
+<media-menu-item commandfor="vjs-RUFDTJPh-0-content" class="media-menu-trigger-item">
 <media-icon family="minimal" name="captions-off" class="media-menu-trigger-item-icon">
 </media-icon>
 <media-text token="menu.captions">Captions</media-text>
@@ -251,7 +253,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-bjptDrPx-0-content">
+<media-menu-content class="media-menu-content" id="vjs-RUFDTJPh-0-content">
 <media-menu-item class="media-menu-back-item">
 <media-icon family="minimal" name="chevron" class="media-menu-back-chevron">
 </media-icon>
@@ -275,49 +277,49 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-menu-content>
 </media-menu>
 <media-controls-group class="video-controls-trailing">
-<media-cast-button class="media-button media-cast-button" id="vjs-q3nMcnUa-0-5-trigger">
+<media-cast-button class="media-button media-cast-button" id="vjs-2-jm2KhB-0-5-trigger">
 <media-icon family="minimal" name="cast-enter" class="media-button-icon media-cast-button-enter-icon">
 </media-icon>
 <media-icon family="minimal" name="cast-exit" class="media-button-icon media-cast-button-exit-icon">
 </media-icon>
 </media-cast-button>
-<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">
+<media-tooltip trigger="vjs-2-jm2KhB-0-5-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-airplay-button class="media-button media-airplay-button" id="vjs-q3nMcnUa-0-6-trigger">
+<media-airplay-button class="media-button media-airplay-button" id="vjs-2-jm2KhB-0-6-trigger">
 <media-icon family="minimal" name="airplay-enter" class="media-button-icon media-airplay-button-enter-icon">
 </media-icon>
 <media-icon family="minimal" name="airplay-exit" class="media-button-icon media-airplay-button-exit-icon">
 </media-icon>
 </media-airplay-button>
-<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">
+<media-tooltip trigger="vjs-2-jm2KhB-0-6-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-pip-button class="media-button media-pip-button" id="vjs-q3nMcnUa-0-7-trigger">
+<media-pip-button class="media-button media-pip-button" id="vjs-2-jm2KhB-0-7-trigger">
 <media-icon family="minimal" name="pip-enter" class="media-button-icon media-pip-button-enter-icon">
 </media-icon>
 <media-icon family="minimal" name="pip-exit" class="media-button-icon media-pip-button-exit-icon">
 </media-icon>
 </media-pip-button>
-<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">
+<media-tooltip trigger="vjs-2-jm2KhB-0-7-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-fullscreen-button class="media-button media-fullscreen-button" id="vjs-q3nMcnUa-0-8-trigger">
+<media-fullscreen-button class="media-button media-fullscreen-button" id="vjs-2-jm2KhB-0-8-trigger">
 <media-icon family="minimal" name="fullscreen-enter" class="media-button-icon media-fullscreen-button-enter-icon">
 </media-icon>
 <media-icon family="minimal" name="fullscreen-exit" class="media-button-icon media-fullscreen-button-exit-icon">
 </media-icon>
 </media-fullscreen-button>
-<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">
+<media-tooltip trigger="vjs-2-jm2KhB-0-8-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">

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

	@@ -1 +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=\">\" action=\"speedUp\">\n</media-hotkey>\n<media-hotkey keys=\"<\" action=\"speedDown\">\n</media-hotkey>\n<media-hotkey keys=\"f\" action=\"toggleFullscreen\">\n</media-hotkey>\n<media-hotkey keys=\"c\" action=\"toggleSubtitles\">\n</media-hotkey>\n<media-hotkey keys=\"i\" action=\"togglePictureInPicture\">\n</media-hotkey>\n<media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\">\n</media-gesture>\n<media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"seekStep\" region=\"left\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"seekStep\" region=\"right\">\n</media-gesture>\n<media-status-announcer class=\"media-status-announcer\">\n</media-status-announcer>\n<div class=\"video-status-indicators\">\n<media-volume-indicator class=\"media-indicator media-volume-indicator\">\n<media-volume-indicator-fill class=\"media-indicator-content media-volume-indicator-fill\">\n<media-icon 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"}
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\" class=\"media-poster-image\">\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-title class=\"media-title\">\n</media-title>\n<media-controls>\n<media-controls-backdrop class=\"video-controls-backdrop\">\n</media-controls-backdrop>\n<media-controls-content class=\"video-controls video-controls-content 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-2-jm2KhB-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-2-jm2KhB-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-_CJqkLPg-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-2-jm2KhB-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-2-jm2KhB-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-_CJqkLPg-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 media-time-slider-chapter-layer\">\n</media-slider-buffer>\n<media-slider-fill class=\"media-slider-fill media-time-slider-chapter-layer\">\n</media-slider-fill>\n</media-slider-track>\n</div>\n</template>\n</media-time-slider-chapters>\n<media-slider-thumb class=\"media-slider-thumb media-time-slider-thumb\">\n</media-slider-thumb>\n<media-slider-preview class=\"media-slider-preview\" overflow=\"clamp\">\n<media-slider-thumbnail class=\"media-slider-preview-content media-popup-surface media-slider-thumbnail\">\n<slot name=\"thumbnail\">\n<img alt=\"\" aria-hidden=\"true\" decoding=\"async\" class=\"media-slider-thumbnail-image\">\n</slot>\n<media-icon 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-2-jm2KhB-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-2-jm2KhB-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-KAH5OVwj-0-popup\" class=\"media-button media-settings-menu-trigger\" id=\"vjs-2-jm2KhB-0-4-trigger\">\n<media-icon family=\"minimal\" name=\"gear\" class=\"media-button-icon-base media-settings-menu-trigger-icon\">\n</media-icon>\n<media-text class=\"media-settings-menu-trigger-label\" token=\"menu.settings\">Settings</media-text>\n</button>\n<media-tooltip trigger=\"vjs-2-jm2KhB-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-KAH5OVwj-0-popup\">\n<media-menu-content class=\"media-menu-content\">\n<media-menu-item commandfor=\"vjs-I6c5p-Yc-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-I6c5p-Yc-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-eQz9_VRM-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-eQz9_VRM-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-GeTatn3M-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-GeTatn3M-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-RUFDTJPh-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-RUFDTJPh-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-2-jm2KhB-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-2-jm2KhB-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-2-jm2KhB-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-2-jm2KhB-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-2-jm2KhB-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-2-jm2KhB-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-2-jm2KhB-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-2-jm2KhB-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=\">\" action=\"speedUp\">\n</media-hotkey>\n<media-hotkey keys=\"<\" action=\"speedDown\">\n</media-hotkey>\n<media-hotkey keys=\"f\" action=\"toggleFullscreen\">\n</media-hotkey>\n<media-hotkey keys=\"c\" action=\"toggleSubtitles\">\n</media-hotkey>\n<media-hotkey keys=\"i\" action=\"togglePictureInPicture\">\n</media-hotkey>\n<media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\">\n</media-gesture>\n<media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"seekStep\" region=\"left\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"seekStep\" region=\"right\">\n</media-gesture>\n<media-status-announcer class=\"media-status-announcer\">\n</media-status-announcer>\n<div class=\"video-status-indicators\">\n<media-volume-indicator class=\"media-indicator media-volume-indicator\">\n<media-volume-indicator-fill class=\"media-indicator-content media-volume-indicator-fill\">\n<media-icon 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAmaT"}

package/dist/dev/internal/skins/properties.css ADDED Viewed

@@ -0,0 +1,11 @@
+@property --media-slider-fill {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 0%;
+}
+@property --media-slider-buffer {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 0%;
+}

package/dist/dev/player/context.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ import { Context, ContextConsumer } from "@videojs/element/context";
 //#region src/player/context.d.ts
 declare const PLAYER_CONTEXT_KEY: unique symbol;
 type PlayerContextValue<Store extends PlayerStore = AnyPlayerStore> = Store;
+/** @displayType Context<symbol, {Store}> */
 type PlayerContext<Store extends PlayerStore = AnyPlayerStore> = Context<typeof PLAYER_CONTEXT_KEY, PlayerContextValue<Store>>;
 /**
  * The default player context instance for consuming the player store in controllers.

package/dist/dev/player/context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.ts"],"sourcesContent":["import type { AnyPlayerStore, MediaContainer, PlayerStore } from '@videojs/core/dom';\nimport type { ReactiveControllerHost } from '@videojs/element';\nimport { type Context, type ContextConsumer, createContext } from '@videojs/element/context';\nimport type { Media } from '@videojs/media/dom';\n\n// ----------------------------------------\n// Player Context\n// ----------------------------------------\n\nexport const PLAYER_CONTEXT_KEY = Symbol.for('@videojs/player');\n\nexport type PlayerContextValue<Store extends PlayerStore = AnyPlayerStore> = Store;\n\nexport type PlayerContext<Store extends PlayerStore = AnyPlayerStore> = Context<\n typeof PLAYER_CONTEXT_KEY,\n PlayerContextValue<Store>\n>;\n\n/*\n The default player context instance for consuming the player store in controllers.\n \n @public\n */\nexport const playerContext = createContext<PlayerContextValue, typeof PLAYER_CONTEXT_KEY>(PLAYER_CONTEXT_KEY);\n\n// ----------------------------------------\n// Media Context\n// ----------------------------------------\n\nexport const MEDIA_CONTEXT_KEY = Symbol.for('@videojs/media');\n\nexport interface MediaContextValue {\n media: Media \| null;\n registerMedia: (media: Media) => () => void;\n}\n\nexport type MediaContext = Context<typeof MEDIA_CONTEXT_KEY, MediaContextValue>;\n\nexport const mediaContext = createContext<MediaContextValue, typeof MEDIA_CONTEXT_KEY>(MEDIA_CONTEXT_KEY);\n\n// ----------------------------------------\n// Container Context\n// ----------------------------------------\n\nexport const CONTAINER_CONTEXT_KEY = Symbol.for('@videojs/container');\n\nexport interface ContainerContextValue {\n container: MediaContainer \| null;\n registerContainer: (container: MediaContainer) => () => void;\n}\n\nexport type ContainerContext = Context<typeof CONTAINER_CONTEXT_KEY, ContainerContextValue>;\n\nexport type ContainerContextConsumer = ContextConsumer<ContainerContext, ReactiveControllerHost & HTMLElement>;\n\nexport const containerContext = createContext<ContainerContextValue, typeof CONTAINER_CONTEXT_KEY>(\n CONTAINER_CONTEXT_KEY\n);\n"],"mappings":";;AASA,MAAa,qBAAqB,OAAO,IAAI,iBAAiB;;;;;;~~AAc9D~~,MAAa,gBAAgB,cAA6D,kBAAkB;AAM5G,MAAa,oBAAoB,OAAO,IAAI,gBAAgB;AAS5D,MAAa,eAAe,cAA2D,iBAAiB;AAMxG,MAAa,wBAAwB,OAAO,IAAI,oBAAoB;AAWpE,MAAa,mBAAmB,cAC9B,qBACF"}
1	+ {"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.ts"],"sourcesContent":["import type { AnyPlayerStore, MediaContainer, PlayerStore } from '@videojs/core/dom';\nimport type { ReactiveControllerHost } from '@videojs/element';\nimport { type Context, type ContextConsumer, createContext } from '@videojs/element/context';\nimport type { Media } from '@videojs/media/dom';\n\n// ----------------------------------------\n// Player Context\n// ----------------------------------------\n\nexport const PLAYER_CONTEXT_KEY = Symbol.for('@videojs/player');\n\nexport type PlayerContextValue<Store extends PlayerStore = AnyPlayerStore> = Store;\n\n/** @displayType Context<symbol, {Store}> /\nexport type PlayerContext<Store extends PlayerStore = AnyPlayerStore> = Context<\n typeof PLAYER_CONTEXT_KEY,\n PlayerContextValue<Store>\n>;\n\n/\n The default player context instance for consuming the player store in controllers.\n \n @public\n */\nexport const playerContext = createContext<PlayerContextValue, typeof PLAYER_CONTEXT_KEY>(PLAYER_CONTEXT_KEY);\n\n// ----------------------------------------\n// Media Context\n// ----------------------------------------\n\nexport const MEDIA_CONTEXT_KEY = Symbol.for('@videojs/media');\n\nexport interface MediaContextValue {\n media: Media \| null;\n registerMedia: (media: Media) => () => void;\n}\n\nexport type MediaContext = Context<typeof MEDIA_CONTEXT_KEY, MediaContextValue>;\n\nexport const mediaContext = createContext<MediaContextValue, typeof MEDIA_CONTEXT_KEY>(MEDIA_CONTEXT_KEY);\n\n// ----------------------------------------\n// Container Context\n// ----------------------------------------\n\nexport const CONTAINER_CONTEXT_KEY = Symbol.for('@videojs/container');\n\nexport interface ContainerContextValue {\n container: MediaContainer \| null;\n registerContainer: (container: MediaContainer) => () => void;\n}\n\nexport type ContainerContext = Context<typeof CONTAINER_CONTEXT_KEY, ContainerContextValue>;\n\nexport type ContainerContextConsumer = ContextConsumer<ContainerContext, ReactiveControllerHost & HTMLElement>;\n\nexport const containerContext = createContext<ContainerContextValue, typeof CONTAINER_CONTEXT_KEY>(\n CONTAINER_CONTEXT_KEY\n);\n"],"mappings":";;AASA,MAAa,qBAAqB,OAAO,IAAI,iBAAiB;;;;;;AAe9D,MAAa,gBAAgB,cAA6D,kBAAkB;AAM5G,MAAa,oBAAoB,OAAO,IAAI,gBAAgB;AAS5D,MAAa,eAAe,cAA2D,iBAAiB;AAMxG,MAAa,wBAAwB,OAAO,IAAI,oBAAoB;AAWpE,MAAa,mBAAmB,cAC9B,qBACF"}

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

@@ -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.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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[]> {

package/dist/dev/player/create-player.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { containerContext, mediaContext, playerContext } from "./context.js";
-import { createPlayerController } from "./player-controller.js";
-import { createPlayerElement } from "./player-element.js";
+import { createPlayerController } from "./controller.js";
+import { createPlayerElement } from "./element.js";
 import { combinePlayerFeatureConfigs } from "@videojs/core/dom";
 import { combine, createStore } from "@videojs/store";
 //#region src/player/create-player.ts

package/dist/dev/player/create-player.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.ts"],"sourcesContent":["import {\n type AnyPlayerFeature,\n type AudioFeatures,\n type AudioPlayerStore,\n combinePlayerFeatureConfigs,\n type PlayerStore,\n type PlayerTarget,\n type VideoFeatures,\n type VideoPlayerStore,\n} from '@videojs/core/dom';\nimport { combine, createStore } from '@videojs/store';\n\nimport type { PlayerElementConstructor } from '../store/types';\nimport { containerContext, mediaContext, type PlayerContext, playerContext } from './context';\nimport { createPlayerController, type PlayerController } from './~~player-~~controller';\nimport { createPlayerElement } from './~~player-~~element';\n\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n features: Features;\n}\n\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n /** Configured player element class that owns the store and attachment lifecycle. /\n PlayerElement: PlayerElementConstructor<Store>;\n\n /* Player controller bound to this player's context. /\n PlayerController: PlayerController.ConfiguredConstructor<Store>;\n\n /* Context that carries the player store to descendant elements. /\n playerContext: PlayerContext<Store>;\n}\n\n/\n Creates a typed HTML player class and bound controller.\n \n @example\n * ```ts\n * import { createPlayer, UIElement, selectPlayback } from '@videojs/html';\n * import { videoFeatures } from '@videojs/html/video';\n \n const { PlayerElement: VideoPlayerElement, PlayerController } = createPlayer({\n * features: videoFeatures,\n * });\n \n customElements.define('video-player', VideoPlayerElement);\n \n // Control element with selector\n * class PlayButton extends UIElement {\n * #playback = new PlayerController(this, selectPlayback);\n * }\n * ```;\n \n @param config - Player configuration with features.\n * @label Video\n /\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/\n Creates a typed HTML audio player class and bound controller.\n \n @param config - Player configuration with features.\n * @label Audio\n /\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/\n Creates a typed HTML player class with custom features.\n \n @param config - Player configuration with features.\n * @label Generic\n */\nexport function createPlayer<const Features extends AnyPlayerFeature[]>(\n config: CreatePlayerConfig<Features>\n): CreatePlayerResult<PlayerStore<Features>>;\n\nexport function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<PlayerStore> {\n const slice = combine(...config.features);\n const featureConfig = combinePlayerFeatureConfigs(config.features);\n\n const ConfiguredPlayerElement = createPlayerElement<PlayerStore>({\n playerContext,\n mediaContext,\n containerContext,\n factory: () => createStore<PlayerTarget>()(slice),\n config: featureConfig,\n });\n\n return {\n PlayerElement: ConfiguredPlayerElement,\n PlayerController: createPlayerController(playerContext),\n playerContext,\n };\n}\n"],"mappings":";;;;;;AA2EA,SAAgB,aAAa,QAAiF;CAC5G,MAAM,QAAQ,QAAQ,GAAG,OAAO,QAAQ;CACxC,MAAM,gBAAgB,4BAA4B,OAAO,QAAQ;CAUjE,OAAO;EACL,eAT8B,oBAAiC;GAC/D;GACA;GACA;GACA,eAAe,YAA0B,CAAC,CAAC,KAAK;GAChD,QAAQ;EACV,CAGuC;EACrC,kBAAkB,uBAAuB,aAAa;EACtD;CACF;AACF"}
1	+ {"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.ts"],"sourcesContent":["import {\n type AnyPlayerFeature,\n type AudioFeatures,\n type AudioPlayerStore,\n combinePlayerFeatureConfigs,\n type PlayerStore,\n type PlayerTarget,\n type VideoFeatures,\n type VideoPlayerStore,\n} from '@videojs/core/dom';\nimport { combine, createStore } from '@videojs/store';\n\nimport type { PlayerElementConstructor } from '../store/types';\nimport { containerContext, mediaContext, type PlayerContext, playerContext } from './context';\nimport { createPlayerController, type PlayerController } from './controller';\nimport { createPlayerElement } from './element';\n\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n features: Features;\n}\n\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n /** Configured player element class that owns the store and attachment lifecycle. /\n PlayerElement: PlayerElementConstructor<Store>;\n\n /* Player controller bound to this player's context. /\n PlayerController: PlayerController.ConfiguredConstructor<Store>;\n\n /* Context that carries the player store to descendant elements. /\n playerContext: PlayerContext<Store>;\n}\n\n/\n Creates a typed HTML player class and bound controller.\n \n @example\n * ```ts\n * import { createPlayer, UIElement, selectPlayback } from '@videojs/html';\n * import { videoFeatures } from '@videojs/html/video';\n \n const { PlayerElement: VideoPlayerElement, PlayerController } = createPlayer({\n * features: videoFeatures,\n * });\n \n customElements.define('video-player', VideoPlayerElement);\n \n // Control element with selector\n * class PlayButton extends UIElement {\n * #playback = new PlayerController(this, selectPlayback);\n * }\n * ```;\n \n @param config - Player configuration with features.\n * @label Video\n /\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/\n Creates a typed HTML audio player class and bound controller.\n \n @param config - Player configuration with features.\n * @label Audio\n /\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/\n Creates a typed HTML player class with custom features.\n \n @param config - Player configuration with features.\n * @label Generic\n */\nexport function createPlayer<const Features extends AnyPlayerFeature[]>(\n config: CreatePlayerConfig<Features>\n): CreatePlayerResult<PlayerStore<Features>>;\n\nexport function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<PlayerStore> {\n const slice = combine(...config.features);\n const featureConfig = combinePlayerFeatureConfigs(config.features);\n\n const ConfiguredPlayerElement = createPlayerElement<PlayerStore>({\n playerContext,\n mediaContext,\n containerContext,\n factory: () => createStore<PlayerTarget>()(slice),\n config: featureConfig,\n });\n\n return {\n PlayerElement: ConfiguredPlayerElement,\n PlayerController: createPlayerController(playerContext),\n playerContext,\n };\n}\n"],"mappings":";;;;;;AA2EA,SAAgB,aAAa,QAAiF;CAC5G,MAAM,QAAQ,QAAQ,GAAG,OAAO,QAAQ;CACxC,MAAM,gBAAgB,4BAA4B,OAAO,QAAQ;CAUjE,OAAO;EACL,eAT8B,oBAAiC;GAC/D;GACA;GACA;GACA,eAAe,YAA0B,CAAC,CAAC,KAAK;GAChD,QAAQ;EACV,CAGuC;EACrC,kBAAkB,uBAAuB,aAAa;EACtD;CACF;AACF"}