@smartimpact-it/modern-video-embed 2.0.4 → 2.0.6

package/src/components/VideoEmbed.ts.backup

@@ -0,0 +1,1051 @@
+export class VideoEmbed extends HTMLElement {
+  private video: HTMLVideoElement | null = null;
+  private static instanceCount = 0;
+  private static DEBUG = false;
+  private playerReady = false;
+  private playPauseButton: HTMLDivElement | null = null;
+  private initialized = false;
+  private setCustomControlState: ((playing: boolean) => void) | null = null;
+  private updatingAttribute = false;
+
+  /** The full video URL (e.g., "https://example.com/video.mp4") */
+  #url: string = "";
+  /** Whether the video should autoplay when loaded. Requires `muted` to be true. */
+  #autoplay: boolean = false;
+  /** Whether the video audio is muted. */
+  #muted: boolean = false;
+  /** Whether to show the native video player controls. */
+  #controls: boolean = false;
+  /** Whether to lazy-load the video, showing a poster image until interaction. */
+  #lazy: boolean = false;
+  /** URL for a custom poster image. */
+  #poster: string = "";
+  /** Read-only property to check if the video is currently playing. */
+  #playing: boolean = false;
+  /** Whether the video should act as a background, covering its container. */
+  #background: boolean = false;
+  /** Whether the video should loop. */
+  #loop: boolean = false;
+  /** Whether to preload the video. Values: 'none', 'metadata', 'auto' */
+  #preload: "" | "none" | "metadata" | "auto" = "metadata";
+
+  private posterClickHandler: EventListener | null = null;
+  private keyboardHandler: ((e: KeyboardEvent) => void) | null = null;
+  private ariaLiveRegion: HTMLElement | null = null;
+  private intersectionObserver: IntersectionObserver | null = null;
+  private hasLoadedVideo = false;
+
+  static get observedAttributes() {
+    return [
+      "url",
+      "autoplay",
+      "controls",
+      "lazy",
+      "muted",
+      "poster",
+      "background",
+      "loop",
+      "preload",
+    ];
+  }
+
+  attributeChangedCallback(
+    name: string,
+    oldValue: string | null,
+    newValue: string | null,
+  ) {
+    if (this.updatingAttribute) {
+      return;
+    }
+
+    this.log(
+      `VideoEmbed: Attribute changed - ${name}: ${oldValue} -> ${newValue}`,
+    );
+
+    switch (name) {
+      case "url":
+        this.#url = newValue || "";
+        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":
+        this.#loop = newValue !== null;
+        if (this.video) {
+          this.video.loop = this.#loop;
+        }
+        break;
+      case "preload":
+        const validPreloadValues: Array<"" | "none" | "metadata" | "auto"> = [
+          "none",
+          "metadata",
+          "auto",
+          "",
+        ];
+        this.#preload =
+          validPreloadValues.indexOf(newValue as any) !== -1
+            ? (newValue as "" | "none" | "metadata" | "auto")
+            : "metadata";
+        if (this.video) {
+          this.video.preload = this.#preload;
+        }
+        break;
+    }
+  }
+
+  // Getters and setters for attributes
+  get url() {
+    return this.#url;
+  }
+  set url(value: string) {
+    this.#url = value;
+    this.#reflectAttribute("url", value);
+    if (this.initialized) {
+      this.reinitializePlayer();
+    }
+  }
+
+  get autoplay() {
+    return this.#autoplay;
+  }
+  set autoplay(value: boolean) {
+    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: boolean) {
+    this.#controls = value;
+    this.#reflectBooleanAttribute("controls", value);
+    if (this.video) {
+      this.video.controls = value;
+    }
+  }
+
+  get lazy() {
+    return this.#lazy;
+  }
+  set lazy(value: boolean) {
+    this.#lazy = value;
+    this.#reflectBooleanAttribute("lazy", value);
+  }
+
+  get muted() {
+    return this.#muted;
+  }
+  set muted(value: boolean) {
+    this.#muted = value;
+    this.#reflectBooleanAttribute("muted", value);
+    if (this.video) {
+      this.video.muted = value;
+    }
+  }
+
+  get poster() {
+    return this.#poster;
+  }
+  set poster(value: string) {
+    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: boolean) {
+    this.#background = value;
+    this.#reflectBooleanAttribute("background", value);
+    this.#updateBackgroundMode();
+  }
+
+  get loop() {
+    return this.#loop;
+  }
+  set loop(value: boolean) {
+    this.#loop = value;
+    this.#reflectBooleanAttribute("loop", value);
+    if (this.video) {
+      this.video.loop = value;
+    }
+  }
+
+  get preload() {
+    return this.#preload;
+  }
+  set preload(value: "" | "none" | "metadata" | "auto") {
+    this.#preload = value;
+    this.#reflectAttribute("preload", value);
+    if (this.video) {
+      this.video.preload = value;
+    }
+  }
+
+  #reflectBooleanAttribute(name: string, value: boolean) {
+    this.updatingAttribute = true;
+    if (value) {
+      this.setAttribute(name, "");
+    } else {
+      this.removeAttribute(name);
+    }
+    this.updatingAttribute = false;
+  }
+
+  #reflectAttribute(name: string, value: string) {
+    this.updatingAttribute = true;
+    if (value) {
+      this.setAttribute(name, value);
+    } else {
+      this.removeAttribute(name);
+    }
+    this.updatingAttribute = false;
+  }
+
+  private log(...args: any[]) {
+    if (VideoEmbed.DEBUG) {
+      console.log("VideoEmbed:", ...args);
+    }
+  }
+
+  private warn(...args: any[]) {
+    console.warn(...args);
+  }
+
+  private error(...args: any[]) {
+    console.error(...args);
+  }
+
+  private dispatchCustomEvent(eventName: string, detail?: any) {
+    this.dispatchEvent(
+      new CustomEvent(eventName, {
+        detail,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private setupFullscreenListener(): void {
+    const handleFullscreenChange = (event: Event) => {
+      // Only respond to native browser fullscreen events, not our custom events
+      if (!event.isTrusted) return;
+
+      const doc = document as any;
+      const fullscreenElement =
+        doc.fullscreenElement ||
+        doc.webkitFullscreenElement ||
+        doc.mozFullScreenElement ||
+        doc.msFullscreenElement;
+
+      // Handle fullscreen for both custom element and video element
+      const isFullscreen =
+        fullscreenElement === this || fullscreenElement === this.video;
+      const wasFullscreen = this.classList.contains("is-fullscreen");
+
+      // Only dispatch event and update class if fullscreen state changed
+      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);
+  }
+
+  private setupKeyboardHandlers(): void {
+    this.keyboardHandler = (e: KeyboardEvent) => {
+      if (!this.playerReady || (e.target as HTMLElement)?.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("VideoEmbed: Exit fullscreen failed:", error);
+            });
+            this.announceToScreenReader("Exited fullscreen");
+          } else {
+            this.enterFullscreen()
+              .then(() => {
+                this.announceToScreenReader("Entered fullscreen");
+              })
+              .catch((error) => {
+                this.warn("VideoEmbed: Enter fullscreen failed:", error);
+                this.announceToScreenReader("Fullscreen not available");
+              });
+          }
+          break;
+      }
+    };
+
+    this.addEventListener("keydown", this.keyboardHandler as EventListener);
+  }
+
+  private announceToScreenReader(message: string): void {
+    if (this.ariaLiveRegion) {
+      this.ariaLiveRegion.textContent = message;
+      setTimeout(() => {
+        if (this.ariaLiveRegion) {
+          this.ariaLiveRegion.textContent = "";
+        }
+      }, 1000);
+    }
+  }
+
+  private setupIntersectionObserver(): void {
+    if (!("IntersectionObserver" in window)) {
+      return;
+    }
+
+    const options: IntersectionObserverInit = {
+      root: null,
+      rootMargin: "50px",
+      threshold: 0.01,
+    };
+
+    this.intersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting && !this.hasLoadedVideo) {
+          this.hasLoadedVideo = true;
+          this.log("VideoEmbed: Video entering viewport, loading...");
+
+          const shouldAutoplay =
+            this.getAttribute("data-poster-autoplay") === "true";
+
+          if (!shouldAutoplay) {
+            this.initializePlayer();
+          }
+
+          if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+          }
+        }
+      });
+    }, options);
+
+    this.intersectionObserver.observe(this);
+  }
+
+  private showErrorMessage(message: string): void {
+    const errorDiv = document.createElement("div");
+    errorDiv.className = "video-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", () => {
+        errorDiv.remove();
+        if (this.#url) {
+          this.initializePlayer();
+        }
+      });
+    }
+
+    this.innerHTML = "";
+    this.appendChild(errorDiv);
+  }
+
+  connectedCallback() {
+    VideoEmbed.instanceCount++;
+    this.log(
+      "VideoEmbed: connectedCallback called, instance count:",
+      VideoEmbed.instanceCount,
+    );
+
+    const urlAttr = this.getAttribute("url");
+    if (urlAttr) {
+      this.#url = urlAttr;
+    }
+
+    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");
+    this.#loop = this.hasAttribute("loop");
+    this.#poster = this.getAttribute("poster") || "";
+    const preloadAttr = this.getAttribute("preload");
+    this.#preload =
+      preloadAttr === "none" ||
+      preloadAttr === "metadata" ||
+      preloadAttr === "auto"
+        ? preloadAttr
+        : "metadata";
+
+    if (!this.#url) {
+      this.error("VideoEmbed: 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.setupIntersectionObserver();
+    } else {
+      this.initializePlayer();
+    }
+
+    this.initialized = true;
+    this.dispatchCustomEvent("connected");
+  }
+
+  disconnectedCallback() {
+    VideoEmbed.instanceCount--;
+    this.log(
+      "VideoEmbed: disconnectedCallback called, remaining instances:",
+      VideoEmbed.instanceCount,
+    );
+
+    if (this.video) {
+      this.video.pause();
+      this.video.src = "";
+      this.video.load();
+      this.video = null;
+    }
+
+    if (this.keyboardHandler) {
+      this.removeEventListener(
+        "keydown",
+        this.keyboardHandler as EventListener,
+      );
+      this.keyboardHandler = null;
+    }
+
+    const poster = this.querySelector(".video-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);
+    }
+
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+
+    this.innerHTML = "";
+    this.classList.remove(
+      "video-embed-wrapper",
+      "video-embed-container",
+      "is-playing",
+    );
+
+    this.playPauseButton = null;
+    this.setCustomControlState = null;
+
+    this.dispatchCustomEvent("disconnected");
+
+    this.log("VideoEmbed: Cleanup complete.");
+  }
+
+  private reinitializePlayer() {
+    if (!this.initialized || !this.#url) {
+      return;
+    }
+
+    if (this.video) {
+      this.video.pause();
+      // Remove the video element instead of clearing src to avoid error events
+      this.video.remove();
+      this.video = null;
+    }
+
+    // Clear player state
+    this.playerReady = false;
+    this.#playing = false;
+    this.classList.remove("is-playing");
+
+    if (this.#lazy) {
+      this.showPoster();
+    } else {
+      this.initializePlayer();
+    }
+  }
+
+  private showPoster() {
+    const posterUrl = this.#poster || "";
+
+    this.log("VideoEmbed: Using poster URL:", posterUrl);
+
+    this.innerHTML = "";
+
+    if (this.posterClickHandler) {
+      this.posterClickHandler = null;
+    }
+
+    const poster = document.createElement("div");
+    poster.classList.add("video-poster");
+    poster.setAttribute("role", "img");
+    poster.setAttribute("aria-label", "Video thumbnail");
+
+    if (posterUrl) {
+      poster.style.backgroundImage = `url('${posterUrl}')`;
+    } else {
+      poster.style.backgroundColor = "#000000";
+    }
+
+    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: EventListener = () => {
+      this.log("VideoEmbed: Loading video from poster click");
+      this.setAttribute("data-poster-autoplay", "true");
+      try {
+        this.initializePlayer();
+      } catch (error) {
+        this.error("VideoEmbed: Error initializing player from poster:", error);
+        this.dispatchCustomEvent("error", { message: "Failed to load video" });
+      }
+    };
+
+    this.posterClickHandler = loadVideo;
+
+    const keyboardActivate = (e: KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        loadVideo(e);
+      }
+    };
+
+    poster.addEventListener("click", loadVideo);
+    buttonOverlay.addEventListener("click", loadVideo);
+    buttonOverlay.addEventListener(
+      "keydown",
+      keyboardActivate as EventListener,
+    );
+
+    this.appendChild(poster);
+    this.appendChild(buttonOverlay);
+
+    this.log("VideoEmbed: Poster displayed for lazy loading");
+  }
+
+  private initializePlayer() {
+    this.log("VideoEmbed: Initializing player for URL:", this.#url);
+
+    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(
+        "VideoEmbed: Autoplay enabled, forcing muted state for compliance",
+      );
+    }
+
+    this.innerHTML = "";
+
+    this.video = document.createElement("video");
+    // Let CSS handle positioning and sizing
+    // Only set object-fit for backward compatibility with older browsers
+    this.video.style.objectFit = this.#background ? "cover" : "contain";
+
+    this.video.src = this.#url;
+    this.video.controls = controls;
+    this.video.autoplay = autoplay;
+    this.video.muted = mute || this.#muted;
+    this.video.loop = this.#loop;
+    this.video.preload = this.#preload;
+    this.video.playsInline = true;
+
+    if (this.#poster) {
+      this.video.poster = this.#poster;
+    }
+
+    this.setupVideoEvents();
+
+    this.appendChild(this.video);
+
+    if (!controls) {
+      this.addCustomControls();
+    }
+
+    this.playerReady = true;
+    this.dispatchCustomEvent("ready", {
+      url: this.#url,
+      muted: this.#muted,
+    });
+
+    if (autoplay) {
+      this.video.play().catch((error) => {
+        this.warn("VideoEmbed: Autoplay failed:", error);
+        this.dispatchCustomEvent("error", {
+          message: "Autoplay failed",
+          error,
+        });
+      });
+    }
+  }
+
+  private setupVideoEvents() {
+    if (!this.video) return;
+
+    this.video.addEventListener("play", () => {
+      this.#playing = true;
+      this.classList.add("is-playing");
+      if (this.setCustomControlState) {
+        this.setCustomControlState(true);
+      }
+      this.dispatchCustomEvent("play", {
+        url: this.#url,
+        currentTime: this.video?.currentTime || 0,
+      });
+    });
+
+    this.video.addEventListener("pause", () => {
+      this.#playing = false;
+      this.classList.remove("is-playing");
+      if (this.setCustomControlState) {
+        this.setCustomControlState(false);
+      }
+      this.dispatchCustomEvent("pause", {
+        url: this.#url,
+        currentTime: this.video?.currentTime || 0,
+      });
+    });
+
+    this.video.addEventListener("ended", () => {
+      this.#playing = false;
+      this.classList.remove("is-playing");
+      if (this.setCustomControlState) {
+        this.setCustomControlState(false);
+      }
+      this.dispatchCustomEvent("ended", {
+        url: this.#url,
+      });
+    });
+
+    this.video.addEventListener("timeupdate", () => {
+      this.dispatchCustomEvent("timeupdate", {
+        url: this.#url,
+        currentTime: this.video?.currentTime || 0,
+        duration: this.video?.duration || 0,
+      });
+    });
+
+    this.video.addEventListener("volumechange", () => {
+      this.#muted = this.video?.muted || false;
+      this.dispatchCustomEvent("volumechange", {
+        muted: this.#muted,
+        volume: this.video?.volume || 0,
+      });
+    });
+
+    this.video.addEventListener("error", (e) => {
+      this.error("VideoEmbed: 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.",
+      );
+    });
+
+    this.video.addEventListener("loadedmetadata", () => {
+      this.dispatchCustomEvent("loadedmetadata", {
+        duration: this.video?.duration || 0,
+        videoWidth: this.video?.videoWidth || 0,
+        videoHeight: this.video?.videoHeight || 0,
+      });
+    });
+  }
+
+  private addCustomControls() {
+    this.classList.add("video-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: boolean) => {
+      isPlaying = playing;
+      if (playing) {
+        this.classList.add("is-playing");
+      } else {
+        this.classList.remove("is-playing");
+      }
+    };
+
+    const togglePlayPause = () => {
+      if (this.video) {
+        if (isPlaying) {
+          this.video.pause();
+          setPlayingState(false);
+        } else {
+          this.video.play().catch((error) => {
+            this.warn("VideoEmbed: Play failed:", error);
+          });
+          setPlayingState(true);
+        }
+      }
+    };
+
+    this.setCustomControlState = setPlayingState;
+
+    buttonOverlay.addEventListener("click", togglePlayPause);
+    if (this.playPauseButton) {
+      buttonOverlay.appendChild(this.playPauseButton);
+    }
+    this.appendChild(buttonOverlay);
+  }
+
+  #updateBackgroundMode() {
+    if (this.#background) {
+      this.classList.add("is-background");
+      this.#autoplay = true;
+      this.#muted = true;
+      this.#controls = false;
+      this.#lazy = false;
+      // Reflect the forced property changes back to attributes
+      this.#reflectBooleanAttribute("autoplay", true);
+      this.#reflectBooleanAttribute("muted", true);
+      this.#reflectBooleanAttribute("controls", false);
+      this.#reflectBooleanAttribute("lazy", false);
+    } else {
+      this.classList.remove("is-background");
+    }
+  }
+
+  // Public API methods
+  public async play(): Promise<void> {
+    if (this.#lazy && !this.video) {
+      this.log(
+        "VideoEmbed: Lazy video needs to be loaded first. Initializing...",
+      );
+      this.setAttribute("data-should-autoplay", "true");
+      this.initializePlayer();
+      await new Promise((resolve) => setTimeout(resolve, 500));
+    }
+
+    this.removeAttribute("data-should-autoplay");
+
+    if (this.video) {
+      try {
+        await this.video.play();
+        this.log("VideoEmbed: Video playback started.");
+      } catch (error) {
+        this.warn("VideoEmbed: Play failed:", error);
+        this.dispatchCustomEvent("error", {
+          message: "Failed to play video",
+          error,
+        });
+      }
+    }
+  }
+
+  public pause(): void {
+    if (this.video) {
+      this.video.pause();
+      this.log("VideoEmbed: Video paused.");
+    }
+  }
+
+  public stopVideo(): void {
+    if (this.video) {
+      this.video.pause();
+      this.video.currentTime = 0;
+      this.log("VideoEmbed: Video stopped.");
+      this.dispatchCustomEvent("stop", {
+        url: this.#url,
+      });
+    }
+  }
+
+  public mute(): void {
+    if (this.video) {
+      this.video.muted = true;
+      this.#muted = true;
+      this.#reflectBooleanAttribute("muted", true);
+      this.log("VideoEmbed: Video muted.");
+    }
+  }
+
+  public unmute(): void {
+    if (this.video) {
+      this.video.muted = false;
+      this.#muted = false;
+      this.#reflectBooleanAttribute("muted", false);
+      this.log("VideoEmbed: Video unmuted.");
+    }
+  }
+
+  public togglePlay(): void {
+    if (this.#playing) {
+      this.pause();
+    } else {
+      this.play();
+    }
+  }
+
+  public toggleMute(): void {
+    if (this.#muted) {
+      this.unmute();
+    } else {
+      this.mute();
+    }
+  }
+
+  public loadVideo(url?: string): void {
+    if (url) {
+      this.#url = url;
+      this.#reflectAttribute("url", url);
+    }
+
+    if (this.#lazy && !this.video) {
+      this.initializePlayer();
+      return;
+    }
+
+    if (this.initialized) {
+      this.reinitializePlayer();
+    }
+  }
+
+  public getPlayerState() {
+    return {
+      playing: this.#playing,
+      muted: this.#muted,
+      url: this.#url,
+      ready: this.playerReady,
+      initialized: this.initialized,
+    };
+  }
+
+  public getCurrentTime(): number {
+    return this.video?.currentTime || 0;
+  }
+
+  public getDuration(): number {
+    return this.video?.duration || 0;
+  }
+
+  public setCurrentTime(time: number): void {
+    if (this.video) {
+      this.video.currentTime = time;
+    }
+  }
+
+  public setVolume(volume: number): void {
+    if (this.video) {
+      this.video.volume = Math.max(0, Math.min(1, volume));
+    }
+  }
+
+  public getVolume(): number {
+    return this.video?.volume || 0;
+  }
+
+  public isPlaying(): boolean {
+    return this.#playing;
+  }
+
+  public isMuted(): boolean {
+    return this.#muted;
+  }
+
+  public enterFullscreen(): Promise<void> {
+    // Use the video element for fullscreen to be compatible with native controls
+    const elem = (this.video || this) as any;
+    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"));
+  }
+
+  public exitFullscreen(): Promise<void> {
+    const doc = document as any;
+    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"));
+  }
+
+  public async toggleFullscreen(): Promise<void> {
+    try {
+      if (this.isFullscreen()) {
+        await this.exitFullscreen();
+      } else {
+        await this.enterFullscreen();
+      }
+    } catch (error) {
+      this.warn("VideoEmbed: Toggle fullscreen failed:", error);
+      throw error;
+    }
+  }
+
+  public isFullscreen(): boolean {
+    const doc = document as any;
+    const fullscreenElement =
+      doc.fullscreenElement ||
+      doc.webkitFullscreenElement ||
+      doc.mozFullScreenElement ||
+      doc.msFullscreenElement;
+    // Check if either the custom element or video element is fullscreen
+    return fullscreenElement === this || fullscreenElement === this.video;
+  }
+}
+
+customElements.define("video-embed", VideoEmbed);
+
+export {};