@unlk/keymaster 1.2.5 → 1.2.6

package/js/video-modal.js

@@ -5,11 +5,12 @@ import { defineJQueryPlugin } from 'bootstrap/js/src/util/index.js';
 
 const NAME = 'videoModal';
 const DATA_KEY = 'bs.videoModal';
-const EVENT_SHOWN = 'shown.bs.modal';
+const EVENT_SHOW = 'show.bs.modal';
 const EVENT_HIDDEN = 'hidden.bs.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) => {
   if (window.YT?.Player) {
@@ -20,12 +21,14 @@ const youTubeAPIInitPromise = new Promise((resolve) => {
       youTubeAPIReady = true;
       resolve();
     };
+
     const script = document.createElement('script');
     script.src = 'https://www.youtube.com/iframe_api';
     document.head.append(script);
   }
 });
 
+// eslint-disable-next-line no-unused-vars
 let vimeoAPIReady = false;
 const vimeoAPIInitPromise = new Promise((resolve) => {
   if (window.Vimeo?.Player) {
@@ -38,6 +41,7 @@ const vimeoAPIInitPromise = new Promise((resolve) => {
       vimeoAPIReady = true;
       resolve();
     });
+
     document.head.append(script);
   }
 });
@@ -58,7 +62,7 @@ class VideoModal extends BaseComponent {
     this._youtubePlayer = null;
     this._vimeoPlayer = null;
 
-    EventHandler.on(this._element, EVENT_SHOWN, () => this._onShown());
+    EventHandler.on(this._element, EVENT_SHOW, () => this._onShow());
     EventHandler.on(this._element, EVENT_HIDDEN, () => this._onHide());
   }
 
@@ -67,52 +71,27 @@ class VideoModal extends BaseComponent {
     super.dispose();
   }
 
-  async _onShown() {
-    // Reset container each time
-    this._container.innerHTML = '';
+  async _onShow() {
+    const { id } = this._element;
+    const playerID = `video-${id}-youtube-player`;
 
     if (this._vimeoUrl) {
       await vimeoAPIInitPromise;
       const vimeoId = this._getVimeoId(this._vimeoUrl);
-      if (!vimeoId) return;
       this._vimeoPlayer = new window.Vimeo.Player(this._container, {
         id: vimeoId,
-        autoplay: true,
-        muted: true,
-        playsinline: true,
-        dnt: true
+        autoplay: true
       });
-      this._vimeoPlayer.play?.().catch(() => {});
+      return;
     }
 
     if (this._youtubeSrc) {
       await youTubeAPIInitPromise;
       const youtubeId = this._getYouTubeId(this._youtubeSrc);
-      if (!youtubeId) {
-        console.warn('[VideoModal] No YouTube ID parsed from', this._youtubeSrc);
-        return;
-      }
-
-      const playerDiv = document.createElement('div');
-      playerDiv.className = 'w-100 h-100';
-      this._container.appendChild(playerDiv);
-
+      const playerDiv = this._container.querySelector(`#${playerID}`);
       this._youtubePlayer = new window.YT.Player(playerDiv, {
         videoId: youtubeId,
-        host: 'https://www.youtube-nocookie.com',
-        playerVars: {
-          autoplay: 1,
-          rel: 0,
-          playsinline: 1,
-          origin: window.location.origin
-        },
-        events: {
-          onReady: (e) => {
-            try { e.target.mute(); } catch {}
-            try { e.target.playVideo(); } catch {}
-          },
-          onError: (e) => console.warn('[VideoModal] YT error', e?.data)
-        }
+        playerVars: { autoplay: 1, rel: 0 }
       });
     }
   }
@@ -122,22 +101,22 @@ class VideoModal extends BaseComponent {
       this._vimeoPlayer.unload().catch(() => {});
       this._vimeoPlayer = null;
     }
+
     if (this._youtubePlayer) {
-      try { this._youtubePlayer.destroy(); } catch {}
+      this._youtubePlayer.destroy();
       this._youtubePlayer = null;
     }
-    this._container.innerHTML = '';
   }
 
   _getYouTubeId(url) {
-    if (!url) return '';
-    // robust: supports v=, youtu.be/, embed/, shorts/
-    const m = String(url).match(/(?:v=|youtu\.be\/|embed\/|shorts\/)([\w-]{11})/);
-    return m ? m[1] : '';
+    const match = url.match(
+      /(?:youtube\.com\/(?:watch\?v=|embed\/|v\/)|youtu\.be\/)([\w-]{11})/
+    );
+    return match ? match[1] : '';
   }
 
   _getVimeoId(url) {
-    const match = String(url).match(/vimeo\.com\/(\d+)/);
+    const match = url.match(/vimeo\.com\/(\d+)/);
     return match ? match[1] : '';
   }
 

package/package.json

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