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

package/dist/default/internal/skins/{minimal-video → neutral-video}/template.js

@@ -1,7 +1,7 @@
 import { createTemplate } from "@videojs/utils/dom";
-//#region src/internal/skins/minimal-video/template.ts
+//#region src/internal/skins/neutral-video/template.ts
 /** Static template rendered from the finalized VJSC module graph. */
-const template = createTemplate(`<media-container class="media-skin media-container video-skin" data-theme="minimal" data-preset="video">
+const template = createTemplate(`<media-container class="media-skin media-container video-skin" data-theme="neutral" data-preset="video">
 <slot>
 </slot>
 <media-poster class="media-poster">
@@ -10,7 +10,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </slot>
 </media-poster>
 <media-buffering-indicator class="media-buffering-indicator">
-<media-icon family="minimal" name="spinner" class="media-buffering-indicator-spinner-icon">
+<media-icon family="neutral" name="spinner" class="media-buffering-indicator-spinner-icon">
 </media-icon>
 </media-buffering-indicator>
 <media-error-dialog class="media-dialog-root">
@@ -37,35 +37,35 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <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-2-jm2KhB-0-trigger">
-<media-icon family="minimal" name="restart" class="media-button-icon media-play-button-restart-icon">
+<media-play-button class="media-button media-play-button" id="vjs-TIskxJHd-0-trigger">
+<media-icon family="neutral" 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">
+<media-icon family="neutral" name="play" class="media-button-icon media-play-button-play-icon">
 </media-icon>
-<media-icon family="minimal" name="pause" class="media-button-icon media-play-button-pause-icon">
+<media-icon family="neutral" name="pause" class="media-button-icon media-play-button-pause-icon">
 </media-icon>
 </media-play-button>
-<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 trigger="vjs-TIskxJHd-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-_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-mute-button commandfor="vjs-wZFXwba8-0-popup" class="media-button media-mute-button" id="vjs-TIskxJHd-0-2-trigger">
+<media-icon family="neutral" 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">
+<media-icon family="neutral" name="volume-low" class="media-button-icon media-mute-button-low-icon">
 </media-icon>
-<media-icon family="minimal" name="volume-high" class="media-button-icon media-mute-button-high-icon">
+<media-icon family="neutral" name="volume-high" class="media-button-icon media-mute-button-high-icon">
 </media-icon>
 </media-mute-button>
-<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 trigger="vjs-TIskxJHd-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-_CJqkLPg-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-wZFXwba8-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">
@@ -105,7 +105,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <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 family="neutral" name="spinner" class="media-slider-thumbnail-spinner-icon">
 </media-icon>
 </media-slider-thumbnail>
 <div class="media-slider-preview-content media-time-slider-preview-content">
@@ -118,42 +118,42 @@ 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 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-captions-button class="media-button media-captions-button video-controls-captions-button" id="vjs-TIskxJHd-0-3-trigger">
+<media-icon family="neutral" 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 family="neutral" name="captions-on" class="media-button-icon media-captions-button-on-icon">
 </media-icon>
 </media-captions-button>
-<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 trigger="vjs-TIskxJHd-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-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">
+<button commandfor="vjs-WpQqFM2J-0-popup" class="media-button media-settings-menu-trigger" id="vjs-TIskxJHd-0-4-trigger">
+<media-icon family="neutral" 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-2-jm2KhB-0-4-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-TIskxJHd-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-KAH5OVwj-0-popup">
+<media-menu side="top" align="center" class="media-popup media-popup-surface media-menu-popup media-menu-resizable-popup" id="vjs-WpQqFM2J-0-popup">
 <media-menu-content class="media-menu-content">
-<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-menu-item commandfor="vjs-1Oi3whcx-0-content" class="media-menu-trigger-item">
+<media-icon family="neutral" name="switches" class="media-menu-trigger-item-icon">
 </media-icon>
 <media-text token="menu.quality">Quality</media-text>
 <span class="media-menu-hint">
 <span data-part="value" class="media-menu-hint-label">
 </span>
-<media-icon family="minimal" name="chevron" class="media-menu-forward-chevron">
+<media-icon family="neutral" name="chevron" class="media-menu-forward-chevron">
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-I6c5p-Yc-0-content">
+<media-menu-content class="media-menu-content" id="vjs-1Oi3whcx-0-content">
 <media-menu-item class="media-menu-back-item">
-<media-icon family="minimal" name="chevron" class="media-menu-back-chevron">
+<media-icon family="neutral" name="chevron" class="media-menu-back-chevron">
 </media-icon>
 <media-text token="menu.quality">Quality</media-text>
 </media-menu-item>
@@ -171,27 +171,27 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <span data-part="badge" class="media-menu-badge">
 </span>
 <media-menu-item-indicator force-mount class="media-menu-item-indicator">
-<media-icon family="minimal" name="check" class="media-menu-radio-item-icon">
+<media-icon family="neutral" name="check" class="media-menu-radio-item-icon">
 </media-icon>
 </media-menu-item-indicator>
 </media-menu-radio-item>
 </template>
 </media-quality-radio-group>
 </media-menu-content>
-<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-menu-item commandfor="vjs-6DDbyaB8-0-content" class="media-menu-trigger-item">
+<media-icon family="neutral" name="speech" class="media-menu-trigger-item-icon">
 </media-icon>
 <media-text token="menu.audio">Audio</media-text>
 <span class="media-menu-hint">
 <span data-part="value" class="media-menu-hint-label">
 </span>
-<media-icon family="minimal" name="chevron" class="media-menu-forward-chevron">
+<media-icon family="neutral" name="chevron" class="media-menu-forward-chevron">
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-eQz9_VRM-0-content">
+<media-menu-content class="media-menu-content" id="vjs-6DDbyaB8-0-content">
 <media-menu-item class="media-menu-back-item">
-<media-icon family="minimal" name="chevron" class="media-menu-back-chevron">
+<media-icon family="neutral" name="chevron" class="media-menu-back-chevron">
 </media-icon>
 <media-text token="menu.audio">Audio</media-text>
 </media-menu-item>
@@ -203,27 +203,27 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <span data-part="label">
 </span>
 <media-menu-item-indicator force-mount class="media-menu-item-indicator">
-<media-icon family="minimal" name="check" class="media-menu-radio-item-icon">
+<media-icon family="neutral" name="check" class="media-menu-radio-item-icon">
 </media-icon>
 </media-menu-item-indicator>
 </media-menu-radio-item>
 </template>
 </media-audio-track-radio-group>
 </media-menu-content>
-<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-menu-item commandfor="vjs-A3zWz_yK-0-content" class="media-menu-trigger-item">
+<media-icon family="neutral" name="speed" class="media-menu-trigger-item-icon">
 </media-icon>
 <media-text token="menu.speed">Speed</media-text>
 <span class="media-menu-hint">
 <span data-part="value" class="media-menu-hint-label">
 </span>
-<media-icon family="minimal" name="chevron" class="media-menu-forward-chevron">
+<media-icon family="neutral" name="chevron" class="media-menu-forward-chevron">
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-GeTatn3M-0-content">
+<media-menu-content class="media-menu-content" id="vjs-A3zWz_yK-0-content">
 <media-menu-item class="media-menu-back-item">
-<media-icon family="minimal" name="chevron" class="media-menu-back-chevron">
+<media-icon family="neutral" name="chevron" class="media-menu-back-chevron">
 </media-icon>
 <media-text token="menu.speed">Speed</media-text>
 </media-menu-item>
@@ -235,27 +235,27 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <span data-part="label">
 </span>
 <media-menu-item-indicator force-mount class="media-menu-item-indicator">
-<media-icon family="minimal" name="check" class="media-menu-radio-item-icon">
+<media-icon family="neutral" name="check" class="media-menu-radio-item-icon">
 </media-icon>
 </media-menu-item-indicator>
 </media-menu-radio-item>
 </template>
 </media-playback-rate-radio-group>
 </media-menu-content>
-<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-menu-item commandfor="vjs-d4E9Ev1b-0-content" class="media-menu-trigger-item">
+<media-icon family="neutral" name="captions-off" class="media-menu-trigger-item-icon">
 </media-icon>
 <media-text token="menu.captions">Captions</media-text>
 <span class="media-menu-hint">
 <span data-part="value" class="media-menu-hint-label">
 </span>
-<media-icon family="minimal" name="chevron" class="media-menu-forward-chevron">
+<media-icon family="neutral" name="chevron" class="media-menu-forward-chevron">
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-RUFDTJPh-0-content">
+<media-menu-content class="media-menu-content" id="vjs-d4E9Ev1b-0-content">
 <media-menu-item class="media-menu-back-item">
-<media-icon family="minimal" name="chevron" class="media-menu-back-chevron">
+<media-icon family="neutral" name="chevron" class="media-menu-back-chevron">
 </media-icon>
 <media-text token="menu.captions">Captions</media-text>
 </media-menu-item>
@@ -267,7 +267,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <span data-part="label">
 </span>
 <media-menu-item-indicator force-mount class="media-menu-item-indicator">
-<media-icon family="minimal" name="check" class="media-menu-radio-item-icon">
+<media-icon family="neutral" name="check" class="media-menu-radio-item-icon">
 </media-icon>
 </media-menu-item-indicator>
 </media-menu-radio-item>
@@ -277,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-2-jm2KhB-0-5-trigger">
-<media-icon family="minimal" name="cast-enter" class="media-button-icon media-cast-button-enter-icon">
+<media-cast-button class="media-button media-cast-button" id="vjs-TIskxJHd-0-5-trigger">
+<media-icon family="neutral" 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 family="neutral" name="cast-exit" class="media-button-icon media-cast-button-exit-icon">
 </media-icon>
 </media-cast-button>
-<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 trigger="vjs-TIskxJHd-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-2-jm2KhB-0-6-trigger">
-<media-icon family="minimal" name="airplay-enter" class="media-button-icon media-airplay-button-enter-icon">
+<media-airplay-button class="media-button media-airplay-button" id="vjs-TIskxJHd-0-6-trigger">
+<media-icon family="neutral" 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 family="neutral" name="airplay-exit" class="media-button-icon media-airplay-button-exit-icon">
 </media-icon>
 </media-airplay-button>
-<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 trigger="vjs-TIskxJHd-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-2-jm2KhB-0-7-trigger">
-<media-icon family="minimal" name="pip-enter" class="media-button-icon media-pip-button-enter-icon">
+<media-pip-button class="media-button media-pip-button" id="vjs-TIskxJHd-0-7-trigger">
+<media-icon family="neutral" 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 family="neutral" name="pip-exit" class="media-button-icon media-pip-button-exit-icon">
 </media-icon>
 </media-pip-button>
-<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 trigger="vjs-TIskxJHd-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-2-jm2KhB-0-8-trigger">
-<media-icon family="minimal" name="fullscreen-enter" class="media-button-icon media-fullscreen-button-enter-icon">
+<media-fullscreen-button class="media-button media-fullscreen-button" id="vjs-TIskxJHd-0-8-trigger">
+<media-icon family="neutral" 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 family="neutral" name="fullscreen-exit" class="media-button-icon media-fullscreen-button-exit-icon">
 </media-icon>
 </media-fullscreen-button>
-<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 trigger="vjs-TIskxJHd-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">
@@ -379,11 +379,11 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <div class="video-status-indicators">
 <media-volume-indicator class="media-indicator media-volume-indicator">
 <media-volume-indicator-fill class="media-indicator-content media-volume-indicator-fill">
-<media-icon family="minimal" name="volume-high" class="media-volume-indicator-high-icon">
+<media-icon family="neutral" name="volume-high" class="media-volume-indicator-high-icon">
 </media-icon>
-<media-icon family="minimal" name="volume-low" class="media-volume-indicator-low-icon">
+<media-icon family="neutral" name="volume-low" class="media-volume-indicator-low-icon">
 </media-icon>
-<media-icon family="minimal" name="volume-off" class="media-volume-indicator-off-icon">
+<media-icon family="neutral" name="volume-off" class="media-volume-indicator-off-icon">
 </media-icon>
 <media-volume-indicator-value class="media-volume-indicator-value">
 </media-volume-indicator-value>
@@ -391,32 +391,32 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-volume-indicator>
 <media-status-indicator actions="toggleSubtitles,toggleFullscreen,togglePictureInPicture" class="media-indicator media-status-indicator">
 <div class="media-indicator-content media-status-indicator-content">
-<media-icon family="minimal" name="captions-on" class="media-status-indicator-captions-on-icon">
+<media-icon family="neutral" name="captions-on" class="media-status-indicator-captions-on-icon">
 </media-icon>
-<media-icon family="minimal" name="captions-off" class="media-status-indicator-captions-off-icon">
+<media-icon family="neutral" name="captions-off" class="media-status-indicator-captions-off-icon">
 </media-icon>
-<media-icon family="minimal" name="fullscreen-enter" class="media-status-indicator-fullscreen-enter-icon">
+<media-icon family="neutral" name="fullscreen-enter" class="media-status-indicator-fullscreen-enter-icon">
 </media-icon>
-<media-icon family="minimal" name="fullscreen-exit" class="media-status-indicator-fullscreen-exit-icon">
+<media-icon family="neutral" name="fullscreen-exit" class="media-status-indicator-fullscreen-exit-icon">
 </media-icon>
-<media-icon family="minimal" name="pip-enter" class="media-status-indicator-pip-enter-icon">
+<media-icon family="neutral" name="pip-enter" class="media-status-indicator-pip-enter-icon">
 </media-icon>
-<media-icon family="minimal" name="pip-exit" class="media-status-indicator-pip-exit-icon">
+<media-icon family="neutral" name="pip-exit" class="media-status-indicator-pip-exit-icon">
 </media-icon>
 <media-status-indicator-value class="media-status-indicator-value">
 </media-status-indicator-value>
 </div>
 </media-status-indicator>
 <media-seek-indicator class="media-seek-indicator">
-<media-icon family="minimal" name="chevron" class="media-seek-indicator-icon">
+<media-icon family="neutral" name="chevron" class="media-seek-indicator-icon">
 </media-icon>
 <media-seek-indicator-value class="media-seek-indicator-value">
 </media-seek-indicator-value>
 </media-seek-indicator>
 <media-status-indicator actions="togglePaused" class="media-playback-status-indicator">
-<media-icon family="minimal" name="play" class="media-playback-status-indicator-play-icon">
+<media-icon family="neutral" name="play" class="media-playback-status-indicator-play-icon">
 </media-icon>
-<media-icon family="minimal" name="pause" class="media-playback-status-indicator-pause-icon">
+<media-icon family="neutral" name="pause" class="media-playback-status-indicator-pause-icon">
 </media-icon>
 </media-status-indicator>
 </div>

package/dist/default/player/context.js

@@ -7,9 +7,17 @@ const PLAYER_CONTEXT_KEY = Symbol.for("@videojs/player");
 * @public
 */
 const playerContext = createContext(PLAYER_CONTEXT_KEY);
+/** @internal */
 const MEDIA_CONTEXT_KEY = Symbol.for("@videojs/media");
+/** @internal */
 const mediaContext = createContext(MEDIA_CONTEXT_KEY);
+/** @internal */
 const CONTAINER_CONTEXT_KEY = Symbol.for("@videojs/container");
+/** @internal */
 const containerContext = createContext(CONTAINER_CONTEXT_KEY);
+/** @internal */
+const EXTENSION_CONTEXT_KEY = Symbol.for("@videojs/extension");
+/** @internal */
+const extensionContext = createContext(EXTENSION_CONTEXT_KEY);
 //#endregion
-export { CONTAINER_CONTEXT_KEY, MEDIA_CONTEXT_KEY, PLAYER_CONTEXT_KEY, containerContext, mediaContext, playerContext };
+export { CONTAINER_CONTEXT_KEY, EXTENSION_CONTEXT_KEY, MEDIA_CONTEXT_KEY, PLAYER_CONTEXT_KEY, containerContext, extensionContext, mediaContext, playerContext };

package/dist/default/player/create-player.js

@@ -1,4 +1,4 @@
-import { containerContext, mediaContext, playerContext } from "./context.js";
+import { containerContext, extensionContext, mediaContext, playerContext } from "./context.js";
 import { createPlayerController } from "./controller.js";
 import { createPlayerElement } from "./element.js";
 import { combinePlayerFeatureConfigs } from "@videojs/core/dom";
@@ -12,6 +12,7 @@ function createPlayer(config) {
 			playerContext,
 			mediaContext,
 			containerContext,
+			extensionContext,
 			factory: () => createStore()(slice),
 			config: featureConfig
 		}),

