@videojs/html 0.1.0-preview.9 → 10.0.0-alpha.4

package/README.md

@@ -2,11 +2,13 @@
 
 [![package-badge]][package]
 
-> **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use.
+> **⚠️ Alpha - SUBJECT TO CHANGE** Not recommended for production use.
 
 ## Overview
 
-`@videojs/html` is a comprehensive library for building media players with vanilla JavaScript and Web Components. It provides a complete set of UI components, state management, and utilities for creating feature-rich, accessible video and audio players.
+`@videojs/html` is a comprehensive library for building media players with vanilla JavaScript and
+Web Components. It provides a complete set of Custom Elements, state management, controllers,
+and utilities for creating feature-rich, accessible video and audio players.
 
 ## Community
 

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

@@ -0,0 +1,15 @@
+import { createPlayer } from "../../player/create-player.js";
+import { features } from "@videojs/core/dom";
+
+//#region src/define/audio/player.ts
+const { PlayerElement } = createPlayer({ features: features.audio });
+var AudioPlayerElement = class extends PlayerElement {
+	static {
+		this.tagName = "audio-player";
+	}
+};
+customElements.define(AudioPlayerElement.tagName, AudioPlayerElement);
+
+//#endregion
+export { AudioPlayerElement };
+//# sourceMappingURL=player.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"player.js","names":[],"sources":["../../../../src/define/audio/player.ts"],"sourcesContent":["import { features } from '@videojs/core/dom';\nimport { createPlayer } from '../../player/create-player';\n\nconst { PlayerElement } = createPlayer({\n  features: features.audio,\n});\n\nexport class AudioPlayerElement extends PlayerElement {\n  static readonly tagName = 'audio-player';\n}\n\ncustomElements.define(AudioPlayerElement.tagName, AudioPlayerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioPlayerElement.tagName]: AudioPlayerElement;\n  }\n}\n"],"mappings":";;;;AAGA,MAAM,EAAE,kBAAkB,aAAa,EACrC,UAAU,SAAS,OACpB,CAAC;AAEF,IAAa,qBAAb,cAAwC,cAAc;;iBAC1B;;;AAG5B,eAAe,OAAO,mBAAmB,SAAS,mBAAmB"}

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

@@ -0,0 +1,15 @@
+import { createPlayer } from "../../player/create-player.js";
+import { features } from "@videojs/core/dom";
+
+//#region src/define/background/player.ts
+const { PlayerElement } = createPlayer({ features: features.background });
+var BackgroundVideoPlayerElement = class extends PlayerElement {
+	static {
+		this.tagName = "background-video-player";
+	}
+};
+customElements.define(BackgroundVideoPlayerElement.tagName, BackgroundVideoPlayerElement);
+
+//#endregion
+export { BackgroundVideoPlayerElement };
+//# sourceMappingURL=player.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"player.js","names":[],"sources":["../../../../src/define/background/player.ts"],"sourcesContent":["import { features } from '@videojs/core/dom';\nimport { createPlayer } from '../../player/create-player';\n\nconst { PlayerElement } = createPlayer({\n  features: features.background,\n});\n\nexport class BackgroundVideoPlayerElement extends PlayerElement {\n  static readonly tagName = 'background-video-player';\n}\n\ncustomElements.define(BackgroundVideoPlayerElement.tagName, BackgroundVideoPlayerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoPlayerElement.tagName]: BackgroundVideoPlayerElement;\n  }\n}\n"],"mappings":";;;;AAGA,MAAM,EAAE,kBAAkB,aAAa,EACrC,UAAU,SAAS,YACpB,CAAC;AAEF,IAAa,+BAAb,cAAkD,cAAc;;iBACpC;;;AAG5B,eAAe,OAAO,6BAA6B,SAAS,6BAA6B"}

package/dist/default/define/background/skin.css

@@ -0,0 +1,27 @@
+background-video-player {
+  display: contents;
+}
+
+background-video-skin {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  --media-object-fit: cover;
+  object-fit: var(--media-object-fit);
+}
+
+background-video-skin > [slot="media"] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: inherit;
+}
+
+background-video-skin > img,
+background-video-skin > picture {
+  width: 100%;
+  height: 100%;
+  object-fit: inherit;
+}

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

