@shortkitsdk/web 0.3.0 → 0.3.2

package/dist/shortkit.slim.mjs

@@ -599,16 +599,35 @@ class PlayerPool {
     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. */
@@ -904,7 +923,7 @@ class FeedManager {
   }
   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 });
@@ -917,7 +936,7 @@ class FeedManager {
   }
   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 });
@@ -1394,11 +1413,10 @@ class FeedManager {
     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 ---
@@ -1580,14 +1598,20 @@ class FeedManager {
     }
   }
   /** 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 {
@@ -1636,6 +1660,7 @@ class EmbeddedFeedManager {
     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" });
@@ -1658,6 +1683,11 @@ class EmbeddedFeedManager {
       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 = [];
@@ -1701,7 +1731,7 @@ class EmbeddedFeedManager {
   }
   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 });
@@ -1714,7 +1744,7 @@ class EmbeddedFeedManager {
   }
   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 });
@@ -1986,11 +2016,52 @@ class EmbeddedFeedManager {
     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) {
@@ -1998,6 +2069,7 @@ class EmbeddedFeedManager {
     const tick = () => {
       if (this._destroyed) return;
       if (!player || player.paused) {
+        this._updateDebugPanel();
         this.rafIds.set(id, requestAnimationFrame(tick));
         return;
       }
@@ -2023,6 +2095,7 @@ class EmbeddedFeedManager {
         player.play().catch(() => {
         });
       }
+      this._updateDebugPanel();
       this.rafIds.set(id, requestAnimationFrame(tick));
     };
     this.rafIds.set(id, requestAnimationFrame(tick));
@@ -2189,14 +2262,20 @@ class EmbeddedFeedManager {
     } 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>';
@@ -2546,6 +2625,7 @@ class PlayerFeedView {
     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");
@@ -2590,6 +2670,21 @@ class PlayerFeedView {
       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 = "";
@@ -2597,9 +2692,10 @@ class PlayerFeedView {
     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();
     };
@@ -2612,33 +2708,44 @@ class PlayerFeedView {
     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;
@@ -2648,29 +2755,58 @@ class PlayerFeedView {
       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();
@@ -2722,6 +2858,7 @@ class FeedView {
     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) {
@@ -2768,6 +2905,21 @@ class FeedView {
       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 = "";
@@ -2775,9 +2927,10 @@ class FeedView {
     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();
     };
@@ -2804,6 +2957,12 @@ class FeedView {
       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`;
@@ -2815,7 +2974,20 @@ class FeedView {
       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;
@@ -2825,13 +2997,16 @@ class FeedView {
       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) {
@@ -2856,6 +3031,7 @@ class FeedView {
       feedEl.style.transformOrigin = "";
       feedEl.style.overflow = "";
       feedEl.style.scrollSnapType = "";
+      feedEl.style.pointerEvents = "";
       feedEl.style.transform = "";
       feedEl.style.borderRadius = "";
       feedWrapper.insertBefore(feedEl, feedWrapper.firstChild);
@@ -2985,11 +3161,20 @@ class WidgetPlayerPool {
   }
   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) {
@@ -3594,7 +3779,7 @@ const CSS = `
 
 /* 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}
@@ -3610,7 +3795,7 @@ const CSS = `
 
 /* 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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shortkitsdk/web",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "ShortKit Web SDK — embeddable short-form video feed, player, and widget",
   "type": "module",
   "main": "dist/shortkit.slim.cjs",