npm - @videojs/html - Versions diffs - 10.0.0-beta.21 → 10.0.0-beta.23 - Mend

@videojs/html 10.0.0-beta.21 → 10.0.0-beta.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (498) hide show

package/cdn/{video-host-ycP7ckxU.js → video-host-BR_2vUZH.js} RENAMED Viewed

@@ -1,5 +1,6 @@
-import { n as namedNodeMapToObject, r as serializeAttributes } from "./media-attach-mixin-CYoNe7Sh.js";
+import { n as namedNodeMapToObject, r as serializeAttributes } from "./media-attach-mixin-pV8deGiO.js";
 import { n as kebabCase, t as pick } from "./pick-D-wCJ3iA.js";
+import { t as isFunction } from "./predicate-BOcV_HDG.js";
 //#region ../utils/dist/object/omit.js
 /**
@@ -282,12 +283,53 @@ var HTMLMediaElementHost = class extends EventTarget {
 	get target() {
 		return this.#target;
 	}
+	attach(target) {
+		if (!target || this.#target === target) return;
+		this.#target = target;
+		for (const type of this.#types) target.addEventListener(type, this.#forwardEvent);
+	}
+	detach() {
+		if (!this.#target) return;
+		for (const type of this.#types) this.#target.removeEventListener(type, this.#forwardEvent);
+		this.#target = null;
+	}
+	querySelectorAll(selectors) {
+		return this.target?.querySelectorAll(selectors) ?? [];
+	}
+	querySelector(selectors) {
+		return this.target?.querySelector(selectors) ?? null;
+	}
+	addEventListener(type, listener, options) {
+		if (!this.#types.has(type)) {
+			this.#types.add(type);
+			this.target?.addEventListener(type, this.#forwardEvent);
+		}
+		super.addEventListener(type, listener, options);
+	}
+	removeEventListener(type, listener, options) {
+		super.removeEventListener(type, listener, options);
+	}
+	#forwardEvent = (event) => {
+		this.dispatchEvent(new event.constructor(event.type, event));
+	};
+	get title() {
+		return this.target?.title ?? "";
+	}
+	set title(value) {
+		if (this.target) this.target.title = value;
+	}
 	get paused() {
 		return this.target?.paused ?? true;
 	}
 	get ended() {
 		return this.target?.ended ?? false;
 	}
+	get loop() {
+		return this.target?.loop ?? false;
+	}
+	set loop(value) {
+		if (this.target) this.target.loop = value;
+	}
 	play() {
 		return this.target?.play() ?? Promise.reject();
 	}
@@ -351,60 +393,61 @@ var HTMLMediaElementHost = class extends EventTarget {
 	get textTracks() {
 		return this.target?.textTracks ?? [];
 	}
-	attach(target) {
-		if (!target || this.#target === target) return;
-		this.#target = target;
-		for (const type of this.#types) target.addEventListener(type, this.#forwardEvent);
+	get remote() {
+		return this.target?.remote;
 	}
-	detach() {
-		if (!this.#target) return;
-		for (const type of this.#types) this.#target.removeEventListener(type, this.#forwardEvent);
-		this.#target = null;
-	}
-	querySelectorAll(selectors) {
-		return this.target?.querySelectorAll(selectors) ?? [];
-	}
-	addEventListener(type, listener, options) {
-		if (!this.#types.has(type)) {
-			this.#types.add(type);
-			this.target?.addEventListener(type, this.#forwardEvent);
-		}
-		super.addEventListener(type, listener, options);
+	get disableRemotePlayback() {
+		return this.target?.disableRemotePlayback ?? false;
 	}
-	removeEventListener(type, listener, options) {
-		super.removeEventListener(type, listener, options);
+	set disableRemotePlayback(value) {
+		if (this.target) this.target.disableRemotePlayback = value;
 	}
-	#forwardEvent = (event) => {
-		this.dispatchEvent(new event.constructor(event.type, event));
-	};
 };
 //#endregion
 //#region ../core/dist/dev/dom/media/video-host.js
 var HTMLVideoElementHost = class extends HTMLMediaElementHost {
-	requestPictureInPicture() {
-		return this.target?.requestPictureInPicture() ?? Promise.reject();
+	get poster() {
+		return this.target?.poster ?? "";
 	}
-	requestFullscreen() {
-		return this.target?.requestFullscreen() ?? Promise.reject();
+	set poster(value) {
+		if (this.target) this.target.poster = value;
+	}
+	get webkitPresentationMode() {
+		return this.target?.webkitPresentationMode;
 	}
-	webkitEnterFullscreen() {
-		return this.target?.webkitEnterFullscreen?.();
+	get webkitSetPresentationMode() {
+		const target = this.target;
+		const fn = target?.webkitSetPresentationMode;
+		return isFunction(fn) ? fn.bind(target) : void 0;
 	}
-	webkitExitFullscreen() {
-		return this.target?.webkitExitFullscreen?.();
+	get isPictureInPicture() {
+		return !!this.target && globalThis.document?.pictureInPictureElement === this.target || this.webkitPresentationMode === "picture-in-picture";
 	}
-	webkitSetPresentationMode(mode) {
-		return this.target?.webkitSetPresentationMode?.(mode);
+	get isFullscreen() {
+		if (!this.target) return false;
+		if (this.webkitPresentationMode === "fullscreen") return true;
+		const doc = globalThis.document;
+		return doc?.fullscreenElement === this.target || doc?.webkitFullscreenElement === this.target;
 	}
-	get webkitDisplayingFullscreen() {
-		return this.target?.webkitDisplayingFullscreen ?? false;
+	async requestPictureInPicture() {
+		if (!this.target) return Promise.reject();
+		return this.target.requestPictureInPicture();
 	}
-	get webkitPresentationMode() {
-		return this.target?.webkitPresentationMode ?? "inline";
+	async exitPictureInPicture() {
+		if (!this.target) return Promise.reject();
+		return globalThis.document?.exitPictureInPicture();
+	}
+	requestFullscreen() {
+		if (!this.target) return Promise.reject();
+		return this.target.requestFullscreen();
+	}
+	exitFullscreen() {
+		if (!this.target) return Promise.reject();
+		return globalThis.document?.exitFullscreen();
 	}
 };
 //#endregion
 export { CustomMediaElement as n, HTMLVideoElementHost as t };
-//# sourceMappingURL=video-host-ycP7ckxU.js.map
+//# sourceMappingURL=video-host-BR_2vUZH.js.map

package/cdn/video-host-BR_2vUZH.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"video-host-BR_2vUZH.js","names":["#define","#mediaHost","#attachToTarget","#childObserver","#syncMediaChildAttribute","#syncMediaChildren","#bridgedEventTypes","#bridgeEvent","#childMap","#enableDefaultTrack","#target","#types","#forwardEvent"],"sources":["../../utils/dist/object/omit.js","../../core/dist/dev/dom/media/custom-media-element/index.js","../../core/dist/dev/dom/media/media-host.js","../../core/dist/dev/dom/media/video-host.js"],"sourcesContent":["//#region src/object/omit.ts\n/**\n* Creates a new object without the specified keys.\n*\n* @example\n* const obj = { a: 1, b: 2, c: 3 };\n* omit(obj, ['b']); // { a: 1, c: 3 }\n*/\nfunction omit(obj, keys) {\n\tconst result = {};\n\tfor (const key in obj) if (!keys.includes(key)) result[key] = obj[key];\n\treturn result;\n}\n//#endregion\nexport { omit };\n\n//# sourceMappingURL=omit.js.map","import { omit, pick } from \"@videojs/utils/object\";\nimport { namedNodeMapToObject, serializeAttributes } from \"@videojs/utils/dom\";\nimport { kebabCase } from \"@videojs/utils/string\";\n//#region src/dom/media/custom-media-element/index.ts\n/** CSS custom property names for video elements. */\nconst VideoCSSVars = {\n\tborderRadius: \"--media-video-border-radius\",\n\tobjectFit: \"--media-object-fit\",\n\tobjectPosition: \"--media-object-position\",\n\tcaptionTrackDuration: \"--media-caption-track-duration\",\n\tcaptionTrackDelay: \"--media-caption-track-delay\",\n\tcaptionTrackY: \"--media-caption-track-y\"\n};\n/** CSS custom property names for audio elements. */\nconst AudioCSSVars = {};\n/** Helper function to generate the HTML template for video elements. */\nfunction getVideoTemplateHTML(attrs) {\n\treturn `\n <style>\n :host {\n display: contents;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n border-radius: var(${VideoCSSVars.borderRadius});\n object-fit: var(${VideoCSSVars.objectFit}, contain);\n object-position: var(${VideoCSSVars.objectPosition}, center);\n }\n\n video::-webkit-media-text-track-container {\n transition: translate var(${VideoCSSVars.captionTrackDuration}, 0) ease-out;\n transition-delay: var(${VideoCSSVars.captionTrackDelay}, 0);\n translate: 0 var(${VideoCSSVars.captionTrackY}, 0);\n scale: 0.98;\n z-index: 1;\n font-family: inherit;\n }\n </style>\n <slot name=\"media\">\n <video${serializeAttributes(attrs)}></video>\n </slot>\n <slot></slot>\n `;\n}\n/** Helper function to generate the HTML template for other elements. */\nfunction getCommonTemplateHTML(tag) {\n\treturn (attrs) => {\n\t\treturn `\n <style>\n :host {\n display: inline-flex;\n line-height: 0;\n flex-direction: column;\n justify-content: end;\n }\n\n ${tag} {\n width: 100%;\n }\n </style>\n <slot name=\"media\">\n <${tag}${serializeAttributes(attrs)}></${tag}>\n </slot>\n <slot></slot>\n `;\n\t};\n}\nconst excludedProperties = [\n\t\"attach\",\n\t\"detach\",\n\t\"destroy\"\n];\nfunction CustomMediaElement(tag, MediaHost) {\n\tconst mediaHostAttrToProp = /* @__PURE__ */ new Map();\n\tlet isDefined = false;\n\tclass CustomMedia extends (globalThis.HTMLElement ?? class {}) {\n\t\tstatic getTemplateHTML = tag.endsWith(\"video\") ? getVideoTemplateHTML : getCommonTemplateHTML(tag);\n\t\tstatic shadowRootOptions = { mode: \"open\" };\n\t\tstatic properties = {\n\t\t\tautoPictureInPicture: { type: Boolean },\n\t\t\tautoplay: { type: Boolean },\n\t\t\tcontrols: { type: Boolean },\n\t\t\tcontrolsList: { type: String },\n\t\t\tcrossOrigin: { type: String },\n\t\t\tdefaultMuted: {\n\t\t\t\ttype: Boolean,\n\t\t\t\tattribute: \"muted\"\n\t\t\t},\n\t\t\tdisablePictureInPicture: { type: Boolean },\n\t\t\tdisableRemotePlayback: { type: Boolean },\n\t\t\tloading: { type: String },\n\t\t\tloop: { type: Boolean },\n\t\t\tplaysInline: { type: Boolean },\n\t\t\tposter: { type: String },\n\t\t\tpreload: { type: String },\n\t\t\tsrc: { type: String }\n\t\t};\n\t\tstatic get observedAttributes() {\n\t\t\tCustomMedia.#define(this);\n\t\t\treturn [...getAttrsFromProps(this.properties)];\n\t\t}\n\t\tstatic #define(ctor) {\n\t\t\tif (isDefined) return;\n\t\t\tisDefined = true;\n\t\t\tfor (let proto = MediaHost.prototype; proto && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) for (const prop of Object.getOwnPropertyNames(proto)) {\n\t\t\t\tif (prop in CustomMedia.prototype || excludedProperties.includes(prop)) continue;\n\t\t\t\tconst descriptor = Object.getOwnPropertyDescriptor(proto, prop);\n\t\t\t\tif (!descriptor) continue;\n\t\t\t\tconst config = {\n\t\t\t\t\tenumerable: true,\n\t\t\t\t\tconfigurable: true\n\t\t\t\t};\n\t\t\t\tif (typeof descriptor.value === \"function\") config.value = function(...args) {\n\t\t\t\t\treturn this.#mediaHost[prop](...args);\n\t\t\t\t};\n\t\t\t\telse if (descriptor.get) {\n\t\t\t\t\tconfig.get = function() {\n\t\t\t\t\t\treturn this.#mediaHost[prop];\n\t\t\t\t\t};\n\t\t\t\t\tif (descriptor.set) {\n\t\t\t\t\t\tconst attr = kebabCase(prop);\n\t\t\t\t\t\tif (ctor.observedAttributes.includes(attr)) {\n\t\t\t\t\t\t\tmediaHostAttrToProp.set(attr, prop);\n\t\t\t\t\t\t\tconfig.set = function(val) {\n\t\t\t\t\t\t\t\tif (val === true || val === false || val == null) this.toggleAttribute(attr, Boolean(val));\n\t\t\t\t\t\t\t\telse this.setAttribute(attr, String(val));\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t} else config.set = function(val) {\n\t\t\t\t\t\t\tthis.#mediaHost[prop] = val;\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tObject.defineProperty(CustomMedia.prototype, prop, config);\n\t\t\t}\n\t\t\tconst properties = ctor.properties;\n\t\t\tfor (const [prop, { type, attribute }] of Object.entries(properties)) {\n\t\t\t\tif (prop in CustomMedia.prototype) continue;\n\t\t\t\tconst attr = attribute ?? prop.toLowerCase();\n\t\t\t\tObject.defineProperty(CustomMedia.prototype, prop, {\n\t\t\t\t\tget: function() {\n\t\t\t\t\t\treturn type === Boolean ? this.hasAttribute(attr) : this.getAttribute(attr);\n\t\t\t\t\t},\n\t\t\t\t\tset: function(val) {\n\t\t\t\t\t\tif (type === Boolean) this.toggleAttribute(attr, Boolean(val));\n\t\t\t\t\t\telse this.setAttribute(attr, val);\n\t\t\t\t\t},\n\t\t\t\t\tenumerable: true,\n\t\t\t\t\tconfigurable: true\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t\t#mediaHost;\n\t\t#bridgedEventTypes = /* @__PURE__ */ new Set();\n\t\t#childMap = /* @__PURE__ */ new Map();\n\t\t#childObserver;\n\t\tconstructor() {\n\t\t\tsuper();\n\t\t\tif (!this.shadowRoot) {\n\t\t\t\tconst ctor = this.constructor;\n\t\t\t\tthis.attachShadow(ctor.shadowRootOptions);\n\t\t\t\tconst allowedKeys = getAttrsFromProps(ctor.properties);\n\t\t\t\tconst disallowedKeys = [...mediaHostAttrToProp.keys()];\n\t\t\t\tconst attrs = omit(pick(namedNodeMapToObject(this.attributes), allowedKeys), disallowedKeys);\n\t\t\t\tif (tag && !attrs.part) attrs.part = tag;\n\t\t\t\tthis.shadowRoot.innerHTML = ctor.getTemplateHTML(attrs);\n\t\t\t}\n\t\t\tthis.#mediaHost = new MediaHost();\n\t\t\tthis.#attachToTarget();\n\t\t\tthis.#childObserver = new MutationObserver(this.#syncMediaChildAttribute.bind(this));\n\t\t\tthis.shadowRoot.addEventListener(\"slotchange\", () => {\n\t\t\t\tthis.#attachToTarget();\n\t\t\t\tthis.#syncMediaChildren();\n\t\t\t});\n\t\t\tthis.#syncMediaChildren();\n\t\t}\n\t\t#attachToTarget() {\n\t\t\tconst target = this.target;\n\t\t\tif (target === this.#mediaHost.target) return;\n\t\t\tif (this.#mediaHost.target) this.#mediaHost.detach();\n\t\t\tthis.#mediaHost.attach(target);\n\t\t}\n\t\tget target() {\n\t\t\treturn this.querySelector(\":scope > [slot=media]\") ?? this.querySelector(tag) ?? this.shadowRoot?.querySelector(tag) ?? null;\n\t\t}\n\t\tdisconnectedCallback() {\n\t\t\tif (!this.hasAttribute(\"keep-alive\")) this.#mediaHost.destroy();\n\t\t}\n\t\taddEventListener(type, listener, options) {\n\t\t\tsuper.addEventListener(type, listener, options);\n\t\t\tif (!this.#bridgedEventTypes.has(type)) {\n\t\t\t\tthis.#bridgedEventTypes.add(type);\n\t\t\t\tthis.#mediaHost.addEventListener(type, this.#bridgeEvent);\n\t\t\t}\n\t\t}\n\t\tremoveEventListener(type, listener, options) {\n\t\t\tsuper.removeEventListener(type, listener, options);\n\t\t}\n\t\t#bridgeEvent = (event) => {\n\t\t\tif (!event.composed) this.dispatchEvent(new event.constructor(event.type, event));\n\t\t};\n\t\tattributeChangedCallback(attrName, oldValue, newValue) {\n\t\t\tconst prop = mediaHostAttrToProp.get(attrName);\n\t\t\tif (prop) {\n\t\t\t\tif (oldValue !== newValue) {\n\t\t\t\t\tconst valueType = typeof this.#mediaHost[prop];\n\t\t\t\t\tthis.#mediaHost[prop] = valueType === \"boolean\" ? newValue !== null : valueType === \"number\" ? Number(newValue) : newValue ?? \"\";\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (!CustomMedia.observedAttributes.includes(attrName) && this.constructor.observedAttributes.includes(attrName)) return;\n\t\t\tif (newValue === null) this.target?.removeAttribute(attrName);\n\t\t\telse if (this.target?.getAttribute(attrName) !== newValue) this.target?.setAttribute(attrName, newValue);\n\t\t}\n\t\t#syncMediaChildren() {\n\t\t\tconst defaultSlot = this.shadowRoot?.querySelector(\"slot:not([name])\");\n\t\t\tconst mediaChildren = new Set(defaultSlot?.assignedElements({ flatten: true }).filter((el) => el.localName === \"track\" || el.localName === \"source\"));\n\t\t\tfor (const [el, clone] of this.#childMap) if (!mediaChildren.has(el)) {\n\t\t\t\tclone.remove();\n\t\t\t\tthis.#childMap.delete(el);\n\t\t\t}\n\t\t\tfor (const el of mediaChildren) {\n\t\t\t\tlet clone = this.#childMap.get(el);\n\t\t\t\tif (!clone) {\n\t\t\t\t\tclone = el.cloneNode();\n\t\t\t\t\tthis.#childMap.set(el, clone);\n\t\t\t\t\tthis.#childObserver?.observe(el, { attributes: true });\n\t\t\t\t}\n\t\t\t\tthis.target?.append(clone);\n\t\t\t\tthis.#enableDefaultTrack(clone);\n\t\t\t}\n\t\t}\n\t\t#syncMediaChildAttribute(mutations) {\n\t\t\tfor (const mutation of mutations) if (mutation.type === \"attributes\") {\n\t\t\t\tconst { target, attributeName } = mutation;\n\t\t\t\tconst clone = this.#childMap.get(target);\n\t\t\t\tif (clone && attributeName) {\n\t\t\t\t\tclone.setAttribute(attributeName, target.getAttribute(attributeName) ?? \"\");\n\t\t\t\t\tthis.#enableDefaultTrack(clone);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t#enableDefaultTrack(trackEl) {\n\t\t\tif (trackEl && trackEl.localName === \"track\" && trackEl.default && (trackEl.kind === \"chapters\" || trackEl.kind === \"metadata\") && trackEl.track.mode === \"disabled\") trackEl.track.mode = \"hidden\";\n\t\t}\n\t}\n\treturn CustomMedia;\n}\nfunction getAttrsFromProps(props) {\n\treturn Object.keys(props).map((prop) => props[prop]?.attribute ?? prop.toLowerCase());\n}\n//#endregion\nexport { AudioCSSVars, CustomMediaElement, VideoCSSVars };\n\n//# sourceMappingURL=index.js.map","//#region src/dom/media/media-host.ts\nconst EMPTY_TIME_RANGES = Object.freeze({\n\tlength: 0,\n\tstart() {\n\t\treturn 0;\n\t},\n\tend() {\n\t\treturn 0;\n\t}\n});\nvar HTMLMediaElementHost = class extends EventTarget {\n\t#target = null;\n\t#types = /* @__PURE__ */ new Set();\n\tget target() {\n\t\treturn this.#target;\n\t}\n\tattach(target) {\n\t\tif (!target || this.#target === target) return;\n\t\tthis.#target = target;\n\t\tfor (const type of this.#types) target.addEventListener(type, this.#forwardEvent);\n\t}\n\tdetach() {\n\t\tif (!this.#target) return;\n\t\tfor (const type of this.#types) this.#target.removeEventListener(type, this.#forwardEvent);\n\t\tthis.#target = null;\n\t}\n\tquerySelectorAll(selectors) {\n\t\treturn this.target?.querySelectorAll(selectors) ?? [];\n\t}\n\tquerySelector(selectors) {\n\t\treturn this.target?.querySelector(selectors) ?? null;\n\t}\n\taddEventListener(type, listener, options) {\n\t\tif (!this.#types.has(type)) {\n\t\t\tthis.#types.add(type);\n\t\t\tthis.target?.addEventListener(type, this.#forwardEvent);\n\t\t}\n\t\tsuper.addEventListener(type, listener, options);\n\t}\n\tremoveEventListener(type, listener, options) {\n\t\tsuper.removeEventListener(type, listener, options);\n\t}\n\t#forwardEvent = (event) => {\n\t\tthis.dispatchEvent(new event.constructor(event.type, event));\n\t};\n\tget title() {\n\t\treturn this.target?.title ?? \"\";\n\t}\n\tset title(value) {\n\t\tif (this.target) this.target.title = value;\n\t}\n\tget paused() {\n\t\treturn this.target?.paused ?? true;\n\t}\n\tget ended() {\n\t\treturn this.target?.ended ?? false;\n\t}\n\tget loop() {\n\t\treturn this.target?.loop ?? false;\n\t}\n\tset loop(value) {\n\t\tif (this.target) this.target.loop = value;\n\t}\n\tplay() {\n\t\treturn this.target?.play() ?? Promise.reject();\n\t}\n\tpause() {\n\t\tthis.target?.pause();\n\t}\n\tget currentTime() {\n\t\treturn this.target?.currentTime ?? 0;\n\t}\n\tset currentTime(value) {\n\t\tif (this.target) this.target.currentTime = value;\n\t}\n\tget duration() {\n\t\treturn this.target?.duration ?? NaN;\n\t}\n\tget seeking() {\n\t\treturn this.target?.seeking ?? false;\n\t}\n\tget src() {\n\t\treturn this.target?.src ?? \"\";\n\t}\n\tset src(value) {\n\t\tif (this.target) this.target.src = value;\n\t}\n\tget currentSrc() {\n\t\treturn this.target?.currentSrc ?? \"\";\n\t}\n\tget readyState() {\n\t\treturn this.target?.readyState ?? 0;\n\t}\n\tload() {\n\t\tthis.target?.load();\n\t}\n\tget volume() {\n\t\treturn this.target?.volume ?? 1;\n\t}\n\tset volume(value) {\n\t\tif (this.target) this.target.volume = value;\n\t}\n\tget muted() {\n\t\treturn this.target?.muted ?? false;\n\t}\n\tset muted(value) {\n\t\tif (this.target) this.target.muted = value;\n\t}\n\tget playbackRate() {\n\t\treturn this.target?.playbackRate ?? 1;\n\t}\n\tset playbackRate(value) {\n\t\tif (this.target) this.target.playbackRate = value;\n\t}\n\tget buffered() {\n\t\treturn this.target?.buffered ?? EMPTY_TIME_RANGES;\n\t}\n\tget seekable() {\n\t\treturn this.target?.seekable ?? EMPTY_TIME_RANGES;\n\t}\n\tget error() {\n\t\treturn this.target?.error ?? null;\n\t}\n\tget textTracks() {\n\t\treturn this.target?.textTracks ?? [];\n\t}\n\tget remote() {\n\t\treturn this.target?.remote;\n\t}\n\tget disableRemotePlayback() {\n\t\treturn this.target?.disableRemotePlayback ?? false;\n\t}\n\tset disableRemotePlayback(value) {\n\t\tif (this.target) this.target.disableRemotePlayback = value;\n\t}\n};\n//#endregion\nexport { HTMLMediaElementHost };\n\n//# sourceMappingURL=media-host.js.map","import { HTMLMediaElementHost } from \"./media-host.js\";\nimport { isFunction } from \"@videojs/utils/predicate\";\n//#region src/dom/media/video-host.ts\nvar HTMLVideoElementHost = class extends HTMLMediaElementHost {\n\tget poster() {\n\t\treturn this.target?.poster ?? \"\";\n\t}\n\tset poster(value) {\n\t\tif (this.target) this.target.poster = value;\n\t}\n\tget webkitPresentationMode() {\n\t\treturn this.target?.webkitPresentationMode;\n\t}\n\tget webkitSetPresentationMode() {\n\t\tconst target = this.target;\n\t\tconst fn = target?.webkitSetPresentationMode;\n\t\treturn isFunction(fn) ? fn.bind(target) : void 0;\n\t}\n\tget isPictureInPicture() {\n\t\treturn !!this.target && globalThis.document?.pictureInPictureElement === this.target || this.webkitPresentationMode === \"picture-in-picture\";\n\t}\n\tget isFullscreen() {\n\t\tif (!this.target) return false;\n\t\tif (this.webkitPresentationMode === \"fullscreen\") return true;\n\t\tconst doc = globalThis.document;\n\t\treturn doc?.fullscreenElement === this.target || doc?.webkitFullscreenElement === this.target;\n\t}\n\tasync requestPictureInPicture() {\n\t\tif (!this.target) return Promise.reject();\n\t\treturn this.target.requestPictureInPicture();\n\t}\n\tasync exitPictureInPicture() {\n\t\tif (!this.target) return Promise.reject();\n\t\treturn globalThis.document?.exitPictureInPicture();\n\t}\n\trequestFullscreen() {\n\t\tif (!this.target) return Promise.reject();\n\t\treturn this.target.requestFullscreen();\n\t}\n\texitFullscreen() {\n\t\tif (!this.target) return Promise.reject();\n\t\treturn globalThis.document?.exitFullscreen();\n\t}\n};\n//#endregion\nexport { HTMLVideoElementHost };\n\n//# sourceMappingURL=video-host.js.map"],"mappings":";;;;;;;;;;;;AAQA,SAAS,KAAK,KAAK,MAAM;CACxB,MAAM,SAAS,EAAE;AACjB,MAAK,MAAM,OAAO,IAAK,KAAI,CAAC,KAAK,SAAS,IAAI,CAAE,QAAO,OAAO,IAAI;AAClE,QAAO;;;;;;ACNR,MAAM,eAAe;CACpB,cAAc;CACd,WAAW;CACX,gBAAgB;CAChB,sBAAsB;CACtB,mBAAmB;CACnB,eAAe;CACf;;AAID,SAAS,qBAAqB,OAAO;AACpC,QAAO;;;;;;;;;;6BAUqB,aAAa,aAAa;0BAC7B,aAAa,UAAU;+BAClB,aAAa,eAAe;;;;oCAIvB,aAAa,qBAAqB;gCACtC,aAAa,kBAAkB;2BACpC,aAAa,cAAc;;;;;;;cAOxC,oBAAoB,MAAM,CAAC;;;;;;AAMzC,SAAS,sBAAsB,KAAK;AACnC,SAAQ,UAAU;AACjB,SAAO;;;;;;;;;UASC,IAAI;;;;;WAKH,MAAM,oBAAoB,MAAM,CAAC,KAAK,IAAI;;;;;;AAMrD,MAAM,qBAAqB;CAC1B;CACA;CACA;CACA;AACD,SAAS,mBAAmB,KAAK,WAAW;CAC3C,MAAM,sCAAsC,IAAI,KAAK;CACrD,IAAI,YAAY;CAChB,MAAM,qBAAqB,WAAW,eAAe,MAAM,IAAI;EAC9D,OAAO,kBAAkB,IAAI,SAAS,QAAQ,GAAG,uBAAuB,sBAAsB,IAAI;EAClG,OAAO,oBAAoB,EAAE,MAAM,QAAQ;EAC3C,OAAO,aAAa;GACnB,sBAAsB,EAAE,MAAM,SAAS;GACvC,UAAU,EAAE,MAAM,SAAS;GAC3B,UAAU,EAAE,MAAM,SAAS;GAC3B,cAAc,EAAE,MAAM,QAAQ;GAC9B,aAAa,EAAE,MAAM,QAAQ;GAC7B,cAAc;IACb,MAAM;IACN,WAAW;IACX;GACD,yBAAyB,EAAE,MAAM,SAAS;GAC1C,uBAAuB,EAAE,MAAM,SAAS;GACxC,SAAS,EAAE,MAAM,QAAQ;GACzB,MAAM,EAAE,MAAM,SAAS;GACvB,aAAa,EAAE,MAAM,SAAS;GAC9B,QAAQ,EAAE,MAAM,QAAQ;GACxB,SAAS,EAAE,MAAM,QAAQ;GACzB,KAAK,EAAE,MAAM,QAAQ;GACrB;EACD,WAAW,qBAAqB;AAC/B,gBAAYA,OAAQ,KAAK;AACzB,UAAO,CAAC,GAAG,kBAAkB,KAAK,WAAW,CAAC;;EAE/C,QAAOA,OAAQ,MAAM;AACpB,OAAI,UAAW;AACf,eAAY;AACZ,QAAK,IAAI,QAAQ,UAAU,WAAW,SAAS,UAAU,OAAO,WAAW,QAAQ,OAAO,eAAe,MAAM,CAAE,MAAK,MAAM,QAAQ,OAAO,oBAAoB,MAAM,EAAE;AACtK,QAAI,QAAQ,YAAY,aAAa,mBAAmB,SAAS,KAAK,CAAE;IACxE,MAAM,aAAa,OAAO,yBAAyB,OAAO,KAAK;AAC/D,QAAI,CAAC,WAAY;IACjB,MAAM,SAAS;KACd,YAAY;KACZ,cAAc;KACd;AACD,QAAI,OAAO,WAAW,UAAU,WAAY,QAAO,QAAQ,SAAS,GAAG,MAAM;AAC5E,YAAO,MAAKC,UAAW,MAAM,GAAG,KAAK;;aAE7B,WAAW,KAAK;AACxB,YAAO,MAAM,WAAW;AACvB,aAAO,MAAKA,UAAW;;AAExB,SAAI,WAAW,KAAK;MACnB,MAAM,OAAO,UAAU,KAAK;AAC5B,UAAI,KAAK,mBAAmB,SAAS,KAAK,EAAE;AAC3C,2BAAoB,IAAI,MAAM,KAAK;AACnC,cAAO,MAAM,SAAS,KAAK;AAC1B,YAAI,QAAQ,QAAQ,QAAQ,SAAS,OAAO,KAAM,MAAK,gBAAgB,MAAM,QAAQ,IAAI,CAAC;YACrF,MAAK,aAAa,MAAM,OAAO,IAAI,CAAC;;YAEpC,QAAO,MAAM,SAAS,KAAK;AACjC,aAAKA,UAAW,QAAQ;;;;AAI3B,WAAO,eAAe,YAAY,WAAW,MAAM,OAAO;;GAE3D,MAAM,aAAa,KAAK;AACxB,QAAK,MAAM,CAAC,MAAM,EAAE,MAAM,gBAAgB,OAAO,QAAQ,WAAW,EAAE;AACrE,QAAI,QAAQ,YAAY,UAAW;IACnC,MAAM,OAAO,aAAa,KAAK,aAAa;AAC5C,WAAO,eAAe,YAAY,WAAW,MAAM;KAClD,KAAK,WAAW;AACf,aAAO,SAAS,UAAU,KAAK,aAAa,KAAK,GAAG,KAAK,aAAa,KAAK;;KAE5E,KAAK,SAAS,KAAK;AAClB,UAAI,SAAS,QAAS,MAAK,gBAAgB,MAAM,QAAQ,IAAI,CAAC;UACzD,MAAK,aAAa,MAAM,IAAI;;KAElC,YAAY;KACZ,cAAc;KACd,CAAC;;;EAGJ;EACA,qCAAqC,IAAI,KAAK;EAC9C,4BAA4B,IAAI,KAAK;EACrC;EACA,cAAc;AACb,UAAO;AACP,OAAI,CAAC,KAAK,YAAY;IACrB,MAAM,OAAO,KAAK;AAClB,SAAK,aAAa,KAAK,kBAAkB;IACzC,MAAM,cAAc,kBAAkB,KAAK,WAAW;IACtD,MAAM,iBAAiB,CAAC,GAAG,oBAAoB,MAAM,CAAC;IACtD,MAAM,QAAQ,KAAK,KAAK,qBAAqB,KAAK,WAAW,EAAE,YAAY,EAAE,eAAe;AAC5F,QAAI,OAAO,CAAC,MAAM,KAAM,OAAM,OAAO;AACrC,SAAK,WAAW,YAAY,KAAK,gBAAgB,MAAM;;AAExD,SAAKA,YAAa,IAAI,WAAW;AACjC,SAAKC,gBAAiB;AACtB,SAAKC,gBAAiB,IAAI,iBAAiB,MAAKC,wBAAyB,KAAK,KAAK,CAAC;AACpF,QAAK,WAAW,iBAAiB,oBAAoB;AACpD,UAAKF,gBAAiB;AACtB,UAAKG,mBAAoB;KACxB;AACF,SAAKA,mBAAoB;;EAE1B,kBAAkB;GACjB,MAAM,SAAS,KAAK;AACpB,OAAI,WAAW,MAAKJ,UAAW,OAAQ;AACvC,OAAI,MAAKA,UAAW,OAAQ,OAAKA,UAAW,QAAQ;AACpD,SAAKA,UAAW,OAAO,OAAO;;EAE/B,IAAI,SAAS;AACZ,UAAO,KAAK,cAAc,wBAAwB,IAAI,KAAK,cAAc,IAAI,IAAI,KAAK,YAAY,cAAc,IAAI,IAAI;;EAEzH,uBAAuB;AACtB,OAAI,CAAC,KAAK,aAAa,aAAa,CAAE,OAAKA,UAAW,SAAS;;EAEhE,iBAAiB,MAAM,UAAU,SAAS;AACzC,SAAM,iBAAiB,MAAM,UAAU,QAAQ;AAC/C,OAAI,CAAC,MAAKK,kBAAmB,IAAI,KAAK,EAAE;AACvC,UAAKA,kBAAmB,IAAI,KAAK;AACjC,UAAKL,UAAW,iBAAiB,MAAM,MAAKM,YAAa;;;EAG3D,oBAAoB,MAAM,UAAU,SAAS;AAC5C,SAAM,oBAAoB,MAAM,UAAU,QAAQ;;EAEnD,gBAAgB,UAAU;AACzB,OAAI,CAAC,MAAM,SAAU,MAAK,cAAc,IAAI,MAAM,YAAY,MAAM,MAAM,MAAM,CAAC;;EAElF,yBAAyB,UAAU,UAAU,UAAU;GACtD,MAAM,OAAO,oBAAoB,IAAI,SAAS;AAC9C,OAAI,MAAM;AACT,QAAI,aAAa,UAAU;KAC1B,MAAM,YAAY,OAAO,MAAKN,UAAW;AACzC,WAAKA,UAAW,QAAQ,cAAc,YAAY,aAAa,OAAO,cAAc,WAAW,OAAO,SAAS,GAAG,YAAY;;AAE/H;;AAED,OAAI,CAAC,YAAY,mBAAmB,SAAS,SAAS,IAAI,KAAK,YAAY,mBAAmB,SAAS,SAAS,CAAE;AAClH,OAAI,aAAa,KAAM,MAAK,QAAQ,gBAAgB,SAAS;YACpD,KAAK,QAAQ,aAAa,SAAS,KAAK,SAAU,MAAK,QAAQ,aAAa,UAAU,SAAS;;EAEzG,qBAAqB;GACpB,MAAM,cAAc,KAAK,YAAY,cAAc,mBAAmB;GACtE,MAAM,gBAAgB,IAAI,IAAI,aAAa,iBAAiB,EAAE,SAAS,MAAM,CAAC,CAAC,QAAQ,OAAO,GAAG,cAAc,WAAW,GAAG,cAAc,SAAS,CAAC;AACrJ,QAAK,MAAM,CAAC,IAAI,UAAU,MAAKO,SAAW,KAAI,CAAC,cAAc,IAAI,GAAG,EAAE;AACrE,UAAM,QAAQ;AACd,UAAKA,SAAU,OAAO,GAAG;;AAE1B,QAAK,MAAM,MAAM,eAAe;IAC/B,IAAI,QAAQ,MAAKA,SAAU,IAAI,GAAG;AAClC,QAAI,CAAC,OAAO;AACX,aAAQ,GAAG,WAAW;AACtB,WAAKA,SAAU,IAAI,IAAI,MAAM;AAC7B,WAAKL,eAAgB,QAAQ,IAAI,EAAE,YAAY,MAAM,CAAC;;AAEvD,SAAK,QAAQ,OAAO,MAAM;AAC1B,UAAKM,mBAAoB,MAAM;;;EAGjC,yBAAyB,WAAW;AACnC,QAAK,MAAM,YAAY,UAAW,KAAI,SAAS,SAAS,cAAc;IACrE,MAAM,EAAE,QAAQ,kBAAkB;IAClC,MAAM,QAAQ,MAAKD,SAAU,IAAI,OAAO;AACxC,QAAI,SAAS,eAAe;AAC3B,WAAM,aAAa,eAAe,OAAO,aAAa,cAAc,IAAI,GAAG;AAC3E,WAAKC,mBAAoB,MAAM;;;;EAIlC,oBAAoB,SAAS;AAC5B,OAAI,WAAW,QAAQ,cAAc,WAAW,QAAQ,YAAY,QAAQ,SAAS,cAAc,QAAQ,SAAS,eAAe,QAAQ,MAAM,SAAS,WAAY,SAAQ,MAAM,OAAO;;;AAG7L,QAAO;;AAER,SAAS,kBAAkB,OAAO;AACjC,QAAO,OAAO,KAAK,MAAM,CAAC,KAAK,SAAS,MAAM,OAAO,aAAa,KAAK,aAAa,CAAC;;;;;AC1PtF,MAAM,oBAAoB,OAAO,OAAO;CACvC,QAAQ;CACR,QAAQ;AACP,SAAO;;CAER,MAAM;AACL,SAAO;;CAER,CAAC;AACF,IAAI,uBAAuB,cAAc,YAAY;CACpD,UAAU;CACV,yBAAyB,IAAI,KAAK;CAClC,IAAI,SAAS;AACZ,SAAO,MAAKC;;CAEb,OAAO,QAAQ;AACd,MAAI,CAAC,UAAU,MAAKA,WAAY,OAAQ;AACxC,QAAKA,SAAU;AACf,OAAK,MAAM,QAAQ,MAAKC,MAAQ,QAAO,iBAAiB,MAAM,MAAKC,aAAc;;CAElF,SAAS;AACR,MAAI,CAAC,MAAKF,OAAS;AACnB,OAAK,MAAM,QAAQ,MAAKC,MAAQ,OAAKD,OAAQ,oBAAoB,MAAM,MAAKE,aAAc;AAC1F,QAAKF,SAAU;;CAEhB,iBAAiB,WAAW;AAC3B,SAAO,KAAK,QAAQ,iBAAiB,UAAU,IAAI,EAAE;;CAEtD,cAAc,WAAW;AACxB,SAAO,KAAK,QAAQ,cAAc,UAAU,IAAI;;CAEjD,iBAAiB,MAAM,UAAU,SAAS;AACzC,MAAI,CAAC,MAAKC,MAAO,IAAI,KAAK,EAAE;AAC3B,SAAKA,MAAO,IAAI,KAAK;AACrB,QAAK,QAAQ,iBAAiB,MAAM,MAAKC,aAAc;;AAExD,QAAM,iBAAiB,MAAM,UAAU,QAAQ;;CAEhD,oBAAoB,MAAM,UAAU,SAAS;AAC5C,QAAM,oBAAoB,MAAM,UAAU,QAAQ;;CAEnD,iBAAiB,UAAU;AAC1B,OAAK,cAAc,IAAI,MAAM,YAAY,MAAM,MAAM,MAAM,CAAC;;CAE7D,IAAI,QAAQ;AACX,SAAO,KAAK,QAAQ,SAAS;;CAE9B,IAAI,MAAM,OAAO;AAChB,MAAI,KAAK,OAAQ,MAAK,OAAO,QAAQ;;CAEtC,IAAI,SAAS;AACZ,SAAO,KAAK,QAAQ,UAAU;;CAE/B,IAAI,QAAQ;AACX,SAAO,KAAK,QAAQ,SAAS;;CAE9B,IAAI,OAAO;AACV,SAAO,KAAK,QAAQ,QAAQ;;CAE7B,IAAI,KAAK,OAAO;AACf,MAAI,KAAK,OAAQ,MAAK,OAAO,OAAO;;CAErC,OAAO;AACN,SAAO,KAAK,QAAQ,MAAM,IAAI,QAAQ,QAAQ;;CAE/C,QAAQ;AACP,OAAK,QAAQ,OAAO;;CAErB,IAAI,cAAc;AACjB,SAAO,KAAK,QAAQ,eAAe;;CAEpC,IAAI,YAAY,OAAO;AACtB,MAAI,KAAK,OAAQ,MAAK,OAAO,cAAc;;CAE5C,IAAI,WAAW;AACd,SAAO,KAAK,QAAQ,YAAY;;CAEjC,IAAI,UAAU;AACb,SAAO,KAAK,QAAQ,WAAW;;CAEhC,IAAI,MAAM;AACT,SAAO,KAAK,QAAQ,OAAO;;CAE5B,IAAI,IAAI,OAAO;AACd,MAAI,KAAK,OAAQ,MAAK,OAAO,MAAM;;CAEpC,IAAI,aAAa;AAChB,SAAO,KAAK,QAAQ,cAAc;;CAEnC,IAAI,aAAa;AAChB,SAAO,KAAK,QAAQ,cAAc;;CAEnC,OAAO;AACN,OAAK,QAAQ,MAAM;;CAEpB,IAAI,SAAS;AACZ,SAAO,KAAK,QAAQ,UAAU;;CAE/B,IAAI,OAAO,OAAO;AACjB,MAAI,KAAK,OAAQ,MAAK,OAAO,SAAS;;CAEvC,IAAI,QAAQ;AACX,SAAO,KAAK,QAAQ,SAAS;;CAE9B,IAAI,MAAM,OAAO;AAChB,MAAI,KAAK,OAAQ,MAAK,OAAO,QAAQ;;CAEtC,IAAI,eAAe;AAClB,SAAO,KAAK,QAAQ,gBAAgB;;CAErC,IAAI,aAAa,OAAO;AACvB,MAAI,KAAK,OAAQ,MAAK,OAAO,eAAe;;CAE7C,IAAI,WAAW;AACd,SAAO,KAAK,QAAQ,YAAY;;CAEjC,IAAI,WAAW;AACd,SAAO,KAAK,QAAQ,YAAY;;CAEjC,IAAI,QAAQ;AACX,SAAO,KAAK,QAAQ,SAAS;;CAE9B,IAAI,aAAa;AAChB,SAAO,KAAK,QAAQ,cAAc,EAAE;;CAErC,IAAI,SAAS;AACZ,SAAO,KAAK,QAAQ;;CAErB,IAAI,wBAAwB;AAC3B,SAAO,KAAK,QAAQ,yBAAyB;;CAE9C,IAAI,sBAAsB,OAAO;AAChC,MAAI,KAAK,OAAQ,MAAK,OAAO,wBAAwB;;;;;;AClIvD,IAAI,uBAAuB,cAAc,qBAAqB;CAC7D,IAAI,SAAS;AACZ,SAAO,KAAK,QAAQ,UAAU;;CAE/B,IAAI,OAAO,OAAO;AACjB,MAAI,KAAK,OAAQ,MAAK,OAAO,SAAS;;CAEvC,IAAI,yBAAyB;AAC5B,SAAO,KAAK,QAAQ;;CAErB,IAAI,4BAA4B;EAC/B,MAAM,SAAS,KAAK;EACpB,MAAM,KAAK,QAAQ;AACnB,SAAO,WAAW,GAAG,GAAG,GAAG,KAAK,OAAO,GAAG,KAAK;;CAEhD,IAAI,qBAAqB;AACxB,SAAO,CAAC,CAAC,KAAK,UAAU,WAAW,UAAU,4BAA4B,KAAK,UAAU,KAAK,2BAA2B;;CAEzH,IAAI,eAAe;AAClB,MAAI,CAAC,KAAK,OAAQ,QAAO;AACzB,MAAI,KAAK,2BAA2B,aAAc,QAAO;EACzD,MAAM,MAAM,WAAW;AACvB,SAAO,KAAK,sBAAsB,KAAK,UAAU,KAAK,4BAA4B,KAAK;;CAExF,MAAM,0BAA0B;AAC/B,MAAI,CAAC,KAAK,OAAQ,QAAO,QAAQ,QAAQ;AACzC,SAAO,KAAK,OAAO,yBAAyB;;CAE7C,MAAM,uBAAuB;AAC5B,MAAI,CAAC,KAAK,OAAQ,QAAO,QAAQ,QAAQ;AACzC,SAAO,WAAW,UAAU,sBAAsB;;CAEnD,oBAAoB;AACnB,MAAI,CAAC,KAAK,OAAQ,QAAO,QAAQ,QAAQ;AACzC,SAAO,KAAK,OAAO,mBAAmB;;CAEvC,iBAAiB;AAChB,MAAI,CAAC,KAAK,OAAQ,QAAO,QAAQ,QAAQ;AACzC,SAAO,WAAW,UAAU,gBAAgB"}