@@ -0,0 +1,34 @@
+import { ReactiveElement } from "@videojs/element";
+import { namedNodeMapToObject } from "@videojs/utils/dom";
+
+//#region src/define/background/skin.ts
+function getTemplateHTML(_attrs) {
+	return `
+    <media-container>
+      <slot name="media" slot="media"></slot>
+    </media-container>
+  `;
+}
+var BackgroundVideoSkinElement = class extends ReactiveElement {
+	static {
+		this.tagName = "background-video-skin";
+	}
+	static {
+		this.shadowRootOptions = { mode: "open" };
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+	constructor() {
+		super();
+		if (!this.shadowRoot) {
+			this.attachShadow(this.constructor.shadowRootOptions);
+			this.shadowRoot.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));
+		}
+	}
+};
+customElements.define(BackgroundVideoSkinElement.tagName, BackgroundVideoSkinElement);
+
+//#endregion
+export { BackgroundVideoSkinElement };
+//# sourceMappingURL=skin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/background/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\n\nfunction getTemplateHTML(_attrs: Record<string, string>) {\n  return /*html*/ `\n    <media-container>\n      <slot name=\"media\" slot=\"media\"></slot>\n    </media-container>\n  `;\n}\n\nexport class BackgroundVideoSkinElement extends ReactiveElement {\n  static readonly tagName = 'background-video-skin';\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof BackgroundVideoSkinElement).shadowRootOptions);\n      this.shadowRoot!.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));\n    }\n  }\n}\n\ncustomElements.define(BackgroundVideoSkinElement.tagName, BackgroundVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;\n  }\n}\n"],"mappings":";;;;AAGA,SAAS,gBAAgB,QAAgC;AACvD,QAAgB;;;;;;AAOlB,IAAa,6BAAb,cAAgD,gBAAgB;;iBACpC;;;2BACC,EAAE,MAAM,QAA0B;;;yBACpC;;CAEzB,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAkD,kBAAkB;AAC5F,QAAK,WAAY,YAAY,gBAAgB,qBAAqB,KAAK,WAAW,CAAC;;;;AAKzF,eAAe,OAAO,2BAA2B,SAAS,2BAA2B"}

package/dist/default/define/background/video.js

@@ -0,0 +1,3 @@
+import { BackgroundVideoElement } from "../media/background-video.js";
+
+export { BackgroundVideoElement };

package/dist/default/define/media/background-video.js

@@ -0,0 +1,13 @@
+import { BackgroundVideo } from "../../media/background-video/index.js";
+
+//#region src/define/media/background-video.ts
+var BackgroundVideoElement = class extends BackgroundVideo {
+	static {
+		this.tagName = "background-video";
+	}
+};
+customElements.define(BackgroundVideoElement.tagName, BackgroundVideoElement);
+
+//#endregion
+export { BackgroundVideoElement };
+//# sourceMappingURL=background-video.js.map

package/dist/default/define/media/background-video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-video.js","names":[],"sources":["../../../../src/define/media/background-video.ts"],"sourcesContent":["import { BackgroundVideo } from '../../media/background-video';\n\nexport class BackgroundVideoElement extends BackgroundVideo {\n  static readonly tagName = 'background-video';\n}\n\ncustomElements.define(BackgroundVideoElement.tagName, BackgroundVideoElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoElement.tagName]: BackgroundVideoElement;\n  }\n}\n"],"mappings":";;;AAEA,IAAa,yBAAb,cAA4C,gBAAgB;;iBAChC;;;AAG5B,eAAe,OAAO,uBAAuB,SAAS,uBAAuB"}

package/dist/default/define/media/hls-video.js

@@ -0,0 +1,13 @@
+import { HlsVideo } from "../../media/hls-video/index.js";
+
+//#region src/define/media/hls-video.ts
+var HlsVideoElement = class extends HlsVideo {
+	static {
+		this.tagName = "hls-video";
+	}
+};
+customElements.define(HlsVideoElement.tagName, HlsVideoElement);
+
+//#endregion
+export { HlsVideoElement };
+//# sourceMappingURL=hls-video.js.map

