@videojs/html 10.0.0-beta.9 → 10.0.0-rc.2

package/dist/default/media/youtube-video/adapter.js

@@ -0,0 +1,28 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { escapeHtml } from "@videojs/utils/string";
+import { YouTubeAdapter, buildYouTubeIframeSrc } from "@videojs/youtube-video";
+//#region src/media/youtube-video/adapter.ts
+var YouTubeCustomMediaElement = class extends CustomMediaElement("iframe", YouTubeAdapter) {
+	static {
+		this.getTemplateHTML = (attrs) => {
+			const initialSrc = buildYouTubeIframeSrc(attrs.src ?? "", templateAttrsToEmbedProps(attrs));
+			return `<style> :host { display: inline-block; min-width: 300px; min-height: 150px; position: relative; } iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } :host(:not([controls])) { pointer-events: none; } </style><iframe part="iframe" ${initialSrc ? ` src="${escapeHtml(initialSrc)}"` : ""} allow="accelerometer; fullscreen; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen frameborder="0" width="100%" height="100%" referrerpolicy="${escapeHtml(attrs.referrerpolicy ?? "")}" ></iframe>`;
+		};
+	}
+};
+function templateAttrsToEmbedProps(attrs) {
+	return {
+		autoplay: attrs.autoplay !== void 0,
+		defaultMuted: attrs.muted !== void 0,
+		loop: attrs.loop !== void 0,
+		controls: attrs.controls !== void 0,
+		playsInline: attrs.playsinline !== void 0,
+		preload: attrs.preload ?? "metadata"
+	};
+}
+var YouTubeVideo = class extends MediaAttachMixin(YouTubeCustomMediaElement) {};
+//#endregion
+export { YouTubeVideo };
+
+//# sourceMappingURL=adapter.js.map

package/dist/default/media/youtube-video/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/youtube-video/adapter.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/media/dom';\nimport { escapeHtml } from '@videojs/utils/string';\nimport { buildYouTubeIframeSrc, YouTubeAdapter } from '@videojs/youtube-video';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nclass YouTubeCustomMediaElement extends CustomMediaElement('iframe', YouTubeAdapter) {\n  static override getTemplateHTML = (attrs: Record<string, string>): string => {\n    const initialSrc = buildYouTubeIframeSrc(attrs.src ?? '', templateAttrsToEmbedProps(attrs));\n    const srcAttr = initialSrc ? ` src=\"${escapeHtml(initialSrc)}\"` : '';\n\n    return /*html*/ `\n      <style>\n        :host {\n          display: inline-block;\n          min-width: 300px;\n          min-height: 150px;\n          position: relative;\n        }\n        iframe {\n          position: absolute;\n          inset: 0;\n          width: 100%;\n          height: 100%;\n          border: 0;\n        }\n        :host(:not([controls])) {\n          pointer-events: none;\n        }\n      </style>\n      <iframe\n        part=\"iframe\"\n        ${srcAttr}\n        allow=\"accelerometer; fullscreen; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n        allowfullscreen\n        frameborder=\"0\"\n        width=\"100%\"\n        height=\"100%\"\n        referrerpolicy=\"${escapeHtml(attrs.referrerpolicy ?? '')}\"\n      ></iframe>\n    `;\n  };\n}\n\nfunction templateAttrsToEmbedProps(attrs: Record<string, string>) {\n  return {\n    autoplay: attrs.autoplay !== undefined,\n    defaultMuted: attrs.muted !== undefined,\n    loop: attrs.loop !== undefined,\n    controls: attrs.controls !== undefined,\n    playsInline: attrs.playsinline !== undefined,\n    preload: (attrs.preload as 'none' | 'metadata' | 'auto' | undefined) ?? 'metadata',\n  };\n}\n\nexport class YouTubeVideo extends MediaAttachMixin(YouTubeCustomMediaElement) {}\n"],"mappings":";;;;;AAMA,IAAA,4BAAA,cAAA,mBAAA,UAAA,cAAA,CAAA,CAAA;;EACA,KAAA,mBAAA,UAAA;GACA,MAAA,aAAA,sBAAA,MAAA,OAAA,IAAA,0BAAA,KAAA,CAAA;GAGA,OAAW,oQAFX,aAAA,SAAA,WAAA,UAAA,EAAA,KAAA,GAEW,0KAAA,WAAA,MAAA,kBAAA,EAAA,EAAA;EA8BX;;AACA;AAEA,SAAA,0BAAA,OAAA;CACA,OAAA;EACA,UAAA,MAAA,aAAA,KAAA;EACA,cAAA,MAAA,UAAA,KAAA;EACA,MAAA,MAAA,SAAA,KAAA;EACA,UAAA,MAAA,aAAA,KAAA;EACA,aAAA,MAAA,gBAAA,KAAA;EACA,SAAA,MAAA,WAAA;CACA;AACA;AAEA,IAAA,eAAA,cAAA,iBAAA,yBAAA,CAAA,CAAA,CAAA"}