package/cdn/video-host-Bkh2OyyP.js ADDED Viewed

@@ -0,0 +1,47 @@
+import{n as e,r as t}from"./media-attach-mixin-DuquRhAk.js";import{n,t as r}from"./pick-CERGq1No.js";import{t as i}from"./predicate-Cad5WV4q.js";function a(e,t){let n={};for(let r in e)t.includes(r)||(n[r]=e[r]);return n}const o={borderRadius:`--media-video-border-radius`,objectFit:`--media-object-fit`,objectPosition:`--media-object-position`,captionTrackDuration:`--media-caption-track-duration`,captionTrackDelay:`--media-caption-track-delay`,captionTrackY:`--media-caption-track-y`};function s(e){return`
+    <style>
+      :host {
+        display: contents;
+      }
+      video {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: var(${o.borderRadius});
+        object-fit: var(${o.objectFit}, contain);
+        object-position: var(${o.objectPosition}, center);
+      }
+      video::-webkit-media-text-track-container {
+        transition: translate var(${o.captionTrackDuration}, 0) ease-out;
+        transition-delay: var(${o.captionTrackDelay}, 0);
+        translate: 0 var(${o.captionTrackY}, 0);
+        scale: 0.98;
+        z-index: 1;
+        font-family: inherit;
+      }
+    </style>
+    <slot name="media">
+      <video${t(e)}></video>
+    </slot>
+    <slot></slot>
+  `}function c(e){return n=>`
+      <style>
+        :host {
+          display: inline-flex;
+          line-height: 0;
+          flex-direction: column;
+          justify-content: end;
+        }
+        ${e} {
+          width: 100%;
+        }
+      </style>
+      <slot name="media">
+        <${e}${t(n)}></${e}>
+      </slot>
+      <slot></slot>
+    `}const l=[`attach`,`detach`,`destroy`];function u(t,i){let o=new Map,u=!1;class f extends (globalThis.HTMLElement??class{}){static getTemplateHTML=t.endsWith(`video`)?s:c(t);static shadowRootOptions={mode:`open`};static properties={autoPictureInPicture:{type:Boolean},autoplay:{type:Boolean},controls:{type:Boolean},controlsList:{type:String},crossOrigin:{type:String},defaultMuted:{type:Boolean,attribute:`muted`},disablePictureInPicture:{type:Boolean},disableRemotePlayback:{type:Boolean},loading:{type:String},loop:{type:Boolean},playsInline:{type:Boolean},poster:{type:String},preload:{type:String},src:{type:String}};static get observedAttributes(){return f.#define(this),[...d(this.properties)]}static#define(e){if(u)return;u=!0;for(let t=i.prototype;t&&t!==Object.prototype;t=Object.getPrototypeOf(t))for(let r of Object.getOwnPropertyNames(t)){if(r in f.prototype||l.includes(r))continue;let i=Object.getOwnPropertyDescriptor(t,r);if(!i)continue;let a={enumerable:!0,configurable:!0};if(typeof i.value==`function`)a.value=function(...e){return this.#mediaHost[r](...e)};else if(i.get&&(a.get=function(){return this.#mediaHost[r]},i.set)){let t=n(r);e.observedAttributes.includes(t)?(o.set(t,r),a.set=function(e){e===!0||e===!1||e==null?this.toggleAttribute(t,!!e):this.setAttribute(t,String(e))}):a.set=function(e){this.#mediaHost[r]=e}}Object.defineProperty(f.prototype,r,a)}let t=e.properties;for(let[e,{type:n,attribute:r}]of Object.entries(t)){if(e in f.prototype)continue;let t=r??e.toLowerCase();Object.defineProperty(f.prototype,e,{get:function(){return n===Boolean?this.hasAttribute(t):this.getAttribute(t)},set:function(e){n===Boolean?this.toggleAttribute(t,!!e):this.setAttribute(t,e)},enumerable:!0,configurable:!0})}}#mediaHost;#bridgedEventTypes=new Set;#childMap=new Map;#childObserver;constructor(){if(super(),!this.shadowRoot){let n=this.constructor;this.attachShadow(n.shadowRootOptions);let i=d(n.properties),s=[...o.keys()],c=a(r(e(this.attributes),i),s);t&&!c.part&&(c.part=t),this.shadowRoot.innerHTML=n.getTemplateHTML(c)}this.#mediaHost=new i,this.#attachToTarget(),this.#childObserver=new MutationObserver(this.#syncMediaChildAttribute.bind(this)),this.shadowRoot.addEventListener(`slotchange`,()=>{this.#attachToTarget(),this.#syncMediaChildren()}),this.#syncMediaChildren()}#attachToTarget(){let e=this.target;e!==this.#mediaHost.target&&(this.#mediaHost.target&&this.#mediaHost.detach(),this.#mediaHost.attach(e))}get target(){return this.querySelector(`:scope > [slot=media]`)??this.querySelector(t)??this.shadowRoot?.querySelector(t)??null}disconnectedCallback(){this.hasAttribute(`keep-alive`)||this.#mediaHost.destroy()}addEventListener(e,t,n){super.addEventListener(e,t,n),this.#bridgedEventTypes.has(e)||(this.#bridgedEventTypes.add(e),this.#mediaHost.addEventListener(e,this.#bridgeEvent))}removeEventListener(e,t,n){super.removeEventListener(e,t,n)}#bridgeEvent=e=>{e.composed||this.dispatchEvent(new e.constructor(e.type,e))};attributeChangedCallback(e,t,n){let r=o.get(e);if(r){if(t!==n){let e=typeof this.#mediaHost[r];this.#mediaHost[r]=e===`boolean`?n!==null:e===`number`?Number(n):n??``}return}!f.observedAttributes.includes(e)&&this.constructor.observedAttributes.includes(e)||(n===null?this.target?.removeAttribute(e):this.target?.getAttribute(e)!==n&&this.target?.setAttribute(e,n))}#syncMediaChildren(){let e=this.shadowRoot?.querySelector(`slot:not([name])`),t=new Set(e?.assignedElements({flatten:!0}).filter(e=>e.localName===`track`||e.localName===`source`));for(let[e,n]of this.#childMap)t.has(e)||(n.remove(),this.#childMap.delete(e));for(let e of t){let t=this.#childMap.get(e);t||(t=e.cloneNode(),this.#childMap.set(e,t),this.#childObserver?.observe(e,{attributes:!0})),this.target?.append(t),this.#enableDefaultTrack(t)}}#syncMediaChildAttribute(e){for(let t of e)if(t.type===`attributes`){let{target:e,attributeName:n}=t,r=this.#childMap.get(e);r&&n&&(r.setAttribute(n,e.getAttribute(n)??``),this.#enableDefaultTrack(r))}}#enableDefaultTrack(e){e&&e.localName===`track`&&e.default&&(e.kind===`chapters`||e.kind===`metadata`)&&e.track.mode===`disabled`&&(e.track.mode=`hidden`)}}return f}function d(e){return Object.keys(e).map(t=>e[t]?.attribute??t.toLowerCase())}const f=Object.freeze({length:0,start(){return 0},end(){return 0}});var p=class extends EventTarget{#e=null;#t=new Set;get target(){return this.#e}attach(e){if(!(!e||this.#e===e)){this.#e=e;for(let t of this.#t)e.addEventListener(t,this.#n)}}detach(){if(this.#e){for(let e of this.#t)this.#e.removeEventListener(e,this.#n);this.#e=null}}querySelectorAll(e){return this.target?.querySelectorAll(e)??[]}querySelector(e){return this.target?.querySelector(e)??null}addEventListener(e,t,n){this.#t.has(e)||(this.#t.add(e),this.target?.addEventListener(e,this.#n)),super.addEventListener(e,t,n)}removeEventListener(e,t,n){super.removeEventListener(e,t,n)}#n=e=>{this.dispatchEvent(new e.constructor(e.type,e))};get title(){return this.target?.title??``}set title(e){this.target&&(this.target.title=e)}get paused(){return this.target?.paused??!0}get ended(){return this.target?.ended??!1}get loop(){return this.target?.loop??!1}set loop(e){this.target&&(this.target.loop=e)}play(){return this.target?.play()??Promise.reject()}pause(){this.target?.pause()}get currentTime(){return this.target?.currentTime??0}set currentTime(e){this.target&&(this.target.currentTime=e)}get duration(){return this.target?.duration??NaN}get seeking(){return this.target?.seeking??!1}get src(){return this.target?.src??``}set src(e){this.target&&(this.target.src=e)}get currentSrc(){return this.target?.currentSrc??``}get readyState(){return this.target?.readyState??0}load(){this.target?.load()}get volume(){return this.target?.volume??1}set volume(e){this.target&&(this.target.volume=e)}get muted(){return this.target?.muted??!1}set muted(e){this.target&&(this.target.muted=e)}get playbackRate(){return this.target?.playbackRate??1}set playbackRate(e){this.target&&(this.target.playbackRate=e)}get buffered(){return this.target?.buffered??f}get seekable(){return this.target?.seekable??f}get error(){return this.target?.error??null}get textTracks(){return this.target?.textTracks??[]}get remote(){return this.target?.remote}get disableRemotePlayback(){return this.target?.disableRemotePlayback??!1}set disableRemotePlayback(e){this.target&&(this.target.disableRemotePlayback=e)}},m=class extends p{get poster(){return this.target?.poster??``}set poster(e){this.target&&(this.target.poster=e)}get webkitPresentationMode(){return this.target?.webkitPresentationMode}get webkitSetPresentationMode(){let e=this.target,t=e?.webkitSetPresentationMode;return i(t)?t.bind(e):void 0}get isPictureInPicture(){return!!this.target&&globalThis.document?.pictureInPictureElement===this.target||this.webkitPresentationMode===`picture-in-picture`}get isFullscreen(){if(!this.target)return!1;if(this.webkitPresentationMode===`fullscreen`)return!0;let e=globalThis.document;return e?.fullscreenElement===this.target||e?.webkitFullscreenElement===this.target}async requestPictureInPicture(){return this.target?this.target.requestPictureInPicture():Promise.reject()}async exitPictureInPicture(){return this.target?globalThis.document?.exitPictureInPicture():Promise.reject()}requestFullscreen(){return this.target?this.target.requestFullscreen():Promise.reject()}exitFullscreen(){return this.target?globalThis.document?.exitFullscreen():Promise.reject()}};export{u as n,m as t};
+//# sourceMappingURL=video-host-Bkh2OyyP.js.map

package/cdn/video-host-Bkh2OyyP.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"video-host-Bkh2OyyP.js","names":["#define","#mediaHost","#attachToTarget","#childObserver","#syncMediaChildAttribute","#syncMediaChildren","#bridgedEventTypes","#bridgeEvent","#childMap","#enableDefaultTrack","#target","#types","#forwardEvent"],"sources":["../../utils/dist/object/omit.js","../../core/dist/default/dom/media/custom-media-element/index.js","../../core/dist/default/dom/media/media-host.js","../../core/dist/default/dom/media/video-host.js"],"sourcesContent":["//#region src/object/omit.ts\n/**\n* Creates a new object without the specified keys.\n*\n* @example\n* const obj = { a: 1, b: 2, c: 3 };\n* omit(obj, ['b']); // { a: 1, c: 3 }\n*/\nfunction omit(obj, keys) {\n\tconst result = {};\n\tfor (const key in obj) if (!keys.includes(key)) result[key] = obj[key];\n\treturn result;\n}\n//#endregion\nexport { omit };\n\n//# sourceMappingURL=omit.js.map","import { omit, pick } from \"@videojs/utils/object\";\nimport { namedNodeMapToObject, serializeAttributes } from \"@videojs/utils/dom\";\nimport { kebabCase } from \"@videojs/utils/string\";\n//#region src/dom/media/custom-media-element/index.ts\n/** CSS custom property names for video elements. */\nconst VideoCSSVars = {\n\tborderRadius: \"--media-video-border-radius\",\n\tobjectFit: \"--media-object-fit\",\n\tobjectPosition: \"--media-object-position\",\n\tcaptionTrackDuration: \"--media-caption-track-duration\",\n\tcaptionTrackDelay: \"--media-caption-track-delay\",\n\tcaptionTrackY: \"--media-caption-track-y\"\n};\n/** CSS custom property names for audio elements. */\nconst AudioCSSVars = {};\n/** Helper function to generate the HTML template for video elements. */\nfunction getVideoTemplateHTML(attrs) {\n\treturn `\n <style>\n :host {\n display: contents;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n border-radius: var(${VideoCSSVars.borderRadius});\n object-fit: var(${VideoCSSVars.objectFit}, contain);\n object-position: var(${VideoCSSVars.objectPosition}, center);\n }\n\n video::-webkit-media-text-track-container {\n transition: translate var(${VideoCSSVars.captionTrackDuration}, 0) ease-out;\n transition-delay: var(${VideoCSSVars.captionTrackDelay}, 0);\n translate: 0 var(${VideoCSSVars.captionTrackY}, 0);\n scale: 0.98;\n z-index: 1;\n font-family: inherit;\n }\n </style>\n <slot name=\"media\">\n <video${serializeAttributes(attrs)}></video>\n </slot>\n <slot></slot>\n `;\n}\n/** Helper function to generate the HTML template for other elements. */\nfunction getCommonTemplateHTML(tag) {\n\treturn (attrs) => {\n\t\treturn `\n <style>\n :host {\n display: inline-flex;\n line-height: 0;\n flex-direction: column;\n justify-content: end;\n }\n\n ${tag} {\n width: 100%;\n }\n </style>\n <slot name=\"media\">\n <${tag}${serializeAttributes(attrs)}></${tag}>\n </slot>\n <slot></slot>\n `;\n\t};\n}\nconst excludedProperties = [\n\t\"attach\",\n\t\"detach\",\n\t\"destroy\"\n];\nfunction CustomMediaElement(tag, MediaHost) {\n\tconst mediaHostAttrToProp = /* @__PURE__ */ new Map();\n\tlet isDefined = false;\n\tclass CustomMedia extends (globalThis.HTMLElement ?? class {}) {\n\t\tstatic getTemplateHTML = tag.endsWith(\"video\") ? getVideoTemplateHTML : getCommonTemplateHTML(tag);\n\t\tstatic shadowRootOptions = { mode: \"open\" };\n\t\tstatic properties = {\n\t\t\tautoPictureInPicture: { type: Boolean },\n\t\t\tautoplay: { type: Boolean },\n\t\t\tcontrols: { type: Boolean },\n\t\t\tcontrolsList: { type: String },\n\t\t\tcrossOrigin: { type: String },\n\t\t\tdefaultMuted: {\n\t\t\t\ttype: Boolean,\n\t\t\t\tattribute: \"muted\"\n\t\t\t},\n\t\t\tdisablePictureInPicture: { type: Boolean },\n\t\t\tdisableRemotePlayback: { type: Boolean },\n\t\t\tloading: { type: String },\n\t\t\tloop: { type: Boolean },\n\t\t\tplaysInline: { type: Boolean },\n\t\t\tposter: { type: String },\n\t\t\tpreload: { type: String },\n\t\t\tsrc: { type: String }\n\t\t};\n\t\tstatic get observedAttributes() {\n\t\t\tCustomMedia.#define(this);\n\t\t\treturn [...getAttrsFromProps(this.properties)];\n\t\t}\n\t\tstatic #define(ctor) {\n\t\t\tif (isDefined) return;\n\t\t\tisDefined = true;\n\t\t\tfor (let proto = MediaHost.prototype; proto && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) for (const prop of Object.getOwnPropertyNames(proto)) {\n\t\t\t\tif (prop in CustomMedia.prototype || excludedProperties.includes(prop)) continue;\n\t\t\t\tconst descriptor = Object.getOwnPropertyDescriptor(proto, prop);\n\t\t\t\tif (!descriptor) continue;\n\t\t\t\tconst config = {\n\t\t\t\t\tenumerable: true,\n\t\t\t\t\tconfigurable: true\n\t\t\t\t};\n\t\t\t\tif (typeof descriptor.value === \"function\") config.value = function(...args) {\n\t\t\t\t\treturn this.#mediaHost[prop](...args);\n\t\t\t\t};\n\t\t\t\telse if (descriptor.get) {\n\t\t\t\t\tconfig.get = function() {\n\t\t\t\t\t\treturn this.#mediaHost[prop];\n\t\t\t\t\t};\n\t\t\t\t\tif (descriptor.set) {\n\t\t\t\t\t\tconst attr = kebabCase(prop);\n\t\t\t\t\t\tif (ctor.observedAttributes.includes(attr)) {\n\t\t\t\t\t\t\tmediaHostAttrToProp.set(attr, prop);\n\t\t\t\t\t\t\tconfig.set = function(val) {\n\t\t\t\t\t\t\t\tif (val === true || val === false || val == null) this.toggleAttribute(attr, Boolean(val));\n\t\t\t\t\t\t\t\telse this.setAttribute(attr, String(val));\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t} else config.set = function(val) {\n\t\t\t\t\t\t\tthis.#mediaHost[prop] = val;\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tObject.defineProperty(CustomMedia.prototype, prop, config);\n\t\t\t}\n\t\t\tconst properties = ctor.properties;\n\t\t\tfor (const [prop, { type, attribute }] of Object.entries(properties)) {\n\t\t\t\tif (prop in CustomMedia.prototype) continue;\n\t\t\t\tconst attr = attribute ?? prop.toLowerCase();\n\t\t\t\tObject.defineProperty(CustomMedia.prototype, prop, {\n\t\t\t\t\tget: function() {\n\t\t\t\t\t\treturn type === Boolean ? this.hasAttribute(attr) : this.getAttribute(attr);\n\t\t\t\t\t},\n\t\t\t\t\tset: function(val) {\n\t\t\t\t\t\tif (type === Boolean) this.toggleAttribute(attr, Boolean(val));\n\t\t\t\t\t\telse this.setAttribute(attr, val);\n\t\t\t\t\t},\n\t\t\t\t\tenumerable: true,\n\t\t\t\t\tconfigurable: true\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t\t#mediaHost;\n\t\t#bridgedEventTypes = /* @__PURE__ */ new Set();\n\t\t#childMap = /* @__PURE__ */ new Map();\n\t\t#childObserver;\n\t\tconstructor() {\n\t\t\tsuper();\n\t\t\tif (!this.shadowRoot) {\n\t\t\t\tconst ctor = this.constructor;\n\t\t\t\tthis.attachShadow(ctor.shadowRootOptions);\n\t\t\t\tconst allowedKeys = getAttrsFromProps(ctor.properties);\n\t\t\t\tconst disallowedKeys = [...mediaHostAttrToProp.keys()];\n\t\t\t\tconst attrs = omit(pick(namedNodeMapToObject(this.attributes), allowedKeys), disallowedKeys);\n\t\t\t\tif (tag && !attrs.part) attrs.part = tag;\n\t\t\t\tthis.shadowRoot.innerHTML = ctor.getTemplateHTML(attrs);\n\t\t\t}\n\t\t\tthis.#mediaHost = new MediaHost();\n\t\t\tthis.#attachToTarget();\n\t\t\tthis.#childObserver = new MutationObserver(this.#syncMediaChildAttribute.bind(this));\n\t\t\tthis.shadowRoot.addEventListener(\"slotchange\", () => {\n\t\t\t\tthis.#attachToTarget();\n\t\t\t\tthis.#syncMediaChildren();\n\t\t\t});\n\t\t\tthis.#syncMediaChildren();\n\t\t}\n\t\t#attachToTarget() {\n\t\t\tconst target = this.target;\n\t\t\tif (target === this.#mediaHost.target) return;\n\t\t\tif (this.#mediaHost.target) this.#mediaHost.detach();\n\t\t\tthis.#mediaHost.attach(target);\n\t\t}\n\t\tget target() {\n\t\t\treturn this.querySelector(\":scope > [slot=media]\") ?? this.querySelector(tag) ?? this.shadowRoot?.querySelector(tag) ?? null;\n\t\t}\n\t\tdisconnectedCallback() {\n\t\t\tif (!this.hasAttribute(\"keep-alive\")) this.#mediaHost.destroy();\n\t\t}\n\t\taddEventListener(type, listener, options) {\n\t\t\tsuper.addEventListener(type, listener, options);\n\t\t\tif (!this.#bridgedEventTypes.has(type)) {\n\t\t\t\tthis.#bridgedEventTypes.add(type);\n\t\t\t\tthis.#mediaHost.addEventListener(type, this.#bridgeEvent);\n\t\t\t}\n\t\t}\n\t\tremoveEventListener(type, listener, options) {\n\t\t\tsuper.removeEventListener(type, listener, options);\n\t\t}\n\t\t#bridgeEvent = (event) => {\n\t\t\tif (!event.composed) this.dispatchEvent(new event.constructor(event.type, event));\n\t\t};\n\t\tattributeChangedCallback(attrName, oldValue, newValue) {\n\t\t\tconst prop = mediaHostAttrToProp.get(attrName);\n\t\t\tif (prop) {\n\t\t\t\tif (oldValue !== newValue) {\n\t\t\t\t\tconst valueType = typeof this.#mediaHost[prop];\n\t\t\t\t\tthis.#mediaHost[prop] = valueType === \"boolean\" ? newValue !== null : valueType === \"number\" ? Number(newValue) : newValue ?? \"\";\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (!CustomMedia.observedAttributes.includes(attrName) && this.constructor.observedAttributes.includes(attrName)) return;\n\t\t\tif (newValue === null) this.target?.removeAttribute(attrName);\n\t\t\telse if (this.target?.getAttribute(attrName) !== newValue) this.target?.setAttribute(attrName, newValue);\n\t\t}\n\t\t#syncMediaChildren() {\n\t\t\tconst defaultSlot = this.shadowRoot?.querySelector(\"slot:not([name])\");\n\t\t\tconst mediaChildren = new Set(defaultSlot?.assignedElements({ flatten: true }).filter((el) => el.localName === \"track\" || el.localName === \"source\"));\n\t\t\tfor (const [el, clone] of this.#childMap) if (!mediaChildren.has(el)) {\n\t\t\t\tclone.remove();\n\t\t\t\tthis.#childMap.delete(el);\n\t\t\t}\n\t\t\tfor (const el of mediaChildren) {\n\t\t\t\tlet clone = this.#childMap.get(el);\n\t\t\t\tif (!clone) {\n\t\t\t\t\tclone = el.cloneNode();\n\t\t\t\t\tthis.#childMap.set(el, clone);\n\t\t\t\t\tthis.#childObserver?.observe(el, { attributes: true });\n\t\t\t\t}\n\t\t\t\tthis.target?.append(clone);\n\t\t\t\tthis.#enableDefaultTrack(clone);\n\t\t\t}\n\t\t}\n\t\t#syncMediaChildAttribute(mutations) {\n\t\t\tfor (const mutation of mutations) if (mutation.type === \"attributes\") {\n\t\t\t\tconst { target, attributeName } = mutation;\n\t\t\t\tconst clone = this.#childMap.get(target);\n\t\t\t\tif (clone && attributeName) {\n\t\t\t\t\tclone.setAttribute(attributeName, target.getAttribute(attributeName) ?? \"\");\n\t\t\t\t\tthis.#enableDefaultTrack(clone);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t#enableDefaultTrack(trackEl) {\n\t\t\tif (trackEl && trackEl.localName === \"track\" && trackEl.default && (trackEl.kind === \"chapters\" || trackEl.kind === \"metadata\") && trackEl.track.mode === \"disabled\") trackEl.track.mode = \"hidden\";\n\t\t}\n\t}\n\treturn CustomMedia;\n}\nfunction getAttrsFromProps(props) {\n\treturn Object.keys(props).map((prop) => props[prop]?.attribute ?? prop.toLowerCase());\n}\n//#endregion\nexport { AudioCSSVars, CustomMediaElement, VideoCSSVars };\n\n//# sourceMappingURL=index.js.map","//#region src/dom/media/media-host.ts\nconst EMPTY_TIME_RANGES = Object.freeze({\n\tlength: 0,\n\tstart() {\n\t\treturn 0;\n\t},\n\tend() {\n\t\treturn 0;\n\t}\n});\nvar HTMLMediaElementHost = class extends EventTarget {\n\t#target = null;\n\t#types = /* @__PURE__ */ new Set();\n\tget target() {\n\t\treturn this.#target;\n\t}\n\tattach(target) {\n\t\tif (!target || this.#target === target) return;\n\t\tthis.#target = target;\n\t\tfor (const type of this.#types) target.addEventListener(type, this.#forwardEvent);\n\t}\n\tdetach() {\n\t\tif (!this.#target) return;\n\t\tfor (const type of this.#types) this.#target.removeEventListener(type, this.#forwardEvent);\n\t\tthis.#target = null;\n\t}\n\tquerySelectorAll(selectors) {\n\t\treturn this.target?.querySelectorAll(selectors) ?? [];\n\t}\n\tquerySelector(selectors) {\n\t\treturn this.target?.querySelector(selectors) ?? null;\n\t}\n\taddEventListener(type, listener, options) {\n\t\tif (!this.#types.has(type)) {\n\t\t\tthis.#types.add(type);\n\t\t\tthis.target?.addEventListener(type, this.#forwardEvent);\n\t\t}\n\t\tsuper.addEventListener(type, listener, options);\n\t}\n\tremoveEventListener(type, listener, options) {\n\t\tsuper.removeEventListener(type, listener, options);\n\t}\n\t#forwardEvent = (event) => {\n\t\tthis.dispatchEvent(new event.constructor(event.type, event));\n\t};\n\tget title() {\n\t\treturn this.target?.title ?? \"\";\n\t}\n\tset title(value) {\n\t\tif (this.target) this.target.title = value;\n\t}\n\tget paused() {\n\t\treturn this.target?.paused ?? true;\n\t}\n\tget ended() {\n\t\treturn this.target?.ended ?? false;\n\t}\n\tget loop() {\n\t\treturn this.target?.loop ?? false;\n\t}\n\tset loop(value) {\n\t\tif (this.target) this.target.loop = value;\n\t}\n\tplay() {\n\t\treturn this.target?.play() ?? Promise.reject();\n\t}\n\tpause() {\n\t\tthis.target?.pause();\n\t}\n\tget currentTime() {\n\t\treturn this.target?.currentTime ?? 0;\n\t}\n\tset currentTime(value) {\n\t\tif (this.target) this.target.currentTime = value;\n\t}\n\tget duration() {\n\t\treturn this.target?.duration ?? NaN;\n\t}\n\tget seeking() {\n\t\treturn this.target?.seeking ?? false;\n\t}\n\tget src() {\n\t\treturn this.target?.src ?? \"\";\n\t}\n\tset src(value) {\n\t\tif (this.target) this.target.src = value;\n\t}\n\tget currentSrc() {\n\t\treturn this.target?.currentSrc ?? \"\";\n\t}\n\tget readyState() {\n\t\treturn this.target?.readyState ?? 0;\n\t}\n\tload() {\n\t\tthis.target?.load();\n\t}\n\tget volume() {\n\t\treturn this.target?.volume ?? 1;\n\t}\n\tset volume(value) {\n\t\tif (this.target) this.target.volume = value;\n\t}\n\tget muted() {\n\t\treturn this.target?.muted ?? false;\n\t}\n\tset muted(value) {\n\t\tif (this.target) this.target.muted = value;\n\t}\n\tget playbackRate() {\n\t\treturn this.target?.playbackRate ?? 1;\n\t}\n\tset playbackRate(value) {\n\t\tif (this.target) this.target.playbackRate = value;\n\t}\n\tget buffered() {\n\t\treturn this.target?.buffered ?? EMPTY_TIME_RANGES;\n\t}\n\tget seekable() {\n\t\treturn this.target?.seekable ?? EMPTY_TIME_RANGES;\n\t}\n\tget error() {\n\t\treturn this.target?.error ?? null;\n\t}\n\tget textTracks() {\n\t\treturn this.target?.textTracks ?? [];\n\t}\n\tget remote() {\n\t\treturn this.target?.remote;\n\t}\n\tget disableRemotePlayback() {\n\t\treturn this.target?.disableRemotePlayback ?? false;\n\t}\n\tset disableRemotePlayback(value) {\n\t\tif (this.target) this.target.disableRemotePlayback = value;\n\t}\n};\n//#endregion\nexport { HTMLMediaElementHost };\n\n//# sourceMappingURL=media-host.js.map","import { HTMLMediaElementHost } from \"./media-host.js\";\nimport { isFunction } from \"@videojs/utils/predicate\";\n//#region src/dom/media/video-host.ts\nvar HTMLVideoElementHost = class extends HTMLMediaElementHost {\n\tget poster() {\n\t\treturn this.target?.poster ?? \"\";\n\t}\n\tset poster(value) {\n\t\tif (this.target) this.target.poster = value;\n\t}\n\tget webkitPresentationMode() {\n\t\treturn this.target?.webkitPresentationMode;\n\t}\n\tget webkitSetPresentationMode() {\n\t\tconst target = this.target;\n\t\tconst fn = target?.webkitSetPresentationMode;\n\t\treturn isFunction(fn) ? fn.bind(target) : void 0;\n\t}\n\tget isPictureInPicture() {\n\t\treturn !!this.target && globalThis.document?.pictureInPictureElement === this.target || this.webkitPresentationMode === \"picture-in-picture\";\n\t}\n\tget isFullscreen() {\n\t\tif (!this.target) return false;\n\t\tif (this.webkitPresentationMode === \"fullscreen\") return true;\n\t\tconst doc = globalThis.document;\n\t\treturn doc?.fullscreenElement === this.target || doc?.webkitFullscreenElement === this.target;\n\t}\n\tasync requestPictureInPicture() {\n\t\tif (!this.target) return Promise.reject();\n\t\treturn this.target.requestPictureInPicture();\n\t}\n\tasync exitPictureInPicture() {\n\t\tif (!this.target) return Promise.reject();\n\t\treturn globalThis.document?.exitPictureInPicture();\n\t}\n\trequestFullscreen() {\n\t\tif (!this.target) return Promise.reject();\n\t\treturn this.target.requestFullscreen();\n\t}\n\texitFullscreen() {\n\t\tif (!this.target) return Promise.reject();\n\t\treturn globalThis.document?.exitFullscreen();\n\t}\n};\n//#endregion\nexport { HTMLVideoElementHost };\n\n//# sourceMappingURL=video-host.js.map"],"mappings":"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"}

package/cdn/video-minimal-ui.dev.js CHANGED Viewed

@@ -1,4 +1 @@
-import "./compounds-CM_NP-ej.js";
-import "./context-0rI_P6jf.js";
-import "./player-CatrGW7l.js";
-import "./minimal-ui-cy2oEbFm.js";
+import "./minimal-ui-Bx-_SggT.js";

package/cdn/video-minimal-ui.js CHANGED Viewed

	@@ -1 +1 @@
1	- import"./~~compounds-Vvz-YfXP.js";import"./context-CEFisYD0.js";import"./player-C7ajkBi4.js";import"./~~minimal-ui-~~C_G24FML~~.js";
1	+ import"./minimal-ui-D6Pvbx1R.js";

package/cdn/video-minimal.dev.js CHANGED Viewed

@@ -1,13 +1,11 @@
-import "./compounds-CM_NP-ej.js";
 import { n as createShadowStyle } from "./shadow-styles-DKXFMmyD.js";
-import { n as createTemplate, t as SkinElement } from "./skin-element-CDUkmCtS.js";
-import { o as safeDefine } from "./context-0rI_P6jf.js";
-import "./player-CatrGW7l.js";
-import { t as renderIcon } from "./minimal-BnDnlwbj.js";
-import "./minimal-ui-cy2oEbFm.js";
+import { n as createTemplate, t as SkinElement } from "./skin-element-BcbrkgGs.js";
+import { d as safeDefine } from "./predicate-BOcV_HDG.js";
+import { t as renderIcon } from "./minimal-CciG7Fsu.js";
+import "./minimal-ui-Bx-_SggT.js";
 //#region inline-css:src/define/video/minimal-skin.js
-var minimal_skin_default = "/* -------------------------------------------------------------------------- */\n/* Base                                                                       */\n/* -------------------------------------------------------------------------- */\n\nvideo-player {\n  display: contents;\n}\n\n/*\nRequired to override any default video and image styles (such as\nTailwind's CSS reset) and ensure they fill the container as expected.\n*/\nvideo-player video,\nvideo-player [slot=\"poster\"] {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\nvideo-player video::-webkit-media-text-track-container {\n  transition: translate var(--media-caption-track-duration, 0) ease-out;\n  transition-delay: var(--media-caption-track-delay, 0);\n  translate: 0 var(--media-caption-track-y, 0);\n  scale: 0.98;\n  z-index: 1;\n  font-family: inherit;\n}\n\nmedia-tooltip-group {\n  display: contents;\n}\n\n:host {\n  /* `display:grid` fixes a weird issue with Safari when setting aspect-ratio */\n  display: grid;\n  width: 100%;\n}\n\n/* Hide volume popover when volume control is unsupported (e.g., iOS Safari). */\n.media-popover--volume:has(media-volume-slider[data-availability=\"unsupported\"]) {\n  display: none;\n}\n\n/* ==========================================================================\n   Reset\n   ========================================================================== */\n\n.media-minimal-skin *,\n.media-minimal-skin *::before,\n.media-minimal-skin *::after {\n  box-sizing: border-box;\n}\n.media-minimal-skin img,\n.media-minimal-skin video,\n.media-minimal-skin svg {\n  display: block;\n  max-width: 100%;\n}\n.media-minimal-skin button {\n  font: inherit;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .media-minimal-skin {\n    interpolate-size: allow-keywords;\n  }\n}\n\n/* ==========================================================================\n   Root Container\n   ========================================================================== */\n\n.media-minimal-skin {\n  container: media-root / inline-size;\n  position: relative;\n  isolation: isolate;\n  display: block;\n  height: 100%;\n  width: 100%;\n  border-radius: var(--media-border-radius, 0.75rem);\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n\n  &:focus-visible {\n    outline-color: currentColor;\n  }\n  font-family:\n    Inter Variable,\n    Inter,\n    ui-sans-serif,\n    system-ui,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: normal;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n\n  & > * {\n    font-size: 0.75rem; /* 12px at 100% font size */\n  }\n\n  @container media-root (width > 48rem) {\n    & > * {\n      font-size: 0.875rem; /* 14px at 100% font size */\n    }\n  }\n}\n\n/* ==========================================================================\n   Media Element\n   ========================================================================== */\n\n.media-minimal-skin ::slotted(video),\n.media-minimal-skin video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--media-object-fit, contain);\n  object-position: var(--media-object-position, center);\n}\n.media-minimal-skin ::slotted(video) {\n  border-radius: var(--media-video-border-radius);\n}\n.media-minimal-skin video {\n  border-radius: inherit;\n}\n\n.media-minimal-skin:fullscreen ::slotted(video),\n.media-minimal-skin:fullscreen video {\n  object-fit: contain;\n}\n\n/* ==========================================================================\n   Overlay / Scrim\n   ========================================================================== */\n\n.media-minimal-skin .media-overlay {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-image: linear-gradient(to top, oklch(0 0 0 / 0.7), oklch(0 0 0 / 0.5) 7.5rem, oklch(0 0 0 / 0));\n  backdrop-filter: blur(0) saturate(1);\n  opacity: 0;\n  pointer-events: none;\n  transition-property: opacity, backdrop-filter;\n  transition-duration: var(--media-controls-transition-duration);\n  transition-timing-function: ease-out;\n}\n\n.media-minimal-skin .media-error ~ .media-overlay {\n  transition-duration: var(--media-error-dialog-transition-duration);\n  transition-delay: var(--media-error-dialog-transition-delay);\n}\n\n.media-minimal-skin .media-controls[data-visible] ~ .media-overlay,\n.media-minimal-skin .media-error[data-open] ~ .media-overlay {\n  opacity: 1;\n}\n\n.media-minimal-skin .media-error[data-open] ~ .media-overlay {\n  backdrop-filter: blur(16px) saturate(1.2);\n}\n\n/* ==========================================================================\n   Buffering Indicator\n   ========================================================================== */\n\n.media-minimal-skin .media-buffering-indicator {\n  position: absolute;\n  inset: 0;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  color: oklch(1 0 0);\n  pointer-events: none;\n\n  &[data-visible] {\n    display: flex;\n  }\n}\n\n/* ==========================================================================\n   Error Dialog\n   ========================================================================== */\n\n.media-minimal-skin .media-error:not([data-open]) {\n  display: none;\n}\n\n.media-minimal-skin .media-error__title {\n  font-weight: 600;\n  line-height: 1.25;\n}\n\n.media-minimal-skin .media-error__description {\n  opacity: 0.7;\n  overflow-wrap: anywhere;\n}\n\n.media-minimal-skin .media-error__actions {\n  display: flex;\n  gap: 0.5rem;\n\n  & > * {\n    flex: 1;\n  }\n}\n\n.media-minimal-skin .media-error[data-open] ~ .media-controls * {\n  visibility: hidden;\n}\n\n/* ==========================================================================\n   Controls\n   ========================================================================== */\n\n.media-minimal-skin .media-controls {\n  container: media-controls / inline-size;\n  display: flex;\n  align-items: center;\n  --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));\n  --media-controls-current-shadow-color-subtle: oklch(\n    from var(--media-controls-current-shadow-color) l c h /\n    calc(alpha * 0.4)\n  );\n  background-color: var(--media-controls-background-color);\n  backdrop-filter: var(--media-controls-backdrop-filter);\n  text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);\n}\n\n/* ==========================================================================\n   Time Controls & Display\n   ========================================================================== */\n\n.media-minimal-skin .media-time-controls {\n  container: media-time-controls / inline-size;\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  flex: 1;\n  gap: 0.75rem;\n}\n\n.media-minimal-skin .media-time-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.media-minimal-skin .media-time {\n  font-variant-numeric: tabular-nums;\n}\n\n.media-minimal-skin .media-time--current,\n.media-minimal-skin .media-time-separator {\n  display: none;\n}\n\n@container media-root (width > 42rem) {\n  .media-minimal-skin .media-time-controls {\n    flex-direction: row;\n  }\n\n  .media-minimal-skin .media-time--duration,\n  .media-minimal-skin .media-time-separator {\n    color: oklch(from currentColor l c h / 0.6);\n  }\n\n  .media-minimal-skin .media-time--current,\n  .media-minimal-skin .media-time-separator {\n    display: inline;\n  }\n}\n\n/* ==========================================================================\n   Buttons\n   ========================================================================== */\n\n/* Base button */\n.media-minimal-skin .media-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: 0.5rem 1rem;\n  border: none;\n  border-radius: 0.5rem;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  transition-property: background-color, outline-offset, scale;\n  /* Fix weird jumping when clicking on the buttons in Safari. */\n  will-change: scale;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  cursor: pointer;\n  user-select: none;\n  text-align: center;\n  touch-action: manipulation;\n\n  &:focus-visible {\n    outline-color: currentColor;\n    outline-offset: 2px;\n  }\n\n  &:active {\n    scale: 0.98;\n  }\n\n  &[disabled] {\n    opacity: 0.5;\n    filter: grayscale(1);\n    cursor: not-allowed;\n  }\n\n  &[data-availability=\"unavailable\"] {\n    display: none;\n  }\n}\n\n/* biome-ignore lint/correctness/noUnknownProperty: corner-shape is an emerging CSS spec */\n@supports (corner-shape: squircle) {\n  .media-minimal-skin .media-button {\n    border-radius: 1rem;\n    /* biome-ignore lint/correctness/noUnknownProperty: corner-shape is an emerging CSS spec */\n    corner-shape: squircle;\n  }\n}\n\n/* Primary button variant */\n.media-minimal-skin .media-button--primary {\n  background: oklch(1 0 0);\n  color: oklch(0 0 0);\n  font-weight: 500;\n  text-shadow: none;\n}\n\n/* Subtle button variant */\n.media-minimal-skin .media-button--subtle {\n  background: transparent;\n  color: inherit;\n  text-shadow: inherit;\n\n  &:hover,\n  &:focus-visible,\n  &[aria-expanded=\"true\"] {\n    background: oklch(from currentColor l c h / 0.1);\n  }\n}\n\n/* Icon button variant */\n.media-minimal-skin .media-button--icon {\n  display: grid;\n  width: 2.375rem;\n  padding: 0;\n  aspect-ratio: 1;\n\n  &:active {\n    scale: 0.9;\n  }\n\n  & .media-icon {\n    filter: drop-shadow(0 1px 0 var(--media-controls-current-shadow-color, oklch(0 0 0 / 0.25)));\n  }\n}\n\n/* Seek button */\n.media-minimal-skin .media-button--seek {\n  & .media-icon__label {\n    position: absolute;\n    right: -1px;\n    bottom: -3px;\n    font-size: 10px; /* Hard coded due to size limitations. */\n    font-weight: 480;\n    font-variant-numeric: tabular-nums;\n  }\n\n  &:has(.media-icon--flipped) .media-icon__label {\n    right: unset;\n    left: -1px;\n  }\n}\n\n/* Playback rate button */\n.media-minimal-skin .media-button--playback-rate {\n  padding: 0;\n\n  &::after {\n    content: attr(data-rate) \"\\00D7\";\n    width: 4ch;\n    font-variant-numeric: tabular-nums;\n  }\n}\n\n/* ==========================================================================\n   Button Groups\n   ========================================================================== */\n\n.media-minimal-skin .media-button-group {\n  display: flex;\n  align-items: center;\n  gap: 0.075rem;\n\n  @container media-root (width > 42rem) {\n    gap: 0.125rem;\n  }\n}\n\n/* ==========================================================================\n   Icons\n   ========================================================================== */\n\n.media-minimal-skin .media-icon__container {\n  position: relative;\n}\n.media-minimal-skin .media-icon {\n  display: block;\n  flex-shrink: 0;\n  grid-area: 1 / 1;\n  width: 18px;\n  height: 18px;\n  transition-behavior: allow-discrete;\n  transition-property: display, opacity;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n.media-minimal-skin .media-icon--flipped {\n  scale: -1 1;\n}\n\n/* ==========================================================================\n   Poster Image\n   ========================================================================== */\n\n.media-minimal-skin media-poster,\n.media-minimal-skin > img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  transition: opacity 0.25s;\n  pointer-events: none;\n}\n.media-minimal-skin media-poster:not([data-visible]),\n.media-minimal-skin > img:not([data-visible]) {\n  opacity: 0;\n}\n.media-minimal-skin media-poster ::slotted(img),\n.media-minimal-skin media-poster img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--media-object-fit, contain);\n  object-position: var(--media-object-position, center);\n  border-radius: var(--media-video-border-radius);\n}\n.media-minimal-skin > img {\n  object-fit: var(--media-object-fit, contain);\n  object-position: var(--media-object-position, center);\n  border-radius: inherit;\n}\n\n.media-minimal-skin:fullscreen media-poster ::slotted(img),\n.media-minimal-skin:fullscreen media-poster img,\n.media-minimal-skin:fullscreen > img {\n  object-fit: contain;\n}\n\n/* ==========================================================================\n   Media preview\n   ========================================================================== */\n.media-minimal-skin .media-preview {\n  pointer-events: none;\n\n  & .media-preview__thumbnail-wrapper {\n    position: relative;\n    border-radius: 0.5rem;\n    background-color: oklch(0 0 0 / 0.9);\n  }\n  & .media-preview__thumbnail {\n    display: block;\n    border-radius: inherit;\n  }\n\n  & .media-preview__time {\n    display: block;\n    text-align: center;\n    margin-top: 0.5rem;\n  }\n\n  & .media-overlay {\n    opacity: 1;\n  }\n\n  & .media-preview__spinner {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    translate: -50% -50%;\n    opacity: 0;\n  }\n\n  & .media-preview__thumbnail,\n  & .media-preview__spinner {\n    transition: opacity 150ms ease-out;\n  }\n\n  &:has(.media-preview__thumbnail[data-loading]) {\n    & .media-preview__thumbnail {\n      opacity: 0;\n    }\n    & .media-preview__spinner {\n      opacity: 1;\n    }\n  }\n}\n\n/* ==========================================================================\n   Slider\n   ========================================================================== */\n\n.media-minimal-skin .media-slider {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  border-radius: calc(infinity * 1px);\n  outline: none;\n  cursor: pointer;\n\n  &[data-orientation=\"horizontal\"] {\n    min-width: 5rem;\n    width: 100%;\n    height: 2rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 2rem;\n    height: 4.5rem;\n  }\n}\n\n/* Track */\n.media-minimal-skin .media-slider__track {\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n  border-radius: inherit;\n  user-select: none;\n  background-color: oklch(from currentColor l c h / 0.2);\n\n  &[data-orientation=\"horizontal\"] {\n    width: 100%;\n    height: 0.1875rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 0.1875rem;\n    height: 100%;\n  }\n}\n\n/* Thumb */\n.media-minimal-skin .media-slider__thumb {\n  position: absolute;\n  translate: -50% -50%;\n  z-index: 10;\n  width: 0.75rem;\n  height: 0.75rem;\n  background-color: currentColor;\n  border-radius: calc(infinity * 1px);\n  box-shadow:\n    0 0 0 1px var(--media-controls-current-shadow-color-subtle, oklch(0 0 0 / 0.1)),\n    0 1px 3px 0 oklch(0 0 0 / 0.15),\n    0 1px 2px -1px oklch(0 0 0 / 0.15);\n  opacity: 0;\n  scale: 0.7;\n  transform-origin: center;\n  transition-property: opacity, scale, outline-offset;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  user-select: none;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n\n  &[data-orientation=\"horizontal\"] {\n    top: 50%;\n    left: var(--media-slider-fill);\n  }\n\n  &[data-orientation=\"vertical\"] {\n    left: 50%;\n    top: calc(100% - var(--media-slider-fill));\n  }\n\n  &:focus-visible {\n    outline-color: currentColor;\n    outline-offset: 2px;\n  }\n}\n\n.media-minimal-skin .media-slider:hover .media-slider__thumb,\n.media-minimal-skin .media-slider:focus-within .media-slider__thumb,\n.media-minimal-skin .media-slider__thumb--persistent {\n  opacity: 1;\n  scale: 1;\n}\n\n/* Shared track fills */\n.media-minimal-skin .media-slider__buffer,\n.media-minimal-skin .media-slider__fill {\n  position: absolute;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n.media-minimal-skin .media-slider__buffer[data-orientation=\"horizontal\"],\n.media-minimal-skin .media-slider__fill[data-orientation=\"horizontal\"] {\n  inset-block: 0;\n  left: 0;\n}\n\n.media-minimal-skin .media-slider__buffer[data-orientation=\"vertical\"],\n.media-minimal-skin .media-slider__fill[data-orientation=\"vertical\"] {\n  inset-inline: 0;\n  bottom: 0;\n}\n\n/* Buffer */\n.media-minimal-skin .media-slider__buffer {\n  background-color: oklch(from currentColor l c h / 0.2);\n  transition-duration: 0.25s;\n  transition-timing-function: ease-out;\n\n  &[data-orientation=\"horizontal\"] {\n    width: var(--media-slider-buffer);\n    transition-property: width;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    height: var(--media-slider-buffer);\n    transition-property: height;\n  }\n}\n\n/* Fill */\n.media-minimal-skin .media-slider__fill {\n  background-color: currentColor;\n\n  &[data-orientation=\"horizontal\"] {\n    width: var(--media-slider-fill);\n  }\n\n  &[data-orientation=\"vertical\"] {\n    height: var(--media-slider-fill);\n  }\n}\n\n/* Dragging — thumb and fill follow the pointer position */\n.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation=\"horizontal\"] {\n  left: var(--media-slider-pointer);\n}\n\n.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation=\"vertical\"] {\n  top: calc(100% - var(--media-slider-pointer));\n}\n\n.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation=\"horizontal\"] {\n  width: var(--media-slider-pointer);\n}\n\n.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation=\"vertical\"] {\n  height: var(--media-slider-pointer);\n}\n\n/* ==========================================================================\n   Popups & Animations\n   ========================================================================== */\n\n.media-minimal-skin .media-popover,\n.media-minimal-skin .media-tooltip {\n  margin: 0;\n  border: 0;\n  color: inherit;\n  overflow: visible;\n  transition-property: scale, opacity, filter;\n  transition-duration: var(--media-popup-transition-duration);\n  transition-timing-function: var(--media-popup-transition-timing-function);\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    scale: 0.5;\n    filter: blur(8px);\n  }\n\n  &[data-instant] {\n    transition-duration: 0ms;\n  }\n\n  &[data-side=\"top\"] {\n    transform-origin: bottom;\n  }\n  &[data-side=\"bottom\"] {\n    transform-origin: top;\n  }\n  &[data-side=\"left\"] {\n    transform-origin: right;\n  }\n  &[data-side=\"right\"] {\n    transform-origin: left;\n  }\n\n  /* Safe area between trigger and popup */\n  &::before {\n    content: \"\";\n    position: absolute;\n    pointer-events: inherit;\n  }\n\n  &[data-side=\"top\"]::before,\n  &[data-side=\"bottom\"]::before {\n    width: 100%;\n    inset-inline: 0;\n  }\n  &[data-side=\"top\"]::before {\n    top: 100%;\n  }\n  &[data-side=\"bottom\"]::before {\n    bottom: 100%;\n  }\n\n  &[data-side=\"left\"]::before,\n  &[data-side=\"right\"]::before {\n    height: 100%;\n    inset-block: 0;\n  }\n  &[data-side=\"left\"]::before {\n    left: 100%;\n  }\n  &[data-side=\"right\"]::before {\n    right: 100%;\n  }\n}\n\n.media-minimal-skin .media-popover {\n  &[data-side=\"top\"]::before,\n  &[data-side=\"bottom\"]::before {\n    height: var(--media-popover-side-offset);\n  }\n  &[data-side=\"left\"]::before,\n  &[data-side=\"right\"]::before {\n    width: var(--media-popover-side-offset);\n  }\n}\n\n.media-minimal-skin .media-tooltip {\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.5rem;\n  background-color: var(--media-tooltip-background-color);\n  backdrop-filter: var(--media-tooltip-backdrop-filter);\n  box-shadow:\n    0 0 0 1px var(--media-tooltip-border-color),\n    0 4px 6px -1px oklch(0 0 0 / 0.1),\n    0 2px 4px -2px oklch(0 0 0 / 0.1);\n  color: var(--media-tooltip-text-color);\n  font-size: 0.75rem; /* 12px at 100% font size */\n  white-space: nowrap;\n\n  &[data-side=\"top\"]::before,\n  &[data-side=\"bottom\"]::before {\n    height: var(--media-tooltip-side-offset);\n  }\n  &[data-side=\"left\"]::before,\n  &[data-side=\"right\"]::before {\n    width: var(--media-tooltip-side-offset);\n  }\n}\n\n.media-minimal-skin .media-popover--volume:has(media-volume-slider[data-availability=\"unsupported\"]) {\n  display: none;\n}\n\n/* ==========================================================================\n   Native Caption Track\n   ========================================================================== */\n\n.media-minimal-skin {\n  --media-caption-track-duration: var(--media-controls-transition-duration);\n  --media-caption-track-delay: 25ms;\n  --media-caption-track-y: -0.5rem;\n\n  &:has(.media-controls[data-visible]) {\n    --media-caption-track-y: -5rem;\n  }\n\n  @container media-root (width > 42rem) {\n    &:has(.media-controls[data-visible]) > * {\n      --media-caption-track-y: -3rem;\n    }\n  }\n}\n\n.media-minimal-skin video::-webkit-media-text-track-container {\n  transition: translate var(--media-caption-track-duration) ease-out;\n  transition-delay: var(--media-caption-track-delay);\n  translate: 0 var(--media-caption-track-y);\n  scale: 0.98;\n  z-index: 1;\n  font-family: inherit;\n}\n\n/* ==========================================================================\n   Icon State Visibility for Video Skins\n\n   Data-attribute-driven visibility rules for multi-state icon buttons.\n   Uses :is() with both element selectors (for HTML custom element wrappers)\n   and class selectors (for React rendered SVG elements).\n   ========================================================================== */\n\n/* --- All icons hidden by default --- */\n\n.media-button--play .media-icon--restart,\n.media-button--play .media-icon--play,\n.media-button--play .media-icon--pause,\n.media-button--mute .media-icon--volume-off,\n.media-button--mute .media-icon--volume-low,\n.media-button--mute .media-icon--volume-high,\n.media-button--fullscreen .media-icon--fullscreen-enter,\n.media-button--fullscreen .media-icon--fullscreen-exit,\n.media-button--pip .media-icon--pip-enter,\n.media-button--pip .media-icon--pip-exit,\n.media-button--captions .media-icon--captions-off,\n.media-button--captions .media-icon--captions-on {\n  display: none;\n  opacity: 0;\n}\n\n/* --- Active icon per state --- */\n\n/* Play: ended → restart */\n.media-button--play[data-ended] .media-icon--restart,\n/* Play: paused (not ended) → play */\n.media-button--play:not([data-ended])[data-paused] .media-icon--play,\n/* Play: playing (not paused, not ended) → pause */\n.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,\n/* Mute: muted → volume off */\n.media-button--mute[data-muted] .media-icon--volume-off,\n/* Mute: volume low (not muted) → volume low */\n.media-button--mute:not([data-muted])[data-volume-level=\"low\"] .media-icon--volume-low,\n/* Mute: volume high (not muted, not low) → volume high */\n.media-button--mute:not([data-muted]):not([data-volume-level=\"low\"]) .media-icon--volume-high,\n/* Fullscreen: not fullscreen → enter */\n.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,\n/* Fullscreen: fullscreen → exit */\n.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,\n/* Picture-in-Picture: not active → enter */\n.media-button--pip:not([data-pip]) .media-icon--pip-enter,\n/* Picture-in-Picture: active → exit */\n.media-button--pip[data-pip] .media-icon--pip-exit,\n/* Captions: not active → captions off */\n.media-button--captions:not([data-active]) .media-icon--captions-off,\n/* Captions: active → captions on */\n.media-button--captions[data-active] .media-icon--captions-on {\n  display: block;\n  opacity: 1;\n}\n\n\n/* ==========================================================================\n   Root\n   ========================================================================== */\n\n.media-minimal-skin--video {\n  overflow: clip;\n  background: oklch(0 0 0);\n  --media-border-color: oklch(0 0 0 / 0.15);\n  --media-video-border-radius: var(--media-border-radius, 0.75rem);\n  --media-controls-background-color: transparent;\n  --media-controls-transition-duration: 100ms;\n  --media-controls-transition-timing-function: ease-out;\n  --media-error-dialog-transition-duration: 150ms;\n  --media-error-dialog-transition-delay: 100ms;\n  --media-error-dialog-transition-timing-function: ease-out;\n  --media-popup-transition-duration: 100ms;\n  --media-popup-transition-timing-function: ease-out;\n  --media-tooltip-background-color: oklch(1 0 0 / 0.1);\n  --media-tooltip-border-color: transparent;\n  --media-tooltip-backdrop-filter: blur(16px) saturate(1.5);\n  --media-tooltip-text-color: currentColor;\n  --media-tooltip-side-offset: 0.5rem;\n  --media-popover-side-offset: 1.5rem;\n\n  @media (prefers-reduced-motion: reduce) {\n    --media-error-dialog-transition-duration: 50ms;\n    --media-error-dialog-transition-delay: 0ms;\n    --media-popup-transition-duration: 0ms;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    --media-border-color: oklch(1 0 0 / 0.15);\n  }\n\n  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {\n    --media-controls-background-color: oklch(0 0 0);\n    --media-tooltip-background-color: oklch(0 0 0);\n  }\n\n  @container media-root (width > 42rem) {\n    & > * {\n      --media-popover-side-offset: 0rem;\n    }\n  }\n\n  &:has(.media-controls:not([data-visible])) {\n    /* Slight delay to hide controls on non-touch devices after interaction */\n    @media (pointer: fine) {\n      --media-controls-transition-duration: 300ms;\n    }\n    @media (pointer: coarse) {\n      --media-controls-transition-duration: 150ms;\n    }\n    @media (prefers-reduced-motion: reduce) {\n      --media-controls-transition-duration: 50ms;\n    }\n  }\n\n  /* Inner border ring */\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 10;\n    border-radius: inherit;\n    box-shadow: inset 0 0 0 1px var(--media-border-color);\n    pointer-events: none;\n  }\n\n  /* Fullscreen */\n  &:fullscreen {\n    --media-border-radius: 0;\n  }\n}\n\n/* ==========================================================================\n   Error Dialog\n   ========================================================================== */\n\n.media-minimal-skin--video .media-error {\n  position: absolute;\n  inset: 0;\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  outline: none;\n}\n\n.media-minimal-skin--video .media-error__dialog {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  max-width: 16rem;\n  padding: 1rem;\n  color: oklch(1 0 0);\n  text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);\n  transition-property: opacity, scale;\n  transition-duration: var(--media-error-dialog-transition-duration);\n  transition-delay: var(--media-error-dialog-transition-delay);\n  transition-timing-function: var(--media-error-dialog-transition-timing-function);\n  pointer-events: auto;\n}\n\n.media-minimal-skin--video .media-error[data-starting-style] .media-error__dialog,\n.media-minimal-skin--video .media-error[data-ending-style] .media-error__dialog {\n  opacity: 0;\n  scale: 0.5;\n}\n.media-minimal-skin--video .media-error[data-ending-style] .media-error__dialog {\n  transition-delay: 0ms;\n}\n\n.media-minimal-skin--video .media-error__content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.375rem 0;\n}\n\n.media-minimal-skin--video .media-error__title {\n  font-size: 1.125rem;\n}\n\n.media-minimal-skin--video .media-error[data-open] ~ .media-controls {\n  display: none;\n}\n\n/* ==========================================================================\n  Controls (hide/show behavior)\n  ========================================================================== */\n\n.media-minimal-skin--video .media-controls {\n  padding: 0.25rem;\n  column-gap: 0.5rem;\n  flex-wrap: wrap;\n  position: absolute;\n  bottom: 0.25rem;\n  inset-inline: 0.25rem;\n  z-index: 10;\n  color: oklch(1 0 0);\n  border-radius: 0.75rem;\n  transition-duration: var(--media-controls-transition-duration);\n  transition-timing-function: var(--media-controls-transition-timing-function);\n\n  @media (pointer: fine) {\n    will-change: translate, filter, opacity;\n    transition-property: translate, filter, opacity;\n  }\n\n  @media (pointer: coarse) {\n    will-change: translate, opacity;\n    transition-property: translate, opacity;\n  }\n\n  &:not([data-visible]) {\n    opacity: 0;\n    pointer-events: none;\n    translate: 0 100%;\n\n    @media (pointer: fine) {\n      filter: blur(8px);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      translate: 0 0;\n      filter: blur(0);\n    }\n  }\n\n  & .media-time-controls {\n    order: -1;\n    flex: 0 0 100%;\n    padding-inline: 0.625rem;\n  }\n\n  & .media-button-group:first-child {\n    flex: 1;\n    text-align: left;\n  }\n\n  & .media-button-group:last-child {\n    flex: 1;\n    justify-content: end;\n  }\n\n  @container media-root (width > 42rem) {\n    flex-wrap: nowrap;\n    bottom: 0.5rem;\n    inset-inline: 0.5rem;\n\n    & .media-time-controls {\n      order: unset;\n      flex: 1;\n    }\n\n    & .media-button-group:first-child,\n    & .media-button-group:last-child {\n      flex: 0 0 auto;\n    }\n  }\n}\n\n/* Hide cursor when controls are hidden */\n.media-minimal-skin--video:has(.media-controls:not([data-visible])) {\n  cursor: none;\n}\n\n/* ==========================================================================\n   Sliders\n   ========================================================================== */\n\n.media-minimal-skin--video .media-slider__track {\n  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);\n}\n\n/* ==========================================================================\n   Popups & Animations\n   ========================================================================== */\n\n.media-minimal-skin--video .media-popover--volume {\n  background: transparent;\n  padding-block: 0.75rem;\n  border-radius: 0.75rem;\n\n  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {\n    background: var(--media-controls-background-color);\n  }\n}\n\n/* ==========================================================================\n   Slider preview\n   ========================================================================== */\n\n.media-minimal-skin--video .media-slider__preview {\n  --media-preview-max-width: 11rem;\n  --media-preview-padding: -0.5rem;\n  /**\n    Inset is the difference between the container width and the slider (100%) width.\n    We only add to the end as we render the time there.\n  */\n  --media-preview-inset: calc(100cqi - 100%);\n\n  position: absolute;\n  left: clamp(\n    calc(var(--media-preview-max-width) / 2 + var(--media-preview-padding)),\n    var(--media-slider-pointer),\n    calc(100% - var(--media-preview-max-width) / 2 - var(--media-preview-padding) + var(--media-preview-inset))\n  );\n  bottom: 100%;\n  translate: -50%;\n  opacity: 0;\n  scale: 0.8;\n  filter: blur(8px);\n  transition-property: scale, opacity, filter;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  transform-origin: bottom;\n\n  @container media-root (width > 42rem) {\n    bottom: calc(100% + 0.25rem);\n    left: var(--media-slider-pointer);\n  }\n\n  & .media-preview__thumbnail-wrapper {\n    position: relative;\n\n    &::after {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      box-shadow:\n        0 0 0 1px oklch(0 0 0 / 0.05),\n        0 1px 3px 0 oklch(0 0 0 / 0.2),\n        0 1px 2px -1px oklch(0 0 0 / 0.2);\n    }\n  }\n\n  & .media-preview__thumbnail {\n    max-width: var(--media-preview-max-width);\n  }\n\n  &:has(.media-preview__thumbnail[data-loading]) {\n    max-height: 6rem;\n  }\n}\n.media-minimal-skin--video .media-slider[data-pointing] .media-slider__preview:has([role=\"img\"]:not([data-hidden])) {\n  opacity: 1;\n  scale: 1;\n  filter: blur(0);\n}\n\n";
+var minimal_skin_default = "/* -------------------------------------------------------------------------- */\n/* Base                                                                       */\n/* -------------------------------------------------------------------------- */\n\nvideo-player {\n  display: contents;\n}\n\n/*\nRequired to override any default video and image styles (such as\nTailwind's CSS reset) and ensure they fill the container as expected.\n*/\nvideo-player video,\nvideo-player [slot=\"poster\"] {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\nvideo-player video::-webkit-media-text-track-container {\n  transition: translate var(--media-caption-track-duration, 0) ease-out;\n  transition-delay: var(--media-caption-track-delay, 0);\n  translate: 0 var(--media-caption-track-y, 0);\n  scale: 0.98;\n  z-index: 1;\n  font-family: inherit;\n}\n\nmedia-tooltip-group {\n  display: contents;\n}\n\n:host {\n  /* `display:grid` fixes a weird issue with Safari when setting aspect-ratio */\n  display: grid;\n  width: 100%;\n}\n\n/* Hide volume popover when volume control is unsupported (e.g., iOS Safari). */\n.media-popover--volume:has(media-volume-slider[data-availability=\"unsupported\"]) {\n  display: none;\n}\n\n/* ==========================================================================\n   Reset\n   ========================================================================== */\n\n.media-minimal-skin *,\n.media-minimal-skin *::before,\n.media-minimal-skin *::after {\n  box-sizing: border-box;\n}\n.media-minimal-skin img,\n.media-minimal-skin video,\n.media-minimal-skin svg {\n  display: block;\n  max-width: 100%;\n}\n.media-minimal-skin button {\n  font: inherit;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .media-minimal-skin {\n    interpolate-size: allow-keywords;\n  }\n}\n\n/* ==========================================================================\n   Root Container\n   ========================================================================== */\n\n.media-minimal-skin {\n  container: media-root / inline-size;\n  position: relative;\n  isolation: isolate;\n  display: block;\n  height: 100%;\n  width: 100%;\n  border-radius: var(--media-border-radius, 0.75rem);\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n\n  &:focus-visible {\n    outline-color: currentColor;\n  }\n  font-family:\n    Inter Variable,\n    Inter,\n    ui-sans-serif,\n    system-ui,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: normal;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n\n  & > * {\n    font-size: 0.75rem; /* 12px at 100% font size */\n  }\n\n  @container media-root (width > 48rem) {\n    & > * {\n      font-size: 0.875rem; /* 14px at 100% font size */\n    }\n  }\n}\n\n/* ==========================================================================\n   Media Element\n   ========================================================================== */\n\n.media-minimal-skin ::slotted(video),\n.media-minimal-skin video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--media-object-fit, contain);\n  object-position: var(--media-object-position, center);\n}\n.media-minimal-skin ::slotted(video) {\n  border-radius: var(--media-video-border-radius);\n}\n.media-minimal-skin video {\n  border-radius: inherit;\n}\n\n.media-minimal-skin:fullscreen ::slotted(video),\n.media-minimal-skin:fullscreen video {\n  object-fit: contain;\n}\n\n/* ==========================================================================\n   Overlay / Scrim\n   ========================================================================== */\n\n.media-minimal-skin .media-overlay {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-image: linear-gradient(to top, oklch(0 0 0 / 0.7), oklch(0 0 0 / 0.5) 7.5rem, oklch(0 0 0 / 0));\n  backdrop-filter: blur(0) saturate(1);\n  opacity: 0;\n  pointer-events: none;\n  transition-property: opacity, backdrop-filter;\n  transition-duration: var(--media-controls-transition-duration);\n  transition-timing-function: ease-out;\n}\n\n.media-minimal-skin .media-error ~ .media-overlay {\n  transition-duration: var(--media-error-dialog-transition-duration);\n  transition-delay: var(--media-error-dialog-transition-delay);\n}\n\n.media-minimal-skin .media-controls[data-visible] ~ .media-overlay,\n.media-minimal-skin .media-error[data-open] ~ .media-overlay {\n  opacity: 1;\n}\n\n.media-minimal-skin .media-error[data-open] ~ .media-overlay {\n  backdrop-filter: blur(16px) saturate(1.2);\n}\n\n/* ==========================================================================\n   Buffering Indicator\n   ========================================================================== */\n\n.media-minimal-skin .media-buffering-indicator {\n  position: absolute;\n  inset: 0;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  color: oklch(1 0 0);\n  pointer-events: none;\n\n  &[data-visible] {\n    display: flex;\n  }\n}\n\n/* ==========================================================================\n   Error Dialog\n   ========================================================================== */\n\n.media-minimal-skin .media-error:not([data-open]) {\n  display: none;\n}\n\n.media-minimal-skin .media-error__title {\n  font-weight: 600;\n  line-height: 1.25;\n}\n\n.media-minimal-skin .media-error__description {\n  opacity: 0.7;\n  overflow-wrap: anywhere;\n}\n\n.media-minimal-skin .media-error__actions {\n  display: flex;\n  gap: 0.5rem;\n\n  & > * {\n    flex: 1;\n  }\n}\n\n.media-minimal-skin .media-error[data-open] ~ .media-controls * {\n  visibility: hidden;\n}\n\n/* ==========================================================================\n   Controls\n   ========================================================================== */\n\n.media-minimal-skin .media-controls {\n  container: media-controls / inline-size;\n  display: flex;\n  align-items: center;\n  --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));\n  --media-controls-current-shadow-color-subtle: oklch(\n    from var(--media-controls-current-shadow-color) l c h /\n    calc(alpha * 0.4)\n  );\n  background-color: var(--media-controls-background-color);\n  backdrop-filter: var(--media-controls-backdrop-filter);\n  text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);\n}\n\n/* ==========================================================================\n   Time Controls & Display\n   ========================================================================== */\n\n.media-minimal-skin .media-time-controls {\n  container: media-time-controls / inline-size;\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  flex: 1;\n  gap: 0.75rem;\n}\n\n.media-minimal-skin .media-time-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.media-minimal-skin .media-time {\n  font-variant-numeric: tabular-nums;\n}\n\n.media-minimal-skin .media-time--current,\n.media-minimal-skin .media-time-separator {\n  display: none;\n}\n\n@container media-root (width > 42rem) {\n  .media-minimal-skin .media-time-controls {\n    flex-direction: row;\n  }\n\n  .media-minimal-skin .media-time--duration,\n  .media-minimal-skin .media-time-separator {\n    color: oklch(from currentColor l c h / 0.6);\n  }\n\n  .media-minimal-skin .media-time--current,\n  .media-minimal-skin .media-time-separator {\n    display: inline;\n  }\n}\n\n/* ==========================================================================\n   Buttons\n   ========================================================================== */\n\n/* Base button */\n.media-minimal-skin .media-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: 0.5rem 1rem;\n  border: none;\n  border-radius: 0.5rem;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  transition-property: background-color, outline-offset, scale;\n  /* Fix weird jumping when clicking on the buttons in Safari. */\n  will-change: scale;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  cursor: pointer;\n  user-select: none;\n  text-align: center;\n  touch-action: manipulation;\n\n  &:focus-visible {\n    outline-color: currentColor;\n    outline-offset: 2px;\n  }\n\n  &:active {\n    scale: 0.98;\n  }\n\n  &[disabled] {\n    opacity: 0.5;\n    filter: grayscale(1);\n    cursor: not-allowed;\n  }\n\n  &[data-availability=\"unavailable\"],\n  &[data-availability=\"unsupported\"] {\n    display: none;\n  }\n}\n\n/* biome-ignore lint/correctness/noUnknownProperty: corner-shape is an emerging CSS spec */\n@supports (corner-shape: squircle) {\n  .media-minimal-skin .media-button {\n    border-radius: 1rem;\n    /* biome-ignore lint/correctness/noUnknownProperty: corner-shape is an emerging CSS spec */\n    corner-shape: squircle;\n  }\n}\n\n/* Primary button variant */\n.media-minimal-skin .media-button--primary {\n  background: oklch(1 0 0);\n  color: oklch(0 0 0);\n  font-weight: 500;\n  text-shadow: none;\n}\n\n/* Subtle button variant */\n.media-minimal-skin .media-button--subtle {\n  background: transparent;\n  color: inherit;\n  text-shadow: inherit;\n\n  &:hover,\n  &:focus-visible,\n  &[aria-expanded=\"true\"] {\n    background: oklch(from currentColor l c h / 0.1);\n  }\n}\n\n/* Icon button variant */\n.media-minimal-skin .media-button--icon {\n  display: grid;\n  width: 2.375rem;\n  padding: 0;\n  aspect-ratio: 1;\n\n  &:active {\n    scale: 0.9;\n  }\n\n  & .media-icon {\n    filter: drop-shadow(0 1px 0 var(--media-controls-current-shadow-color, oklch(0 0 0 / 0.25)));\n  }\n}\n\n/* Seek button */\n.media-minimal-skin .media-button--seek {\n  & .media-icon__label {\n    position: absolute;\n    right: -1px;\n    bottom: -3px;\n    font-size: 10px; /* Hard coded due to size limitations. */\n    font-weight: 480;\n    font-variant-numeric: tabular-nums;\n  }\n\n  &:has(.media-icon--flipped) .media-icon__label {\n    right: unset;\n    left: -1px;\n  }\n}\n\n/* Playback rate button */\n.media-minimal-skin .media-button--playback-rate {\n  padding: 0;\n\n  &::after {\n    content: attr(data-rate) \"\\00D7\";\n    width: 4ch;\n    font-variant-numeric: tabular-nums;\n  }\n}\n\n/* ==========================================================================\n   Button Groups\n   ========================================================================== */\n\n.media-minimal-skin .media-button-group {\n  display: flex;\n  align-items: center;\n  gap: 0.075rem;\n\n  @container media-root (width > 42rem) {\n    gap: 0.125rem;\n  }\n}\n\n/* ==========================================================================\n   Icons\n   ========================================================================== */\n\n.media-minimal-skin .media-icon__container {\n  position: relative;\n}\n.media-minimal-skin .media-icon {\n  display: block;\n  flex-shrink: 0;\n  grid-area: 1 / 1;\n  width: 18px;\n  height: 18px;\n  transition-behavior: allow-discrete;\n  transition-property: display, opacity;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n.media-minimal-skin .media-icon--flipped {\n  scale: -1 1;\n}\n\n/* ==========================================================================\n   Poster Image\n   ========================================================================== */\n\n.media-minimal-skin media-poster,\n.media-minimal-skin > img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  transition: opacity 0.25s;\n  pointer-events: none;\n}\n.media-minimal-skin media-poster:not([data-visible]),\n.media-minimal-skin > img:not([data-visible]) {\n  opacity: 0;\n}\n.media-minimal-skin media-poster ::slotted(img),\n.media-minimal-skin media-poster img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--media-object-fit, contain);\n  object-position: var(--media-object-position, center);\n  border-radius: var(--media-video-border-radius);\n}\n.media-minimal-skin > img {\n  object-fit: var(--media-object-fit, contain);\n  object-position: var(--media-object-position, center);\n  border-radius: inherit;\n}\n\n.media-minimal-skin:fullscreen media-poster ::slotted(img),\n.media-minimal-skin:fullscreen media-poster img,\n.media-minimal-skin:fullscreen > img {\n  object-fit: contain;\n}\n\n/* ==========================================================================\n   Media preview\n   ========================================================================== */\n.media-minimal-skin .media-preview {\n  pointer-events: none;\n\n  & .media-preview__thumbnail-wrapper {\n    position: relative;\n    border-radius: 0.5rem;\n    background-color: oklch(0 0 0 / 0.9);\n  }\n  & .media-preview__thumbnail {\n    display: block;\n    border-radius: inherit;\n  }\n\n  & .media-preview__time {\n    display: block;\n    text-align: center;\n    margin-top: 0.5rem;\n  }\n\n  & .media-overlay {\n    opacity: 1;\n  }\n\n  & .media-preview__spinner {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    translate: -50% -50%;\n    opacity: 0;\n  }\n\n  & .media-preview__thumbnail,\n  & .media-preview__spinner {\n    transition: opacity 150ms ease-out;\n  }\n\n  &:has(.media-preview__thumbnail[data-loading]) {\n    & .media-preview__thumbnail {\n      opacity: 0;\n    }\n    & .media-preview__spinner {\n      opacity: 1;\n    }\n  }\n}\n\n/* ==========================================================================\n   Slider\n   ========================================================================== */\n\n.media-minimal-skin .media-slider {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  border-radius: calc(infinity * 1px);\n  outline: none;\n  cursor: pointer;\n\n  &[data-orientation=\"horizontal\"] {\n    min-width: 5rem;\n    width: 100%;\n    height: 2rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 2rem;\n    height: 4.5rem;\n  }\n}\n\n/* Track */\n.media-minimal-skin .media-slider__track {\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n  border-radius: inherit;\n  user-select: none;\n  background-color: oklch(from currentColor l c h / 0.2);\n\n  &[data-orientation=\"horizontal\"] {\n    width: 100%;\n    height: 0.1875rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 0.1875rem;\n    height: 100%;\n  }\n}\n\n/* Thumb */\n.media-minimal-skin .media-slider__thumb {\n  position: absolute;\n  translate: -50% -50%;\n  z-index: 10;\n  width: 0.75rem;\n  height: 0.75rem;\n  background-color: currentColor;\n  border-radius: calc(infinity * 1px);\n  box-shadow:\n    0 0 0 1px var(--media-controls-current-shadow-color-subtle, oklch(0 0 0 / 0.1)),\n    0 1px 3px 0 oklch(0 0 0 / 0.15),\n    0 1px 2px -1px oklch(0 0 0 / 0.15);\n  opacity: 0;\n  scale: 0.7;\n  transform-origin: center;\n  transition-property: opacity, scale, outline-offset;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  user-select: none;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n\n  &[data-orientation=\"horizontal\"] {\n    top: 50%;\n    left: var(--media-slider-fill);\n  }\n\n  &[data-orientation=\"vertical\"] {\n    left: 50%;\n    top: calc(100% - var(--media-slider-fill));\n  }\n\n  &:focus-visible {\n    outline-color: currentColor;\n    outline-offset: 2px;\n  }\n}\n\n.media-minimal-skin .media-slider:hover .media-slider__thumb,\n.media-minimal-skin .media-slider:focus-within .media-slider__thumb,\n.media-minimal-skin .media-slider__thumb--persistent {\n  opacity: 1;\n  scale: 1;\n}\n\n/* Shared track fills */\n.media-minimal-skin .media-slider__buffer,\n.media-minimal-skin .media-slider__fill {\n  position: absolute;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n.media-minimal-skin .media-slider__buffer[data-orientation=\"horizontal\"],\n.media-minimal-skin .media-slider__fill[data-orientation=\"horizontal\"] {\n  inset-block: 0;\n  left: 0;\n}\n\n.media-minimal-skin .media-slider__buffer[data-orientation=\"vertical\"],\n.media-minimal-skin .media-slider__fill[data-orientation=\"vertical\"] {\n  inset-inline: 0;\n  bottom: 0;\n}\n\n/* Buffer */\n.media-minimal-skin .media-slider__buffer {\n  background-color: oklch(from currentColor l c h / 0.2);\n  transition-duration: 0.25s;\n  transition-timing-function: ease-out;\n\n  &[data-orientation=\"horizontal\"] {\n    width: var(--media-slider-buffer);\n    transition-property: width;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    height: var(--media-slider-buffer);\n    transition-property: height;\n  }\n}\n\n/* Fill */\n.media-minimal-skin .media-slider__fill {\n  background-color: currentColor;\n\n  &[data-orientation=\"horizontal\"] {\n    width: var(--media-slider-fill);\n  }\n\n  &[data-orientation=\"vertical\"] {\n    height: var(--media-slider-fill);\n  }\n}\n\n/* Dragging — thumb and fill follow the pointer position */\n.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation=\"horizontal\"] {\n  left: var(--media-slider-pointer);\n}\n\n.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation=\"vertical\"] {\n  top: calc(100% - var(--media-slider-pointer));\n}\n\n.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation=\"horizontal\"] {\n  width: var(--media-slider-pointer);\n}\n\n.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation=\"vertical\"] {\n  height: var(--media-slider-pointer);\n}\n\n/* ==========================================================================\n   Popups & Animations\n   ========================================================================== */\n\n.media-minimal-skin .media-popover,\n.media-minimal-skin .media-tooltip {\n  margin: 0;\n  border: 0;\n  color: inherit;\n  overflow: visible;\n  transition-property: scale, opacity, filter;\n  transition-duration: var(--media-popup-transition-duration);\n  transition-timing-function: var(--media-popup-transition-timing-function);\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    scale: 0.5;\n    filter: blur(8px);\n  }\n\n  &[data-instant] {\n    transition-duration: 0ms;\n  }\n\n  &[data-side=\"top\"] {\n    transform-origin: bottom;\n  }\n  &[data-side=\"bottom\"] {\n    transform-origin: top;\n  }\n  &[data-side=\"left\"] {\n    transform-origin: right;\n  }\n  &[data-side=\"right\"] {\n    transform-origin: left;\n  }\n\n  /* Safe area between trigger and popup */\n  &::before {\n    content: \"\";\n    position: absolute;\n    pointer-events: inherit;\n  }\n\n  &[data-side=\"top\"]::before,\n  &[data-side=\"bottom\"]::before {\n    width: 100%;\n    inset-inline: 0;\n  }\n  &[data-side=\"top\"]::before {\n    top: 100%;\n  }\n  &[data-side=\"bottom\"]::before {\n    bottom: 100%;\n  }\n\n  &[data-side=\"left\"]::before,\n  &[data-side=\"right\"]::before {\n    height: 100%;\n    inset-block: 0;\n  }\n  &[data-side=\"left\"]::before {\n    left: 100%;\n  }\n  &[data-side=\"right\"]::before {\n    right: 100%;\n  }\n}\n\n.media-minimal-skin .media-popover {\n  &[data-side=\"top\"]::before,\n  &[data-side=\"bottom\"]::before {\n    height: var(--media-popover-side-offset);\n  }\n  &[data-side=\"left\"]::before,\n  &[data-side=\"right\"]::before {\n    width: var(--media-popover-side-offset);\n  }\n}\n\n.media-minimal-skin .media-tooltip {\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.5rem;\n  background-color: var(--media-tooltip-background-color);\n  backdrop-filter: var(--media-tooltip-backdrop-filter);\n  box-shadow:\n    0 0 0 1px var(--media-tooltip-border-color),\n    0 4px 6px -1px oklch(0 0 0 / 0.1),\n    0 2px 4px -2px oklch(0 0 0 / 0.1);\n  color: var(--media-tooltip-text-color);\n  font-size: 0.75rem; /* 12px at 100% font size */\n  white-space: nowrap;\n\n  &[data-side=\"top\"]::before,\n  &[data-side=\"bottom\"]::before {\n    height: var(--media-tooltip-side-offset);\n  }\n  &[data-side=\"left\"]::before,\n  &[data-side=\"right\"]::before {\n    width: var(--media-tooltip-side-offset);\n  }\n}\n\n.media-minimal-skin .media-popover--volume:has(media-volume-slider[data-availability=\"unsupported\"]) {\n  display: none;\n}\n\n/* ==========================================================================\n   Native Caption Track\n   ========================================================================== */\n\n.media-minimal-skin {\n  --media-caption-track-duration: var(--media-controls-transition-duration);\n  --media-caption-track-delay: 25ms;\n  --media-caption-track-y: -0.5rem;\n\n  &:has(.media-controls[data-visible]) {\n    --media-caption-track-y: -5rem;\n  }\n\n  @container media-root (width > 42rem) {\n    &:has(.media-controls[data-visible]) > * {\n      --media-caption-track-y: -3rem;\n    }\n  }\n}\n\n.media-minimal-skin video::-webkit-media-text-track-container {\n  transition: translate var(--media-caption-track-duration) ease-out;\n  transition-delay: var(--media-caption-track-delay);\n  translate: 0 var(--media-caption-track-y);\n  scale: 0.98;\n  z-index: 1;\n  font-family: inherit;\n}\n\n/* ==========================================================================\n   Icon State Visibility for Video Skins\n\n   Data-attribute-driven visibility rules for multi-state icon buttons.\n   Uses :is() with both element selectors (for HTML custom element wrappers)\n   and class selectors (for React rendered SVG elements).\n   ========================================================================== */\n\n/* --- All icons hidden by default --- */\n\n.media-button--play .media-icon--restart,\n.media-button--play .media-icon--play,\n.media-button--play .media-icon--pause,\n.media-button--mute .media-icon--volume-off,\n.media-button--mute .media-icon--volume-low,\n.media-button--mute .media-icon--volume-high,\n.media-button--fullscreen .media-icon--fullscreen-enter,\n.media-button--fullscreen .media-icon--fullscreen-exit,\n.media-button--pip .media-icon--pip-enter,\n.media-button--pip .media-icon--pip-exit,\n.media-button--cast .media-icon--cast-enter,\n.media-button--cast .media-icon--cast-exit,\n.media-button--captions .media-icon--captions-off,\n.media-button--captions .media-icon--captions-on {\n  display: none;\n  opacity: 0;\n}\n\n/* --- Active icon per state --- */\n\n/* Play: ended → restart */\n.media-button--play[data-ended] .media-icon--restart,\n/* Play: paused (not ended) → play */\n.media-button--play:not([data-ended])[data-paused] .media-icon--play,\n/* Play: playing (not paused, not ended) → pause */\n.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,\n/* Mute: muted → volume off */\n.media-button--mute[data-muted] .media-icon--volume-off,\n/* Mute: volume low (not muted) → volume low */\n.media-button--mute:not([data-muted])[data-volume-level=\"low\"] .media-icon--volume-low,\n/* Mute: volume high (not muted, not low) → volume high */\n.media-button--mute:not([data-muted]):not([data-volume-level=\"low\"]) .media-icon--volume-high,\n/* Fullscreen: not fullscreen → enter */\n.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,\n/* Fullscreen: fullscreen → exit */\n.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,\n/* Picture-in-Picture: not active → enter */\n.media-button--pip:not([data-pip]) .media-icon--pip-enter,\n/* Picture-in-Picture: active → exit */\n.media-button--pip[data-pip] .media-icon--pip-exit,\n/* Cast: not connected → enter */\n.media-button--cast:not([data-cast-state=\"connected\"]) .media-icon--cast-enter,\n/* Cast: connected → exit */\n.media-button--cast[data-cast-state=\"connected\"] .media-icon--cast-exit,\n/* Captions: not active → captions off */\n.media-button--captions:not([data-active]) .media-icon--captions-off,\n/* Captions: active → captions on */\n.media-button--captions[data-active] .media-icon--captions-on {\n  display: block;\n  opacity: 1;\n}\n\n\n/* ==========================================================================\n   Root\n   ========================================================================== */\n\n.media-minimal-skin--video {\n  overflow: clip;\n  background: oklch(0 0 0);\n  --media-border-color: oklch(0 0 0 / 0.15);\n  --media-video-border-radius: var(--media-border-radius, 0.75rem);\n  --media-controls-background-color: transparent;\n  --media-controls-transition-duration: 100ms;\n  --media-controls-transition-timing-function: ease-out;\n  --media-error-dialog-transition-duration: 150ms;\n  --media-error-dialog-transition-delay: 100ms;\n  --media-error-dialog-transition-timing-function: ease-out;\n  --media-popup-transition-duration: 100ms;\n  --media-popup-transition-timing-function: ease-out;\n  --media-tooltip-background-color: oklch(1 0 0 / 0.1);\n  --media-tooltip-border-color: transparent;\n  --media-tooltip-backdrop-filter: blur(16px) saturate(1.5);\n  --media-tooltip-text-color: currentColor;\n  --media-tooltip-side-offset: 0.5rem;\n  --media-popover-side-offset: 1.5rem;\n\n  @media (prefers-reduced-motion: reduce) {\n    --media-error-dialog-transition-duration: 50ms;\n    --media-error-dialog-transition-delay: 0ms;\n    --media-popup-transition-duration: 0ms;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    --media-border-color: oklch(1 0 0 / 0.15);\n  }\n\n  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {\n    --media-controls-background-color: oklch(0 0 0);\n    --media-tooltip-background-color: oklch(0 0 0);\n  }\n\n  @container media-root (width > 42rem) {\n    & > * {\n      --media-popover-side-offset: 0rem;\n    }\n  }\n\n  &:has(.media-controls:not([data-visible])) {\n    /* Slight delay to hide controls on non-touch devices after interaction */\n    @media (pointer: fine) {\n      --media-controls-transition-duration: 300ms;\n    }\n    @media (pointer: coarse) {\n      --media-controls-transition-duration: 150ms;\n    }\n    @media (prefers-reduced-motion: reduce) {\n      --media-controls-transition-duration: 50ms;\n    }\n  }\n\n  /* Inner border ring */\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 10;\n    border-radius: inherit;\n    box-shadow: inset 0 0 0 1px var(--media-border-color);\n    pointer-events: none;\n  }\n\n  /* Fullscreen */\n  &:fullscreen {\n    --media-border-radius: 0;\n  }\n}\n\n/* ==========================================================================\n   Error Dialog\n   ========================================================================== */\n\n.media-minimal-skin--video .media-error {\n  position: absolute;\n  inset: 0;\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  outline: none;\n}\n\n.media-minimal-skin--video .media-error__dialog {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  max-width: 16rem;\n  padding: 1rem;\n  color: oklch(1 0 0);\n  text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);\n  transition-property: opacity, scale;\n  transition-duration: var(--media-error-dialog-transition-duration);\n  transition-delay: var(--media-error-dialog-transition-delay);\n  transition-timing-function: var(--media-error-dialog-transition-timing-function);\n  pointer-events: auto;\n}\n\n.media-minimal-skin--video .media-error[data-starting-style] .media-error__dialog,\n.media-minimal-skin--video .media-error[data-ending-style] .media-error__dialog {\n  opacity: 0;\n  scale: 0.5;\n}\n.media-minimal-skin--video .media-error[data-ending-style] .media-error__dialog {\n  transition-delay: 0ms;\n}\n\n.media-minimal-skin--video .media-error__content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.375rem 0;\n}\n\n.media-minimal-skin--video .media-error__title {\n  font-size: 1.125rem;\n}\n\n.media-minimal-skin--video .media-error[data-open] ~ .media-controls {\n  display: none;\n}\n\n/* ==========================================================================\n  Controls (hide/show behavior)\n  ========================================================================== */\n\n.media-minimal-skin--video .media-controls {\n  padding: 0.25rem;\n  column-gap: 0.5rem;\n  flex-wrap: wrap;\n  position: absolute;\n  bottom: 0.25rem;\n  inset-inline: 0.25rem;\n  z-index: 10;\n  color: oklch(1 0 0);\n  border-radius: 0.75rem;\n  transition-duration: var(--media-controls-transition-duration);\n  transition-timing-function: var(--media-controls-transition-timing-function);\n\n  @media (pointer: fine) {\n    will-change: translate, filter, opacity;\n    transition-property: translate, filter, opacity;\n  }\n\n  @media (pointer: coarse) {\n    will-change: translate, opacity;\n    transition-property: translate, opacity;\n  }\n\n  &:not([data-visible]) {\n    opacity: 0;\n    pointer-events: none;\n    translate: 0 100%;\n\n    @media (pointer: fine) {\n      filter: blur(8px);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      translate: 0 0;\n      filter: blur(0);\n    }\n  }\n\n  & .media-time-controls {\n    order: -1;\n    flex: 0 0 100%;\n    padding-inline: 0.625rem;\n  }\n\n  & .media-button-group:first-child {\n    flex: 1;\n    text-align: left;\n  }\n\n  & .media-button-group:last-child {\n    flex: 1;\n    justify-content: end;\n  }\n\n  @container media-root (width > 42rem) {\n    flex-wrap: nowrap;\n    bottom: 0.5rem;\n    inset-inline: 0.5rem;\n\n    & .media-time-controls {\n      order: unset;\n      flex: 1;\n    }\n\n    & .media-button-group:first-child,\n    & .media-button-group:last-child {\n      flex: 0 0 auto;\n    }\n  }\n}\n\n/* Hide cursor when controls are hidden */\n.media-minimal-skin--video:has(.media-controls:not([data-visible])) {\n  cursor: none;\n}\n\n/* ==========================================================================\n   Sliders\n   ========================================================================== */\n\n.media-minimal-skin--video .media-slider__track {\n  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);\n}\n\n/* ==========================================================================\n   Popups & Animations\n   ========================================================================== */\n\n.media-minimal-skin--video .media-popover--volume {\n  background: transparent;\n  padding-block: 0.75rem;\n  border-radius: 0.75rem;\n\n  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {\n    background: var(--media-controls-background-color);\n  }\n}\n\n/* ==========================================================================\n   Slider preview\n   ========================================================================== */\n\n.media-minimal-skin--video .media-slider__preview {\n  --media-preview-max-width: 11rem;\n  --media-preview-padding: -0.5rem;\n  /**\n    Inset is the difference between the container width and the slider (100%) width.\n    We only add to the end as we render the time there.\n  */\n  --media-preview-inset: calc(100cqi - 100%);\n\n  position: absolute;\n  left: clamp(\n    calc(var(--media-preview-max-width) / 2 + var(--media-preview-padding)),\n    var(--media-slider-pointer),\n    calc(100% - var(--media-preview-max-width) / 2 - var(--media-preview-padding) + var(--media-preview-inset))\n  );\n  bottom: 100%;\n  translate: -50%;\n  opacity: 0;\n  scale: 0.8;\n  filter: blur(8px);\n  transition-property: scale, opacity, filter;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  transform-origin: bottom;\n\n  @container media-root (width > 42rem) {\n    bottom: calc(100% + 0.25rem);\n    left: var(--media-slider-pointer);\n  }\n\n  & .media-preview__thumbnail-wrapper {\n    position: relative;\n\n    &::after {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      box-shadow:\n        0 0 0 1px oklch(0 0 0 / 0.05),\n        0 1px 3px 0 oklch(0 0 0 / 0.2),\n        0 1px 2px -1px oklch(0 0 0 / 0.2);\n    }\n  }\n\n  & .media-preview__thumbnail {\n    max-width: var(--media-preview-max-width);\n  }\n\n  &:has(.media-preview__thumbnail[data-loading]) {\n    max-height: 6rem;\n  }\n}\n.media-minimal-skin--video .media-slider[data-pointing] .media-slider__preview:has([role=\"img\"]:not([data-hidden])) {\n  opacity: 1;\n  scale: 1;\n  filter: blur(0);\n}\n\n";
 //#endregion
 //#region src/define/video/minimal-skin.ts
@@ -123,6 +121,12 @@ function getTemplateHTML() {
               Toggle captions
             </media-tooltip>
+            <media-cast-button commandfor="cast-tooltip" class="media-button media-button--subtle media-button--icon media-button--cast">
+              ${renderIcon("cast-enter", { class: "media-icon media-icon--cast-enter" })}
+              ${renderIcon("cast-exit", { class: "media-icon media-icon--cast-exit" })}
+            </media-cast-button>
+            <media-tooltip id="cast-tooltip" side="top" class="media-tooltip"></media-tooltip>
             <media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip">
               ${renderIcon("pip-enter", { class: "media-icon media-icon--pip-enter" })}
               ${renderIcon("pip-exit", { class: "media-icon media-icon--pip-exit" })}