package/dist/default/define/media/hls-video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hls-video.js","names":[],"sources":["../../../../src/define/media/hls-video.ts"],"sourcesContent":["import { HlsVideo } from '../../media/hls-video';\n\nexport class HlsVideoElement extends HlsVideo {\n  static readonly tagName = 'hls-video';\n}\n\ncustomElements.define(HlsVideoElement.tagName, HlsVideoElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [HlsVideoElement.tagName]: HlsVideoElement;\n  }\n}\n"],"mappings":";;;AAEA,IAAa,kBAAb,cAAqC,SAAS;;iBAClB;;;AAG5B,eAAe,OAAO,gBAAgB,SAAS,gBAAgB"}

package/dist/default/define/ui/buffering-indicator.js

@@ -0,0 +1,7 @@
+import { BufferingIndicatorElement } from "../../ui/buffering-indicator/buffering-indicator-element.js";
+
+//#region src/define/ui/buffering-indicator.ts
+customElements.define(BufferingIndicatorElement.tagName, BufferingIndicatorElement);
+
+//#endregion
+//# sourceMappingURL=buffering-indicator.js.map

package/dist/default/define/ui/buffering-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buffering-indicator.js","names":[],"sources":["../../../../src/define/ui/buffering-indicator.ts"],"sourcesContent":["import { BufferingIndicatorElement } from '../../ui/buffering-indicator/buffering-indicator-element';\n\ncustomElements.define(BufferingIndicatorElement.tagName, BufferingIndicatorElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BufferingIndicatorElement.tagName]: BufferingIndicatorElement;\n  }\n}\n"],"mappings":";;;AAEA,eAAe,OAAO,0BAA0B,SAAS,0BAA0B"}

package/dist/default/define/ui/controls.js

@@ -0,0 +1,9 @@
+import { ControlsElement } from "../../ui/controls/controls-element.js";
+import { ControlsGroupElement } from "../../ui/controls/controls-group-element.js";
+
+//#region src/define/ui/controls.ts
+customElements.define(ControlsElement.tagName, ControlsElement);
+customElements.define(ControlsGroupElement.tagName, ControlsGroupElement);
+
+//#endregion
+//# sourceMappingURL=controls.js.map

package/dist/default/define/ui/controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.js","names":[],"sources":["../../../../src/define/ui/controls.ts"],"sourcesContent":["import { ControlsElement } from '../../ui/controls/controls-element';\nimport { ControlsGroupElement } from '../../ui/controls/controls-group-element';\n\ncustomElements.define(ControlsElement.tagName, ControlsElement);\ncustomElements.define(ControlsGroupElement.tagName, ControlsGroupElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ControlsElement.tagName]: ControlsElement;\n    [ControlsGroupElement.tagName]: ControlsGroupElement;\n  }\n}\n"],"mappings":";;;;AAGA,eAAe,OAAO,gBAAgB,SAAS,gBAAgB;AAC/D,eAAe,OAAO,qBAAqB,SAAS,qBAAqB"}

package/dist/default/define/ui/fullscreen-button.js

@@ -0,0 +1,7 @@
+import { FullscreenButtonElement } from "../../ui/fullscreen-button/fullscreen-button-element.js";
+
+//#region src/define/ui/fullscreen-button.ts
+customElements.define(FullscreenButtonElement.tagName, FullscreenButtonElement);
+
+//#endregion
+//# sourceMappingURL=fullscreen-button.js.map

package/dist/default/define/ui/fullscreen-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-button.js","names":[],"sources":["../../../../src/define/ui/fullscreen-button.ts"],"sourcesContent":["import { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-element';\n\ncustomElements.define(FullscreenButtonElement.tagName, FullscreenButtonElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [FullscreenButtonElement.tagName]: FullscreenButtonElement;\n  }\n}\n"],"mappings":";;;AAEA,eAAe,OAAO,wBAAwB,SAAS,wBAAwB"}

package/dist/default/define/ui/mute-button.js

@@ -0,0 +1,7 @@
+import { MuteButtonElement } from "../../ui/mute-button/mute-button-element.js";
+
+//#region src/define/ui/mute-button.ts
+customElements.define(MuteButtonElement.tagName, MuteButtonElement);
+
+//#endregion
+//# sourceMappingURL=mute-button.js.map

package/dist/default/define/ui/mute-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mute-button.js","names":[],"sources":["../../../../src/define/ui/mute-button.ts"],"sourcesContent":["import { MuteButtonElement } from '../../ui/mute-button/mute-button-element';\n\ncustomElements.define(MuteButtonElement.tagName, MuteButtonElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MuteButtonElement.tagName]: MuteButtonElement;\n  }\n}\n"],"mappings":";;;AAEA,eAAe,OAAO,kBAAkB,SAAS,kBAAkB"}

