@videojs/html 10.0.0-rc.4 → 10.0.0

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

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

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

@@ -3,10 +3,10 @@ import { PlayerElementConstructor } from "../store/types.js";
 import { PlayerController } from "./controller.js";
 import { AnyPlayerFeature, AudioFeatures, AudioPlayerStore, PlayerStore, VideoFeatures, VideoPlayerStore } from "@videojs/core/dom";
 //#region src/player/create-player.d.ts
-interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {
+export interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {
   features: Features;
 }
-interface CreatePlayerResult<Store extends PlayerStore> {
+export interface CreatePlayerResult<Store extends PlayerStore> {
   /** Configured player element class that owns the store and attachment lifecycle. */
   PlayerElement: PlayerElementConstructor<Store>;
   /** Player controller bound to this player's context. */
@@ -37,21 +37,20 @@ interface CreatePlayerResult<Store extends PlayerStore> {
  * @param config - Player configuration with features.
  * @label Video
  */
-declare function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;
+export declare function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;
 /**
  * Creates a typed HTML audio player class and bound controller.
  *
  * @param config - Player configuration with features.
  * @label Audio
  */
-declare function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;
+export declare function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;
 /**
  * Creates a typed HTML player class with custom features.
  *
  * @param config - Player configuration with features.
  * @label Generic
  */
-declare function createPlayer<const Features extends AnyPlayerFeature[]>(config: CreatePlayerConfig<Features>): CreatePlayerResult<PlayerStore<Features>>;
+export declare function createPlayer<const Features extends AnyPlayerFeature[]>(config: CreatePlayerConfig<Features>): CreatePlayerResult<PlayerStore<Features>>;
 //#endregion
-export { CreatePlayerConfig, CreatePlayerResult, createPlayer };
 //# sourceMappingURL=create-player.d.ts.map

package/dist/dev/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/dev/player/create-player.js.map

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

package/dist/dev/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
@@ -29,15 +29,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);
@@ -79,12 +83,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);
@@ -101,13 +113,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();
@@ -153,8 +168,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;
@@ -163,16 +177,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/dev/player/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":["#syncNativeMedia","#mediaRegistrations","#syncMedia","#containerRegistrations","#syncContainer","#media","#registerMedia","#container","#registerContainer","#store","#connected","#syncInitialConfig","#playerProvider","#publishMedia","#publishContainer","#observer","#tryAttach","#detachStore","#nativeMedia","#mediaProvider","#containerProvider","#detach","#configuredStore"],"sources":["../../../src/player/element.ts"],"sourcesContent":["import {\n  type MediaContainer,\n  type PlayerFeatureConfig,\n  type PlayerStore,\n  type PlayerTarget,\n  setPlayerConfigValue,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport type { Media } from '@videojs/media/dom';\nimport { isNull } from '@videojs/utils/predicate';\nimport { camelCase, kebabCase } from '@videojs/utils/string';\n\nimport type { PlayerElementConstructor } from '../store/types';\nimport { UIElement } from '../ui/ui-element';\nimport type { ContainerContext, MediaContext, PlayerContext } from './context';\n\nexport interface CreatePlayerElementOptions<Store extends PlayerStore> {\n  playerContext: PlayerContext<Store>;\n  mediaContext: MediaContext;\n  containerContext: ContainerContext;\n  factory: () => Store;\n  config: PlayerFeatureConfig;\n}\n\ninterface Registration<Value> {\n  value: Value;\n}\n\ninterface ConfigInput {\n  property: string;\n  attribute: string;\n  entry: PlayerFeatureConfig[string];\n}\n\nfunction resolveInputs(config: PlayerFeatureConfig): ConfigInput[] {\n  return Object.entries(config).map(([key, entry]) => {\n    const declared = entry.html?.attribute;\n    const attribute = declared ?? kebabCase(key);\n\n    if (__DEV__ && declared && declared !== kebabCase(declared)) {\n      console.warn(`[vjs-html] config html.attribute \"${declared}\" is not kebab-case and will never match`);\n    }\n\n    return { property: camelCase(attribute), attribute, entry };\n  });\n}\n\n/** Creates a configured player element class that owns the store and attach lifecycle. */\nexport function createPlayerElement<Store extends PlayerStore>(\n  options: CreatePlayerElementOptions<Store>\n): PlayerElementConstructor<Store>;\nexport function createPlayerElement<Store extends PlayerStore>(\n  options: CreatePlayerElementOptions<Store>\n): typeof UIElement {\n  const inputs = resolveInputs(options.config);\n\n  class ConfiguredPlayerElement extends UIElement {\n    static properties = {\n      ...UIElement.properties,\n      ...Object.fromEntries(inputs.map(({ property, attribute }) => [property, { type: String, attribute }])),\n    } satisfies PropertyDeclarationMap;\n\n    #store: Store | null = options.factory();\n    #configuredStore: Store | null = null;\n    #detach: (() => void) | null = null;\n    #connected = false;\n    #media: Media | null = null;\n    #nativeMedia: HTMLMediaElement | null = null;\n    #container: MediaContainer | null = null;\n    #mediaRegistrations: Registration<Media>[] = [];\n    #containerRegistrations: Registration<MediaContainer>[] = [];\n    #observer = new MutationObserver(() => this.#syncNativeMedia());\n\n    #registerMedia = (media: Media): (() => void) => {\n      const registration = { value: media };\n\n      this.#mediaRegistrations.push(registration);\n      this.#syncMedia();\n\n      return () => {\n        const index = this.#mediaRegistrations.indexOf(registration);\n        if (index < 0) return;\n\n        this.#mediaRegistrations.splice(index, 1);\n        this.#syncNativeMedia();\n        this.#syncMedia();\n      };\n    };\n\n    #registerContainer = (container: MediaContainer): (() => void) => {\n      const registration = { value: container };\n\n      this.#containerRegistrations.push(registration);\n      this.#syncContainer();\n\n      return () => {\n        const index = this.#containerRegistrations.indexOf(registration);\n        if (index < 0) return;\n\n        this.#containerRegistrations.splice(index, 1);\n        this.#syncContainer();\n      };\n    };\n\n    #playerProvider = new ContextProvider(this, {\n      context: options.playerContext,\n      initialValue: this.store,\n    });\n\n    #mediaProvider = new ContextProvider(this, {\n      context: options.mediaContext,\n      initialValue: { media: this.#media, registerMedia: this.#registerMedia },\n    });\n\n    #containerProvider = new ContextProvider(this, {\n      context: options.containerContext,\n      initialValue: {\n        container: this.#container,\n        registerContainer: this.#registerContainer,\n      },\n    });\n\n    get store(): Store {\n      if (isNull(this.#store)) {\n        this.#store = options.factory();\n      }\n\n      return this.#store;\n    }\n\n    override connectedCallback(): void {\n      this.#connected = true;\n      super.connectedCallback();\n      this.#syncInitialConfig();\n      this.#playerProvider.setValue(this.store);\n      this.#publishMedia();\n      this.#publishContainer();\n      this.#observer.observe(this, { childList: true, subtree: true });\n      queueMicrotask(() => {\n        if (this.#connected) this.#syncNativeMedia();\n      });\n      this.#tryAttach();\n    }\n\n    override disconnectedCallback(): void {\n      this.#connected = false;\n      this.#observer.disconnect();\n      this.#detachStore();\n      super.disconnectedCallback();\n    }\n\n    override destroyCallback(): void {\n      this.#observer.disconnect();\n      this.#detachStore();\n      this.#store?.destroy();\n      this.#store = null;\n      super.destroyCallback();\n    }\n\n    protected override willUpdate(changed: PropertyValues): void {\n      super.willUpdate(changed);\n\n      for (const { property, entry } of inputs) {\n        if (!changed.has(property)) continue;\n\n        // SAFETY: `resolveInputs` derives properties installed by this class's static property map.\n        const configProperty = property as keyof this;\n\n        setPlayerConfigValue(this.store, entry, this[configProperty]);\n      }\n    }\n\n    #syncMedia(): void {\n      const registered = this.#mediaRegistrations.at(-1)?.value ?? null;\n      const media = registered ?? this.#nativeMedia;\n      if (this.#media === media) return;\n\n      this.#media = media;\n      this.#publishMedia();\n      this.#tryAttach();\n    }\n\n    #syncContainer(): void {\n      const container = this.#containerRegistrations.at(-1)?.value ?? null;\n      if (this.#container === container) return;\n\n      this.#container = container;\n      this.#publishContainer();\n      this.#tryAttach();\n    }\n\n    #syncNativeMedia(): void {\n      const media = this.querySelector<HTMLMediaElement>('video, audio');\n      if (this.#nativeMedia === media) return;\n\n      this.#nativeMedia = media;\n      this.#syncMedia();\n    }\n\n    #publishMedia(): void {\n      this.#mediaProvider.setValue({ media: this.#media, registerMedia: this.#registerMedia });\n    }\n\n    #publishContainer(): void {\n      this.#containerProvider.setValue({\n        container: this.#container,\n        registerContainer: this.#registerContainer,\n      });\n    }\n\n    #tryAttach(): void {\n      const store = this.#store;\n      if (!this.#connected || !store) return;\n\n      if (!this.#media) {\n        this.#detachStore();\n        return;\n      }\n\n      const target: PlayerTarget = {\n        media: this.#media,\n        container: this.#container,\n      };\n\n      const hasMediaChanged = store.target?.media !== target.media;\n      const hasContainerChanged = store.target?.container !== target.container;\n\n      if (hasMediaChanged || hasContainerChanged) {\n        this.#detachStore();\n        this.#detach = store.attach(target);\n      }\n    }\n\n    #detachStore(): void {\n      this.#detach?.();\n      this.#detach = null;\n    }\n\n    #syncInitialConfig(): void {\n      const store = this.store;\n      if (this.#configuredStore === store) return;\n\n      for (const { property, entry } of inputs) {\n        // SAFETY: `resolveInputs` derives properties installed by this class's static property map.\n        const configProperty = property as keyof this;\n\n        setPlayerConfigValue(store, entry, this[configProperty]);\n      }\n\n      this.#configuredStore = store;\n    }\n  }\n\n  return ConfiguredPlayerElement;\n}\n"],"mappings":"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"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../src/player/element.ts"],"sourcesContent":["import {\n  type MediaContainer,\n  type PlayerExtension,\n  PlayerExtensionCoordinator,\n  type PlayerFeatureConfig,\n  type PlayerStore,\n  type PlayerTarget,\n  setPlayerConfigValue,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider, ContextRoot } from '@videojs/element/context';\nimport type { Media } from '@videojs/media/dom';\nimport { isNull } from '@videojs/utils/predicate';\nimport { camelCase, kebabCase } from '@videojs/utils/string';\n\nimport type { PlayerElementConstructor } from '../store/types';\nimport { UIElement } from '../ui/ui-element';\nimport type { ContainerContext, ExtensionContext, MediaContext, PlayerContext } from './context';\n\nexport interface CreatePlayerElementOptions<Store extends PlayerStore> {\n  playerContext: PlayerContext<Store>;\n  mediaContext: MediaContext;\n  containerContext: ContainerContext;\n  extensionContext: ExtensionContext;\n  factory: () => Store;\n  config: PlayerFeatureConfig;\n}\n\ninterface Registration<Value> {\n  value: Value;\n}\n\ninterface ConfigInput {\n  property: string;\n  attribute: string;\n  entry: PlayerFeatureConfig[string];\n}\n\nfunction resolveInputs(config: PlayerFeatureConfig): ConfigInput[] {\n  return Object.entries(config).map(([key, entry]) => {\n    const declared = entry.html?.attribute;\n    const attribute = declared ?? kebabCase(key);\n\n    if (__DEV__ && declared && declared !== kebabCase(declared)) {\n      console.warn(`[vjs-html] config html.attribute \"${declared}\" is not kebab-case and will never match`);\n    }\n\n    return { property: camelCase(attribute), attribute, entry };\n  });\n}\n\n/** Creates a configured player element class that owns the store and attach lifecycle. */\nexport function createPlayerElement<Store extends PlayerStore>(\n  options: CreatePlayerElementOptions<Store>\n): PlayerElementConstructor<Store>;\nexport function createPlayerElement<Store extends PlayerStore>(\n  options: CreatePlayerElementOptions<Store>\n): typeof UIElement {\n  const inputs = resolveInputs(options.config);\n\n  class ConfiguredPlayerElement extends UIElement {\n    static properties = {\n      ...UIElement.properties,\n      ...Object.fromEntries(inputs.map(({ property, attribute }) => [property, { type: String, attribute }])),\n    } satisfies PropertyDeclarationMap;\n\n    #store: Store | null = options.factory();\n    readonly #contextRoot = new ContextRoot();\n    #configuredStore: Store | null = null;\n    #detach: (() => void) | null = null;\n    #connected = false;\n    #media: Media | null = null;\n    #nativeMedia: HTMLMediaElement | null = null;\n    #container: MediaContainer | null = null;\n    // The raw target the store is attached to; `store.target.media` may be the extensions' facade over it.\n    #attached: PlayerTarget | null = null;\n    #mediaRegistrations: Registration<Media>[] = [];\n    #containerRegistrations: Registration<MediaContainer>[] = [];\n    #observer = new MutationObserver(() => this.#syncNativeMedia());\n    #extensions = new PlayerExtensionCoordinator(() => this.#syncExtensions());\n\n    #registerExtension = (extension: PlayerExtension): (() => void) => this.#extensions.register(extension);\n\n    #registerMedia = (media: Media): (() => void) => {\n      const registration = { value: media };\n\n      this.#mediaRegistrations.push(registration);\n      this.#syncMedia();\n\n      return () => {\n        const index = this.#mediaRegistrations.indexOf(registration);\n        if (index < 0) return;\n\n        this.#mediaRegistrations.splice(index, 1);\n        this.#syncNativeMedia();\n        this.#syncMedia();\n      };\n    };\n\n    #registerContainer = (container: MediaContainer): (() => void) => {\n      const registration = { value: container };\n\n      this.#containerRegistrations.push(registration);\n      this.#syncContainer();\n\n      return () => {\n        const index = this.#containerRegistrations.indexOf(registration);\n        if (index < 0) return;\n\n        this.#containerRegistrations.splice(index, 1);\n        this.#syncContainer();\n      };\n    };\n\n    #playerProvider = new ContextProvider(this, {\n      context: options.playerContext,\n      initialValue: this.store,\n    });\n\n    #mediaProvider = new ContextProvider(this, {\n      context: options.mediaContext,\n      initialValue: { media: this.#media, registerMedia: this.#registerMedia },\n    });\n\n    #containerProvider = new ContextProvider(this, {\n      context: options.containerContext,\n      initialValue: {\n        container: this.#container,\n        registerContainer: this.#registerContainer,\n      },\n    });\n\n    constructor() {\n      super();\n      // Registers itself as a controller on this element; the value never changes, so nothing reads it back.\n      new ContextProvider(this, {\n        context: options.extensionContext,\n        initialValue: { registerExtension: this.#registerExtension },\n      });\n    }\n\n    get store(): Store {\n      if (isNull(this.#store)) {\n        this.#store = options.factory();\n      }\n\n      return this.#store;\n    }\n\n    override connectedCallback(): void {\n      this.#connected = true;\n      // Retry part subscriptions when their parent is registered later.\n      this.#contextRoot.attach(this);\n      super.connectedCallback();\n      this.#syncInitialConfig();\n      this.#playerProvider.setValue(this.store);\n      this.#publishMedia();\n      this.#publishContainer();\n      this.#observer.observe(this, { childList: true, subtree: true });\n      queueMicrotask(() => {\n        if (this.#connected) this.#syncNativeMedia();\n      });\n      this.#tryAttach();\n    }\n\n    override disconnectedCallback(): void {\n      this.#connected = false;\n      this.#contextRoot.detach(this);\n      this.#observer.disconnect();\n      this.#detachStore();\n      super.disconnectedCallback();\n    }\n\n    override destroyCallback(): void {\n      this.#contextRoot.detach(this);\n      this.#observer.disconnect();\n      this.#detachStore();\n      this.#extensions.destroy();\n      this.#store?.destroy();\n      this.#store = null;\n      super.destroyCallback();\n    }\n\n    protected override willUpdate(changed: PropertyValues): void {\n      super.willUpdate(changed);\n\n      for (const { property, entry } of inputs) {\n        if (!changed.has(property)) continue;\n\n        // SAFETY: `resolveInputs` derives properties installed by this class's static property map.\n        const configProperty = property as keyof this;\n\n        setPlayerConfigValue(this.store, entry, this[configProperty]);\n      }\n    }\n\n    #syncMedia(): void {\n      const registered = this.#mediaRegistrations.at(-1)?.value ?? null;\n      const media = registered ?? this.#nativeMedia;\n      if (this.#media === media) return;\n\n      this.#media = media;\n      this.#publishMedia();\n      this.#tryAttach();\n    }\n\n    #syncContainer(): void {\n      const container = this.#containerRegistrations.at(-1)?.value ?? null;\n      if (this.#container === container) return;\n\n      this.#container = container;\n      this.#publishContainer();\n      this.#tryAttach();\n    }\n\n    #syncNativeMedia(): void {\n      const media = this.querySelector<HTMLMediaElement>('video, audio');\n      if (this.#nativeMedia === media) return;\n\n      this.#nativeMedia = media;\n      this.#syncMedia();\n    }\n\n    #publishMedia(): void {\n      this.#mediaProvider.setValue({ media: this.#media, registerMedia: this.#registerMedia });\n    }\n\n    #publishContainer(): void {\n      this.#containerProvider.setValue({\n        container: this.#container,\n        registerContainer: this.#registerContainer,\n      });\n    }\n\n    #tryAttach(): void {\n      if (!this.#connected || !this.#store) return;\n\n      if (!this.#media) {\n        this.#detachStore();\n        return;\n      }\n\n      const target: PlayerTarget = {\n        media: this.#media,\n        container: this.#container,\n      };\n\n      const hasMediaChanged = this.#attached?.media !== target.media;\n      const hasContainerChanged = this.#attached?.container !== target.container;\n\n      if (hasMediaChanged || hasContainerChanged) this.#attach(target);\n    }\n\n    /**\n     * Extensions attach before the store so their overrides are in place when features first read the media; the store\n     * then sees the media through the extensions' facade. Extensions follow the media only, so a container change\n     * re-attaches the store but leaves them attached.\n     */\n    #attach(target: PlayerTarget): void {\n      const store = this.#store;\n      if (!store) return;\n\n      this.#detach?.();\n      this.#attached = target;\n      this.#extensions.attach(target);\n      this.#detach = store.attach({ media: this.#extensions.getStoreMedia(target.media), container: target.container });\n    }\n\n    /**\n     * An extension that overrides media members was added or removed. Features hold members read at attach time (such\n     * as `remote`), so the store re-attaches to the same target to pick up what the extensions now own. Observers such\n     * as analytics never get here. Extensions themselves stay attached.\n     */\n    #syncExtensions(): void {\n      if (this.#attached) this.#attach(this.#attached);\n    }\n\n    #detachStore(): void {\n      this.#detach?.();\n      this.#detach = null;\n      this.#extensions.detach();\n      this.#attached = null;\n    }\n\n    #syncInitialConfig(): void {\n      const store = this.store;\n      if (this.#configuredStore === store) return;\n\n      for (const { property, entry } of inputs) {\n        // SAFETY: `resolveInputs` derives properties installed by this class's static property map.\n        const configProperty = property as keyof this;\n\n        setPlayerConfigValue(store, entry, this[configProperty]);\n      }\n\n      this.#configuredStore = store;\n    }\n  }\n\n  return ConfiguredPlayerElement;\n}\n"],"mappings":"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"}

package/dist/dev/presets/audio/compat-skin.d.ts

@@ -0,0 +1,15 @@
+import { SkinElement } from "../skin.js";
+//#region src/presets/audio/compat-skin.d.ts
+/** Packaged compat audio UI registered as `<audio-compat-skin>`. */
+export declare class CompatAudioSkinElement extends SkinElement {
+  static readonly tagName = "audio-compat-skin";
+  static styles: import("@videojs/utils/dom").ShadowStyle;
+  static template: HTMLTemplateElement | null;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [CompatAudioSkinElement.tagName]: CompatAudioSkinElement;
+  }
+}
+//#endregion
+//# sourceMappingURL=compat-skin.d.ts.map

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

@@ -0,0 +1,21 @@
+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 };
+
+//# sourceMappingURL=compat-skin.js.map