package/dist/default/player/context.js

@@ -1,5 +1,4 @@
 import { createContext } from "@videojs/element/context";
-
 //#region src/player/context.ts
 const PLAYER_CONTEXT_KEY = Symbol.for("@videojs/player");
 /**
@@ -12,7 +11,7 @@ const MEDIA_CONTEXT_KEY = Symbol.for("@videojs/media");
 const mediaContext = createContext(MEDIA_CONTEXT_KEY);
 const CONTAINER_CONTEXT_KEY = Symbol.for("@videojs/container");
 const containerContext = createContext(CONTAINER_CONTEXT_KEY);
-
 //#endregion
 export { CONTAINER_CONTEXT_KEY, MEDIA_CONTEXT_KEY, PLAYER_CONTEXT_KEY, containerContext, mediaContext, playerContext };
+
 //# sourceMappingURL=context.js.map

package/dist/default/player/context.js.map

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

package/dist/default/player/controller.js

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

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

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

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

@@ -1,32 +1,25 @@
 import { containerContext, mediaContext, playerContext } from "./context.js";
-import { createContainerMixin } from "../store/container-mixin.js";
-import { createProviderMixin } from "../store/provider-mixin.js";
-import { PlayerController } from "./player-controller.js";
+import { createPlayerController } from "./controller.js";
+import { createPlayerElement } from "./element.js";
+import { combinePlayerFeatureConfigs } from "@videojs/core/dom";
 import { combine, createStore } from "@videojs/store";
-
 //#region src/player/create-player.ts
 function createPlayer(config) {
 	const slice = combine(...config.features);
-	function create() {
-		return createStore()(slice);
-	}
+	const featureConfig = combinePlayerFeatureConfigs(config.features);
 	return {
-		context: playerContext,
-		create,
-		PlayerController,
-		ProviderMixin: createProviderMixin({
+		PlayerElement: createPlayerElement({
 			playerContext,
 			mediaContext,
 			containerContext,
-			factory: create
+			factory: () => createStore()(slice),
+			config: featureConfig
 		}),
-		ContainerMixin: createContainerMixin({
-			playerContext,
-			containerContext
-		})
+		PlayerController: createPlayerController(playerContext),
+		playerContext
 	};
 }
-
 //#endregion
 export { createPlayer };
+
 //# sourceMappingURL=create-player.js.map

package/dist/default/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 { containerContext, mediaContext, 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 registers as the container element. */\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, selectPlayback } 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>({\n    playerContext,\n    mediaContext,\n    containerContext,\n    factory: create,\n  });\n\n  const ContainerMixin = createContainerMixin<PlayerStore>({\n    playerContext,\n    containerContext,\n  });\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;;AAe3C,QAAO;EACL,SAAS;EACT;EACA;EACA,eAhBoB,oBAAiC;GACrD;GACA;GACA;GACA,SAAS;GACV,CAAC;EAYA,gBAVqB,qBAAkC;GACvD;GACA;GACD,CAAC;EAQD"}
+{"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"}

package/dist/default/player/element.js

