import { R as backgroundFeatures, a as MediaElement, i as MediaContainerElement, o as ReactiveElement, t as createPlayer } from "./create-player-Dv7K1Ezk.js";
import { t as safeDefine } from "./safe-define-B8lHgj_K.js";
import { t as MediaAttachMixin } from "./media-attach-mixin-ChyNp2eK.js";

//#region ../utils/dist/dom/attributes.js
function namedNodeMapToObject(namedNodeMap) {
	const obj = {};
	for (const attr of namedNodeMap) obj[attr.name] = attr.value;
	return obj;
}

//#endregion
//#region src/define/background/player.ts
const { ProviderMixin } = createPlayer({ features: backgroundFeatures });
var BackgroundVideoPlayerElement = class extends ProviderMixin(MediaElement) {
	static {
		this.tagName = "background-video-player";
	}
};
safeDefine(BackgroundVideoPlayerElement);
safeDefine(MediaContainerElement);

//#endregion
//#region src/define/background/skin.ts
function getTemplateHTML$1(_attrs) {
	return `
    <media-container>
      <!-- @deprecated slot="media" is no longer required, use the default slot instead -->
      <slot name="media"></slot>
      <slot></slot>
    </media-container>
  `;
}
var BackgroundVideoSkinElement = class extends ReactiveElement {
	static {
		this.tagName = "background-video-skin";
	}
	static {
		this.shadowRootOptions = { mode: "open" };
	}
	static {
		this.getTemplateHTML = getTemplateHTML$1;
	}
	constructor() {
		super();
		if (!this.shadowRoot) {
			this.attachShadow(this.constructor.shadowRootOptions);
			this.shadowRoot.innerHTML = getTemplateHTML$1(namedNodeMapToObject(this.attributes));
		}
	}
};
safeDefine(BackgroundVideoSkinElement);

//#endregion
//#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
//#region src/define/media/background-video.ts
var BackgroundVideoElement = class extends BackgroundVideo {
	static {
		this.tagName = "background-video";
	}
};
safeDefine(BackgroundVideoElement);

//#endregion
//# sourceMappingURL=background.dev.js.map