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

package/cdn/proxy-XzDf9gyk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"proxy-XzDf9gyk.js","names":["#target"],"sources":["../../core/dist/dev/core/utils/define-class-prop-hooks.js","../../core/dist/dev/core/media/proxy.js"],"sourcesContent":["//#region src/core/utils/define-class-prop-hooks.ts\nfunction defineClassPropHooks(Class, BaseClassProto) {\n\tfor (const prop of Object.getOwnPropertyNames(BaseClassProto)) {\n\t\tif (prop in Class.prototype) continue;\n\t\tconst descriptor = Object.getOwnPropertyDescriptor(BaseClassProto, prop);\n\t\tif (!descriptor) continue;\n\t\tconst config = {};\n\t\tif (typeof descriptor.value === \"function\") config.value = function(...args) {\n\t\t\treturn this.call?.(prop, ...args);\n\t\t};\n\t\telse if (descriptor.get) {\n\t\t\tconfig.get = function() {\n\t\t\t\treturn this.get?.(prop);\n\t\t\t};\n\t\t\tif (descriptor.set) config.set = function(val) {\n\t\t\t\tthis.set?.(prop, val);\n\t\t\t};\n\t\t}\n\t\tObject.defineProperty(Class.prototype, prop, config);\n\t}\n}\n\n//#endregion\nexport { defineClassPropHooks };\n//# sourceMappingURL=define-class-prop-hooks.js.map","import { defineClassPropHooks } from \"../utils/define-class-prop-hooks.js\";\n\n//#region src/core/media/proxy.ts\n/**\n* This mixin creates an API from the passed classes and proxies the methods and properties to the attached target.\n*\n* Many methods and properties will need no translation and are proxied directly to the attached target.\n* For example, the `play` and `pause` methods are proxied directly to the attached target.\n*\n* Child classes can override the proxied methods and properties to provide custom behavior.\n* For example, the `src` property for HLS media is proxied to the HLS engine, not the target itself.\n*\n* The `get`, `set`, and `call` methods can be overridden to provide catch-all custom behavior.\n*/\nconst ProxyMixin = (PrimaryClass, ...AdditionalClasses) => {\n\tclass MediaProxy {\n\t\t#target = null;\n\t\tget target() {\n\t\t\treturn this.#target;\n\t\t}\n\t\tget(prop) {\n\t\t\treturn this.target?.[prop];\n\t\t}\n\t\tset(prop, val) {\n\t\t\tif (this.target) this.target[prop] = val;\n\t\t}\n\t\tcall(prop, ...args) {\n\t\t\treturn (this.target?.[prop])?.apply(this.target, args);\n\t\t}\n\t\tattach(target) {\n\t\t\tif (!target || this.#target === target) return;\n\t\t\tthis.#target = target;\n\t\t}\n\t\tdetach() {\n\t\t\tif (!this.#target) return;\n\t\t\tthis.#target = null;\n\t\t}\n\t}\n\tfor (const Class of [PrimaryClass, ...AdditionalClasses]) defineClassPropHooks(MediaProxy, Class.prototype);\n\treturn MediaProxy;\n};\n\n//#endregion\nexport { ProxyMixin };\n//# sourceMappingURL=proxy.js.map"],"mappings":";AACA,SAAS,qBAAqB,OAAO,gBAAgB;AACpD,MAAK,MAAM,QAAQ,OAAO,oBAAoB,eAAe,EAAE;AAC9D,MAAI,QAAQ,MAAM,UAAW;EAC7B,MAAM,aAAa,OAAO,yBAAyB,gBAAgB,KAAK;AACxE,MAAI,CAAC,WAAY;EACjB,MAAM,SAAS,EAAE;AACjB,MAAI,OAAO,WAAW,UAAU,WAAY,QAAO,QAAQ,SAAS,GAAG,MAAM;AAC5E,UAAO,KAAK,OAAO,MAAM,GAAG,KAAK;;WAEzB,WAAW,KAAK;AACxB,UAAO,MAAM,WAAW;AACvB,WAAO,KAAK,MAAM,KAAK;;AAExB,OAAI,WAAW,IAAK,QAAO,MAAM,SAAS,KAAK;AAC9C,SAAK,MAAM,MAAM,IAAI;;;AAGvB,SAAO,eAAe,MAAM,WAAW,MAAM,OAAO;;;;;;;;;;;;;;;;;ACJtD,MAAM,cAAc,cAAc,GAAG,sBAAsB;CAC1D,MAAM,WAAW;EAChB,UAAU;EACV,IAAI,SAAS;AACZ,UAAO,MAAKA;;EAEb,IAAI,MAAM;AACT,UAAO,KAAK,SAAS;;EAEtB,IAAI,MAAM,KAAK;AACd,OAAI,KAAK,OAAQ,MAAK,OAAO,QAAQ;;EAEtC,KAAK,MAAM,GAAG,MAAM;AACnB,WAAQ,KAAK,SAAS,QAAQ,MAAM,KAAK,QAAQ,KAAK;;EAEvD,OAAO,QAAQ;AACd,OAAI,CAAC,UAAU,MAAKA,WAAY,OAAQ;AACxC,SAAKA,SAAU;;EAEhB,SAAS;AACR,OAAI,CAAC,MAAKA,OAAS;AACnB,SAAKA,SAAU;;;AAGjB,MAAK,MAAM,SAAS,CAAC,cAAc,GAAG,kBAAkB,CAAE,sBAAqB,YAAY,MAAM,UAAU;AAC3G,QAAO"}

package/cdn/proxy-dR7IDk37.js

