@shortkitsdk/web 0.3.0 → 0.3.2

package/dist/shortkit.slim.js

@@ -603,16 +603,35 @@
       player._skCurrentUrl = streamingUrl;
     }
     /**
-     * Promote a preload player to active: raise buffer limits and uncap ABR.
-     * Safe to call even if the HLS instance was already created with active config.
+     * Promote a preload player to active: raise buffer limits, uncap ABR, and
+     * force an immediate quality upgrade.
+     *
+     * Preload streams start at level 0 (lowest rendition) to conserve bandwidth.
+     * When attachStream() is called again with isActive=true for the same URL it
+     * early-returns, so the HLS instance keeps its startLevel:0 config. The
+     * already-buffered low-quality segments play through before any higher-quality
+     * segments arrive — causing a visible low-res start even on fast connections.
+     *
+     * Fix: lock HLS to the highest level, then seek-in-place to flush the
+     * low-quality buffer so the player immediately re-fetches at high quality.
+     * Re-enable ABR after a few seconds so slow connections self-correct.
      */
     promoteToActive(itemId) {
       const hls = this.hlsInstances.get(itemId);
-      if (hls) {
-        hls.config.maxBufferLength = PlayerPool.ACTIVE_HLS_CONFIG.maxBufferLength;
-        hls.config.maxMaxBufferLength = PlayerPool.ACTIVE_HLS_CONFIG.maxMaxBufferLength;
-        hls.autoLevelCapping = -1;
-        hls.nextAutoLevel = -1;
+      if (!hls) return;
+      hls.config.maxBufferLength = PlayerPool.ACTIVE_HLS_CONFIG.maxBufferLength;
+      hls.config.maxMaxBufferLength = PlayerPool.ACTIVE_HLS_CONFIG.maxMaxBufferLength;
+      hls.autoLevelCapping = -1;
+      const top = hls.levels ? hls.levels.length - 1 : -1;
+      if (top > 0 && hls.currentLevel < top) {
+        hls.currentLevel = top;
+        const player = this.assignments.get(itemId);
+        if (player) {
+          player.currentTime = player.currentTime;
+        }
+        setTimeout(() => {
+          if (!hls.destroyed) hls.currentLevel = -1;
+        }, 4e3);
       }
     }
     /** Pause, destroy HLS, and remove player from DOM and pool tracking. */
@@ -908,7 +927,7 @@
     }
     setMuted(muted) {
       this.isMuted = muted;
-      for (const [, player] of this.pool._players) {
+      for (const [, player] of this.pool.assignments) {
         player.muted = muted;
       }
       this._pushPlayerState({ isMuted: muted });
@@ -921,7 +940,7 @@
     }
     setPlaybackRate(rate) {
       this.playbackRate = rate;
-      for (const [, player] of this.pool._players) {
+      for (const [, player] of this.pool.assignments) {
         player.playbackRate = rate;
       }
       this._pushPlayerState({ playbackRate: rate });
@@ -1398,11 +1417,10 @@
       const player = this.pool.getPlayer(id);
       if (player) {
         player.pause();
-        player.style.opacity = "0";
         player._skRevealedFor = null;
       }
       this._stopTimeLoop(id);
-      this._clearOverlay(id);
+      this._detachOverlay(id);
       this._sk._tracker.deactivateContent();
     }
     // --- Time loop ---
@@ -1584,14 +1602,20 @@
       }
     }
     /** Clear the overlay container's DOM and unsubscribe tracked listeners. */
