@xhub-reels/sdk 0.1.19 → 0.1.20

package/dist/index.cjs

@@ -1723,8 +1723,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 +1733,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);
     });
   });
 }
@@ -2270,7 +2269,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 +2374,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 +2385,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 +2413,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 +2493,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

@@ -1717,8 +1717,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 +1727,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);
     });
   });
 }
@@ -2264,7 +2263,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 +2368,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 +2379,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 +2407,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 +2487,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.20",
   "description": "High-performance Short Video / Reels SDK for React — optimized for Flutter WebView",
   "license": "MIT",
   "type": "module",