rook-cli 1.3.9 → 1.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rook-cli",
-  "version": "1.3.9",
+  "version": "1.3.10",
   "description": "CLI para instalar componentes Shopify",
   "repository": {
     "type": "git",

package/rook-framework/assets/rk-framework-core.css

@@ -805,6 +805,7 @@
 
 .rk-modal__media--video,
 .rk-modal__media--embed {
+    position: relative;
     width: min(90vw, 1200px);
     max-height: 90vh;
     border-radius: var(--rk-radius-sm, 4px);
@@ -826,6 +827,120 @@
     border: none;
 }
 
+/* Tap overlay — click to play/pause */
+.rk-modal__tap-overlay {
+    position: absolute;
+    inset: 0 0 48px 0;
+    z-index: 1;
+    cursor: pointer;
+}
+
+/* Custom controls — Instagram style */
+.rk-modal__controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
+    color: #fff;
+    opacity: 1;
+    transition: opacity 0.25s ease;
+}
+
+.rk-modal__media--video:hover .rk-modal__controls,
+.rk-modal__controls:focus-within {
+    opacity: 1;
+}
+
+/* Control buttons */
+.rk-modal__ctrl-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    padding: 0;
+    background: none;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    border-radius: 50%;
+    transition: background-color 0.15s ease;
+}
+
+.rk-modal__ctrl-btn:hover {
+    background-color: rgba(255, 255, 255, 0.15);
+}
+
+.rk-modal__ctrl-icon {
+    width: 18px;
+    height: 18px;
+    display: none;
+}
+
+/* Play/pause icon toggle */
+.rk-modal__controls.is-paused .rk-modal__ctrl-icon--play,
+.rk-modal__controls:not(.is-playing):not(.is-paused) .rk-modal__ctrl-icon--play {
+    display: block;
+}
+
+.rk-modal__controls.is-playing .rk-modal__ctrl-icon--pause {
+    display: block;
+}
+
+/* Mute icon toggle */
+.rk-modal__controls.is-muted .rk-modal__ctrl-icon--muted {
+    display: block;
+}
+
+.rk-modal__controls.is-unmuted .rk-modal__ctrl-icon--unmuted {
+    display: block;
+}
+
+.rk-modal__controls:not(.is-muted):not(.is-unmuted) .rk-modal__ctrl-icon--muted {
+    display: block;
+}
+
+/* Progress bar */
+.rk-modal__progress {
+    flex: 1;
+    height: 3px;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 2px;
+    cursor: pointer;
+    position: relative;
+    transition: height 0.15s ease;
+}
+
+.rk-modal__progress:hover {
+    height: 5px;
+}
+
+.rk-modal__progress-bar {
+    height: 100%;
+    width: 0%;
+    background: #fff;
+    border-radius: 2px;
+    transition: none;
+    pointer-events: none;
+}
+
+/* Time display */
+.rk-modal__time {
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    min-width: 32px;
+    text-align: center;
+    opacity: 0.85;
+    user-select: none;
+}
+
 .rk-modal__media--html {
     background: #fff;
     border-radius: var(--rk-radius);
@@ -841,6 +956,21 @@
         width: 100vw;
         border-radius: 0;
     }
+
+    .rk-modal__controls {
+        padding: 8px 10px;
+        gap: 8px;
+    }
+
+    .rk-modal__ctrl-btn {
+        width: 28px;
+        height: 28px;
+    }
+
+    .rk-modal__ctrl-icon {
+        width: 16px;
+        height: 16px;
+    }
 }
 
 /* --------------------------------------------------------------------------

package/rook-framework/assets/rk-modal.js

@@ -2,8 +2,8 @@
    Rook UI Core — Modal Media Lightbox Controller
    Web Component: <rk-modal-element>
 
-   Handles image zoom, hosted video, YouTube/Vimeo embeds, and raw HTML
-   in a fullscreen lightbox overlay.
+   Handles image zoom, hosted video (with custom Instagram-style controls),
+   YouTube/Vimeo embeds, and raw HTML in a fullscreen lightbox overlay.
    ========================================================================== */
 
 if (!customElements.get('rk-modal-element')) {
@@ -13,6 +13,7 @@ if (!customElements.get('rk-modal-element')) {
             this.modal = null;
             this.content = null;
             this.previousFocus = null;
+            this._raf = null;
 
             this._onKeyDown = this._onKeyDown.bind(this);
         }
@@ -25,6 +26,11 @@ if (!customElements.get('rk-modal-element')) {
 
             this._bindEvents();
             this._setupOpenTriggers();
+            this._setupVideoControls();
+        }
+
+        disconnectedCallback() {
+            if (this._raf) cancelAnimationFrame(this._raf);
         }
 
         /* ------------------------------------------------------------------ */
@@ -49,6 +55,132 @@ if (!customElements.get('rk-modal-element')) {
             });
         }
 