@@ -0,0 +1,190 @@
+import { UIElement } from "../ui/ui-element.js";
+import { setPlayerConfigValue } from "@videojs/core/dom";
+import { ContextProvider } from "@videojs/element/context";
+import { camelCase, kebabCase } from "@videojs/utils/string";
+import { isNull } from "@videojs/utils/predicate";
+//#region src/player/element.ts
+function resolveInputs(config) {
+	return Object.entries(config).map(([key, entry]) => {
+		const attribute = entry.html?.attribute ?? kebabCase(key);
+		return {
+			property: camelCase(attribute),
+			attribute,
+			entry
+		};
+	});
+}
+function createPlayerElement(options) {
+	const inputs = resolveInputs(options.config);
+	class ConfiguredPlayerElement extends UIElement {
+		static {
+			this.properties = {
+				...UIElement.properties,
+				...Object.fromEntries(inputs.map(({ property, attribute }) => [property, {
+					type: String,
+					attribute
+				}]))
+			};
+		}
+		#store = options.factory();
+		#configuredStore = null;
+		#detach = null;
+		#connected = false;
+		#media = null;
+		#nativeMedia = null;
+		#container = null;
+		#mediaRegistrations = [];
+		#containerRegistrations = [];
+		#observer = new MutationObserver(() => this.#syncNativeMedia());
+		#registerMedia = (media) => {
+			const registration = { value: media };
+			this.#mediaRegistrations.push(registration);
+			this.#syncMedia();
+			return () => {
+				const index = this.#mediaRegistrations.indexOf(registration);
+				if (index < 0) return;
+				this.#mediaRegistrations.splice(index, 1);
+				this.#syncNativeMedia();
+				this.#syncMedia();
+			};
+		};
+		#registerContainer = (container) => {
+			const registration = { value: container };
+			this.#containerRegistrations.push(registration);
+			this.#syncContainer();
+			return () => {
+				const index = this.#containerRegistrations.indexOf(registration);
+				if (index < 0) return;
+				this.#containerRegistrations.splice(index, 1);
+				this.#syncContainer();
+			};
+		};
+		#playerProvider = new ContextProvider(this, {
+			context: options.playerContext,
+			initialValue: this.store
+		});
+		#mediaProvider = new ContextProvider(this, {
+			context: options.mediaContext,
+			initialValue: {
+				media: this.#media,
+				registerMedia: this.#registerMedia
+			}
+		});
+		#containerProvider = new ContextProvider(this, {
+			context: options.containerContext,
+			initialValue: {
+				container: this.#container,
+				registerContainer: this.#registerContainer
+			}
+		});
+		get store() {
+			if (isNull(this.#store)) this.#store = options.factory();
+			return this.#store;
+		}
+		connectedCallback() {
+			this.#connected = true;
+			super.connectedCallback();
+			this.#syncInitialConfig();
+			this.#playerProvider.setValue(this.store);
+			this.#publishMedia();
+			this.#publishContainer();
+			this.#observer.observe(this, {
+				childList: true,
+				subtree: true
+			});
+			queueMicrotask(() => {
+				if (this.#connected) this.#syncNativeMedia();
+			});
+			this.#tryAttach();
+		}
+		disconnectedCallback() {
+			this.#connected = false;
+			this.#observer.disconnect();
+			this.#detachStore();
+			super.disconnectedCallback();
+		}
+		destroyCallback() {
+			this.#observer.disconnect();
+			this.#detachStore();
+			this.#store?.destroy();
+			this.#store = null;
+			super.destroyCallback();
+		}
+		willUpdate(changed) {
+			super.willUpdate(changed);
+			for (const { property, entry } of inputs) {
+				if (!changed.has(property)) continue;
+				const configProperty = property;
+				setPlayerConfigValue(this.store, entry, this[configProperty]);
+			}
+		}
+		#syncMedia() {
+			const media = this.#mediaRegistrations.at(-1)?.value ?? null ?? this.#nativeMedia;
+			if (this.#media === media) return;
+			this.#media = media;
+			this.#publishMedia();
+			this.#tryAttach();
+		}
+		#syncContainer() {
+			const container = this.#containerRegistrations.at(-1)?.value ?? null;
+			if (this.#container === container) return;
+			this.#container = container;
+			this.#publishContainer();
+			this.#tryAttach();
+		}
+		#syncNativeMedia() {
+			const media = this.querySelector("video, audio");
+			if (this.#nativeMedia === media) return;
+			this.#nativeMedia = media;
+			this.#syncMedia();
+		}
+		#publishMedia() {
+			this.#mediaProvider.setValue({
+				media: this.#media,
+				registerMedia: this.#registerMedia
+			});
+		}
+		#publishContainer() {
+			this.#containerProvider.setValue({
+				container: this.#container,
+				registerContainer: this.#registerContainer
+			});
+		}
+		#tryAttach() {
+			const store = this.#store;
+			if (!this.#connected || !store) return;
+			if (!this.#media) {
+				this.#detachStore();
+				return;
+			}
+			const target = {
+				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);
+			}
+		}
+		#detachStore() {
+			this.#detach?.();
+			this.#detach = null;
+		}
+		#syncInitialConfig() {
+			const store = this.store;
+			if (this.#configuredStore === store) return;
+			for (const { property, entry } of inputs) {
+				const configProperty = property;
+				setPlayerConfigValue(store, entry, this[configProperty]);
+			}
+			this.#configuredStore = store;
+		}
+	}
+	return ConfiguredPlayerElement;
+}
+//#endregion
+export { createPlayerElement };
+
+//# sourceMappingURL=element.js.map

