@videojs/html 10.0.0-alpha.4 → 10.0.0-alpha.6

package/dist/dev/index.js

@@ -1,24 +1,38 @@
 import { PLAYER_CONTEXT_KEY, playerContext } from "./player/context.js";
 import { createContainerMixin } from "./store/container-mixin.js";
-import { createProviderMixin } from "./store/provider-mixin.js";
 import { MediaElement } from "./ui/media-element.js";
+import { MediaContainerElement } from "./media/container-element.js";
+import { createProviderMixin } from "./store/provider-mixin.js";
 import { PlayerController } from "./player/player-controller.js";
-import { createPlayerMixin } from "./player/player-mixin.js";
 import { createPlayer } from "./player/create-player.js";
 import { BufferingIndicatorElement } from "./ui/buffering-indicator/buffering-indicator-element.js";
 import { ControlsElement } from "./ui/controls/controls-element.js";
 import { ControlsGroupElement } from "./ui/controls/controls-group-element.js";
+import { MediaButtonElement } from "./ui/media-button-element.js";
 import { FullscreenButtonElement } from "./ui/fullscreen-button/fullscreen-button-element.js";
+import { MediaUIElement } from "./ui/media-ui-element.js";
 import { MuteButtonElement } from "./ui/mute-button/mute-button-element.js";
 import { PiPButtonElement } from "./ui/pip-button/pip-button-element.js";
 import { PlayButtonElement } from "./ui/play-button/play-button-element.js";
+import { PlaybackRateButtonElement } from "./ui/playback-rate-button/playback-rate-button-element.js";
+import { PopoverElement } from "./ui/popover/popover-element.js";
 import { PosterElement } from "./ui/poster/poster-element.js";
 import { SeekButtonElement } from "./ui/seek-button/seek-button-element.js";
+import { sliderContext } from "./ui/slider/context.js";
+import { SliderBufferElement } from "./ui/slider/slider-buffer-element.js";
+import { SliderElement } from "./ui/slider/slider-element.js";
+import { SliderFillElement } from "./ui/slider/slider-fill-element.js";
+import { SliderThumbElement } from "./ui/slider/slider-thumb-element.js";
+import { SliderTrackElement } from "./ui/slider/slider-track-element.js";
+import { SliderValueElement } from "./ui/slider/slider-value-element.js";
+import { ThumbnailElement } from "./ui/thumbnail/thumbnail-element.js";
 import { TimeElement } from "./ui/time/time-element.js";
 import { TimeGroupElement } from "./ui/time/time-group-element.js";
 import { TimeSeparatorElement } from "./ui/time/time-separator-element.js";
+import { TimeSliderElement } from "./ui/time-slider/time-slider-element.js";
+import { VolumeSliderElement } from "./ui/volume-slider/volume-slider-element.js";
 import { createSelector, shallowEqual } from "@videojs/store";
 
 export * from "@videojs/core/dom"
 
-export { BufferingIndicatorElement, ControlsElement, ControlsGroupElement, FullscreenButtonElement, MediaElement, MuteButtonElement, PLAYER_CONTEXT_KEY, PiPButtonElement, PlayButtonElement, PlayerController, PosterElement, SeekButtonElement, TimeElement, TimeGroupElement, TimeSeparatorElement, createContainerMixin, createPlayer, createPlayerMixin, createProviderMixin, createSelector, playerContext, shallowEqual };
+export { BufferingIndicatorElement, ControlsElement, ControlsGroupElement, FullscreenButtonElement, MediaButtonElement, MediaContainerElement, MediaElement, MediaUIElement, MuteButtonElement, PLAYER_CONTEXT_KEY, PiPButtonElement, PlayButtonElement, PlaybackRateButtonElement, PlayerController, PopoverElement, PosterElement, SeekButtonElement, SliderBufferElement, SliderElement, SliderFillElement, SliderThumbElement, SliderTrackElement, SliderValueElement, ThumbnailElement, TimeElement, TimeGroupElement, TimeSeparatorElement, TimeSliderElement, VolumeSliderElement, createContainerMixin, createPlayer, createProviderMixin, createSelector, playerContext, shallowEqual, sliderContext };

package/dist/dev/media/container-element.d.ts

@@ -0,0 +1,13 @@
+import { MediaElement } from "../ui/media-element.js";
+import { PlayerConsumerConstructor } from "../store/types.js";
+import "../index.js";
+import * as _videojs_core_dom0 from "@videojs/core/dom";
+
+//#region src/media/container-element.d.ts
+declare const MediaContainerElement_base: typeof MediaElement & PlayerConsumerConstructor<_videojs_core_dom0.AnyPlayerStore>;
+declare class MediaContainerElement extends MediaContainerElement_base {
+  static readonly tagName = "media-container";
+}
+//#endregion
+export { MediaContainerElement };
+//# sourceMappingURL=container-element.d.ts.map

package/dist/dev/media/container-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container-element.d.ts","names":[],"sources":["../../../src/media/container-element.ts"],"mappings":";;;;;;cAEmD,0BAAA;cAItC,qBAAA,SAA8B,0BAAA;EAAA,gBACzB,OAAA;AAAA"}

package/dist/dev/media/container-element.js

@@ -0,0 +1,15 @@
+import { playerContext } from "../player/context.js";
+import { createContainerMixin } from "../store/container-mixin.js";
+import { MediaElement } from "../ui/media-element.js";
+
+//#region src/media/container-element.ts
+const ContainerMixin = createContainerMixin(playerContext);
+var MediaContainerElement = class extends ContainerMixin(MediaElement) {
+	static {
+		this.tagName = "media-container";
+	}
+};
+
+//#endregion
+export { MediaContainerElement };
+//# sourceMappingURL=container-element.js.map

package/dist/dev/media/container-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container-element.js","names":[],"sources":["../../../src/media/container-element.ts"],"sourcesContent":["import { playerContext } from '../player/context';\nimport { createContainerMixin } from '../store/container-mixin';\nimport { MediaElement } from '../ui/media-element';\n\nconst ContainerMixin = createContainerMixin(playerContext);\n\nexport class MediaContainerElement extends ContainerMixin(MediaElement) {\n  static readonly tagName = 'media-container';\n}\n"],"mappings":";;;;;AAIA,MAAM,iBAAiB,qBAAqB,cAAc;AAE1D,IAAa,wBAAb,cAA2C,eAAe,aAAa,CAAC;;iBAC5C"}

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

@@ -1,9 +1,7 @@
 import { PlayerContext } from "./context.js";
-import { PlayerElementConstructor } from "../store/types.js";
 import { ContainerMixin } from "../store/container-mixin.js";
 import { ProviderMixin } from "../store/provider-mixin.js";
 import { PlayerController } from "./player-controller.js";
-import { PlayerMixin } from "./player-mixin.js";
 import { AnyPlayerFeature, AudioFeatures, AudioPlayerStore, PlayerStore, VideoFeatures, VideoPlayerStore } from "@videojs/core/dom";
 
 //#region src/player/create-player.d.ts