package/dist/default/define/ui/pip-button.js

@@ -0,0 +1,7 @@
+import { PiPButtonElement } from "../../ui/pip-button/pip-button-element.js";
+
+//#region src/define/ui/pip-button.ts
+customElements.define(PiPButtonElement.tagName, PiPButtonElement);
+
+//#endregion
+//# sourceMappingURL=pip-button.js.map

package/dist/default/define/ui/pip-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pip-button.js","names":[],"sources":["../../../../src/define/ui/pip-button.ts"],"sourcesContent":["import { PiPButtonElement } from '../../ui/pip-button/pip-button-element';\n\ncustomElements.define(PiPButtonElement.tagName, PiPButtonElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [PiPButtonElement.tagName]: PiPButtonElement;\n  }\n}\n"],"mappings":";;;AAEA,eAAe,OAAO,iBAAiB,SAAS,iBAAiB"}

package/dist/default/define/ui/play-button.js

@@ -0,0 +1,7 @@
+import { PlayButtonElement } from "../../ui/play-button/play-button-element.js";
+
+//#region src/define/ui/play-button.ts
+customElements.define(PlayButtonElement.tagName, PlayButtonElement);
+
+//#endregion
+//# sourceMappingURL=play-button.js.map

package/dist/default/define/ui/play-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"play-button.js","names":[],"sources":["../../../../src/define/ui/play-button.ts"],"sourcesContent":["import { PlayButtonElement } from '../../ui/play-button/play-button-element';\n\ncustomElements.define(PlayButtonElement.tagName, PlayButtonElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [PlayButtonElement.tagName]: PlayButtonElement;\n  }\n}\n"],"mappings":";;;AAEA,eAAe,OAAO,kBAAkB,SAAS,kBAAkB"}

package/dist/default/define/ui/poster.js

@@ -0,0 +1,7 @@
+import { PosterElement } from "../../ui/poster/poster-element.js";
+
+//#region src/define/ui/poster.ts
+customElements.define(PosterElement.tagName, PosterElement);
+
+//#endregion
+//# sourceMappingURL=poster.js.map

package/dist/default/define/ui/poster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"poster.js","names":[],"sources":["../../../../src/define/ui/poster.ts"],"sourcesContent":["import { PosterElement } from '../../ui/poster/poster-element';\n\ncustomElements.define(PosterElement.tagName, PosterElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [PosterElement.tagName]: PosterElement;\n  }\n}\n"],"mappings":";;;AAEA,eAAe,OAAO,cAAc,SAAS,cAAc"}

package/dist/default/define/ui/seek-button.js

@@ -0,0 +1,7 @@
+import { SeekButtonElement } from "../../ui/seek-button/seek-button-element.js";
+
+//#region src/define/ui/seek-button.ts
+customElements.define(SeekButtonElement.tagName, SeekButtonElement);
+
+//#endregion
+//# sourceMappingURL=seek-button.js.map

package/dist/default/define/ui/seek-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"seek-button.js","names":[],"sources":["../../../../src/define/ui/seek-button.ts"],"sourcesContent":["import { SeekButtonElement } from '../../ui/seek-button/seek-button-element';\n\ncustomElements.define(SeekButtonElement.tagName, SeekButtonElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [SeekButtonElement.tagName]: SeekButtonElement;\n  }\n}\n"],"mappings":";;;AAEA,eAAe,OAAO,kBAAkB,SAAS,kBAAkB"}

package/dist/default/define/ui/time.js

@@ -0,0 +1,11 @@
+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";
+
+//#region src/define/ui/time.ts
+customElements.define(TimeElement.tagName, TimeElement);
+customElements.define(TimeGroupElement.tagName, TimeGroupElement);
+customElements.define(TimeSeparatorElement.tagName, TimeSeparatorElement);
+
+//#endregion
+//# sourceMappingURL=time.js.map

