@unlk/keymaster 1.2.5 → 1.2.7

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.7",
   "publishConfig": {
     "access": "public"
   },

package/scss/theme/_buttons.scss

@@ -12,6 +12,7 @@
   }
 }
 
+
 @each $color, $value in $theme-colors {
   .btn-link-#{$color} {
     @if $color == "action" {
@@ -21,9 +22,6 @@
       );
     }
   }
-}
-
-@each $color, $value in $theme-colors {
   .btn-#{$color} {
     @if $color == "secondary" {
       @include button-variant(
@@ -49,4 +47,77 @@
       );
     }
   }
+  .btn-icon-#{$color} {
+    @if $color == "secondary" {
+      @include button-icon-variant(
+        $value,
+        $value,
+        $hover-background: tint-color($value, $btn-hover-bg-shade-amount),
+        $hover-border: tint-color($value, $btn-hover-border-shade-amount),
+        $active-background: tint-color($value, $btn-active-bg-shade-amount),
+        $active-border: tint-color($value, $btn-active-border-shade-amount),
+        $disabled-color: $gray-950
+      );
+    } @else {
+      @include button-icon-variant(
+        $value,
+        $value,
+        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
+        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
+        $active-background: shade-color($value, $btn-active-bg-shade-amount),
+        $active-border: shade-color($value, $btn-active-border-shade-amount),
+        $disabled-color: $white
+      );
+    }
+  }
+  .btn-icon-outline-#{$color} {
+    @include button-icon-outline-variant(
+      $value,
+      $value,
+      $hover-background: $value,
+      $hover-border: $value,
+      $active-background: shade-color($value, $btn-active-bg-shade-amount),
+      $active-border: shade-color($value, $btn-active-border-shade-amount),
+      $disabled-color: $white
+    );
+  }
+}
+
+[class*="btn-icon-"],
+[class*="btn-icon-outline-"] {
+
+  &.btn-sm {
+    width: rfs-value(32px);
+    height: rfs-value(32px);
+    --#{$prefix}btn-padding-x: 0;
+    --#{$prefix}btn-padding-y: 0;
+  }
+
+  &.btn-lg {
+    width: rfs-value(48px);
+    height: rfs-value(48px);
+  }
+}
+.btn-sm {
+  > i + *,
+  > .icon + * {
+    margin-left: $spacer * .375;
+  }
+
+  > * + i,
+  > * + .icon {
+    margin-left: $spacer * .375;
+  }
+}
+
+.btn-lg {
+  > i + *,
+  > .icon + * {
+    margin-left: $spacer * .625;
+  }
+
+  > * + i,
+  > * + .icon {
+    margin-left: $spacer * .625;
+  }
 }

package/scss/theme/mixins/_buttons.scss

@@ -54,3 +54,69 @@
   --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};
   text-decoration: none;
 }
+
+@mixin button-icon-variant(
+  $background,
+  $border,
+  $color: color-contrast($background),
+  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
+  $hover-color: color-contrast($hover-background),
+  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+  $active-color: color-contrast($active-background),
+  $disabled-background: rgba($background, 1),
+  $disabled-border: rgba($border, 1),
+  $disabled-color: color-contrast($disabled-background)
+) {
+  width: rfs-value(40px);
+  height: rfs-value(40px);
+  line-height: 1;
+  text-align: center;
+  --#{$prefix}btn-padding-x: #{$spacer * .5};
+  --#{$prefix}btn-padding-y: #{$spacer * .5};
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-bg: #{$background};
+  --#{$prefix}btn-border-color: #{$border};
+  --#{$prefix}btn-border-radius: #{$btn-border-radius};
+  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-disabled-color: #{$disabled-color};
+  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
+}
+
+@mixin button-icon-outline-variant(
+  $border,
+  $color,
+  $hover-background: $color,
+  $hover-border: $color,
+  $hover-color: color-contrast($hover-background),
+  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+  $active-color: color-contrast($active-background),
+  $disabled-background: transparent,
+  $disabled-border: rgba($border, 1),
+  $disabled-color: color-contrast($disabled-background)
+) {
+  width: rfs-value(40px);
+  height: rfs-value(40px);
+  line-height: 1;
+  --#{$prefix}btn-padding-x: #{$spacer * .5};
+  --#{$prefix}btn-padding-y: #{$spacer * .5};
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-bg: transparent;
+  --#{$prefix}btn-border-color: #{$border};
+  --#{$prefix}btn-border-radius: #{$btn-border-radius};
+  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-disabled-color: #{$disabled-color};
+  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
+}