+        /* ------------------------------------------------------------------ */
+        /*  Custom video controls (Instagram-style)                           */
+        /* ------------------------------------------------------------------ */
+
+        _setupVideoControls() {
+            const video = this.querySelector('.rk-modal__video');
+            if (!video) return;
+
+            this._video = video;
+            this._controls = this.querySelector('.rk-modal__controls');
+            this._progressBar = this.querySelector('.rk-modal__progress-bar');
+            this._progressTrack = this.querySelector('[data-ctrl="progress"]');
+            this._timeDisplay = this.querySelector('[data-ctrl="time"]');
+            this._playPauseBtn = this.querySelector('[data-ctrl="play-pause"]');
+            this._muteBtn = this.querySelector('[data-ctrl="mute"]');
+            this._tapOverlay = this.querySelector('[data-ctrl="tap"]');
+
+            // Play/pause button
+            if (this._playPauseBtn) {
+                this._playPauseBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this._togglePlay();
+                });
+            }
+
+            // Mute button
+            if (this._muteBtn) {
+                this._muteBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this._toggleMute();
+                });
+            }
+
+            // Tap overlay — toggle play/pause
+            if (this._tapOverlay) {
+                this._tapOverlay.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this._togglePlay();
+                });
+            }
+
+            // Progress bar click — seek
+            if (this._progressTrack) {
+                this._progressTrack.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this._seek(e);
+                });
+            }
+
+            // Sync UI with video state
+            video.addEventListener('play', () => this._syncPlayState());
+            video.addEventListener('pause', () => this._syncPlayState());
+            video.addEventListener('volumechange', () => this._syncMuteState());
+        }
+
+        _togglePlay() {
+            if (!this._video) return;
+            if (this._video.paused) {
+                this._video.play().catch(() => {});
+            } else {
+                this._video.pause();
+            }
+        }
+
+        _toggleMute() {
+            if (!this._video) return;
+            this._video.muted = !this._video.muted;
+        }
+
+        _seek(e) {
+            if (!this._video || !this._progressTrack) return;
+            const rect = this._progressTrack.getBoundingClientRect();
+            const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+            this._video.currentTime = ratio * this._video.duration;
+        }
+
+        _syncPlayState() {
+            if (!this._video || !this._controls) return;
+            const playing = !this._video.paused;
+            this._controls.classList.toggle('is-playing', playing);
+            this._controls.classList.toggle('is-paused', !playing);
+
+            if (playing) {
+                this._startProgressLoop();
+            } else {
+                this._stopProgressLoop();
+            }
+        }
+
+        _syncMuteState() {
+            if (!this._video || !this._controls) return;
+            this._controls.classList.toggle('is-muted', this._video.muted);
+            this._controls.classList.toggle('is-unmuted', !this._video.muted);
+        }
+
+        _startProgressLoop() {
+            const update = () => {
+                if (!this._video || this._video.paused) return;
+
+                const pct = (this._video.currentTime / this._video.duration) * 100 || 0;
+                if (this._progressBar) {
+                    this._progressBar.style.width = pct + '%';
+                }
+
+                if (this._timeDisplay) {
+                    this._timeDisplay.textContent = this._formatTime(this._video.currentTime);
+                }
+
+                this._raf = requestAnimationFrame(update);
+            };
+            this._raf = requestAnimationFrame(update);
+        }
+
+        _stopProgressLoop() {
+            if (this._raf) {
+                cancelAnimationFrame(this._raf);
+                this._raf = null;
+            }
+        }
+
+        _formatTime(seconds) {
+            const m = Math.floor(seconds / 60);
+            const s = Math.floor(seconds % 60);
+            return m + ':' + (s < 10 ? '0' : '') + s;
+        }
+
         /* ------------------------------------------------------------------ */
         /*  Public API                                                        */
         /* ------------------------------------------------------------------ */
