@shortkitsdk/web 0.3.0 → 0.3.1

package/dist/shortkit.slim.js

@@ -908,7 +908,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 +921,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 +1398,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 +1583,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 {
@@ -1705,7 +1710,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 +1723,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 +1995,10 @@
       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) {
@@ -2193,14 +2197,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 +2560,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 +2605,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 +2627,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 +2643,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 +2690,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 +2793,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 +2840,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 +2862,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 +2892,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 +2909,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 +2932,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 +2966,7 @@
         feedEl.style.transformOrigin = "";
         feedEl.style.overflow = "";
         feedEl.style.scrollSnapType = "";
+        feedEl.style.pointerEvents = "";
         feedEl.style.transform = "";
         feedEl.style.borderRadius = "";
         feedWrapper.insertBefore(feedEl, feedWrapper.firstChild);
@@ -3598,7 +3705,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 +3721,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}