@@ -17,10 +15,6 @@ interface CreatePlayerResult<Store extends PlayerStore> {
   create: () => Store;
   /** Player controller bound to this player's context. */
   PlayerController: PlayerController.Constructor<Store>;
-  /** Pre-composed player element ready for customElements.define(). */
-  PlayerElement: PlayerElementConstructor<Store>;
-  /** Mixin for a complete player element (provider + container). */
-  PlayerMixin: PlayerMixin<Store>;
   /** Mixin that provides player context to descendants. */
   ProviderMixin: ProviderMixin<Store>;
   /** Mixin that consumes player context and auto-attaches media elements. */
@@ -31,18 +25,16 @@ interface CreatePlayerResult<Store extends PlayerStore> {
  *
  * @example
  * ```ts
- * import { features } from '@videojs/core/dom';
  * import { createPlayer, MediaElement } from '@videojs/html';
+ * import { videoFeatures } from '@videojs/html/video';
  *
- * const { PlayerElement, PlayerController, context } = createPlayer({
- *   features: features.video,
+ * const { ProviderMixin, ContainerMixin, PlayerController, context } = createPlayer({
+ *   features: videoFeatures,
  * });
  *
- * // Simple: register pre-composed PlayerElement
- * customElements.define('video-player', PlayerElement);
- *
- * // Custom: extend with PlayerMixin
- * class MyPlayer extends PlayerMixin(MediaElement) {}
+ * // Provider element: owns the store, provides context to descendants
+ * class VideoPlayer extends ProviderMixin(MediaElement) {}
+ * customElements.define('video-player', VideoPlayer);
  *
  * // Control element with selector
  * class PlayButton extends MediaElement {

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

@@ -1 +1 @@
-{"version":3,"file":"create-player.d.ts","names":[],"sources":["../../../src/player/create-player.ts"],"mappings":";;;;;;;;;UAmBiB,kBAAA,kBAAoC,gBAAA;EACnD,QAAA,EAAU,QAAA;AAAA;AAAA,UAGK,kBAAA,eAAiC,WAAA;EAJf;EAMjC,OAAA,EAAS,aAAA,CAAc,KAAA;EANW;EASlC,MAAA,QAAc,KAAA;EARd;EAWA,gBAAA,EAAkB,gBAAA,CAAiB,WAAA,CAAY,KAAA;EAX7B;EAclB,aAAA,EAAe,wBAAA,CAAyB,KAAA;EAXzB;EAcf,WAAA,EAAa,WAAA,CAAY,KAAA;EAdQ;EAiBjC,aAAA,EAAe,aAAA,CAAc,KAAA;EAfN;EAkBvB,cAAA,EAAgB,cAAA,CAAe,KAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA8BjB,YAAA,CAAa,MAAA,EAAQ,kBAAA,CAAmB,aAAA,IAAiB,kBAAA,CAAmB,gBAAA;;;;;;;iBAQ5E,YAAA,CAAa,MAAA,EAAQ,kBAAA,CAAmB,aAAA,IAAiB,kBAAA,CAAmB,gBAAA;;;AAR5F;;;;iBAgBgB,YAAA,wBAAoC,gBAAA,GAAA,CAClD,MAAA,EAAQ,kBAAA,CAAmB,QAAA,IAC1B,kBAAA,CAAmB,WAAA,CAAY,QAAA"}
+{"version":3,"file":"create-player.d.ts","names":[],"sources":["../../../src/player/create-player.ts"],"mappings":";;;;;;;UAgBiB,kBAAA,kBAAoC,gBAAA;EACnD,QAAA,EAAU,QAAA;AAAA;AAAA,UAGK,kBAAA,eAAiC,WAAA;EAJf;EAMjC,OAAA,EAAS,aAAA,CAAc,KAAA;EANW;EASlC,MAAA,QAAc,KAAA;EARd;EAWA,gBAAA,EAAkB,gBAAA,CAAiB,WAAA,CAAY,KAAA;EAX7B;EAclB,aAAA,EAAe,aAAA,CAAc,KAAA;EAXd;EAcf,cAAA,EAAgB,cAAA,CAAe,KAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4BjB,YAAA,CAAa,MAAA,EAAQ,kBAAA,CAAmB,aAAA,IAAiB,kBAAA,CAAmB,gBAAA;;;;;;AAA5F;iBAQgB,YAAA,CAAa,MAAA,EAAQ,kBAAA,CAAmB,aAAA,IAAiB,kBAAA,CAAmB,gBAAA;;;;;;;iBAQ5E,YAAA,wBAAoC,gBAAA,GAAA,CAClD,MAAA,EAAQ,kBAAA,CAAmB,QAAA,IAC1B,kBAAA,CAAmB,WAAA,CAAY,QAAA"}

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

@@ -1,9 +1,7 @@
 import { playerContext } from "./context.js";
 import { createContainerMixin } from "../store/container-mixin.js";
 import { createProviderMixin } from "../store/provider-mixin.js";
-import { MediaElement } from "../ui/media-element.js";
 import { PlayerController } from "./player-controller.js";
-import { createPlayerMixin } from "./player-mixin.js";
 import { combine, createStore } from "@videojs/store";
 
 //#region src/player/create-player.ts
@@ -12,13 +10,10 @@ function createPlayer(config) {
 	function create() {
 		return createStore()(slice);
 	}
-	const PlayerMixin = createPlayerMixin(playerContext, create);
 	return {
 		context: playerContext,
 		create,
 		PlayerController,
-		PlayerElement: PlayerMixin(MediaElement),
-		PlayerMixin,
 		ProviderMixin: createProviderMixin(playerContext, create),
 		ContainerMixin: createContainerMixin(playerContext)
 	};

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

@@ -1 +1 @@
-{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.ts"],"sourcesContent":["import type {\n  AnyPlayerFeature,\n  AudioFeatures,\n  AudioPlayerStore,\n  PlayerStore,\n  PlayerTarget,\n  VideoFeatures,\n  VideoPlayerStore,\n} from '@videojs/core/dom';\nimport { combine, createStore } from '@videojs/store';\n\nimport { type ContainerMixin, createContainerMixin } from '../store/container-mixin';\nimport { createProviderMixin, type ProviderMixin } from '../store/provider-mixin';\nimport type { PlayerElementConstructor } from '../store/types';\nimport { MediaElement } from '../ui/media-element';\nimport { type PlayerContext, playerContext } from './context';\nimport { PlayerController } from './player-controller';\nimport { createPlayerMixin, type PlayerMixin } from './player-mixin';\n\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  features: Features;\n}\n\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  /** Context for consuming player in controllers. */\n  context: PlayerContext<Store>;\n\n  /** Creates a store instance for imperative access. */\n  create: () => Store;\n\n  /** Player controller bound to this player's context. */\n  PlayerController: PlayerController.Constructor<Store>;\n\n  /** Pre-composed player element ready for customElements.define(). */\n  PlayerElement: PlayerElementConstructor<Store>;\n\n  /** Mixin for a complete player element (provider + container). */\n  PlayerMixin: PlayerMixin<Store>;\n\n  /** Mixin that provides player context to descendants. */\n  ProviderMixin: ProviderMixin<Store>;\n\n  /** Mixin that consumes player context and auto-attaches media elements. */\n  ContainerMixin: ContainerMixin<Store>;\n}\n\n/**\n * Creates a player factory with typed store, mixins, and controller.\n *\n * @example\n * ```ts\n * import { features } from '@videojs/core/dom';\n * import { createPlayer, MediaElement } from '@videojs/html';\n *\n * const { PlayerElement, PlayerController, context } = createPlayer({\n *   features: features.video,\n * });\n *\n * // Simple: register pre-composed PlayerElement\n * customElements.define('video-player', PlayerElement);\n *\n * // Custom: extend with PlayerMixin\n * class MyPlayer extends PlayerMixin(MediaElement) {}\n *\n * // Control element with selector\n * class PlayButton extends MediaElement {\n *   #playback = new PlayerController(this, context, selectPlayback);\n * }\n * ```\n *\n * @label Video\n * @param config - Player configuration with features.\n */\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/**\n * Creates a player factory for audio media.\n *\n * @label Audio\n * @param config - Player configuration with features.\n */\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/**\n * Creates a player factory with custom features.\n *\n * @label Generic\n * @param config - Player configuration with features.\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<PlayerTarget, AnyPlayerFeature[]>(...config.features);\n\n  function create(): PlayerStore {\n    return createStore<PlayerTarget>()(slice);\n  }\n\n  const PlayerMixin = createPlayerMixin<PlayerStore>(playerContext, create);\n  const PlayerElement = PlayerMixin(MediaElement);\n  const ProviderMixin = createProviderMixin<PlayerStore>(playerContext, create);\n  const ContainerMixin = createContainerMixin<PlayerStore>(playerContext);\n\n  return {\n    context: playerContext,\n    create,\n    PlayerController,\n    PlayerElement,\n    PlayerMixin,\n    ProviderMixin,\n    ContainerMixin,\n  };\n}\n"],"mappings":";;;;;;;;;AA6FA,SAAgB,aAAa,QAAiF;CAC5G,MAAM,QAAQ,QAA0C,GAAG,OAAO,SAAS;CAE3E,SAAS,SAAsB;AAC7B,SAAO,aAA2B,CAAC,MAAM;;CAG3C,MAAM,cAAc,kBAA+B,eAAe,OAAO;AAKzE,QAAO;EACL,SAAS;EACT;EACA;EACA,eARoB,YAAY,aAAa;EAS7C;EACA,eAToB,oBAAiC,eAAe,OAAO;EAU3E,gBATqB,qBAAkC,cAAc;EAUtE"}
+{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.ts"],"sourcesContent":["import type {\n  AnyPlayerFeature,\n  AudioFeatures,\n  AudioPlayerStore,\n  PlayerStore,\n  PlayerTarget,\n  VideoFeatures,\n  VideoPlayerStore,\n} from '@videojs/core/dom';\nimport { combine, createStore } from '@videojs/store';\n\nimport { type ContainerMixin, createContainerMixin } from '../store/container-mixin';\nimport { createProviderMixin, type ProviderMixin } from '../store/provider-mixin';\nimport { type PlayerContext, playerContext } from './context';\nimport { PlayerController } from './player-controller';\n\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  features: Features;\n}\n\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  /** Context for consuming player in controllers. */\n  context: PlayerContext<Store>;\n\n  /** Creates a store instance for imperative access. */\n  create: () => Store;\n\n  /** Player controller bound to this player's context. */\n  PlayerController: PlayerController.Constructor<Store>;\n\n  /** Mixin that provides player context to descendants. */\n  ProviderMixin: ProviderMixin<Store>;\n\n  /** Mixin that consumes player context and auto-attaches media elements. */\n  ContainerMixin: ContainerMixin<Store>;\n}\n\n/**\n * Creates a player factory with typed store, mixins, and controller.\n *\n * @example\n * ```ts\n * import { createPlayer, MediaElement } from '@videojs/html';\n * import { videoFeatures } from '@videojs/html/video';\n *\n * const { ProviderMixin, ContainerMixin, PlayerController, context } = createPlayer({\n *   features: videoFeatures,\n * });\n *\n * // Provider element: owns the store, provides context to descendants\n * class VideoPlayer extends ProviderMixin(MediaElement) {}\n * customElements.define('video-player', VideoPlayer);\n *\n * // Control element with selector\n * class PlayButton extends MediaElement {\n *   #playback = new PlayerController(this, context, selectPlayback);\n * }\n * ```\n *\n * @label Video\n * @param config - Player configuration with features.\n */\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/**\n * Creates a player factory for audio media.\n *\n * @label Audio\n * @param config - Player configuration with features.\n */\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/**\n * Creates a player factory with custom features.\n *\n * @label Generic\n * @param config - Player configuration with features.\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<PlayerTarget, AnyPlayerFeature[]>(...config.features);\n\n  function create(): PlayerStore {\n    return createStore<PlayerTarget>()(slice);\n  }\n\n  const ProviderMixin = createProviderMixin<PlayerStore>(playerContext, create);\n  const ContainerMixin = createContainerMixin<PlayerStore>(playerContext);\n\n  return {\n    context: playerContext,\n    create,\n    PlayerController,\n    ProviderMixin,\n    ContainerMixin,\n  };\n}\n"],"mappings":";;;;;;;AAkFA,SAAgB,aAAa,QAAiF;CAC5G,MAAM,QAAQ,QAA0C,GAAG,OAAO,SAAS;CAE3E,SAAS,SAAsB;AAC7B,SAAO,aAA2B,CAAC,MAAM;;AAM3C,QAAO;EACL,SAAS;EACT;EACA;EACA,eAPoB,oBAAiC,eAAe,OAAO;EAQ3E,gBAPqB,qBAAkC,cAAc;EAQtE"}

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

@@ -44,6 +44,7 @@ declare class PlayerController<Store extends PlayerStore, Result = Store> implem
    */
   constructor(host: PlayerControllerHost, context: PlayerContext<Store>, selector: Selector<InferStoreState<Store>, Result>);
   get value(): Result | undefined;
+  get displayName(): string | undefined;
   hostConnected(): void;
   hostDisconnected(): void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"player-controller.d.ts","names":[],"sources":["../../../src/player/player-controller.ts"],"mappings":";;;;;;KAQY,oBAAA,GAAuB,sBAAA,GAAyB,WAAA;;AAA5D;;;;;AAyBA;;;;;;;;;;;;;;;;;cAAa,gBAAA,eAA+B,WAAA,WAAsB,KAAA,aAAkB,kBAAA;EAAA;EAAtD;;;;;cAYhB,IAAA,EAAM,oBAAA,EAAsB,OAAA,EAAS,aAAA,CAAc,KAAA;;;;;;;cAQ7D,IAAA,EAAM,oBAAA,EACN,OAAA,EAAS,aAAA,CAAc,KAAA,GACvB,QAAA,EAAU,QAAA,CAAS,eAAA,CAAgB,KAAA,GAAQ,MAAA;EAAA,IAmBzC,KAAA,CAAA,GAAS,MAAA;EAWb,aAAA,CAAA;EAKA,gBAAA,CAAA;AAAA;AAAA,kBAWe,gBAAA;EAAA,KACH,IAAA,GAAO,oBAAA;EAAA,KAEP,WAAA,eAA0B,WAAA,GAAc,WAAA,WAAsB,KAAA,WAAgB,gBAAA,CACxF,KAAA,EACA,MAAA;AAAA"}
