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

package/src/components/VideoEmbed.ts

@@ -37,6 +37,12 @@ export class VideoEmbed extends BaseVideoEmbed {
 
     this.log(`Attribute changed - ${name}: ${oldValue} -> ${newValue}`);
 
+    // Try common attribute handling first
+    if (this.handleCommonAttributeChange(name, oldValue, newValue)) {
+      return;
+    }
+
+    // Handle VideoEmbed-specific attributes
     switch (name) {
       case "url":
         this.#url = newValue || "";
@@ -44,44 +50,6 @@ export class VideoEmbed extends BaseVideoEmbed {
           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) {
@@ -499,6 +467,29 @@ export class VideoEmbed extends BaseVideoEmbed {
     }
   }
 
+  /**
+   * Sync methods for common attributes (required by BaseVideoEmbed)
+   */
+  protected syncMutedState(): void {
+    if (this.video) {
+      this.video.muted = this._muted;
+    }
+  }
+
+  protected syncControlsState(): void {
+    if (this.video) {
+      this.video.controls = this._controls;
+    }
+  }
+
+  protected syncPosterState(): void {
+    if (this._lazy && !this.video) {
+      this.showPoster();
+    } else if (this.video) {
+      this.video.poster = this._poster;
+    }
+  }
+
   private setupVideoEvents() {
     if (!this.video) return;
 
@@ -675,7 +666,7 @@ export class VideoEmbed extends BaseVideoEmbed {
   }
 
   // Public API methods
-  public async play(): Promise<void> {
+  public override 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");
@@ -699,7 +690,7 @@ export class VideoEmbed extends BaseVideoEmbed {
     }
   }
 
-  public pause(): void {
+  public override pause(): void {
     if (this.video) {
       this.video.pause();
       this.log("Video paused.");

package/src/components/VimeoEmbed.ts

@@ -1,15 +1,13 @@
 import { BaseVideoEmbed } from "./BaseVideoEmbed.js";
+import { APILoader } from "../utils/APILoader.js";
 
 export class VimeoEmbed extends BaseVideoEmbed {
   private iframe: HTMLIFrameElement | null = null;
   private player: any = null; // Vimeo Player instance
-  private static apiLoaded = false;
-  private static apiReady = false;
   private static readonly MAX_API_RETRIES = 3;
   private static readonly API_RETRY_DELAY = 2000;
   private static readonly API_LOAD_TIMEOUT = 10000;
   private updatingMutedState = false;
-  private apiLoadRetries = 0;
 
   /** The full Vimeo URL (e.g., "https://vimeo.com/...") */
   #url: string = "";
@@ -46,6 +44,12 @@ export class VimeoEmbed extends BaseVideoEmbed {
       `VimeoEmbed: Attribute changed - ${name}: ${oldValue} -> ${newValue}`,
     );
 
+    // Try common attribute handling first
+    if (this.handleCommonAttributeChange(name, oldValue, newValue)) {
+      return;
+    }
+
+    // Handle Vimeo-specific attributes
     switch (name) {
       case "url":
         this.#url = newValue || "";
@@ -60,42 +64,6 @@ export class VimeoEmbed extends BaseVideoEmbed {
           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.initialized) {
-          this.reinitializePlayer();
-        }
-        break;
-      case "lazy":
-        this._lazy = newValue !== null;
-        break;
-      case "muted":
-        this._muted = newValue !== null;
-        if (this.player && this.playerReady) {
-          this.player.setVolume(this._muted ? 0 : 1);
-        }
-        break;
-      case "poster":
-        this._poster = newValue || "";
-        if (this._lazy && !this.player) {
-          this.showPoster(this.#videoId);
-        }
-        break;
-      case "background":
-        this._background = newValue !== null;
-        this.updateBackgroundMode();
-        break;
       case "player-vars":
         try {
           this.#playerVars = newValue ? JSON.parse(newValue) : {};
@@ -275,7 +243,6 @@ export class VimeoEmbed extends BaseVideoEmbed {
   }
 
   protected override handleRetry(): void {
-    this.apiLoadRetries = 0;
     if (this.#videoId) {
       this.initializePlayer(this.#videoId);
     }
@@ -296,6 +263,27 @@ export class VimeoEmbed extends BaseVideoEmbed {
     }
   }
 
+  /**
+   * Sync methods for common attributes (required by BaseVideoEmbed)
+   */
+  protected syncMutedState(): void {
+    if (this.player && this.playerReady) {
+      this.player.setVolume(this._muted ? 0 : 1);
+    }
+  }
+
+  protected syncControlsState(): void {
+    if (this.initialized) {
+      this.reinitializePlayer();
+    }
+  }
+
+  protected syncPosterState(): void {
+    if (this._lazy && !this.player) {
+      this.showPoster(this.#videoId);
+    }
+  }
+
   private isValidPosterUrl(url: string): boolean {
     if (!url) return false;
     try {
@@ -406,7 +394,6 @@ export class VimeoEmbed extends BaseVideoEmbed {
     const retryButton = errorDiv.querySelector(".retry-button");
     if (retryButton) {
       retryButton.addEventListener("click", () => {
-        this.apiLoadRetries = 0;
         errorDiv.remove();
         if (this.#videoId) {
           this.initializePlayer(this.#videoId);
@@ -680,7 +667,7 @@ export class VimeoEmbed extends BaseVideoEmbed {
     }
 
     try {
-      await VimeoEmbed.loadVimeoAPIWithRetry(this.apiLoadRetries);
+      await VimeoEmbed.loadVimeoAPIWithRetry();
 
       // Check if component was disconnected during API load
       if (!this.isConnected || !iframe.isConnected) {
@@ -773,73 +760,17 @@ export class VimeoEmbed extends BaseVideoEmbed {
     }
   }
 
-  private static async loadVimeoAPI(): Promise<void> {
-    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
+   * Load Vimeo API using the shared APILoader utility
    */
-  private static async loadVimeoAPIWithRetry(retries = 0): Promise<void> {
-    try {
-      await this.loadVimeoAPI();
-    } catch (error) {
-      if (retries < this.MAX_API_RETRIES) {
-        console.warn(
-          `VimeoEmbed: API load failed, retrying (${retries + 1}/${
-            this.MAX_API_RETRIES
-          })...`,
-        );
-        await new Promise((resolve) =>
-          setTimeout(resolve, this.API_RETRY_DELAY),
-        );
-        return this.loadVimeoAPIWithRetry(retries + 1);
-      }
-      throw error;
-    }
+  private static async loadVimeoAPIWithRetry(): Promise<void> {
+    return APILoader.loadScript("vimeo", {
+      scriptUrl: "https://player.vimeo.com/api/player.js",
+      globalCheck: () => typeof (window as any).Vimeo !== "undefined",
+      timeout: this.API_LOAD_TIMEOUT,
+      maxRetries: this.MAX_API_RETRIES,
+      retryDelay: this.API_RETRY_DELAY,
+    });
   }
 
   protected override addCustomControls(containerClass: string) {
@@ -884,7 +815,7 @@ export class VimeoEmbed extends BaseVideoEmbed {
     this.appendChild(buttonOverlay);
   }
 
-  public async play(): Promise<void> {
+  public override async play(): Promise<void> {
     if (this._lazy && !this.player && !this.iframe) {
       this.log(
         "VimeoEmbed: Lazy video needs to be loaded first. Initializing...",
@@ -925,7 +856,7 @@ export class VimeoEmbed extends BaseVideoEmbed {
     this.dispatchCustomEvent("play");
   }
 
-  public pause() {
+  public override pause() {
     if (this.player) {
       this.player.pause();
       this.log("VimeoEmbed: Video paused via API.");

package/src/components/YouTubeEmbed.ts

@@ -1,16 +1,13 @@
 import { BaseVideoEmbed } from "./BaseVideoEmbed.js";
+import { APILoader } from "../utils/APILoader.js";
 
 export class YouTubeEmbed extends BaseVideoEmbed {
   private iframe: HTMLIFrameElement | null = null;
   private player: YT["Player"] | null = null;
-  private static apiLoaded = false;
-  private static apiReady = false;
-  private static apiLoadingPromise: Promise<void> | null = null;
   private static readonly MAX_API_RETRIES = 3;
   private static readonly API_RETRY_DELAY = 2000;
   private static readonly API_LOAD_TIMEOUT = 10000;
   private updatingMutedState = false; // Flag to prevent sync from overwriting programmatic mute changes
-  private apiLoadRetries = 0;
 
   /** The full YouTube URL (e.g., "https://www.youtube.com/watch?v=...") */
   #url: string = "";
@@ -48,6 +45,12 @@ export class YouTubeEmbed extends BaseVideoEmbed {
       `YouTubeEmbed: Attribute changed - ${name}: ${oldValue} -> ${newValue}`,
     );
 
+    // Try common attribute handling first
+    if (this.handleCommonAttributeChange(name, oldValue, newValue)) {
+      return;
+    }
+
+    // Handle YouTube-specific attributes
     switch (name) {
       case "url":
         this.#url = newValue || "";
@@ -63,46 +66,6 @@ export class YouTubeEmbed extends BaseVideoEmbed {
           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.initialized) {
-          this.reinitializePlayer();
-        }
-        break;
-      case "lazy":
-        this._lazy = newValue !== null;
-        break;
-      case "muted":
-        this._muted = newValue !== null;
-        if (this.player && this.playerReady) {
-          if (this._muted) {
-            this.player.mute();
-          } else {
-            this.player.unMute();
-          }
-        }
-        break;
-      case "poster":
-        this._poster = newValue || "";
-        if (this._lazy && !this.player) {
-          this.showPoster(this.#videoId);
-        }
-        break;
-      case "background":
-        this._background = newValue !== null;
-        this.updateBackgroundMode();
-        break;
       case "player-vars":
         try {
           this.#playerVars = newValue ? JSON.parse(newValue) : {};
@@ -338,7 +301,6 @@ export class YouTubeEmbed extends BaseVideoEmbed {
   }
 
   protected override handleRetry(): void {
-    this.apiLoadRetries = 0;
     if (this.#videoId) {
       this.initializePlayer(this.#videoId);
     }
@@ -359,6 +321,31 @@ export class YouTubeEmbed extends BaseVideoEmbed {
     }
   }
 
+  /**
+   * Sync methods for common attributes (required by BaseVideoEmbed)
+   */
+  protected syncMutedState(): void {
+    if (this.player && this.playerReady) {
+      if (this._muted) {
+        this.player.mute();
+      } else {
+        this.player.unMute();
+      }
+    }
+  }
+
+  protected syncControlsState(): void {
+    if (this.initialized) {
+      this.reinitializePlayer();
+    }
+  }
+
+  protected syncPosterState(): void {
+    if (this._lazy && !this.player) {
+      this.showPoster(this.#videoId);
+    }
+  }
+
   private isValidPosterUrl(url: string): boolean {
     if (!url) return false;
     try {
@@ -470,7 +457,6 @@ export class YouTubeEmbed extends BaseVideoEmbed {
     const retryButton = errorDiv.querySelector(".retry-button");
     if (retryButton) {
       retryButton.addEventListener("click", () => {
-        this.apiLoadRetries = 0;
         errorDiv.remove();
         if (this.#videoId) {
           this.initializePlayer(this.#videoId);
@@ -735,7 +721,7 @@ export class YouTubeEmbed extends BaseVideoEmbed {
 
     // Initialize the YouTube API player - it will create the iframe
     try {
-      await YouTubeEmbed.loadYouTubeAPIWithRetry(this.apiLoadRetries);
+      await YouTubeEmbed.loadYouTubeAPIWithRetry();
       this.player = new YT.Player(playerContainer, {
         videoId,
         playerVars,
@@ -876,81 +862,19 @@ export class YouTubeEmbed extends BaseVideoEmbed {
     }
   }
 
-  private static async loadYouTubeAPI(): Promise<void> {
-    // If API is already ready, return immediately
-    if (this.apiReady) {
-      return Promise.resolve();
-    }
-
-    // If another instance is already loading, wait for that promise
-    if (this.apiLoadingPromise) {
-      return this.apiLoadingPromise;
-    }
-
-    // Create a new loading promise that all instances will share
-    this.apiLoadingPromise = new Promise((resolve, reject) => {
-      const timeoutId = setTimeout(() => {
-        cleanup();
-        this.apiLoadingPromise = null;
-        reject(
-          new Error(
-            "YouTube API loading timeout. The API script may be blocked by an ad blocker or network issue.",
-          ),
-        );
-      }, this.API_LOAD_TIMEOUT);
-
-      const cleanup = () => {
-        clearTimeout(timeoutId);
-        delete window.onYouTubeIframeAPIReady;
-      };
-
-      // Only add the script if it hasn't been added yet
-      if (!this.apiLoaded) {
-        const script = document.createElement("script");
-        script.src = "https://www.youtube.com/iframe_api";
-        script.onerror = () => {
-          cleanup();
-          this.apiLoadingPromise = null;
-          reject(
-            new Error(
-              "Failed to load YouTube API script. Please check your network connection or disable ad blockers.",
-            ),
-          );
-        };
-        document.head.appendChild(script);
-        this.apiLoaded = true;
-      }
-
-      window.onYouTubeIframeAPIReady = () => {
-        this.apiReady = true;
-        cleanup();
-        resolve();
-      };
-    });
-
-    return this.apiLoadingPromise;
-  }
-
   /**
-   * Load YouTube API with retry mechanism
+   * Load YouTube API using the shared APILoader utility
    */
-  private static async loadYouTubeAPIWithRetry(retries = 0): Promise<void> {
-    try {
-      await this.loadYouTubeAPI();
-    } catch (error) {
-      if (retries < this.MAX_API_RETRIES) {
-        console.warn(
-          `YouTubeEmbed: API load failed, retrying (${retries + 1}/${
-            this.MAX_API_RETRIES
-          })...`,
-        );
-        await new Promise((resolve) =>
-          setTimeout(resolve, this.API_RETRY_DELAY),
-        );
-        return this.loadYouTubeAPIWithRetry(retries + 1);
-      }
-      throw error;
-    }
+  private static async loadYouTubeAPIWithRetry(): Promise<void> {
+    return APILoader.loadScript("youtube", {
+      scriptUrl: "https://www.youtube.com/iframe_api",
+      globalCheck: () =>
+        typeof YT !== "undefined" && typeof YT.Player !== "undefined",
+      globalCallback: "onYouTubeIframeAPIReady",
+      timeout: this.API_LOAD_TIMEOUT,
+      maxRetries: this.MAX_API_RETRIES,
+      retryDelay: this.API_RETRY_DELAY,
+    });
   }
 
   protected override addCustomControls(containerClass: string) {
@@ -1018,7 +942,7 @@ export class YouTubeEmbed extends BaseVideoEmbed {
    *
    * @see https://developers.google.com/youtube/iframe_api_reference#playVideo
    */
-  public async play(): Promise<void> {
+  public override async play(): Promise<void> {
     // Check if this is a lazy-loaded video that hasn't been initialized yet
     if (this._lazy && !this.player && !this.iframe) {
       this.log(
@@ -1084,7 +1008,7 @@ export class YouTubeEmbed extends BaseVideoEmbed {
    *
    * @see https://developers.google.com/youtube/iframe_api_reference#pauseVideo
    */
-  public pause() {
+  public override pause() {
     if (this.player && typeof this.player.pauseVideo === "function") {
       this.player.pauseVideo();
       this.log("YouTubeEmbed: Video paused via API.");