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

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 import "./components/YouTubeEmbed.js";
 import "./components/VimeoEmbed.js";
+import "./components/VideoEmbed.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,4BAA4B,CAAC"}

package/dist/index.js

@@ -1,4 +1,5 @@
 // Main entry point for Video Embed Components
 import "./components/YouTubeEmbed.js";
 import "./components/VimeoEmbed.js";
+import "./components/VideoEmbed.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,4BAA4B,CAAC"}

package/dist/index.min.js

@@ -1 +1 @@
-import"./components/YouTubeEmbed.js";import"./components/VimeoEmbed.js";
+import"./components/YouTubeEmbed.js";import"./components/VimeoEmbed.js";import"./components/VideoEmbed.js";

package/dist/types/index.d.ts

@@ -4,4 +4,5 @@
 export * from "./common";
 export type { YouTubeEmbedElement } from "./youtube-embed";
 export type { VimeoEmbedElement } from "./vimeo-embed";
+export type { VideoEmbedElement } from "./video-embed";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,UAAU,CAAC;AACzB,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,UAAU,CAAC;AACzB,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC"}

package/dist/video-only.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Video-only bundle entry point
+ * Use this for smaller bundle size when only MP4 video embeds are needed
+ */
+export { VideoEmbed } from "./components/VideoEmbed.js";
+import "./components/VideoEmbed.js";
+//# sourceMappingURL=video-only.d.ts.map

package/dist/video-only.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-only.d.ts","sourceRoot":"","sources":["../src/video-only.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGxD,OAAO,4BAA4B,CAAC"}

package/dist/video-only.js

@@ -0,0 +1,8 @@
+/**
+ * Video-only bundle entry point
+ * Use this for smaller bundle size when only MP4 video embeds are needed
+ */
+export { VideoEmbed } from "./components/VideoEmbed.js";
+// Auto-register the custom element
+import "./components/VideoEmbed.js";
+//# sourceMappingURL=video-only.js.map

package/dist/video-only.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-only.js","sourceRoot":"","sources":["../src/video-only.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,mCAAmC;AACnC,OAAO,4BAA4B,CAAC"}

package/dist/vimeo-only.d.ts

@@ -2,6 +2,6 @@
  * Vimeo-only bundle entry point
  * Use this for smaller bundle size when only Vimeo embeds are needed
  */
-export { VimeoEmbed } from "./components/VimeoEmbed";
-import "./components/VimeoEmbed";
+export { VimeoEmbed } from "./components/VimeoEmbed.js";
+import "./components/VimeoEmbed.js";
 //# sourceMappingURL=vimeo-only.d.ts.map