@@ -1,349 +0,0 @@
-import { n as defineClassPropHooks, t as ProxyMixin } from "./proxy-XzDf9gyk.js";
-
-//#region ../core/dist/dev/core/media/delegate.js
-/**
-* Mixin that intercepts `get`, `set`, and `call` to delegate property access
-* and method calls to an instance of `DelegateClass` before falling through
-* to the base class implementation.
-*
-* Works with both `CustomMediaMixin` and `ProxyMixin`.
-*/
-function DelegateMixin(BaseClass, DelegateClass) {
-	class DelegateImpl extends BaseClass {
-		#delegate = new DelegateClass();
-		get(prop) {
-			if (prop in this.#delegate) return this.#delegate[prop];
-			return super.get?.(prop);
-		}
-		set(prop, val) {
-			if (prop in this.#delegate) {
-				this.#delegate[prop] = val;
-				return;
-			}
-			super.set?.(prop, val);
-		}
-		call(prop, ...args) {
-			if (prop in this.#delegate) return this.#delegate[prop](...args);
-			return super.call?.(prop, ...args);
-		}
-		attach(target) {
-			super.attach?.(target);
-			this.#delegate.attach?.(target);
-		}
-		detach() {
-			this.#delegate.detach?.();
-			super.detach?.();
-		}
-	}
-	for (let proto = DelegateClass.prototype; proto && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) defineClassPropHooks(DelegateImpl, proto);
-	return DelegateImpl;
-}
-
-//#endregion
-//#region ../core/dist/dev/dom/media/custom-media-element/index.js
-/**
-* Custom Media Element
-* Based on https://github.com/muxinc/custom-video-element - Mux - MIT License
-*
-* The goal is to create an element that works just like the video element
-* but can be extended/sub-classed, because native elements cannot be
-* extended today across browsers.
-*/
-const Events = [
-	"abort",
-	"canplay",
-	"canplaythrough",
-	"durationchange",
-	"emptied",
-	"encrypted",
-	"ended",
-	"error",
-	"loadeddata",
-	"loadedmetadata",
-	"loadstart",
-	"pause",
-	"play",
-	"playing",
-	"progress",
-	"ratechange",
-	"seeked",
-	"seeking",
-	"stalled",
-	"suspend",
-	"timeupdate",
-	"volumechange",
-	"waiting",
-	"waitingforkey",
-	"resize",
-	"enterpictureinpicture",
-	"leavepictureinpicture",
-	"webkitbeginfullscreen",
-	"webkitendfullscreen",
-	"webkitpresentationmodechanged"
-];
-const Attributes = [
-	"autopictureinpicture",
-	"disablepictureinpicture",
-	"disableremoteplayback",
-	"autoplay",
-	"controls",
-	"controlslist",
-	"crossorigin",
-	"loop",
-	"muted",
-	"playsinline",
-	"poster",
-	"preload",
-	"src"
-];
-/**
-* Helper function to generate the HTML template for audio elements.
-*/
-function getAudioTemplateHTML(attrs) {
-	return `
-    <style>
-      :host {
-        display: inline-flex;
-        line-height: 0;
-        flex-direction: column;
-        justify-content: end;
-      }
-
-      audio {
-        width: 100%;
-      }
-    </style>
-    <slot name="media">
-      <audio${serializeAttributes(attrs)}></audio>
-    </slot>
-    <slot></slot>
-  `;
-}
-/**
-* Helper function to generate the HTML template for video elements.
-*/
-function getVideoTemplateHTML(attrs) {
-	return `
-    <style>
-      :host {
-        display: contents;
-      }
-
-      video {
-        display: block;
-        width: 100%;
-        height: 100%;
-        border-radius: var(--media-video-border-radius);
-        object-fit: var(--media-object-fit, contain);
-        object-position: var(--media-object-position, center);
-      }
-
-      video::-webkit-media-text-track-container {
-        transition: translate var(--media-caption-track-duration, 0) ease-out;
-        transition-delay: var(--media-caption-track-delay, 0);
-        translate: 0 var(--media-caption-track-y, 0);
-        scale: 0.98;
-        z-index: 1;
-        font-family: inherit;
-      }
-    </style>
-    <slot name="media">
-      <video${serializeAttributes(attrs)}></video>
-    </slot>
-    <slot></slot>
-  `;
-}
-function CustomMediaMixin(superclass, { tag, is }) {
-	const nativeElTest = globalThis.document?.createElement?.(tag, { is });
-	const nativeElProps = nativeElTest ? getNativeElProps(nativeElTest) : [];
-	return class CustomMedia extends superclass {
-		static getTemplateHTML = tag.endsWith("audio") ? getAudioTemplateHTML : getVideoTemplateHTML;
-		static shadowRootOptions = { mode: "open" };
-		static Events = Events;
-		static #isDefined = false;
-		static #propsToAttrs;
-		static get observedAttributes() {
-			CustomMedia.#define();
-			return [...nativeElTest?.constructor?.observedAttributes ?? [], ...Attributes];
-		}
-		static #define() {
-			if (CustomMedia.#isDefined) return;
-			CustomMedia.#isDefined = true;
-			CustomMedia.#propsToAttrs = new Set(CustomMedia.observedAttributes);
-			CustomMedia.#propsToAttrs.delete("muted");
-			for (const prop of nativeElProps) {
-				if (prop in CustomMedia.prototype) continue;
-				if (typeof nativeElTest[prop] === "function") CustomMedia.prototype[prop] = function(...args) {
-					this.#init();
-					return this.call(prop, ...args);
-				};
-				else {
-					const config = { get() {
-						this.#init();
-						return this.get(prop);
-					} };
-					if (prop !== prop.toUpperCase()) config.set = function(val) {
-						this.#init();
-						this.set(prop, val);
-					};
-					Object.defineProperty(CustomMedia.prototype, prop, config);
-				}
-			}
-		}
-		#isInit = false;
-		#target = null;
-		#childMap = /* @__PURE__ */ new Map();
-		#childObserver;
-		get(prop) {
-			const attr = prop.toLowerCase();
-			if (CustomMedia.#propsToAttrs.has(attr)) {
-				const val = this.getAttribute(attr);
-				return val === null ? false : val === "" ? true : val;
-			}
-			return this.target?.[prop];
-		}
-		set(prop, val) {
-			const attr = prop.toLowerCase();
-			if (CustomMedia.#propsToAttrs.has(attr)) {
-				if (val === true || val === false || val == null) this.toggleAttribute(attr, Boolean(val));
-				else this.setAttribute(attr, val);
-				return;
-			}
-			if (this.target) this.target[prop] = val;
-		}
-		call(prop, ...args) {
-			return (this.target?.[prop])?.apply(this.target, args);
-		}
-		get target() {
-			this.#init();
-			return this.#target ?? this.querySelector(":scope > [slot=media]") ?? this.querySelector(tag) ?? this.shadowRoot?.querySelector(tag) ?? null;
-		}
-		set target(val) {
-			this.#target = val;
-		}
-		get defaultMuted() {
-			this.#init();
-			return this.get("muted");
-		}
-		set defaultMuted(val) {
-			this.#init();
-			this.set("muted", val);
-		}
-		#init() {
-			if (this.#isInit) return;
-			this.#isInit = true;
-			this.init();
-		}
-		init() {
-			if (!this.shadowRoot) {
-				this.attachShadow({ mode: "open" });
-				const attrs = namedNodeMapToObject(this.attributes);
-				if (is) attrs.is = is;
-				if (tag) attrs.part = tag;
-				this.shadowRoot.innerHTML = this.constructor.getTemplateHTML(attrs);
-			}
-			this.target.muted = this.hasAttribute("muted");
-			for (const prop of nativeElProps) this.#upgradeProperty(prop);
-			this.#childObserver = new MutationObserver(this.#syncMediaChildAttribute.bind(this));
-			this.shadowRoot.addEventListener("slotchange", () => this.#syncMediaChildren());
-			this.#syncMediaChildren();
-			for (const type of this.constructor.Events) this.shadowRoot.addEventListener(type, this, true);
-		}
-		handleEvent(event) {
-			if (event.target === this.target) this.dispatchEvent(new CustomEvent(event.type, { detail: event.detail }));
-		}
-		#syncMediaChildren() {
-			const removeNativeChildren = new Map(this.#childMap);
-			((this.shadowRoot?.querySelector("slot:not([name])"))?.assignedElements({ flatten: true }).filter((el) => ["track", "source"].includes(el.localName))).forEach((el) => {
-				removeNativeChildren.delete(el);
-				let clone = this.#childMap.get(el);
-				if (!clone) {
-					clone = el.cloneNode();
-					this.#childMap.set(el, clone);
-					this.#childObserver?.observe(el, { attributes: true });
-				}
-				this.target?.append(clone);
-				this.#enableDefaultTrack(clone);
-			});
-			removeNativeChildren.forEach((clone, el) => {
-				clone.remove();
-				this.#childMap.delete(el);
-			});
-		}
-		#syncMediaChildAttribute(mutations) {
-			for (const mutation of mutations) if (mutation.type === "attributes") {
-				const { target, attributeName } = mutation;
-				const clone = this.#childMap.get(target);
-				if (clone && attributeName) {
-					clone.setAttribute(attributeName, target.getAttribute(attributeName) ?? "");
-					this.#enableDefaultTrack(clone);
-				}
-			}
-		}
-		#enableDefaultTrack(trackEl) {
-			if (trackEl && trackEl.localName === "track" && trackEl.default && (trackEl.kind === "chapters" || trackEl.kind === "metadata") && trackEl.track.mode === "disabled") trackEl.track.mode = "hidden";
-		}
-		#upgradeProperty(prop) {
-			if (Object.hasOwn(this, prop)) {
-				const value = this[prop];
-				delete this[prop];
-				this[prop] = value;
-			}
-		}
-		attributeChangedCallback(attrName, oldValue, newValue) {
-			this.#init();
-			this.#forwardAttribute(attrName, oldValue, newValue);
-		}
-		#forwardAttribute(attrName, _oldValue, newValue) {
-			if (["id", "class"].includes(attrName)) return;
-			if (!CustomMedia.observedAttributes.includes(attrName) && this.constructor.observedAttributes.includes(attrName)) return;
-			if (newValue === null) this.target?.removeAttribute(attrName);
-			else if (this.target?.getAttribute(attrName) !== newValue) this.target?.setAttribute(attrName, newValue);
-		}
-		connectedCallback() {
-			this.#init();
-		}
-	};
-}
-/**
-* Helper function to get all properties from a native media element's prototype.
-*/
-function getNativeElProps(nativeElTest) {
-	const nativeElProps = [];
-	for (let proto = Object.getPrototypeOf(nativeElTest); proto && proto !== HTMLElement.prototype; proto = Object.getPrototypeOf(proto)) {
-		const props = Object.getOwnPropertyNames(proto);
-		nativeElProps.push(...props);
-	}
-	return nativeElProps;
-}
-/**
-* Helper function to serialize attributes into a string.
-*/
-function serializeAttributes(attrs) {
-	let html = "";
-	for (const key in attrs) {
-		if (!Attributes.includes(key)) continue;
-		const value = attrs[key];
-		if (value === "") html += ` ${key}`;
-		else html += ` ${key}="${value}"`;
-	}
-	return html;
-}
-/**
-* Helper function to convert NamedNodeMap to a plain object.
-*/
-function namedNodeMapToObject(namedNodeMap) {
-	const obj = {};
-	for (const attr of namedNodeMap) obj[attr.name] = attr.value;
-	return obj;
-}
-const CustomVideoElement = CustomMediaMixin(globalThis.HTMLElement ?? class {}, { tag: "video" });
-const CustomAudioElement = CustomMediaMixin(globalThis.HTMLElement ?? class {}, { tag: "audio" });
-
-//#endregion
-//#region ../core/dist/dev/dom/media/proxy.js
-const MediaProxyMixin = ProxyMixin(globalThis.HTMLVideoElement ?? class {}, globalThis.HTMLMediaElement ?? class {}, globalThis.EventTarget ?? class {});
-
-//#endregion
-export { DelegateMixin as n, CustomMediaMixin as t };
-//# sourceMappingURL=proxy-dR7IDk37.js.map