-    _clearOverlay(itemId) {
+    /** Unsubscribe overlay event listeners without clearing DOM. */
+    _detachOverlay(itemId) {
       const entry = this._overlayContainers.get(itemId);
       if (!entry) return;
       if (entry.unsub) {
         entry.unsub();
         entry.unsub = null;
       }
-      entry.el.innerHTML = "";
+    }
+    /** Unsubscribe and clear overlay DOM (used on destroy). */
+    _clearOverlay(itemId) {
+      this._detachOverlay(itemId);
+      const entry = this._overlayContainers.get(itemId);
+      if (entry) entry.el.innerHTML = "";
     }
   }
   class EmbeddedFeedManager {
@@ -1640,6 +1664,7 @@
       this._setupScrollEnd();
       this._setupVisibilityHandler();
       this._setupCellHeightObserver();
+      this._setupDebugPanel();
       if (startIndex > 0 && startIndex < items.length) {
         const targetEl = this.itemEls.get(items[startIndex].id);
         if (targetEl) targetEl.scrollIntoView({ behavior: "instant", block: "start" });
@@ -1662,6 +1687,11 @@
         this._resizeObserver = null;
       }
       if (this._visHandler) document.removeEventListener("visibilitychange", this._visHandler);
+      if (this._debugKeyHandler) document.removeEventListener("keydown", this._debugKeyHandler);
+      if (this._debugPanel) {
+        this._debugPanel.remove();
+        this._debugPanel = null;
+      }
       this.container.innerHTML = "";
       this.itemEls.clear();
       this.items = [];
@@ -1705,7 +1735,7 @@
     }
     setMuted(muted) {
       this.isMuted = muted;
-      for (const [, player] of this.pool._players) {
+      for (const [, player] of this.pool.assignments) {
         player.muted = muted;
       }
       this._pushPlayerState({ isMuted: muted });
@@ -1718,7 +1748,7 @@
     }
     setPlaybackRate(rate) {
       this.playbackRate = rate;
-      for (const [, player] of this.pool._players) {
+      for (const [, player] of this.pool.assignments) {
         player.playbackRate = rate;
       }
       this._pushPlayerState({ playbackRate: rate });
@@ -1990,11 +2020,52 @@
       const p = this.pool.getPlayer(id);
       if (p) {
         p.pause();
-        p.style.opacity = "0";
         p._skRevealedFor = null;
       }
       this._stopTimeLoop(id);
-      this._clearOverlay(id);
+      this._detachOverlay(id);
+    }
+    // --- Debug panel (toggle with 'D' key) ---
+    _setupDebugPanel() {
+      const panel = document.createElement("div");
+      panel.id = "sk-debug-panel";
+      panel.style.cssText = "position:fixed;top:12px;right:12px;z-index:99999;background:rgba(0,0,0,.85);color:#0f0;font:12px/1.5 monospace;padding:10px 14px;border-radius:8px;pointer-events:none;display:none;min-width:220px;";
+      document.body.appendChild(panel);
+      this._debugPanel = panel;
+      this._debugVisible = false;
+      this._debugKeyHandler = (e) => {
+        if (e.key === "d" || e.key === "D") {
+          this._debugVisible = !this._debugVisible;
+          panel.style.display = this._debugVisible ? "block" : "none";
+        }
+      };
+      document.addEventListener("keydown", this._debugKeyHandler);
+    }
+    _updateDebugPanel() {
+      if (!this._debugVisible || !this._debugPanel) return;
+      const hls = this.pool.hlsInstances.get(this.activeItemId);
+      if (!hls || !hls.levels || !hls.levels.length) {
+        this._debugPanel.innerHTML = "HLS: no levels loaded";
+        return;
+      }
+      const level = hls.levels[hls.currentLevel] || {};
+      const bw = hls.bandwidthEstimate ? (hls.bandwidthEstimate / 1e6).toFixed(2) : "?";
+      const lines = [
+        `<b style="color:#fff">HLS Debug</b>`,
+        `Level: ${hls.currentLevel} / ${hls.levels.length - 1}`,
+        `Resolution: ${level.width || "?"}x${level.height || "?"}`,
+        `Bitrate: ${level.bitrate ? (level.bitrate / 1e3).toFixed(0) + " kbps" : "?"}`,
+        `BW estimate: ${bw} Mbps`,
+        `Auto cap: ${hls.autoLevelCapping}`,
+        `Next level: ${hls.nextLevel}`,
+        `<span style="color:#888">Levels:</span>`
+      ];
+      for (let i = 0; i < hls.levels.length; i++) {
+        const l = hls.levels[i];
+        const marker = i === hls.currentLevel ? ' <b style="color:#0ff">◀</b>' : "";
+        lines.push(`  ${i}: ${l.width}x${l.height} @ ${(l.bitrate / 1e3).toFixed(0)}k${marker}`);
+      }
+      this._debugPanel.innerHTML = lines.join("<br>");
     }
     // --- Time loop (state emission only, no DOM updates) ---
     _startTimeLoop(id, el, player) {
@@ -2002,6 +2073,7 @@
       const tick = () => {
         if (this._destroyed) return;
         if (!player || player.paused) {
+          this._updateDebugPanel();
           this.rafIds.set(id, requestAnimationFrame(tick));
           return;
         }
@@ -2027,6 +2099,7 @@
           player.play().catch(() => {
           });
         }
+        this._updateDebugPanel();
         this.rafIds.set(id, requestAnimationFrame(tick));
       };
       this.rafIds.set(id, requestAnimationFrame(tick));
@@ -2193,14 +2266,20 @@
       } catch (e) {
       }
     }