package/dist/default/player/element.js

@@ -1,6 +1,6 @@
 import { UIElement } from "../ui/ui-element.js";
-import { setPlayerConfigValue } from "@videojs/core/dom";
-import { ContextProvider } from "@videojs/element/context";
+import { PlayerExtensionCoordinator, setPlayerConfigValue } from "@videojs/core/dom";
+import { ContextProvider, ContextRoot } from "@videojs/element/context";
 import { camelCase, kebabCase } from "@videojs/utils/string";
 import { isNull } from "@videojs/utils/predicate";
 //#region src/player/element.ts
@@ -27,15 +27,19 @@ function createPlayerElement(options) {
 			};
 		}
 		#store = options.factory();
+		#contextRoot = new ContextRoot();
 		#configuredStore = null;
 		#detach = null;
 		#connected = false;
 		#media = null;
 		#nativeMedia = null;
 		#container = null;
+		#attached = null;
 		#mediaRegistrations = [];
 		#containerRegistrations = [];
 		#observer = new MutationObserver(() => this.#syncNativeMedia());
+		#extensions = new PlayerExtensionCoordinator(() => this.#syncExtensions());
+		#registerExtension = (extension) => this.#extensions.register(extension);
 		#registerMedia = (media) => {
 			const registration = { value: media };
 			this.#mediaRegistrations.push(registration);
