@videojs/html 10.1.0 → 10.3.0

package/dist/dev/media/hls-audio/adapter.js

@@ -1,6 +1,6 @@
 import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
 import { CustomMediaElement } from "@videojs/media/dom";
-import { HlsAudioAdapter } from "@videojs/spf/hls-audio";
+import { HlsAudioAdapter } from "@videojs/spf/adapters/hls-audio";
 //#region src/media/hls-audio/adapter.ts
 var HlsAudio = class extends MediaAttachMixin(CustomMediaElement("audio", HlsAudioAdapter)) {};
 //#endregion

package/dist/dev/media/hls-audio/adapter.js.map

@@ -1 +1 @@
-{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/hls-audio/adapter.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/media/dom';\nimport { HlsAudioAdapter } from '@videojs/spf/hls-audio';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class HlsAudio extends MediaAttachMixin(CustomMediaElement('audio', HlsAudioAdapter)) {}\n"],"mappings":";;;;AAKA,IAAa,WAAb,cAA8B,iBAAiB,mBAAmB,SAAS,eAAe,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/hls-audio/adapter.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/media/dom';\nimport { HlsAudioAdapter } from '@videojs/spf/adapters/hls-audio';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class HlsAudio extends MediaAttachMixin(CustomMediaElement('audio', HlsAudioAdapter)) {}\n"],"mappings":";;;;AAKA,IAAa,WAAb,cAA8B,iBAAiB,mBAAmB,SAAS,eAAe,CAAC,CAAC,CAAC,CAAC"}

package/dist/dev/media/hls-background-video/adapter.d.ts

@@ -1,6 +1,6 @@
 import { getTemplateHTML } from "../background-video/template.js";
 import { Media } from "@videojs/media/dom";
-import { HlsVideoMediaError } from "@videojs/spf/hls-background-video";
+import { HlsBackgroundVideoAdapter, HlsVideoMediaError } from "@videojs/spf/adapters/hls-background-video";
 //#region src/media/hls-background-video/adapter.d.ts
 interface LifecycleElement extends HTMLElement {
   connectedCallback?(): void;
@@ -53,6 +53,11 @@ export declare class HlsBackgroundVideo extends HlsBackgroundVideoBase {
   constructor();
   /** Register the Media (not the inner `<video>`) with the provider. */
   getMediaTarget(): Media | null;
+  /**
+   * The Media driving the inner `<video>`, matching `adapter` on `CustomMediaElement`. Call `adapter.destroy()` to
+   * release the engine after `keep-alive` kept it running past removal.
+   */
+  get adapter(): HlsBackgroundVideoAdapter;
   disconnectedCallback(): void;
   attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
   /** The inner `<video>` the engine renders into. */

package/dist/dev/media/hls-background-video/adapter.js

@@ -1,7 +1,7 @@
 import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
 import { getTemplateHTML } from "../background-video/template.js";
 import { namedNodeMapToObject } from "@videojs/utils/dom";
-import { HlsBackgroundVideoAdapter } from "@videojs/spf/hls-background-video";
+import { HlsBackgroundVideoAdapter } from "@videojs/spf/adapters/hls-background-video";
 //#region src/media/hls-background-video/adapter.ts
 const HTMLElementBase = globalThis.HTMLElement ?? class {};
 const HlsBackgroundVideoBase = MediaAttachMixin(HTMLElementBase);
@@ -73,6 +73,13 @@ var HlsBackgroundVideo = class extends HlsBackgroundVideoBase {
 	getMediaTarget() {
 		return this.#media;
 	}
+	/**
+	* The Media driving the inner `<video>`, matching `adapter` on `CustomMediaElement`. Call `adapter.destroy()` to
+	* release the engine after `keep-alive` kept it running past removal.
+	*/
+	get adapter() {
+		return this.#media;
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback?.();
 		if (this.hasAttribute("keep-alive")) return;

package/dist/dev/media/hls-background-video/adapter.js.map

@@ -1 +1 @@
-{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/hls-background-video/adapter.ts"],"sourcesContent":["import type { Media } from '@videojs/media/dom';\nimport { HlsBackgroundVideoAdapter, type HlsVideoMediaError } from '@videojs/spf/hls-background-video';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\nimport { getTemplateHTML } from '../background-video/template';\n\nconst HTMLElementBase = globalThis.HTMLElement ?? class {};\n\n// `MediaAttachMixin` is typed as returning its base, so its `disconnectedCallback`\n// isn't visible for `super` to reach. `LifecycleElement` declares the lifecycle\n// callbacks this element overrides; method syntax lets a subclass override them.\ninterface LifecycleElement extends HTMLElement {\n  connectedCallback?(): void;\n  disconnectedCallback?(): void;\n  adoptedCallback?(): void;\n  attributeChangedCallback?(name: string, oldValue: string | null, newValue: string | null): void;\n}\n\nconst HlsBackgroundVideoBase = MediaAttachMixin(HTMLElementBase) as unknown as new () => LifecycleElement;\n\n/**\n * A muted, looping, chrome-less video over the SPF background-video engine.\n *\n * The SPF-backed counterpart to `<background-video>`, which plays its source natively. This one streams HLS through the\n * engine, which pins a single rendition for the session rather than adapting, and drops audio and text handling\n * entirely — the shape an ambient hero video actually wants.\n *\n * Nearer an image than a player, and `src` is the whole surface. Replaces the standalone `mux-background-video`\n * package, whose `audio`, `debug`, `preload`, and `max-resolution` attributes are all deliberately absent. Capping\n * which rendition is fetched is a delivery param on the URL — `?max_resolution=720p` on a Mux stream, for one — which\n * keeps the renditions it excludes out of the manifest rather than merely unpicked; `preload` would have nothing to\n * say, since the engine loads from the moment it has a source. And unlike `<background-video>` there are no `nomuted` /\n * `noloop` / `noautoplay` opt-outs: those three are what this element is for, so the adapter fixes them on at attach.\n *\n * Takes no structured `source` — `src` is an HLS URL, as the package it replaces required. Mux playback-ID identity,\n * poster, and storyboard belong to `<mux-video>`; none of them mean anything without controls to hang them on.\n *\n * Nothing about an unplayable source reaches the inner `<video>` on its own, so `error` on it stays null and the\n * element sits at `readyState 0`. The engine reports each condition and logs it, the Media promotes the fatal one, and\n * this element re-fires it as its own `error` / `'error'` — the one place a consumer holding the element can see a\n * source that never appears.\n *\n * @example\n *   ```html\n *   <hls-background-video src=\"https://stream.mux.com/PLAYBACK_ID.m3u8?max_resolution=720p\">\n *   <img src=\"https://image.mux.com/PLAYBACK_ID/thumbnail.webp?time=0\" alt=\"\" />\n *   </hls-background-video>\n *   ```;\n *\n * @fires error - Fired when a fatal condition is reported. Read `error` for it.\n *\n *   `<mux-background-video>` is this element under the name the package it replaces used. Same class, so the tag is a\n *   naming choice and nothing more.\n */\n// Deliberately not `CustomMediaElement`, matching `<background-video>`: a\n// background video needs one property, not the full WHATWG media API.\nexport class HlsBackgroundVideo extends HlsBackgroundVideoBase {\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n\n  static get observedAttributes(): string[] {\n    return ['src'];\n  }\n\n  #media = new HlsBackgroundVideoAdapter();\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof HlsBackgroundVideo).shadowRootOptions);\n\n      const attrs = {\n        ...namedNodeMapToObject(this.attributes),\n        muted: '',\n        loop: '',\n        autoplay: '',\n        playsinline: '',\n        disableremoteplayback: '',\n        disablepictureinpicture: '',\n      };\n\n      this.shadowRoot!.innerHTML = getTemplateHTML(attrs);\n    }\n\n    // Neither Chrome nor Firefox honor a `muted` attribute set after\n    // `document.createElement`, and autoplay is refused without it. Attaching is\n    // what sets the property — along with the rest of the fixed behavior — so\n    // nothing here needs to repeat it.\n    const video = this.video;\n\n    if (video) this.#media.attach(video);\n\n    // Re-fired rather than bridged on demand the way `CustomMediaElement` does\n    // it: one listener for the one event this element has, on a Media it owns\n    // for its whole life, is less than the machinery to defer it would cost.\n    this.#media.addEventListener('error', () => this.dispatchEvent(new Event('error')));\n  }\n\n  /** Register the Media (not the inner `<video>`) with the provider. */\n  getMediaTarget(): Media | null {\n    return this.#media as unknown as Media;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n\n    if (this.hasAttribute('keep-alive')) return;\n\n    // Deferred so a synchronous reparent (remove then insert) doesn't tear down\n    // the engine, matching `CustomMediaElement`.\n    queueMicrotask(() => {\n      if (!this.isConnected) this.#media.destroy();\n    });\n  }\n\n  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {\n    if (oldValue === newValue) return;\n\n    if (name === 'src') this.src = newValue ?? '';\n  }\n\n  /** The inner `<video>` the engine renders into. */\n  get video(): HTMLVideoElement | null {\n    const video = this.shadowRoot?.querySelector('video');\n\n    return video instanceof HTMLVideoElement ? video : null;\n  }\n\n  /**\n   * What made the current source unplayable, or `null`. An SVTA code rather than a `MediaError` one — 99001 where this\n   * player has no pipeline for what the source needs, with the specifics logged. Reset by a new source, and not on the\n   * inner `<video>`, which never learns of it.\n   */\n  get error(): HlsVideoMediaError | null {\n    return this.#media.error;\n  }\n\n  /** HLS manifest URL. Assigning a new one restarts playback from scratch. */\n  get src(): string {\n    return this.#media.src;\n  }\n\n  set src(value: string) {\n    this.#media.src = value;\n  }\n}\n"],"mappings":";;;;;AAOA,MAAM,kBAAkB,WAAW,eAAe,MAAM,CAAC;AAYzD,MAAM,yBAAyB,iBAAiB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsC/D,IAAa,qBAAb,cAAwC,uBAAuB;;EAClC,KAAA,oBAAA,EAAE,MAAM,OAAyB;;;EACnC,KAAA,kBAAA;;CAEzB,WAAW,qBAA+B;EACxC,OAAO,CAAC,KAAK;CACf;CAEA,SAAS,IAAI,0BAA0B;CAEvC,cAAc;EACZ,MAAM;EAEN,IAAI,CAAC,KAAK,YAAY;GACpB,KAAK,aAAc,KAAK,YAA0C,iBAAiB;GAEnF,MAAM,QAAQ;IACZ,GAAG,qBAAqB,KAAK,UAAU;IACvC,OAAO;IACP,MAAM;IACN,UAAU;IACV,aAAa;IACb,uBAAuB;IACvB,yBAAyB;GAC3B;GAEA,KAAK,WAAY,YAAY,gBAAgB,KAAK;EACpD;EAMA,MAAM,QAAQ,KAAK;EAEnB,IAAI,OAAO,KAAK,OAAO,OAAO,KAAK;EAKnC,KAAK,OAAO,iBAAiB,eAAe,KAAK,cAAc,IAAI,MAAM,OAAO,CAAC,CAAC;CACpF;;CAGA,iBAA+B;EAC7B,OAAO,KAAK;CACd;CAEA,uBAAsC;EACpC,MAAM,uBAAuB;EAE7B,IAAI,KAAK,aAAa,YAAY,GAAG;EAIrC,qBAAqB;GACnB,IAAI,CAAC,KAAK,aAAa,KAAK,OAAO,QAAQ;EAC7C,CAAC;CACH;CAEA,yBAAyB,MAAc,UAAyB,UAA+B;EAC7F,IAAI,aAAa,UAAU;EAE3B,IAAI,SAAS,OAAO,KAAK,MAAM,YAAY;CAC7C;;CAGA,IAAI,QAAiC;EACnC,MAAM,QAAQ,KAAK,YAAY,cAAc,OAAO;EAEpD,OAAO,iBAAiB,mBAAmB,QAAQ;CACrD;;;;;;CAOA,IAAI,QAAmC;EACrC,OAAO,KAAK,OAAO;CACrB;;CAGA,IAAI,MAAc;EAChB,OAAO,KAAK,OAAO;CACrB;CAEA,IAAI,IAAI,OAAe;EACrB,KAAK,OAAO,MAAM;CACpB;AACF"}
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/hls-background-video/adapter.ts"],"sourcesContent":["import type { Media } from '@videojs/media/dom';\nimport { HlsBackgroundVideoAdapter, type HlsVideoMediaError } from '@videojs/spf/adapters/hls-background-video';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\nimport { getTemplateHTML } from '../background-video/template';\n\nconst HTMLElementBase = globalThis.HTMLElement ?? class {};\n\n// `MediaAttachMixin` is typed as returning its base, so its `disconnectedCallback`\n// isn't visible for `super` to reach. `LifecycleElement` declares the lifecycle\n// callbacks this element overrides; method syntax lets a subclass override them.\ninterface LifecycleElement extends HTMLElement {\n  connectedCallback?(): void;\n  disconnectedCallback?(): void;\n  adoptedCallback?(): void;\n  attributeChangedCallback?(name: string, oldValue: string | null, newValue: string | null): void;\n}\n\nconst HlsBackgroundVideoBase = MediaAttachMixin(HTMLElementBase) as unknown as new () => LifecycleElement;\n\n/**\n * A muted, looping, chrome-less video over the SPF background-video engine.\n *\n * The SPF-backed counterpart to `<background-video>`, which plays its source natively. This one streams HLS through the\n * engine, which pins a single rendition for the session rather than adapting, and drops audio and text handling\n * entirely — the shape an ambient hero video actually wants.\n *\n * Nearer an image than a player, and `src` is the whole surface. Replaces the standalone `mux-background-video`\n * package, whose `audio`, `debug`, `preload`, and `max-resolution` attributes are all deliberately absent. Capping\n * which rendition is fetched is a delivery param on the URL — `?max_resolution=720p` on a Mux stream, for one — which\n * keeps the renditions it excludes out of the manifest rather than merely unpicked; `preload` would have nothing to\n * say, since the engine loads from the moment it has a source. And unlike `<background-video>` there are no `nomuted` /\n * `noloop` / `noautoplay` opt-outs: those three are what this element is for, so the adapter fixes them on at attach.\n *\n * Takes no structured `source` — `src` is an HLS URL, as the package it replaces required. Mux playback-ID identity,\n * poster, and storyboard belong to `<mux-video>`; none of them mean anything without controls to hang them on.\n *\n * Nothing about an unplayable source reaches the inner `<video>` on its own, so `error` on it stays null and the\n * element sits at `readyState 0`. The engine reports each condition and logs it, the Media promotes the fatal one, and\n * this element re-fires it as its own `error` / `'error'` — the one place a consumer holding the element can see a\n * source that never appears.\n *\n * @example\n *   ```html\n *   <hls-background-video src=\"https://stream.mux.com/PLAYBACK_ID.m3u8?max_resolution=720p\">\n *   <img src=\"https://image.mux.com/PLAYBACK_ID/thumbnail.webp?time=0\" alt=\"\" />\n *   </hls-background-video>\n *   ```;\n *\n * @fires error - Fired when a fatal condition is reported. Read `error` for it.\n *\n *   `<mux-background-video>` is this element under the name the package it replaces used. Same class, so the tag is a\n *   naming choice and nothing more.\n */\n// Deliberately not `CustomMediaElement`, matching `<background-video>`: a\n// background video needs one property, not the full WHATWG media API.\nexport class HlsBackgroundVideo extends HlsBackgroundVideoBase {\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n\n  static get observedAttributes(): string[] {\n    return ['src'];\n  }\n\n  #media = new HlsBackgroundVideoAdapter();\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof HlsBackgroundVideo).shadowRootOptions);\n\n      const attrs = {\n        ...namedNodeMapToObject(this.attributes),\n        muted: '',\n        loop: '',\n        autoplay: '',\n        playsinline: '',\n        disableremoteplayback: '',\n        disablepictureinpicture: '',\n      };\n\n      this.shadowRoot!.innerHTML = getTemplateHTML(attrs);\n    }\n\n    // Neither Chrome nor Firefox honor a `muted` attribute set after\n    // `document.createElement`, and autoplay is refused without it. Attaching is\n    // what sets the property — along with the rest of the fixed behavior — so\n    // nothing here needs to repeat it.\n    const video = this.video;\n\n    if (video) this.#media.attach(video);\n\n    // Re-fired rather than bridged on demand the way `CustomMediaElement` does\n    // it: one listener for the one event this element has, on a Media it owns\n    // for its whole life, is less than the machinery to defer it would cost.\n    this.#media.addEventListener('error', () => this.dispatchEvent(new Event('error')));\n  }\n\n  /** Register the Media (not the inner `<video>`) with the provider. */\n  getMediaTarget(): Media | null {\n    return this.#media as unknown as Media;\n  }\n\n  /**\n   * The Media driving the inner `<video>`, matching `adapter` on `CustomMediaElement`. Call `adapter.destroy()` to\n   * release the engine after `keep-alive` kept it running past removal.\n   */\n  get adapter(): HlsBackgroundVideoAdapter {\n    return this.#media;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n\n    // Only the element's own `keep-alive` counts: an ancestor's `destroy()` can't reach this engine, so inheriting it\n    // would leave the engine running with nothing to release it.\n    if (this.hasAttribute('keep-alive')) return;\n\n    // Deferred so a synchronous reparent (remove then insert) doesn't tear down\n    // the engine, matching `CustomMediaElement`.\n    queueMicrotask(() => {\n      if (!this.isConnected) this.#media.destroy();\n    });\n  }\n\n  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {\n    if (oldValue === newValue) return;\n\n    if (name === 'src') this.src = newValue ?? '';\n  }\n\n  /** The inner `<video>` the engine renders into. */\n  get video(): HTMLVideoElement | null {\n    const video = this.shadowRoot?.querySelector('video');\n\n    return video instanceof HTMLVideoElement ? video : null;\n  }\n\n  /**\n   * What made the current source unplayable, or `null`. An SVTA code rather than a `MediaError` one — 99001 where this\n   * player has no pipeline for what the source needs, with the specifics logged. Reset by a new source, and not on the\n   * inner `<video>`, which never learns of it.\n   */\n  get error(): HlsVideoMediaError | null {\n    return this.#media.error;\n  }\n\n  /** HLS manifest URL. Assigning a new one restarts playback from scratch. */\n  get src(): string {\n    return this.#media.src;\n  }\n\n  set src(value: string) {\n    this.#media.src = value;\n  }\n}\n"],"mappings":";;;;;AAOA,MAAM,kBAAkB,WAAW,eAAe,MAAM,CAAC;AAYzD,MAAM,yBAAyB,iBAAiB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsC/D,IAAa,qBAAb,cAAwC,uBAAuB;;EAClC,KAAA,oBAAA,EAAE,MAAM,OAAyB;;;EACnC,KAAA,kBAAA;;CAEzB,WAAW,qBAA+B;EACxC,OAAO,CAAC,KAAK;CACf;CAEA,SAAS,IAAI,0BAA0B;CAEvC,cAAc;EACZ,MAAM;EAEN,IAAI,CAAC,KAAK,YAAY;GACpB,KAAK,aAAc,KAAK,YAA0C,iBAAiB;GAEnF,MAAM,QAAQ;IACZ,GAAG,qBAAqB,KAAK,UAAU;IACvC,OAAO;IACP,MAAM;IACN,UAAU;IACV,aAAa;IACb,uBAAuB;IACvB,yBAAyB;GAC3B;GAEA,KAAK,WAAY,YAAY,gBAAgB,KAAK;EACpD;EAMA,MAAM,QAAQ,KAAK;EAEnB,IAAI,OAAO,KAAK,OAAO,OAAO,KAAK;EAKnC,KAAK,OAAO,iBAAiB,eAAe,KAAK,cAAc,IAAI,MAAM,OAAO,CAAC,CAAC;CACpF;;CAGA,iBAA+B;EAC7B,OAAO,KAAK;CACd;;;;;CAMA,IAAI,UAAqC;EACvC,OAAO,KAAK;CACd;CAEA,uBAAsC;EACpC,MAAM,uBAAuB;EAI7B,IAAI,KAAK,aAAa,YAAY,GAAG;EAIrC,qBAAqB;GACnB,IAAI,CAAC,KAAK,aAAa,KAAK,OAAO,QAAQ;EAC7C,CAAC;CACH;CAEA,yBAAyB,MAAc,UAAyB,UAA+B;EAC7F,IAAI,aAAa,UAAU;EAE3B,IAAI,SAAS,OAAO,KAAK,MAAM,YAAY;CAC7C;;CAGA,IAAI,QAAiC;EACnC,MAAM,QAAQ,KAAK,YAAY,cAAc,OAAO;EAEpD,OAAO,iBAAiB,mBAAmB,QAAQ;CACrD;;;;;;CAOA,IAAI,QAAmC;EACrC,OAAO,KAAK,OAAO;CACrB;;CAGA,IAAI,MAAc;EAChB,OAAO,KAAK,OAAO;CACrB;CAEA,IAAI,IAAI,OAAe;EACrB,KAAK,OAAO,MAAM;CACpB;AACF"}

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

@@ -1,5 +1,5 @@
 import { CustomMediaConstructor } from "../../index.js";
-import { HlsVideoAdapter } from "@videojs/spf/hls-video";
+import { HlsVideoAdapter } from "@videojs/spf/adapters/hls-video";
 //#region src/media/hls-video/adapter.d.ts
 declare const HlsVideo_base: CustomMediaConstructor<typeof HlsVideoAdapter>;
 export declare class HlsVideo extends HlsVideo_base {}

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

@@ -1,6 +1,6 @@
 import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
 import { CustomMediaElement } from "@videojs/media/dom";
-import { HlsVideoAdapter } from "@videojs/spf/hls-video";
+import { HlsVideoAdapter } from "@videojs/spf/adapters/hls-video";
 //#region src/media/hls-video/adapter.ts
 var HlsVideo = class extends MediaAttachMixin(CustomMediaElement("video", HlsVideoAdapter)) {};
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/hls-video/adapter.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/media/dom';\nimport { HlsVideoAdapter } from '@videojs/spf/hls-video';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class HlsVideo extends MediaAttachMixin(CustomMediaElement('video', HlsVideoAdapter)) {}\n"],"mappings":";;;;AAKA,IAAa,WAAb,cAA8B,iBAAiB,mBAAmB,SAAS,eAAe,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/hls-video/adapter.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/media/dom';\nimport { HlsVideoAdapter } from '@videojs/spf/adapters/hls-video';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class HlsVideo extends MediaAttachMixin(CustomMediaElement('video', HlsVideoAdapter)) {}\n"],"mappings":";;;;AAKA,IAAa,WAAb,cAA8B,iBAAiB,mBAAmB,SAAS,eAAe,CAAC,CAAC,CAAC,CAAC"}

package/dist/dev/media/mixcloud-audio/adapter.d.ts

@@ -0,0 +1,11 @@
+import { CustomMediaConstructor } from "../../index.js";
+import { MixcloudAdapter } from "@videojs/mixcloud-audio";
+//#region src/media/mixcloud-audio/adapter.d.ts
+declare const MixcloudCustomMediaElement_base: CustomMediaConstructor<typeof MixcloudAdapter>;
+declare class MixcloudCustomMediaElement extends MixcloudCustomMediaElement_base {
+  static getTemplateHTML: (attrs: Record<string, string>) => string;
+}
+declare const MixcloudAudio_base: typeof MixcloudCustomMediaElement;
+export declare class MixcloudAudio extends MixcloudAudio_base {}
+//#endregion
+//# sourceMappingURL=adapter.d.ts.map

package/dist/dev/media/mixcloud-audio/adapter.js

@@ -0,0 +1,52 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { escapeHtml } from "@videojs/utils/string";
+import { MixcloudAdapter, buildMixcloudIframeSrc } from "@videojs/mixcloud-audio";
+//#region src/media/mixcloud-audio/adapter.ts
+var MixcloudCustomMediaElement = class extends CustomMediaElement("iframe", MixcloudAdapter) {
+	static {
+		this.getTemplateHTML = (attrs) => {
+			const initialSrc = buildMixcloudIframeSrc(attrs.src ?? "");
+			return `
+      <style>
+        :host {
+          display: block;
+          position: relative;
+          height: 120px;
+        }
+        iframe {
+          position: absolute;
+          inset: 0;
+          width: 100%;
+          height: 100%;
+          border: 0;
+        }
+        /*
+         * The widget is Mixcloud's own chrome, so without controls it is a
+         * transport and nothing else. Hidden rather than merely inert, and
+         * important so a consumer's own display rule cannot put it back on
+         * screen. An iframe in a hidden subtree still loads and plays its src.
+         */
+        :host(:not([controls])) {
+          display: none !important;
+        }
+      </style>
+      <iframe
+        part="iframe"
+        title="Mixcloud audio player"
+        ${initialSrc ? ` src="${escapeHtml(initialSrc)}"` : ""}
+        allow="autoplay; encrypted-media"
+        frameborder="0"
+        width="100%"
+        height="100%"
+        referrerpolicy="${escapeHtml(attrs.referrerpolicy ?? "")}"
+      ></iframe>
+    `;
+		};
+	}
+};
+var MixcloudAudio = class extends MediaAttachMixin(MixcloudCustomMediaElement) {};
+//#endregion
+export { MixcloudAudio };
+
+//# sourceMappingURL=adapter.js.map

package/dist/dev/media/mixcloud-audio/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/mixcloud-audio/adapter.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/media/dom';\nimport { buildMixcloudIframeSrc, MixcloudAdapter } from '@videojs/mixcloud-audio';\nimport { escapeHtml } from '@videojs/utils/string';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nclass MixcloudCustomMediaElement extends CustomMediaElement('iframe', MixcloudAdapter) {\n  static override getTemplateHTML = (attrs: Record<string, string>): string => {\n    const initialSrc = buildMixcloudIframeSrc(attrs.src ?? '');\n    const srcAttr = initialSrc ? ` src=\"${escapeHtml(initialSrc)}\"` : '';\n\n    return /*html*/ `\n      <style>\n        :host {\n          display: block;\n          position: relative;\n          height: 120px;\n        }\n        iframe {\n          position: absolute;\n          inset: 0;\n          width: 100%;\n          height: 100%;\n          border: 0;\n        }\n        /*\n         * The widget is Mixcloud's own chrome, so without controls it is a\n         * transport and nothing else. Hidden rather than merely inert, and\n         * important so a consumer's own display rule cannot put it back on\n         * screen. An iframe in a hidden subtree still loads and plays its src.\n         */\n        :host(:not([controls])) {\n          display: none !important;\n        }\n      </style>\n      <iframe\n        part=\"iframe\"\n        title=\"Mixcloud audio player\"\n        ${srcAttr}\n        allow=\"autoplay; encrypted-media\"\n        frameborder=\"0\"\n        width=\"100%\"\n        height=\"100%\"\n        referrerpolicy=\"${escapeHtml(attrs.referrerpolicy ?? '')}\"\n      ></iframe>\n    `;\n  };\n}\n\nexport class MixcloudAudio extends MediaAttachMixin(MixcloudCustomMediaElement) {}\n"],"mappings":";;;;;AAMA,IAAM,6BAAN,cAAyC,mBAAmB,UAAU,eAAe,CAAC,CAAC;;EAClD,KAAA,mBAAA,UAA0C;GAC3E,MAAM,aAAa,uBAAuB,MAAM,OAAO,EAAE;GAGzD,OAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;UAFA,aAAa,SAAS,WAAW,UAAU,EAAE,KAAK,GA6BpD;;;;;0BAKQ,WAAW,MAAM,kBAAkB,EAAE,EAAE;;;EAG/D;;AACF;AAEA,IAAa,gBAAb,cAAmC,iBAAiB,0BAA0B,CAAC,CAAC,CAAC"}

package/dist/dev/media/mixcloud-audio/index.d.ts

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

package/dist/dev/media/soundcloud-audio/adapter.d.ts

@@ -0,0 +1,11 @@
+import { CustomMediaConstructor } from "../../index.js";
+import { SoundCloudAdapter } from "@videojs/soundcloud-audio";
+//#region src/media/soundcloud-audio/adapter.d.ts
+declare const SoundCloudCustomMediaElement_base: CustomMediaConstructor<typeof SoundCloudAdapter>;
+declare class SoundCloudCustomMediaElement extends SoundCloudCustomMediaElement_base {
+  static getTemplateHTML: (attrs: Record<string, string>) => string;
+}
+declare const SoundCloudAudio_base: typeof SoundCloudCustomMediaElement;
+export declare class SoundCloudAudio extends SoundCloudAudio_base {}
+//#endregion
+//# sourceMappingURL=adapter.d.ts.map

package/dist/dev/media/soundcloud-audio/adapter.js

@@ -0,0 +1,53 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { escapeHtml } from "@videojs/utils/string";
+import { SoundCloudAdapter, buildSoundCloudIframeSrc } from "@videojs/soundcloud-audio";
+//#region src/media/soundcloud-audio/adapter.ts
+var SoundCloudCustomMediaElement = class extends CustomMediaElement("iframe", SoundCloudAdapter) {
+	static {
+		this.getTemplateHTML = (attrs) => {
+			const initialSrc = buildSoundCloudIframeSrc(attrs.src ?? "");
+			return `
+      <style>
+        :host {
+          display: block;
+          position: relative;
+          height: 166px;
+        }
+        iframe {
+          position: absolute;
+          inset: 0;
+          width: 100%;
+          height: 100%;
+          border: 0;
+        }
+        /*
+         * The widget is SoundCloud's own chrome, so without controls it is a
+         * transport and nothing else. Hidden rather than merely inert, and
+         * important so a consumer's own display rule cannot put it back on
+         * screen. An iframe in a hidden subtree still loads and plays its src.
+         */
+        :host(:not([controls])) {
+          display: none !important;
+        }
+      </style>
+      <iframe
+        part="iframe"
+        title="SoundCloud audio player"
+        ${initialSrc ? ` src="${escapeHtml(initialSrc)}"` : ""}
+        allow="autoplay; encrypted-media"
+        scrolling="no"
+        frameborder="0"
+        width="100%"
+        height="100%"
+        referrerpolicy="${escapeHtml(attrs.referrerpolicy ?? "")}"
+      ></iframe>
+    `;
+		};
+	}
+};
+var SoundCloudAudio = class extends MediaAttachMixin(SoundCloudCustomMediaElement) {};
+//#endregion
+export { SoundCloudAudio };
+
+//# sourceMappingURL=adapter.js.map

package/dist/dev/media/soundcloud-audio/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/soundcloud-audio/adapter.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/media/dom';\nimport { buildSoundCloudIframeSrc, SoundCloudAdapter } from '@videojs/soundcloud-audio';\nimport { escapeHtml } from '@videojs/utils/string';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nclass SoundCloudCustomMediaElement extends CustomMediaElement('iframe', SoundCloudAdapter) {\n  static override getTemplateHTML = (attrs: Record<string, string>): string => {\n    const initialSrc = buildSoundCloudIframeSrc(attrs.src ?? '');\n    const srcAttr = initialSrc ? ` src=\"${escapeHtml(initialSrc)}\"` : '';\n\n    return /*html*/ `\n      <style>\n        :host {\n          display: block;\n          position: relative;\n          height: 166px;\n        }\n        iframe {\n          position: absolute;\n          inset: 0;\n          width: 100%;\n          height: 100%;\n          border: 0;\n        }\n        /*\n         * The widget is SoundCloud's own chrome, so without controls it is a\n         * transport and nothing else. Hidden rather than merely inert, and\n         * important so a consumer's own display rule cannot put it back on\n         * screen. An iframe in a hidden subtree still loads and plays its src.\n         */\n        :host(:not([controls])) {\n          display: none !important;\n        }\n      </style>\n      <iframe\n        part=\"iframe\"\n        title=\"SoundCloud audio player\"\n        ${srcAttr}\n        allow=\"autoplay; encrypted-media\"\n        scrolling=\"no\"\n        frameborder=\"0\"\n        width=\"100%\"\n        height=\"100%\"\n        referrerpolicy=\"${escapeHtml(attrs.referrerpolicy ?? '')}\"\n      ></iframe>\n    `;\n  };\n}\n\nexport class SoundCloudAudio extends MediaAttachMixin(SoundCloudCustomMediaElement) {}\n"],"mappings":";;;;;AAMA,IAAM,+BAAN,cAA2C,mBAAmB,UAAU,iBAAiB,CAAC,CAAC;;EACtD,KAAA,mBAAA,UAA0C;GAC3E,MAAM,aAAa,yBAAyB,MAAM,OAAO,EAAE;GAG3D,OAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;UAFA,aAAa,SAAS,WAAW,UAAU,EAAE,KAAK,GA6BpD;;;;;;0BAMQ,WAAW,MAAM,kBAAkB,EAAE,EAAE;;;EAG/D;;AACF;AAEA,IAAa,kBAAb,cAAqC,iBAAiB,4BAA4B,CAAC,CAAC,CAAC"}

package/dist/dev/media/soundcloud-audio/index.d.ts

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

package/dist/dev/player/element.js

@@ -1,6 +1,6 @@
 import { UIElement } from "../ui/ui-element.js";
 import { PlayerExtensionCoordinator, setPlayerConfigValue } from "@videojs/core/dom";
-import { ContextProvider, ContextRoot } from "@videojs/element/context";
+import { ContextProvider } from "@videojs/element/context";
 import { camelCase, kebabCase } from "@videojs/utils/string";
 import { isNull } from "@videojs/utils/predicate";
 //#region src/player/element.ts
@@ -29,7 +29,6 @@ function createPlayerElement(options) {
 			};
 		}
 		#store = options.factory();
-		#contextRoot = new ContextRoot();
 		#configuredStore = null;
 		#detach = null;
 		#connected = false;
@@ -96,7 +95,6 @@ function createPlayerElement(options) {
 		}
 		connectedCallback() {
 			this.#connected = true;
-			this.#contextRoot.attach(this);
 			super.connectedCallback();
 			this.#syncInitialConfig();
 			this.#playerProvider.setValue(this.store);
@@ -113,13 +111,11 @@ function createPlayerElement(options) {
 		}
 		disconnectedCallback() {
 			this.#connected = false;
-			this.#contextRoot.detach(this);
 			this.#observer.disconnect();
 			this.#detachStore();
 			super.disconnectedCallback();
 		}
 		destroyCallback() {
-			this.#contextRoot.detach(this);
 			this.#observer.disconnect();
 			this.#detachStore();
 			this.#extensions.destroy();

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

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

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

@@ -1,7 +1,8 @@
 import { ReactiveElement } from "@videojs/element";
 //#region src/presets/background/skin.d.ts
 declare function getTemplateHTML(): string;
-export declare class BackgroundVideoSkinElement extends ReactiveElement {
+declare const BackgroundVideoSkinElement_base: typeof ReactiveElement & (new (...args: any[]) => import("@videojs/element").Destroyable);
+export declare class BackgroundVideoSkinElement extends BackgroundVideoSkinElement_base {
   static readonly tagName = "background-video-skin";
   static shadowRootOptions: ShadowRootInit;
   static getTemplateHTML: typeof getTemplateHTML;

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

@@ -1,5 +1,5 @@
 import skin_default from "../../define/background/skin2.js";
-import { ReactiveElement } from "@videojs/element";
+import { DestroyMixin, ReactiveElement } from "@videojs/element";
 import { ensureGlobalStyle } from "@videojs/utils/dom";
 //#region src/presets/background/skin.ts
 const STYLES_ID = "__media-background-styles";
@@ -12,7 +12,7 @@ function getTemplateHTML() {
     </media-container>
   `;
 }
-var BackgroundVideoSkinElement = class BackgroundVideoSkinElement extends ReactiveElement {
+var BackgroundVideoSkinElement = class BackgroundVideoSkinElement extends DestroyMixin(ReactiveElement) {
 	static {
 		this.tagName = "background-video-skin";
 	}

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

@@ -1 +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"}
+{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/presets/background/skin.ts"],"sourcesContent":["import { DestroyMixin, 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 DestroyMixin(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,aAAa,eAAe,CAAC,CAAC;;EAClD,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/dev/presets/skin.d.ts

@@ -1,11 +1,12 @@
-import { ReactiveElement } from "@videojs/element";
+import { UIElement } from "../ui/ui-element.js";
 import { ShadowStyle } from "@videojs/utils/dom";
 //#region src/presets/skin.d.ts
 /**
  * Base element for skin definitions. Attaches a shadow root, clones `static template` into it, and applies shared +
- * per-skin styles via `adoptedStyleSheets` (or `<style>` fallback).
+ * per-skin styles via `adoptedStyleSheets` (or `<style>` fallback). Destroying it also destroys the controls in its
+ * shadow root.
  */
-export declare class SkinElement extends ReactiveElement {
+export declare class SkinElement extends UIElement {
   static shadowRootOptions: ShadowRootInit;
   static styles?: ShadowStyle;
   static template?: HTMLTemplateElement | null;

package/dist/dev/presets/skin.js

@@ -1,15 +1,16 @@
+import { UIElement } from "../ui/ui-element.js";
 import global_default from "../define/global.js";
 import shadow_default from "../define/shadow.js";
-import { ReactiveElement } from "@videojs/element";
 import { applyShadowStyles, createShadowStyle, ensureGlobalStyle, renderTemplate } from "@videojs/utils/dom";
 //#region src/presets/skin.ts
 const STYLES_ID = "__media-styles";
 const shadowSheet = createShadowStyle(shadow_default);
 /**
 * Base element for skin definitions. Attaches a shadow root, clones `static template` into it, and applies shared +
-* per-skin styles via `adoptedStyleSheets` (or `<style>` fallback).
+* per-skin styles via `adoptedStyleSheets` (or `<style>` fallback). Destroying it also destroys the controls in its
+* shadow root.
 */
-var SkinElement = class extends ReactiveElement {
+var SkinElement = class extends UIElement {
 	static {
 		this.shadowRootOptions = { mode: "open" };
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["shadowStyles","globalStyles"],"sources":["../../../src/presets/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport {\n  applyShadowStyles,\n  createShadowStyle,\n  ensureGlobalStyle,\n  renderTemplate,\n  type ShadowStyle,\n} from '@videojs/utils/dom';\n\nimport globalStyles from '../define/global.css?inline';\nimport shadowStyles from '../define/shadow.css?inline';\n\nconst STYLES_ID = '__media-styles';\nconst shadowSheet = createShadowStyle(shadowStyles);\n\n/**\n * Base element for skin definitions. Attaches a shadow root, clones `static template` into it, and applies shared +\n * per-skin styles via `adoptedStyleSheets` (or `<style>` fallback).\n */\nexport class SkinElement extends ReactiveElement {\n  static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n  static styles?: ShadowStyle;\n  static template?: HTMLTemplateElement | null;\n\n  constructor() {\n    super();\n\n    ensureGlobalStyle(STYLES_ID, globalStyles);\n\n    if (!this.shadowRoot) {\n      const ctor = this.constructor as typeof SkinElement;\n\n      this.attachShadow(ctor.shadowRootOptions);\n\n      if (ctor.template) {\n        renderTemplate(this.shadowRoot!, ctor.template);\n      }\n\n      const sheets: ShadowStyle[] = [shadowSheet];\n\n      if (ctor.styles) {\n        sheets.push(ctor.styles);\n      }\n\n      applyShadowStyles(this.shadowRoot!, sheets);\n    }\n  }\n}\n"],"mappings":";;;;;AAYA,MAAM,YAAY;AAClB,MAAM,cAAc,kBAAkBA,cAAY;;;;;AAMlD,IAAa,cAAb,cAAiC,gBAAgB;;EACJ,KAAA,oBAAA,EAAE,MAAM,OAAO;;CAI1D,cAAc;EACZ,MAAM;EAEN,kBAAkB,WAAWC,cAAY;EAEzC,IAAI,CAAC,KAAK,YAAY;GACpB,MAAM,OAAO,KAAK;GAElB,KAAK,aAAa,KAAK,iBAAiB;GAExC,IAAI,KAAK,UACP,eAAe,KAAK,YAAa,KAAK,QAAQ;GAGhD,MAAM,SAAwB,CAAC,WAAW;GAE1C,IAAI,KAAK,QACP,OAAO,KAAK,KAAK,MAAM;GAGzB,kBAAkB,KAAK,YAAa,MAAM;EAC5C;CACF;AACF"}
+{"version":3,"file":"skin.js","names":["shadowStyles","globalStyles"],"sources":["../../../src/presets/skin.ts"],"sourcesContent":["import {\n  applyShadowStyles,\n  createShadowStyle,\n  ensureGlobalStyle,\n  renderTemplate,\n  type ShadowStyle,\n} from '@videojs/utils/dom';\n\nimport { UIElement } from '../ui/ui-element';\n\nimport globalStyles from '../define/global.css?inline';\nimport shadowStyles from '../define/shadow.css?inline';\n\nconst STYLES_ID = '__media-styles';\nconst shadowSheet = createShadowStyle(shadowStyles);\n\n/**\n * Base element for skin definitions. Attaches a shadow root, clones `static template` into it, and applies shared +\n * per-skin styles via `adoptedStyleSheets` (or `<style>` fallback). Destroying it also destroys the controls in its\n * shadow root.\n */\nexport class SkinElement extends UIElement {\n  static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n  static styles?: ShadowStyle;\n  static template?: HTMLTemplateElement | null;\n\n  constructor() {\n    super();\n\n    ensureGlobalStyle(STYLES_ID, globalStyles);\n\n    if (!this.shadowRoot) {\n      const ctor = this.constructor as typeof SkinElement;\n\n      this.attachShadow(ctor.shadowRootOptions);\n\n      if (ctor.template) {\n        renderTemplate(this.shadowRoot!, ctor.template);\n      }\n\n      const sheets: ShadowStyle[] = [shadowSheet];\n\n      if (ctor.styles) {\n        sheets.push(ctor.styles);\n      }\n\n      applyShadowStyles(this.shadowRoot!, sheets);\n    }\n  }\n}\n"],"mappings":";;;;;AAaA,MAAM,YAAY;AAClB,MAAM,cAAc,kBAAkBA,cAAY;;;;;;AAOlD,IAAa,cAAb,cAAiC,UAAU;;EACE,KAAA,oBAAA,EAAE,MAAM,OAAO;;CAI1D,cAAc;EACZ,MAAM;EAEN,kBAAkB,WAAWC,cAAY;EAEzC,IAAI,CAAC,KAAK,YAAY;GACpB,MAAM,OAAO,KAAK;GAElB,KAAK,aAAa,KAAK,iBAAiB;GAExC,IAAI,KAAK,UACP,eAAe,KAAK,YAAa,KAAK,QAAQ;GAGhD,MAAM,SAAwB,CAAC,WAAW;GAE1C,IAAI,KAAK,QACP,OAAO,KAAK,KAAK,MAAM;GAGzB,kBAAkB,KAAK,YAAa,MAAM;EAC5C;CACF;AACF"}

package/dist/dev/ui/dialog/element.js

@@ -1,9 +1,10 @@
+import { containerContext } from "../../player/context.js";
 import { UIElement } from "../ui-element.js";
 import { PositionController } from "../position-controller.js";
 import { dialogContext } from "./context.js";
 import { DialogCore, DialogDataAttrs } from "@videojs/core";
 import { applyElementProps, applyStateDataAttrs, createDialog, createTransition } from "@videojs/core/dom";
-import { ContextProvider } from "@videojs/element/context";
+import { ContextConsumer, ContextProvider } from "@videojs/element/context";
 import { SnapshotController } from "@videojs/store/html";
 //#region src/ui/dialog/element.ts
 let idCounter = 0;
@@ -25,12 +26,14 @@ var DialogElementBase = class extends UIElement {
 	#stateAttrMap;
 	#provider;
 	#position;
+	#container;
 	#popupId;
 	#titleId;
 	#descriptionId;
 	#bindTrigger;
 	#dialog;
 	#snapshot;
+	#modalitySnapshot;
 	#triggerAbort;
 	#triggerElement;
 	constructor({ core = new DialogCore(), stateAttrMap = DialogDataAttrs, idPrefix = "dialog", bindTrigger = true } = {}) {
@@ -40,8 +43,13 @@ var DialogElementBase = class extends UIElement {
 		this.closeOnEscape = DialogCore.defaultProps.closeOnEscape;
 		this.#provider = new ContextProvider(this, { context: dialogContext });
 		this.#position = new PositionController(this);
+		this.#container = new ContextConsumer(this, {
+			context: containerContext,
+			subscribe: true
+		});
 		this.#dialog = null;
 		this.#snapshot = null;
+		this.#modalitySnapshot = null;
 		this.#triggerAbort = null;
 		this.#triggerElement = null;
 		this.#core = core;
@@ -69,6 +77,8 @@ var DialogElementBase = class extends UIElement {
 		});
 		if (this.#snapshot) this.#snapshot.track(this.#dialog.input);
 		else this.#snapshot = new SnapshotController(this, this.#dialog.input);
+		if (this.#modalitySnapshot) this.#modalitySnapshot.track(this.#dialog.modality);
+		else this.#modalitySnapshot = new SnapshotController(this, this.#dialog.modality);
 	}
 	firstUpdated(changed) {
 		super.firstUpdated(changed);
@@ -86,6 +96,7 @@ var DialogElementBase = class extends UIElement {
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.#core.setProps(this);
+		this.#dialog?.setInteractionRoot(this.#container.value?.container ?? null);
 		if (this.#dialog && changed.has("open")) {
 			const { active: inputOpen } = this.#dialog.input.current;
 			if (this.open !== inputOpen) {
@@ -101,6 +112,7 @@ var DialogElementBase = class extends UIElement {
 		this.#syncTrigger(triggerElement);
 		const input = this.#dialog.input.current;
 		this.#core.setInput(input);
+		this.#core.setDocumentModal(this.#dialog.modality.current.documentModal);
 		const state = this.#core.getState();
 		applyStateDataAttrs(this, state, this.#stateAttrMap);
 		if (this.#triggerElement) applyElementProps(this.#triggerElement, this.#core.getTriggerAttrs(state, this.#popupId));

package/dist/dev/ui/dialog/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/dialog/element.ts"],"sourcesContent":["import {\n  DialogCore,\n  DialogDataAttrs,\n  type DialogInput,\n  type DialogState,\n  type StateAttrMap,\n  type DialogProps,\n} from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createDialog,\n  createTransition,\n  type DialogApi,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { SnapshotController } from '@videojs/store/html';\n\nimport { PositionController } from '../position-controller';\nimport { UIElement } from '../ui-element';\nimport { dialogContext } from './context';\n\nlet idCounter = 0;\n\nexport interface DialogElementBaseOptions {\n  /** @internal */\n  core?: DialogCore;\n  /** @internal */\n  stateAttrMap?: StateAttrMap<DialogState>;\n  idPrefix?: string;\n  bindTrigger?: boolean;\n}\n\nexport class DialogElementBase extends UIElement {\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    closeOnEscape: { type: Boolean, attribute: 'close-on-escape' },\n  } satisfies PropertyDeclarationMap<keyof DialogProps>;\n\n  open = DialogCore.defaultProps.open;\n  defaultOpen = DialogCore.defaultProps.defaultOpen;\n  closeOnEscape = DialogCore.defaultProps.closeOnEscape;\n\n  readonly #core: DialogCore;\n  readonly #stateAttrMap: StateAttrMap<DialogState>;\n  readonly #provider = new ContextProvider(this, { context: dialogContext });\n  readonly #position = new PositionController(this);\n  readonly #popupId: string;\n  readonly #titleId: string;\n  readonly #descriptionId: string;\n  readonly #bindTrigger: boolean;\n\n  #dialog: DialogApi | null = null;\n  #snapshot: SnapshotController<DialogInput> | null = null;\n  #triggerAbort: AbortController | null = null;\n  #triggerElement: HTMLElement | null = null;\n\n  constructor({\n    core = new DialogCore(),\n    stateAttrMap = DialogDataAttrs,\n    idPrefix = 'dialog',\n    bindTrigger = true,\n  }: DialogElementBaseOptions = {}) {\n    super();\n    this.#core = core;\n    this.#stateAttrMap = stateAttrMap;\n    this.#bindTrigger = bindTrigger;\n    this.#popupId = `vjs-${idPrefix}-popup-${idCounter++}`;\n    this.#titleId = `vjs-${idPrefix}-title-${idCounter++}`;\n    this.#descriptionId = `vjs-${idPrefix}-desc-${idCounter++}`;\n    this.#core.setTitleId(this.#titleId);\n    this.#core.setDescriptionId(this.#descriptionId);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#dialog = createDialog({\n      transition: createTransition(),\n      closeOnEscape: () => this.closeOnEscape,\n      onOpenChange: (nextOpen: boolean) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen } }));\n      },\n      onOpenChangeComplete: (nextOpen: boolean) => {\n        this.dispatchEvent(new CustomEvent('open-change-complete', { detail: { open: nextOpen } }));\n      },\n    });\n\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#dialog.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#dialog.input);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    if (this.defaultOpen && !this.open) this.#dialog?.open();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupTrigger();\n    this.#dialog?.destroy();\n    this.#dialog = null;\n  }\n\n  close(): void {\n    this.#dialog?.close();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    if (this.#dialog && changed.has('open')) {\n      const { active: inputOpen } = this.#dialog.input.current;\n\n      if (this.open !== inputOpen) {\n        if (this.open) this.#dialog.open();\n        else this.#dialog.close();\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#dialog) return;\n\n    const triggerElement = this.#bindTrigger ? this.#position.findTrigger() : null;\n\n    this.#syncTrigger(triggerElement);\n\n    const input = this.#dialog.input.current;\n\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    applyStateDataAttrs(this, state, this.#stateAttrMap);\n\n    if (this.#triggerElement) {\n      applyElementProps(this.#triggerElement, this.#core.getTriggerAttrs(state, this.#popupId));\n    }\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: this.#stateAttrMap,\n      dialog: this.#dialog,\n      popupId: this.#popupId,\n      popupAttrs: this.#core.getPopupAttrs(state),\n      close: () => this.#dialog?.close(),\n    });\n  }\n\n  #syncTrigger(triggerElement: HTMLElement | null): void {\n    if (triggerElement === this.#triggerElement) return;\n\n    this.#cleanupTrigger();\n    this.#triggerElement = triggerElement;\n    this.#dialog?.setTriggerElement(triggerElement);\n\n    if (triggerElement && this.#dialog) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerElement, this.#dialog.triggerProps, { signal: this.#triggerAbort.signal });\n    }\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#triggerElement) {\n      applyElementProps(this.#triggerElement, {\n        'aria-expanded': undefined,\n        'aria-haspopup': undefined,\n        'aria-controls': undefined,\n      });\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#triggerElement = null;\n    this.#dialog?.setTriggerElement(null);\n  }\n}\n\nexport class DialogElement extends DialogElementBase {\n  static readonly tagName = 'media-dialog';\n}\n"],"mappings":"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"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/dialog/element.ts"],"sourcesContent":["import {\n  DialogCore,\n  DialogDataAttrs,\n  type DialogInput,\n  type DialogState,\n  type StateAttrMap,\n  type DialogProps,\n} from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createDialog,\n  createTransition,\n  type DialogApi,\n  type DialogModality,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer, ContextProvider } from '@videojs/element/context';\nimport { SnapshotController } from '@videojs/store/html';\n\nimport { containerContext } from '../../player/context';\nimport { PositionController } from '../position-controller';\nimport { UIElement } from '../ui-element';\nimport { dialogContext } from './context';\n\nlet idCounter = 0;\n\nexport interface DialogElementBaseOptions {\n  /** @internal */\n  core?: DialogCore;\n  /** @internal */\n  stateAttrMap?: StateAttrMap<DialogState>;\n  idPrefix?: string;\n  bindTrigger?: boolean;\n}\n\nexport class DialogElementBase extends UIElement {\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    closeOnEscape: { type: Boolean, attribute: 'close-on-escape' },\n  } satisfies PropertyDeclarationMap<keyof DialogProps>;\n\n  open = DialogCore.defaultProps.open;\n  defaultOpen = DialogCore.defaultProps.defaultOpen;\n  closeOnEscape = DialogCore.defaultProps.closeOnEscape;\n\n  readonly #core: DialogCore;\n  readonly #stateAttrMap: StateAttrMap<DialogState>;\n  readonly #provider = new ContextProvider(this, { context: dialogContext });\n  readonly #position = new PositionController(this);\n  readonly #container = new ContextConsumer(this, { context: containerContext, subscribe: true });\n  readonly #popupId: string;\n  readonly #titleId: string;\n  readonly #descriptionId: string;\n  readonly #bindTrigger: boolean;\n\n  #dialog: DialogApi | null = null;\n  #snapshot: SnapshotController<DialogInput> | null = null;\n  #modalitySnapshot: SnapshotController<DialogModality> | null = null;\n  #triggerAbort: AbortController | null = null;\n  #triggerElement: HTMLElement | null = null;\n\n  constructor({\n    core = new DialogCore(),\n    stateAttrMap = DialogDataAttrs,\n    idPrefix = 'dialog',\n    bindTrigger = true,\n  }: DialogElementBaseOptions = {}) {\n    super();\n    this.#core = core;\n    this.#stateAttrMap = stateAttrMap;\n    this.#bindTrigger = bindTrigger;\n    this.#popupId = `vjs-${idPrefix}-popup-${idCounter++}`;\n    this.#titleId = `vjs-${idPrefix}-title-${idCounter++}`;\n    this.#descriptionId = `vjs-${idPrefix}-desc-${idCounter++}`;\n    this.#core.setTitleId(this.#titleId);\n    this.#core.setDescriptionId(this.#descriptionId);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#dialog = createDialog({\n      transition: createTransition(),\n      closeOnEscape: () => this.closeOnEscape,\n      onOpenChange: (nextOpen: boolean) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen } }));\n      },\n      onOpenChangeComplete: (nextOpen: boolean) => {\n        this.dispatchEvent(new CustomEvent('open-change-complete', { detail: { open: nextOpen } }));\n      },\n    });\n\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#dialog.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#dialog.input);\n    }\n\n    if (this.#modalitySnapshot) {\n      this.#modalitySnapshot.track(this.#dialog.modality);\n    } else {\n      this.#modalitySnapshot = new SnapshotController(this, this.#dialog.modality);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    if (this.defaultOpen && !this.open) this.#dialog?.open();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupTrigger();\n    this.#dialog?.destroy();\n    this.#dialog = null;\n  }\n\n  close(): void {\n    this.#dialog?.close();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n    this.#dialog?.setInteractionRoot(this.#container.value?.container ?? null);\n\n    if (this.#dialog && changed.has('open')) {\n      const { active: inputOpen } = this.#dialog.input.current;\n\n      if (this.open !== inputOpen) {\n        if (this.open) this.#dialog.open();\n        else this.#dialog.close();\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#dialog) return;\n\n    const triggerElement = this.#bindTrigger ? this.#position.findTrigger() : null;\n\n    this.#syncTrigger(triggerElement);\n\n    const input = this.#dialog.input.current;\n\n    this.#core.setInput(input);\n    this.#core.setDocumentModal(this.#dialog.modality.current.documentModal);\n    const state = this.#core.getState();\n\n    applyStateDataAttrs(this, state, this.#stateAttrMap);\n\n    if (this.#triggerElement) {\n      applyElementProps(this.#triggerElement, this.#core.getTriggerAttrs(state, this.#popupId));\n    }\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: this.#stateAttrMap,\n      dialog: this.#dialog,\n      popupId: this.#popupId,\n      popupAttrs: this.#core.getPopupAttrs(state),\n      close: () => this.#dialog?.close(),\n    });\n  }\n\n  #syncTrigger(triggerElement: HTMLElement | null): void {\n    if (triggerElement === this.#triggerElement) return;\n\n    this.#cleanupTrigger();\n    this.#triggerElement = triggerElement;\n    this.#dialog?.setTriggerElement(triggerElement);\n\n    if (triggerElement && this.#dialog) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerElement, this.#dialog.triggerProps, { signal: this.#triggerAbort.signal });\n    }\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#triggerElement) {\n      applyElementProps(this.#triggerElement, {\n        'aria-expanded': undefined,\n        'aria-haspopup': undefined,\n        'aria-controls': undefined,\n      });\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#triggerElement = null;\n    this.#dialog?.setTriggerElement(null);\n  }\n}\n\nexport class DialogElement extends DialogElementBase {\n  static readonly tagName = 'media-dialog';\n}\n"],"mappings":"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"}

package/dist/dev/ui/gesture/element.js

@@ -61,14 +61,17 @@ var GestureElement = class extends UIElement {
 		if (!resolver) return;
 		const { value, region } = this;
 		const actionValue = getGestureActionValue(this.action, region, value);
+		let state;
 		const onActivate = (event) => {
 			resolver({
 				store,
+				state,
 				value: actionValue,
 				event
 			});
 		};
 		const options = {
+			onPointerDown: () => state = store.state,
 			pointer: this.pointer,
 			region,
 			disabled: this.disabled,