-    _clearOverlay(itemId) {
+    /** Unsubscribe overlay event listeners without clearing DOM. */
+    _detachOverlay(itemId) {
       const entry = this._overlayContainers.get(itemId);
       if (!entry) return;
       if (entry.unsub) {
         entry.unsub();
         entry.unsub = null;
       }
-      entry.el.innerHTML = "";
+    }
+    /** Unsubscribe and clear overlay DOM (used on destroy). */
+    _clearOverlay(itemId) {
+      this._detachOverlay(itemId);
+      const entry = this._overlayContainers.get(itemId);
+      if (entry) entry.el.innerHTML = "";
     }
   }
   const MuteOnSvg = '<svg viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>';
@@ -2550,6 +2629,7 @@
       this._isOpen = true;
       this._onClose = onClose;
       this._openItemId = item.id;
+      this._openThumbnailUrl = item.thumbnailUrl || null;
       const sourceRect = sourceEl.getBoundingClientRect();
       const sourceRadius = parseFloat(getComputedStyle(sourceEl).borderRadius) || 12;
       this.overlayEl.classList.add("skp-active");
@@ -2594,6 +2674,21 @@
         feedEl.style.transform = "none";
         feedEl.style.borderRadius = `${targetRadius}px`;
       });
+      this.feedManager.startObserver();
+      this.feedManager._activateItem(item.id);
+      this.overlayEl.classList.add("skp-feed-ready");
+      const itemOverlay = feedItemEl?.querySelector('[data-ref="overlay"]');
+      const chromeEls = [...this.overlayEl.querySelectorAll(".skp-feed-close, .sk-sidebar")];
+      if (itemOverlay) chromeEls.push(itemOverlay);
+      chromeEls.forEach((el) => {
+        el.style.opacity = "0";
+        el.style.transition = "none";
+      });
+      this.overlayEl.getBoundingClientRect();
+      chromeEls.forEach((el) => {
+        el.style.transition = "opacity .35s cubic-bezier(.32,.72,0,1)";
+        el.style.opacity = "1";
+      });
       await this._waitForTransitionEnd(feedEl, 450);
       feedEl.classList.remove("skp-flip-animating");
       feedEl.style.transformOrigin = "";
@@ -2601,9 +2696,10 @@
       feedEl.style.scrollSnapType = "";
       feedEl.style.transform = "";
       feedEl.style.borderRadius = "";
-      this.feedManager.startObserver();
-      this.feedManager._activateItem(item.id);
-      this.overlayEl.classList.add("skp-feed-ready");
+      chromeEls.forEach((el) => {
+        el.style.opacity = "";
+        el.style.transition = "";
+      });
       this._escHandler = (e) => {
         if (e.key === "Escape") this.close();
       };
@@ -2616,33 +2712,44 @@
       const feedWrapper = feedEl.parentNode;
       const feedRect = feedEl.getBoundingClientRect();
       const activeItemId = this.feedManager?.activeItemId;
