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

package/src/components/VideoEmbed.ts

@@ -0,0 +1,870 @@
+import { BaseVideoEmbed } from "./BaseVideoEmbed.js";
+
+export class VideoEmbed extends BaseVideoEmbed {
+  private video: HTMLVideoElement | null = null;
+
+  // Video-specific properties
+  #url: string = "";
+  #loop: boolean = false;
+  #preload: "" | "none" | "metadata" | "auto" = "metadata";
+
+  static get observedAttributes() {
+    return [
+      "url",
+      "autoplay",
+      "controls",
+      "lazy",
+      "muted",
+      "poster",
+      "background",
+      "loop",
+      "preload",
+    ];
+  }
+
+  protected getComponentName(): string {
+    return "VideoEmbed";
+  }
+
+  attributeChangedCallback(
+    name: string,
+    oldValue: string | null,
+    newValue: string | null,
+  ) {
+    if (this.updatingAttribute) {
+      return;
+    }
+
+    this.log(`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
+  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) {
+    // 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: boolean) {
+    this._lazy = value;
+    this.reflectBooleanAttribute("lazy", value);
+  }
+
+  get muted() {
+    return this._muted;
+  }
+  set muted(value: boolean) {
+    // 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: 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;
+    }
+  }
+
+  // Implement abstract methods
+  protected handlePlay(): void {
+    if (this.video) {
+      this.video.play().catch((error) => {
+        this.warn("Play failed:", error);
+      });
+    }
+  }
+
+  protected handlePause(): void {
+    if (this.video) {
+      this.video.pause();
+    }
+  }
+
+  protected override handleRetry(): void {
+    if (this.#url) {
+      this.initializePlayer();
+    }
+  }
+
+  private setupFullscreenListener(): void {
+    const handleFullscreenChange = (event: Event) => {
+      if (!event.isTrusted) return;
+
+      const doc = document as any;
+      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);
+  }
+
+  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("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 as EventListener);
+  }
+
+  private 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: EventListener = () => {
+      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: KeyboardEvent) => {
+      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 as EventListener,
+    );
+
+    this.appendChild(buttonOverlay);
+
+    this.log("Poster displayed for lazy loading");
+  }
+
+  protected async initializePlayer(): Promise<void> {
+    this.log("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("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 = 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("video-embed-container");
+    }
+
+    this.playerReady = true;
+    this.dispatchCustomEvent("ready", {
+      url: this.#url,
+      muted: this._muted,
+    });
+
+    if (autoplay) {
+      this.video.play().catch((error) => {
+        this.warn("Autoplay failed:", error);
+        this.dispatchCustomEvent("error", {
+          message: "Autoplay failed",
+          error,
+        });
+      });
+    }
+  }
+
+  protected reinitializePlayer(): void {
+    if (!this.initialized || !this.#url) {
+      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();
+    }
+  }
+
+  protected destroyPlayer(): void {
+    if (this.video) {
+      this.video.pause();
+      this.video.src = "";
+      this.video.load();
+      this.video = null;
+    }
+  }
+
+  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("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", () => {
+      const width = this.video?.videoWidth || 0;
+      const height = this.video?.videoHeight || 0;
+
+      // Automatically set aspect ratio CSS custom properties
+      if (width > 0 && height > 0) {
+        this.setAspectRatio(width, height);
+      }
+
+      this.dispatchCustomEvent("loadedmetadata", {
+        duration: this.video?.duration || 0,
+        videoWidth: width,
+        videoHeight: height,
+      });
+    });
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    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("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;
+  }
+
+  override 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
+  public async play(): Promise<void> {
+    if (this._lazy && !this.video) {
+      this.log("Lazy video needs to be loaded first. Initializing...");
+      this.setAttribute("data-should-autoplay", "true");
+      await this.initializePlayer();
+      await new Promise((resolve) => setTimeout(resolve, 500));
+    }
+
+    this.removeAttribute("data-should-autoplay");
+
+    if (this.video) {
+      try {
+        await this.video.play();
+        this.log("Video playback started.");
+      } catch (error) {
+        this.warn("Play failed:", error);
+        this.dispatchCustomEvent("error", {
+          message: "Failed to play video",
+          error,
+        });
+      }
+    }
+  }
+
+  public pause(): void {
+    if (this.video) {
+      this.video.pause();
+      this.log("Video paused.");
+    }
+  }
+
+  public stopVideo(): void {
+    if (this.video) {
+      this.video.pause();
+      this.video.currentTime = 0;
+      this.log("Video stopped.");
+      this.dispatchCustomEvent("stop", {
+        url: this.#url,
+      });
+    }
+  }
+
+  public mute(): void {
+    this._muted = true;
+    this.reflectBooleanAttribute("muted", true);
+    if (this.video) {
+      this.video.muted = true;
+    }
+    this.log("Video muted.");
+  }
+
+  public unmute(): void {
+    this._muted = false;
+    this.reflectBooleanAttribute("muted", false);
+    if (this.video) {
+      this.video.muted = false;
+    }
+    this.log("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> {
+    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("Toggle fullscreen failed:", error);
+      throw error;
+    }
+  }
+
+  public isFullscreen(): boolean {
+    const doc = document as any;
+    const fullscreenElement =
+      doc.fullscreenElement ||
+      doc.webkitFullscreenElement ||
+      doc.mozFullScreenElement ||
+      doc.msFullscreenElement;
+    return fullscreenElement === this || fullscreenElement === this.video;
+  }
+
+  public static override toggleDebug(forceState?: boolean): void {
+    BaseVideoEmbed.toggleDebug(forceState);
+  }
+}
+
+customElements.define("video-embed", VideoEmbed);
+
+export {};