package/dist/vimeo-only.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vimeo-only.d.ts","sourceRoot":"","sources":["../src/vimeo-only.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD,OAAO,yBAAyB,CAAC"}
+{"version":3,"file":"vimeo-only.d.ts","sourceRoot":"","sources":["../src/vimeo-only.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGxD,OAAO,4BAA4B,CAAC"}

package/dist/vimeo-only.js

@@ -2,7 +2,7 @@
  * Vimeo-only bundle entry point
  * Use this for smaller bundle size when only Vimeo embeds are needed
  */
-export { VimeoEmbed } from "./components/VimeoEmbed";
+export { VimeoEmbed } from "./components/VimeoEmbed.js";
 // Auto-register the custom element
-import "./components/VimeoEmbed";
+import "./components/VimeoEmbed.js";
 //# sourceMappingURL=vimeo-only.js.map

package/dist/vimeo-only.js.map

@@ -1 +1 @@
-{"version":3,"file":"vimeo-only.js","sourceRoot":"","sources":["../src/vimeo-only.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,mCAAmC;AACnC,OAAO,yBAAyB,CAAC"}
+{"version":3,"file":"vimeo-only.js","sourceRoot":"","sources":["../src/vimeo-only.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,mCAAmC;AACnC,OAAO,4BAA4B,CAAC"}

package/dist/vimeo-only.min.js

@@ -1 +1 @@
-export{VimeoEmbed}from"./components/VimeoEmbed";import"./components/VimeoEmbed";
+export{VimeoEmbed}from"./components/VimeoEmbed.js";import"./components/VimeoEmbed.js";

package/dist/youtube-only.d.ts

@@ -2,6 +2,6 @@
  * YouTube-only bundle entry point
  * Use this for smaller bundle size when only YouTube embeds are needed
  */
-export { YouTubeEmbed } from "./components/YouTubeEmbed";
-import "./components/YouTubeEmbed";
+export { YouTubeEmbed } from "./components/YouTubeEmbed.js";
+import "./components/YouTubeEmbed.js";
 //# sourceMappingURL=youtube-only.d.ts.map

package/dist/youtube-only.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"youtube-only.d.ts","sourceRoot":"","sources":["../src/youtube-only.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGzD,OAAO,2BAA2B,CAAC"}
+{"version":3,"file":"youtube-only.d.ts","sourceRoot":"","sources":["../src/youtube-only.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D,OAAO,8BAA8B,CAAC"}

package/dist/youtube-only.js

@@ -2,7 +2,7 @@
  * YouTube-only bundle entry point
  * Use this for smaller bundle size when only YouTube embeds are needed
  */
-export { YouTubeEmbed } from "./components/YouTubeEmbed";
+export { YouTubeEmbed } from "./components/YouTubeEmbed.js";
 // Auto-register the custom element
-import "./components/YouTubeEmbed";
+import "./components/YouTubeEmbed.js";
 //# sourceMappingURL=youtube-only.js.map

package/dist/youtube-only.js.map

@@ -1 +1 @@
-{"version":3,"file":"youtube-only.js","sourceRoot":"","sources":["../src/youtube-only.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,mCAAmC;AACnC,OAAO,2BAA2B,CAAC"}
+{"version":3,"file":"youtube-only.js","sourceRoot":"","sources":["../src/youtube-only.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,mCAAmC;AACnC,OAAO,8BAA8B,CAAC"}

package/dist/youtube-only.min.js

@@ -1 +1 @@
-export{YouTubeEmbed}from"./components/YouTubeEmbed";import"./components/YouTubeEmbed";
+export{YouTubeEmbed}from"./components/YouTubeEmbed.js";import"./components/YouTubeEmbed.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smartimpact-it/modern-video-embed",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "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",
@@ -40,18 +40,19 @@
     "npm": ">=6.0.0"
   },
   "scripts": {
-    "build": "npm run build:clean && npm run build:ts && npm run build:css && npm run build:validate",
+    "build": "npm run build:clean && npm run build:ts && npm run build:css && npm run build:validate && npm run build:cache-bust",
     "build:clean": "rimraf dist",
     "build:ts": "tsc",
     "build:css": "npm run build:css:main && npm run build:css:components",
-    "build:css:main": "sass src/styles/main.scss:dist/css/main.css",
-    "build:css:components": "sass src/styles/components.scss:dist/css/components.css",
+    "build:css:main": "sass --silence-deprecation=import --silence-deprecation=global-builtin --silence-deprecation=color-functions src/styles/main.scss:dist/css/main.css",
+    "build:css:components": "sass --silence-deprecation=import --silence-deprecation=global-builtin --silence-deprecation=color-functions src/styles/components.scss:dist/css/components.css",
     "build:validate": "node scripts/verify-build.js",
+    "build:cache-bust": "node scripts/update-cache-busters.js",
     "build:prod": "npm run build && npm run build:minify",
     "build:minify": "npm run minify:js && npm run minify:css",
     "minify:js": "terser dist/components/YouTubeEmbed.js -o dist/components/YouTubeEmbed.min.js -c -m && terser dist/components/VimeoEmbed.js -o dist/components/VimeoEmbed.min.js -c -m && terser dist/index.js -o dist/index.min.js -c -m && terser dist/youtube-only.js -o dist/youtube-only.min.js -c -m && terser dist/vimeo-only.js -o dist/vimeo-only.min.js -c -m",
     "minify:css": "csso dist/css/main.css -o dist/css/main.min.css && csso dist/css/components.css -o dist/css/components.min.css",
-    "watch": "concurrently --names \"TS,CSS\" --prefix-colors \"blue,green\" \"tsc --watch\" \"sass --watch src/styles:dist/css\"",
+    "watch": "concurrently --names \"TS,CSS\" --prefix-colors \"blue,green\" \"tsc --watch\" \"sass --watch --silence-deprecation=import --silence-deprecation=global-builtin --silence-deprecation=color-functions src/styles:dist/css\"",
     "start": "npm run watch",
     "examples": "npm run build && echo \"Examples built! Open examples/index.html in your browser to view demos.\"",
     "dev": "npm run build && npm run watch",

package/src/components/BaseVideoEmbed.ts

@@ -0,0 +1,303 @@
+/**
+ * Base class for all video embed components (VideoEmbed, YouTubeEmbed, VimeoEmbed).
+ * Contains shared functionality to reduce code duplication and ensure consistency.
+ */
+export abstract class BaseVideoEmbed extends HTMLElement {
+  // Static properties shared across all components
+  protected static instanceCount = 0;
+  protected static DEBUG = false;
+
+  // Common instance properties
+  protected playerReady = false;
+  protected initialized = false;
+  protected updatingAttribute = false;
+  protected playPauseButton: HTMLDivElement | null = null;
+  protected setCustomControlState: ((playing: boolean) => void) | null = null;
+  protected ariaLiveRegion: HTMLElement | null = null;
+  protected intersectionObserver: IntersectionObserver | null = null;
+  protected hasLoadedVideo = false;
+  protected posterClickHandler: EventListener | null = null;
+  protected keyboardHandler: ((e: KeyboardEvent) => void) | null = null;
+
+  // Common protected properties that subclasses can access
+  protected _playing: boolean = false;
+  protected _autoplay: boolean = false;
+  protected _muted: boolean = false;
+  protected _controls: boolean = false;
+  protected _lazy: boolean = false;
+  protected _background: boolean = false;
+  protected _poster: string = "";
+
+  /**
+   * Abstract methods that subclasses must implement
+   */
+  protected abstract initializePlayer(...args: any[]): Promise<void> | void;
+  protected abstract reinitializePlayer(): void;
+  protected abstract destroyPlayer(): void;
+  protected abstract getComponentName(): string;
+
+  /**
+   * Logging utilities
+   */
+  protected log(...args: any[]): void {
+    if ((this.constructor as typeof BaseVideoEmbed).DEBUG) {
+      console.log(`${this.getComponentName()}:`, ...args);
+    }
+  }
+
+  protected warn(...args: any[]): void {
+    console.warn(...args);
+  }
+
+  protected error(...args: any[]): void {
+    console.error(...args);
+  }
+
+  /**
+   * Event dispatching
+   */
+  protected dispatchCustomEvent(eventName: string, detail?: any): void {
+    this.dispatchEvent(
+      new CustomEvent(eventName, {
+        detail,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  /**
+   * Attribute reflection helpers
+   */
+  protected reflectBooleanAttribute(name: string, value: boolean): void {
+    this.updatingAttribute = true;
+    if (value) {
+      this.setAttribute(name, "");
+    } else {
+      this.removeAttribute(name);
+    }
+    this.updatingAttribute = false;
+  }
+
+  protected reflectAttribute(name: string, value: string): void {
+    this.updatingAttribute = true;
+    if (value) {
+      this.setAttribute(name, value);
+    } else {
+      this.removeAttribute(name);
+    }
+    this.updatingAttribute = false;
+  }
+
+  /**
+   * Error message display (common across all components)
+   */
+  protected showErrorMessage(message: string, errorClass: string): void {
+    const errorDiv = document.createElement("div");
+    errorDiv.className = errorClass;
+    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();
+        this.handleRetry();
+      });
+    }
+
+    this.innerHTML = "";
+    this.appendChild(errorDiv);
+  }
+
+  /**
+   * Retry handler - subclasses can override
+   */
+  protected handleRetry(): void {
+    this.reinitializePlayer();
+  }
+
+  /**
+   * Background mode management (common across all components)
+   */
+  protected updateBackgroundMode(): void {
+    if (this._background) {
+      this.classList.add("is-background");
+      // Enforce background mode requirements
+      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");
+    }
+  }
+
+  /**
+   * Custom controls creation (similar pattern across components)
+   */
+  protected addCustomControls(containerClass: string): void {
+    this.classList.add(containerClass);
+
+    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 (isPlaying) {
+        this.handlePause();
+        setPlayingState(false);
+      } else {
+        this.handlePlay();
+        setPlayingState(true);
+      }
+    };
+
+    this.setCustomControlState = setPlayingState;
+
+    buttonOverlay.addEventListener("click", togglePlayPause);
+    if (this.playPauseButton) {
+      buttonOverlay.appendChild(this.playPauseButton);
+    }
+    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)
+   */
+  protected setupLazyLoading(callback: () => void): void {
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !this.hasLoadedVideo) {
+            this.log("Video entering viewport, loading...");
+            this.hasLoadedVideo = true;
+            callback();
+            if (this.intersectionObserver) {
+              this.intersectionObserver.disconnect();
+            }
+          }
+        });
+      },
+      {
+        rootMargin: "100px",
+      },
+    );
+
+    this.intersectionObserver.observe(this);
+  }
+
+  /**
+   * ARIA announcements for accessibility
+   */
+  protected announceToScreenReader(message: string): void {
+    if (!this.ariaLiveRegion) {
+      this.ariaLiveRegion = document.createElement("div");
+      this.ariaLiveRegion.setAttribute("role", "status");
+      this.ariaLiveRegion.setAttribute("aria-live", "polite");
+      this.ariaLiveRegion.setAttribute("aria-atomic", "true");
+      this.ariaLiveRegion.style.position = "absolute";
+      this.ariaLiveRegion.style.left = "-10000px";
+      this.ariaLiveRegion.style.width = "1px";
+      this.ariaLiveRegion.style.height = "1px";
+      this.ariaLiveRegion.style.overflow = "hidden";
+      this.appendChild(this.ariaLiveRegion);
+    }
+
+    this.ariaLiveRegion.textContent = message;
+  }
+
+  /**
+   * Lifecycle management
+   */
+  connectedCallback(): void {
+    (this.constructor as typeof BaseVideoEmbed).instanceCount++;
+    this.log(
+      "connectedCallback called, instance count:",
+      (this.constructor as typeof BaseVideoEmbed).instanceCount,
+    );
+    this.dispatchCustomEvent("connected");
+  }
+
+  disconnectedCallback(): void {
+    this.log("disconnectedCallback called. Cleaning up...");
+
+    // Cleanup player
+    try {
+      this.destroyPlayer();
+    } catch (error) {
+      this.warn("Error destroying player:", error);
+    }
+
+    // Cleanup observers
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+
+    // Cleanup event listeners
+    if (this.posterClickHandler) {
+      this.removeEventListener("click", this.posterClickHandler);
+      this.posterClickHandler = null;
+    }
+
+    if (this.keyboardHandler) {
+      this.removeEventListener("keydown", this.keyboardHandler);
+      this.keyboardHandler = null;
+    }
+
+    // Decrement instance count
+    (this.constructor as typeof BaseVideoEmbed).instanceCount--;
+    this.log(
+      "Cleanup complete. Remaining instances:",
+      (this.constructor as typeof BaseVideoEmbed).instanceCount,
+    );
+
+    this.dispatchCustomEvent("disconnected");
+  }
+
+  /**
+   * Static debug toggle
+   */
+  public static toggleDebug(forceState?: boolean): void {
+    if (forceState !== undefined) {
+      this.DEBUG = forceState;
+    } else {
+      this.DEBUG = !this.DEBUG;
+    }
+    console.log(`Debug mode ${this.DEBUG ? "enabled" : "disabled"}`);
+  }
+}