@shortkitsdk/web 0.3.0 → 0.3.1

package/dist/shortkit.mjs

@@ -33847,7 +33847,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 });
@@ -33860,7 +33860,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 });
@@ -34337,11 +34337,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 ---
@@ -34523,14 +34522,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 {
@@ -34644,7 +34649,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 });
@@ -34657,7 +34662,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 });
@@ -34929,11 +34934,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) {
@@ -35132,14 +35136,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>';
@@ -35489,6 +35499,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");
@@ -35533,6 +35544,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 = "";
@@ -35540,9 +35566,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();
     };
@@ -35555,33 +35582,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;
@@ -35591,29 +35629,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();
@@ -35665,6 +35732,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) {
@@ -35711,6 +35779,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 = "";
@@ -35718,9 +35801,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();
     };
@@ -35747,6 +35831,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`;
@@ -35758,7 +35848,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;
@@ -35768,13 +35871,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) {
@@ -35799,6 +35905,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);
@@ -36537,7 +36644,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}
@@ -36553,7 +36660,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}