@unlk/keymaster 1.6.9 → 1.7.0

package/js/video-modal.js

@@ -10,55 +10,128 @@ const SELECTOR_MODAL = '.modal';
 const SELECTOR_DIALOG = '.modal-dialog-media';
 const SELECTOR_RATIO = '.ratio';
 
-// eslint-disable-next-line no-unused-vars
-let youTubeAPIReady = false;
-const youTubeAPIInitPromise = new Promise((resolve) => {
+let youTubeAPIInitPromise = null;
+let vimeoAPIInitPromise = null;
+
+/**
+ * Load the YouTube iframe API only when a YouTube video is opened.
+ */
+function loadYouTubeAPI() {
   if (globalThis.YT?.Player) {
-    youTubeAPIReady = true;
-    resolve();
-  } else {
-    const prev = globalThis.onYouTubeIframeAPIReady;
+    return Promise.resolve();
+  }
+
+  if (youTubeAPIInitPromise) {
+    return youTubeAPIInitPromise;
+  }
+
+  youTubeAPIInitPromise = new Promise((resolve, reject) => {
+    const existingScript = document.querySelector(
+      'script[src="https://www.youtube.com/iframe_api"]'
+    );
+
+    const previousReady = globalThis.onYouTubeIframeAPIReady;
+
     globalThis.onYouTubeIframeAPIReady = () => {
       try {
-        if (typeof prev === 'function') prev();
+        if (typeof previousReady === 'function') {
+          previousReady();
+        }
       } catch {}
 
-      youTubeAPIReady = true;
       resolve();
     };
 
+    if (existingScript) {
+      if (globalThis.YT?.Player) {
+        resolve();
+      }
+
+      return;
+    }
+
     const script = document.createElement('script');
+
     script.src = 'https://www.youtube.com/iframe_api';
+    script.async = true;
+
+    script.addEventListener('error', () => {
+      youTubeAPIInitPromise = null;
+      reject(new Error('Failed to load YouTube iframe API'));
+    });
+
     document.head.append(script);
-  }
-});
+  });
+
+  return youTubeAPIInitPromise;
+}
 
