@smartimpact-it/modern-video-embed 2.0.1

package/dist/components/VimeoEmbed.js

@@ -0,0 +1,1176 @@
+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 _VimeoEmbed_instances, _VimeoEmbed_url, _VimeoEmbed_videoId, _VimeoEmbed_autoplay, _VimeoEmbed_muted, _VimeoEmbed_controls, _VimeoEmbed_lazy, _VimeoEmbed_poster, _VimeoEmbed_playing, _VimeoEmbed_background, _VimeoEmbed_playerVars, _VimeoEmbed_reflectBooleanAttribute, _VimeoEmbed_updateBackgroundMode;
+export class VimeoEmbed extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _VimeoEmbed_instances.add(this);
+        this.iframe = null;
+        this.player = null; // Vimeo Player instance
+        this.playerReady = false;
+        this.playPauseButton = null;
+        this.initialized = false;
+        this.setCustomControlState = null;
+        this.updatingAttribute = false;
+        this.updatingMutedState = false; // Flag to prevent sync from overwriting programmatic mute changes
+        /** The full Vimeo URL (e.g., "https://vimeo.com/...") */
+        _VimeoEmbed_url.set(this, "");
+        /** The Vimeo video ID (numeric). */
+        _VimeoEmbed_videoId.set(this, "");
+        /** Whether the video should autoplay when loaded. Requires `muted` to be true. */
+        _VimeoEmbed_autoplay.set(this, false);
+        /** Whether the video audio is muted. */
+        _VimeoEmbed_muted.set(this, false);
+        /** Whether to show the native Vimeo player controls. */
+        _VimeoEmbed_controls.set(this, false);
+        /** Whether to lazy-load the video, showing a poster image until interaction. */
+        _VimeoEmbed_lazy.set(this, false);
+        /** URL for a custom poster image. Defaults to Vimeo's thumbnail. */
+        _VimeoEmbed_poster.set(this, "");
+        /** Read-only property to check if the video is currently playing. */
+        _VimeoEmbed_playing.set(this, false);
+        /** Whether the video should act as a background, covering its container. */
+        _VimeoEmbed_background.set(this, false);
+        /** Extra parameters to pass to the Vimeo player. */
+        _VimeoEmbed_playerVars.set(this, {});
+        this.posterClickHandler = null;
+        this.keyboardHandler = null;
+        this.ariaLiveRegion = null;
+        this.apiLoadRetries = 0;
+        this.intersectionObserver = null;
+        this.hasLoadedVideo = false;
+    }
+    static get observedAttributes() {
+        return [
+            "url",
+            "video-id",
+            "autoplay",
+            "controls",
+            "lazy",
+            "muted",
+            "poster",
+            "background",
+            "player-vars",
+            "quality",
+        ];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (this.updatingAttribute) {
+            return;
+        }
+        this.log(`VimeoEmbed: Attribute changed - ${name}: ${oldValue} -> ${newValue}`);
+        switch (name) {
+            case "url":
+                __classPrivateFieldSet(this, _VimeoEmbed_url, newValue || "", "f");
+                __classPrivateFieldSet(this, _VimeoEmbed_videoId, this.extractVideoId(__classPrivateFieldGet(this, _VimeoEmbed_url, "f")), "f");
+                if (this.initialized) {
+                    this.reinitializePlayer();
+                }
+                break;
+            case "video-id":
+                __classPrivateFieldSet(this, _VimeoEmbed_videoId, newValue || "", "f");
+                if (this.initialized) {
+                    this.reinitializePlayer();
+                }
+                break;
+            case "autoplay":
+                __classPrivateFieldSet(this, _VimeoEmbed_autoplay, newValue !== null, "f");
+                if (!__classPrivateFieldGet(this, _VimeoEmbed_playing, "f") &&
+                    __classPrivateFieldGet(this, _VimeoEmbed_autoplay, "f") &&
+                    !__classPrivateFieldGet(this, _VimeoEmbed_lazy, "f") &&
+                    this.initialized) {
+                    this.play();
+                }
+                break;
+            case "controls":
+                __classPrivateFieldSet(this, _VimeoEmbed_controls, newValue !== null, "f");
+                if (this.initialized) {
+                    this.reinitializePlayer();
+                }
+                break;
+            case "lazy":
+                __classPrivateFieldSet(this, _VimeoEmbed_lazy, newValue !== null, "f");
+                break;
+            case "muted":
+                __classPrivateFieldSet(this, _VimeoEmbed_muted, newValue !== null, "f");
+                if (this.player && this.playerReady) {
+                    this.player.setVolume(__classPrivateFieldGet(this, _VimeoEmbed_muted, "f") ? 0 : 1);
+                }
+                break;
+            case "poster":
+                __classPrivateFieldSet(this, _VimeoEmbed_poster, newValue || "", "f");
+                if (__classPrivateFieldGet(this, _VimeoEmbed_lazy, "f") && !this.player) {
+                    this.showPoster(__classPrivateFieldGet(this, _VimeoEmbed_videoId, "f"));
+                }
+                break;
+            case "background":
+                __classPrivateFieldSet(this, _VimeoEmbed_background, newValue !== null, "f");
+                __classPrivateFieldGet(this, _VimeoEmbed_instances, "m", _VimeoEmbed_updateBackgroundMode).call(this);
+                break;
+            case "player-vars":
+                try {
+                    __classPrivateFieldSet(this, _VimeoEmbed_playerVars, newValue ? JSON.parse(newValue) : {}, "f");
+                }
+                catch (e) {
+                    this.error("VimeoEmbed: Invalid player-vars JSON:", e);
+                    __classPrivateFieldSet(this, _VimeoEmbed_playerVars, {}, "f");
+                }
+                if (this.initialized) {
+                    this.reinitializePlayer();
+                }
+                break;
+            case "quality":
+                if (newValue && this.player && this.playerReady) {
+                    this.setQuality(newValue);
+                }
+                break;
+        }
+    }
+    // Getters and setters for attributes
+    get url() {
+        return __classPrivateFieldGet(this, _VimeoEmbed_url, "f");
+    }
+    set url(value) {
+        __classPrivateFieldSet(this, _VimeoEmbed_url, value, "f");
+        __classPrivateFieldSet(this, _VimeoEmbed_videoId, this.extractVideoId(value), "f");
+        if (this.initialized) {
+            this.reinitializePlayer();
+        }
+    }
+    get videoId() {
+        return __classPrivateFieldGet(this, _VimeoEmbed_videoId, "f");
+    }
+    set videoId(value) {
+        __classPrivateFieldSet(this, _VimeoEmbed_videoId, value, "f");
+        if (this.initialized) {
+            this.reinitializePlayer();
+        }
+    }
+    get autoplay() {
+        return __classPrivateFieldGet(this, _VimeoEmbed_autoplay, "f");
+    }
+    set autoplay(value) {
+        __classPrivateFieldSet(this, _VimeoEmbed_autoplay, value, "f");
+        __classPrivateFieldGet(this, _VimeoEmbed_instances, "m", _VimeoEmbed_reflectBooleanAttribute).call(this, "autoplay", value);
+        if (!__classPrivateFieldGet(this, _VimeoEmbed_playing, "f") && value && !__classPrivateFieldGet(this, _VimeoEmbed_lazy, "f") && this.initialized) {
+            this.play();
+        }
+    }
+    get controls() {
+        return __classPrivateFieldGet(this, _VimeoEmbed_controls, "f");
+    }
+    set controls(value) {
+        __classPrivateFieldSet(this, _VimeoEmbed_controls, value, "f");
+        __classPrivateFieldGet(this, _VimeoEmbed_instances, "m", _VimeoEmbed_reflectBooleanAttribute).call(this, "controls", value);
+        if (this.initialized) {
+            this.reinitializePlayer();
+        }
+    }
+    get lazy() {
+        return __classPrivateFieldGet(this, _VimeoEmbed_lazy, "f");
+    }
+    set lazy(value) {
+        __classPrivateFieldSet(this, _VimeoEmbed_lazy, value, "f");
+        __classPrivateFieldGet(this, _VimeoEmbed_instances, "m", _VimeoEmbed_reflectBooleanAttribute).call(this, "lazy", value);
+    }
+    get muted() {
+        return __classPrivateFieldGet(this, _VimeoEmbed_muted, "f");
+    }
+    set muted(value) {
+        __classPrivateFieldSet(this, _VimeoEmbed_muted, value, "f");
+        __classPrivateFieldGet(this, _VimeoEmbed_instances, "m", _VimeoEmbed_reflectBooleanAttribute).call(this, "muted", value);
+        if (this.player && this.playerReady) {
+            this.updatingMutedState = true;
+            this.player.setVolume(value ? 0 : 1);
+            // Reset flag after a short delay to allow Vimeo API to process
+            setTimeout(() => {
+                this.updatingMutedState = false;
+            }, 100);
+        }
+    }
+    get poster() {
+        return __classPrivateFieldGet(this, _VimeoEmbed_poster, "f");
+    }
+    set poster(value) {
+        __classPrivateFieldSet(this, _VimeoEmbed_poster, value, "f");
+        this.updatingAttribute = true;
+        if (value) {
+            this.setAttribute("poster", value);
+        }
+        else {
+            this.removeAttribute("poster");
+        }
+        this.updatingAttribute = false;
+        if (__classPrivateFieldGet(this, _VimeoEmbed_lazy, "f") && !this.player) {
+            this.showPoster(__classPrivateFieldGet(this, _VimeoEmbed_videoId, "f"));
+        }
+    }
+    get playing() {
+        return __classPrivateFieldGet(this, _VimeoEmbed_playing, "f");
+    }
+    get background() {
+        return __classPrivateFieldGet(this, _VimeoEmbed_background, "f");
+    }
+    set background(value) {
+        __classPrivateFieldSet(this, _VimeoEmbed_background, value, "f");
+        __classPrivateFieldGet(this, _VimeoEmbed_instances, "m", _VimeoEmbed_reflectBooleanAttribute).call(this, "background", value);
+        __classPrivateFieldGet(this, _VimeoEmbed_instances, "m", _VimeoEmbed_updateBackgroundMode).call(this);
+    }
+    get playerVars() {
+        return __classPrivateFieldGet(this, _VimeoEmbed_playerVars, "f");
+    }
+    set playerVars(vars) {
+        __classPrivateFieldSet(this, _VimeoEmbed_playerVars, vars, "f");
+        this.setAttribute("player-vars", JSON.stringify(vars));
+        if (this.initialized) {
+            this.reinitializePlayer();
+        }
+    }
+    extractVideoId(url) {
+        if (!url)
+            return "";
+        // Handle various Vimeo URL formats
+        // https://vimeo.com/123456789
+        // https://player.vimeo.com/video/123456789
+        const regex = /(?:vimeo\.com\/(?:video\/)?|player\.vimeo\.com\/video\/)(\d+)/;
+        const match = url.match(regex);
+        if (match && match[1]) {
+            return match[1];
+        }
+        // If it's already just an ID (numeric)
+        if (/^\d+$/.test(url)) {
+            return url;
+        }
+        this.warn(`VimeoEmbed: Could not extract video ID from "${url}"`);
+        return "";
+    }
+    log(...args) {
+        if (VimeoEmbed.DEBUG) {
+            console.log("VimeoEmbed:", ...args);
+        }
+    }
+    warn(...args) {
+        console.warn(...args);
+    }
+    error(...args) {
+        console.error(...args);
+    }
+    dispatchCustomEvent(eventName, detail) {
+        this.dispatchEvent(new CustomEvent(eventName, {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    isValidPosterUrl(url) {
+        if (!url)
+            return false;
+        try {
+            new URL(url);
+            return true;
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+    /**
+     * Setup fullscreen change event listener
+     */
+    setupFullscreenListener() {
+        const handleFullscreenChange = () => {
+            const isFullscreen = this.isFullscreen();
+            this.dispatchCustomEvent("fullscreenchange", { isFullscreen });
+            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);
+    }
+    /**
+     * Setup keyboard event handlers for accessibility
+     */
+    setupKeyboardHandlers() {
+        this.keyboardHandler = (e) => {
+            var _a, _b;
+            // Only handle if player is ready and not in input element
+            if (!this.playerReady || ((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "INPUT") {
+                return;
+            }
+            switch (e.key.toLowerCase()) {
+                case "k":
+                case " ":
+                    // Play/Pause
+                    e.preventDefault();
+                    this.togglePlay();
+                    this.announceToScreenReader(__classPrivateFieldGet(this, _VimeoEmbed_playing, "f") ? "Video playing" : "Video paused");
+                    break;
+                case "m":
+                    // Mute/Unmute
+                    e.preventDefault();
+                    this.toggleMute();
+                    (_b = this.player) === null || _b === void 0 ? void 0 : _b.getMuted().then((muted) => {
+                        this.announceToScreenReader(muted ? "Video muted" : "Video unmuted");
+                    });
+                    break;
+                case "f":
+                    // Fullscreen toggle
+                    e.preventDefault();
+                    if (document.fullscreenElement) {
+                        document.exitFullscreen();
+                        this.announceToScreenReader("Exited fullscreen");
+                    }
+                    else if (this.enterFullscreen) {
+                        this.enterFullscreen();
+                        this.announceToScreenReader("Entered fullscreen");
+                    }
+                    break;
+            }
+        };
+        this.addEventListener("keydown", this.keyboardHandler);
+    }
+    /**
+     * Announce message to screen readers
+     */
+    announceToScreenReader(message) {
+        if (this.ariaLiveRegion) {
+            this.ariaLiveRegion.textContent = message;
+            // Clear after a brief delay
+            setTimeout(() => {
+                if (this.ariaLiveRegion) {
+                    this.ariaLiveRegion.textContent = "";
+                }
+            }, 1000);
+        }
+    }
+    /**
+     * Add preconnect and dns-prefetch hints for Vimeo domains
+     */
+    addResourceHints() {
+        const hints = [
+            { rel: "preconnect", href: "https://player.vimeo.com" },
+            { rel: "preconnect", href: "https://i.vimeocdn.com" },
+            { rel: "dns-prefetch", href: "https://player.vimeo.com" },
+            { rel: "dns-prefetch", href: "https://i.vimeocdn.com" },
+        ];
+        hints.forEach(({ rel, href }) => {
+            if (!document.querySelector(`link[rel="${rel}"][href="${href}"]`)) {
+                const link = document.createElement("link");
+                link.rel = rel;
+                link.href = href;
+                if (rel === "preconnect") {
+                    link.crossOrigin = "anonymous";
+                }
+                document.head.appendChild(link);
+            }
+        });
+    }
+    /**
+     * Setup Intersection Observer for lazy loading
+     */
+    setupIntersectionObserver() {
+        if (!("IntersectionObserver" in window)) {
+            // Fallback: load immediately if IntersectionObserver not supported
+            return;
+        }
+        const options = {
+            root: null,
+            rootMargin: "50px", // Start loading 50px before entering viewport
+            threshold: 0.01,
+        };
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && !this.hasLoadedVideo) {
+                    this.hasLoadedVideo = true;
+                    this.log("VimeoEmbed: Video entering viewport, loading...");
+                    // Check if poster was clicked before intersection
+                    const shouldAutoplay = this.getAttribute("data-poster-autoplay") === "true";
+                    if (!shouldAutoplay) {
+                        // Just load the player, don't autoplay
+                        this.initializePlayer(__classPrivateFieldGet(this, _VimeoEmbed_videoId, "f"));
+                    }
+                    // Disconnect observer after loading
+                    if (this.intersectionObserver) {
+                        this.intersectionObserver.disconnect();
+                    }
+                }
+            });
+        }, options);
+        this.intersectionObserver.observe(this);
+    }
+    /**
+     * Display error message to user with retry option
+     */
+    showErrorMessage(message) {
+        const errorDiv = document.createElement("div");
+        errorDiv.className = "vimeo-error-message";
+        errorDiv.setAttribute("role", "alert");
+        errorDiv.innerHTML = `
+      <div class="error-content">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10"></circle>
+          <line x1="12" y1="8" x2="12" y2="12"></line>
+          <line x1="12" y1="16" x2="12.01" y2="16"></line>
+        </svg>
+        <p class="error-message">${message}</p>
+        <button class="retry-button">Retry</button>
+      </div>
+    `;
+        const retryButton = errorDiv.querySelector(".retry-button");
+        if (retryButton) {
+            retryButton.addEventListener("click", () => {
+                this.apiLoadRetries = 0;
+                errorDiv.remove();
+                if (__classPrivateFieldGet(this, _VimeoEmbed_videoId, "f")) {
+                    this.initializePlayer(__classPrivateFieldGet(this, _VimeoEmbed_videoId, "f"));
+                }
+            });
+        }
+        // Clear existing content
+        this.innerHTML = "";
+        this.appendChild(errorDiv);
+    }
+    connectedCallback() {
+        VimeoEmbed.instanceCount++;
+        this.log("VimeoEmbed: connectedCallback called, instance count:", VimeoEmbed.instanceCount);
+        // Add resource hints on first instance
+        if (VimeoEmbed.instanceCount === 1) {
+            this.addResourceHints();
+        }
+        const urlAttr = this.getAttribute("url");
+        const videoIdAttr = this.getAttribute("video-id");
+        if (urlAttr) {
+            __classPrivateFieldSet(this, _VimeoEmbed_url, urlAttr, "f");
+            __classPrivateFieldSet(this, _VimeoEmbed_videoId, this.extractVideoId(urlAttr), "f");
+        }
+        else if (videoIdAttr) {
+            __classPrivateFieldSet(this, _VimeoEmbed_videoId, videoIdAttr, "f");
+        }
+        __classPrivateFieldSet(this, _VimeoEmbed_autoplay, this.hasAttribute("autoplay"), "f");
+        __classPrivateFieldSet(this, _VimeoEmbed_controls, this.hasAttribute("controls"), "f");
+        __classPrivateFieldSet(this, _VimeoEmbed_lazy, this.hasAttribute("lazy"), "f");
+        __classPrivateFieldSet(this, _VimeoEmbed_muted, this.hasAttribute("muted"), "f");
+        __classPrivateFieldSet(this, _VimeoEmbed_background, this.hasAttribute("background"), "f");
+        __classPrivateFieldSet(this, _VimeoEmbed_poster, this.getAttribute("poster") || "", "f");
+        try {
+            const playerVarsAttr = this.getAttribute("player-vars");
+            __classPrivateFieldSet(this, _VimeoEmbed_playerVars, playerVarsAttr ? JSON.parse(playerVarsAttr) : {}, "f");
+        }
+        catch (e) {
+            this.error("VimeoEmbed: Invalid player-vars JSON on init:", e);
+            __classPrivateFieldSet(this, _VimeoEmbed_playerVars, {}, "f");
+        }
+        if (!__classPrivateFieldGet(this, _VimeoEmbed_videoId, "f")) {
+            this.error("VimeoEmbed: Missing or invalid video ID");
+            this.dispatchCustomEvent("error", {
+                message: "Missing or invalid video ID",
+            });
+            return;
+        }
+        this.classList.add("vimeo-embed-wrapper");
+        // Add ARIA role and tabindex for accessibility
+        this.setAttribute("role", "region");
+        this.setAttribute("aria-label", "Video player");
+        if (!this.hasAttribute("tabindex")) {
+            this.setAttribute("tabindex", "0");
+        }
+        // Create ARIA live region for screen reader announcements
+        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);
+        // Setup keyboard event handlers
+        this.setupKeyboardHandlers();
+        // Setup fullscreen change listener
+        this.setupFullscreenListener();
+        __classPrivateFieldGet(this, _VimeoEmbed_instances, "m", _VimeoEmbed_updateBackgroundMode).call(this);
+        if (__classPrivateFieldGet(this, _VimeoEmbed_lazy, "f")) {
+            this.showPoster(__classPrivateFieldGet(this, _VimeoEmbed_videoId, "f"));
+            // Setup Intersection Observer for better performance
+            this.setupIntersectionObserver();
+        }
+        else {
+            this.initializePlayer(__classPrivateFieldGet(this, _VimeoEmbed_videoId, "f"));
+        }
+        this.initialized = true;
+        this.dispatchCustomEvent("connected");
+    }
+    disconnectedCallback() {
+        VimeoEmbed.instanceCount--;
+        this.log("VimeoEmbed: disconnectedCallback called, remaining instances:", VimeoEmbed.instanceCount);
+        if (this.player) {
+            try {
+                this.player.destroy();
+                this.log("VimeoEmbed: Player destroyed.");
+            }
+            catch (error) {
+                this.warn("VimeoEmbed: Error destroying player:", error);
+            }
+            this.player = null;
+        }
+        // Remove keyboard event handlers
+        if (this.keyboardHandler) {
+            this.removeEventListener("keydown", this.keyboardHandler);
+            this.keyboardHandler = null;
+        }
+        const poster = this.querySelector(".vimeo-poster");
+        const buttonOverlay = this.querySelector(".button-overlay");
+        if (poster && this.posterClickHandler) {
+            poster.removeEventListener("click", this.posterClickHandler);
+            this.posterClickHandler = null;
+        }
+        if (buttonOverlay && this.posterClickHandler) {
+            buttonOverlay.removeEventListener("click", this.posterClickHandler);
+        }
+        this.innerHTML = "";
+        this.classList.remove("vimeo-embed-wrapper", "vimeo-embed-container", "is-playing");
+        if (VimeoEmbed.instanceCount === 0) {
+            this.log("VimeoEmbed: Last instance, cleaning up global resources");
+            const script = document.querySelector('script[src="https://player.vimeo.com/api/player.js"]');
+            if (script) {
+                script.remove();
+                this.log("VimeoEmbed: Vimeo API script removed.");
+            }
+            VimeoEmbed.apiLoaded = false;
+            VimeoEmbed.apiReady = false;
+        }
+        this.iframe = null;
+        this.playPauseButton = null;
+        this.setCustomControlState = null;
+        this.dispatchCustomEvent("disconnected");
+        this.log("VimeoEmbed: Cleanup complete.");
+    }
+    reinitializePlayer() {
+        if (!this.initialized || !__classPrivateFieldGet(this, _VimeoEmbed_videoId, "f")) {
+            return;
+        }
+        if (this.player) {
+            try {
+                this.player.destroy();
+            }
+            catch (error) {
+                this.warn("VimeoEmbed: Error destroying player:", error);
+            }
+        }
+        if (__classPrivateFieldGet(this, _VimeoEmbed_lazy, "f")) {
+            this.showPoster(__classPrivateFieldGet(this, _VimeoEmbed_videoId, "f"));
+        }
+        else {
+            this.initializePlayer(__classPrivateFieldGet(this, _VimeoEmbed_videoId, "f"));
+        }
+    }
+    showPoster(videoId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            let thumbnailUrl = __classPrivateFieldGet(this, _VimeoEmbed_poster, "f");
+            // Fetch Vimeo thumbnail if no custom poster
+            if (!this.isValidPosterUrl(__classPrivateFieldGet(this, _VimeoEmbed_poster, "f"))) {
+                try {
+                    const response = yield fetch(`https://vimeo.com/api/v2/video/${videoId}.json`);
+                    const data = yield response.json();
+                    thumbnailUrl = ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.thumbnail_large) || "";
+                }
+                catch (error) {
+                    this.warn("VimeoEmbed: Could not fetch Vimeo thumbnail:", error);
+                    thumbnailUrl = "";
+                }
+            }
+            this.log("VimeoEmbed: Using poster URL:", thumbnailUrl);
+            this.innerHTML = "";
+            if (this.posterClickHandler) {
+                this.posterClickHandler = null;
+            }
+            const poster = document.createElement("img");
+            poster.src = thumbnailUrl || "";
+            poster.alt = "Vimeo Video Thumbnail";
+            poster.classList.add("vimeo-poster", "video-poster");
+            poster.loading = "lazy";
+            poster.onerror = () => {
+                this.warn("VimeoEmbed: Poster failed to load, using white background.");
+                poster.style.display = "none";
+                this.style.backgroundColor = "#FFFFFF";
+            };
+            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("VimeoEmbed: Loading video from poster click");
+                this.setAttribute("data-poster-autoplay", "true");
+                try {
+                    this.initializePlayer(videoId);
+                }
+                catch (error) {
+                    this.error("VimeoEmbed: Error initializing player from poster:", error);
+                    this.dispatchCustomEvent("error", { message: "Failed to load video" });
+                }
+            };
+            this.posterClickHandler = loadVideo;
+            // Add keyboard support
+            const keyboardActivate = (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    loadVideo(e);
+                }
+            };
+            poster.addEventListener("click", loadVideo);
+            buttonOverlay.addEventListener("click", loadVideo);
+            buttonOverlay.addEventListener("keydown", keyboardActivate);
+            this.appendChild(poster);
+            this.appendChild(buttonOverlay);
+            this.log("VimeoEmbed: Poster displayed for lazy loading");
+        });
+    }
+    initializePlayer(videoId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.log("VimeoEmbed: Initializing player for video ID:", videoId);
+            const isBackground = __classPrivateFieldGet(this, _VimeoEmbed_background, "f");
+            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");
+            }
+            this.log("VimeoEmbed: Creating iframe with autoplay:", autoplay, "controls:", controls);
+            this.iframe = document.createElement("iframe");
+            // Generate unique ID for Vimeo Player API
+            const iframeId = `vimeo-player-${videoId}-${Date.now()}`;
+            this.iframe.id = iframeId;
+            const params = new URLSearchParams(Object.assign({ autoplay: autoplay ? "1" : "0", controls: controls ? "1" : "0", muted: mute ? "1" : "0", playsinline: "1", dnt: "1" }, __classPrivateFieldGet(this, _VimeoEmbed_playerVars, "f")));
+            if (__classPrivateFieldGet(this, _VimeoEmbed_muted, "f")) {
+                params.set("muted", "1");
+            }
+            if (autoplay && !__classPrivateFieldGet(this, _VimeoEmbed_muted, "f")) {
+                __classPrivateFieldSet(this, _VimeoEmbed_muted, true, "f");
+                this.log("VimeoEmbed: Autoplay enabled, forcing muted state for compliance");
+            }
+            this.iframe.src = `https://player.vimeo.com/video/${videoId}?${params.toString()}`;
+            this.iframe.allow =
+                "autoplay; fullscreen; picture-in-picture; clipboard-write";
+            this.iframe.allowFullscreen = true;
+            this.iframe.style.position = "absolute";
+            this.iframe.style.border = "none";
+            if (__classPrivateFieldGet(this, _VimeoEmbed_background, "f")) {
+                this.iframe.style.pointerEvents = "none";
+            }
+            else {
+                this.iframe.style.top = "0";
+                this.iframe.style.left = "0";
+                this.iframe.style.width = "100%";
+                this.iframe.style.height = "100%";
+            }
+            this.log("VimeoEmbed: Iframe created with src:", this.iframe.src);
+            this.replaceChildren(this.iframe);
+            // Store reference to iframe before async operations
+            const iframe = this.iframe;
+            if (!controls) {
+                this.addCustomControls();
+            }
+            try {
+                yield VimeoEmbed.loadVimeoAPIWithRetry(this.apiLoadRetries);
+                // Check if component was disconnected during API load
+                if (!this.isConnected || !iframe.isConnected) {
+                    this.log("VimeoEmbed: Component disconnected, skipping Player initialization");
+                    return;
+                }
+                // Wait for iframe to be fully in DOM before initializing player
+                yield new Promise((resolve) => setTimeout(resolve, 100));
+                // @ts-ignore - Vimeo Player will be available after loading the API
+                // Use the iframe element directly since it's already in the DOM
+                this.player = new Vimeo.Player(iframe);
+                this.player.on("loaded", () => {
+                    this.log("VimeoEmbed: Player is ready.");
+                    this.playerReady = true;
+                    if (__classPrivateFieldGet(this, _VimeoEmbed_muted, "f")) {
+                        this.player.setVolume(0);
+                    }
+                    if (autoplay && this.setCustomControlState) {
+                        this.setCustomControlState(true);
+                        __classPrivateFieldSet(this, _VimeoEmbed_playing, true, "f");
+                    }
+                    this.dispatchCustomEvent("ready");
+                });
+                this.player.on("play", () => {
+                    __classPrivateFieldSet(this, _VimeoEmbed_playing, true, "f");
+                    if (this.setCustomControlState) {
+                        this.setCustomControlState(true);
+                    }
+                    this.dispatchCustomEvent("play");
+                });
+                this.player.on("pause", () => {
+                    __classPrivateFieldSet(this, _VimeoEmbed_playing, false, "f");
+                    if (this.setCustomControlState) {
+                        this.setCustomControlState(false);
+                    }
+                    this.dispatchCustomEvent("pause");
+                });
+                this.player.on("ended", () => {
+                    __classPrivateFieldSet(this, _VimeoEmbed_playing, false, "f");
+                    if (this.setCustomControlState) {
+                        this.setCustomControlState(false);
+                    }
+                    this.dispatchCustomEvent("ended");
+                });
+                this.player.on("error", (error) => {
+                    this.error("VimeoEmbed: Player encountered an error:", error);
+                    this.dispatchCustomEvent("error", {
+                        message: error.message || "Unknown error occurred",
+                        name: error.name,
+                    });
+                });
+            }
+            catch (error) {
+                this.error("VimeoEmbed: Failed to load Vimeo API", error);
+                this.showErrorMessage(error instanceof Error
+                    ? error.message
+                    : "Failed to load Vimeo player. Please refresh the page or check your connection.");
+                this.dispatchCustomEvent("error", {
+                    message: error instanceof Error ? error.message : "API load failed",
+                    code: "API_LOAD_ERROR",
+                    retryable: true,
+                });
+            }
+        });
+    }
+    static loadVimeoAPI() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                if (this.apiReady) {
+                    resolve();
+                    return;
+                }
+                if (!this.apiLoaded) {
+                    const script = document.createElement("script");
+                    script.src = "https://player.vimeo.com/api/player.js";
+                    script.onload = () => {
+                        this.apiReady = true;
+                        this.apiLoaded = true;
+                        resolve();
+                    };
+                    script.onerror = () => {
+                        reject(new Error("Failed to load Vimeo API script. Please check your network connection or disable ad blockers."));
+                    };
+                    document.head.appendChild(script);
+                    this.apiLoaded = true;
+                }
+                else {
+                    // Wait for API to be ready
+                    const checkReady = setInterval(() => {
+                        // @ts-ignore
+                        if (typeof Vimeo !== "undefined") {
+                            this.apiReady = true;
+                            clearInterval(checkReady);
+                            resolve();
+                        }
+                    }, 100);
+                    setTimeout(() => {
+                        clearInterval(checkReady);
+                        reject(new Error("Vimeo API loading timeout. The API script may be blocked by an ad blocker or network issue."));
+                    }, this.API_LOAD_TIMEOUT);
+                }
+            });
+        });
+    }
+    /**
+     * Load Vimeo API with retry mechanism
+     */
+    static loadVimeoAPIWithRetry() {
+        return __awaiter(this, arguments, void 0, function* (retries = 0) {
+            try {
+                yield this.loadVimeoAPI();
+            }
+            catch (error) {
+                if (retries < this.MAX_API_RETRIES) {
+                    console.warn(`VimeoEmbed: API load failed, retrying (${retries + 1}/${this.MAX_API_RETRIES})...`);
+                    yield new Promise((resolve) => setTimeout(resolve, this.API_RETRY_DELAY));
+                    return this.loadVimeoAPIWithRetry(retries + 1);
+                }
+                throw error;
+            }
+        });
+    }
+    addCustomControls() {
+        this.classList.add("vimeo-embed-container");
+        const buttonOverlay = document.createElement("div");
+        buttonOverlay.classList.add("button-overlay");
+        this.playPauseButton = document.createElement("div");
+        this.playPauseButton.classList.add("button");
+        let isPlaying = false;
+        const setPlayingState = (playing) => {
+            isPlaying = playing;
+            if (playing) {
+                this.classList.add("is-playing");
+            }
+            else {
+                this.classList.remove("is-playing");
+            }
+        };
+        const togglePlayPause = () => {
+            if (isPlaying) {
+                if (this.player) {
+                    this.player.pause();
+                }
+                setPlayingState(false);
+            }
+            else {
+                if (this.player) {
+                    this.player.play();
+                }
+                setPlayingState(true);
+            }
+        };
+        this.setCustomControlState = setPlayingState;
+        buttonOverlay.addEventListener("click", togglePlayPause);
+        if (this.playPauseButton) {
+            buttonOverlay.appendChild(this.playPauseButton);
+        }
+        this.appendChild(buttonOverlay);
+    }
+    play() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (__classPrivateFieldGet(this, _VimeoEmbed_lazy, "f") && !this.player && !this.iframe) {
+                this.log("VimeoEmbed: Lazy video needs to be loaded first. Initializing...");
+                this.setAttribute("data-should-autoplay", "true");
+                yield this.initializePlayer(__classPrivateFieldGet(this, _VimeoEmbed_videoId, "f"));
+                yield new Promise((resolve) => setTimeout(resolve, 1000));
+            }
+            if (!this.playerReady) {
+                this.warn("VimeoEmbed: Player is not ready. Waiting for initialization.");
+                yield new Promise((resolve) => {
+                    const interval = setInterval(() => {
+                        if (this.playerReady) {
+                            clearInterval(interval);
+                            resolve(null);
+                        }
+                    }, 100);
+                    setTimeout(() => {
+                        clearInterval(interval);
+                        resolve(null);
+                    }, 5000);
+                });
+            }
+            this.removeAttribute("data-should-autoplay");
+            if (this.player) {
+                this.player.play();
+                this.log("VimeoEmbed: Video playback started via API.");
+            }
+            __classPrivateFieldSet(this, _VimeoEmbed_playing, true, "f");
+            if (this.setCustomControlState) {
+                this.setCustomControlState(true);
+            }
+            this.dispatchCustomEvent("play");
+        });
+    }
+    pause() {
+        if (this.player) {
+            this.player.pause();
+            this.log("VimeoEmbed: Video paused via API.");
+        }
+        __classPrivateFieldSet(this, _VimeoEmbed_playing, false, "f");
+        if (this.setCustomControlState) {
+            this.setCustomControlState(false);
+        }
+        this.dispatchCustomEvent("pause");
+    }
+    stopVideo() {
+        if (this.player) {
+            this.player.pause();
+            this.player.setCurrentTime(0);
+            this.log("VimeoEmbed: Video stopped via API.");
+        }
+        __classPrivateFieldSet(this, _VimeoEmbed_playing, false, "f");
+        if (this.setCustomControlState) {
+            this.setCustomControlState(false);
+        }
+        this.dispatchCustomEvent("stop");
+    }
+    mute() {
+        this.muted = true;
+    }
+    unmute() {
+        this.muted = false;
+    }
+    togglePlay() {
+        if (__classPrivateFieldGet(this, _VimeoEmbed_playing, "f")) {
+            this.pause();
+        }
+        else {
+            this.play();
+        }
+    }
+    toggleMute() {
+        this.muted = !__classPrivateFieldGet(this, _VimeoEmbed_muted, "f");
+    }
+    static toggleDebug(forceState) {
+        VimeoEmbed.DEBUG =
+            forceState !== undefined ? forceState : !VimeoEmbed.DEBUG;
+        console.log(`VimeoEmbed: Debugging is now ${VimeoEmbed.DEBUG ? "ENABLED" : "DISABLED"}.`);
+    }
+    getPlayerState() {
+        let actualMutedState = __classPrivateFieldGet(this, _VimeoEmbed_muted, "f");
+        if (this.player && this.playerReady && !this.updatingMutedState) {
+            try {
+                this.player.getVolume().then((volume) => {
+                    actualMutedState = volume === 0;
+                    if (actualMutedState !== __classPrivateFieldGet(this, _VimeoEmbed_muted, "f") && !this.updatingMutedState) {
+                        __classPrivateFieldSet(this, _VimeoEmbed_muted, actualMutedState, "f");
+                    }
+                });
+            }
+            catch (error) {
+                this.warn("VimeoEmbed: Could not get muted state from player:", error);
+            }
+        }
+        return {
+            playing: __classPrivateFieldGet(this, _VimeoEmbed_playing, "f"),
+            muted: actualMutedState,
+            videoId: __classPrivateFieldGet(this, _VimeoEmbed_videoId, "f"),
+            ready: this.playerReady,
+            initialized: this.initialized,
+        };
+    }
+    isPlaying() {
+        return __classPrivateFieldGet(this, _VimeoEmbed_playing, "f");
+    }
+    isMuted() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.player && this.playerReady) {
+                try {
+                    const volume = yield this.player.getVolume();
+                    return volume === 0;
+                }
+                catch (error) {
+                    this.warn("VimeoEmbed: Could not get muted state from player:", error);
+                }
+            }
+            return __classPrivateFieldGet(this, _VimeoEmbed_muted, "f");
+        });
+    }
+    getCurrentTime() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.player && this.playerReady) {
+                try {
+                    return yield this.player.getCurrentTime();
+                }
+                catch (error) {
+                    this.warn("VimeoEmbed: Could not get current time from player:", error);
+                }
+            }
+            return 0;
+        });
+    }
+    /**
+     * Request fullscreen mode
+     */
+    enterFullscreen() {
+        const elem = 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"));
+    }
+    /**
+     * Exit fullscreen mode
+     */
+    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"));
+    }
+    /**
+     * Toggle fullscreen mode
+     */
+    toggleFullscreen() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.isFullscreen()) {
+                yield this.exitFullscreen();
+            }
+            else {
+                yield this.enterFullscreen();
+            }
+        });
+    }
+    /**
+     * Check if currently in fullscreen mode
+     */
+    isFullscreen() {
+        const doc = document;
+        return !!(doc.fullscreenElement ||
+            doc.webkitFullscreenElement ||
+            doc.mozFullScreenElement ||
+            doc.msFullscreenElement);
+    }
+    /**
+     * Get available quality levels for the current video
+     * @returns Array of available quality levels
+     */
+    getAvailableQualities() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.player && this.playerReady) {
+                try {
+                    return (yield this.player.getQualities()) || [];
+                }
+                catch (error) {
+                    this.warn("VimeoEmbed: Could not get available qualities:", error);
+                }
+            }
+            return [];
+        });
+    }
+    /**
+     * Get the current playback quality
+     * @returns Current quality level
+     */
+    getCurrentQuality() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.player && this.playerReady) {
+                try {
+                    return (yield this.player.getQuality()) || "auto";
+                }
+                catch (error) {
+                    this.warn("VimeoEmbed: Could not get current quality:", error);
+                }
+            }
+            return "auto";
+        });
+    }
+    /**
+     * Set the playback quality
+     * @param quality The desired quality level
+     */
+    setQuality(quality) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.player || !this.playerReady) {
+                this.warn("VimeoEmbed: Player not ready for quality change");
+                return;
+            }
+            try {
+                const oldQuality = yield this.getCurrentQuality();
+                yield this.player.setQuality(quality);
+                // Dispatch quality change event
+                const event = new CustomEvent("qualitychange", {
+                    detail: {
+                        oldQuality,
+                        newQuality: quality,
+                        availableQualities: yield this.getAvailableQualities(),
+                    },
+                    bubbles: true,
+                    composed: true,
+                });
+                this.dispatchEvent(event);
+            }
+            catch (error) {
+                this.warn("VimeoEmbed: Could not set quality:", error);
+            }
+        });
+    }
+    loadVideo(videoIdOrUrl) {
+        const extracted = this.extractVideoId(videoIdOrUrl);
+        if (extracted) {
+            __classPrivateFieldSet(this, _VimeoEmbed_url, videoIdOrUrl, "f");
+            __classPrivateFieldSet(this, _VimeoEmbed_videoId, extracted, "f");
+        }
+        else {
+            __classPrivateFieldSet(this, _VimeoEmbed_videoId, videoIdOrUrl, "f");
+        }
+        if (__classPrivateFieldGet(this, _VimeoEmbed_lazy, "f") && !this.player) {
+            try {
+                this.initializePlayer(__classPrivateFieldGet(this, _VimeoEmbed_videoId, "f"));
+            }
+            catch (error) {
+                this.warn("VimeoEmbed: loadVideo failed to initialize player:", error);
+            }
+            return;
+        }
+        if (this.initialized) {
+            this.reinitializePlayer();
+        }
+    }
+}
+_VimeoEmbed_url = new WeakMap(), _VimeoEmbed_videoId = new WeakMap(), _VimeoEmbed_autoplay = new WeakMap(), _VimeoEmbed_muted = new WeakMap(), _VimeoEmbed_controls = new WeakMap(), _VimeoEmbed_lazy = new WeakMap(), _VimeoEmbed_poster = new WeakMap(), _VimeoEmbed_playing = new WeakMap(), _VimeoEmbed_background = new WeakMap(), _VimeoEmbed_playerVars = new WeakMap(), _VimeoEmbed_instances = new WeakSet(), _VimeoEmbed_reflectBooleanAttribute = function _VimeoEmbed_reflectBooleanAttribute(name, value) {
+    this.updatingAttribute = true;
+    if (value) {
+        this.setAttribute(name, "");
+    }
+    else {
+        this.removeAttribute(name);
+    }
+    this.updatingAttribute = false;
+}, _VimeoEmbed_updateBackgroundMode = function _VimeoEmbed_updateBackgroundMode() {
+    if (__classPrivateFieldGet(this, _VimeoEmbed_background, "f")) {
+        this.classList.add("is-background");
+        __classPrivateFieldSet(this, _VimeoEmbed_autoplay, true, "f");
+        __classPrivateFieldSet(this, _VimeoEmbed_muted, true, "f");
+        __classPrivateFieldSet(this, _VimeoEmbed_controls, false, "f");
+        __classPrivateFieldSet(this, _VimeoEmbed_lazy, false, "f");
+    }
+    else {
+        this.classList.remove("is-background");
+    }
+};
+VimeoEmbed.apiLoaded = false;
+VimeoEmbed.apiReady = false;
+VimeoEmbed.instanceCount = 0;
+VimeoEmbed.DEBUG = false;
+VimeoEmbed.MAX_API_RETRIES = 3;
+VimeoEmbed.API_RETRY_DELAY = 2000;
+VimeoEmbed.API_LOAD_TIMEOUT = 10000;
+customElements.define("vimeo-embed", VimeoEmbed);
+//# sourceMappingURL=VimeoEmbed.js.map