package/dist/dev/presets/audio/compat-skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compat-skin.js","names":["styles"],"sources":["../../../../src/presets/audio/compat-skin.ts"],"sourcesContent":["import { createShadowStyle } from '@videojs/utils/dom';\n\nimport { template } from '../../internal/skins/compat-audio/template';\nimport { SkinElement } from '../skin';\n\nimport styles from '../../define/audio/compat-skin.css?inline';\n\n/** Packaged compat audio UI registered as `<audio-compat-skin>`. */\nexport class CompatAudioSkinElement extends SkinElement {\n  static readonly tagName = 'audio-compat-skin';\n  static styles = createShadowStyle(styles);\n  static template = template;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [CompatAudioSkinElement.tagName]: CompatAudioSkinElement;\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,yBAAb,cAA4C,YAAY;;EAC5B,KAAA,UAAA;;;EACV,KAAA,SAAA,kBAAkBA,mBAAM;;;EACtB,KAAA,WAAA;;AACpB"}

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

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

package/dist/dev/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/dev/presets/audio/neutral-skin.d.ts

@@ -0,0 +1,15 @@
+import { SkinElement } from "../skin.js";
+//#region src/presets/audio/neutral-skin.d.ts
+/** Packaged Neutral audio UI registered as `<audio-neutral-skin>`. */
+export declare class NeutralAudioSkinElement extends SkinElement {
+  static readonly tagName = "audio-neutral-skin";
+  static styles: CSSStyleSheet | string;
+  static template: HTMLTemplateElement | null;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [NeutralAudioSkinElement.tagName]: NeutralAudioSkinElement;
+  }
+}
+//#endregion
+//# sourceMappingURL=neutral-skin.d.ts.map

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