package/cdn/proxy-dR7IDk37.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"proxy-dR7IDk37.js","names":["#delegate","#isDefined","#propsToAttrs","#define","#init","#target","#isInit","#upgradeProperty","#childObserver","#syncMediaChildAttribute","#syncMediaChildren","#childMap","#enableDefaultTrack","#forwardAttribute"],"sources":["../../core/dist/dev/core/media/delegate.js","../../core/dist/dev/dom/media/custom-media-element/index.js","../../core/dist/dev/dom/media/proxy.js"],"sourcesContent":["import { defineClassPropHooks } from \"../utils/define-class-prop-hooks.js\";\n\n//#region src/core/media/delegate.ts\n/**\n* Mixin that intercepts `get`, `set`, and `call` to delegate property access\n* and method calls to an instance of `DelegateClass` before falling through\n* to the base class implementation.\n*\n* Works with both `CustomMediaMixin` and `ProxyMixin`.\n*/\nfunction DelegateMixin(BaseClass, DelegateClass) {\n\tclass DelegateImpl extends BaseClass {\n\t\t#delegate = new DelegateClass();\n\t\tget(prop) {\n\t\t\tif (prop in this.#delegate) return this.#delegate[prop];\n\t\t\treturn super.get?.(prop);\n\t\t}\n\t\tset(prop, val) {\n\t\t\tif (prop in this.#delegate) {\n\t\t\t\tthis.#delegate[prop] = val;\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsuper.set?.(prop, val);\n\t\t}\n\t\tcall(prop, ...args) {\n\t\t\tif (prop in this.#delegate) return this.#delegate[prop](...args);\n\t\t\treturn super.call?.(prop, ...args);\n\t\t}\n\t\tattach(target) {\n\t\t\tsuper.attach?.(target);\n\t\t\tthis.#delegate.attach?.(target);\n\t\t}\n\t\tdetach() {\n\t\t\tthis.#delegate.detach?.();\n\t\t\tsuper.detach?.();\n\t\t}\n\t}\n\tfor (let proto = DelegateClass.prototype; proto && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) defineClassPropHooks(DelegateImpl, proto);\n\treturn DelegateImpl;\n}\n\n//#endregion\nexport { DelegateMixin };\n//# sourceMappingURL=delegate.js.map","//#region src/dom/media/custom-media-element/index.ts\n/**\n* Custom Media Element\n* Based on https://github.com/muxinc/custom-video-element - Mux - MIT License\n*\n* The goal is to create an element that works just like the video element\n* but can be extended/sub-classed, because native elements cannot be\n* extended today across browsers.\n*/\nconst Events = [\n\t\"abort\",\n\t\"canplay\",\n\t\"canplaythrough\",\n\t\"durationchange\",\n\t\"emptied\",\n\t\"encrypted\",\n\t\"ended\",\n\t\"error\",\n\t\"loadeddata\",\n\t\"loadedmetadata\",\n\t\"loadstart\",\n\t\"pause\",\n\t\"play\",\n\t\"playing\",\n\t\"progress\",\n\t\"ratechange\",\n\t\"seeked\",\n\t\"seeking\",\n\t\"stalled\",\n\t\"suspend\",\n\t\"timeupdate\",\n\t\"volumechange\",\n\t\"waiting\",\n\t\"waitingforkey\",\n\t\"resize\",\n\t\"enterpictureinpicture\",\n\t\"leavepictureinpicture\",\n\t\"webkitbeginfullscreen\",\n\t\"webkitendfullscreen\",\n\t\"webkitpresentationmodechanged\"\n];\nconst Attributes = [\n\t\"autopictureinpicture\",\n\t\"disablepictureinpicture\",\n\t\"disableremoteplayback\",\n\t\"autoplay\",\n\t\"controls\",\n\t\"controlslist\",\n\t\"crossorigin\",\n\t\"loop\",\n\t\"muted\",\n\t\"playsinline\",\n\t\"poster\",\n\t\"preload\",\n\t\"src\"\n];\n/**\n* Helper function to generate the HTML template for audio elements.\n*/\nfunction getAudioTemplateHTML(attrs) {\n\treturn `\n    <style>\n      :host {\n        display: inline-flex;\n        line-height: 0;\n        flex-direction: column;\n        justify-content: end;\n      }\n\n      audio {\n        width: 100%;\n      }\n    </style>\n    <slot name=\"media\">\n      <audio${serializeAttributes(attrs)}></audio>\n    </slot>\n    <slot></slot>\n  `;\n}\n/**\n* Helper function to generate the HTML template for video elements.\n*/\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(--media-video-border-radius);\n        object-fit: var(--media-object-fit, contain);\n        object-position: var(--media-object-position, center);\n      }\n\n      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    </style>\n    <slot name=\"media\">\n      <video${serializeAttributes(attrs)}></video>\n    </slot>\n    <slot></slot>\n  `;\n}\nfunction CustomMediaMixin(superclass, { tag, is }) {\n\tconst nativeElTest = globalThis.document?.createElement?.(tag, { is });\n\tconst nativeElProps = nativeElTest ? getNativeElProps(nativeElTest) : [];\n\treturn class CustomMedia extends superclass {\n\t\tstatic getTemplateHTML = tag.endsWith(\"audio\") ? getAudioTemplateHTML : getVideoTemplateHTML;\n\t\tstatic shadowRootOptions = { mode: \"open\" };\n\t\tstatic Events = Events;\n\t\tstatic #isDefined = false;\n\t\tstatic #propsToAttrs;\n\t\tstatic get observedAttributes() {\n\t\t\tCustomMedia.#define();\n\t\t\treturn [...nativeElTest?.constructor?.observedAttributes ?? [], ...Attributes];\n\t\t}\n\t\tstatic #define() {\n\t\t\tif (CustomMedia.#isDefined) return;\n\t\t\tCustomMedia.#isDefined = true;\n\t\t\tCustomMedia.#propsToAttrs = new Set(CustomMedia.observedAttributes);\n\t\t\tCustomMedia.#propsToAttrs.delete(\"muted\");\n\t\t\tfor (const prop of nativeElProps) {\n\t\t\t\tif (prop in CustomMedia.prototype) continue;\n\t\t\t\tif (typeof nativeElTest[prop] === \"function\") CustomMedia.prototype[prop] = function(...args) {\n\t\t\t\t\tthis.#init();\n\t\t\t\t\treturn this.call(prop, ...args);\n\t\t\t\t};\n\t\t\t\telse {\n\t\t\t\t\tconst config = { get() {\n\t\t\t\t\t\tthis.#init();\n\t\t\t\t\t\treturn this.get(prop);\n\t\t\t\t\t} };\n\t\t\t\t\tif (prop !== prop.toUpperCase()) config.set = function(val) {\n\t\t\t\t\t\tthis.#init();\n\t\t\t\t\t\tthis.set(prop, val);\n\t\t\t\t\t};\n\t\t\t\t\tObject.defineProperty(CustomMedia.prototype, prop, config);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t#isInit = false;\n\t\t#target = null;\n\t\t#childMap = /* @__PURE__ */ new Map();\n\t\t#childObserver;\n\t\tget(prop) {\n\t\t\tconst attr = prop.toLowerCase();\n\t\t\tif (CustomMedia.#propsToAttrs.has(attr)) {\n\t\t\t\tconst val = this.getAttribute(attr);\n\t\t\t\treturn val === null ? false : val === \"\" ? true : val;\n\t\t\t}\n\t\t\treturn this.target?.[prop];\n\t\t}\n\t\tset(prop, val) {\n\t\t\tconst attr = prop.toLowerCase();\n\t\t\tif (CustomMedia.#propsToAttrs.has(attr)) {\n\t\t\t\tif (val === true || val === false || val == null) this.toggleAttribute(attr, Boolean(val));\n\t\t\t\telse this.setAttribute(attr, val);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (this.target) this.target[prop] = val;\n\t\t}\n\t\tcall(prop, ...args) {\n\t\t\treturn (this.target?.[prop])?.apply(this.target, args);\n\t\t}\n\t\tget target() {\n\t\t\tthis.#init();\n\t\t\treturn this.#target ?? this.querySelector(\":scope > [slot=media]\") ?? this.querySelector(tag) ?? this.shadowRoot?.querySelector(tag) ?? null;\n\t\t}\n\t\tset target(val) {\n\t\t\tthis.#target = val;\n\t\t}\n\t\tget defaultMuted() {\n\t\t\tthis.#init();\n\t\t\treturn this.get(\"muted\");\n\t\t}\n\t\tset defaultMuted(val) {\n\t\t\tthis.#init();\n\t\t\tthis.set(\"muted\", val);\n\t\t}\n\t\t#init() {\n\t\t\tif (this.#isInit) return;\n\t\t\tthis.#isInit = true;\n\t\t\tthis.init();\n\t\t}\n\t\tinit() {\n\t\t\tif (!this.shadowRoot) {\n\t\t\t\tthis.attachShadow({ mode: \"open\" });\n\t\t\t\tconst attrs = namedNodeMapToObject(this.attributes);\n\t\t\t\tif (is) attrs.is = is;\n\t\t\t\tif (tag) attrs.part = tag;\n\t\t\t\tthis.shadowRoot.innerHTML = this.constructor.getTemplateHTML(attrs);\n\t\t\t}\n\t\t\tthis.target.muted = this.hasAttribute(\"muted\");\n\t\t\tfor (const prop of nativeElProps) this.#upgradeProperty(prop);\n\t\t\tthis.#childObserver = new MutationObserver(this.#syncMediaChildAttribute.bind(this));\n\t\t\tthis.shadowRoot.addEventListener(\"slotchange\", () => this.#syncMediaChildren());\n\t\t\tthis.#syncMediaChildren();\n\t\t\tfor (const type of this.constructor.Events) this.shadowRoot.addEventListener(type, this, true);\n\t\t}\n\t\thandleEvent(event) {\n\t\t\tif (event.target === this.target) this.dispatchEvent(new CustomEvent(event.type, { detail: event.detail }));\n\t\t}\n\t\t#syncMediaChildren() {\n\t\t\tconst removeNativeChildren = new Map(this.#childMap);\n\t\t\t((this.shadowRoot?.querySelector(\"slot:not([name])\"))?.assignedElements({ flatten: true }).filter((el) => [\"track\", \"source\"].includes(el.localName))).forEach((el) => {\n\t\t\t\tremoveNativeChildren.delete(el);\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\tremoveNativeChildren.forEach((clone, el) => {\n\t\t\t\tclone.remove();\n\t\t\t\tthis.#childMap.delete(el);\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\t#upgradeProperty(prop) {\n\t\t\tif (Object.hasOwn(this, prop)) {\n\t\t\t\tconst value = this[prop];\n\t\t\t\tdelete this[prop];\n\t\t\t\tthis[prop] = value;\n\t\t\t}\n\t\t}\n\t\tattributeChangedCallback(attrName, oldValue, newValue) {\n\t\t\tthis.#init();\n\t\t\tthis.#forwardAttribute(attrName, oldValue, newValue);\n\t\t}\n\t\t#forwardAttribute(attrName, _oldValue, newValue) {\n\t\t\tif ([\"id\", \"class\"].includes(attrName)) return;\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\tconnectedCallback() {\n\t\t\tthis.#init();\n\t\t}\n\t};\n}\n/**\n* Helper function to get all properties from a native media element's prototype.\n*/\nfunction getNativeElProps(nativeElTest) {\n\tconst nativeElProps = [];\n\tfor (let proto = Object.getPrototypeOf(nativeElTest); proto && proto !== HTMLElement.prototype; proto = Object.getPrototypeOf(proto)) {\n\t\tconst props = Object.getOwnPropertyNames(proto);\n\t\tnativeElProps.push(...props);\n\t}\n\treturn nativeElProps;\n}\n/**\n* Helper function to serialize attributes into a string.\n*/\nfunction serializeAttributes(attrs) {\n\tlet html = \"\";\n\tfor (const key in attrs) {\n\t\tif (!Attributes.includes(key)) continue;\n\t\tconst value = attrs[key];\n\t\tif (value === \"\") html += ` ${key}`;\n\t\telse html += ` ${key}=\"${value}\"`;\n\t}\n\treturn html;\n}\n/**\n* Helper function to convert NamedNodeMap to a plain object.\n*/\nfunction namedNodeMapToObject(namedNodeMap) {\n\tconst obj = {};\n\tfor (const attr of namedNodeMap) obj[attr.name] = attr.value;\n\treturn obj;\n}\nconst CustomVideoElement = CustomMediaMixin(globalThis.HTMLElement ?? class {}, { tag: \"video\" });\nconst CustomAudioElement = CustomMediaMixin(globalThis.HTMLElement ?? class {}, { tag: \"audio\" });\n\n//#endregion\nexport { Attributes, CustomAudioElement, CustomMediaMixin, CustomVideoElement, Events };\n//# sourceMappingURL=index.js.map","import { ProxyMixin } from \"../../core/media/proxy.js\";\n\n//#region src/dom/media/proxy.ts\nconst MediaProxyMixin = ProxyMixin(globalThis.HTMLVideoElement ?? class {}, globalThis.HTMLMediaElement ?? class {}, globalThis.EventTarget ?? class {});\n\n//#endregion\nexport { MediaProxyMixin };\n//# sourceMappingURL=proxy.js.map"],"mappings":"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"}