+{"version":3,"file":"player-controller.d.ts","names":[],"sources":["../../../src/player/player-controller.ts"],"mappings":";;;;;;KAQY,oBAAA,GAAuB,sBAAA,GAAyB,WAAA;;AAA5D;;;;;AAyBA;;;;;;;;;;;;;;;;;cAAa,gBAAA,eAA+B,WAAA,WAAsB,KAAA,aAAkB,kBAAA;EAAA;EAAtD;;;;;cAYhB,IAAA,EAAM,oBAAA,EAAsB,OAAA,EAAS,aAAA,CAAc,KAAA;;;;;;;cAQ7D,IAAA,EAAM,oBAAA,EACN,OAAA,EAAS,aAAA,CAAc,KAAA,GACvB,QAAA,EAAU,QAAA,CAAS,eAAA,CAAgB,KAAA,GAAQ,MAAA;EAAA,IAmBzC,KAAA,CAAA,GAAS,MAAA;EAAA,IAWT,WAAA,CAAA;EAIJ,aAAA,CAAA;EAKA,gBAAA,CAAA;AAAA;AAAA,kBAWe,gBAAA;EAAA,KACH,IAAA,GAAO,oBAAA;EAAA,KAEP,WAAA,eAA0B,WAAA,GAAc,WAAA,WAAsB,KAAA,WAAgB,gBAAA,CACxF,KAAA,EACA,MAAA;AAAA"}

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

@@ -46,6 +46,9 @@ var PlayerController = class {
 		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);

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

