@videojs/html 0.1.0-preview.8 → 10.0.0-alpha.11

package/dist/dev/index.d.ts

@@ -0,0 +1,48 @@
+import { PLAYER_CONTEXT_KEY, PlayerContext, PlayerContextValue, playerContext } from "./player/context.js";
+import { MediaElement, MediaElementConstructor } from "./ui/media-element.js";
+import { PlayerConsumer, PlayerConsumerConstructor, PlayerProvider, PlayerProviderConstructor } from "./store/types.js";
+import { ContainerMixin, createContainerMixin } from "./store/container-mixin.js";
+import { ProviderMixin, createProviderMixin } from "./store/provider-mixin.js";
+import { PlayerController, PlayerControllerHost } from "./player/player-controller.js";
+import { CreatePlayerConfig, CreatePlayerResult, createPlayer } from "./player/create-player.js";
+import { AlertDialogCloseElement } from "./ui/alert-dialog/alert-dialog-close-element.js";
+import { AlertDialogContextValue, alertDialogContext } from "./ui/alert-dialog/context.js";
+import { AlertDialogDescriptionElement } from "./ui/alert-dialog/alert-dialog-description-element.js";
+import { AlertDialogElement } from "./ui/alert-dialog/alert-dialog-element.js";
+import { AlertDialogTitleElement } from "./ui/alert-dialog/alert-dialog-title-element.js";
+import { BufferingIndicatorElement } from "./ui/buffering-indicator/buffering-indicator-element.js";
+import { MediaButtonElement } from "./ui/media-button-element.js";
+import { CaptionsButtonElement } from "./ui/captions-button/captions-button-element.js";
+import { ControlsElement } from "./ui/controls/controls-element.js";
+import { ControlsGroupElement } from "./ui/controls/controls-group-element.js";
+import { FullscreenButtonElement } from "./ui/fullscreen-button/fullscreen-button-element.js";
+import { MediaUIElement } from "./ui/media-ui-element.js";
+import { MuteButtonElement } from "./ui/mute-button/mute-button-element.js";
+import { PiPButtonElement } from "./ui/pip-button/pip-button-element.js";
+import { PlayButtonElement } from "./ui/play-button/play-button-element.js";
+import { PlaybackRateButtonElement } from "./ui/playback-rate-button/playback-rate-button-element.js";
+import { PopoverElement } from "./ui/popover/popover-element.js";
+import { PosterElement } from "./ui/poster/poster-element.js";
+import { SeekButtonElement } from "./ui/seek-button/seek-button-element.js";
+import { SliderContextValue, sliderContext } from "./ui/slider/context.js";
+import { SliderBufferElement } from "./ui/slider/slider-buffer-element.js";
+import { SliderElement } from "./ui/slider/slider-element.js";
+import { SliderEventMap, SliderValueEventDetail } from "./ui/slider/slider-events.js";
+import { SliderFillElement } from "./ui/slider/slider-fill-element.js";
+import { SliderThumbElement } from "./ui/slider/slider-thumb-element.js";
+import { ThumbnailElement } from "./ui/thumbnail/thumbnail-element.js";
+import { SliderThumbnailElement } from "./ui/slider/slider-thumbnail-element.js";
+import { SliderTrackElement } from "./ui/slider/slider-track-element.js";
+import { SliderValueElement } from "./ui/slider/slider-value-element.js";
+import { TimeElement } from "./ui/time/time-element.js";
+import { TimeGroupElement } from "./ui/time/time-group-element.js";
+import { TimeSeparatorElement } from "./ui/time/time-separator-element.js";
+import { TimeSliderElement } from "./ui/time-slider/time-slider-element.js";
+import { tooltipGroupContext } from "./ui/tooltip/context.js";
+import { TooltipElement } from "./ui/tooltip/tooltip-element.js";
+import { TooltipGroupElement } from "./ui/tooltip/tooltip-group-element.js";
+import { VolumeSliderElement } from "./ui/volume-slider/volume-slider-element.js";
+import { MediaContainerElement } from "./media/container-element.js";
+import { Comparator, Selector, createSelector, shallowEqual } from "@videojs/store";
+export * from "@videojs/core/dom";
+export { AlertDialogCloseElement, type AlertDialogContextValue, AlertDialogDescriptionElement, AlertDialogElement, AlertDialogTitleElement, BufferingIndicatorElement, CaptionsButtonElement, type Comparator, ContainerMixin, ControlsElement, ControlsGroupElement, CreatePlayerConfig, CreatePlayerResult, FullscreenButtonElement, MediaButtonElement, MediaContainerElement, MediaElement, MediaElementConstructor, MediaUIElement, MuteButtonElement, PLAYER_CONTEXT_KEY, PiPButtonElement, PlayButtonElement, PlaybackRateButtonElement, PlayerConsumer, PlayerConsumerConstructor, PlayerContext, PlayerContextValue, PlayerController, PlayerControllerHost, PlayerProvider, PlayerProviderConstructor, PopoverElement, PosterElement, ProviderMixin, SeekButtonElement, type Selector, SliderBufferElement, type SliderContextValue, SliderElement, type SliderEventMap, SliderFillElement, SliderThumbElement, SliderThumbnailElement, SliderTrackElement, SliderValueElement, type SliderValueEventDetail, ThumbnailElement, TimeElement, TimeGroupElement, TimeSeparatorElement, TimeSliderElement, TooltipElement, TooltipGroupElement, VolumeSliderElement, alertDialogContext, createContainerMixin, createPlayer, createProviderMixin, createSelector, playerContext, shallowEqual, sliderContext, tooltipGroupContext };