@@ -77,12 +81,20 @@ function createPlayerElement(options) {
 				registerContainer: this.#registerContainer
 			}
 		});
+		constructor() {
+			super();
+			new ContextProvider(this, {
+				context: options.extensionContext,
+				initialValue: { registerExtension: this.#registerExtension }
+			});
+		}
 		get store() {
 			if (isNull(this.#store)) this.#store = options.factory();
 			return this.#store;
 		}
 		connectedCallback() {
 			this.#connected = true;
+			this.#contextRoot.attach(this);
 			super.connectedCallback();
 			this.#syncInitialConfig();
 			this.#playerProvider.setValue(this.store);
@@ -99,13 +111,16 @@ function createPlayerElement(options) {
 		}
 		disconnectedCallback() {
 			this.#connected = false;
+			this.#contextRoot.detach(this);
 			this.#observer.disconnect();
 			this.#detachStore();
 			super.disconnectedCallback();
 		}
 		destroyCallback() {
+			this.#contextRoot.detach(this);
 			this.#observer.disconnect();
 			this.#detachStore();
+			this.#extensions.destroy();
 			this.#store?.destroy();
 			this.#store = null;
 			super.destroyCallback();
@@ -151,8 +166,7 @@ function createPlayerElement(options) {
 			});
 		}
 		#tryAttach() {
-			const store = this.#store;
-			if (!this.#connected || !store) return;
+			if (!this.#connected || !this.#store) return;
 			if (!this.#media) {
 				this.#detachStore();
 				return;
@@ -161,16 +175,39 @@ function createPlayerElement(options) {
 				media: this.#media,
 				container: this.#container
 			};
-			const hasMediaChanged = store.target?.media !== target.media;
-			const hasContainerChanged = store.target?.container !== target.container;
-			if (hasMediaChanged || hasContainerChanged) {
-				this.#detachStore();
-				this.#detach = store.attach(target);
-			}
+			const hasMediaChanged = this.#attached?.media !== target.media;
+			const hasContainerChanged = this.#attached?.container !== target.container;
+			if (hasMediaChanged || hasContainerChanged) this.#attach(target);
+		}
+		/**
+		* Extensions attach before the store so their overrides are in place when features first read the media; the store
+		* then sees the media through the extensions' facade. Extensions follow the media only, so a container change
+		* re-attaches the store but leaves them attached.
+		*/
+		#attach(target) {
+			const store = this.#store;
+			if (!store) return;
+			this.#detach?.();
+			this.#attached = target;
+			this.#extensions.attach(target);
+			this.#detach = store.attach({
+				media: this.#extensions.getStoreMedia(target.media),
+				container: target.container
+			});
+		}
+		/**
+		* An extension that overrides media members was added or removed. Features hold members read at attach time (such
+		* as `remote`), so the store re-attaches to the same target to pick up what the extensions now own. Observers such
+		* as analytics never get here. Extensions themselves stay attached.
+		*/
+		#syncExtensions() {
+			if (this.#attached) this.#attach(this.#attached);
 		}
 		#detachStore() {
 			this.#detach?.();
 			this.#detach = null;
+			this.#extensions.detach();
+			this.#attached = null;
 		}
 		#syncInitialConfig() {
 			const store = this.store;

package/dist/default/presets/audio/compat-skin.js

@@ -0,0 +1,19 @@
+import { SkinElement } from "../skin.js";
+import { template } from "../../internal/skins/compat-audio/template.js";
+import compat_skin_default from "../../define/audio/compat-skin2.js";
+import { createShadowStyle } from "@videojs/utils/dom";
+//#region src/presets/audio/compat-skin.ts
+/** Packaged compat audio UI registered as `<audio-compat-skin>`. */
+var CompatAudioSkinElement = class extends SkinElement {
+	static {
+		this.tagName = "audio-compat-skin";
+	}
+	static {
+		this.styles = createShadowStyle(compat_skin_default);
+	}
+	static {
+		this.template = template;
+	}
+};
+//#endregion
+export { CompatAudioSkinElement };

package/dist/default/presets/audio/index.js

@@ -1,5 +1,6 @@
-import { MinimalAudioSkinElement } from "./minimal-skin.js";
+import { CompatAudioSkinElement } from "./compat-skin.js";
+import { NeutralAudioSkinElement } from "./neutral-skin.js";
 import { AudioPlayerElement, PlayerController } from "./player.js";
 import { AudioSkinElement } from "./skin.js";
 import { audioFeatures } from "@videojs/core/dom";
-export { AudioPlayerElement, AudioSkinElement, MinimalAudioSkinElement, PlayerController, audioFeatures };
+export { AudioPlayerElement, AudioSkinElement, CompatAudioSkinElement, NeutralAudioSkinElement, PlayerController, audioFeatures };

package/dist/default/presets/audio/neutral-skin.js

@@ -0,0 +1,19 @@
+import { SkinElement } from "../skin.js";
+import { template } from "../../internal/skins/neutral-audio/template.js";
+import neutral_skin_default from "../../define/audio/neutral-skin2.js";
+import { createShadowStyle } from "@videojs/utils/dom";
+//#region src/presets/audio/neutral-skin.ts
+/** Packaged Neutral audio UI registered as `<audio-neutral-skin>`. */
+var NeutralAudioSkinElement = class extends SkinElement {
+	static {
+		this.tagName = "audio-neutral-skin";
+	}
+	static {
+		this.styles = createShadowStyle(neutral_skin_default);
+	}
+	static {
+		this.template = template;
+	}
+};
+//#endregion
+export { NeutralAudioSkinElement };

package/dist/default/presets/live-audio/compat-skin.js

@@ -0,0 +1,19 @@
+import { SkinElement } from "../skin.js";
+import { template } from "../../internal/skins/compat-live-audio/template.js";
+import compat_skin_default from "../../define/live-audio/compat-skin2.js";
+import { createShadowStyle } from "@videojs/utils/dom";
+//#region src/presets/live-audio/compat-skin.ts
+/** Packaged compat live-audio UI registered as `<live-audio-compat-skin>`. */
+var CompatLiveAudioSkinElement = class extends SkinElement {
+	static {
+		this.tagName = "live-audio-compat-skin";
+	}
+	static {
+		this.styles = createShadowStyle(compat_skin_default);
+	}
+	static {
+		this.template = template;
+	}
+};
+//#endregion
+export { CompatLiveAudioSkinElement };

package/dist/default/presets/live-audio/index.js

@@ -1,5 +1,6 @@
-import { MinimalLiveAudioSkinElement } from "./minimal-skin.js";
+import { CompatLiveAudioSkinElement } from "./compat-skin.js";
+import { NeutralLiveAudioSkinElement } from "./neutral-skin.js";
 import { LiveAudioPlayerElement, PlayerController } from "./player.js";
 import { LiveAudioSkinElement } from "./skin.js";
 import { liveAudioFeatures } from "@videojs/core/dom";
-export { LiveAudioPlayerElement, LiveAudioSkinElement, MinimalLiveAudioSkinElement, PlayerController, liveAudioFeatures };
+export { CompatLiveAudioSkinElement, LiveAudioPlayerElement, LiveAudioSkinElement, NeutralLiveAudioSkinElement, PlayerController, liveAudioFeatures };

package/dist/default/presets/live-audio/neutral-skin.js

@@ -0,0 +1,19 @@
+import { SkinElement } from "../skin.js";
+import { template } from "../../internal/skins/neutral-live-audio/template.js";
+import neutral_skin_default from "../../define/live-audio/neutral-skin2.js";
+import { createShadowStyle } from "@videojs/utils/dom";
+//#region src/presets/live-audio/neutral-skin.ts
+/** Packaged Neutral live-audio UI registered as `<live-audio-neutral-skin>`. */
+var NeutralLiveAudioSkinElement = class extends SkinElement {
+	static {
+		this.tagName = "live-audio-neutral-skin";
+	}
+	static {
+		this.styles = createShadowStyle(neutral_skin_default);
+	}
+	static {
+		this.template = template;
+	}
+};
+//#endregion
+export { NeutralLiveAudioSkinElement };