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

package/dist/dev/media/twitch-video/adapter.js

@@ -0,0 +1,58 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { escapeHtml } from "@videojs/utils/string";
+import { TwitchAdapter, buildTwitchIframeSrc } from "@videojs/twitch-video";
+//#region src/media/twitch-video/adapter.ts
+var TwitchCustomMediaElement = class extends CustomMediaElement("iframe", TwitchAdapter) {
+	static {
+		this.getTemplateHTML = (attrs) => {
+			const initialSrc = buildTwitchIframeSrc(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; picture-in-picture;"
+        sandbox="allow-modals allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+        scrolling="no"
+        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 TwitchVideo = class extends MediaAttachMixin(TwitchCustomMediaElement) {};
+//#endregion
+export { TwitchVideo };
+
+//# sourceMappingURL=adapter.js.map

package/dist/dev/media/twitch-video/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/twitch-video/adapter.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/media/dom';\nimport { buildTwitchIframeSrc, TwitchAdapter } from '@videojs/twitch-video';\nimport { escapeHtml } from '@videojs/utils/string';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nclass TwitchCustomMediaElement extends CustomMediaElement('iframe', TwitchAdapter) {\n  static override getTemplateHTML = (attrs: Record<string, string>): string => {\n    const initialSrc = buildTwitchIframeSrc(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; picture-in-picture;\"\n        sandbox=\"allow-modals allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox\"\n        scrolling=\"no\"\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 TwitchVideo extends MediaAttachMixin(TwitchCustomMediaElement) {}\n"],"mappings":";;;;;AAMA,IAAM,2BAAN,cAAuC,mBAAmB,UAAU,aAAa,CAAC,CAAC;;EAC9C,KAAA,mBAAA,UAA0C;GAC3E,MAAM,aAAa,qBAAqB,MAAM,OAAO,IAAI,0BAA0B,KAAK,CAAC;GAGzF,OAAgB;;;;;;;;;;;;;;;;;;;;;UAFA,aAAa,SAAS,WAAW,UAAU,EAAE,KAAK,GAuBpD;;;;;;;0BAOQ,WAAW,MAAM,kBAAkB,EAAE,EAAE;;;EAG/D;;AACF;AAEA,SAAS,0BAA0B,OAA+B;CAChE,OAAO;EACL,UAAU,MAAM,aAAa,KAAA;EAC7B,cAAc,MAAM,UAAU,KAAA;EAC9B,MAAM,MAAM,SAAS,KAAA;EACrB,UAAU,MAAM,aAAa,KAAA;EAC7B,aAAa,MAAM,gBAAgB,KAAA;EACnC,SAAU,MAAM,WAAwD;CAC1E;AACF;AAEA,IAAa,cAAb,cAAiC,iBAAiB,wBAAwB,CAAC,CAAC,CAAC"}

package/dist/dev/media/twitch-video/index.d.ts

@@ -0,0 +1,2 @@
+import { TwitchVideo } from "./adapter.js";
+export { TwitchVideo };

package/dist/dev/media/vimeo-video/adapter.d.ts

@@ -0,0 +1,23 @@
+import { VimeoAdapter } from "@videojs/vimeo-video";
+//#region src/media/vimeo-video/adapter.d.ts
+declare const VimeoCustomMediaElement_base: import("@videojs/utils/types").Constructor<HTMLElement & VimeoAdapter & {
+  readonly adapter: VimeoAdapter;
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}> & {
+  properties: Record<string, {
+    type: any;
+    attribute?: string;
+    empty?: unknown;
+  }>;
+  getTemplateHTML: (attrs: Record<string, string>) => string;
+  shadowRootOptions: ShadowRootInit;
+  readonly observedAttributes: string[];
+};
+declare class VimeoCustomMediaElement extends VimeoCustomMediaElement_base {
+  static getTemplateHTML: (attrs: Record<string, string>) => string;
+}
+declare const VimeoVideo_base: typeof VimeoCustomMediaElement;
+declare class VimeoVideo extends VimeoVideo_base {}
+//#endregion
+export { VimeoVideo };
+//# sourceMappingURL=adapter.d.ts.map

package/dist/dev/media/vimeo-video/adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.d.ts","names":[],"sources":["../../../../src/media/vimeo-video/adapter.ts"],"mappings":";;;;;;;;;;;;;;;cAMM,gCAAgC;SACpB,kBAAe,OAAW;;;cAgD/B,mBAAmB"}

package/dist/dev/media/vimeo-video/adapter.js

@@ -0,0 +1,57 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { escapeHtml } from "@videojs/utils/string";
+import { VimeoAdapter, buildVimeoIframeSrc } from "@videojs/vimeo-video";
+//#region src/media/vimeo-video/adapter.ts
+var VimeoCustomMediaElement = class extends CustomMediaElement("iframe", VimeoAdapter) {
+	static {
+		this.getTemplateHTML = (attrs) => {
+			const initialSrc = buildVimeoIframeSrc(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 VimeoVideo = class extends MediaAttachMixin(VimeoCustomMediaElement) {};
+//#endregion
+export { VimeoVideo };
+
+//# sourceMappingURL=adapter.js.map

package/dist/dev/media/vimeo-video/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/vimeo-video/adapter.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/media/dom';\nimport { escapeHtml } from '@videojs/utils/string';\nimport { buildVimeoIframeSrc, VimeoAdapter } from '@videojs/vimeo-video';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nclass VimeoCustomMediaElement extends CustomMediaElement('iframe', VimeoAdapter) {\n  static override getTemplateHTML = (attrs: Record<string, string>): string => {\n    const initialSrc = buildVimeoIframeSrc(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 VimeoVideo extends MediaAttachMixin(VimeoCustomMediaElement) {}\n"],"mappings":";;;;;AAMA,IAAM,0BAAN,cAAsC,mBAAmB,UAAU,YAAY,CAAC,CAAC;;EAC5C,KAAA,mBAAA,UAA0C;GAC3E,MAAM,aAAa,oBAAoB,MAAM,OAAO,IAAI,0BAA0B,KAAK,CAAC;GAGxF,OAAgB;;;;;;;;;;;;;;;;;;;;;UAFA,aAAa,SAAS,WAAW,UAAU,EAAE,KAAK,GAuBpD;;;;;;0BAMQ,WAAW,MAAM,kBAAkB,EAAE,EAAE;;;EAG/D;;AACF;AAEA,SAAS,0BAA0B,OAA+B;CAChE,OAAO;EACL,UAAU,MAAM,aAAa,KAAA;EAC7B,cAAc,MAAM,UAAU,KAAA;EAC9B,MAAM,MAAM,SAAS,KAAA;EACrB,UAAU,MAAM,aAAa,KAAA;EAC7B,aAAa,MAAM,gBAAgB,KAAA;EACnC,SAAU,MAAM,WAAwD;CAC1E;AACF;AAEA,IAAa,aAAb,cAAgC,iBAAiB,uBAAuB,CAAC,CAAC,CAAC"}

package/dist/dev/media/vimeo-video/index.d.ts

@@ -0,0 +1,2 @@
+import { VimeoVideo } from "./adapter.js";
+export { VimeoVideo };

package/dist/dev/media/wistia-video/adapter.d.ts

@@ -0,0 +1,11 @@
+import { WistiaAdapter } from "@videojs/wistia-video";
+//#region src/media/wistia-video/adapter.d.ts
+declare const WistiaVideo_base: typeof WistiaAdapter;
+/**
+ * `<wistia-video>` is Wistia's own `<wistia-player>`, normalized into a media by `WistiaAdapter` and attached to the
+ * player store here. No template and no inner player: the element written is the element that plays.
+ */
+declare class WistiaVideo extends WistiaVideo_base {}
+//#endregion
+export { WistiaVideo };
+//# sourceMappingURL=adapter.d.ts.map

package/dist/dev/media/wistia-video/adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.d.ts","names":[],"sources":["../../../../src/media/wistia-video/adapter.ts"],"mappings":";;;;;;;cAQa,oBAAoB"}

package/dist/dev/media/wistia-video/adapter.js

@@ -0,0 +1,12 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { WistiaAdapter } from "@videojs/wistia-video";
+//#region src/media/wistia-video/adapter.ts
+/**
+* `<wistia-video>` is Wistia's own `<wistia-player>`, normalized into a media by `WistiaAdapter` and attached to the
+* player store here. No template and no inner player: the element written is the element that plays.
+*/
+var WistiaVideo = class extends MediaAttachMixin(WistiaAdapter) {};
+//#endregion
+export { WistiaVideo };
+
+//# sourceMappingURL=adapter.js.map

package/dist/dev/media/wistia-video/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/wistia-video/adapter.ts"],"sourcesContent":["import { WistiaAdapter } from '@videojs/wistia-video';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\n/**\n * `<wistia-video>` is Wistia's own `<wistia-player>`, normalized into a media by `WistiaAdapter` and attached to the\n * player store here. No template and no inner player: the element written is the element that plays.\n */\nexport class WistiaVideo extends MediaAttachMixin(WistiaAdapter) {}\n"],"mappings":";;;;;;;AAQA,IAAa,cAAb,cAAiC,iBAAiB,aAAa,CAAC,CAAC,CAAC"}

package/dist/dev/media/wistia-video/index.d.ts

@@ -0,0 +1,2 @@
+import { WistiaVideo } from "./adapter.js";
+export { WistiaVideo };

package/dist/dev/media/youtube-video/adapter.d.ts

@@ -0,0 +1,23 @@
+import { YouTubeAdapter } from "@videojs/youtube-video";
+//#region src/media/youtube-video/adapter.d.ts
+declare const YouTubeCustomMediaElement_base: import("@videojs/utils/types").Constructor<HTMLElement & YouTubeAdapter & {
+  readonly adapter: YouTubeAdapter;
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}> & {
+  properties: Record<string, {
+    type: any;
+    attribute?: string;
+    empty?: unknown;
+  }>;
+  getTemplateHTML: (attrs: Record<string, string>) => string;
+  shadowRootOptions: ShadowRootInit;
+  readonly observedAttributes: string[];
+};
+declare class YouTubeCustomMediaElement extends YouTubeCustomMediaElement_base {
+  static getTemplateHTML: (attrs: Record<string, string>) => string;
+}
+declare const YouTubeVideo_base: typeof YouTubeCustomMediaElement;
+declare class YouTubeVideo extends YouTubeVideo_base {}
+//#endregion
+export { YouTubeVideo };
+//# sourceMappingURL=adapter.d.ts.map

package/dist/dev/media/youtube-video/adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.d.ts","names":[],"sources":["../../../../src/media/youtube-video/adapter.ts"],"mappings":";;;;;;;;;;;;;;;cAMM,kCAAkC;SACtB,kBAAe,OAAW;;;cAgD/B,qBAAqB"}

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

@@ -0,0 +1,57 @@
+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/dev/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,IAAM,4BAAN,cAAwC,mBAAmB,UAAU,cAAc,CAAC,CAAC;;EAChD,KAAA,mBAAA,UAA0C;GAC3E,MAAM,aAAa,sBAAsB,MAAM,OAAO,IAAI,0BAA0B,KAAK,CAAC;GAG1F,OAAgB;;;;;;;;;;;;;;;;;;;;;UAFA,aAAa,SAAS,WAAW,UAAU,EAAE,KAAK,GAuBpD;;;;;;0BAMQ,WAAW,MAAM,kBAAkB,EAAE,EAAE;;;EAG/D;;AACF;AAEA,SAAS,0BAA0B,OAA+B;CAChE,OAAO;EACL,UAAU,MAAM,aAAa,KAAA;EAC7B,cAAc,MAAM,UAAU,KAAA;EAC9B,MAAM,MAAM,SAAS,KAAA;EACrB,UAAU,MAAM,aAAa,KAAA;EAC7B,aAAa,MAAM,gBAAgB,KAAA;EACnC,SAAU,MAAM,WAAwD;CAC1E;AACF;AAEA,IAAa,eAAb,cAAkC,iBAAiB,yBAAyB,CAAC,CAAC,CAAC"}

package/dist/dev/media/youtube-video/index.d.ts

@@ -0,0 +1,2 @@
+import { YouTubeVideo } from "./adapter.js";
+export { YouTubeVideo };

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

@@ -1,6 +1,7 @@
-import { AnyPlayerStore, Media, MediaContainer, PlayerStore } from "@videojs/core/dom";
-import { Context } from "@videojs/element/context";
-
+import { AnyPlayerStore, MediaContainer, PlayerStore } from "@videojs/core/dom";
+import { ReactiveControllerHost } from "@videojs/element";
+import { Media } from "@videojs/media/dom";
+import { Context, ContextConsumer } from "@videojs/element/context";
 //#region src/player/context.d.ts
 declare const PLAYER_CONTEXT_KEY: unique symbol;
 type PlayerContextValue<Store extends PlayerStore = AnyPlayerStore> = Store;
@@ -14,17 +15,18 @@ declare const playerContext: Context<typeof PLAYER_CONTEXT_KEY, AnyPlayerStore>;
 declare const MEDIA_CONTEXT_KEY: unique symbol;
 interface MediaContextValue {
   media: Media | null;
-  setMedia: (media: Media | null) => void;
+  registerMedia: (media: Media) => () => void;
 }
 type MediaContext = Context<typeof MEDIA_CONTEXT_KEY, MediaContextValue>;
 declare const mediaContext: Context<typeof MEDIA_CONTEXT_KEY, MediaContextValue>;
 declare const CONTAINER_CONTEXT_KEY: unique symbol;
 interface ContainerContextValue {
   container: MediaContainer | null;
-  setContainer: (container: MediaContainer | null) => void;
+  registerContainer: (container: MediaContainer) => () => void;
 }
 type ContainerContext = Context<typeof CONTAINER_CONTEXT_KEY, ContainerContextValue>;
+type ContainerContextConsumer = ContextConsumer<ContainerContext, ReactiveControllerHost & HTMLElement>;
 declare const containerContext: Context<typeof CONTAINER_CONTEXT_KEY, ContainerContextValue>;
 //#endregion
-export { CONTAINER_CONTEXT_KEY, ContainerContext, ContainerContextValue, MEDIA_CONTEXT_KEY, MediaContext, MediaContextValue, PLAYER_CONTEXT_KEY, PlayerContext, PlayerContextValue, containerContext, mediaContext, playerContext };
+export { CONTAINER_CONTEXT_KEY, ContainerContext, ContainerContextConsumer, ContainerContextValue, MEDIA_CONTEXT_KEY, MediaContext, MediaContextValue, PLAYER_CONTEXT_KEY, PlayerContext, PlayerContextValue, containerContext, mediaContext, playerContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/dev/player/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/player/context.ts"],"mappings":";;;;cAOa,kBAAA;AAAA,KAED,kBAAA,eAAiC,WAAA,GAAc,cAAA,IAAkB,KAAA;AAAA,KAEjE,aAAA,eAA4B,WAAA,GAAc,cAAA,IAAkB,OAAA,QAC/D,kBAAA,EACP,kBAAA,CAAmB,KAAA;;;;;AAJrB;cAYa,aAAA,EAAa,OAAA,QAAA,kBAAA,EAAA,cAAA;AAAA,cAMb,iBAAA;AAAA,UAEI,iBAAA;EACf,KAAA,EAAO,KAAA;EACP,QAAA,GAAW,KAAA,EAAO,KAAA;AAAA;AAAA,KAGR,YAAA,GAAe,OAAA,QAAe,iBAAA,EAAmB,iBAAA;AAAA,cAEhD,YAAA,EAAY,OAAA,QAAA,iBAAA,EAAA,iBAAA;AAAA,cAMZ,qBAAA;AAAA,UAEI,qBAAA;EACf,SAAA,EAAW,cAAA;EACX,YAAA,GAAe,SAAA,EAAW,cAAA;AAAA;AAAA,KAGhB,gBAAA,GAAmB,OAAA,QAAe,qBAAA,EAAuB,qBAAA;AAAA,cAExD,gBAAA,EAAgB,OAAA,QAAA,qBAAA,EAAA,qBAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/player/context.ts"],"mappings":";;;;;cASa;KAED,mBAAmB,cAAc,cAAc,kBAAkB;KAEjE,cAAc,cAAc,cAAc,kBAAkB,eAC/D,oBACP,mBAAmB;;;;;;cAQR,eAAa,eAAA,oBAAA;cAMb;UAEI;EACf,OAAO;EACP,gBAAgB,OAAO;;KAGb,eAAe,eAAe,mBAAmB;cAEhD,cAAY,eAAA,mBAAA;cAMZ;UAEI;EACf,WAAW;EACX,oBAAoB,WAAW;;KAGrB,mBAAmB,eAAe,uBAAuB;KAEzD,2BAA2B,gBAAgB,kBAAkB,yBAAyB;cAErF,kBAAgB,eAAA,uBAAA"}

package/dist/dev/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/dev/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/dev/player/create-player.d.ts

@@ -1,63 +1,55 @@
 import { PlayerContext } from "./context.js";
-import { ContainerMixin } from "../store/container-mixin.js";
-import { ProviderMixin } from "../store/provider-mixin.js";
+import { PlayerElementConstructor } from "../store/types.js";
 import { PlayerController } from "./player-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[]> {
   features: Features;
 }
 interface CreatePlayerResult<Store extends PlayerStore> {
-  /** Context for consuming player in controllers. */
-  context: PlayerContext<Store>;
-  /** Creates a store instance for imperative access. */
-  create: () => Store;
+  /** Configured player element class that owns the store and attachment lifecycle. */
+  PlayerElement: PlayerElementConstructor<Store>;
   /** Player controller bound to this player's context. */
-  PlayerController: PlayerController.Constructor<Store>;
-  /** Mixin that provides player context to descendants. */
-  ProviderMixin: ProviderMixin<Store>;
-  /** Mixin that consumes player context and registers as the container element. */
-  ContainerMixin: ContainerMixin<Store>;
+  PlayerController: PlayerController.ConfiguredConstructor<Store>;
+  /** Context that carries the player store to descendant elements. */
+  playerContext: PlayerContext<Store>;
 }
 /**
- * Creates a player factory with typed store, mixins, and controller.
+ * Creates a typed HTML player class and bound controller.
  *
  * @example
- * ```ts
- * import { createPlayer, MediaElement, selectPlayback } from '@videojs/html';
- * import { videoFeatures } from '@videojs/html/video';
+ *   ```ts
+ *   import { createPlayer, UIElement, selectPlayback } from '@videojs/html';
+ *   import { videoFeatures } from '@videojs/html/video';
  *
- * const { ProviderMixin, ContainerMixin, PlayerController, context } = createPlayer({
- *   features: videoFeatures,
- * });
+ *   const { PlayerElement: VideoPlayerElement, PlayerController } = createPlayer({
+ *     features: videoFeatures,
+ *   });
  *
- * // Provider element: owns the store, provides context to descendants
- * class VideoPlayer extends ProviderMixin(MediaElement) {}
- * customElements.define('video-player', VideoPlayer);
+ *   customElements.define('video-player', VideoPlayerElement);
  *
- * // Control element with selector
- * class PlayButton extends MediaElement {
- *   #playback = new PlayerController(this, context, selectPlayback);
- * }
- * ```
+ *   // Control element with selector
+ *   class PlayButton extends UIElement {
+ *     #playback = new PlayerController(this, selectPlayback);
+ *   }
+ *   ```;
  *
- * @label Video
  * @param config - Player configuration with features.
+ * @label Video
  */
 declare function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;
 /**
- * Creates a player factory for audio media.
+ * Creates a typed HTML audio player class and bound controller.
  *
- * @label Audio
  * @param config - Player configuration with features.
+ * @label Audio
  */
 declare function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;
 /**
- * Creates a player factory with custom features.
+ * Creates a typed HTML player class with custom features.
  *
- * @label Generic
  * @param config - Player configuration with features.
+ * @label Generic
  */
 declare function createPlayer<const Features extends AnyPlayerFeature[]>(config: CreatePlayerConfig<Features>): CreatePlayerResult<PlayerStore<Features>>;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"create-player.d.ts","names":[],"sources":["../../../src/player/create-player.ts"],"mappings":";;;;;;;UAgBiB,kBAAA,kBAAoC,gBAAA;EACnD,QAAA,EAAU,QAAA;AAAA;AAAA,UAGK,kBAAA,eAAiC,WAAA;EAJf;EAMjC,OAAA,EAAS,aAAA,CAAc,KAAA;EANW;EASlC,MAAA,QAAc,KAAA;EARd;EAWA,gBAAA,EAAkB,gBAAA,CAAiB,WAAA,CAAY,KAAA;EAX7B;EAclB,aAAA,EAAe,aAAA,CAAc,KAAA;EAXd;EAcf,cAAA,EAAgB,cAAA,CAAe,KAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4BjB,YAAA,CAAa,MAAA,EAAQ,kBAAA,CAAmB,aAAA,IAAiB,kBAAA,CAAmB,gBAAA;;;;;;AAA5F;iBAQgB,YAAA,CAAa,MAAA,EAAQ,kBAAA,CAAmB,aAAA,IAAiB,kBAAA,CAAmB,gBAAA;;;;;;;iBAQ5E,YAAA,wBAAoC,gBAAA,GAAA,CAClD,MAAA,EAAQ,kBAAA,CAAmB,QAAA,IAC1B,kBAAA,CAAmB,WAAA,CAAY,QAAA"}
+{"version":3,"file":"create-player.d.ts","names":[],"sources":["../../../src/player/create-player.ts"],"mappings":";;;;;UAiBiB,mBAAmB,iBAAiB;EACnD,UAAU;;UAGK,mBAAmB,cAAc;;EAEhD,eAAe,yBAAyB;;EAGxC,kBAAkB,iBAAiB,sBAAsB;;EAGzD,eAAe,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;iBA0Bf,aAAa,QAAQ,mBAAmB,iBAAiB,mBAAmB;;;;;;;iBAQ5E,aAAa,QAAQ,mBAAmB,iBAAiB,mBAAmB;;;;;;;iBAQ5E,mBAAmB,iBAAiB,oBAClD,QAAQ,mBAAmB,YAC1B,mBAAmB,YAAY"}

package/dist/dev/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 "./player-controller.js";
+import { createPlayerElement } from "./player-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/dev/player/create-player.js.map

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

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

@@ -1,46 +1,45 @@
 import { PlayerContext } from "./context.js";
 import { PlayerStore } from "@videojs/core/dom";
-import { InferStoreState, Selector } from "@videojs/store";
 import { ReactiveController, ReactiveControllerHost } from "@videojs/element";
-
+import { InferStoreState, Selector } from "@videojs/store";
 //#region src/player/player-controller.d.ts
 type PlayerControllerHost = ReactiveControllerHost & HTMLElement;
 /**
  * Reactive controller for accessing player store state.
  *
- * Without selector: Returns the store, does NOT subscribe to changes.
- * With selector: Returns selected state, subscribes with shallowEqual comparison.
+ * 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 MediaElement {
- *   #player = new PlayerController(this, playerContext);
+ *   ```ts
+ *   // Store access (no subscription)
+ *   class Controls extends UIElement {
+ *     #player = new PlayerController(this, playerContext);
  *
- *   handleClick() {
- *     this.#player.value.setVolume(0.5);
+ *     handleClick() {
+ *       this.#player.value.setVolume(0.5);
+ *     }
  *   }
- * }
  *
- * // Selector-based subscription
- * class PlayButton extends MediaElement {
- *   #playback = new PlayerController(this, playerContext, selectPlayback);
- * }
- * ```
+ *   // Selector-based subscription
+ *   class PlayButton extends UIElement {
+ *     #playback = new PlayerController(this, playerContext, selectPlayback);
+ *   }
+ *   ```;
  */
 declare class PlayerController<Store extends PlayerStore, Result = Store> implements ReactiveController {
   #private;
   /**
-   * @label Without Selector
    * @param host - The host element that owns this controller.
    * @param context - Player context to resolve the store from.
+   * @label Without Selector
    */
   constructor(host: PlayerControllerHost, context: PlayerContext<Store>);
   /**
-   * @label With Selector
    * @param host - The host element that owns this controller.
    * @param context - Player context to resolve the store from.
    * @param selector - Derives a value from the player store state.
+   * @label With Selector
    */
   constructor(host: PlayerControllerHost, context: PlayerContext<Store>, selector: Selector<InferStoreState<Store>, Result>);
   get value(): Result | undefined;
@@ -51,6 +50,10 @@ declare class PlayerController<Store extends PlayerStore, Result = Store> implem
 declare namespace PlayerController {
   type Host = PlayerControllerHost;
   type Constructor<Store extends PlayerStore = PlayerStore, Result = Store> = typeof PlayerController<Store, Result>;
+  interface ConfiguredConstructor<Store extends PlayerStore> {
+    new (host: PlayerControllerHost): PlayerController<Store>;
+    new <Result>(host: PlayerControllerHost, selector: Selector<InferStoreState<Store>, Result>): PlayerController<Store, Result>;
+  }
 }
 //#endregion
 export { PlayerController, PlayerControllerHost };

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

@@ -1 +1 @@
-{"version":3,"file":"player-controller.d.ts","names":[],"sources":["../../../src/player/player-controller.ts"],"mappings":";;;;;;KAQY,oBAAA,GAAuB,sBAAA,GAAyB,WAAA;;AAA5D;;;;;AAyBA;;;;;;;;;;;;;;;;;cAAa,gBAAA,eAA+B,WAAA,WAAsB,KAAA,aAAkB,kBAAA;EAAA;EAAtD;;;;;cAYhB,IAAA,EAAM,oBAAA,EAAsB,OAAA,EAAS,aAAA,CAAc,KAAA;;;;;;;cAQ7D,IAAA,EAAM,oBAAA,EACN,OAAA,EAAS,aAAA,CAAc,KAAA,GACvB,QAAA,EAAU,QAAA,CAAS,eAAA,CAAgB,KAAA,GAAQ,MAAA;EAAA,IAmBzC,KAAA,CAAA,GAAS,MAAA;EAAA,IAWT,WAAA,CAAA;EAIJ,aAAA,CAAA;EAKA,gBAAA,CAAA;AAAA;AAAA,kBAWe,gBAAA;EAAA,KACH,IAAA,GAAO,oBAAA;EAAA,KAEP,WAAA,eAA0B,WAAA,GAAc,WAAA,WAAsB,KAAA,WAAgB,gBAAA,CACxF,KAAA,EACA,MAAA;AAAA"}
+{"version":3,"file":"player-controller.d.ts","names":[],"sources":["../../../src/player/player-controller.ts"],"mappings":";;;;;KAQY,uBAAuB,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;cAyB/C,iBAAiB,cAAc,aAAa,SAAS,kBAAkB;;;;;;;EAYlF,YAAY,MAAM,sBAAsB,SAAS,cAAc;;;;;;;EAO/D,YACE,MAAM,sBACN,SAAS,cAAc,QACvB,UAAU,SAAS,gBAAgB,QAAQ;MAmBzC,SAAS;MAWT;EAIJ;EAMA;;kBA2Be;OACH,OAAO;OAEP,YAAY,cAAc,cAAc,aAAa,SAAS,gBAAgB,iBACxF,OACA;YAGe,sBAAsB,cAAc;SAC9C,MAAM,uBAAuB,iBAAiB;SAC9C,QACH,MAAM,sBACN,UAAU,SAAS,gBAAgB,QAAQ,UAC1C,iBAAiB,OAAO"}