package/dist/default/define/ui/time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.js","names":[],"sources":["../../../../src/define/ui/time.ts"],"sourcesContent":["import { TimeElement } from '../../ui/time/time-element';\nimport { TimeGroupElement } from '../../ui/time/time-group-element';\nimport { TimeSeparatorElement } from '../../ui/time/time-separator-element';\n\ncustomElements.define(TimeElement.tagName, TimeElement);\ncustomElements.define(TimeGroupElement.tagName, TimeGroupElement);\ncustomElements.define(TimeSeparatorElement.tagName, TimeSeparatorElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TimeElement.tagName]: TimeElement;\n    [TimeGroupElement.tagName]: TimeGroupElement;\n    [TimeSeparatorElement.tagName]: TimeSeparatorElement;\n  }\n}\n"],"mappings":";;;;;AAIA,eAAe,OAAO,YAAY,SAAS,YAAY;AACvD,eAAe,OAAO,iBAAiB,SAAS,iBAAiB;AACjE,eAAe,OAAO,qBAAqB,SAAS,qBAAqB"}

package/dist/default/define/video/player.js

@@ -0,0 +1,15 @@
+import { createPlayer } from "../../player/create-player.js";
+import { features } from "@videojs/core/dom";
+
+//#region src/define/video/player.ts
+const { PlayerElement } = createPlayer({ features: features.video });
+var VideoPlayerElement = class extends PlayerElement {
+	static {
+		this.tagName = "video-player";
+	}
+};
+customElements.define(VideoPlayerElement.tagName, VideoPlayerElement);
+
+//#endregion
+export { VideoPlayerElement };
+//# sourceMappingURL=player.js.map

package/dist/default/define/video/player.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"player.js","names":[],"sources":["../../../../src/define/video/player.ts"],"sourcesContent":["import { features } from '@videojs/core/dom';\nimport { createPlayer } from '../../player/create-player';\n\nconst { PlayerElement } = createPlayer({\n  features: features.video,\n});\n\nexport class VideoPlayerElement extends PlayerElement {\n  static readonly tagName = 'video-player';\n}\n\ncustomElements.define(VideoPlayerElement.tagName, VideoPlayerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoPlayerElement.tagName]: VideoPlayerElement;\n  }\n}\n"],"mappings":";;;;AAGA,MAAM,EAAE,kBAAkB,aAAa,EACrC,UAAU,SAAS,OACpB,CAAC;AAEF,IAAa,qBAAb,cAAwC,cAAc;;iBAC1B;;;AAG5B,eAAe,OAAO,mBAAmB,SAAS,mBAAmB"}

package/dist/default/index.js

@@ -0,0 +1,24 @@
+import { PLAYER_CONTEXT_KEY, playerContext } from "./player/context.js";
+import { createContainerMixin } from "./store/container-mixin.js";
+import { createProviderMixin } from "./store/provider-mixin.js";
+import { MediaElement } from "./ui/media-element.js";
+import { PlayerController } from "./player/player-controller.js";
+import { createPlayerMixin } from "./player/player-mixin.js";
+import { createPlayer } from "./player/create-player.js";
+import { BufferingIndicatorElement } from "./ui/buffering-indicator/buffering-indicator-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 { 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 { PosterElement } from "./ui/poster/poster-element.js";
+import { SeekButtonElement } from "./ui/seek-button/seek-button-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 { createSelector, shallowEqual } from "@videojs/store";
+
+export * from "@videojs/core/dom"
+
+export { BufferingIndicatorElement, ControlsElement, ControlsGroupElement, FullscreenButtonElement, MediaElement, MuteButtonElement, PLAYER_CONTEXT_KEY, PiPButtonElement, PlayButtonElement, PlayerController, PosterElement, SeekButtonElement, TimeElement, TimeGroupElement, TimeSeparatorElement, createContainerMixin, createPlayer, createPlayerMixin, createProviderMixin, createSelector, playerContext, shallowEqual };

package/dist/default/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/default/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/default/media/hls-video/index.js

