maplair/dist/esm/layer/VideoOverlay.js

JavaScript library for mobile-friendly interactive maps

import { splitWords } from "../core/Util.js";
import { on, stopPropagation } from "../dom/DomEvent.js";
import { create } from "../dom/DomUtil.js";
import { ImageOverlay } from "./ImageOverlay.js";
//#region src/layer/VideoOverlay.js
var VideoOverlay = class VideoOverlay extends ImageOverlay {
	static {
		this.setDefaultOptions({
			autoplay: true,
			controls: false,
			loop: true,
			keepAspectRatio: true,
			muted: false,
			playsInline: true
		});
	}
	constructor(...args) {
		super(...args);
		this.callInitHooks(VideoOverlay);
	}
	_initImage() {
		const wasElementSupplied = this._url.tagName === "VIDEO";
		const vid = this._image = wasElementSupplied ? this._url : create("video");
		vid.classList.add("maplair-image-layer");
		if (this._zoomAnimated) vid.classList.add("maplair-zoom-animated");
		if (this.options.className) vid.classList.add(...splitWords(this.options.className));
		on(vid, "pointerdown", (e) => {
			if (vid.controls) stopPropagation(e);
		});
		vid.onloadeddata = this.fire.bind(this, "load");
		if (wasElementSupplied) {
			const sourceElements = vid.getElementsByTagName("source");
			const sources = sourceElements.map((e) => e.src);
			this._url = sourceElements.length > 0 ? sources : [vid.src];
			return;
		}
		if (!Array.isArray(this._url)) this._url = [this._url];
		if (!this.options.keepAspectRatio && Object.hasOwn(vid.style, "objectFit")) vid.style["objectFit"] = "fill";
		vid.autoplay = !!this.options.autoplay;
		vid.controls = !!this.options.controls;
		vid.loop = !!this.options.loop;
		vid.muted = !!this.options.muted;
		vid.playsInline = !!this.options.playsInline;
		for (const url of this._url) {
			const source = create("source");
			source.src = url;
			vid.appendChild(source);
		}
	}
};
//#endregion
export { VideoOverlay };

//# sourceMappingURL=VideoOverlay.js.map