@@ -0,0 +1,21 @@
+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 };
+
+//# sourceMappingURL=neutral-skin.js.map

package/dist/dev/presets/audio/neutral-skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"neutral-skin.js","names":["styles"],"sources":["../../../../src/presets/audio/neutral-skin.ts"],"sourcesContent":["import { createShadowStyle } from '@videojs/utils/dom';\n\nimport { template } from '../../internal/skins/neutral-audio/template';\nimport { SkinElement } from '../skin';\n\nimport styles from '../../define/audio/neutral-skin.css?inline';\n\n/** Packaged Neutral audio UI registered as `<audio-neutral-skin>`. */\nexport class NeutralAudioSkinElement extends SkinElement {\n  static readonly tagName = 'audio-neutral-skin';\n  static styles: CSSStyleSheet | string = createShadowStyle(styles);\n  static template = template;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [NeutralAudioSkinElement.tagName]: NeutralAudioSkinElement;\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,0BAAb,cAA6C,YAAY;;EAC7B,KAAA,UAAA;;;EACc,KAAA,SAAA,kBAAkBA,oBAAM;;;EAC9C,KAAA,WAAA;;AACpB"}

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

@@ -4,8 +4,8 @@ import { index_d_exports } from "../../index.js";
 //#region src/presets/audio/player.d.ts
 declare const PlayerElement: PlayerElementConstructor<index_d_exports.AudioPlayerStore>;
 /** Player controller bound to the standard audio player store. */