@@ -0,0 +1,21 @@
+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.nativeEl);
+	}
+	attributeChangedCallback(attrName, oldValue, newValue) {
+		if (attrName !== "src") super.attributeChangedCallback(attrName, oldValue, newValue);
+		if (attrName === "src" && oldValue !== newValue) this.src = newValue ?? "";
+	}
+};
+
+//#endregion
+export { HlsVideo };
+//# sourceMappingURL=index.js.map

package/dist/default/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.nativeEl);\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,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,SAAS;;CAG5B,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/default/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/default/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/default/player/create-player.js

@@ -0,0 +1,29 @@
+import { playerContext } from "./context.js";
+import { createContainerMixin } from "../store/container-mixin.js";
+import { createProviderMixin } from "../store/provider-mixin.js";
+import { MediaElement } from "../ui/media-element.js";
+import { PlayerController } from "./player-controller.js";
+import { createPlayerMixin } from "./player-mixin.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);
+	}
+	const PlayerMixin = createPlayerMixin(playerContext, create);
+	return {
+		context: playerContext,
+		create,
+		PlayerController,
+		PlayerElement: PlayerMixin(MediaElement),
+		PlayerMixin,
+		ProviderMixin: createProviderMixin(playerContext, create),
+		ContainerMixin: createContainerMixin(playerContext)
+	};
+}
+
+//#endregion
+export { createPlayer };
+//# sourceMappingURL=create-player.js.map

package/dist/default/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 { PlayerElementConstructor } from '../store/types';\nimport { MediaElement } from '../ui/media-element';\nimport { type PlayerContext, playerContext } from './context';\nimport { PlayerController } from './player-controller';\nimport { createPlayerMixin, type PlayerMixin } from './player-mixin';\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  /** Pre-composed player element ready for customElements.define(). */\n  PlayerElement: PlayerElementConstructor<Store>;\n\n  /** Mixin for a complete player element (provider + container). */\n  PlayerMixin: PlayerMixin<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 { features } from '@videojs/core/dom';\n * import { createPlayer, MediaElement } from '@videojs/html';\n *\n * const { PlayerElement, PlayerController, context } = createPlayer({\n *   features: features.video,\n * });\n *\n * // Simple: register pre-composed PlayerElement\n * customElements.define('video-player', PlayerElement);\n *\n * // Custom: extend with PlayerMixin\n * class MyPlayer extends PlayerMixin(MediaElement) {}\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 PlayerMixin = createPlayerMixin<PlayerStore>(playerContext, create);\n  const PlayerElement = PlayerMixin(MediaElement);\n  const ProviderMixin = createProviderMixin<PlayerStore>(playerContext, create);\n  const ContainerMixin = createContainerMixin<PlayerStore>(playerContext);\n\n  return {\n    context: playerContext,\n    create,\n    PlayerController,\n    PlayerElement,\n    PlayerMixin,\n    ProviderMixin,\n    ContainerMixin,\n  };\n}\n"],"mappings":";;;;;;;;;AA6FA,SAAgB,aAAa,QAAiF;CAC5G,MAAM,QAAQ,QAA0C,GAAG,OAAO,SAAS;CAE3E,SAAS,SAAsB;AAC7B,SAAO,aAA2B,CAAC,MAAM;;CAG3C,MAAM,cAAc,kBAA+B,eAAe,OAAO;AAKzE,QAAO;EACL,SAAS;EACT;EACA;EACA,eARoB,YAAY,aAAa;EAS7C;EACA,eAToB,oBAAiC,eAAe,OAAO;EAU3E,gBATqB,qBAAkC,cAAc;EAUtE"}

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

@@ -0,0 +1,63 @@
+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;
+	}
+	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

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