package/dist/dev/index.js

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

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

@@ -0,0 +1,15 @@
+//#region src/media/background-video/index.d.ts
+declare function getTemplateHTML(attrs: Record<string, string>): string;
+declare class BackgroundVideo extends HTMLElement {
+  static shadowRootOptions: {
+    mode: ShadowRootMode;
+  };
+  static getTemplateHTML: typeof getTemplateHTML;
+  static get observedAttributes(): string[];
+  constructor();
+  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void;
+  get target(): HTMLVideoElement | null;
+}
+//#endregion
+export { BackgroundVideo };
+//# sourceMappingURL=index.d.ts.map

package/dist/dev/media/background-video/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/background-video/index.ts"],"mappings":";iBAES,eAAA,CAAgB,KAAA,EAAO,MAAA;AAAA,cAsBnB,eAAA,SAAwB,WAAA;EAAA,OAC5B,iBAAA;UAAsC,cAAA;EAAA;EAAA,OACtC,eAAA,SAAe,eAAA;EAAA,WACX,kBAAA,CAAA;;EA6BX,wBAAA,CAAyB,QAAA,UAAkB,QAAA,iBAAyB,QAAA;EAAA,IAMhE,MAAA,CAAA,GAAU,gBAAA;AAAA"}

package/dist/dev/media/background-video/index.js