@@ -68,9 +200,13 @@ if (!customElements.get('rk-modal-element')) {
             // Load lazy iframes (YouTube/Vimeo)
             this._loadIframes();
 
-            // Autoplay video if configured
-            if (this.dataset.autoplay === 'true') {
-                this._playMedia();
+            // Autoplay hosted video (muted)
+            this._playMedia();
+
+            // Sync initial state
+            if (this._video) {
+                this._syncPlayState();
+                this._syncMuteState();
             }
 
             // Focus close button
@@ -96,6 +232,7 @@ if (!customElements.get('rk-modal-element')) {
 
             // Stop all media
             this._stopMedia();
+            this._stopProgressLoop();
 
             if (this.previousFocus) {
                 this.previousFocus.focus();
@@ -117,14 +254,7 @@ if (!customElements.get('rk-modal-element')) {
         _loadIframes() {
             this.querySelectorAll('iframe[data-src]').forEach((iframe) => {
                 if (!iframe.src || iframe.src === 'about:blank') {
-                    const src = iframe.dataset.src;
-                    if (this.dataset.autoplay === 'true' && src.includes('youtube.com')) {
-                        iframe.src = src + (src.includes('?') ? '&' : '?') + 'autoplay=1';
-                    } else if (this.dataset.autoplay === 'true' && src.includes('vimeo.com')) {
-                        iframe.src = src + (src.includes('?') ? '&' : '?') + 'autoplay=1';
-                    } else {
-                        iframe.src = src;
-                    }
+                    iframe.src = iframe.dataset.src;
                 }
             });
         }
@@ -132,8 +262,10 @@ if (!customElements.get('rk-modal-element')) {
         _playMedia() {
             const video = this.querySelector('video[data-autoplay]');
             if (video) {
+                video.muted = true;
+                video.currentTime = 0;
                 video.play().catch(() => {
-                    /* autoplay blocked by browser — silent fail */
+                    /* autoplay blocked — silent fail */
                 });
             }
         }
@@ -154,7 +286,7 @@ if (!customElements.get('rk-modal-element')) {
         }
 
         /* ------------------------------------------------------------------ */
-        /*  Keyboard (ESC)                                                    */
+        /*  Keyboard (ESC + Space for play/pause)                             */
         /* ------------------------------------------------------------------ */
 
         _onKeyDown(e) {
@@ -163,6 +295,20 @@ if (!customElements.get('rk-modal-element')) {
             if (e.key === 'Escape') {
                 e.preventDefault();
                 this.close();
+                return;
+            }
+
+            // Space toggles play/pause on video
+            if (e.key === ' ' && this._video) {
+                e.preventDefault();
+                this._togglePlay();
+                return;
+            }
+
+            // M toggles mute on video
+            if (e.key === 'm' && this._video) {
+                e.preventDefault();
+                this._toggleMute();
             }
         }
     }

package/rook-framework/snippets/rk-modal.liquid

@@ -2,6 +2,7 @@
   Snippet: RkModal
   Renders a media lightbox for images, videos, and embedded content.
   Uses Web Component <rk-modal-element> for behaviour.
+  Videos use custom Instagram-style controls (autoplay + muted by default).
 
   @param {string} id - Unique modal id (required)
   @param {string} [type] - 'image' | 'video' | 'youtube' | 'vimeo' | 'html' (default: 'image')
@@ -12,7 +13,6 @@
   @param {string} [content] - Raw HTML content (when type is 'html')
   @param {string} [alt] - Alt text for images / aria-label for media
   @param {string} [aspect_ratio] - Aspect ratio for video (e.g. '16/9', default: '16/9')
-  @param {boolean} [autoplay] - Autoplay video on open (default: true)
   @param {string} [custom_class] - Extra CSS classes
 
   @example — Image lightbox
@@ -28,14 +28,12 @@
 {%- liquid
   assign modal_type = type | default: 'image'
   assign modal_aspect = aspect_ratio | default: '16/9'
-  assign modal_autoplay = autoplay | default: true
   assign modal_alt = alt | default: ''
 -%}
 
 <rk-modal-element
   data-modal-id="{{ id }}"
   data-type="{{ modal_type }}"
-  {% if modal_autoplay %}data-autoplay="true"{% endif %}
 >
   <div id="{{ id }}" class="rk-modal{% if custom_class %} {{ custom_class }}{% endif %}">
     {%- comment -%} Overlay {%- endcomment -%}
@@ -75,21 +73,52 @@
           <div class="rk-modal__media rk-modal__media--video" style="aspect-ratio: {{ modal_aspect }};">
             <video
               class="rk-modal__video"
-              controls
               playsinline
+              muted
+              loop
               preload="metadata"
-              {% if modal_autoplay %}data-autoplay{% endif %}
+              data-autoplay
               {% if modal_alt != blank %}aria-label="{{ modal_alt }}"{% endif %}
             >
               <source src="{{ video_url }}" type="video/mp4">
             </video>
+
+            {%- comment -%} Custom controls — Instagram style {%- endcomment -%}
+            <div class="rk-modal__controls">
+              <button type="button" class="rk-modal__ctrl-btn" data-ctrl="play-pause" aria-label="Play / Pause">
+                <svg class="rk-modal__ctrl-icon rk-modal__ctrl-icon--play" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M6.3 3.24A1 1 0 0 0 5 4.13v11.74a1 1 0 0 0 1.5.87l10-5.87a1 1 0 0 0 0-1.74l-10-5.87-.2-.02Z"/>
+                </svg>
+                <svg class="rk-modal__ctrl-icon rk-modal__ctrl-icon--pause" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M5 3h3v14H5V3Zm7 0h3v14h-3V3Z"/>
+                </svg>
+              </button>
+
+              <div class="rk-modal__progress" data-ctrl="progress">
+                <div class="rk-modal__progress-bar"></div>
+              </div>
+
+              <span class="rk-modal__time" data-ctrl="time">0:00</span>
+
+              <button type="button" class="rk-modal__ctrl-btn" data-ctrl="mute" aria-label="Mudo / Som">
+                <svg class="rk-modal__ctrl-icon rk-modal__ctrl-icon--muted" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M10 3.5a.5.5 0 0 0-.8-.4L5.38 6H2.5a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h2.88l3.82 2.9a.5.5 0 0 0 .8-.4v-13ZM14.15 6.15a.5.5 0 0 1 .7 0l1.65 1.65 1.65-1.65a.5.5 0 0 1 .7.7L17.2 8.5l1.65 1.65a.5.5 0 0 1-.7.7L16.5 9.2l-1.65 1.65a.5.5 0 0 1-.7-.7l1.65-1.65-1.65-1.65a.5.5 0 0 1 0-.7Z"/>
+                </svg>
+                <svg class="rk-modal__ctrl-icon rk-modal__ctrl-icon--unmuted" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M10 3.5a.5.5 0 0 0-.8-.4L5.38 6H2.5a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h2.88l3.82 2.9a.5.5 0 0 0 .8-.4v-13ZM13.54 6.16a.5.5 0 0 1 .7 0A6.47 6.47 0 0 1 16 10.5a6.47 6.47 0 0 1-1.76 4.34.5.5 0 0 1-.7-.7A5.47 5.47 0 0 0 15 10.5c0-1.5-.52-2.88-1.46-3.64a.5.5 0 0 1 0-.7Zm-1.08 2.3a.5.5 0 0 1 .7 0c.55.5.84 1.24.84 2.04s-.29 1.54-.84 2.04a.5.5 0 0 1-.7-.7c.35-.32.54-.79.54-1.34s-.19-1.02-.54-1.34a.5.5 0 0 1 0-.7Z"/>
+                </svg>
+              </button>
+            </div>
+
+            {%- comment -%} Tap-to-toggle play overlay {%- endcomment -%}
+            <div class="rk-modal__tap-overlay" data-ctrl="tap"></div>
           </div>
 
         {%- when 'youtube' -%}
           <div class="rk-modal__media rk-modal__media--embed" style="aspect-ratio: {{ modal_aspect }};">
             <iframe
               class="rk-modal__iframe"
-              data-src="https://www.youtube.com/embed/{{ youtube_id }}?rel=0&enablejsapi=1"
+              data-src="https://www.youtube.com/embed/{{ youtube_id }}?rel=0&enablejsapi=1&mute=1&autoplay=1"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
               allowfullscreen
               loading="lazy"
@@ -101,7 +130,7 @@
           <div class="rk-modal__media rk-modal__media--embed" style="aspect-ratio: {{ modal_aspect }};">
             <iframe
               class="rk-modal__iframe"
-              data-src="https://player.vimeo.com/video/{{ vimeo_id }}?title=0&byline=0&portrait=0"
+              data-src="https://player.vimeo.com/video/{{ vimeo_id }}?title=0&byline=0&portrait=0&muted=1&autoplay=1"
               allow="autoplay; fullscreen; picture-in-picture"
               allowfullscreen
               loading="lazy"

package/src/utils/logger.js

@@ -49,7 +49,7 @@ export class Logger {
     banner() {
         console.log('');
         console.log(pc.bold(pc.white('  ╔══════════════════════════════╗')));
-        console.log(pc.bold(pc.white('  ║    ♟️  ROOK CLI  v1.3.9       ║')));
+        console.log(pc.bold(pc.white('  ║    ♟️  ROOK CLI  v1.3.10      ║')));
         console.log(pc.bold(pc.white('  ║   Shopify Component Tool     ║')));
         console.log(pc.bold(pc.white('  ╚══════════════════════════════╝')));
         console.log('');