-      let transferBack = false, transferVideo = null, transferHls = null;
-      if (activeItemId === this._openItemId) {
-        const ejected = this.feedManager?.pool.ejectPlayer(activeItemId);
-        if (ejected) {
-          transferBack = true;
-          transferVideo = ejected.video;
-          transferHls = ejected.hls;
-        }
-      }
+      const canTransfer = activeItemId === this._openItemId;
       let targetRect = null;
       if (this._onClose) targetRect = this._onClose("getSourceRect");
       if (feedRect && targetRect) {
-        if (this.feedManager?.activeItemId && !transferBack) {
+        if (this.feedManager?.activeItemId && !canTransfer) {
           this.feedManager._deactivateItem(this.feedManager.activeItemId);
         }
+        const targetItemId = canTransfer ? this._openItemId : activeItemId;
+        if (targetItemId && this.feedManager) {
+          const targetEl = this.feedManager.itemEls.get(targetItemId);
+          if (targetEl) targetEl.scrollIntoView({ behavior: "instant", block: "start" });
+        }
+        const savedScrollTop = feedEl.scrollTop;
         feedEl.style.position = "fixed";
         feedEl.style.left = `${feedRect.left}px`;
         feedEl.style.top = `${feedRect.top}px`;
         feedEl.style.width = `${feedRect.width}px`;
         feedEl.style.height = `${feedRect.height}px`;
-        feedEl.style.zIndex = "9999";
+        feedEl.style.zIndex = String(getComputedStyle(this.overlayEl).zIndex || 9999);
         feedEl.style.margin = "0";
         feedEl.style.flex = "none";
         feedEl.style.aspectRatio = "unset";
         feedEl.style.maxHeight = "none";
         document.body.appendChild(feedEl);
+        feedEl.scrollTop = savedScrollTop;
         this.overlayEl.classList.remove("skp-active", "skp-feed-ready");
+        let thumbOverlay = null;
+        if (this._openThumbnailUrl) {
+          const crossfadeItemId = canTransfer ? this._openItemId : activeItemId;
+          const crossfadeEl = crossfadeItemId && this.feedManager?.itemEls.get(crossfadeItemId);
+          const videoContainer = crossfadeEl?.querySelector('[data-ref="videoContainer"]');
+          if (videoContainer) {
+            thumbOverlay = document.createElement("img");
+            thumbOverlay.src = this._openThumbnailUrl;
+            thumbOverlay.style.cssText = "position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s cubic-bezier(.32,.72,0,1);pointer-events:none;z-index:2;";
+            videoContainer.appendChild(thumbOverlay);
+          }
+        }
         const scaleX = targetRect.width / feedRect.width;
         const scaleY = targetRect.height / feedRect.height;
         const translateX = targetRect.left - feedRect.left;
@@ -2652,29 +2759,58 @@
         feedEl.style.transformOrigin = "0 0";
         feedEl.style.overflow = "hidden";
         feedEl.style.scrollSnapType = "none";
+        feedEl.style.pointerEvents = "none";
         feedEl.getBoundingClientRect();
         feedEl.classList.add("skp-flip-animating");
         requestAnimationFrame(() => {
           feedEl.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
           feedEl.style.borderRadius = `${endRadius}px`;
+          if (thumbOverlay) thumbOverlay.style.opacity = "1";
         });
         await this._waitForTransitionEnd(feedEl, 450);
+        if (thumbOverlay) thumbOverlay.remove();
+        let transferVideo = null;
+        let transferHls = null;
+        if (canTransfer) {
+          const ejected = this.feedManager?.pool.ejectPlayer(this._openItemId);
+          if (ejected) {
+            transferVideo = ejected.video;
+            transferHls = ejected.hls;
+          }
+        }
         feedEl.style.visibility = "hidden";
         feedEl.classList.remove("skp-flip-animating");
-        ["position", "left", "top", "width", "height", "zIndex", "margin", "flex", "aspectRatio", "maxHeight", "transformOrigin", "overflow", "scrollSnapType", "transform", "borderRadius"].forEach((p) => feedEl.style[p] = "");
+        ["position", "left", "top", "width", "height", "zIndex", "margin", "flex", "aspectRatio", "maxHeight", "transformOrigin", "overflow", "scrollSnapType", "pointerEvents", "transform", "borderRadius"].forEach((p) => feedEl.style[p] = "");
         const sidebarEl = feedWrapper.querySelector(".sk-sidebar");
         feedWrapper.insertBefore(feedEl, sidebarEl);
         feedEl.style.visibility = "";
+        if (this._onClose) {
+          this._onClose("closed", {
+            transferVideo,
+            transferHls,
+            transferItemId: transferVideo ? this._openItemId : null
+          });
+          this._onClose = null;
+        }
       } else {
         this.overlayEl.classList.remove("skp-active", "skp-feed-ready");
-      }
-      if (this._onClose) {
-        this._onClose("closed", {
-          transferVideo: transferBack ? transferVideo : null,
-          transferHls: transferBack ? transferHls : null,
-          transferItemId: transferBack ? this._openItemId : null
-        });
-        this._onClose = null;
+        if (this._onClose) {
+          let transferVideo = null;
+          let transferHls = null;
+          if (canTransfer) {
+            const ejected = this.feedManager?.pool.ejectPlayer(this._openItemId);
+            if (ejected) {
+              transferVideo = ejected.video;
+              transferHls = ejected.hls;
+            }
+          }
+          this._onClose("closed", {
+            transferVideo,
+            transferHls,
+            transferItemId: transferVideo ? this._openItemId : null
+          });
+          this._onClose = null;
+        }
       }
       if (this.feedManager) {
         this.feedManager.destroy();
@@ -2726,6 +2862,7 @@
       this._onClose = onClose;
       this._openSlotIndex = startIndex;
       this._openItemId = item.id;
+      this._openThumbnailUrl = item.thumbnailUrl || null;
       const slotRect = slotEl.getBoundingClientRect();
       const slotRadius = parseFloat(getComputedStyle(slotEl).borderRadius) || 12;
       if (_isPreview) {
@@ -2772,6 +2909,21 @@
         feedEl.style.transform = "none";
         feedEl.style.borderRadius = `${targetRadius}px`;
       });
+      this.feedManager.startObserver();
+      this.feedManager._activateItem(item.id);
+      this.overlayEl.classList.add("skw-feed-ready");
+      const itemOverlay = feedItemEl?.querySelector('[data-ref="overlay"]');
+      const chromeEls = [...this.overlayEl.querySelectorAll(".skw-feed-close, .sk-sidebar")];
+      if (itemOverlay) chromeEls.push(itemOverlay);
+      chromeEls.forEach((el) => {
+        el.style.opacity = "0";
+        el.style.transition = "none";
+      });
+      this.overlayEl.getBoundingClientRect();
+      chromeEls.forEach((el) => {
+        el.style.transition = "opacity .35s cubic-bezier(.32,.72,0,1)";
+        el.style.opacity = "1";
+      });
       await this._waitForTransitionEnd(feedEl, 450);
       feedEl.classList.remove("skw-flip-animating");
       feedEl.style.transformOrigin = "";
@@ -2779,9 +2931,10 @@
       feedEl.style.scrollSnapType = "";
       feedEl.style.transform = "";
       feedEl.style.borderRadius = "";
-      this.feedManager.startObserver();
-      this.feedManager._activateItem(item.id);
-      this.overlayEl.classList.add("skw-feed-ready");
+      chromeEls.forEach((el) => {
+        el.style.opacity = "";
+        el.style.transition = "";
+      });
       this._escHandler = (e) => {
         if (e.key === "Escape") this.close();
       };
@@ -2808,6 +2961,12 @@
         if (this.feedManager?.activeItemId && !canTransfer) {
           this.feedManager._deactivateItem(this.feedManager.activeItemId);
         }
+        const targetItemId = canTransfer ? this._openItemId : activeItemId;
+        if (targetItemId && this.feedManager) {
+          const targetEl = this.feedManager.itemEls.get(targetItemId);
+          if (targetEl) targetEl.scrollIntoView({ behavior: "instant", block: "start" });
+        }
+        const savedScrollTop = feedEl.scrollTop;
         feedEl.style.position = "fixed";
         feedEl.style.left = `${feedRect.left}px`;
         feedEl.style.top = `${feedRect.top}px`;
@@ -2819,7 +2978,20 @@
         feedEl.style.aspectRatio = "unset";
         feedEl.style.maxHeight = "none";
         document.body.appendChild(feedEl);
+        feedEl.scrollTop = savedScrollTop;
         this.overlayEl.classList.remove("skw-active", "skw-feed-ready");
+        let thumbOverlay = null;
+        if (this._openThumbnailUrl) {
+          const targetItemId2 = canTransfer ? this._openItemId : activeItemId;
+          const targetEl = targetItemId2 && this.feedManager?.itemEls.get(targetItemId2);
+          const videoContainer = targetEl?.querySelector('[data-ref="videoContainer"]');
+          if (videoContainer) {
+            thumbOverlay = document.createElement("img");
+            thumbOverlay.src = this._openThumbnailUrl;
+            thumbOverlay.style.cssText = "position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s cubic-bezier(.32,.72,0,1);pointer-events:none;z-index:2;";
+            videoContainer.appendChild(thumbOverlay);
+          }
+        }
         const slotRadius = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--skw-radius").trim()) || 12;
         const scaleX = targetSlotRect.width / feedRect.width;
         const scaleY = targetSlotRect.height / feedRect.height;
@@ -2829,13 +3001,16 @@
         feedEl.style.transformOrigin = "0 0";
         feedEl.style.overflow = "hidden";
         feedEl.style.scrollSnapType = "none";
+        feedEl.style.pointerEvents = "none";
         feedEl.getBoundingClientRect();
         feedEl.classList.add("skw-flip-animating");
         requestAnimationFrame(() => {
           feedEl.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
           feedEl.style.borderRadius = `${endRadius}px`;
+          if (thumbOverlay) thumbOverlay.style.opacity = "1";
         });
         await this._waitForTransitionEnd(feedEl, 450);
+        if (thumbOverlay) thumbOverlay.remove();
         let transferVideo = null;
         let transferHls = null;
         if (canTransfer) {
@@ -2860,6 +3035,7 @@
         feedEl.style.transformOrigin = "";
         feedEl.style.overflow = "";
         feedEl.style.scrollSnapType = "";
+        feedEl.style.pointerEvents = "";
         feedEl.style.transform = "";
         feedEl.style.borderRadius = "";
         feedWrapper.insertBefore(feedEl, feedWrapper.firstChild);
@@ -2989,11 +3165,20 @@
     }
     promoteToActive(itemId) {
       const hls = this.hlsInstances.get(itemId);
-      if (hls) {
-        hls.config.maxBufferLength = WidgetPlayerPool.ACTIVE_HLS_CONFIG.maxBufferLength;
-        hls.config.maxMaxBufferLength = WidgetPlayerPool.ACTIVE_HLS_CONFIG.maxMaxBufferLength;
-        hls.autoLevelCapping = -1;
-        hls.nextAutoLevel = -1;
+      if (!hls) return;
+      hls.config.maxBufferLength = WidgetPlayerPool.ACTIVE_HLS_CONFIG.maxBufferLength;
+      hls.config.maxMaxBufferLength = WidgetPlayerPool.ACTIVE_HLS_CONFIG.maxMaxBufferLength;
+      hls.autoLevelCapping = -1;
+      const top = hls.levels ? hls.levels.length - 1 : -1;
+      if (top > 0 && hls.currentLevel < top) {
+        hls.currentLevel = top;
+        const player = this.assignments.get(itemId);
+        if (player) {
+          player.currentTime = player.currentTime;
+        }
+        setTimeout(() => {
+          if (!hls.destroyed) hls.currentLevel = -1;
+        }, 4e3);
       }
     }
     _destroyHls(itemId) {
@@ -3598,7 +3783,7 @@
 
 /* Video container */
 .sk-video-container{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background-size:cover;background-position:center}
-.sk-video-container video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s ease}
+.sk-video-container video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
 
 /* Tap zone */
 .sk-tap-zone{position:absolute;inset:0;z-index:3;cursor:pointer}
@@ -3614,7 +3799,7 @@
 
 /* Widget slot */
 .skw-slot{position:relative;overflow:hidden;cursor:pointer}
-.skw-slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s ease}
+.skw-slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
 .skw-slot-thumb{position:absolute;inset:0;background-size:cover;background-position:center}
 .skw-slot-overlay{position:absolute;inset:0;z-index:4;pointer-events:none}
 .skw-slot-overlay>*{pointer-events:auto}