@@ -0,0 +1,83 @@
+import { namedNodeMapToObject } from "@videojs/utils/dom";
+
+//#region src/media/background-video/index.ts
+function getTemplateHTML(attrs) {
+	return `
+    <style>
+      :host {
+        position: relative;
+      }
+
+      video {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: var(--media-object-fit, inherit);
+        object-position: var(--media-object-position, 50% 50%);
+      }
+    </style>
+    <slot></slot>
+    <video ${serializeAttributes(attrs)}></video>
+  `;
+}
+var BackgroundVideo = class extends HTMLElement {
+	static {
+		this.shadowRootOptions = { mode: "open" };
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+	static get observedAttributes() {
+		return ["src"];
+	}
+	constructor() {
+		super();
+		if (!this.shadowRoot) {
+			this.attachShadow(this.constructor.shadowRootOptions);
+			const attrs = {
+				...namedNodeMapToObject(this.attributes),
+				...!this.hasAttribute("nomuted") && { muted: "" },
+				...!this.hasAttribute("noloop") && { loop: "" },
+				...!this.hasAttribute("noautoplay") && { autoplay: "" },
+				playsinline: "",
+				disableremoteplayback: "",
+				disablepictureinpicture: ""
+			};
+			this.shadowRoot.innerHTML = getTemplateHTML(attrs);
+		}
+		this.target.muted = !this.hasAttribute("nomuted");
+	}
+	attributeChangedCallback(attrName, oldValue, newValue) {
+		if (attrName === "src" && oldValue !== newValue) this.target.src = newValue ?? "";
+	}
+	get target() {
+		return this.querySelector(":scope > [slot=media]") ?? this.querySelector("video") ?? this.shadowRoot?.querySelector("video") ?? null;
+	}
+};
+const VideoAttributes = [
+	"autoplay",
+	"controls",
+	"controlslist",
+	"crossorigin",
+	"disablepictureinpicture",
+	"disableremoteplayback",
+	"loop",
+	"muted",
+	"playsinline",
+	"preload"
+];
+function serializeAttributes(attrs) {
+	let html = "";
+	for (const key in attrs) {
+		if (!VideoAttributes.includes(key)) continue;
+		const value = attrs[key];
+		if (value === "") html += ` ${key}`;
+		else html += ` ${key}="${value}"`;
+	}
+	return html;
+}
+
+//#endregion
+export { BackgroundVideo };
+//# sourceMappingURL=index.js.map

package/dist/dev/media/background-video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/background-video/index.ts"],"sourcesContent":["import { namedNodeMapToObject } from '@videojs/utils/dom';\n\nfunction getTemplateHTML(attrs: Record<string, string>) {\n  return /*html*/ `\n    <style>\n      :host {\n        position: relative;\n      }\n\n      video {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: var(--media-object-fit, inherit);\n        object-position: var(--media-object-position, 50% 50%);\n      }\n    </style>\n    <slot></slot>\n    <video ${serializeAttributes(attrs)}></video>\n  `;\n}\n\n// Don't extend CustomMediaMixin to save some bytes, background videos don't need the full Media API.\nexport class BackgroundVideo extends HTMLElement {\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n  static get observedAttributes() {\n    return ['src'];\n  }\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof BackgroundVideo).shadowRootOptions);\n\n      const attrs = {\n        ...namedNodeMapToObject(this.attributes),\n        ...(!this.hasAttribute('nomuted') && { muted: '' }),\n        ...(!this.hasAttribute('noloop') && { loop: '' }),\n        ...(!this.hasAttribute('noautoplay') && { autoplay: '' }),\n        playsinline: '',\n        disableremoteplayback: '',\n        disablepictureinpicture: '',\n      };\n\n      this.shadowRoot!.innerHTML = getTemplateHTML(attrs);\n    }\n\n    // Neither Chrome or Firefox support setting the muted attribute\n    // after using document.createElement.\n    // Get around this by setting the muted property manually.\n    this.target!.muted = !this.hasAttribute('nomuted');\n  }\n\n  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {\n    if (attrName === 'src' && oldValue !== newValue) {\n      this.target!.src = newValue ?? '';\n    }\n  }\n\n  get target(): HTMLVideoElement | null {\n    return (\n      this.querySelector(':scope > [slot=media]') ??\n      this.querySelector('video') ??\n      this.shadowRoot?.querySelector('video') ??\n      null\n    );\n  }\n}\n\nconst VideoAttributes = [\n  'autoplay',\n  'controls',\n  'controlslist',\n  'crossorigin',\n  'disablepictureinpicture',\n  'disableremoteplayback',\n  'loop',\n  'muted',\n  'playsinline',\n  'preload',\n] as const;\n\nfunction serializeAttributes(attrs: Record<string, string>): string {\n  let html = '';\n  for (const key in attrs) {\n    // Skip forwarding non native video attributes.\n    if (!VideoAttributes.includes(key as any)) continue;\n\n    const value = attrs[key];\n    if (value === '') html += ` ${key}`;\n    else html += ` ${key}=\"${value}\"`;\n  }\n  return html;\n}\n"],"mappings":";;;AAEA,SAAS,gBAAgB,OAA+B;AACtD,QAAgB;;;;;;;;;;;;;;;;aAgBL,oBAAoB,MAAM,CAAC;;;AAKxC,IAAa,kBAAb,cAAqC,YAAY;;2BACpB,EAAE,MAAM,QAA0B;;;yBACpC;;CACzB,WAAW,qBAAqB;AAC9B,SAAO,CAAC,MAAM;;CAGhB,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAuC,kBAAkB;GAEjF,MAAM,QAAQ;IACZ,GAAG,qBAAqB,KAAK,WAAW;IACxC,GAAI,CAAC,KAAK,aAAa,UAAU,IAAI,EAAE,OAAO,IAAI;IAClD,GAAI,CAAC,KAAK,aAAa,SAAS,IAAI,EAAE,MAAM,IAAI;IAChD,GAAI,CAAC,KAAK,aAAa,aAAa,IAAI,EAAE,UAAU,IAAI;IACxD,aAAa;IACb,uBAAuB;IACvB,yBAAyB;IAC1B;AAED,QAAK,WAAY,YAAY,gBAAgB,MAAM;;AAMrD,OAAK,OAAQ,QAAQ,CAAC,KAAK,aAAa,UAAU;;CAGpD,yBAAyB,UAAkB,UAAyB,UAA+B;AACjG,MAAI,aAAa,SAAS,aAAa,SACrC,MAAK,OAAQ,MAAM,YAAY;;CAInC,IAAI,SAAkC;AACpC,SACE,KAAK,cAAc,wBAAwB,IAC3C,KAAK,cAAc,QAAQ,IAC3B,KAAK,YAAY,cAAc,QAAQ,IACvC;;;AAKN,MAAM,kBAAkB;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,oBAAoB,OAAuC;CAClE,IAAI,OAAO;AACX,MAAK,MAAM,OAAO,OAAO;AAEvB,MAAI,CAAC,gBAAgB,SAAS,IAAW,CAAE;EAE3C,MAAM,QAAQ,MAAM;AACpB,MAAI,UAAU,GAAI,SAAQ,IAAI;MACzB,SAAQ,IAAI,IAAI,IAAI,MAAM;;AAEjC,QAAO"}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { HlsCustomMedia } from "@videojs/core/dom/media/hls";
+
+//#region src/media/hls-video/index.d.ts
+declare class HlsVideo extends HlsCustomMedia {
+  static getTemplateHTML(attrs: Record<string, string>): string;
+  constructor();
+  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void;
+  disconnectedCallback(): void;
+}
+//#endregion
+export { HlsVideo };
+//# sourceMappingURL=index.d.ts.map

package/dist/dev/media/hls-video/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/hls-video/index.ts"],"mappings":";;;cAEa,QAAA,SAAiB,cAAA;EAAA,OACrB,eAAA,CAAgB,KAAA,EAAO,MAAA;;EAe9B,wBAAA,CAAyB,QAAA,UAAkB,QAAA,iBAAyB,QAAA;EAUpE,oBAAA,CAAA;AAAA"}

package/dist/dev/media/hls-video/index.js

@@ -0,0 +1,25 @@
+import { HlsCustomMedia } from "@videojs/core/dom/media/hls";
+
+//#region src/media/hls-video/index.ts
+var HlsVideo = class extends HlsCustomMedia {
+	static getTemplateHTML(attrs) {
+		const { src, ...rest } = attrs;
+		return super.getTemplateHTML(rest);
+	}
+	constructor() {
+		super();
+		this.attach(this.target);
+	}
+	attributeChangedCallback(attrName, oldValue, newValue) {
+		if (attrName !== "src") super.attributeChangedCallback(attrName, oldValue, newValue);
+		if (attrName === "src" && oldValue !== newValue) this.src = newValue ?? "";
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback?.();
+		if (!this.hasAttribute("keep-alive")) this.destroy();
+	}
+};
+
+//#endregion
+export { HlsVideo };
+//# sourceMappingURL=index.js.map

package/dist/dev/media/hls-video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/hls-video/index.ts"],"sourcesContent":["import { HlsCustomMedia } from '@videojs/core/dom/media/hls';\n\nexport class HlsVideo extends HlsCustomMedia {\n  static getTemplateHTML(attrs: Record<string, string>): string {\n    const { src, ...rest } = attrs;\n    // biome-ignore lint/complexity/noThisInStatic: intentional use of super\n    return super.getTemplateHTML(rest);\n  }\n\n  constructor() {\n    super();\n    // TODO: If we like to support native media elements that\n    // are appended after the custom element is created, we need to\n    // attach the native element to the Media API after the native element\n    // is appended to the DOM. This is currently not supported.\n    this.attach(this.target);\n  }\n\n  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {\n    if (attrName !== 'src') {\n      super.attributeChangedCallback(attrName, oldValue, newValue);\n    }\n\n    if (attrName === 'src' && oldValue !== newValue) {\n      this.src = newValue ?? '';\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n\n    if (!this.hasAttribute('keep-alive')) {\n      this.destroy();\n    }\n  }\n}\n"],"mappings":";;;AAEA,IAAa,WAAb,cAA8B,eAAe;CAC3C,OAAO,gBAAgB,OAAuC;EAC5D,MAAM,EAAE,KAAK,GAAG,SAAS;AAEzB,SAAO,MAAM,gBAAgB,KAAK;;CAGpC,cAAc;AACZ,SAAO;AAKP,OAAK,OAAO,KAAK,OAAO;;CAG1B,yBAAyB,UAAkB,UAAyB,UAA+B;AACjG,MAAI,aAAa,MACf,OAAM,yBAAyB,UAAU,UAAU,SAAS;AAG9D,MAAI,aAAa,SAAS,aAAa,SACrC,MAAK,MAAM,YAAY;;CAI3B,uBAA6B;AAC3B,QAAM,wBAAwB;AAE9B,MAAI,CAAC,KAAK,aAAa,aAAa,CAClC,MAAK,SAAS"}

package/dist/dev/media/simple-hls-video/index.d.ts

@@ -0,0 +1,11 @@
+import { SimpleHlsCustomMedia } from "@videojs/core/dom/media/simple-hls";
+
+//#region src/media/simple-hls-video/index.d.ts
+declare class SimpleHlsVideo extends SimpleHlsCustomMedia {
+  static getTemplateHTML(attrs: Record<string, string>): string;
+  constructor();
+  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void;
+}
+//#endregion
+export { SimpleHlsVideo };
+//# sourceMappingURL=index.d.ts.map

package/dist/dev/media/simple-hls-video/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/simple-hls-video/index.ts"],"mappings":";;;cAEa,cAAA,SAAuB,oBAAA;EAAA,OAC3B,eAAA,CAAgB,KAAA,EAAO,MAAA;;EAW9B,wBAAA,CAAyB,QAAA,UAAkB,QAAA,iBAAyB,QAAA;AAAA"}

package/dist/dev/media/simple-hls-video/index.js

@@ -0,0 +1,21 @@
+import { SimpleHlsCustomMedia } from "@videojs/core/dom/media/simple-hls";
+
+//#region src/media/simple-hls-video/index.ts
+var SimpleHlsVideo = class extends SimpleHlsCustomMedia {
+	static getTemplateHTML(attrs) {
+		const { src, ...rest } = attrs;
+		return super.getTemplateHTML(rest);
+	}
+	constructor() {
+		super();
+		this.attach(this.target);
+	}
+	attributeChangedCallback(attrName, oldValue, newValue) {
+		if (attrName !== "src") super.attributeChangedCallback(attrName, oldValue, newValue);
+		if (attrName === "src" && oldValue !== newValue) this.src = newValue ?? "";
+	}
+};
+
+//#endregion
+export { SimpleHlsVideo };
+//# sourceMappingURL=index.js.map

package/dist/dev/media/simple-hls-video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/simple-hls-video/index.ts"],"sourcesContent":["import { SimpleHlsCustomMedia } from '@videojs/core/dom/media/simple-hls';\n\nexport class SimpleHlsVideo extends SimpleHlsCustomMedia {\n  static getTemplateHTML(attrs: Record<string, string>): string {\n    const { src, ...rest } = attrs;\n    // biome-ignore lint/complexity/noThisInStatic: intentional use of super\n    return super.getTemplateHTML(rest);\n  }\n\n  constructor() {\n    super();\n    this.attach(this.target);\n  }\n\n  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {\n    if (attrName !== 'src') {\n      super.attributeChangedCallback(attrName, oldValue, newValue);\n    }\n\n    if (attrName === 'src' && oldValue !== newValue) {\n      this.src = newValue ?? '';\n    }\n  }\n}\n"],"mappings":";;;AAEA,IAAa,iBAAb,cAAoC,qBAAqB;CACvD,OAAO,gBAAgB,OAAuC;EAC5D,MAAM,EAAE,KAAK,GAAG,SAAS;AAEzB,SAAO,MAAM,gBAAgB,KAAK;;CAGpC,cAAc;AACZ,SAAO;AACP,OAAK,OAAO,KAAK,OAAO;;CAG1B,yBAAyB,UAAkB,UAAyB,UAA+B;AACjG,MAAI,aAAa,MACf,OAAM,yBAAyB,UAAU,UAAU,SAAS;AAG9D,MAAI,aAAa,SAAS,aAAa,SACrC,MAAK,MAAM,YAAY"}

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

@@ -0,0 +1,16 @@
+import { AnyPlayerStore, PlayerStore } from "@videojs/core/dom";
+import { Context } from "@videojs/element/context";
+
+//#region src/player/context.d.ts
+declare const PLAYER_CONTEXT_KEY: unique symbol;
+type PlayerContextValue<Store extends PlayerStore = AnyPlayerStore> = Store;
+type PlayerContext<Store extends PlayerStore = AnyPlayerStore> = Context<typeof PLAYER_CONTEXT_KEY, PlayerContextValue<Store>>;
+/**
+ * The default player context instance for consuming the player store in controllers.
+ *
+ * @public
+ */
+declare const playerContext: Context<typeof PLAYER_CONTEXT_KEY, AnyPlayerStore>;
+//#endregion
+export { PLAYER_CONTEXT_KEY, PlayerContext, PlayerContextValue, playerContext };
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/player/context.ts"],"mappings":";;;;cAGa,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"}

package/dist/dev/player/context.js

@@ -0,0 +1,14 @@
+import { createContext } from "@videojs/element/context";
+
+//#region src/player/context.ts
+const PLAYER_CONTEXT_KEY = Symbol("@videojs/player");
+/**
+* The default player context instance for consuming the player store in controllers.
+*
+* @public
+*/
+const playerContext = createContext(PLAYER_CONTEXT_KEY);
+
+//#endregion
+export { PLAYER_CONTEXT_KEY, playerContext };
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.ts"],"sourcesContent":["import type { AnyPlayerStore, PlayerStore } from '@videojs/core/dom';\nimport { type Context, createContext } from '@videojs/element/context';\n\nexport const PLAYER_CONTEXT_KEY = Symbol('@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"],"mappings":";;;AAGA,MAAa,qBAAqB,OAAO,kBAAkB;;;;;;AAc3D,MAAa,gBAAgB,cAA6D,mBAAmB"}

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

@@ -0,0 +1,65 @@
+import { PlayerContext } from "./context.js";
+import { ContainerMixin } from "../store/container-mixin.js";
+import { ProviderMixin } from "../store/provider-mixin.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;
+  /** 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 auto-attaches media elements. */
+  ContainerMixin: ContainerMixin<Store>;
+}
+/**
+ * Creates a player factory with typed store, mixins, and controller.
+ *
+ * @example
+ * ```ts
+ * import { createPlayer, MediaElement, selectPlayback } from '@videojs/html';
+ * import { videoFeatures } from '@videojs/html/video';
+ *
+ * const { ProviderMixin, ContainerMixin, PlayerController, context } = createPlayer({
+ *   features: videoFeatures,
+ * });
+ *
+ * // Provider element: owns the store, provides context to descendants
+ * class VideoPlayer extends ProviderMixin(MediaElement) {}
+ * customElements.define('video-player', VideoPlayer);
+ *
+ * // Control element with selector
+ * class PlayButton extends MediaElement {
+ *   #playback = new PlayerController(this, context, selectPlayback);
+ * }
+ * ```
+ *
+ * @label Video
+ * @param config - Player configuration with features.
+ */
+declare function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;
+/**
+ * Creates a player factory for audio media.
+ *
+ * @label Audio
+ * @param config - Player configuration with features.
+ */
+declare function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;
+/**
+ * Creates a player factory with custom features.
+ *
+ * @label Generic
+ * @param config - Player configuration with features.
+ */
+declare function createPlayer<const Features extends AnyPlayerFeature[]>(config: CreatePlayerConfig<Features>): CreatePlayerResult<PlayerStore<Features>>;
+//#endregion
+export { CreatePlayerConfig, CreatePlayerResult, createPlayer };
+//# sourceMappingURL=create-player.d.ts.map

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

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

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

@@ -0,0 +1,24 @@
+import { 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 { combine, createStore } from "@videojs/store";
+
+//#region src/player/create-player.ts
+function createPlayer(config) {
+	const slice = combine(...config.features);
+	function create() {
+		return createStore()(slice);
+	}
+	return {
+		context: playerContext,
+		create,
+		PlayerController,
+		ProviderMixin: createProviderMixin(playerContext, create),
+		ContainerMixin: createContainerMixin(playerContext)
+	};
+}
+
+//#endregion
+export { createPlayer };
+//# sourceMappingURL=create-player.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.ts"],"sourcesContent":["import type {\n  AnyPlayerFeature,\n  AudioFeatures,\n  AudioPlayerStore,\n  PlayerStore,\n  PlayerTarget,\n  VideoFeatures,\n  VideoPlayerStore,\n} from '@videojs/core/dom';\nimport { combine, createStore } from '@videojs/store';\n\nimport { type ContainerMixin, createContainerMixin } from '../store/container-mixin';\nimport { createProviderMixin, type ProviderMixin } from '../store/provider-mixin';\nimport { type PlayerContext, playerContext } from './context';\nimport { PlayerController } from './player-controller';\n\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  features: Features;\n}\n\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  /** Context for consuming player in controllers. */\n  context: PlayerContext<Store>;\n\n  /** Creates a store instance for imperative access. */\n  create: () => Store;\n\n  /** Player controller bound to this player's context. */\n  PlayerController: PlayerController.Constructor<Store>;\n\n  /** Mixin that provides player context to descendants. */\n  ProviderMixin: ProviderMixin<Store>;\n\n  /** Mixin that consumes player context and auto-attaches media elements. */\n  ContainerMixin: ContainerMixin<Store>;\n}\n\n/**\n * Creates a player factory with typed store, mixins, and controller.\n *\n * @example\n * ```ts\n * import { createPlayer, MediaElement, 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>(playerContext, create);\n  const ContainerMixin = createContainerMixin<PlayerStore>(playerContext);\n\n  return {\n    context: playerContext,\n    create,\n    PlayerController,\n    ProviderMixin,\n    ContainerMixin,\n  };\n}\n"],"mappings":";;;;;;;AAkFA,SAAgB,aAAa,QAAiF;CAC5G,MAAM,QAAQ,QAA0C,GAAG,OAAO,SAAS;CAE3E,SAAS,SAAsB;AAC7B,SAAO,aAA2B,CAAC,MAAM;;AAM3C,QAAO;EACL,SAAS;EACT;EACA;EACA,eAPoB,oBAAiC,eAAe,OAAO;EAQ3E,gBAPqB,qBAAkC,cAAc;EAQtE"}

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

@@ -0,0 +1,57 @@
+import { PlayerContext } from "./context.js";
+import { PlayerStore } from "@videojs/core/dom";
+import { InferStoreState, Selector } from "@videojs/store";
+import { ReactiveController, ReactiveControllerHost } from "@videojs/element";
+
+//#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.
+ *
+ * @example
+ * ```ts
+ * // Store access (no subscription)
+ * class Controls extends MediaElement {
+ *   #player = new PlayerController(this, playerContext);
+ *
+ *   handleClick() {
+ *     this.#player.value.setVolume(0.5);
+ *   }
+ * }
+ *
+ * // Selector-based subscription
+ * class PlayButton extends MediaElement {
+ *   #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.
+   */
+  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.
+   */
+  constructor(host: PlayerControllerHost, context: PlayerContext<Store>, selector: Selector<InferStoreState<Store>, Result>);
+  get value(): Result | undefined;
+  get displayName(): string | undefined;
+  hostConnected(): void;
+  hostDisconnected(): void;
+}
+declare namespace PlayerController {
+  type Host = PlayerControllerHost;
+  type Constructor<Store extends PlayerStore = PlayerStore, Result = Store> = typeof PlayerController<Store, Result>;
+}
+//#endregion
+export { PlayerController, PlayerControllerHost };
+//# sourceMappingURL=player-controller.d.ts.map

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

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

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

@@ -0,0 +1,66 @@
+import { ContextConsumer } from "@videojs/element/context";
+import { StoreController } from "@videojs/store/html";
+
+//#region src/player/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 MediaElement {
+*   #player = new PlayerController(this, playerContext);
+*
+*   handleClick() {
+*     this.#player.value.setVolume(0.5);
+*   }
+* }
+*
+* // Selector-based subscription
+* class PlayButton extends MediaElement {
+*   #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);
+	}
+};
+
+//#endregion
+export { PlayerController };
+//# sourceMappingURL=player-controller.js.map