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

package/dist/utils/APILoader.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Shared utility for loading external API scripts (YouTube, Vimeo, etc.)
+ * Provides retry mechanism, timeout handling, and deduplication.
+ */
+export interface APILoaderConfig {
+    /** URL of the script to load */
+    scriptUrl: string;
+    /** Function to check if the API is ready (e.g., checking global variables) */
+    globalCheck: () => boolean;
+    /** Optional global callback function name (e.g., 'onYouTubeIframeAPIReady') */
+    globalCallback?: string;
+    /** Timeout in milliseconds (default: 10000) */
+    timeout?: number;
+    /** Maximum retry attempts (default: 3) */
+    maxRetries?: number;
+    /** Delay between retries in milliseconds (default: 2000) */
+    retryDelay?: number;
+    /** Polling interval for checking API readiness in milliseconds (default: 100) */
+    pollInterval?: number;
+}
+/**
+ * APILoader class handles loading external scripts with retry logic and deduplication.
+ * Multiple components can request the same API without duplicate loads.
+ */
+export declare class APILoader {
+    private static loadingPromises;
+    private static loadedScripts;
+    private static readyApis;
+    /**
+     * Load an external API script with retry mechanism.
+     * @param key - Unique identifier for this API (e.g., 'youtube', 'vimeo')
+     * @param config - Configuration for loading the script
+     * @returns Promise that resolves when the API is ready
+     */
+    static loadScript(key: string, config: APILoaderConfig): Promise<void>;
+    /**
+     * Internal method to load script with retry logic.
+     */
+    private static loadWithRetry;
+    /**
+     * Internal method to load script once.
+     * Handles deduplication and manages loading state.
+     */
+    private static loadScriptOnce;
+    /**
+     * Check if an API is ready without loading it.
+     * Useful for testing or conditional logic.
+     */
+    static isReady(key: string): boolean;
+    /**
+     * Reset the loader state (mainly for testing).
+     */
+    static reset(): void;
+}
+//# sourceMappingURL=APILoader.d.ts.map

package/dist/utils/APILoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"APILoader.d.ts","sourceRoot":"","sources":["../../src/utils/APILoader.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,eAAe;IAC9B,gCAAgC;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,8EAA8E;IAC9E,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,qBAAa,SAAS;IACpB,OAAO,CAAC,MAAM,CAAC,eAAe,CAAoC;IAClE,OAAO,CAAC,MAAM,CAAC,aAAa,CAAqB;IACjD,OAAO,CAAC,MAAM,CAAC,SAAS,CAAqB;IAE7C;;;;;OAKG;WACU,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC;IAM5E;;OAEG;mBACkB,aAAa;IA2BlC;;;OAGG;mBACkB,cAAc;IAkGnC;;;OAGG;IACH,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAIpC;;OAEG;IACH,MAAM,CAAC,KAAK,IAAI,IAAI;CAKrB"}

package/dist/utils/APILoader.js