@@ -1 +1 @@
-{"version":3,"file":"player-controller.js","names":["#host","#selector","#consumer","#connect","#store"],"sources":["../../../src/player/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.\n * With selector: Returns selected state, subscribes with shallowEqual comparison.\n *\n * @example\n * ```ts\n * // Store access (no subscription)\n * class Controls extends MediaElement {\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 MediaElement {\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   * @label Without Selector\n   * @param host - The host element that owns this controller.\n   * @param context - Player context to resolve the store from.\n   */\n  constructor(host: PlayerControllerHost, context: PlayerContext<Store>);\n  /**\n   * @label With Selector\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   */\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  hostConnected(): void {\n    const store = this.#consumer.value;\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 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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAa,mBAAb,MAAuG;CACrG,CAASA;CACT,CAASC;CAET;CACA,SAAgD;CAmBhD,YACE,MACA,SACA,UACA;AACA,QAAKD,OAAQ;AACb,QAAKC,WAAY;AAEjB,QAAKC,WAAY,IAAI,gBAAgB,MAAM;GACzC;GACA,WAAW,QAAQ,MAAKC,QAAS,IAAI;GACrC,WAAW;GACZ,CAAC;AAEF,OAAK,cAAc,KAAK;;CAG1B,IAAI,QAA4B;EAC9B,MAAM,QAAQ,MAAKD,SAAU;AAC7B,MAAI,CAAC,MAAO,QAAO;AAGnB,MAAI,CAAC,MAAKD,SAAW,QAAO;AAG5B,SAAO,MAAKG,OAAQ;;CAGtB,gBAAsB;EACpB,MAAM,QAAQ,MAAKF,SAAU;AAC7B,MAAI,MAAO,OAAKC,QAAS,MAAM;;CAGjC,mBAAyB;AACvB,QAAKC,QAAS;;CAGhB,SAAS,OAAoB;AAC3B,MAAI,CAAC,MAAKA,SAAU,MAAKH,SACvB,OAAKG,QAAS,IAAI,gBAAgB,MAAKJ,MAAO,OAAO,MAAKC,SAAU"}
+{"version":3,"file":"player-controller.js","names":["#host","#selector","#consumer","#connect","#store"],"sources":["../../../src/player/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.\n * With selector: Returns selected state, subscribes with shallowEqual comparison.\n *\n * @example\n * ```ts\n * // Store access (no subscription)\n * class Controls extends MediaElement {\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 MediaElement {\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   * @label Without Selector\n   * @param host - The host element that owns this controller.\n   * @param context - Player context to resolve the store from.\n   */\n  constructor(host: PlayerControllerHost, context: PlayerContext<Store>);\n  /**\n   * @label With Selector\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   */\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    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 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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAa,mBAAb,MAAuG;CACrG,CAASA;CACT,CAASC;CAET;CACA,SAAgD;CAmBhD,YACE,MACA,SACA,UACA;AACA,QAAKD,OAAQ;AACb,QAAKC,WAAY;AAEjB,QAAKC,WAAY,IAAI,gBAAgB,MAAM;GACzC;GACA,WAAW,QAAQ,MAAKC,QAAS,IAAI;GACrC,WAAW;GACZ,CAAC;AAEF,OAAK,cAAc,KAAK;;CAG1B,IAAI,QAA4B;EAC9B,MAAM,QAAQ,MAAKD,SAAU;AAC7B,MAAI,CAAC,MAAO,QAAO;AAGnB,MAAI,CAAC,MAAKD,SAAW,QAAO;AAG5B,SAAO,MAAKG,OAAQ;;CAGtB,IAAI,cAAkC;AACpC,SAAO,MAAKH,UAAW;;CAGzB,gBAAsB;EACpB,MAAM,QAAQ,MAAKC,SAAU;AAC7B,MAAI,MAAO,OAAKC,QAAS,MAAM;;CAGjC,mBAAyB;AACvB,QAAKC,QAAS;;CAGhB,SAAS,OAAoB;AAC3B,MAAI,CAAC,MAAKA,SAAU,MAAKH,SACvB,OAAKG,QAAS,IAAI,gBAAgB,MAAKJ,MAAO,OAAO,MAAKC,SAAU"}

package/dist/dev/presets/audio.d.ts

@@ -0,0 +1,4 @@
+import { MinimalAudioSkinElement } from "../define/audio/minimal-skin.js";
+import { AudioSkinElement } from "../define/audio/skin.js";
+import { audioFeatures } from "@videojs/core/dom";
+export { AudioSkinElement, MinimalAudioSkinElement, audioFeatures };

package/dist/dev/presets/audio.js

@@ -0,0 +1,5 @@
+import { MinimalAudioSkinElement } from "../define/audio/minimal-skin.js";
+import { AudioSkinElement } from "../define/audio/skin.js";
+import { audioFeatures } from "@videojs/core/dom";
+
+export { AudioSkinElement, MinimalAudioSkinElement, audioFeatures };

package/dist/dev/presets/background.d.ts

@@ -0,0 +1,2 @@
+import { backgroundFeatures } from "@videojs/core/dom";
+export { backgroundFeatures };

package/dist/dev/presets/background.js

@@ -0,0 +1,3 @@
+import { backgroundFeatures } from "@videojs/core/dom";
+
+export { backgroundFeatures };

package/dist/dev/presets/video.d.ts

@@ -0,0 +1,6 @@
+import { MinimalVideoSkinElement } from "../define/video/minimal-skin.js";
+import { MinimalVideoSkinTailwindElement } from "../define/video/minimal-skin.tailwind.js";
+import { VideoSkinElement } from "../define/video/skin.js";
+import { VideoSkinTailwindElement } from "../define/video/skin.tailwind.js";
+import { videoFeatures } from "@videojs/core/dom";
+export { MinimalVideoSkinElement, MinimalVideoSkinTailwindElement, VideoSkinElement, VideoSkinTailwindElement, videoFeatures };

package/dist/dev/presets/video.js

@@ -0,0 +1,7 @@
+import { MinimalVideoSkinTailwindElement } from "../define/video/minimal-skin.tailwind.js";
+import { MinimalVideoSkinElement } from "../define/video/minimal-skin.js";
+import { VideoSkinTailwindElement } from "../define/video/skin.tailwind.js";
+import { VideoSkinElement } from "../define/video/skin.js";
+import { videoFeatures } from "@videojs/core/dom";
+
+export { MinimalVideoSkinElement, MinimalVideoSkinTailwindElement, VideoSkinElement, VideoSkinTailwindElement, videoFeatures };

package/dist/dev/skins/dist/default/video/default.tailwind.js

@@ -0,0 +1,90 @@
+import { cn } from "@videojs/utils/style";
+
+//#region ../skins/dist/default/video/default.tailwind.js
+const surface = cn("bg-white/10", "backdrop-blur-3xl backdrop-brightness-90 backdrop-saturate-150", "ring ring-white/5 ring-inset shadow-sm shadow-black/15", "after:absolute after:inset-0 after:ring after:rounded-[inherit] after:ring-black/15 after:pointer-events-none after:z-10", "[@media(prefers-reduced-transparency:reduce)]:bg-black/70 [@media(prefers-reduced-transparency:reduce)]:ring-black [@media(prefers-reduced-transparency:reduce)]:after:ring-white/20", "contrast-more:bg-black/90 contrast-more:ring-black contrast-more:after:ring-white/20");
+const icon = cn("block [grid-area:1/1] size-4.5 shrink-0", "drop-shadow-[0_1px_0_var(--tw-drop-shadow-color)] drop-shadow-black/25", "transition-discrete transition-[display,opacity] duration-150 ease-out");
+const iconFlipped = "[scale:-1_1]";
+const iconContainer = "relative";
+const button = {
+	base: cn("items-center justify-center shrink-0 border-none cursor-pointer select-none text-center", "font-medium", "outline-2 outline-transparent -outline-offset-2", "transition-[background-color,color,outline-offset] duration-150 ease-out", "disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale", "focus-visible:outline-blue-500 focus-visible:outline-offset-2"),
+	icon: cn("grid w-[2.125rem] aspect-square bg-transparent rounded-full", "text-white/90", "text-shadow-2xs text-shadow-black/25", "hover:bg-white/10 hover:text-white hover:no-underline", "focus-visible:bg-white/10 focus-visible:text-white", "aria-expanded:bg-white/10 aria-expanded:text-white"),
+	default: cn("flex py-2 px-4 bg-white rounded-full", "text-black")
+};
+const slider = {
+	root: cn("group/slider relative flex flex-1 items-center justify-center rounded-full outline-none", "data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5", "data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-20"),
+	track: cn("relative isolate overflow-hidden bg-white/20 rounded-[inherit]", "shadow-[0_0_0_1px_oklch(0_0_0/0.05)] select-none", "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-1", "data-[orientation=vertical]:w-1 data-[orientation=vertical]:h-full"),
+	fill: {
+		base: "absolute rounded-[inherit] pointer-events-none",
+		fill: cn("bg-white", "data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0", "data-[orientation=horizontal]:w-(--media-slider-fill)", "data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0", "data-[orientation=vertical]:h-(--media-slider-fill)"),
+		buffer: cn("bg-white/20 duration-250 ease-out", "data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0", "data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer)", "data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0", "data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)")
+	},
+	thumb: {
+		base: cn("z-10 absolute -translate-x-1/2 -translate-y-1/2", "bg-white rounded-full", "ring ring-black/10 shadow-sm shadow-black/15", "transition-[opacity,height,width,outline-offset] duration-150 ease-out select-none", "outline-2 outline-transparent -outline-offset-2", "focus-visible:outline-blue-500 focus-visible:outline-offset-2", "data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill)", "data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill))]"),
+		persistent: "size-3",
+		interactive: cn("size-2.5", "opacity-0 focus-visible:opacity-100 group-hover/slider:opacity-100", "group-active/slider:size-3")
+	}
+};
+const root = cn("block relative isolate overflow-clip @container/media-root", "rounded-(--media-border-radius,2rem) bg-black", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased", "**:box-border **:m-0", "[&_button]:font-[inherit]", "motion-safe:[interpolate-size:allow-keywords]", "before:absolute before:pointer-events-none before:rounded-[inherit] before:z-10", "before:inset-px before:ring-1 before:ring-inset before:ring-white/15", "after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10", "after:inset-0 after:ring-1 after:ring-inset after:ring-black/10", "[&>video]:block [&>video]:w-full [&>video]:h-full [&>video]:rounded-[inherit]", "[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]", "[&>img]:object-cover [&>img]:pointer-events-none", "[&>img]:transition-opacity [&>img]:duration-250", "[&>img:not([data-visible])]:opacity-0", "[--media-caption-track-delay:600ms]", "[--media-caption-track-y:-0.5rem]", "has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]", "[&_video::-webkit-media-text-track-container]:transition-transform", "[&_video::-webkit-media-text-track-container]:duration-150", "[&_video::-webkit-media-text-track-container]:ease-out", "[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)", "[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)", "[&_video::-webkit-media-text-track-container]:scale-98", "[&_video::-webkit-media-text-track-container]:z-1", "[&_video::-webkit-media-text-track-container]:font-[inherit]", "motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50", "[&:fullscreen]:rounded-none");
+const controls = cn("peer/controls", surface, "absolute @container/media-controls bottom-3 inset-x-3", "p-[0.175rem] flex items-center gap-[0.075rem]", "text-white rounded-full z-10", "will-change-[scale,transform,filter,opacity]", "transition-[scale,transform,filter,opacity] ease-out", "delay-0 duration-100 origin-bottom", "not-data-visible:pointer-events-none not-data-visible:blur-sm", "not-data-visible:scale-90 not-data-visible:opacity-0", "not-data-visible:delay-500 not-data-visible:duration-300", "motion-reduce:not-data-visible:duration-100", "motion-reduce:not-data-visible:blur-none", "motion-reduce:not-data-visible:scale-100", "@2xl/media-root:p-1 @2xl/media-root:gap-0.5");
+const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/50 via-black/30 to-transparent", "backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90", "transition-[opacity,backdrop-filter] ease-out", "duration-300 delay-500", "peer-data-visible/controls:opacity-100", "peer-data-visible/controls:duration-150", "peer-data-visible/controls:delay-0", "peer-data-visible/error:opacity-100", "peer-data-visible/error:duration-150", "peer-data-visible/error:delay-0", "peer-data-visible/error:backdrop-blur-sm", "motion-reduce:duration-100");
+const bufferingIndicator = {
+	root: "absolute inset-0 hidden items-center justify-center pointer-events-none z-10 text-white data-visible:flex",
+	container: cn("p-1 rounded-full", surface)
+};
+const error = {
+	root: "peer/error group/error absolute inset-0 z-20 items-center justify-center pointer-events-none hidden data-[visible]:flex",
+	dialog: cn("hidden flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white text-sm pointer-events-auto", "group-data-visible/error:flex", "transition-[display,opacity,scale,transform] duration-500 delay-100 transition-discrete", "starting:opacity-0 starting:scale-50", "ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]", surface),
+	content: "flex flex-col gap-2 px-2 pt-2 pb-1.5",
+	title: "font-semibold leading-tight",
+	description: "opacity-70",
+	actions: "flex gap-2 *:flex-1"
+};
+const time = {
+	group: "@container/media-time flex items-center flex-1 gap-3 px-2",
+	current: "hidden @2xs/media-time:block text-shadow-2xs text-shadow-black/25 tabular-nums",
+	duration: "text-shadow-2xs text-shadow-black/25 tabular-nums"
+};
+const popup = {
+	base: cn("m-0 border-0 [--media-popover-side-offset:0.5rem]", surface, "opacity-100 scale-100 origin-bottom blur-none", "transition-[transform,scale,opacity,filter] duration-200", "data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm", "data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm", "data-instant:duration-0"),
+	volume: "py-2.5 px-1 rounded-full"
+};
+const seek = {
+	button: "@max-md/media-controls:hidden",
+	label: "text-[0.75em] font-[480] tabular-nums",
+	labelForward: "absolute -right-px -bottom-0.75",
+	labelBackward: "absolute -left-px -bottom-0.75"
+};
+const playbackRate = { button: `after:content-[attr(data-rate)_'×'] after:w-[4ch] after:tabular-nums` };
+const iconState = {
+	play: {
+		button: "group",
+		restart: "hidden opacity-0 group-data-ended:block group-data-ended:opacity-100",
+		play: "hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100",
+		pause: "hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100"
+	},
+	mute: {
+		button: "group",
+		volumeOff: "hidden opacity-0 group-data-muted:block group-data-muted:opacity-100",
+		volumeLow: "hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100",
+		volumeHigh: "hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100"
+	},
+	fullscreen: {
+		button: "group",
+		enter: "hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100",
+		exit: "hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100"
+	},
+	captions: {
+		button: "group",
+		off: "hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100",
+		on: "hidden opacity-0 group-data-active:block group-data-active:opacity-100"
+	}
+};
+const captions = {
+	root: cn("absolute z-20 pointer-events-none text-balance text-base", "inset-x-4 bottom-6", "transition-transform duration-150 ease-out delay-600", "motion-reduce:duration-50", "@xs/media-root:text-2xl", "@3xl/media-root:text-3xl", "@7xl/media-root:text-4xl", "peer-data-visible/controls:-translate-y-12 peer-data-visible/controls:delay-25"),
+	container: "max-w-[42ch] mx-auto text-center flex flex-col items-center",
+	cue: cn("block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2", "[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]", "contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70", "*:inline")
+};
+
+//#endregion
+export { bufferingIndicator, button, controls, error, icon, iconContainer, iconFlipped, iconState, overlay, playbackRate, popup, root, seek, slider, time };
+//# sourceMappingURL=default.tailwind.js.map

package/dist/dev/skins/dist/default/video/default.tailwind.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.tailwind.js","names":[],"sources":["../../../../../../../skins/dist/default/video/default.tailwind.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/video/default.tailwind.ts\nconst surface = cn(\"bg-white/10\", \"backdrop-blur-3xl backdrop-brightness-90 backdrop-saturate-150\", \"ring ring-white/5 ring-inset shadow-sm shadow-black/15\", \"after:absolute after:inset-0 after:ring after:rounded-[inherit] after:ring-black/15 after:pointer-events-none after:z-10\", \"[@media(prefers-reduced-transparency:reduce)]:bg-black/70 [@media(prefers-reduced-transparency:reduce)]:ring-black [@media(prefers-reduced-transparency:reduce)]:after:ring-white/20\", \"contrast-more:bg-black/90 contrast-more:ring-black contrast-more:after:ring-white/20\");\nconst icon = cn(\"block [grid-area:1/1] size-4.5 shrink-0\", \"drop-shadow-[0_1px_0_var(--tw-drop-shadow-color)] drop-shadow-black/25\", \"transition-discrete transition-[display,opacity] duration-150 ease-out\");\nconst iconHidden = \"hidden opacity-0\";\nconst iconFlipped = \"[scale:-1_1]\";\nconst iconContainer = \"relative\";\nconst button = {\n\tbase: cn(\"items-center justify-center shrink-0 border-none cursor-pointer select-none text-center\", \"font-medium\", \"outline-2 outline-transparent -outline-offset-2\", \"transition-[background-color,color,outline-offset] duration-150 ease-out\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\", \"focus-visible:outline-blue-500 focus-visible:outline-offset-2\"),\n\ticon: cn(\"grid w-[2.125rem] aspect-square bg-transparent rounded-full\", \"text-white/90\", \"text-shadow-2xs text-shadow-black/25\", \"hover:bg-white/10 hover:text-white hover:no-underline\", \"focus-visible:bg-white/10 focus-visible:text-white\", \"aria-expanded:bg-white/10 aria-expanded:text-white\"),\n\tdefault: cn(\"flex py-2 px-4 bg-white rounded-full\", \"text-black\")\n};\nconst slider = {\n\troot: cn(\"group/slider relative flex flex-1 items-center justify-center rounded-full outline-none\", \"data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5\", \"data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-20\"),\n\ttrack: cn(\"relative isolate overflow-hidden bg-white/20 rounded-[inherit]\", \"shadow-[0_0_0_1px_oklch(0_0_0/0.05)] select-none\", \"data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-1\", \"data-[orientation=vertical]:w-1 data-[orientation=vertical]:h-full\"),\n\tfill: {\n\t\tbase: \"absolute rounded-[inherit] pointer-events-none\",\n\t\tfill: cn(\"bg-white\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:w-(--media-slider-fill)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:h-(--media-slider-fill)\"),\n\t\tbuffer: cn(\"bg-white/20 duration-250 ease-out\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)\")\n\t},\n\tthumb: {\n\t\tbase: cn(\"z-10 absolute -translate-x-1/2 -translate-y-1/2\", \"bg-white rounded-full\", \"ring ring-black/10 shadow-sm shadow-black/15\", \"transition-[opacity,height,width,outline-offset] duration-150 ease-out select-none\", \"outline-2 outline-transparent -outline-offset-2\", \"focus-visible:outline-blue-500 focus-visible:outline-offset-2\", \"data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill)\", \"data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill))]\"),\n\t\tpersistent: \"size-3\",\n\t\tinteractive: cn(\"size-2.5\", \"opacity-0 focus-visible:opacity-100 group-hover/slider:opacity-100\", \"group-active/slider:size-3\")\n\t}\n};\nconst root = cn(\"block relative isolate overflow-clip @container/media-root\", \"rounded-(--media-border-radius,2rem) bg-black\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased\", \"**:box-border **:m-0\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\", \"before:absolute before:pointer-events-none before:rounded-[inherit] before:z-10\", \"before:inset-px before:ring-1 before:ring-inset before:ring-white/15\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/10\", \"[&>video]:block [&>video]:w-full [&>video]:h-full [&>video]:rounded-[inherit]\", \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", \"[&_video::-webkit-media-text-track-container]:transition-transform\", \"[&_video::-webkit-media-text-track-container]:duration-150\", \"[&_video::-webkit-media-text-track-container]:ease-out\", \"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\", \"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\", \"[&_video::-webkit-media-text-track-container]:scale-98\", \"[&_video::-webkit-media-text-track-container]:z-1\", \"[&_video::-webkit-media-text-track-container]:font-[inherit]\", \"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\", \"[&:fullscreen]:rounded-none\");\nconst controls = cn(\"peer/controls\", surface, \"absolute @container/media-controls bottom-3 inset-x-3\", \"p-[0.175rem] flex items-center gap-[0.075rem]\", \"text-white rounded-full z-10\", \"will-change-[scale,transform,filter,opacity]\", \"transition-[scale,transform,filter,opacity] ease-out\", \"delay-0 duration-100 origin-bottom\", \"not-data-visible:pointer-events-none not-data-visible:blur-sm\", \"not-data-visible:scale-90 not-data-visible:opacity-0\", \"not-data-visible:delay-500 not-data-visible:duration-300\", \"motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:blur-none\", \"motion-reduce:not-data-visible:scale-100\", \"@2xl/media-root:p-1 @2xl/media-root:gap-0.5\");\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/50 via-black/30 to-transparent\", \"backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-300 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-visible/error:opacity-100\", \"peer-data-visible/error:duration-150\", \"peer-data-visible/error:delay-0\", \"peer-data-visible/error:backdrop-blur-sm\", \"motion-reduce:duration-100\");\nconst bufferingIndicator = {\n\troot: \"absolute inset-0 hidden items-center justify-center pointer-events-none z-10 text-white data-visible:flex\",\n\tcontainer: cn(\"p-1 rounded-full\", surface)\n};\nconst error = {\n\troot: \"peer/error group/error absolute inset-0 z-20 items-center justify-center pointer-events-none hidden data-[visible]:flex\",\n\tdialog: cn(\"hidden flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white text-sm pointer-events-auto\", \"group-data-visible/error:flex\", \"transition-[display,opacity,scale,transform] duration-500 delay-100 transition-discrete\", \"starting:opacity-0 starting:scale-50\", \"ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]\", surface),\n\tcontent: \"flex flex-col gap-2 px-2 pt-2 pb-1.5\",\n\ttitle: \"font-semibold leading-tight\",\n\tdescription: \"opacity-70\",\n\tactions: \"flex gap-2 *:flex-1\"\n};\nconst time = {\n\tgroup: \"@container/media-time flex items-center flex-1 gap-3 px-2\",\n\tcurrent: \"hidden @2xs/media-time:block text-shadow-2xs text-shadow-black/25 tabular-nums\",\n\tduration: \"text-shadow-2xs text-shadow-black/25 tabular-nums\"\n};\nconst popup = {\n\tbase: cn(\"m-0 border-0 [--media-popover-side-offset:0.5rem]\", surface, \"opacity-100 scale-100 origin-bottom blur-none\", \"transition-[transform,scale,opacity,filter] duration-200\", \"data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm\", \"data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm\", \"data-instant:duration-0\"),\n\tvolume: \"py-2.5 px-1 rounded-full\"\n};\nconst seek = {\n\tbutton: \"@max-md/media-controls:hidden\",\n\tlabel: \"text-[0.75em] font-[480] tabular-nums\",\n\tlabelForward: \"absolute -right-px -bottom-0.75\",\n\tlabelBackward: \"absolute -left-px -bottom-0.75\"\n};\nconst playbackRate = { button: `after:content-[attr(data-rate)_'×'] after:w-[4ch] after:tabular-nums` };\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t},\n\tfullscreen: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100\"\n\t},\n\tcaptions: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-active:block group-data-active:opacity-100\"\n\t}\n};\nconst captions = {\n\troot: cn(\"absolute z-20 pointer-events-none text-balance text-base\", \"inset-x-4 bottom-6\", \"transition-transform duration-150 ease-out delay-600\", \"motion-reduce:duration-50\", \"@xs/media-root:text-2xl\", \"@3xl/media-root:text-3xl\", \"@7xl/media-root:text-4xl\", \"peer-data-visible/controls:-translate-y-12 peer-data-visible/controls:delay-25\"),\n\tcontainer: \"max-w-[42ch] mx-auto text-center flex flex-col items-center\",\n\tcue: cn(\"block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2\", \"[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]\", \"contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70\", \"*:inline\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, captions, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, playbackRate, popup, root, seek, slider, time };\n//# sourceMappingURL=default.tailwind.js.map"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,eAAe,kEAAkE,0DAA0D,4HAA4H,wLAAwL,uFAAuF;AACziB,MAAM,OAAO,GAAG,2CAA2C,0EAA0E,yEAAyE;AAE9M,MAAM,cAAc;AACpB,MAAM,gBAAgB;AACtB,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,eAAe,mDAAmD,4EAA4E,sEAAsE,gEAAgE;CACxX,MAAM,GAAG,+DAA+D,iBAAiB,wCAAwC,yDAAyD,sDAAsD,qDAAqD;CACrS,SAAS,GAAG,wCAAwC,aAAa;CACjE;AACD,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,iHAAiH,mEAAmE;CACxR,OAAO,GAAG,kEAAkE,oDAAoD,0EAA0E,qEAAqE;CAC/Q,MAAM;EACL,MAAM;EACN,MAAM,GAAG,YAAY,gFAAgF,yDAAyD,8EAA8E,sDAAsD;EAClS,QAAQ,GAAG,qCAAqC,gFAAgF,4GAA4G,8EAA8E,wGAAwG;EACla;CACD,OAAO;EACN,MAAM,GAAG,mDAAmD,yBAAyB,gDAAgD,sFAAsF,mDAAmD,iEAAiE,kGAAkG,6GAA6G;EAC9hB,YAAY;EACZ,aAAa,GAAG,YAAY,sEAAsE,6BAA6B;EAC/H;CACD;AACD,MAAM,OAAO,GAAG,8DAA8D,iDAAiD,uHAAuH,wBAAwB,6BAA6B,iDAAiD,mFAAmF,wEAAwE,+EAA+E,mEAAmE,iFAAiF,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,sEAAsE,8DAA8D,0DAA0D,qFAAqF,uFAAuF,0DAA0D,qDAAqD,gEAAgE,2EAA2E,8BAA8B;AACvyD,MAAM,WAAW,GAAG,iBAAiB,SAAS,yDAAyD,iDAAiD,gCAAgC,gDAAgD,wDAAwD,sCAAsC,iEAAiE,wDAAwD,4DAA4D,+CAA+C,4CAA4C,4CAA4C,8CAA8C;AAChrB,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,4DAA4D,mEAAmE,iDAAiD,0BAA0B,0CAA0C,2CAA2C,sCAAsC,uCAAuC,wCAAwC,mCAAmC,4CAA4C,6BAA6B;AACvnB,MAAM,qBAAqB;CAC1B,MAAM;CACN,WAAW,GAAG,oBAAoB,QAAQ;CAC1C;AACD,MAAM,QAAQ;CACb,MAAM;CACN,QAAQ,GAAG,+FAA+F,iCAAiC,2FAA2F,wCAAwC,wGAAwG,QAAQ;CAC9X,SAAS;CACT,OAAO;CACP,aAAa;CACb,SAAS;CACT;AACD,MAAM,OAAO;CACZ,OAAO;CACP,SAAS;CACT,UAAU;CACV;AACD,MAAM,QAAQ;CACb,MAAM,GAAG,qDAAqD,SAAS,iDAAiD,4DAA4D,yFAAyF,mFAAmF,0BAA0B;CAC1X,QAAQ;CACR;AACD,MAAM,OAAO;CACZ,QAAQ;CACR,OAAO;CACP,cAAc;CACd,eAAe;CACf;AACD,MAAM,eAAe,EAAE,QAAQ,wEAAwE;AACvG,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD;AACD,MAAM,WAAW;CAChB,MAAM,GAAG,4DAA4D,sBAAsB,wDAAwD,6BAA6B,2BAA2B,4BAA4B,4BAA4B,iFAAiF;CACpV,WAAW;CACX,KAAK,GAAG,4EAA4E,uEAAuE,yGAAyG,WAAW;CAC/Q"}

package/dist/dev/skins/dist/default/video/minimal.tailwind.js

@@ -0,0 +1,86 @@
+import { cn } from "@videojs/utils/style";
+
+//#region ../skins/dist/default/video/minimal.tailwind.js
+const icon = cn("block [grid-area:1/1] size-4.5", "drop-shadow-[0_1px_0_var(--tw-drop-shadow-color)] drop-shadow-black/25", "transition-discrete transition-[display,opacity] duration-150 ease-out");
+const iconFlipped = "[scale:-1_1]";
+const iconContainer = "relative";
+const button = {
+	base: cn("items-center justify-center shrink-0 border-none cursor-pointer select-none text-center", "outline-2 outline-transparent -outline-offset-2", "font-medium", "transition-[background-color,color,outline-offset] duration-150 ease-out", "focus-visible:outline-white focus-visible:outline-offset-2", "disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale"),
+	icon: cn("grid w-[2.375rem] aspect-square bg-transparent rounded-md", "text-white", "hover:text-white/80 hover:no-underline", "focus-visible:text-white/80", "aria-expanded:text-white/80"),
+	default: cn("flex py-2 px-4 bg-white rounded-lg", "text-black")
+};
+const slider = {
+	root: cn("group/slider relative flex flex-1 items-center justify-center rounded-full outline-none", "data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5", "data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-[4.5rem]"),
+	track: cn("relative isolate overflow-hidden bg-white/20 rounded-[inherit]", "shadow-[0_0_0_1px_oklch(0_0_0/0.05)] select-none", "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75", "data-[orientation=vertical]:w-0.75 data-[orientation=vertical]:h-full"),
+	fill: {
+		base: "absolute rounded-[inherit] pointer-events-none",
+		fill: cn("bg-white", "data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0", "data-[orientation=horizontal]:w-(--media-slider-fill,0)", "data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0", "data-[orientation=vertical]:h-(--media-slider-fill,0)"),
+		buffer: cn("bg-white/20 duration-250 ease-out", "data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0", "data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer,0)", "data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0", "data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)")
+	},
+	thumb: {
+		base: cn("z-10 absolute size-3 -translate-x-1/2 -translate-y-1/2", "bg-white rounded-full", "ring ring-black/10 shadow-sm shadow-black/15", "transition-[opacity,scale,outline-offset] duration-150 ease-out select-none", "outline-2 outline-transparent -outline-offset-2", "focus-visible:outline-white focus-visible:outline-offset-2", "data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)", "data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]"),
+		interactive: cn("opacity-0 scale-70 origin-center", "group-hover/slider:opacity-100 group-hover/slider:scale-100", "group-focus-within/slider:opacity-100 group-focus-within/slider:scale-100")
+	}
+};
+const root = cn("block relative isolate overflow-clip @container/media-root", "rounded-(--media-border-radius,0.75rem) bg-black", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased", "**:box-border **:m-0", "[&_button]:font-[inherit]", "motion-safe:[interpolate-size:allow-keywords]", "after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10", "after:inset-0 after:ring-1 after:ring-inset after:ring-black/15", "dark:after:ring-white/15", "[&>video]:block [&>video]:w-full [&>video]:h-full [&>video]:rounded-[inherit]", "[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]", "[&>img]:object-cover [&>img]:pointer-events-none", "[&>img]:transition-opacity [&>img]:duration-250", "[&>img:not([data-visible])]:opacity-0", "[--media-caption-track-delay:600ms]", "[--media-caption-track-y:-0.5rem]", "has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]", "[&_video::-webkit-media-text-track-container]:transition-transform", "[&_video::-webkit-media-text-track-container]:duration-150", "[&_video::-webkit-media-text-track-container]:ease-out", "[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)", "[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)", "[&_video::-webkit-media-text-track-container]:scale-98", "[&_video::-webkit-media-text-track-container]:z-1", "[&_video::-webkit-media-text-track-container]:font-[inherit]", "motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50", "[&:fullscreen]:rounded-none");
+const controls = cn("peer/controls", "absolute @container/media-controls bottom-0 inset-x-0", "pt-8 px-1.5 pb-1.5 flex items-center gap-2", "text-white z-10", "will-change-[translate,filter,opacity]", "transition-[translate,filter,opacity] ease-out", "delay-0 duration-75", "not-data-visible:opacity-0 not-data-visible:translate-y-full", "not-data-visible:blur-sm not-data-visible:pointer-events-none", "not-data-visible:delay-500 not-data-visible:duration-500", "motion-reduce:not-data-visible:duration-100", "motion-reduce:not-data-visible:translate-y-0", "motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100", "@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3", "@sm/media-root:gap-3.5");
+const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent", "backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90", "transition-[opacity,backdrop-filter] ease-out", "duration-500 delay-500", "peer-data-visible/controls:opacity-100", "peer-data-visible/controls:duration-150", "peer-data-visible/controls:delay-0", "peer-data-visible/error:opacity-100", "peer-data-visible/error:duration-150", "peer-data-visible/error:delay-0", "peer-data-visible/error:backdrop-blur-sm", "motion-reduce:duration-100");
+const bufferingIndicator = "absolute inset-0 hidden items-center justify-center pointer-events-none z-10 text-white data-visible:flex";
+const error = {
+	root: "peer/error group/error absolute inset-0 z-20 items-center justify-center pointer-events-none hidden data-visible:flex",
+	dialog: cn("hidden flex-col gap-3 max-w-64 p-4 text-white text-sm pointer-events-auto", "group-data-visible/error:flex", "text-shadow-2xs text-shadow-black/50", "transition-[display,opacity,scale,transform] duration-500 delay-100 transition-discrete", "starting:opacity-0 starting:scale-50", "ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]"),
+	content: "flex flex-col gap-2 py-1.5",
+	title: "font-semibold leading-tight",
+	actions: "flex gap-2 *:flex-1"
+};
+const buttonGroup = cn("flex items-center gap-[0.075rem]", "@2xl/media-root:gap-0.5");
+const time = {
+	group: "flex items-center gap-1",
+	current: cn("hidden tabular-nums text-shadow-2xs text-shadow-black/25", "@md/media-controls:inline"),
+	separator: cn("hidden", "@md/media-controls:inline @md/media-controls:text-white/50"),
+	duration: cn("tabular-nums text-shadow-2xs text-shadow-black/25", "@md/media-controls:text-white/50"),
+	controls: cn("flex flex-row-reverse items-center flex-1 gap-3", "@md/media-controls:flex-row")
+};
+const popup = {
+	base: cn("m-0 border-0 bg-transparent [--media-popover-side-offset:0.5rem]", "opacity-100 scale-100 origin-bottom blur-none", "transition-[transform,scale,opacity,filter] duration-200", "data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm", "data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm", "data-instant:duration-0"),
+	volume: "p-1"
+};
+const seek = {
+	button: "@max-md/media-controls:hidden",
+	label: "text-[0.75em] font-[480] tabular-nums",
+	labelForward: "absolute -right-px -bottom-0.75",
+	labelBackward: "absolute -left-px -bottom-0.75"
+};
+const iconState = {
+	play: {
+		button: "group",
+		restart: "hidden opacity-0 group-data-ended:block group-data-ended:opacity-100",
+		play: "hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100",
+		pause: "hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100"
+	},
+	mute: {
+		button: "group",
+		volumeOff: "hidden opacity-0 group-data-muted:block group-data-muted:opacity-100",
+		volumeLow: "hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100",
+		volumeHigh: "hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100"
+	},
+	fullscreen: {
+		button: "group",
+		enter: "hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100",
+		exit: "hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100"
+	},
+	captions: {
+		button: "group",
+		off: "hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100",
+		on: "hidden opacity-0 group-data-active:block group-data-active:opacity-100"
+	}
+};
+const captions = {
+	root: cn("absolute z-20 pointer-events-none text-balance text-base", "inset-x-4 bottom-6", "transition-transform duration-150 ease-out delay-600", "motion-reduce:duration-50", "@xs/media-root:text-2xl", "@3xl/media-root:text-3xl", "@7xl/media-root:text-4xl", "peer-data-visible/controls:-translate-y-10 peer-data-visible/controls:delay-25"),
+	container: "max-w-[42ch] mx-auto text-center flex flex-col items-center",
+	cue: cn("block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2", "[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]", "contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70", "*:inline")
+};
+
+//#endregion
+export { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconState, overlay, popup, root, seek, slider, time };
+//# sourceMappingURL=minimal.tailwind.js.map

package/dist/dev/skins/dist/default/video/minimal.tailwind.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"minimal.tailwind.js","names":[],"sources":["../../../../../../../skins/dist/default/video/minimal.tailwind.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/video/minimal.tailwind.ts\nconst icon = cn(\"block [grid-area:1/1] size-4.5\", \"drop-shadow-[0_1px_0_var(--tw-drop-shadow-color)] drop-shadow-black/25\", \"transition-discrete transition-[display,opacity] duration-150 ease-out\");\nconst iconHidden = \"hidden opacity-0\";\nconst iconFlipped = \"[scale:-1_1]\";\nconst iconContainer = \"relative\";\nconst button = {\n\tbase: cn(\"items-center justify-center shrink-0 border-none cursor-pointer select-none text-center\", \"outline-2 outline-transparent -outline-offset-2\", \"font-medium\", \"transition-[background-color,color,outline-offset] duration-150 ease-out\", \"focus-visible:outline-white focus-visible:outline-offset-2\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\"),\n\ticon: cn(\"grid w-[2.375rem] aspect-square bg-transparent rounded-md\", \"text-white\", \"hover:text-white/80 hover:no-underline\", \"focus-visible:text-white/80\", \"aria-expanded:text-white/80\"),\n\tdefault: cn(\"flex py-2 px-4 bg-white rounded-lg\", \"text-black\")\n};\nconst slider = {\n\troot: cn(\"group/slider relative flex flex-1 items-center justify-center rounded-full outline-none\", \"data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5\", \"data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-[4.5rem]\"),\n\ttrack: cn(\"relative isolate overflow-hidden bg-white/20 rounded-[inherit]\", \"shadow-[0_0_0_1px_oklch(0_0_0/0.05)] select-none\", \"data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75\", \"data-[orientation=vertical]:w-0.75 data-[orientation=vertical]:h-full\"),\n\tfill: {\n\t\tbase: \"absolute rounded-[inherit] pointer-events-none\",\n\t\tfill: cn(\"bg-white\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:w-(--media-slider-fill,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:h-(--media-slider-fill,0)\"),\n\t\tbuffer: cn(\"bg-white/20 duration-250 ease-out\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)\")\n\t},\n\tthumb: {\n\t\tbase: cn(\"z-10 absolute size-3 -translate-x-1/2 -translate-y-1/2\", \"bg-white rounded-full\", \"ring ring-black/10 shadow-sm shadow-black/15\", \"transition-[opacity,scale,outline-offset] duration-150 ease-out select-none\", \"outline-2 outline-transparent -outline-offset-2\", \"focus-visible:outline-white focus-visible:outline-offset-2\", \"data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)\", \"data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]\"),\n\t\tinteractive: cn(\"opacity-0 scale-70 origin-center\", \"group-hover/slider:opacity-100 group-hover/slider:scale-100\", \"group-focus-within/slider:opacity-100 group-focus-within/slider:scale-100\")\n\t}\n};\nconst root = cn(\"block relative isolate overflow-clip @container/media-root\", \"rounded-(--media-border-radius,0.75rem) bg-black\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased\", \"**:box-border **:m-0\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/15\", \"dark:after:ring-white/15\", \"[&>video]:block [&>video]:w-full [&>video]:h-full [&>video]:rounded-[inherit]\", \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", \"[&_video::-webkit-media-text-track-container]:transition-transform\", \"[&_video::-webkit-media-text-track-container]:duration-150\", \"[&_video::-webkit-media-text-track-container]:ease-out\", \"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\", \"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\", \"[&_video::-webkit-media-text-track-container]:scale-98\", \"[&_video::-webkit-media-text-track-container]:z-1\", \"[&_video::-webkit-media-text-track-container]:font-[inherit]\", \"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\", \"[&:fullscreen]:rounded-none\");\nconst controls = cn(\"peer/controls\", \"absolute @container/media-controls bottom-0 inset-x-0\", \"pt-8 px-1.5 pb-1.5 flex items-center gap-2\", \"text-white z-10\", \"will-change-[translate,filter,opacity]\", \"transition-[translate,filter,opacity] ease-out\", \"delay-0 duration-75\", \"not-data-visible:opacity-0 not-data-visible:translate-y-full\", \"not-data-visible:blur-sm not-data-visible:pointer-events-none\", \"not-data-visible:delay-500 not-data-visible:duration-500\", \"motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:translate-y-0\", \"motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100\", \"@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3\", \"@sm/media-root:gap-3.5\");\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent\", \"backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-500 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-visible/error:opacity-100\", \"peer-data-visible/error:duration-150\", \"peer-data-visible/error:delay-0\", \"peer-data-visible/error:backdrop-blur-sm\", \"motion-reduce:duration-100\");\nconst bufferingIndicator = \"absolute inset-0 hidden items-center justify-center pointer-events-none z-10 text-white data-visible:flex\";\nconst error = {\n\troot: \"peer/error group/error absolute inset-0 z-20 items-center justify-center pointer-events-none hidden data-visible:flex\",\n\tdialog: cn(\"hidden flex-col gap-3 max-w-64 p-4 text-white text-sm pointer-events-auto\", \"group-data-visible/error:flex\", \"text-shadow-2xs text-shadow-black/50\", \"transition-[display,opacity,scale,transform] duration-500 delay-100 transition-discrete\", \"starting:opacity-0 starting:scale-50\", \"ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]\"),\n\tcontent: \"flex flex-col gap-2 py-1.5\",\n\ttitle: \"font-semibold leading-tight\",\n\tactions: \"flex gap-2 *:flex-1\"\n};\nconst buttonGroup = cn(\"flex items-center gap-[0.075rem]\", \"@2xl/media-root:gap-0.5\");\nconst time = {\n\tgroup: \"flex items-center gap-1\",\n\tcurrent: cn(\"hidden tabular-nums text-shadow-2xs text-shadow-black/25\", \"@md/media-controls:inline\"),\n\tseparator: cn(\"hidden\", \"@md/media-controls:inline @md/media-controls:text-white/50\"),\n\tduration: cn(\"tabular-nums text-shadow-2xs text-shadow-black/25\", \"@md/media-controls:text-white/50\"),\n\tcontrols: cn(\"flex flex-row-reverse items-center flex-1 gap-3\", \"@md/media-controls:flex-row\")\n};\nconst popup = {\n\tbase: cn(\"m-0 border-0 bg-transparent [--media-popover-side-offset:0.5rem]\", \"opacity-100 scale-100 origin-bottom blur-none\", \"transition-[transform,scale,opacity,filter] duration-200\", \"data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm\", \"data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm\", \"data-instant:duration-0\"),\n\tvolume: \"p-1\"\n};\nconst seek = {\n\tbutton: \"@max-md/media-controls:hidden\",\n\tlabel: \"text-[0.75em] font-[480] tabular-nums\",\n\tlabelForward: \"absolute -right-px -bottom-0.75\",\n\tlabelBackward: \"absolute -left-px -bottom-0.75\"\n};\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t},\n\tfullscreen: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100\"\n\t},\n\tcaptions: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-active:block group-data-active:opacity-100\"\n\t}\n};\nconst captions = {\n\troot: cn(\"absolute z-20 pointer-events-none text-balance text-base\", \"inset-x-4 bottom-6\", \"transition-transform duration-150 ease-out delay-600\", \"motion-reduce:duration-50\", \"@xs/media-root:text-2xl\", \"@3xl/media-root:text-3xl\", \"@7xl/media-root:text-4xl\", \"peer-data-visible/controls:-translate-y-10 peer-data-visible/controls:delay-25\"),\n\tcontainer: \"max-w-[42ch] mx-auto text-center flex flex-col items-center\",\n\tcue: cn(\"block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2\", \"[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]\", \"contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70\", \"*:inline\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, captions, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, popup, root, seek, slider, time };\n//# sourceMappingURL=minimal.tailwind.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,kCAAkC,0EAA0E,yEAAyE;AAErM,MAAM,cAAc;AACpB,MAAM,gBAAgB;AACtB,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,mDAAmD,eAAe,4EAA4E,8DAA8D,qEAAqE;CACrX,MAAM,GAAG,6DAA6D,cAAc,0CAA0C,+BAA+B,8BAA8B;CAC3L,SAAS,GAAG,sCAAsC,aAAa;CAC/D;AACD,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,iHAAiH,yEAAyE;CAC9R,OAAO,GAAG,kEAAkE,oDAAoD,6EAA6E,wEAAwE;CACrR,MAAM;EACL,MAAM;EACN,MAAM,GAAG,YAAY,gFAAgF,2DAA2D,8EAA8E,wDAAwD;EACtS,QAAQ,GAAG,qCAAqC,gFAAgF,8GAA8G,8EAA8E,wGAAwG;EACpa;CACD,OAAO;EACN,MAAM,GAAG,0DAA0D,yBAAyB,gDAAgD,+EAA+E,mDAAmD,8DAA8D,oGAAoG,+GAA+G;EAC/hB,aAAa,GAAG,oCAAoC,+DAA+D,4EAA4E;EAC/L;CACD;AACD,MAAM,OAAO,GAAG,8DAA8D,oDAAoD,uHAAuH,wBAAwB,6BAA6B,iDAAiD,+EAA+E,mEAAmE,4BAA4B,iFAAiF,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,sEAAsE,8DAA8D,0DAA0D,qFAAqF,uFAAuF,0DAA0D,qDAAqD,gEAAgE,2EAA2E,8BAA8B;AAC3qD,MAAM,WAAW,GAAG,iBAAiB,yDAAyD,8CAA8C,mBAAmB,0CAA0C,kDAAkD,uBAAuB,gEAAgE,iEAAiE,4DAA4D,+CAA+C,gDAAgD,qFAAqF,gEAAgE,yBAAyB;AAC5tB,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,yEAAyE,mEAAmE,iDAAiD,0BAA0B,0CAA0C,2CAA2C,sCAAsC,uCAAuC,wCAAwC,mCAAmC,4CAA4C,6BAA6B;AACpoB,MAAM,qBAAqB;AAC3B,MAAM,QAAQ;CACb,MAAM;CACN,QAAQ,GAAG,6EAA6E,iCAAiC,wCAAwC,2FAA2F,wCAAwC,uGAAuG;CAC3Y,SAAS;CACT,OAAO;CACP,SAAS;CACT;AACD,MAAM,cAAc,GAAG,oCAAoC,0BAA0B;AACrF,MAAM,OAAO;CACZ,OAAO;CACP,SAAS,GAAG,4DAA4D,4BAA4B;CACpG,WAAW,GAAG,UAAU,6DAA6D;CACrF,UAAU,GAAG,qDAAqD,mCAAmC;CACrG,UAAU,GAAG,mDAAmD,8BAA8B;CAC9F;AACD,MAAM,QAAQ;CACb,MAAM,GAAG,oEAAoE,iDAAiD,4DAA4D,yFAAyF,mFAAmF,0BAA0B;CAChY,QAAQ;CACR;AACD,MAAM,OAAO;CACZ,QAAQ;CACR,OAAO;CACP,cAAc;CACd,eAAe;CACf;AACD,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD;AACD,MAAM,WAAW;CAChB,MAAM,GAAG,4DAA4D,sBAAsB,wDAAwD,6BAA6B,2BAA2B,4BAA4B,4BAA4B,iFAAiF;CACpV,WAAW;CACX,KAAK,GAAG,4EAA4E,uEAAuE,yGAAyG,WAAW;CAC/Q"}

package/dist/dev/store/container-mixin.d.ts

@@ -1,5 +1,5 @@
-import { PlayerContext } from "../player/context.js";
 import { MediaElementConstructor } from "../ui/media-element.js";
+import { PlayerContext } from "../player/context.js";
 import { PlayerConsumerConstructor } from "./types.js";
 import { PlayerStore } from "@videojs/core/dom";
 

package/dist/dev/store/container-mixin.js

@@ -12,13 +12,20 @@ function createContainerMixin(context) {
 		class PlayerContainerElement extends BaseClass {
 			#detach = noop;
 			#observer = null;
-			#consumer = new ContextConsumer(this, {
-				context,
-				callback: () => this.#attachMedia(),
-				subscribe: true
-			});
+			#contextStore = null;
+			constructor(...args) {
+				super(...args);
+				new ContextConsumer(this, {
+					context,
+					callback: (value) => {
+						this.#contextStore = value ?? null;
+						this.#attachMedia();
+					},
+					subscribe: true
+				});
+			}
 			get store() {
-				return this.#consumer.value ?? null;
+				return this.#contextStore;
 			}
 			connectedCallback() {
 				super.connectedCallback();
@@ -38,7 +45,7 @@ function createContainerMixin(context) {
 				this.#detach();
 			}
 			#attachMedia() {
-				const store = this.#consumer.value ?? this.store;
+				const store = this.#contextStore ?? this.store;
 				if (!store) return;
 				const media = this.querySelector("video, audio");
 				if (!media) {