package/dist/default/player/element.js.map

@@ -0,0 +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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"}

package/dist/default/player/popup-group-context.js

@@ -0,0 +1,6 @@
+import { createContext } from "@videojs/element/context";
+const popupGroupContext = createContext(Symbol.for("@videojs/popup-group"));
+//#endregion
+export { popupGroupContext };
+
+//# sourceMappingURL=popup-group-context.js.map

package/dist/default/player/popup-group-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup-group-context.js","names":[],"sources":["../../../src/player/popup-group-context.ts"],"sourcesContent":["import type { PopupGroup } from '@videojs/core/dom';\nimport { type Context, createContext } from '@videojs/element/context';\n\nconst POPUP_GROUP_CONTEXT_KEY = Symbol.for('@videojs/popup-group');\n\nexport type PopupGroupContext = Context<typeof POPUP_GROUP_CONTEXT_KEY, PopupGroup>;\n\nexport const popupGroupContext = createContext<PopupGroup, typeof POPUP_GROUP_CONTEXT_KEY>(POPUP_GROUP_CONTEXT_KEY);\n"],"mappings":";AAOA,MAAa,oBAAoB,cAJD,OAAO,IAAI,sBAIgD,CAAuB"}

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

@@ -0,0 +1,5 @@
+import { MinimalAudioSkinElement } from "./minimal-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 };

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

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

package/dist/default/presets/audio/minimal-skin.js.map

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

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

@@ -0,0 +1,15 @@
+import { createPlayer } from "../../player/create-player.js";
+import { audioFeatures } from "@videojs/core/dom";
+//#region src/presets/audio/player.ts
+const { PlayerElement, PlayerController: AudioPlayerController } = createPlayer({ features: audioFeatures });
+/** Player controller bound to the standard audio player store. */
+const PlayerController = AudioPlayerController;
+var AudioPlayerElement = class extends PlayerElement {
+	static {
+		this.tagName = "audio-player";
+	}
+};
+//#endregion
+export { AudioPlayerElement, PlayerController };
+
+//# sourceMappingURL=player.js.map

package/dist/default/presets/audio/player.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"player.js","names":[],"sources":["../../../../src/presets/audio/player.ts"],"sourcesContent":["import { audioFeatures } from '@videojs/core/dom';\n\nimport { createPlayer } from '../../player/create-player';\n\nconst { PlayerElement, PlayerController: AudioPlayerController } = createPlayer({\n  features: audioFeatures,\n});\n\n/** Player controller bound to the standard audio player store. */\nexport const PlayerController = AudioPlayerController;\n\nexport class AudioPlayerElement extends PlayerElement {\n  static readonly tagName = 'audio-player';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioPlayerElement.tagName]: AudioPlayerElement;\n  }\n}\n"],"mappings":";;;AAIA,MAAM,EAAE,eAAe,kBAAkB,0BAA0B,aAAa,EAC9E,UAAU,cACZ,CAAC;;AAGD,MAAa,mBAAmB;AAEhC,IAAa,qBAAb,cAAwC,cAAc;;EAC1B,KAAA,UAAA;;AAC5B"}

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,4 @@
+import { BackgroundVideoPlayerElement, PlayerController } from "./player.js";
+import { BackgroundVideoSkinElement } from "./skin.js";
+import { backgroundFeatures } from "@videojs/core/dom";
+export { BackgroundVideoPlayerElement, BackgroundVideoSkinElement, PlayerController, backgroundFeatures };

package/dist/default/presets/background/player.js

@@ -0,0 +1,15 @@
+import { createPlayer } from "../../player/create-player.js";
+import { backgroundFeatures } from "@videojs/core/dom";
+//#region src/presets/background/player.ts
+const { PlayerElement, PlayerController: BackgroundVideoPlayerController } = createPlayer({ features: backgroundFeatures });
+/** Player controller bound to the background video player store. */
+const PlayerController = BackgroundVideoPlayerController;
+var BackgroundVideoPlayerElement = class extends PlayerElement {
+	static {
+		this.tagName = "background-video-player";
+	}
+};
+//#endregion
+export { BackgroundVideoPlayerElement, PlayerController };
+
+//# sourceMappingURL=player.js.map