@@ -0,0 +1,148 @@
+/**
+ * Shared utility for loading external API scripts (YouTube, Vimeo, etc.)
+ * Provides retry mechanism, timeout handling, and deduplication.
+ */
+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());
+    });
+};
+/**
+ * APILoader class handles loading external scripts with retry logic and deduplication.
+ * Multiple components can request the same API without duplicate loads.
+ */
+export class APILoader {
+    /**
+     * Load an external API script with retry mechanism.
+     * @param key - Unique identifier for this API (e.g., 'youtube', 'vimeo')
+     * @param config - Configuration for loading the script
+     * @returns Promise that resolves when the API is ready
+     */
+    static loadScript(key, config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { maxRetries = 3, retryDelay = 2000 } = config;
+            return this.loadWithRetry(key, config, 0, maxRetries, retryDelay);
+        });
+    }
+    /**
+     * Internal method to load script with retry logic.
+     */
+    static loadWithRetry(key, config, retries, maxRetries, retryDelay) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                yield this.loadScriptOnce(key, config);
+            }
+            catch (error) {
+                if (retries < maxRetries) {
+                    console.warn(`${key} API load failed, retrying (${retries + 1}/${maxRetries})...`);
+                    yield new Promise((resolve) => setTimeout(resolve, retryDelay));
+                    return this.loadWithRetry(key, config, retries + 1, maxRetries, retryDelay);
+                }
+                throw error;
+            }
+        });
+    }
+    /**
+     * Internal method to load script once.
+     * Handles deduplication and manages loading state.
+     */
+    static loadScriptOnce(key, config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { scriptUrl, globalCheck, globalCallback, timeout = 10000, pollInterval = 100, } = config;
+            // Already ready
+            if (this.readyApis.has(key)) {
+                return Promise.resolve();
+            }
+            // Already loading - wait for existing promise
+            if (this.loadingPromises.has(key)) {
+                return this.loadingPromises.get(key);
+            }
+            // Create new loading promise
+            const promise = new Promise((resolve, reject) => {
+                const timeoutId = setTimeout(() => {
+                    cleanup();
+                    this.loadingPromises.delete(key);
+                    reject(new Error(`${key} API loading timeout. The API script may be blocked by an ad blocker or network issue.`));
+                }, timeout);
+                const cleanup = () => {
+                    clearTimeout(timeoutId);
+                    if (globalCallback) {
+                        delete window[globalCallback];
+                    }
+                };
+                // Add script if not already loaded
+                if (!this.loadedScripts.has(key)) {
+                    const script = document.createElement("script");
+                    script.src = scriptUrl;
+                    script.onerror = () => {
+                        cleanup();
+                        this.loadingPromises.delete(key);
+                        reject(new Error(`Failed to load ${key} API script. Please check your network connection or disable ad blockers.`));
+                    };
+                    // If there's a global callback (YouTube style)
+                    if (globalCallback) {
+                        window[globalCallback] = () => {
+                            this.readyApis.add(key);
+                            this.loadingPromises.delete(key);
+                            cleanup();
+                            resolve();
+                        };
+                    }
+                    else {
+                        // Poll for readiness (Vimeo style)
+                        script.onload = () => {
+                            const checkReady = setInterval(() => {
+                                if (globalCheck()) {
+                                    this.readyApis.add(key);
+                                    this.loadingPromises.delete(key);
+                                    clearInterval(checkReady);
+                                    cleanup();
+                                    resolve();
+                                }
+                            }, pollInterval);
+                        };
+                    }
+                    document.head.appendChild(script);
+                    this.loadedScripts.add(key);
+                }
+                else if (!this.readyApis.has(key)) {
+                    // Script already added but not ready yet - poll for readiness
+                    const checkReady = setInterval(() => {
+                        if (globalCheck()) {
+                            this.readyApis.add(key);
+                            this.loadingPromises.delete(key);
+                            clearInterval(checkReady);
+                            cleanup();
+                            resolve();
+                        }
+                    }, pollInterval);
+                }
+            });
+            this.loadingPromises.set(key, promise);
+            return promise;
+        });
+    }
+    /**
+     * Check if an API is ready without loading it.
+     * Useful for testing or conditional logic.
+     */
+    static isReady(key) {
+        return this.readyApis.has(key);
+    }
+    /**
+     * Reset the loader state (mainly for testing).
+     */
+    static reset() {
+        this.loadingPromises.clear();
+        this.loadedScripts.clear();
+        this.readyApis.clear();
+    }
+}
+APILoader.loadingPromises = new Map();
+APILoader.loadedScripts = new Set();
+APILoader.readyApis = new Set();
+//# sourceMappingURL=APILoader.js.map

