@shortkitsdk/web 0.3.0 → 0.3.1

package/dist/shortkit.slim.mjs

@@ -904,7 +904,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 +917,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 +1394,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 +1579,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 {
@@ -1701,7 +1706,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 +1719,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 +1991,10 @@ 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);
   }
   // --- Time loop (state emission only, no DOM updates) ---
   _startTimeLoop(id, el, player) {
@@ -2189,14 +2193,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 +2556,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 +2601,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 +2623,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 +2639,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 +2686,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 +2789,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 +2836,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 +2858,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 +2888,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 +2905,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 +2928,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 +2962,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);
@@ -3594,7 +3701,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 +3717,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.1",
   "description": "ShortKit Web SDK — embeddable short-form video feed, player, and widget",
   "type": "module",
   "main": "dist/shortkit.slim.cjs",