package/dist/default/presets/background/player.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"player.js","names":[],"sources":["../../../../src/presets/background/player.ts"],"sourcesContent":["import { backgroundFeatures } from '@videojs/core/dom';\n\nimport { createPlayer } from '../../player/create-player';\n\nconst { PlayerElement, PlayerController: BackgroundVideoPlayerController } = createPlayer({\n  features: backgroundFeatures,\n});\n\n/** Player controller bound to the background video player store. */\nexport const PlayerController = BackgroundVideoPlayerController;\n\nexport class BackgroundVideoPlayerElement extends PlayerElement {\n  static readonly tagName = 'background-video-player';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoPlayerElement.tagName]: BackgroundVideoPlayerElement;\n  }\n}\n"],"mappings":";;;AAIA,MAAM,EAAE,eAAe,kBAAkB,oCAAoC,aAAa,EACxF,UAAU,mBACZ,CAAC;;AAGD,MAAa,mBAAmB;AAEhC,IAAa,+BAAb,cAAkD,cAAc;;EACpC,KAAA,UAAA;;AAC5B"}

package/dist/default/presets/background/skin.js

@@ -0,0 +1,37 @@
+import skin_default from "../../define/background/skin2.js";
+import { ReactiveElement } from "@videojs/element";
+import { ensureGlobalStyle } from "@videojs/utils/dom";
+//#region src/presets/background/skin.ts
+const STYLES_ID = "__media-background-styles";
+function getTemplateHTML() {
+	return `
+    <media-container>
+      <!-- @deprecated slot="media" is no longer required, use the default slot instead -->
+      <slot name="media"></slot>
+      <slot></slot>
+    </media-container>
+  `;
+}
+var BackgroundVideoSkinElement = class BackgroundVideoSkinElement extends ReactiveElement {
+	static {
+		this.tagName = "background-video-skin";
+	}
+	static {
+		this.shadowRootOptions = { mode: "open" };
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+	constructor() {
+		super();
+		ensureGlobalStyle(STYLES_ID, skin_default);
+		if (!this.shadowRoot) {
+			this.attachShadow(BackgroundVideoSkinElement.shadowRootOptions);
+			this.shadowRoot.innerHTML = getTemplateHTML();
+		}
+	}
+};
+//#endregion
+export { BackgroundVideoSkinElement };
+
+//# sourceMappingURL=skin.js.map

package/dist/default/presets/background/skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/presets/background/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { ensureGlobalStyle } from '@videojs/utils/dom';\n\nimport styles from '../../define/background/skin.css?inline';\n\nconst STYLES_ID = '__media-background-styles';\n\nfunction getTemplateHTML() {\n  return /* html */ `\n    <media-container>\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n    </media-container>\n  `;\n}\n\nexport class BackgroundVideoSkinElement extends ReactiveElement {\n  static readonly tagName = 'background-video-skin';\n  static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    ensureGlobalStyle(STYLES_ID, styles);\n\n    if (!this.shadowRoot) {\n      this.attachShadow(BackgroundVideoSkinElement.shadowRootOptions);\n      this.shadowRoot!.innerHTML = getTemplateHTML();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;\n  }\n}\n"],"mappings":";;;;AAKA,MAAM,YAAY;AAElB,SAAS,kBAAkB;CACzB,OAAkB;;;;;;;AAOpB;AAEA,IAAa,6BAAb,MAAa,mCAAmC,gBAAgB;;EACpC,KAAA,UAAA;;;EACiB,KAAA,oBAAA,EAAE,MAAM,OAAO;;;EACjC,KAAA,kBAAA;;CAEzB,cAAc;EACZ,MAAM;EAEN,kBAAkB,WAAWA,YAAM;EAEnC,IAAI,CAAC,KAAK,YAAY;GACpB,KAAK,aAAa,2BAA2B,iBAAiB;GAC9D,KAAK,WAAY,YAAY,gBAAgB;EAC/C;CACF;AACF"}

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

@@ -0,0 +1,5 @@
+import { MinimalLiveAudioSkinElement } from "./minimal-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 };

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

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