@xhub-reels/sdk 0.1.19 → 0.1.21

package/dist/index.cjs

@@ -1624,43 +1624,6 @@ function DefaultSkeleton() {
             }
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: 100,
-              left: 16,
-              display: "flex",
-              flexDirection: "column",
-              gap: 8
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: skeletonBar(120, 14) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: skeletonBar(200, 12) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: skeletonBar(160, 12) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: 100,
-              right: 16,
-              display: "flex",
-              flexDirection: "column",
-              gap: 20,
-              alignItems: "center"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: skeletonCircle(40) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: skeletonCircle(40) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: skeletonCircle(40) })
-            ]
-          }
-        ),
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
         @keyframes reels-sdk-shimmer {
           0% { transform: translateX(-100%); }
@@ -1671,22 +1634,6 @@ function DefaultSkeleton() {
     }
   );
 }
-function skeletonBar(width, height) {
-  return {
-    width,
-    height,
-    borderRadius: height / 2,
-    background: "rgba(255,255,255,0.1)"
-  };
-}
-function skeletonCircle(size) {
-  return {
-    width: size,
-    height: size,
-    borderRadius: "50%",
-    background: "rgba(255,255,255,0.1)"
-  };
-}
 function DefaultPauseAction() {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -1723,8 +1670,8 @@ function DefaultPauseAction() {
     }
   );
 }
-var PLAY_AHEAD_MAX_CONCURRENT = 3;
-var PLAY_AHEAD_STAGGER_MS = 50;
+var PLAY_AHEAD_MAX_CONCURRENT = 2;
+var PLAY_AHEAD_STAGGER_MS = 80;
 var _playAheadActive = 0;
 var _playAheadQueue = [];
 function acquirePlayAhead() {
@@ -1733,9 +1680,8 @@ function acquirePlayAhead() {
     return Promise.resolve();
   }
   return new Promise((resolve) => {
-    const queuePosition = _playAheadQueue.length;
     _playAheadQueue.push(() => {
-      setTimeout(resolve, PLAY_AHEAD_STAGGER_MS * queuePosition);
+      setTimeout(resolve, PLAY_AHEAD_STAGGER_MS);
     });
   });
 }
@@ -2149,38 +2095,40 @@ function VideoSlotInner({
             children: renderPauseAction ? renderPauseAction(item, pauseActions) : /* @__PURE__ */ jsxRuntime.jsx(DefaultPauseAction, {})
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: 80,
-              left: 16,
-              right: 80,
-              pointerEvents: "none",
-              color: "#fff"
-            },
-            children: renderOverlay ? renderOverlay(item, actions) : /* @__PURE__ */ jsxRuntime.jsx(DefaultOverlay, { item })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: 80,
-              right: 16,
-              display: "flex",
-              flexDirection: "column",
-              gap: 20,
-              alignItems: "center"
-              // Actions must be clickable; stop propagation so taps don't
-              // also trigger the video play/pause handler on the container.
-            },
-            onClick: (e) => e.stopPropagation(),
-            children: renderActions ? renderActions(item, actions) : /* @__PURE__ */ jsxRuntime.jsx(DefaultActions, { item, actions })
-          }
-        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          top: 0,
+          zIndex: 1e3
+        }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+          position: "relative",
+          width: "100%",
+          height: "100%"
+        }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                background: "linear-gradient(to bottom, transparent, rgba(0,0,0,0.5))",
+                position: "absolute",
+                width: "100%",
+                height: "30%",
+                bottom: 0,
+                left: 0
+              }
+            }
+          ),
+          renderOverlay ? renderOverlay(item, actions) : /* @__PURE__ */ jsxRuntime.jsx(DefaultOverlay, { item }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              onClick: (e) => e.stopPropagation(),
+              children: renderActions ? renderActions(item, actions) : /* @__PURE__ */ jsxRuntime.jsx(DefaultActions, { item, actions })
+            }
+          )
+        ] }) }),
         showFps && /* @__PURE__ */ jsxRuntime.jsx(FpsCounter, {})
       ]
     }
