@unlk/keymaster 1.2.3 → 1.2.5

package/js/video-modal.js

@@ -5,12 +5,11 @@ import { defineJQueryPlugin } from 'bootstrap/js/src/util/index.js';
 
 const NAME = 'videoModal';
 const DATA_KEY = 'bs.videoModal';
-const EVENT_SHOW = 'show.bs.modal';
+const EVENT_SHOWN = 'shown.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) {
@@ -21,14 +20,12 @@ 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) {
@@ -41,7 +38,6 @@ const vimeoAPIInitPromise = new Promise((resolve) => {
       vimeoAPIReady = true;
       resolve();
     });
-
     document.head.append(script);
   }
 });
@@ -62,7 +58,7 @@ class VideoModal extends BaseComponent {
     this._youtubePlayer = null;
     this._vimeoPlayer = null;
 
-    EventHandler.on(this._element, EVENT_SHOW, () => this._onShow());
+    EventHandler.on(this._element, EVENT_SHOWN, () => this._onShown());
     EventHandler.on(this._element, EVENT_HIDDEN, () => this._onHide());
   }
 
@@ -71,27 +67,52 @@ class VideoModal extends BaseComponent {
     super.dispose();
   }
 
-  async _onShow() {
-    const { id } = this._element;
-    const playerClass = `${id}-youtube-player`;
+  async _onShown() {
+    // Reset container each time
+    this._container.innerHTML = '';
 
     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
+        autoplay: true,
+        muted: true,
+        playsinline: true,
+        dnt: true
       });
+      this._vimeoPlayer.play?.().catch(() => {});
     }
 
     if (this._youtubeSrc) {
       await youTubeAPIInitPromise;
       const youtubeId = this._getYouTubeId(this._youtubeSrc);
-      this._container.innerHTML = `<div class="${playerClass} w-100 h-100"></div>`;
-      const playerDiv = this._container.querySelector(`.${playerClass}`);
+      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);
+
       this._youtubePlayer = new window.YT.Player(playerDiv, {
         videoId: youtubeId,
-        playerVars: { autoplay: 1, rel: 0 }
+        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)
+        }
       });
     }
   }
@@ -101,20 +122,22 @@ class VideoModal extends BaseComponent {
       this._vimeoPlayer.unload().catch(() => {});
       this._vimeoPlayer = null;
     }
-
     if (this._youtubePlayer) {
-      this._youtubePlayer.destroy();
+      try { this._youtubePlayer.destroy(); } catch {}
       this._youtubePlayer = null;
     }
+    this._container.innerHTML = '';
   }
 
   _getYouTubeId(url) {
-    const match = url.match(/(?:v=|youtu\.be\/)([\w-]{11})/);
-    return match ? match[1] : '';
+    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] : '';
   }
 
   _getVimeoId(url) {
-    const match = url.match(/vimeo\.com\/(\d+)/);
+    const match = String(url).match(/vimeo\.com\/(\d+)/);
     return match ? match[1] : '';
   }
 

package/package.json

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

package/scss/theme/_buttons.scss

@@ -29,8 +29,10 @@
       @include button-variant(
         $value,
         $value,
+        $color: $body-color,
         $hover-background: tint-color($value, $btn-hover-bg-shade-amount),
         $hover-border: tint-color($value, $btn-hover-border-shade-amount),
+        $hover-color: $body-color,
         $active-background: tint-color($value, $btn-active-bg-shade-amount),
         $active-border: tint-color($value, $btn-active-border-shade-amount),
         $disabled-color: $gray-950

package/scss/theme/_ketch.scss

@@ -0,0 +1,61 @@
+//stylelint-disable selector-class-pattern, declaration-no-important, selector-max-id
+.root__A7aXF * {
+  font-family: $font-family-base !important;
+}
+//stylelint-disable-next-line
+#lanyard_root * {
+  .\!ketch-bg-\[--k-preference-tabs-purposes-purposeListHeader-rejectAllButton-background-color\] {
+    @extend .btn;
+    @extend .btn-sm;
+    @extend .btn-secondary;
+    &:hover {
+      --tw-gradient-to: none !important;
+      --tw-gradient-from: none !important;
+      --tw-gradient-stops: none !important;
+      background-color: var(--#{$prefix}btn-hover-bg) !important;
+      border-color: var(--#{$prefix}btn-hover-border-color) !important;
+    }
+  }
+  .\!ketch-bg-\[--k-preference-tabs-purposes-purposeListHeader-acceptAllButton-background-color\] {
+    @extend .btn;
+    @extend .btn-sm;
+    @extend .btn-action;
+    &:hover {
+      --tw-gradient-to: none !important;
+      --tw-gradient-from: none !important;
+      --tw-gradient-stops: none !important;
+      background-color: var(--#{$prefix}btn-hover-bg) !important;
+      border-color: var(--#{$prefix}btn-hover-border-color) !important;
+    }
+
+
+  }
+  input,
+  textarea {
+    @extend .form-control;
+    border-width: $input-border-width !important;
+  }
+}
+
+#ketch-banner-button-primary {
+  @extend .btn;
+  @extend .btn-action;
+}
+
+button {
+  font-weight: $btn-font-weight !important;
+}
+
+#ketch-banner-button-secondary {
+  @extend .btn;
+  @extend .btn-secondary;
+  &:hover {
+    --k-banner-buttons-secondary-background-color: var(--#{$prefix}btn-hover-bg);
+    --tw-gradient-to: none !important;
+    --tw-gradient-from: none !important;
+    --tw-gradient-stops: none !important;
+    background-color: var(--#{$prefix}btn-hover-bg) !important;
+    border-color: var(--#{$prefix}btn-hover-border-color) !important;
+  }
+}
+//stylelint-enable selector-class-pattern, declaration-no-important, selector-max-id