@smartimpact-it/modern-video-embed 2.0.5 → 2.0.7

package/dist/components/VideoEmbed.js

@@ -0,0 +1,786 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _VideoEmbed_url, _VideoEmbed_loop, _VideoEmbed_preload;
+import { BaseVideoEmbed } from "./BaseVideoEmbed.js";
+export class VideoEmbed extends BaseVideoEmbed {
+    constructor() {
+        super(...arguments);
+        this.video = null;
+        // Video-specific properties
+        _VideoEmbed_url.set(this, "");
+        _VideoEmbed_loop.set(this, false);
+        _VideoEmbed_preload.set(this, "metadata");
+    }
+    static get observedAttributes() {
+        return [
+            "url",
+            "autoplay",
+            "controls",
+            "lazy",
+            "muted",
+            "poster",
+            "background",
+            "loop",
+            "preload",
+        ];
+    }
+    getComponentName() {
+        return "VideoEmbed";
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (this.updatingAttribute) {
+            return;
+        }
+        this.log(`Attribute changed - ${name}: ${oldValue} -> ${newValue}`);
+        switch (name) {
+            case "url":
+                __classPrivateFieldSet(this, _VideoEmbed_url, newValue || "", "f");
+                if (this.initialized) {
+                    this.reinitializePlayer();
+                }
+                break;
+            case "autoplay":
+                this._autoplay = newValue !== null;
+                if (!this._playing &&
+                    this._autoplay &&
+                    !this._lazy &&
+                    this.initialized) {
+                    this.play();
+                }
+                break;
+            case "controls":
+                this._controls = newValue !== null;
+                if (this.video) {
+                    this.video.controls = this._controls;
+                }
+                break;
+            case "lazy":
+                this._lazy = newValue !== null;
+                break;
+            case "muted":
+                this._muted = newValue !== null;
+                if (this.video) {
+                    this.video.muted = this._muted;
+                }
+                break;
+            case "poster":
+                this._poster = newValue || "";
+                if (this._lazy && !this.video) {
+                    this.showPoster();
+                }
+                else if (this.video) {
+                    this.video.poster = this._poster;
+                }
+                break;
+            case "background":
+                this._background = newValue !== null;
+                this.updateBackgroundMode();
+                break;
+            case "loop":
+                __classPrivateFieldSet(this, _VideoEmbed_loop, newValue !== null, "f");
+                if (this.video) {
+                    this.video.loop = __classPrivateFieldGet(this, _VideoEmbed_loop, "f");
+                }
+                break;
+            case "preload":
+                const validPreloadValues = [
+                    "none",
+                    "metadata",
+                    "auto",
+                    "",
+                ];
+                __classPrivateFieldSet(this, _VideoEmbed_preload, validPreloadValues.indexOf(newValue) !== -1
+                    ? newValue
+                    : "metadata", "f");
+                if (this.video) {
+                    this.video.preload = __classPrivateFieldGet(this, _VideoEmbed_preload, "f");
+                }
+                break;
+        }
+    }
+    // Getters and setters
+    get url() {
+        return __classPrivateFieldGet(this, _VideoEmbed_url, "f");
+    }
+    set url(value) {
+        __classPrivateFieldSet(this, _VideoEmbed_url, value, "f");
+        this.reflectAttribute("url", value);
+        if (this.initialized) {
+            this.reinitializePlayer();
+        }
+    }
+    get autoplay() {
+        return this._autoplay;
+    }
+    set autoplay(value) {
+        this._autoplay = value;
+        this.reflectBooleanAttribute("autoplay", value);
+        if (!this._playing && value && !this._lazy && this.initialized) {
+            this.play();
+        }
+    }
+    get controls() {
+        return this._controls;
+    }
+    set controls(value) {
+        // Background mode videos must not have controls
+        if (this._background && value) {
+            this.warn("Cannot enable controls on background video");
+            return;
+        }
+        this._controls = value;
+        this.reflectBooleanAttribute("controls", value);
+        if (this.video) {
+            this.video.controls = value;
+        }
+    }
+    get lazy() {
+        return this._lazy;
+    }
+    set lazy(value) {
+        this._lazy = value;
+        this.reflectBooleanAttribute("lazy", value);
+    }
+    get muted() {
+        return this._muted;
+    }
+    set muted(value) {
+        // Background mode videos must be muted
+        if (this._background && !value) {
+            this.warn("Cannot unmute background video");
+            return;
+        }
+        this._muted = value;
+        this.reflectBooleanAttribute("muted", value);
+        if (this.video) {
+            this.video.muted = value;
+        }
+    }
+    get poster() {
+        return this._poster;
+    }
+    set poster(value) {
+        this._poster = value;
+        this.reflectAttribute("poster", value);
+        if (this._lazy && !this.video) {
+            this.showPoster();
+        }
+        else if (this.video) {
+            this.video.poster = value;
+        }
+    }
+    get playing() {
+        return this._playing;
+    }
+    get background() {
+        return this._background;
+    }
+    set background(value) {
+        this._background = value;
+        this.reflectBooleanAttribute("background", value);
+        this.updateBackgroundMode();
+    }
+    get loop() {
+        return __classPrivateFieldGet(this, _VideoEmbed_loop, "f");
+    }
+    set loop(value) {
+        __classPrivateFieldSet(this, _VideoEmbed_loop, value, "f");
+        this.reflectBooleanAttribute("loop", value);
+        if (this.video) {
+            this.video.loop = value;
+        }
+    }
+    get preload() {
+        return __classPrivateFieldGet(this, _VideoEmbed_preload, "f");
+    }
+    set preload(value) {
+        __classPrivateFieldSet(this, _VideoEmbed_preload, value, "f");
+        this.reflectAttribute("preload", value);
+        if (this.video) {
+            this.video.preload = value;
+        }
+    }
+    // Implement abstract methods
+    handlePlay() {
+        if (this.video) {
+            this.video.play().catch((error) => {
+                this.warn("Play failed:", error);
+            });
+        }
+    }
+    handlePause() {
+        if (this.video) {
+            this.video.pause();
+        }
+    }
+    handleRetry() {
+        if (__classPrivateFieldGet(this, _VideoEmbed_url, "f")) {
+            this.initializePlayer();
+        }
+    }
+    setupFullscreenListener() {
+        const handleFullscreenChange = (event) => {
+            if (!event.isTrusted)
+                return;
+            const doc = document;
+            const fullscreenElement = doc.fullscreenElement ||
+                doc.webkitFullscreenElement ||
+                doc.mozFullScreenElement ||
+                doc.msFullscreenElement;
+            const isFullscreen = fullscreenElement === this || fullscreenElement === this.video;
+            const wasFullscreen = this.classList.contains("is-fullscreen");
+            if (isFullscreen !== wasFullscreen) {
+                this.dispatchEvent(new CustomEvent("fullscreenchange", {
+                    detail: { isFullscreen },
+                    bubbles: false,
+                    composed: false,
+                }));
+                if (isFullscreen) {
+                    this.classList.add("is-fullscreen");
+                }
+                else {
+                    this.classList.remove("is-fullscreen");
+                }
+            }
+        };
+        document.addEventListener("fullscreenchange", handleFullscreenChange);
+        document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
+        document.addEventListener("mozfullscreenchange", handleFullscreenChange);
+        document.addEventListener("MSFullscreenChange", handleFullscreenChange);
+    }
+    setupKeyboardHandlers() {
+        this.keyboardHandler = (e) => {
+            var _a;
+            if (!this.playerReady || ((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "INPUT") {
+                return;
+            }
+            switch (e.key.toLowerCase()) {
+                case "k":
+                case " ":
+                    e.preventDefault();
+                    this.togglePlay();
+                    this.announceToScreenReader(this._playing ? "Video playing" : "Video paused");
+                    break;
+                case "m":
+                    e.preventDefault();
+                    this.toggleMute();
+                    this.announceToScreenReader(this._muted ? "Video muted" : "Video unmuted");
+                    break;
+                case "f":
+                    e.preventDefault();
+                    if (document.fullscreenElement) {
+                        document.exitFullscreen().catch((error) => {
+                            this.warn("Exit fullscreen failed:", error);
+                        });
+                        this.announceToScreenReader("Exited fullscreen");
+                    }
+                    else {
+                        this.enterFullscreen()
+                            .then(() => {
+                            this.announceToScreenReader("Entered fullscreen");
+                        })
+                            .catch((error) => {
+                            this.warn("Enter fullscreen failed:", error);
+                            this.announceToScreenReader("Fullscreen not available");
+                        });
+                    }
+                    break;
+            }
+        };
+        this.addEventListener("keydown", this.keyboardHandler);
+    }
+    showPoster() {
+        const posterUrl = this._poster || "";
+        this.log("Using poster URL:", posterUrl);
+        this.innerHTML = "";
+        // Create poster image if URL is provided
+        if (posterUrl) {
+            const poster = document.createElement("img");
+            poster.src = posterUrl;
+            poster.alt = "Video thumbnail";
+            poster.classList.add("video-poster");
+            poster.loading = "lazy";
+            // Add error handling for poster loading
+            poster.onerror = () => {
+                this.warn("VideoEmbed: Poster failed to load.");
+                poster.style.display = "none";
+                this.style.backgroundColor = "#000000";
+            };
+            this.appendChild(poster);
+        }
+        else {
+            // Create a placeholder div if no poster URL
+            const poster = document.createElement("div");
+            poster.classList.add("video-poster");
+            poster.setAttribute("role", "img");
+            poster.setAttribute("aria-label", "Video thumbnail");
+            poster.style.backgroundColor = "#000000";
+            this.appendChild(poster);
+        }
+        const buttonOverlay = document.createElement("div");
+        buttonOverlay.classList.add("button-overlay");
+        buttonOverlay.setAttribute("role", "button");
+        buttonOverlay.setAttribute("tabindex", "0");
+        buttonOverlay.setAttribute("aria-label", "Play video");
+        const button = document.createElement("div");
+        button.classList.add("button");
+        button.setAttribute("aria-hidden", "true");
+        buttonOverlay.appendChild(button);
+        const loadVideo = () => {
+            this.log("Loading video from poster click");
+            this.setAttribute("data-poster-autoplay", "true");
+            try {
+                this.initializePlayer();
+            }
+            catch (error) {
+                this.error("Error initializing player from poster:", error);
+                this.dispatchCustomEvent("error", { message: "Failed to load video" });
+            }
+        };
+        this.posterClickHandler = loadVideo;
+        const keyboardActivate = (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                loadVideo(e);
+            }
+        };
+        const posterElement = this.querySelector(".video-poster");
+        if (posterElement) {
+            posterElement.addEventListener("click", loadVideo);
+        }
+        buttonOverlay.addEventListener("click", loadVideo);
+        buttonOverlay.addEventListener("keydown", keyboardActivate);
+        this.appendChild(buttonOverlay);
+        this.log("Poster displayed for lazy loading");
+    }
+    initializePlayer() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.log("Initializing player for URL:", __classPrivateFieldGet(this, _VideoEmbed_url, "f"));
+            const isBackground = this._background;
+            const autoplay = isBackground ||
+                this.hasAttribute("autoplay") ||
+                this.hasAttribute("data-poster-autoplay") ||
+                this.hasAttribute("data-should-autoplay");
+            const controls = isBackground ? false : this.hasAttribute("controls");
+            const mute = isBackground || autoplay;
+            if (this.hasAttribute("data-poster-autoplay")) {
+                this.removeAttribute("data-poster-autoplay");
+            }
+            if (this.hasAttribute("data-should-autoplay")) {
+                this.removeAttribute("data-should-autoplay");
+            }
+            if (autoplay && !this._muted) {
+                this._muted = true;
+                this.log("Autoplay enabled, forcing muted state for compliance");
+            }
+            this.innerHTML = "";
+            this.video = document.createElement("video");
+            this.video.style.objectFit = this._background ? "cover" : "contain";
+            this.video.src = __classPrivateFieldGet(this, _VideoEmbed_url, "f");
+            this.video.controls = controls;
+            this.video.autoplay = autoplay;
+            this.video.muted = mute || this._muted;
+            this.video.loop = __classPrivateFieldGet(this, _VideoEmbed_loop, "f");
+            this.video.preload = __classPrivateFieldGet(this, _VideoEmbed_preload, "f");
+            this.video.playsInline = true;
+            if (this._poster) {
+                this.video.poster = this._poster;
+            }
+            this.setupVideoEvents();
+            this.appendChild(this.video);
+            if (!controls) {
+                this.addCustomControls("video-embed-container");
+            }
+            this.playerReady = true;
+            this.dispatchCustomEvent("ready", {
+                url: __classPrivateFieldGet(this, _VideoEmbed_url, "f"),
+                muted: this._muted,
+            });
+            if (autoplay) {
+                this.video.play().catch((error) => {
+                    this.warn("Autoplay failed:", error);
+                    this.dispatchCustomEvent("error", {
+                        message: "Autoplay failed",
+                        error,
+                    });
+                });
+            }
+        });
+    }
+    reinitializePlayer() {
+        if (!this.initialized || !__classPrivateFieldGet(this, _VideoEmbed_url, "f")) {
+            return;
+        }
+        if (this.video) {
+            this.video.pause();
+            this.video.remove();
+            this.video = null;
+        }
+        this.playerReady = false;
+        this._playing = false;
+        this.classList.remove("is-playing");
+        if (this._lazy) {
+            this.showPoster();
+        }
+        else {
+            this.initializePlayer();
+        }
+    }
+    destroyPlayer() {
+        if (this.video) {
+            this.video.pause();
+            this.video.src = "";
+            this.video.load();
+            this.video = null;
+        }
+    }
+    setupVideoEvents() {
+        if (!this.video)
+            return;
+        this.video.addEventListener("play", () => {
+            var _a;
+            this._playing = true;
+            this.classList.add("is-playing");
+            if (this.setCustomControlState) {
+                this.setCustomControlState(true);
+            }
+            this.dispatchCustomEvent("play", {
+                url: __classPrivateFieldGet(this, _VideoEmbed_url, "f"),
+                currentTime: ((_a = this.video) === null || _a === void 0 ? void 0 : _a.currentTime) || 0,
+            });
+        });
+        this.video.addEventListener("pause", () => {
+            var _a;
+            this._playing = false;
+            this.classList.remove("is-playing");
+            if (this.setCustomControlState) {
+                this.setCustomControlState(false);
+            }
+            this.dispatchCustomEvent("pause", {
+                url: __classPrivateFieldGet(this, _VideoEmbed_url, "f"),
+                currentTime: ((_a = this.video) === null || _a === void 0 ? void 0 : _a.currentTime) || 0,
+            });
+        });
+        this.video.addEventListener("ended", () => {
+            this._playing = false;
+            this.classList.remove("is-playing");
+            if (this.setCustomControlState) {
+                this.setCustomControlState(false);
+            }
+            this.dispatchCustomEvent("ended", {
+                url: __classPrivateFieldGet(this, _VideoEmbed_url, "f"),
+            });
+        });
+        this.video.addEventListener("timeupdate", () => {
+            var _a, _b;
+            this.dispatchCustomEvent("timeupdate", {
+                url: __classPrivateFieldGet(this, _VideoEmbed_url, "f"),
+                currentTime: ((_a = this.video) === null || _a === void 0 ? void 0 : _a.currentTime) || 0,
+                duration: ((_b = this.video) === null || _b === void 0 ? void 0 : _b.duration) || 0,
+            });
+        });
+        this.video.addEventListener("volumechange", () => {
+            var _a, _b;
+            this._muted = ((_a = this.video) === null || _a === void 0 ? void 0 : _a.muted) || false;
+            this.dispatchCustomEvent("volumechange", {
+                muted: this._muted,
+                volume: ((_b = this.video) === null || _b === void 0 ? void 0 : _b.volume) || 0,
+            });
+        });
+        this.video.addEventListener("error", (e) => {
+            this.error("Video error:", e);
+            this.dispatchCustomEvent("error", {
+                message: "Video playback error",
+                error: e,
+            });
+            this.showErrorMessage("Failed to load video. Please check the URL or try again later.", "video-error-message");
+        });
+        this.video.addEventListener("loadedmetadata", () => {
+            var _a, _b, _c;
+            const width = ((_a = this.video) === null || _a === void 0 ? void 0 : _a.videoWidth) || 0;
+            const height = ((_b = this.video) === null || _b === void 0 ? void 0 : _b.videoHeight) || 0;
+            // Automatically set aspect ratio CSS custom properties
+            if (width > 0 && height > 0) {
+                this.setAspectRatio(width, height);
+            }
+            this.dispatchCustomEvent("loadedmetadata", {
+                duration: ((_c = this.video) === null || _c === void 0 ? void 0 : _c.duration) || 0,
+                videoWidth: width,
+                videoHeight: height,
+            });
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const urlAttr = this.getAttribute("url");
+        if (urlAttr) {
+            __classPrivateFieldSet(this, _VideoEmbed_url, urlAttr, "f");
+        }
+        this._autoplay = this.hasAttribute("autoplay");
+        this._controls = this.hasAttribute("controls");
+        this._lazy = this.hasAttribute("lazy");
+        this._muted = this.hasAttribute("muted");
+        this._background = this.hasAttribute("background");
+        __classPrivateFieldSet(this, _VideoEmbed_loop, this.hasAttribute("loop"), "f");
+        this._poster = this.getAttribute("poster") || "";
+        const preloadAttr = this.getAttribute("preload");
+        __classPrivateFieldSet(this, _VideoEmbed_preload, preloadAttr === "none" ||
+            preloadAttr === "metadata" ||
+            preloadAttr === "auto"
+            ? preloadAttr
+            : "metadata", "f");
+        if (!__classPrivateFieldGet(this, _VideoEmbed_url, "f")) {
+            this.error("Missing video URL");
+            this.dispatchCustomEvent("error", {
+                message: "Missing video URL",
+            });
+            return;
+        }
+        this.classList.add("video-embed-wrapper");
+        this.setAttribute("role", "region");
+        this.setAttribute("aria-label", "Video player");
+        if (!this.hasAttribute("tabindex")) {
+            this.setAttribute("tabindex", "0");
+        }
+        this.ariaLiveRegion = document.createElement("div");
+        this.ariaLiveRegion.setAttribute("aria-live", "polite");
+        this.ariaLiveRegion.setAttribute("aria-atomic", "true");
+        this.ariaLiveRegion.className = "sr-only";
+        this.ariaLiveRegion.style.cssText =
+            "position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;";
+        this.appendChild(this.ariaLiveRegion);
+        this.setupKeyboardHandlers();
+        this.setupFullscreenListener();
+        this.updateBackgroundMode();
+        if (this._lazy) {
+            this.showPoster();
+            this.setupLazyLoading(() => {
+                const shouldAutoplay = this.getAttribute("data-poster-autoplay") === "true";
+                if (!shouldAutoplay) {
+                    this.initializePlayer();
+                }
+            });
+        }
+        else {
+            this.initializePlayer();
+        }
+        this.initialized = true;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        const poster = this.querySelector(".video-poster");
+        const buttonOverlay = this.querySelector(".button-overlay");
+        if (poster && this.posterClickHandler) {
+            poster.removeEventListener("click", this.posterClickHandler);
+        }
+        if (buttonOverlay && this.posterClickHandler) {
+            buttonOverlay.removeEventListener("click", this.posterClickHandler);
+        }
+        this.innerHTML = "";
+        this.classList.remove("video-embed-wrapper", "video-embed-container", "is-playing");
+        this.log("Cleanup complete.");
+    }
+    // Public API methods
+    play() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._lazy && !this.video) {
+                this.log("Lazy video needs to be loaded first. Initializing...");
+                this.setAttribute("data-should-autoplay", "true");
+                yield this.initializePlayer();
+                yield new Promise((resolve) => setTimeout(resolve, 500));
+            }
+            this.removeAttribute("data-should-autoplay");
+            if (this.video) {
+                try {
+                    yield this.video.play();
+                    this.log("Video playback started.");
+                }
+                catch (error) {
+                    this.warn("Play failed:", error);
+                    this.dispatchCustomEvent("error", {
+                        message: "Failed to play video",
+                        error,
+                    });
+                }
+            }
+        });
+    }
+    pause() {
+        if (this.video) {
+            this.video.pause();
+            this.log("Video paused.");
+        }
+    }
+    stopVideo() {
+        if (this.video) {
+            this.video.pause();
+            this.video.currentTime = 0;
+            this.log("Video stopped.");
+            this.dispatchCustomEvent("stop", {
+                url: __classPrivateFieldGet(this, _VideoEmbed_url, "f"),
+            });
+        }
+    }
+    mute() {
+        this._muted = true;
+        this.reflectBooleanAttribute("muted", true);
+        if (this.video) {
+            this.video.muted = true;
+        }
+        this.log("Video muted.");
+    }
+    unmute() {
+        this._muted = false;
+        this.reflectBooleanAttribute("muted", false);
+        if (this.video) {
+            this.video.muted = false;
+        }
+        this.log("Video unmuted.");
+    }
+    togglePlay() {
+        if (this._playing) {
+            this.pause();
+        }
+        else {
+            this.play();
+        }
+    }
+    toggleMute() {
+        if (this._muted) {
+            this.unmute();
+        }
+        else {
+            this.mute();
+        }
+    }
+    loadVideo(url) {
+        if (url) {
+            __classPrivateFieldSet(this, _VideoEmbed_url, url, "f");
+            this.reflectAttribute("url", url);
+        }
+        if (this._lazy && !this.video) {
+            this.initializePlayer();
+            return;
+        }
+        if (this.initialized) {
+            this.reinitializePlayer();
+        }
+    }
+    getPlayerState() {
+        return {
+            playing: this._playing,
+            muted: this._muted,
+            url: __classPrivateFieldGet(this, _VideoEmbed_url, "f"),
+            ready: this.playerReady,
+            initialized: this.initialized,
+        };
+    }
+    getCurrentTime() {
+        var _a;
+        return ((_a = this.video) === null || _a === void 0 ? void 0 : _a.currentTime) || 0;
+    }
+    getDuration() {
+        var _a;
+        return ((_a = this.video) === null || _a === void 0 ? void 0 : _a.duration) || 0;
+    }
+    setCurrentTime(time) {
+        if (this.video) {
+            this.video.currentTime = time;
+        }
+    }
+    setVolume(volume) {
+        if (this.video) {
+            this.video.volume = Math.max(0, Math.min(1, volume));
+        }
+    }
+    getVolume() {
+        var _a;
+        return ((_a = this.video) === null || _a === void 0 ? void 0 : _a.volume) || 0;
+    }
+    isPlaying() {
+        return this._playing;
+    }
+    isMuted() {
+        return this._muted;
+    }
+    enterFullscreen() {
+        const elem = (this.video || this);
+        if (elem.requestFullscreen) {
+            return elem.requestFullscreen();
+        }
+        else if (elem.webkitRequestFullscreen) {
+            return elem.webkitRequestFullscreen();
+        }
+        else if (elem.mozRequestFullScreen) {
+            return elem.mozRequestFullScreen();
+        }
+        else if (elem.msRequestFullscreen) {
+            return elem.msRequestFullscreen();
+        }
+        return Promise.reject(new Error("Fullscreen API not supported"));
+    }
+    exitFullscreen() {
+        const doc = document;
+        if (doc.exitFullscreen) {
+            return doc.exitFullscreen();
+        }
+        else if (doc.webkitExitFullscreen) {
+            return doc.webkitExitFullscreen();
+        }
+        else if (doc.mozCancelFullScreen) {
+            return doc.mozCancelFullScreen();
+        }
+        else if (doc.msExitFullscreen) {
+            return doc.msExitFullscreen();
+        }
+        return Promise.reject(new Error("Fullscreen API not supported"));
+    }
+    toggleFullscreen() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                if (this.isFullscreen()) {
+                    yield this.exitFullscreen();
+                }
+                else {
+                    yield this.enterFullscreen();
+                }
+            }
+            catch (error) {
+                this.warn("Toggle fullscreen failed:", error);
+                throw error;
+            }
+        });
+    }
+    isFullscreen() {
+        const doc = document;
+        const fullscreenElement = doc.fullscreenElement ||
+            doc.webkitFullscreenElement ||
+            doc.mozFullScreenElement ||
+            doc.msFullscreenElement;
+        return fullscreenElement === this || fullscreenElement === this.video;
+    }
+    static toggleDebug(forceState) {
+        BaseVideoEmbed.toggleDebug(forceState);
+    }
+}
+_VideoEmbed_url = new WeakMap(), _VideoEmbed_loop = new WeakMap(), _VideoEmbed_preload = new WeakMap();
+customElements.define("video-embed", VideoEmbed);
+//# sourceMappingURL=VideoEmbed.js.map