@@ -2270,7 +2218,6 @@ function ReelsFeed({
   const slotCacheRef = react.useRef(/* @__PURE__ */ new Map());
   const activeIndexRef = react.useRef(0);
   activeIndexRef.current = focusedIndex;
-  const [isSnapping, setIsSnapping] = react.useState(false);
   const { animateSnap, animateBounceBack, cancelAnimation } = useSnapAnimation({
     duration: snapConfig?.duration ?? 260,
     easing: snapConfig?.easing ?? "cubic-bezier(0.25, 0.46, 0.45, 0.94)"
@@ -2376,13 +2323,7 @@ function ReelsFeed({
         return;
       }
       cancelAnimation();
-      setIsSnapping(true);
       setPrefetchIndex(null);
-      setFocusedIndexImmediate(next);
-      const nextItem = items[next];
-      if (nextItem) {
-        onSlotChange?.(next, nextItem, current);
-      }
       const h = containerHeight.current;
       const targets = [];
       for (const [idx, el] of slotCacheRef.current) {
@@ -2393,7 +2334,13 @@ function ReelsFeed({
         });
       }
       animateSnap(targets);
-      setTimeout(() => setIsSnapping(false), 300);
+      requestAnimationFrame(() => {
+        setFocusedIndexImmediate(next);
+        const nextItem = items[next];
+        if (nextItem) {
+          onSlotChange?.(next, nextItem, current);
+        }
+      });
     },
     [items, animateSnap, animateBounceBack, cancelAnimation, setFocusedIndexImmediate, setPrefetchIndex, onSlotChange]
   );
@@ -2415,13 +2362,13 @@ function ReelsFeed({
     setIsDragMuted(true);
   }, []);
   const handleDragEnd = react.useCallback(() => {
-    setTimeout(() => setIsDragMuted(false), 50);
+    setTimeout(() => setIsDragMuted(false), 300);
   }, []);
   const { bind } = usePointerGesture({
     axis: "y",
     velocityThreshold: gestureConfig?.velocityThreshold ?? 0.3,
     distanceThreshold: gestureConfig?.distanceThreshold ?? 80,
-    disabled: isSnapping,
+    disabled: false,
     containerSize: containerHeight.current,
     dragThresholdRatio: gestureConfig?.dragThresholdRatio ?? 0.5,
     onDragOffset: (offset) => {
@@ -2495,7 +2442,13 @@ function ReelsFeed({
           const wrapperStyle = {
             position: "absolute",
             inset: 0,
-            contain: "layout style paint",
+            // Fix 4: 'strict' = layout + style + paint + size containment.
+            // Tells browser this slot is fully self-contained — no layout
+            // escapes to parent. Eliminates layout thrash during animation.
+            contain: "strict",
+            // Fix 4: willChange only on active ±1 (3 slots max).
+            // Previously ±1 already, keep it. Avoids unnecessary GPU layers
+            // on warm/cold slots that are never animated directly.
             willChange: distFromFocus <= 1 ? "transform" : "auto",
             transform: getInitialTransformPx(index)
           };

package/dist/index.js

@@ -1618,43 +1618,6 @@ function DefaultSkeleton() {
             }
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: 100,
-              left: 16,
-              display: "flex",
-              flexDirection: "column",
-              gap: 8
-            },
-            children: [
-              /* @__PURE__ */ jsx("div", { style: skeletonBar(120, 14) }),
-              /* @__PURE__ */ jsx("div", { style: skeletonBar(200, 12) }),
-              /* @__PURE__ */ jsx("div", { style: skeletonBar(160, 12) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: 100,
-              right: 16,
-              display: "flex",
-              flexDirection: "column",
-              gap: 20,
-              alignItems: "center"
-            },
-            children: [
-              /* @__PURE__ */ jsx("div", { style: skeletonCircle(40) }),
-              /* @__PURE__ */ jsx("div", { style: skeletonCircle(40) }),
-              /* @__PURE__ */ jsx("div", { style: skeletonCircle(40) })
-            ]
-          }
-        ),
         /* @__PURE__ */ jsx("style", { children: `
         @keyframes reels-sdk-shimmer {
           0% { transform: translateX(-100%); }
@@ -1665,22 +1628,6 @@ function DefaultSkeleton() {
     }
   );
 }
-function skeletonBar(width, height) {
-  return {
-    width,
-    height,
-    borderRadius: height / 2,
-    background: "rgba(255,255,255,0.1)"
-  };
-}
-function skeletonCircle(size) {
-  return {
-    width: size,
-    height: size,
-    borderRadius: "50%",
-    background: "rgba(255,255,255,0.1)"
-  };
-}
 function DefaultPauseAction() {
   return /* @__PURE__ */ jsx(
     "div",
@@ -1717,8 +1664,8 @@ function DefaultPauseAction() {
     }
   );
 }
-var PLAY_AHEAD_MAX_CONCURRENT = 3;
-var PLAY_AHEAD_STAGGER_MS = 50;
+var PLAY_AHEAD_MAX_CONCURRENT = 2;
+var PLAY_AHEAD_STAGGER_MS = 80;
 var _playAheadActive = 0;
 var _playAheadQueue = [];
 function acquirePlayAhead() {
@@ -1727,9 +1674,8 @@ function acquirePlayAhead() {
     return Promise.resolve();
   }
   return new Promise((resolve) => {
-    const queuePosition = _playAheadQueue.length;
     _playAheadQueue.push(() => {
-      setTimeout(resolve, PLAY_AHEAD_STAGGER_MS * queuePosition);
+      setTimeout(resolve, PLAY_AHEAD_STAGGER_MS);
     });
   });
 }
@@ -2143,38 +2089,40 @@ function VideoSlotInner({
             children: renderPauseAction ? renderPauseAction(item, pauseActions) : /* @__PURE__ */ jsx(DefaultPauseAction, {})
           }
         ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: 80,
-              left: 16,
-              right: 80,
-              pointerEvents: "none",
-              color: "#fff"
-            },
-            children: renderOverlay ? renderOverlay(item, actions) : /* @__PURE__ */ jsx(DefaultOverlay, { item })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: 80,
-              right: 16,
-              display: "flex",
-              flexDirection: "column",
-              gap: 20,
-              alignItems: "center"
-              // Actions must be clickable; stop propagation so taps don't
-              // also trigger the video play/pause handler on the container.
-            },
-            onClick: (e) => e.stopPropagation(),
-            children: renderActions ? renderActions(item, actions) : /* @__PURE__ */ jsx(DefaultActions, { item, actions })
-          }
-        ),
+        /* @__PURE__ */ jsx("div", { style: {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          top: 0,
+          zIndex: 1e3
+        }, children: /* @__PURE__ */ jsxs("div", { style: {
+          position: "relative",
+          width: "100%",
+          height: "100%"
+        }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                background: "linear-gradient(to bottom, transparent, rgba(0,0,0,0.5))",
+                position: "absolute",
+                width: "100%",
+                height: "30%",
+                bottom: 0,
+                left: 0
+              }
+            }
+          ),
+          renderOverlay ? renderOverlay(item, actions) : /* @__PURE__ */ jsx(DefaultOverlay, { item }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: (e) => e.stopPropagation(),
+              children: renderActions ? renderActions(item, actions) : /* @__PURE__ */ jsx(DefaultActions, { item, actions })
+            }
+          )
+        ] }) }),
         showFps && /* @__PURE__ */ jsx(FpsCounter, {})
       ]
     }
@@ -2264,7 +2212,6 @@ function ReelsFeed({
   const slotCacheRef = useRef(/* @__PURE__ */ new Map());
   const activeIndexRef = useRef(0);
   activeIndexRef.current = focusedIndex;
-  const [isSnapping, setIsSnapping] = useState(false);
   const { animateSnap, animateBounceBack, cancelAnimation } = useSnapAnimation({
     duration: snapConfig?.duration ?? 260,
     easing: snapConfig?.easing ?? "cubic-bezier(0.25, 0.46, 0.45, 0.94)"
@@ -2370,13 +2317,7 @@ function ReelsFeed({
         return;
       }
       cancelAnimation();
-      setIsSnapping(true);
       setPrefetchIndex(null);
-      setFocusedIndexImmediate(next);
-      const nextItem = items[next];
-      if (nextItem) {
-        onSlotChange?.(next, nextItem, current);
-      }
       const h = containerHeight.current;
       const targets = [];
       for (const [idx, el] of slotCacheRef.current) {
@@ -2387,7 +2328,13 @@ function ReelsFeed({
         });
       }
       animateSnap(targets);
-      setTimeout(() => setIsSnapping(false), 300);
+      requestAnimationFrame(() => {
+        setFocusedIndexImmediate(next);
+        const nextItem = items[next];
+        if (nextItem) {
+          onSlotChange?.(next, nextItem, current);
+        }
+      });
     },
     [items, animateSnap, animateBounceBack, cancelAnimation, setFocusedIndexImmediate, setPrefetchIndex, onSlotChange]
   );
@@ -2409,13 +2356,13 @@ function ReelsFeed({
     setIsDragMuted(true);
   }, []);
   const handleDragEnd = useCallback(() => {
-    setTimeout(() => setIsDragMuted(false), 50);
+    setTimeout(() => setIsDragMuted(false), 300);
   }, []);
   const { bind } = usePointerGesture({
     axis: "y",
     velocityThreshold: gestureConfig?.velocityThreshold ?? 0.3,
     distanceThreshold: gestureConfig?.distanceThreshold ?? 80,
-    disabled: isSnapping,
+    disabled: false,
     containerSize: containerHeight.current,
     dragThresholdRatio: gestureConfig?.dragThresholdRatio ?? 0.5,
     onDragOffset: (offset) => {
@@ -2489,7 +2436,13 @@ function ReelsFeed({
           const wrapperStyle = {
             position: "absolute",
             inset: 0,
-            contain: "layout style paint",
+            // Fix 4: 'strict' = layout + style + paint + size containment.
+            // Tells browser this slot is fully self-contained — no layout
+            // escapes to parent. Eliminates layout thrash during animation.
+            contain: "strict",
+            // Fix 4: willChange only on active ±1 (3 slots max).
+            // Previously ±1 already, keep it. Avoids unnecessary GPU layers
+            // on warm/cold slots that are never animated directly.
             willChange: distFromFocus <= 1 ? "transform" : "auto",
             transform: getInitialTransformPx(index)
           };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xhub-reels/sdk",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "High-performance Short Video / Reels SDK for React — optimized for Flutter WebView",
   "license": "MIT",
   "type": "module",