import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
import { namedNodeMapToObject } from "@videojs/utils/dom";

//#region src/media/background-video/index.ts
function getTemplateHTML(attrs) {
	return `<style> :host { position: relative; } video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--media-object-fit, inherit); object-position: var(--media-object-position, 50% 50%); } </style><slot></slot><video ${serializeAttributes(attrs)}></video>`;
}
var BackgroundVideo = class extends MediaAttachMixin(HTMLElement) {
	static {
		this.shadowRootOptions = { mode: "open" };
	}
	static {
		this.getTemplateHTML = getTemplateHTML;
	}
	static get observedAttributes() {
		return ["src"];
	}
	constructor() {
		super();
		if (!this.shadowRoot) {
			this.attachShadow(this.constructor.shadowRootOptions);
			const attrs = {
				...namedNodeMapToObject(this.attributes),
				...!this.hasAttribute("nomuted") && { muted: "" },
				...!this.hasAttribute("noloop") && { loop: "" },
				...!this.hasAttribute("noautoplay") && { autoplay: "" },
				playsinline: "",
				disableremoteplayback: "",
				disablepictureinpicture: ""
			};
			this.shadowRoot.innerHTML = getTemplateHTML(attrs);
		}
		this.target.muted = !this.hasAttribute("nomuted");
	}
	getMediaTarget() {
		return this.target;
	}
	attributeChangedCallback(attrName, oldValue, newValue) {
		if (attrName === "src" && oldValue !== newValue) this.target.src = newValue ?? "";
	}
	get target() {
		return this.querySelector(":scope > [slot=media]") ?? this.querySelector("video") ?? this.shadowRoot?.querySelector("video") ?? null;
	}
};
const VideoAttributes = [
	"autoplay",
	"controls",
	"controlslist",
	"crossorigin",
	"disablepictureinpicture",
	"disableremoteplayback",
	"loop",
	"muted",
	"playsinline",
	"preload"
];
function serializeAttributes(attrs) {
	let html = "";
	for (const key in attrs) {
		if (!VideoAttributes.includes(key)) continue;
		const value = attrs[key];
		if (value === "") html += ` ${key}`;
		else html += ` ${key}="${value}"`;
	}
	return html;
}

//#endregion
export { BackgroundVideo };
//# sourceMappingURL=index.js.map