-declare const PlayerController: PlayerController$1.ConfiguredConstructor<index_d_exports.AudioPlayerStore>;
-declare class AudioPlayerElement extends PlayerElement {
+export declare const PlayerController: PlayerController$1.ConfiguredConstructor<index_d_exports.AudioPlayerStore>;
+export declare class AudioPlayerElement extends PlayerElement {
   static readonly tagName = "audio-player";
 }
 declare global {
@@ -14,5 +14,4 @@ declare global {
   }
 }
 //#endregion
-export { AudioPlayerElement, PlayerController };
 //# sourceMappingURL=player.d.ts.map

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

@@ -1,9 +1,9 @@
 import { SkinElement } from "../skin.js";
 //#region src/presets/audio/skin.d.ts
 /** Packaged default audio UI registered as `<audio-skin>`. */
-declare class AudioSkinElement extends SkinElement {
+export declare class AudioSkinElement extends SkinElement {
   static readonly tagName = "audio-skin";
-  static styles: import("@videojs/utils/dom").ShadowStyle;
+  static styles: CSSStyleSheet | string;
   static template: HTMLTemplateElement | null;
 }
 declare global {
@@ -12,5 +12,4 @@ declare global {
   }
 }
 //#endregion
-export { AudioSkinElement };
 //# sourceMappingURL=skin.d.ts.map

package/dist/dev/presets/audio/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/presets/audio/skin.ts"],"sourcesContent":["import { createShadowStyle } from '@videojs/utils/dom';\n\nimport { template } from '../../internal/skins/default-audio/template';\nimport { SkinElement } from '../skin';\n\nimport styles from '../../define/audio/skin.css?inline';\n\n/** Packaged default audio UI registered as `<audio-skin>`. */\nexport class AudioSkinElement extends SkinElement {\n  static readonly tagName = 'audio-skin';\n  static styles = createShadowStyle(styles);\n  static template = template;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioSkinElement.tagName]: AudioSkinElement;\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,mBAAb,cAAsC,YAAY;;EACtB,KAAA,UAAA;;;EACV,KAAA,SAAA,kBAAkBA,YAAM;;;EACtB,KAAA,WAAA;;AACpB"}
+{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/presets/audio/skin.ts"],"sourcesContent":["import { createShadowStyle } from '@videojs/utils/dom';\n\nimport { template } from '../../internal/skins/default-audio/template';\nimport { SkinElement } from '../skin';\n\nimport styles from '../../define/audio/skin.css?inline';\n\n/** Packaged default audio UI registered as `<audio-skin>`. */\nexport class AudioSkinElement extends SkinElement {\n  static readonly tagName = 'audio-skin';\n  static styles: CSSStyleSheet | string = createShadowStyle(styles);\n  static template = template;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioSkinElement.tagName]: AudioSkinElement;\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,mBAAb,cAAsC,YAAY;;EACtB,KAAA,UAAA;;;EACc,KAAA,SAAA,kBAAkBA,YAAM;;;EAC9C,KAAA,WAAA;;AACpB"}

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

@@ -4,8 +4,8 @@ import { index_d_exports } from "../../index.js";
 //#region src/presets/background/player.d.ts
 declare const PlayerElement: PlayerElementConstructor<index_d_exports.PlayerStore<[]>>;
 /** Player controller bound to the background video player store. */
-declare const PlayerController: PlayerController$1.ConfiguredConstructor<index_d_exports.PlayerStore<[]>>;
-declare class BackgroundVideoPlayerElement extends PlayerElement {
+export declare const PlayerController: PlayerController$1.ConfiguredConstructor<index_d_exports.PlayerStore<[]>>;
+export declare class BackgroundVideoPlayerElement extends PlayerElement {
   static readonly tagName = "background-video-player";
 }
 declare global {
@@ -14,5 +14,4 @@ declare global {
   }
 }
 //#endregion
-export { BackgroundVideoPlayerElement, PlayerController };
 //# sourceMappingURL=player.d.ts.map

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

@@ -1,7 +1,7 @@
 import { ReactiveElement } from "@videojs/element";
 //#region src/presets/background/skin.d.ts
 declare function getTemplateHTML(): string;
-declare class BackgroundVideoSkinElement extends ReactiveElement {
+export declare class BackgroundVideoSkinElement extends ReactiveElement {
   static readonly tagName = "background-video-skin";
   static shadowRootOptions: ShadowRootInit;
   static getTemplateHTML: typeof getTemplateHTML;
@@ -13,5 +13,4 @@ declare global {
   }
 }
 //#endregion
-export { BackgroundVideoSkinElement };
 //# sourceMappingURL=skin.d.ts.map

package/dist/dev/presets/live-audio/compat-skin.d.ts

@@ -0,0 +1,15 @@
+import { SkinElement } from "../skin.js";
+//#region src/presets/live-audio/compat-skin.d.ts
+/** Packaged compat live-audio UI registered as `<live-audio-compat-skin>`. */
+export declare class CompatLiveAudioSkinElement extends SkinElement {
+  static readonly tagName = "live-audio-compat-skin";
+  static styles: import("@videojs/utils/dom").ShadowStyle;
+  static template: HTMLTemplateElement | null;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [CompatLiveAudioSkinElement.tagName]: CompatLiveAudioSkinElement;
+  }
+}
+//#endregion
+//# sourceMappingURL=compat-skin.d.ts.map

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

@@ -0,0 +1,21 @@
+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 };
+
+//# sourceMappingURL=compat-skin.js.map

package/dist/dev/presets/live-audio/compat-skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compat-skin.js","names":["styles"],"sources":["../../../../src/presets/live-audio/compat-skin.ts"],"sourcesContent":["import { createShadowStyle } from '@videojs/utils/dom';\n\nimport { template } from '../../internal/skins/compat-live-audio/template';\nimport { SkinElement } from '../skin';\n\nimport styles from '../../define/live-audio/compat-skin.css?inline';\n\n/** Packaged compat live-audio UI registered as `<live-audio-compat-skin>`. */\nexport class CompatLiveAudioSkinElement extends SkinElement {\n  static readonly tagName = 'live-audio-compat-skin';\n  static styles = createShadowStyle(styles);\n  static template = template;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [CompatLiveAudioSkinElement.tagName]: CompatLiveAudioSkinElement;\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,6BAAb,cAAgD,YAAY;;EAChC,KAAA,UAAA;;;EACV,KAAA,SAAA,kBAAkBA,mBAAM;;;EACtB,KAAA,WAAA;;AACpB"}

package/dist/dev/presets/live-audio/index.d.ts

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

package/dist/dev/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/dev/presets/live-audio/neutral-skin.d.ts

@@ -0,0 +1,15 @@
+import { SkinElement } from "../skin.js";
+//#region src/presets/live-audio/neutral-skin.d.ts
+/** Packaged Neutral live-audio UI registered as `<live-audio-neutral-skin>`. */
+export declare class NeutralLiveAudioSkinElement extends SkinElement {
+  static readonly tagName = "live-audio-neutral-skin";
+  static styles: CSSStyleSheet | string;
+  static template: HTMLTemplateElement | null;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [NeutralLiveAudioSkinElement.tagName]: NeutralLiveAudioSkinElement;
+  }
+}
+//#endregion
+//# sourceMappingURL=neutral-skin.d.ts.map

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

@@ -0,0 +1,21 @@
+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 };
+
+//# sourceMappingURL=neutral-skin.js.map

package/dist/dev/presets/live-audio/neutral-skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"neutral-skin.js","names":["styles"],"sources":["../../../../src/presets/live-audio/neutral-skin.ts"],"sourcesContent":["import { createShadowStyle } from '@videojs/utils/dom';\n\nimport { template } from '../../internal/skins/neutral-live-audio/template';\nimport { SkinElement } from '../skin';\n\nimport styles from '../../define/live-audio/neutral-skin.css?inline';\n\n/** Packaged Neutral live-audio UI registered as `<live-audio-neutral-skin>`. */\nexport class NeutralLiveAudioSkinElement extends SkinElement {\n  static readonly tagName = 'live-audio-neutral-skin';\n  static styles: CSSStyleSheet | string = createShadowStyle(styles);\n  static template = template;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [NeutralLiveAudioSkinElement.tagName]: NeutralLiveAudioSkinElement;\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,8BAAb,cAAiD,YAAY;;EACjC,KAAA,UAAA;;;EACc,KAAA,SAAA,kBAAkBA,oBAAM;;;EAC9C,KAAA,WAAA;;AACpB"}

package/dist/dev/presets/live-audio/player.d.ts

@@ -4,8 +4,8 @@ import { index_d_exports } from "../../index.js";
 //#region src/presets/live-audio/player.d.ts
 declare const PlayerElement: PlayerElementConstructor<index_d_exports.PlayerStore<index_d_exports.LiveAudioFeatures>>;
 /** Player controller bound to the live audio player store. */
-declare const PlayerController: PlayerController$1.ConfiguredConstructor<index_d_exports.PlayerStore<index_d_exports.LiveAudioFeatures>>;
-declare class LiveAudioPlayerElement extends PlayerElement {
+export declare const PlayerController: PlayerController$1.ConfiguredConstructor<index_d_exports.PlayerStore<index_d_exports.LiveAudioFeatures>>;
+export declare class LiveAudioPlayerElement extends PlayerElement {
   static readonly tagName = "live-audio-player";
 }
 declare global {
@@ -14,5 +14,4 @@ declare global {
   }
 }
 //#endregion
-export { LiveAudioPlayerElement, PlayerController };
 //# sourceMappingURL=player.d.ts.map

package/dist/dev/presets/live-audio/skin.d.ts

@@ -1,9 +1,9 @@
 import { SkinElement } from "../skin.js";
 //#region src/presets/live-audio/skin.d.ts
 /** Packaged default live-audio UI registered as `<live-audio-skin>`. */
-declare class LiveAudioSkinElement extends SkinElement {
+export declare class LiveAudioSkinElement extends SkinElement {
   static readonly tagName = "live-audio-skin";
-  static styles: import("@videojs/utils/dom").ShadowStyle;
+  static styles: CSSStyleSheet | string;
   static template: HTMLTemplateElement | null;
 }
 declare global {
@@ -12,5 +12,4 @@ declare global {
   }
 }
 //#endregion
-export { LiveAudioSkinElement };
 //# sourceMappingURL=skin.d.ts.map