package/cdn/safe-define-B8lHgj_K.js

@@ -1,9 +0,0 @@
-//#region src/define/safe-define.ts
-/** Define a custom element only if not already registered. */
-function safeDefine(element) {
-	if (!customElements.get(element.tagName)) customElements.define(element.tagName, element);
-}
-
-//#endregion
-export { safeDefine as t };
-//# sourceMappingURL=safe-define-B8lHgj_K.js.map

package/cdn/safe-define-B8lHgj_K.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"safe-define-B8lHgj_K.js","names":[],"sources":["../src/define/safe-define.ts"],"sourcesContent":["type DefinableElement = CustomElementConstructor & { tagName: string };\n\n/** Define a custom element only if not already registered. */\nexport function safeDefine(element: DefinableElement): void {\n  if (!customElements.get(element.tagName)) {\n    customElements.define(element.tagName, element);\n  }\n}\n"],"mappings":";;AAGA,SAAgB,WAAW,SAAiC;AAC1D,KAAI,CAAC,eAAe,IAAI,QAAQ,QAAQ,CACtC,gBAAe,OAAO,QAAQ,SAAS,QAAQ"}

package/cdn/safe-define-GrHW3P9e.js

@@ -1,2 +0,0 @@
-function e(e){customElements.get(e.tagName)||customElements.define(e.tagName,e)}export{e as t};
-//# sourceMappingURL=safe-define-GrHW3P9e.js.map

