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

package/src/styles/_embed-base.scss

@@ -6,13 +6,16 @@
 @use "shared-functions" as *;
 
 // CSS Variables (common across all components)
+// All variables are prefixed with --si-embed- to prevent conflicts
 @mixin embed-css-variables {
-  --video-aspect-ratio: 56.25%; // Default 16:9
-  --poster-object-fit: cover;
-  --video-object-fit: contain;
-  --control-button-size: 70px;
-  --control-button-color: #ffffff;
-  --overlay-background-color: rgba(0, 0, 0, 0.5);
+  --si-embed-video-aspect-ratio: 56.25%; // Default 16:9
+  --si-embed-aspect-width: 16; // For dynamic aspect ratio calculations
+  --si-embed-aspect-height: 9; // For dynamic aspect ratio calculations
+  --si-embed-poster-object-fit: cover;
+  --si-embed-video-object-fit: contain;
+  --si-embed-control-button-size: 70px;
+  --si-embed-control-button-color: #ffffff;
+  --si-embed-overlay-background-color: rgba(0, 0, 0, 0.5);
 }
 
 // Base container styles
@@ -20,7 +23,7 @@
   display: block;
   position: relative;
   width: 100%;
-  padding-top: var(--video-aspect-ratio);
+  padding-top: var(--si-embed-video-aspect-ratio);
   overflow: hidden;
   background-color: #000;
 }
@@ -33,7 +36,7 @@
   width: 100%;
   height: 100%;
   border: none;
-  object-fit: var(--video-object-fit);
+  object-fit: var(--si-embed-video-object-fit);
 }
 
 // Poster image styles
@@ -46,7 +49,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    object-fit: var(--poster-object-fit);
+    object-fit: var(--si-embed-poster-object-fit);
     display: block;
     cursor: pointer;
   }
@@ -55,7 +58,7 @@
 // Custom control button overlay
 @mixin embed-button-overlay {
   .button-overlay {
-    background: var(--overlay-background-color);
+    background: var(--si-embed-overlay-background-color);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -86,8 +89,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: var(--control-button-size);
-    width: var(--control-button-size);
+    height: var(--si-embed-control-button-size);
+    width: var(--si-embed-control-button-size);
     background-image: inline-svg(
       '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M8,5.14V19.14L19,12.14L8,5.14Z" /></svg>'
     );
@@ -122,9 +125,13 @@
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        aspect-ratio: 16 / 9;
+        // Use aspect-ratio with min-dimensions to ensure coverage
+        aspect-ratio: var(--si-embed-aspect-width) /
+          var(--si-embed-aspect-height);
+        // Start with auto sizing based on aspect ratio
         width: auto;
         height: auto;
+        // Ensure iframe covers entire container
         min-width: 100%;
         min-height: 100%;
         pointer-events: none;
@@ -135,10 +142,23 @@
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
+        // Use CSS custom properties for dynamic aspect ratio
         width: 100%;
-        height: 100%;
+        height: calc(
+          (100% * var(--si-embed-aspect-height)) / var(--si-embed-aspect-width)
+        );
+        min-width: 100%;
+        min-height: 100%;
         object-fit: cover;
         pointer-events: none;
+
+        // Hide native media controls in background mode
+        &::-webkit-media-controls {
+          display: none !important;
+        }
+        &::-webkit-media-controls-enclosure {
+          display: none !important;
+        }
       }
     }
 
@@ -157,7 +177,7 @@
       padding: 1rem;
 
       .button {
-        --control-button-size: 40px;
+        --si-embed-control-button-size: 40px;
         opacity: 0.7;
         transition: opacity 0.2s ease;
         &:hover {

package/src/styles/video-embed.scss

@@ -11,6 +11,24 @@ video-embed {
   // Video-specific styles only
   video {
     @include embed-media-base;
+
+    // Hide native controls when controls attribute is not set
+    &::-webkit-media-controls {
+      display: none !important;
+    }
+    &::-webkit-media-controls-enclosure {
+      display: none !important;
+    }
+  }
+
+  // Show native controls only when explicitly enabled
+  &[controls] video {
+    &::-webkit-media-controls {
+      display: flex !important;
+    }
+    &::-webkit-media-controls-enclosure {
+      display: flex !important;
+    }
   }
 
   // Poster image specific to video (uses background-image pattern)

package/src/utils/APILoader.ts

@@ -0,0 +1,192 @@
+/**
+ * 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 class APILoader {
+  private static loadingPromises = new Map<string, Promise<void>>();
+  private static loadedScripts = new Set<string>();
+  private static readyApis = new Set<string>();
+
+  /**
+   * 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 async loadScript(key: string, config: APILoaderConfig): Promise<void> {
+    const { maxRetries = 3, retryDelay = 2000 } = config;
+
+    return this.loadWithRetry(key, config, 0, maxRetries, retryDelay);
+  }
+
+  /**
+   * Internal method to load script with retry logic.
+   */
+  private static async loadWithRetry(
+    key: string,
+    config: APILoaderConfig,
+    retries: number,
+    maxRetries: number,
+    retryDelay: number,
+  ): Promise<void> {
+    try {
+      await this.loadScriptOnce(key, config);
+    } catch (error) {
+      if (retries < maxRetries) {
+        console.warn(
+          `${key} API load failed, retrying (${retries + 1}/${maxRetries})...`,
+        );
+        await 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.
+   */
+  private static async loadScriptOnce(
+    key: string,
+    config: APILoaderConfig,
+  ): Promise<void> {
+    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<void>((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 as any)[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 as any)[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: string): boolean {
+    return this.readyApis.has(key);
+  }
+
+  /**
+   * Reset the loader state (mainly for testing).
+   */
+  static reset(): void {
+    this.loadingPromises.clear();
+    this.loadedScripts.clear();
+    this.readyApis.clear();
+  }
+}