package/dist/utils/APILoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"APILoader.js","sourceRoot":"","sources":["../../src/utils/APILoader.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smartimpact-it/modern-video-embed",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "Modern YouTube and Vimeo embed web components with lazy loading, accessibility, quality control, and comprehensive API",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/components/BaseVideoEmbed.ts

@@ -35,6 +35,15 @@ export abstract class BaseVideoEmbed extends HTMLElement {
   protected abstract reinitializePlayer(): void;
   protected abstract destroyPlayer(): void;
   protected abstract getComponentName(): string;
+  protected abstract handlePlay(): void;
+  protected abstract handlePause(): void;
+
+  /**
+   * Abstract methods for component-specific attribute handling
+   */
+  protected abstract syncMutedState(): void;
+  protected abstract syncControlsState(): void;
+  protected abstract syncPosterState(): void;
 
   /**
    * Logging utilities
@@ -89,6 +98,72 @@ export abstract class BaseVideoEmbed extends HTMLElement {
     this.updatingAttribute = false;
   }
 
+  /**
+   * Common attribute change handler for attributes shared across all components.
+   * Returns true if the attribute was handled, false otherwise.
+   * Subclasses should call this first, then handle component-specific attributes.
+   */
+  protected handleCommonAttributeChange(
+    name: string,
+    _oldValue: string | null,
+    newValue: string | null,
+  ): boolean {
+    switch (name) {
+      case "autoplay":
+        this._autoplay = newValue !== null;
+        if (
+          !this._playing &&
+          this._autoplay &&
+          !this._lazy &&
+          this.initialized
+        ) {
+          this.play();
+        }
+        return true;
+
+      case "lazy":
+        this._lazy = newValue !== null;
+        return true;
+
+      case "muted":
+        this._muted = newValue !== null;
+        this.syncMutedState();
+        return true;
+
+      case "controls":
+        this._controls = newValue !== null;
+        this.syncControlsState();
+        return true;
+
+      case "poster":
+        this._poster = newValue || "";
+        this.syncPosterState();
+        return true;
+
+      case "background":
+        this._background = newValue !== null;
+        this.updateBackgroundMode();
+        return true;
+
+      default:
+        return false; // Not handled by base class
+    }
+  }
+
+  /**
+   * Public play method - subclasses can override
+   */
+  public play(): void {
+    this.handlePlay();
+  }
+
+  /**
+   * Public pause method - subclasses can override
+   */
+  public pause(): void {
+    this.handlePause();
+  }
+
   /**
    * Error message display (common across all components)
    */
@@ -148,6 +223,38 @@ export abstract class BaseVideoEmbed extends HTMLElement {
     }
   }
 
+  /**
+   * Automatically set aspect ratio CSS custom properties
+   * This allows background videos to maintain correct proportions
+   */
+  protected setAspectRatio(width: number, height: number): void {
+    if (width > 0 && height > 0) {
+      // Calculate GCD for simplest ratio
+      const gcd = (a: number, b: number): number =>
+        b === 0 ? a : gcd(b, a % b);
+      const divisor = gcd(width, height);
+      const aspectWidth = width / divisor;
+      const aspectHeight = height / divisor;
+
+      this.style.setProperty("--si-embed-aspect-width", aspectWidth.toString());
+      this.style.setProperty(
+        "--si-embed-aspect-height",
+        aspectHeight.toString(),
+      );
+
+      // Also update the padding-top percentage for normal mode
+      const aspectRatioPercent = (height / width) * 100;
+      this.style.setProperty(
+        "--si-embed-video-aspect-ratio",
+        `${aspectRatioPercent}%`,
+      );
+
+      this.log(
+        `Aspect ratio auto-detected: ${aspectWidth}:${aspectHeight} (${width}x${height})`,
+      );
+    }
+  }
+
   /**
    * Custom controls creation (similar pattern across components)
    */
@@ -189,12 +296,6 @@ export abstract class BaseVideoEmbed extends HTMLElement {
     this.appendChild(buttonOverlay);
   }
 
-  /**
-   * Play/Pause handlers - subclasses override with platform-specific logic
-   */
-  protected abstract handlePlay(): void;
-  protected abstract handlePause(): void;
-
   /**
    * Lazy loading setup (common pattern)
    */

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) {
@@ -133,6 +101,11 @@ export class VideoEmbed extends BaseVideoEmbed {
     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) {
@@ -152,6 +125,11 @@ export class VideoEmbed extends BaseVideoEmbed {
     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) {
@@ -489,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;
 
@@ -556,10 +557,18 @@ export class VideoEmbed extends BaseVideoEmbed {
     });
 
     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: this.video?.videoWidth || 0,
-        videoHeight: this.video?.videoHeight || 0,
+        videoWidth: width,
+        videoHeight: height,
       });
     });
   }
@@ -657,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");
@@ -681,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.");