package/cdn/safe-define-GrHW3P9e.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"safe-define-GrHW3P9e.js","names":[],"sources":["../src/define/safe-define.ts"],"sourcesContent":["type DefinableElement = CustomElementConstructor & { tagName: string };\n\n/** Define a custom element only if not already registered. */\nexport function safeDefine(element: DefinableElement): void {\n  if (!customElements.get(element.tagName)) {\n    customElements.define(element.tagName, element);\n  }\n}\n"],"mappings":"AAGA,SAAgB,EAAW,EAAiC,CACrD,eAAe,IAAI,EAAQ,QAAQ,EACtC,eAAe,OAAO,EAAQ,QAAS,EAAQ"}

package/cdn/video-minimal.dev.d.ts

@@ -1 +0,0 @@
-export {};

package/cdn/video-minimal.dev.js

@@ -1,155 +0,0 @@
-import { o as ReactiveElement } from "./create-player-4kACDl5S.js";
-import { g as createStyles, h as SkinMixin } from "./volume-slider-DYG1mki7.js";
-import "./safe-define-B8lHgj_K.js";
-import "./poster-BoF67sLZ.js";
-import { t as renderIcon } from "./minimal-DBMdC_0I.js";
-
-//#region inline-css:src/define/video/minimal-skin.js
-var minimal_skin_default = "/* ==========================================================================\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  position: relative;\n  isolation: isolate;\n  display: block;\n  height: 100%;\n  width: 100%;\n  container: media-root / inline-size;\n  border-radius: var(--media-border-radius, 0.75rem);\n  font-family:\n    Inter Variable,\n    Inter,\n    ui-sans-serif,\n    system-ui,\n    sans-serif;\n  font-size: 0.8125rem;\n  line-height: 1.5;\n  letter-spacing: normal;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n\n  --media-controls-radius: var(--media-border-radius, 1rem);\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.5);\n  opacity: 0;\n  pointer-events: none;\n  transition-property: opacity, backdrop-filter;\n  transition-duration: var(--media-controls-transition-duration);\n  transition-delay: var(--media-controls-transition-delay);\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.5);\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__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  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  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  flex: 1;\n  gap: 0.75rem;\n}\n.media-minimal-skin .media-time {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.media-minimal-skin .media-time__value {\n  font-variant-numeric: tabular-nums;\n}\n.media-minimal-skin .media-time__value--current,\n.media-minimal-skin .media-time__separator {\n  display: none;\n}\n@container media-controls (width > 28rem) {\n  .media-minimal-skin .media-time-controls {\n    flex-direction: row;\n  }\n  .media-minimal-skin .media-time__value--duration,\n  .media-minimal-skin .media-time__separator {\n    color: oklch(from currentColor l c h / 0.6);\n  }\n  .media-minimal-skin .media-time__value--current,\n  .media-minimal-skin .media-time__separator {\n    display: inline;\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 > 40rem) {\n    gap: 0.125rem;\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: calc(var(--media-controls-radius) - var(--media-controls-padding));\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  transition-property: background-color, outline-offset, scale;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  cursor: pointer;\n  user-select: none;\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: var(--media-controls-radius);\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-align: center;\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;\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  @container media-controls (width < 28rem) {\n    display: none;\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   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  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 > img {\n  object-fit: contain;\n}\n\n/* ==========================================================================\n   Media preview\n   ========================================================================== */\n.media-minimal-skin .media-preview {\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__timestamp {\n    display: block;\n    font-variant-numeric: tabular-nums;\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: 1.25rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 1.25rem;\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/* ==========================================================================\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.25rem;\n  background-color: oklch(1 0 0 / 0.1);\n  backdrop-filter: blur(16px) saturate(1.5);\n  box-shadow:\n    0 4px 6px -1px oklch(0 0 0 / 0.1),\n    0 2px 4px -2px oklch(0 0 0 / 0.1);\n  font-size: 0.75rem;\n  white-space: nowrap;\n  --media-tooltip-side-offset: 0.75rem;\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  @media (prefers-reduced-transparency: reduce) {\n    background-color: oklch(0 0 0 / 0.7);\n  }\n\n  @media (prefers-contrast: more) {\n    background-color: oklch(0 0 0 / 0.9);\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: calc(var(--media-controls-transition-delay) + 25ms);\n  --media-caption-track-y: -0.5rem;\n\n  &:has(.media-controls[data-visible]) {\n    --media-caption-track-y: -3rem;\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   Tooltip Label State Visibility for Video Skins\n\n   Data-attribute-driven visibility rules for multi-state tooltip labels.\n   Uses adjacent sibling selectors to match button state → tooltip content.\n   ========================================================================== */\n\n/* --- All multi-state labels hidden by default --- */\n\n.media-tooltip-label {\n  display: none;\n}\n\n/* --- Active label per state --- */\n\n/* Play: ended → replay */\n.media-button--play[data-ended] + .media-tooltip .media-tooltip-label--replay,\n/* Play: paused (not ended) → play */\n  .media-button--play:not([data-ended])[data-paused] + .media-tooltip\n  .media-tooltip-label--play,\n/* Play: playing (not paused, not ended) → pause */\n  .media-button--play:not([data-paused]):not([data-ended]) + .media-tooltip\n  .media-tooltip-label--pause,\n/* Fullscreen: not fullscreen → enter */\n  .media-button--fullscreen:not([data-fullscreen]) + .media-tooltip\n  .media-tooltip-label--enter-fullscreen,\n/* Fullscreen: fullscreen → exit */\n  .media-button--fullscreen[data-fullscreen] + .media-tooltip\n  .media-tooltip-label--exit-fullscreen,\n/* Captions: not active → enable */\n  .media-button--captions:not([data-active]) + .media-tooltip\n  .media-tooltip-label--enable-captions,\n/* Captions: active → disable */\n  .media-button--captions[data-active] + .media-tooltip\n  .media-tooltip-label--disable-captions,\n/* PiP: not in pip → enter */\n  .media-button--pip:not([data-pip]) + .media-tooltip\n  .media-tooltip-label--enter-pip,\n/* PiP: in pip → exit */\n  .media-button--pip[data-pip] + .media-tooltip\n  .media-tooltip-label--exit-pip {\n  display: block;\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-padding: 0.375rem;\n  --media-controls-transition-duration: 100ms;\n  --media-controls-transition-delay: 0ms;\n  --media-controls-transition-timing-function: ease-out;\n  --media-error-dialog-transition-duration: 250ms;\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\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  &: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-delay: 500ms;\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  position: absolute;\n  bottom: 0;\n  inset-inline: 0;\n  z-index: 10;\n  gap: 0.5rem;\n  padding: 2rem var(--media-controls-padding) var(--media-controls-padding) var(--media-controls-padding);\n  color: var(--media-color-primary, oklch(1 0 0));\n  transition-duration: var(--media-controls-transition-duration);\n  transition-delay: var(--media-controls-transition-delay);\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  @container media-root (width > 40rem) {\n    gap: 0.875rem;\n    padding: 2.5rem 0.75rem 0.75rem 0.75rem;\n  }\n}\n\n/* Hide cursor when controls are hidden in fullscreen */\n.media-minimal-skin--video:fullscreen: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  --media-popover-side-offset: 0.5rem;\n  background: transparent;\n  padding: 0.25rem;\n}\n\n/* ==========================================================================\n   Slider preview\n   ========================================================================== */\n\n.media-minimal-skin--video .media-slider__preview {\n  position: absolute;\n  left: var(--media-slider-pointer);\n  bottom: calc(100% + 0.5rem);\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  & .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: 11rem;\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
-const SEEK_TIME = 10;
-function getTemplateHTML() {
-	return `
-    <media-container class="media-minimal-skin media-minimal-skin--video">
-      <!-- @deprecated slot="media" is no longer required, use the default slot instead -->
-      <slot name="media"></slot>
-      <slot></slot>
-
-      <media-poster>
-        <slot name="poster"></slot>
-      </media-poster>
-
-      <media-buffering-indicator class="media-buffering-indicator">
-        ${renderIcon("spinner", { class: "media-icon" })}
-      </media-buffering-indicator>
-
-      <media-controls class="media-controls">
-        <media-tooltip-group>
-          <div class="media-button-group">
-            <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
-              ${renderIcon("restart", { class: "media-icon media-icon--restart" })}
-              ${renderIcon("play", { class: "media-icon media-icon--play" })}
-              ${renderIcon("pause", { class: "media-icon media-icon--pause" })}
-            </media-play-button>
-            <media-tooltip id="play-tooltip" side="top" class="media-tooltip">
-              <span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
-              <span class="media-tooltip-label media-tooltip-label--play">Play</span>
-              <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
-            </media-tooltip>
-
-            <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
-              <span class="media-icon__container">
-                ${renderIcon("seek", { class: "media-icon media-icon--flipped" })}
-                <span class="media-icon__label">${SEEK_TIME}</span>
-              </span>
-            </media-seek-button>
-            <media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip">
-              Seek backward ${SEEK_TIME} seconds
-            </media-tooltip>
-
-            <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
-              <span class="media-icon__container">
-                ${renderIcon("seek", { class: "media-icon" })}
-                <span class="media-icon__label">${SEEK_TIME}</span>
-              </span>
-            </media-seek-button>
-            <media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip">
-              Seek forward ${SEEK_TIME} seconds
-            </media-tooltip>
-          </div>
-
-          <div class="media-time-controls">
-            <media-time-group class="media-time">
-              <media-time type="current" class="media-time__value media-time__value--current"></media-time>
-              <media-time-separator class="media-time__separator"></media-time-separator>
-              <media-time type="duration" class="media-time__value media-time__value--duration"></media-time>
-            </media-time-group>
-
-            <media-time-slider class="media-slider">
-              <media-slider-track class="media-slider__track">
-                <media-slider-fill class="media-slider__fill"></media-slider-fill>
-                <media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
-              </media-slider-track>
-              <media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
-
-              <div class="media-preview media-slider__preview">
-                <div class="media-preview__thumbnail-wrapper">
-                  <media-slider-thumbnail class="media-preview__thumbnail"></media-slider-thumbnail>
-                </div>
-                <media-slider-value type="pointer" class="media-preview__timestamp"></media-slider-value>
-                ${renderIcon("spinner", { class: "media-preview__spinner media-icon" })}
-              </div>
-            </media-time-slider>
-          </div>
-
-          <div class="media-button-group">
-            <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button>
-            <media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip">
-              Toggle playback rate
-            </media-tooltip>
-
-            <media-mute-button commandfor="video-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
-              ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })}
-              ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })}
-              ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })}
-            </media-mute-button>
-
-            <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-popover media-popover--volume">
-              <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
-                <media-slider-track class="media-slider__track">
-                  <media-slider-fill class="media-slider__fill"></media-slider-fill>
-                </media-slider-track>
-                <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
-              </media-volume-slider>
-            </media-popover>
-
-            <media-captions-button commandfor="captions-tooltip" class="media-button media-button--subtle media-button--icon media-button--captions">
-              ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })}
-              ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })}
-            </media-captions-button>
-            <media-tooltip id="captions-tooltip" side="top" class="media-tooltip">
-              Toggle captions
-            </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" })}
-            </media-pip-button>
-            <media-tooltip id="pip-tooltip" side="top" class="media-tooltip">
-              <span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span>
-              <span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
-            </media-tooltip>
-
-            <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen">
-              ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })}
-              ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })}
-            </media-fullscreen-button>
-            <media-tooltip id="fullscreen-tooltip" side="top" class="media-tooltip">
-              <span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span>
-              <span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span>
-            </media-tooltip>
-          </div>
-        </media-tooltip-group>
-      </media-controls>
-
-      <div class="media-overlay"></div>
-    </media-container>
-  `;
-}
-var MinimalVideoSkinElement = class extends SkinMixin(ReactiveElement) {
-	static {
-		this.tagName = "video-minimal-skin";
-	}
-	static {
-		this.styles = createStyles(minimal_skin_default);
-	}
-	static {
-		this.getTemplateHTML = getTemplateHTML;
-	}
-};
-customElements.define(MinimalVideoSkinElement.tagName, MinimalVideoSkinElement);
-
-//#endregion
-//# sourceMappingURL=video-minimal.dev.js.map