@@ -0,0 +1 @@
+{"version":3,"file":"player-controller.js","names":["#host","#selector","#consumer","#connect","#store"],"sources":["../../../src/player/player-controller.ts"],"sourcesContent":["import type { PlayerStore } from '@videojs/core/dom';\nimport type { ReactiveController, ReactiveControllerHost } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { InferStoreState, Selector } from '@videojs/store';\nimport { StoreController } from '@videojs/store/html';\n\nimport type { PlayerContext } from './context';\n\nexport type PlayerControllerHost = ReactiveControllerHost & HTMLElement;\n\n/**\n * Reactive controller for accessing player store state.\n *\n * Without selector: Returns the store, does NOT subscribe to changes.\n * With selector: Returns selected state, subscribes with shallowEqual comparison.\n *\n * @example\n * ```ts\n * // Store access (no subscription)\n * class Controls extends MediaElement {\n *   #player = new PlayerController(this, playerContext);\n *\n *   handleClick() {\n *     this.#player.value.setVolume(0.5);\n *   }\n * }\n *\n * // Selector-based subscription\n * class PlayButton extends MediaElement {\n *   #playback = new PlayerController(this, playerContext, selectPlayback);\n * }\n * ```\n */\nexport class PlayerController<Store extends PlayerStore, Result = Store> implements ReactiveController {\n  readonly #host: PlayerControllerHost;\n  readonly #selector: Selector<InferStoreState<Store>, Result> | undefined;\n\n  #consumer: ContextConsumer<PlayerContext<Store>, PlayerControllerHost>;\n  #store: StoreController<Store, Result> | null = null;\n\n  /**\n   * @label Without Selector\n   * @param host - The host element that owns this controller.\n   * @param context - Player context to resolve the store from.\n   */\n  constructor(host: PlayerControllerHost, context: PlayerContext<Store>);\n  /**\n   * @label With Selector\n   * @param host - The host element that owns this controller.\n   * @param context - Player context to resolve the store from.\n   * @param selector - Derives a value from the player store state.\n   */\n  constructor(\n    host: PlayerControllerHost,\n    context: PlayerContext<Store>,\n    selector: Selector<InferStoreState<Store>, Result>\n  );\n  constructor(\n    host: PlayerControllerHost,\n    context: PlayerContext<Store>,\n    selector?: Selector<InferStoreState<Store>, Result>\n  ) {\n    this.#host = host;\n    this.#selector = selector;\n\n    this.#consumer = new ContextConsumer(host, {\n      context,\n      callback: (ctx) => this.#connect(ctx),\n      subscribe: true,\n    });\n\n    host.addController(this);\n  }\n\n  get value(): Result | undefined {\n    const store = this.#consumer.value;\n    if (!store) return undefined;\n\n    // Without selector: return store directly\n    if (!this.#selector) return store as unknown as Result;\n\n    // With selector: use StoreController\n    return this.#store?.value;\n  }\n\n  hostConnected(): void {\n    const store = this.#consumer.value;\n    if (store) this.#connect(store);\n  }\n\n  hostDisconnected(): void {\n    this.#store = null;\n  }\n\n  #connect(store: Store): void {\n    if (!this.#store && this.#selector) {\n      this.#store = new StoreController(this.#host, store, this.#selector);\n    }\n  }\n}\n\nexport namespace PlayerController {\n  export type Host = PlayerControllerHost;\n\n  export type Constructor<Store extends PlayerStore = PlayerStore, Result = Store> = typeof PlayerController<\n    Store,\n    Result\n  >;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAa,mBAAb,MAAuG;CACrG,CAASA;CACT,CAASC;CAET;CACA,SAAgD;CAmBhD,YACE,MACA,SACA,UACA;AACA,QAAKD,OAAQ;AACb,QAAKC,WAAY;AAEjB,QAAKC,WAAY,IAAI,gBAAgB,MAAM;GACzC;GACA,WAAW,QAAQ,MAAKC,QAAS,IAAI;GACrC,WAAW;GACZ,CAAC;AAEF,OAAK,cAAc,KAAK;;CAG1B,IAAI,QAA4B;EAC9B,MAAM,QAAQ,MAAKD,SAAU;AAC7B,MAAI,CAAC,MAAO,QAAO;AAGnB,MAAI,CAAC,MAAKD,SAAW,QAAO;AAG5B,SAAO,MAAKG,OAAQ;;CAGtB,gBAAsB;EACpB,MAAM,QAAQ,MAAKF,SAAU;AAC7B,MAAI,MAAO,OAAKC,QAAS,MAAM;;CAGjC,mBAAyB;AACvB,QAAKC,QAAS;;CAGhB,SAAS,OAAoB;AAC3B,MAAI,CAAC,MAAKA,SAAU,MAAKH,SACvB,OAAKG,QAAS,IAAI,gBAAgB,MAAKJ,MAAO,OAAO,MAAKC,SAAU"}