-// eslint-disable-next-line no-unused-vars
-let vimeoAPIReady = false;
-const vimeoAPIInitPromise = new Promise((resolve) => {
+/**
+ * Load the Vimeo Player API only when a Vimeo video is opened.
+ */
+function loadVimeoAPI() {
   if (globalThis.Vimeo?.Player) {
-    vimeoAPIReady = true;
-    resolve();
-  } else {
+    return Promise.resolve();
+  }
+
+  if (vimeoAPIInitPromise) {
+    return vimeoAPIInitPromise;
+  }
+
+  vimeoAPIInitPromise = new Promise((resolve, reject) => {
+    const existingScript = document.querySelector(
+      'script[src="https://player.vimeo.com/api/player.js"]'
+    );
+
+    if (existingScript) {
+      existingScript.addEventListener('load', () => resolve(), { once: true });
+
+      existingScript.addEventListener(
+        'error',
+        () => {
+          vimeoAPIInitPromise = null;
+          reject(new Error('Failed to load Vimeo Player API'));
+        },
+        { once: true }
+      );
+
+      return;
+    }
+
     const script = document.createElement('script');
+
     script.src = 'https://player.vimeo.com/api/player.js';
-    script.addEventListener('load', () => {
-      vimeoAPIReady = true;
-      resolve();
-    });
+    script.async = true;
+
+    script.addEventListener('load', () => resolve(), { once: true });
+
+    script.addEventListener(
+      'error',
+      () => {
+        vimeoAPIInitPromise = null;
+        reject(new Error('Failed to load Vimeo Player API'));
+      },
+      { once: true }
+    );
 
     document.head.append(script);
-  }
-});
+  });
+
+  return vimeoAPIInitPromise;
+}
 
 class VideoModal extends BaseComponent {
   constructor(element) {
     super(element);
 
     this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
+
     this._container = SelectorEngine.findOne(SELECTOR_RATIO, this._element);
+
     this._youtubeSrc = this._container?.getAttribute('data-src');
+
     this._vimeoUrl = this._container?.getAttribute('data-vimeo-url');
+
     this._youtubePlayer = null;
     this._vimeoPlayer = null;
   }
@@ -72,53 +145,87 @@ class VideoModal extends BaseComponent {
     const { id } = this._element;
     const playerID = `video-${id}-youtube-player`;
 
-    if (this._vimeoUrl) {
-      await vimeoAPIInitPromise;
-      const vimeoId = this._getVimeoId(this._vimeoUrl);
+    try {
+      if (this._vimeoUrl) {
+        await loadVimeoAPI();
 
-      this._vimeoPlayer = new globalThis.Vimeo.Player(this._container, {
-        id: vimeoId,
-        autoplay: true
-      });
+        const vimeoId = this._getVimeoId(this._vimeoUrl);
 
-      this._element.dataset.vimeoId = String(vimeoId);
-      this._element.__unlkVimeoPlayer = this._vimeoPlayer;
+        if (!vimeoId) {
+          return;
+        }
 
-      this._element.dispatchEvent(
-        new CustomEvent('videomodal.ready', {
-          bubbles: true,
-          detail: { provider: 'vimeo', player: this._vimeoPlayer, videoId: vimeoId }
-        })
-      );
+        this._vimeoPlayer = new globalThis.Vimeo.Player(this._container, {
+          id: vimeoId,
+          autoplay: true
+        });
 
-      return;
-    }
+        this._element.dataset.vimeoId = String(vimeoId);
 
-    if (this._youtubeSrc) {
-      await youTubeAPIInitPromise;
-      const youtubeId = this._getYouTubeId(this._youtubeSrc);
-      const playerDiv = this._container.querySelector(`#${playerID}`);
+        this._element.__unlkVimeoPlayer = this._vimeoPlayer;
 
-      this._youtubePlayer = new globalThis.YT.Player(playerDiv, {
-        videoId: youtubeId,
-        playerVars: { autoplay: 1, rel: 0 }
-      });
+        this._element.dispatchEvent(
+          new CustomEvent('videomodal.ready', {
+            bubbles: true,
+            detail: {
+              provider: 'vimeo',
+              player: this._vimeoPlayer,
+              videoId: vimeoId
+            }
+          })
+        );
 
-      this._element.dataset.ytId = youtubeId;
-      this._element.__unlkYtPlayer = this._youtubePlayer;
+        return;
+      }
 
-      this._element.dispatchEvent(
-        new CustomEvent('videomodal.ready', {
-          bubbles: true,
-          detail: { provider: 'youtube', player: this._youtubePlayer, videoId: youtubeId }
-        })
-      );
+      if (this._youtubeSrc) {
+        await loadYouTubeAPI();
+
+        const youtubeId = this._getYouTubeId(this._youtubeSrc);
+
+        if (!youtubeId) {
+          return;
+        }
+
+        const playerDiv = this._container.querySelector(`#${playerID}`);
+
+        if (!playerDiv) {
+          return;
+        }
+
+        this._youtubePlayer = new globalThis.YT.Player(playerDiv, {
+          videoId: youtubeId,
+          playerVars: {
+            autoplay: 1,
+            rel: 0
+          }
+        });
+
+        this._element.dataset.ytId = youtubeId;
+
+        this._element.__unlkYtPlayer = this._youtubePlayer;
+
+        this._element.dispatchEvent(
+          new CustomEvent('videomodal.ready', {
+            bubbles: true,
+            detail: {
+              provider: 'youtube',
+              player: this._youtubePlayer,
+              videoId: youtubeId
+            }
+          })
+        );
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('[VideoModal] Failed to initialize video player:', error);
     }
   }
 
   _onHide() {
     if (this._vimeoPlayer) {
       this._vimeoPlayer.unload().catch(() => {});
+
       this._vimeoPlayer = null;
     }
 
@@ -129,17 +236,20 @@ class VideoModal extends BaseComponent {
 
     delete this._element.__unlkYtPlayer;
     delete this._element.dataset.ytId;
+
     delete this._element.__unlkVimeoPlayer;
     delete this._element.dataset.vimeoId;
   }
 
   _getYouTubeId(url) {
     const match = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|v\/)|youtu\.be\/)([\w-]{11})/);
+
     return match ? match[1] : '';
   }
 
   _getVimeoId(url) {
     const match = url.match(/vimeo\.com\/(\d+)/);
+
     return match ? match[1] : '';
   }
 
@@ -155,12 +265,18 @@ class VideoModal extends BaseComponent {
 }
 
 EventHandler.on(document, EVENT_SHOW, SELECTOR_MODAL, function () {
-  if (!SelectorEngine.findOne(SELECTOR_DIALOG, this)) return;
+  if (!SelectorEngine.findOne(SELECTOR_DIALOG, this)) {
+    return;
+  }
+
   VideoModal.getOrCreateInstance(this)._onShow();
 });
 
 EventHandler.on(document, EVENT_HIDDEN, SELECTOR_MODAL, function () {
-  if (!SelectorEngine.findOne(SELECTOR_DIALOG, this)) return;
+  if (!SelectorEngine.findOne(SELECTOR_DIALOG, this)) {
+    return;
+  }
+
   VideoModal.getOrCreateInstance(this)._onHide();
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unlk/keymaster",
-  "version": "1.6.9",
+  "version": "1.7.0",
   "publishConfig": {
     "access": "public"
   },

package/scss/theme/_version.scss

@@ -1,2 +1,2 @@
 // GENERATED FILE – do not edit manually
-$km-version: "1.6.9" !default;
+$km-version: "1.7.0" !default;

package/scss/theme/forms/_form-check.scss

@@ -17,6 +17,7 @@
 
   input:checked {
     label {
+      background-color: $action-25;
       border-color: $action;
     }
   }
@@ -32,8 +33,8 @@
 
     &:checked {
       ~ .form-check-label {
+        background-color: $action-25;
         border-color: $action;
-
         &::before {
           background-color: $action;
           border-color: $action;