@videojs/html 10.0.0-beta.6 → 10.0.0-beta.7

package/cdn/media/hls-video.dev.d.ts

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

package/cdn/media/hls-video.dev.js

@@ -1,373 +1,8 @@
-//#region ../core/dist/dev/core/utils/define-class-prop-hooks.js
-function defineClassPropHooks(Class, BaseClassProto) {
-	for (const prop of Object.getOwnPropertyNames(BaseClassProto)) {
-		if (prop in Class.prototype) continue;
-		const descriptor = Object.getOwnPropertyDescriptor(BaseClassProto, prop);
-		if (!descriptor) continue;
-		const config = {};
-		if (typeof descriptor.value === "function") config.value = function(...args) {
-			return this.call?.(prop, ...args);
-		};
-		else if (descriptor.get) {
-			config.get = function() {
-				return this.get?.(prop);
-			};
-			if (descriptor.set) config.set = function(val) {
-				this.set?.(prop, val);
-			};
-		}
-		Object.defineProperty(Class.prototype, prop, config);
-	}
-}
+import { t as listen } from "../listen-BXAYCbZA.js";
+import { t as safeDefine } from "../safe-define-B8lHgj_K.js";
+import { t as MediaAttachMixin } from "../media-attach-mixin-ChyNp2eK.js";
+import { n as DelegateMixin, t as CustomMediaMixin } from "../proxy-dR7IDk37.js";
 
-//#endregion
-//#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 `MediaProxyMixin`.
-*/
-function MediaDelegateMixin(BaseClass, DelegateClass) {
-	class DelegateMedia 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(DelegateMedia, proto);
-	return DelegateMedia;
-}
-
-//#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$1 = [
-	"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: transform var(--media-caption-track-duration, 0) ease-out;
-        transition-delay: var(--media-caption-track-delay, 0);
-        transform: translateY(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$1;
-		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 ../utils/dist/dom/listen.js
-function listen(target, type, listener, options) {
-	target.addEventListener(type, listener, options);
-	return () => target.removeEventListener(type, listener, options);
-}
-
-//#endregion
 //#region ../../node_modules/.pnpm/hls.js@1.6.15/node_modules/hls.js/dist/hls.mjs
 const isFiniteNumber = Number.isFinite || function(value) {
 	return typeof value === "number" && isFinite(value);
@@ -28686,11 +28321,11 @@ var HlsMediaDelegateBase = class {
 	}
 };
 const HlsMediaDelegate = HlsMediaTextTracksMixin(HlsMediaDelegateBase);
-var HlsCustomMedia = class extends MediaDelegateMixin(CustomMediaMixin(globalThis.HTMLElement ?? class {}, { tag: "video" }), HlsMediaDelegate) {};
+var HlsCustomMedia = class extends DelegateMixin(CustomMediaMixin(globalThis.HTMLElement ?? class {}, { tag: "video" }), HlsMediaDelegate) {};
 
 //#endregion
 //#region src/media/hls-video/index.ts
-var HlsVideo = class extends HlsCustomMedia {
+var HlsVideo = class extends MediaAttachMixin(HlsCustomMedia) {
 	static getTemplateHTML(attrs) {
 		const { src, ...rest } = attrs;
 		return super.getTemplateHTML(rest);
@@ -28709,13 +28344,6 @@ var HlsVideo = class extends HlsCustomMedia {
 	}
 };
 
-//#endregion
-//#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
 //#region src/define/media/hls-video.ts
 var HlsVideoElement = class extends HlsVideo {