@xhub-reels/sdk 0.1.14 → 0.1.17

package/dist/index.cjs

@@ -833,6 +833,21 @@ var ResourceGovernor = class {
   isPreloading(index) {
     return this.store.getState().preloadQueue.includes(index);
   }
+  /**
+   * Returns the buffer tier (1–4) for a given index.
+   * - 1: Active (playing, 10s buffer)
+   * - 2: Hot (±bufferWindow, 2s buffer, instant swap)
+   * - 3: Warm (manifest + 1 segment, ~300ms show)
+   * - 4: Cold (preload queue — manifest in HTTP cache, no DOM)
+   */
+  getTier(index) {
+    const { focusedIndex, activeAllocations, warmAllocations, preloadQueue } = this.store.getState();
+    if (index === focusedIndex) return 1;
+    if (activeAllocations.has(index)) return 2;
+    if (warmAllocations.has(index)) return 3;
+    if (preloadQueue.includes(index)) return 4;
+    return null;
+  }
   getActiveAllocations() {
     return [...this.store.getState().activeAllocations];
   }
@@ -905,7 +920,9 @@ function usePointerGesture(config = {}) {
     containerSize,
     dragThresholdRatio = 0.5,
     onSnap,
-    onBounceBack
+    onBounceBack,
+    onDragStart,
+    onDragEnd
   } = config;
   const isDraggingRef = react.useRef(false);
   const dragOffsetRef = react.useRef(0);
@@ -922,6 +939,8 @@ function usePointerGesture(config = {}) {
   const onDragThresholdRef = react.useRef(onDragThreshold);
   const onSnapRef = react.useRef(onSnap);
   const onBounceBackRef = react.useRef(onBounceBack);
+  const onDragStartRef = react.useRef(onDragStart);
+  const onDragEndRef = react.useRef(onDragEnd);
   const disabledRef = react.useRef(disabled);
   const containerSizeRef = react.useRef(containerSize);
   const dragThresholdRatioRef = react.useRef(dragThresholdRatio);
@@ -930,6 +949,8 @@ function usePointerGesture(config = {}) {
     onDragThresholdRef.current = onDragThreshold;
     onSnapRef.current = onSnap;
     onBounceBackRef.current = onBounceBack;
+    onDragStartRef.current = onDragStart;
+    onDragEndRef.current = onDragEnd;
     disabledRef.current = disabled;
     containerSizeRef.current = containerSize;
     dragThresholdRatioRef.current = dragThresholdRatio;
@@ -996,6 +1017,7 @@ function usePointerGesture(config = {}) {
       window.removeEventListener("pointermove", handlePointerMove);
       window.removeEventListener("pointerup", handlePointerUp);
       window.removeEventListener("pointercancel", handlePointerUp);
+      onDragEndRef.current?.();
       const offset = dragOffsetRef.current;
       const velocity = velocityRef.current;
       const shouldSnap = Math.abs(velocity) > velocityThreshold || Math.abs(offset) > distanceThreshold;
@@ -1027,6 +1049,7 @@ function usePointerGesture(config = {}) {
       lastTimeRef.current = performance.now();
       velocityRef.current = 0;
       dragOffsetRef.current = 0;
+      onDragStartRef.current?.();
       e.currentTarget.setPointerCapture(e.pointerId);
       window.addEventListener("pointermove", handlePointerMove, { passive: true });
       window.addEventListener("pointerup", handlePointerUp);
@@ -1244,6 +1267,7 @@ function useResource() {
   const networkType = useResourceSelector((s) => s.networkType);
   const isActive = useResourceSelector((s) => s.isActive);
   const prefetchIndex = useResourceSelector((s) => s.prefetchIndex);
+  const preloadQueue = useResourceSelector((s) => s.preloadQueue);
   const activeIndices = react.useMemo(() => [...activeAllocations], [activeAllocations]);
   const warmIndices = react.useMemo(() => [...warmAllocations], [warmAllocations]);
   const setFocusedIndex = react.useCallback(
@@ -1274,6 +1298,10 @@ function useResource() {
     (i) => resourceGovernor.setPrefetchIndex(i),
     [resourceGovernor]
   );
+  const getTier = react.useCallback(
+    (index) => resourceGovernor.getTier(index),
+    [resourceGovernor]
+  );
   return {
     activeIndices,
     warmIndices,
@@ -1282,13 +1310,15 @@ function useResource() {
     networkType,
     isActive,
     prefetchIndex,
+    preloadQueue,
     setFocusedIndex,
     setFocusedIndexImmediate,
     setTotalItems,
     shouldRenderVideo,
     isAllocated,
     isWarmAllocated,
-    setPrefetchIndex
+    setPrefetchIndex,
+    getTier
   };
 }
 var ACTIVE_HLS_DEFAULTS = {
@@ -1364,18 +1394,9 @@ function mapHlsError(data) {
 }
 function useHls(options) {
   const { src, videoRef, isActive, isPrefetch, bufferTier = "active", hlsConfig, onError } = options;
-  const [isHlsJs, setIsHlsJs] = react.useState(false);
-  const [isNativeHls, setIsNativeHls] = react.useState(false);
-  react.useEffect(() => {
-    const hlsSupported = Hls__default.default.isSupported();
-    const native = supportsNativeHls();
-    setIsHlsJs(hlsSupported && !native);
-    setIsNativeHls(native);
-  }, []);
-  const isHlsJsRef = react.useRef(false);
-  const isNativeRef = react.useRef(false);
-  isHlsJsRef.current = isHlsJs;
-  isNativeRef.current = isNativeHls;
+  const isHlsSupported = typeof window !== "undefined" && Hls__default.default.isSupported();
+  const isNative = supportsNativeHls();
+  const isHlsJs = isHlsSupported && !isNative;
   const [isReady, setIsReady] = react.useState(false);
   const hlsRef = react.useRef(null);
   const onErrorRef = react.useRef(onError);
@@ -1400,18 +1421,7 @@ function useHls(options) {
       currentSrcRef.current = void 0;
       return;
     }
-    const isNative = isNativeRef.current;
-    const isHlsSupported = isHlsJsRef.current;
     if (!isActive && !isPrefetch) {
-      if (isNative) {
-        if (video.src) {
-          video.removeAttribute("src");
-          video.load();
-        }
-        setIsReady(false);
-        currentSrcRef.current = void 0;
-        return;
-      }
       destroy();
       setIsReady(false);
       canPlayFiredRef.current = false;
@@ -1419,45 +1429,40 @@ function useHls(options) {
       return;
     }
     if (isNative) {
-      if (currentSrcRef.current === src) {
-        if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
-          setIsReady(true);
-          return void 0;
-        }
-        const handleCanPlayReuse = () => setIsReady(true);
-        video.addEventListener("canplay", handleCanPlayReuse, { once: true });
-        video.addEventListener("loadeddata", handleCanPlayReuse, { once: true });
-        video.addEventListener("playing", handleCanPlayReuse, { once: true });
-        if (video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
-          video.load();
-        }
-        return () => {
-          video.removeEventListener("canplay", handleCanPlayReuse);
-          video.removeEventListener("loadeddata", handleCanPlayReuse);
-          video.removeEventListener("playing", handleCanPlayReuse);
-        };
-      }
-      video.src = src;
-      currentSrcRef.current = src;
-      if (!isActive) {
+      if (video.src !== src) {
+        video.src = src;
         video.load();
       }
-      if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+      if (!video.hasAttribute("webkit-playsinline")) {
+        video.setAttribute("webkit-playsinline", "");
+      }
+      if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
         setIsReady(true);
-        return void 0;
+        currentSrcRef.current = src;
+        return;
       }
       setIsReady(false);
-      const handleCanPlay2 = () => setIsReady(true);
+      canPlayFiredRef.current = false;
+      currentSrcRef.current = src;
+      const handleCanPlay2 = () => {
+        canPlayFiredRef.current = true;
+        setIsReady(true);
+      };
+      const handleLoadedData = () => {
+        if (!canPlayFiredRef.current) {
+          canPlayFiredRef.current = true;
+          setIsReady(true);
+        }
+      };
       video.addEventListener("canplay", handleCanPlay2, { once: true });
-      video.addEventListener("loadeddata", handleCanPlay2, { once: true });
-      video.addEventListener("playing", handleCanPlay2, { once: true });
+      video.addEventListener("loadeddata", handleLoadedData, { once: true });
       return () => {
         video.removeEventListener("canplay", handleCanPlay2);
-        video.removeEventListener("loadeddata", handleCanPlay2);
-        video.removeEventListener("playing", handleCanPlay2);
+        video.removeEventListener("loadeddata", handleLoadedData);
       };
     }
     if (!isHlsSupported) {
+      onErrorRef.current?.("UNKNOWN", "HLS playback not supported in this browser");
       return;
     }
     if (hlsRef.current && currentSrcRef.current === src) {
@@ -1521,7 +1526,7 @@ function useHls(options) {
         currentSrcRef.current = void 0;
       }
     };
-  }, [src, isActive, isPrefetch, isHlsJs, isNativeHls]);
+  }, [src, isActive, isPrefetch]);
   react.useEffect(() => {
     const hls = hlsRef.current;
     if (!hls) {
@@ -1537,10 +1542,15 @@ function useHls(options) {
     for (const key of configKeys) {
       hlsAnyConfig[key] = newConfig[key];
     }
+    if (prevTier === "warm" && bufferTier === "active") {
+      try {
+        hls.startLoad();
+      } catch {
+      }
+    }
   }, [bufferTier]);
   return {
     isHlsJs,
-    isNativeHls,
     isReady,
     destroy
   };
@@ -1659,6 +1669,60 @@ function skeletonCircle(size) {
     background: "rgba(255,255,255,0.1)"
   };
 }
+function DefaultPauseAction() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        width: 72,
+        height: 72,
+        borderRadius: "50%",
+        background: "rgba(0, 0, 0, 0.55)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        pointerEvents: "none",
+        // Inset the triangle visually — triangles look off-center without this
+        paddingLeft: 6
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          width: "32",
+          height: "32",
+          viewBox: "0 0 32 32",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M8 5.5L27 16L8 26.5V5.5Z",
+              fill: "white"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var PLAY_AHEAD_MAX_CONCURRENT = 2;
+var _playAheadActive = 0;
+var _playAheadQueue = [];
+function acquirePlayAhead() {
+  if (_playAheadActive < PLAY_AHEAD_MAX_CONCURRENT) {
+    _playAheadActive++;
+    return Promise.resolve();
+  }
+  return new Promise((resolve) => _playAheadQueue.push(resolve));
+}
+function releasePlayAhead() {
+  _playAheadActive = Math.max(0, _playAheadActive - 1);
+  const next = _playAheadQueue.shift();
+  if (next) {
+    _playAheadActive++;
+    next();
+  }
+}
 function VideoSlot({
   item,
   index,
@@ -1668,10 +1732,11 @@ function VideoSlot({
   bufferTier,
   isMuted,
   onToggleMute,
+  onAutoplayBlocked,
   showFps = false,
   renderOverlay,
   renderActions,
-  renderPauseIndicator
+  renderPauseAction
 }) {
   const { optimisticManager, adapters } = useSDK();
   if (!isVideoItem(item)) {
@@ -1704,10 +1769,11 @@ function VideoSlot({
       bufferTier,
       isMuted,
       onToggleMute,
+      onAutoplayBlocked,
       showFps,
       renderOverlay,
       renderActions,
-      renderPauseIndicator,
+      renderPauseAction,
       optimisticManager,
       adapters
     }
@@ -1722,10 +1788,11 @@ function VideoSlotInner({
   bufferTier,
   isMuted,
   onToggleMute,
+  onAutoplayBlocked,
   showFps,
   renderOverlay,
   renderActions,
-  renderPauseIndicator,
+  renderPauseAction,
   optimisticManager,
   adapters
 }) {
@@ -1736,7 +1803,7 @@ function VideoSlotInner({
   const isHlsSource = sourceType === "hls";
   const hlsSrc = isHlsSource && shouldLoadSrc ? src : void 0;
   const mp4Src = !isHlsSource && shouldLoadSrc ? src : void 0;
-  const { isReady: hlsReady, isNativeHls } = useHls({
+  const { isReady: hlsReady } = useHls({
     src: hlsSrc,
     videoRef,
     isActive,
@@ -1775,9 +1842,7 @@ function VideoSlotInner({
   }, [mp4Src, isActive, isPrefetch, isPreloaded, isHlsSource]);
   const isReady = isHlsSource ? hlsReady : mp4Ready;
   const [hasPlayedAhead, setHasPlayedAhead] = react.useState(false);
-  const canPlayAhead = isHlsSource && !isNativeHls;
   react.useEffect(() => {
-    if (!canPlayAhead) return;
     const video = videoRef.current;
     if (!video) return;
     if (isActive || !isReady) return;
@@ -1785,180 +1850,145 @@ function VideoSlotInner({
     const prevMuted = video.muted;
     video.muted = true;
     let cancelled = false;
-    let rafId = null;
-    let vfcHandle = null;
-    const pauseAfterDecode = () => {
-      if (cancelled) return;
-      video.pause();
-      video.currentTime = 0;
-      video.muted = prevMuted;
-      setHasPlayedAhead(true);
-    };
     const doPlayAhead = async () => {
+      await acquirePlayAhead();
       try {
         await video.play();
-        if (cancelled) return;
-        if ("requestVideoFrameCallback" in video) {
-          vfcHandle = video.requestVideoFrameCallback(() => {
-            vfcHandle = null;
-            pauseAfterDecode();
-          });
-        } else {
-          rafId = requestAnimationFrame(() => {
-            rafId = requestAnimationFrame(() => {
-              rafId = null;
-              pauseAfterDecode();
-            });
-          });
+        if (cancelled) {
+          video.pause();
+          releasePlayAhead();
+          return;
         }
+        const pauseAfterDecode = () => {
+          video.pause();
+          video.currentTime = 0;
+          video.muted = prevMuted;
+          releasePlayAhead();
+          if (!cancelled) {
+            setHasPlayedAhead(true);
+          }
+        };
+        setTimeout(pauseAfterDecode, 50);
       } catch {
-        video.muted = prevMuted;
+        releasePlayAhead();
       }
     };
     doPlayAhead();
     return () => {
       cancelled = true;
-      if (rafId !== null) {
-        cancelAnimationFrame(rafId);
-        rafId = null;
-      }
-      if (vfcHandle !== null && "cancelVideoFrameCallback" in video) {
-        video.cancelVideoFrameCallback(vfcHandle);
-        vfcHandle = null;
-      }
     };
-  }, [canPlayAhead, isActive, isReady, hasPlayedAhead]);
+  }, [isActive, isReady, hasPlayedAhead]);
   react.useEffect(() => {
     setHasPlayedAhead(false);
   }, [src]);
   const wasActiveRef = react.useRef(false);
+  const [isManuallyPaused, setIsManuallyPaused] = react.useState(false);
   react.useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
     let onReady = null;
-    let fallbackTimerId = null;
-    let pollId = null;
-    if (isActive) {
-      wasActiveRef.current = true;
-      const startPlay = () => {
-        if (onReady) {
-          video.removeEventListener("canplay", onReady);
-          video.removeEventListener("loadeddata", onReady);
-          video.removeEventListener("playing", onReady);
-          onReady = null;
-        }
-        if (fallbackTimerId !== null) {
-          clearTimeout(fallbackTimerId);
-          fallbackTimerId = null;
-        }
-        if (pollId !== null) {
-          clearInterval(pollId);
-          pollId = null;
-        }
+    let cancelled = false;
+    const attemptPlay = () => {
+      if (cancelled) return;
+      if (isMuted) {
         video.muted = true;
-        video.play().then(() => {
-          video.muted = isMuted;
-        }).catch(() => {
-          video.muted = isMuted;
+        video.play().catch(() => {
         });
-      };
-      if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
-        startPlay();
       } else {
-        onReady = startPlay;
-        video.addEventListener("canplay", onReady, { once: true });
-        video.addEventListener("loadeddata", onReady, { once: true });
-        video.addEventListener("playing", onReady, { once: true });
-        if (isNativeHls && video.src && video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
-          video.load();
-        }
-        if (isNativeHls) {
-          pollId = setInterval(() => {
-            if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && onReady) {
-              if (pollId !== null) {
-                clearInterval(pollId);
-                pollId = null;
+        video.muted = false;
+        video.play().then(() => {
+          if (cancelled) {
+            video.pause();
+          }
+        }).catch((err) => {
+          if (cancelled) return;
+          if (err.name === "NotAllowedError") {
+            video.muted = true;
+            video.play().then(() => {
+              if (cancelled) {
+                video.pause();
+                return;
               }
-              startPlay();
-            }
-          }, 100);
-        }
-        fallbackTimerId = window.setTimeout(() => {
-          fallbackTimerId = null;
-          if (onReady) {
-            startPlay();
+              onAutoplayBlocked?.();
+            }).catch(() => {
+            });
           }
-        }, isNativeHls ? 800 : 3e3);
+        });
+      }
+    };
+    if (isActive && !isManuallyPaused) {
+      wasActiveRef.current = true;
+      if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+        attemptPlay();
+      } else {
+        onReady = attemptPlay;
+        video.addEventListener("canplay", onReady, { once: true });
       }
+    } else if (isActive && isManuallyPaused) {
+      wasActiveRef.current = true;
+      video.pause();
     } else if (wasActiveRef.current) {
       video.pause();
       video.currentTime = 0;
       wasActiveRef.current = false;
+      setIsManuallyPaused(false);
       setHasPlayedAhead(false);
     } else if (!hasPlayedAhead) {
       video.pause();
     }
     return () => {
-      if (onReady) {
-        video.removeEventListener("canplay", onReady);
-        video.removeEventListener("loadeddata", onReady);
-        video.removeEventListener("playing", onReady);
-      }
-      if (fallbackTimerId !== null) {
-        clearTimeout(fallbackTimerId);
-        fallbackTimerId = null;
-      }
-      if (pollId !== null) {
-        clearInterval(pollId);
-        pollId = null;
-      }
+      cancelled = true;
+      if (onReady) video.removeEventListener("canplay", onReady);
     };
-  }, [isActive, isMuted, hasPlayedAhead, isNativeHls]);
+  }, [isActive, isMuted, hasPlayedAhead, isManuallyPaused, onAutoplayBlocked]);
   react.useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
-    if (isActive) {
-      video.muted = isMuted;
-    } else {
-      video.muted = true;
-    }
+    video.muted = isActive ? isMuted : true;
   }, [isMuted, isActive]);
-  const [isActuallyPlaying, setIsActuallyPlaying] = react.useState(false);
-  react.useEffect(() => {
-    const video = videoRef.current;
-    if (!video) return;
-    const onPlaying = () => setIsActuallyPlaying(true);
-    const onPause = () => setIsActuallyPlaying(false);
-    const onEnded = () => setIsActuallyPlaying(false);
-    video.addEventListener("playing", onPlaying);
-    video.addEventListener("pause", onPause);
-    video.addEventListener("ended", onEnded);
-    return () => {
-      video.removeEventListener("playing", onPlaying);
-      video.removeEventListener("pause", onPause);
-      video.removeEventListener("ended", onEnded);
-    };
+  const showPosterOverlay = !isReady && !hasPlayedAhead;
+  const [showMuteIndicator, setShowMuteIndicator] = react.useState(false);
+  const muteIndicatorTimer = react.useRef(null);
+  const handleToggleMute = react.useCallback(() => {
+    onToggleMute();
+    setShowMuteIndicator(true);
+    if (muteIndicatorTimer.current) clearTimeout(muteIndicatorTimer.current);
+    muteIndicatorTimer.current = setTimeout(() => setShowMuteIndicator(false), 1200);
+  }, [onToggleMute]);
+  const tapStartRef = react.useRef(null);
+  const TAP_SLOP_PX = 10;
+  const handlePointerDown = react.useCallback((e) => {
+    tapStartRef.current = { x: e.clientX, y: e.clientY };
   }, []);
-  react.useEffect(() => {
-    if (!isActive) setIsActuallyPlaying(false);
-  }, [isActive]);
-  const showPosterOverlay = isActive ? !isReady && !isActuallyPlaying : canPlayAhead ? !hasPlayedAhead : !isReady;
-  const [isPaused, setIsPaused] = react.useState(false);
-  const handleTap = react.useCallback(() => {
+  const handleClick = react.useCallback((e) => {
+    if (e.button !== 0) return;
+    if (!isActive) return;
+    const start = tapStartRef.current;
+    if (start) {
+      const dx = Math.abs(e.clientX - start.x);
+      const dy = Math.abs(e.clientY - start.y);
+      if (dx > TAP_SLOP_PX || dy > TAP_SLOP_PX) {
+        tapStartRef.current = null;
+        return;
+      }
+    }
+    tapStartRef.current = null;
     const video = videoRef.current;
-    if (!video || !isActive) return;
-    if (video.paused) {
-      video.play().catch(() => {
+    if (!video) return;
+    if (video.paused || isManuallyPaused) {
+      setIsManuallyPaused(false);
+      video.muted = true;
+      video.play().then(() => {
+        requestAnimationFrame(() => {
+          video.muted = isMuted;
+        });
+      }).catch(() => {
       });
-      setIsPaused(false);
     } else {
+      setIsManuallyPaused(true);
       video.pause();
-      setIsPaused(true);
     }
-  }, [isActive]);
-  react.useEffect(() => {
-    if (isActive) setIsPaused(false);
-  }, [isActive]);
+  }, [isActive, isManuallyPaused, isMuted]);
   const likeDelta = react.useSyncExternalStore(
     optimisticManager.store.subscribe,
     () => optimisticManager.getLikeDelta(item.id),
@@ -1976,12 +2006,36 @@ function VideoSlotInner({
     followState,
     share: () => adapters.interaction?.share?.(item.id),
     isMuted,
-    toggleMute: onToggleMute,
-    isPaused,
-    togglePause: handleTap,
+    toggleMute: handleToggleMute,
     isActive,
     index
-  }), [item, likeDelta, followState, isMuted, isPaused, isActive, index, optimisticManager, adapters, onToggleMute, handleTap]);
+  }), [item, likeDelta, followState, isMuted, isActive, index, optimisticManager, adapters, handleToggleMute]);
+  const pauseActions = react.useMemo(() => ({
+    ...actions,
+    isPaused: isManuallyPaused,
+    togglePlayPause: () => {
+      const video = videoRef.current;
+      if (!video) return;
+      if (isManuallyPaused) {
+        setIsManuallyPaused(false);
+        video.muted = true;
+        video.play().then(() => {
+          requestAnimationFrame(() => {
+            video.muted = isMuted;
+          });
+        }).catch(() => {
+        });
+      } else {
+        setIsManuallyPaused(true);
+        video.pause();
+      }
+    }
+  }), [actions, isManuallyPaused, isMuted]);
+  react.useEffect(() => {
+    return () => {
+      if (muteIndicatorTimer.current) clearTimeout(muteIndicatorTimer.current);
+    };
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1992,7 +2046,8 @@ function VideoSlotInner({
         background: "#111",
         overflow: "hidden"
       },
-      onClick: handleTap,
+      onPointerDown: handlePointerDown,
+      onClick: handleClick,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "video",
@@ -2000,9 +2055,8 @@ function VideoSlotInner({
             ref: videoRef,
             src: mp4Src,
             loop: true,
-            muted: true,
+            muted: isActive ? isMuted : true,
             playsInline: true,
-            autoPlay: isActive,
             preload: shouldLoadSrc ? "auto" : "none",
             style: {
               width: "100%",
@@ -2029,7 +2083,7 @@ function VideoSlotInner({
             }
           }
         ),
-        isPaused && /* @__PURE__ */ jsxRuntime.jsx(
+        showMuteIndicator && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             style: {
@@ -2037,26 +2091,32 @@ function VideoSlotInner({
               top: "50%",
               left: "50%",
               transform: "translate(-50%, -50%)",
+              background: "rgba(0,0,0,0.6)",
+              borderRadius: "50%",
+              width: 64,
+              height: 64,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 28,
               pointerEvents: "none",
-              zIndex: 5,
-              opacity: 0.3
+              animation: "reels-sdk-fadeInOut 1.2s ease forwards"
             },
-            children: renderPauseIndicator ? renderPauseIndicator(isPaused) : /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: {
-                  background: "rgba(0,0,0,0.6)",
-                  borderRadius: "50%",
-                  width: 64,
-                  height: 64,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  fontSize: 28
-                },
-                children: "\u25B6\uFE0F"
-              }
-            )
+            children: isMuted ? "\u{1F507}" : "\u{1F50A}"
+          }
+        ),
+        isActive && isManuallyPaused && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              pointerEvents: "none",
+              animation: "reels-sdk-fadeIn 0.2s ease forwards"
+            },
+            children: renderPauseAction ? renderPauseAction(item, pauseActions) : /* @__PURE__ */ jsxRuntime.jsx(DefaultPauseAction, {})
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -2064,13 +2124,11 @@ function VideoSlotInner({
           {
             style: {
               position: "absolute",
-              bottom: 0,
+              bottom: 80,
               left: 16,
               right: 80,
-              paddingBottom: 16,
               pointerEvents: "none",
-              color: "#fff",
-              zIndex: 10
+              color: "#fff"
             },
             children: renderOverlay ? renderOverlay(item, actions) : /* @__PURE__ */ jsxRuntime.jsx(DefaultOverlay, { item })
           }
@@ -2078,19 +2136,18 @@ function VideoSlotInner({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            onClick: (e) => e.stopPropagation(),
             style: {
               position: "absolute",
-              bottom: 0,
+              bottom: 80,
               right: 16,
-              paddingBottom: 16,
               display: "flex",
               flexDirection: "column",
               gap: 20,
-              alignItems: "center",
-              pointerEvents: "auto",
-              zIndex: 10
+              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 })
           }
         ),
@@ -2140,6 +2197,7 @@ function FpsCounter() {
     }
   );
 }
+var RENDER_WINDOW_RADIUS = 3;
 var centerStyle = {
   height: "100dvh",
   display: "flex",
@@ -2151,7 +2209,7 @@ var centerStyle = {
 function ReelsFeed({
   renderOverlay,
   renderActions,
-  renderPauseIndicator,
+  renderPauseAction,
   renderLoading,
   renderEmpty,
   renderError: _renderError,
@@ -2159,21 +2217,24 @@ function ReelsFeed({
   loadMoreThreshold = 5,
   onSlotChange,
   gestureConfig,
-  snapConfig
+  snapConfig,
+  initialMuted = true,
+  onAutoplayBlocked
 }) {
   const { items, loading, loadInitial, loadMore, hasMore } = useFeed();
+  const { adapters } = useSDK();
   const {
-    activeIndices,
-    warmIndices,
     focusedIndex,
     prefetchIndex,
+    preloadQueue,
     setFocusedIndexImmediate,
     setTotalItems,
     shouldRenderVideo,
     isWarmAllocated,
     setPrefetchIndex
   } = useResource();
-  const [isMuted, setIsMuted] = react.useState(false);
+  const [isMuted, setIsMuted] = react.useState(initialMuted);
+  const [isDragMuted, setIsDragMuted] = react.useState(false);
   const containerRef = react.useRef(null);
   const slotCacheRef = react.useRef(/* @__PURE__ */ new Map());
   const activeIndexRef = react.useRef(0);
@@ -2189,6 +2250,14 @@ function ReelsFeed({
   react.useEffect(() => {
     setTotalItems(items.length);
   }, [items.length, setTotalItems]);
+  react.useEffect(() => {
+    for (const idx of preloadQueue) {
+      const item = items[idx];
+      if (item && isVideoItem(item) && item.source.type === "hls") {
+        adapters.videoLoader?.preloadMetadata?.(item.source.url);
+      }
+    }
+  }, [preloadQueue, items, adapters.videoLoader]);
   react.useEffect(() => {
     if (items.length - focusedIndex <= loadMoreThreshold && hasMore && !loading) {
       loadMore();
@@ -2209,7 +2278,7 @@ function ReelsFeed({
     const observer = new MutationObserver(rebuild);
     observer.observe(container, { childList: true, subtree: true });
     return () => observer.disconnect();
-  }, [items.length]);
+  }, [items.length, focusedIndex]);
   const containerHeight = react.useRef(
     typeof window !== "undefined" ? window.innerHeight : 800
   );
@@ -2300,6 +2369,12 @@ function ReelsFeed({
     animateBounceBack(targets);
     setPrefetchIndex(null);
   }, [animateBounceBack, setPrefetchIndex]);
+  const handleDragStart = react.useCallback(() => {
+    setIsDragMuted(true);
+  }, []);
+  const handleDragEnd = react.useCallback(() => {
+    setTimeout(() => setIsDragMuted(false), 50);
+  }, []);
   const { bind } = usePointerGesture({
     axis: "y",
     velocityThreshold: gestureConfig?.velocityThreshold ?? 0.3,
@@ -2312,7 +2387,9 @@ function ReelsFeed({
     },
     onDragThreshold: handleDragThreshold,
     onSnap: handleSnap,
-    onBounceBack: handleBounceBack
+    onBounceBack: handleBounceBack,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd
   });
   const getInitialTransformPx = react.useCallback(
     (index) => {
@@ -2354,58 +2431,58 @@ function ReelsFeed({
                     70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
                     100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
                 }
+                @keyframes reels-sdk-fadeIn {
+                    from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
+                    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+                }
                 @keyframes reels-sdk-spin {
                     to { transform: rotate(360deg); }
                 }
             ` }),
-        (() => {
-          const windowIndices = /* @__PURE__ */ new Set([
-            ...activeIndices,
-            ...warmIndices
-          ]);
-          if (prefetchIndex !== null && prefetchIndex !== void 0) {
-            windowIndices.add(prefetchIndex);
+        items.map((item, index) => {
+          const distFromFocus = Math.abs(index - focusedIndex);
+          const wrapperStyle = {
+            position: "absolute",
+            inset: 0,
+            contain: "layout style paint",
+            willChange: distFromFocus <= 1 ? "transform" : "auto",
+            transform: getInitialTransformPx(index)
+          };
+          if (distFromFocus > RENDER_WINDOW_RADIUS) {
+            return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot-index": index, style: wrapperStyle }, item.id);
           }
-          return [...windowIndices].map((index) => {
-            const item = items[index];
-            if (!item) return null;
-            const isActive = index === focusedIndex;
-            const isPrefetchSlot = index === prefetchIndex;
-            const isWarm = isWarmAllocated(index);
-            const isVisible = shouldRenderVideo(index) || isPrefetchSlot;
-            const bufferTier = isActive ? "active" : isWarm ? "warm" : "hot";
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                "data-slot-index": index,
-                style: {
-                  position: "absolute",
-                  inset: 0,
-                  willChange: "transform",
-                  transform: getInitialTransformPx(index)
-                },
-                children: isVisible ? /* @__PURE__ */ jsxRuntime.jsx(
-                  VideoSlot,
-                  {
-                    item,
-                    index,
-                    isActive,
-                    isPrefetch: isPrefetchSlot,
-                    isPreloaded: !isActive && !isPrefetchSlot && isVisible,
-                    bufferTier,
-                    isMuted,
-                    onToggleMute: handleToggleMute,
-                    showFps: showFps && isActive,
-                    renderOverlay,
-                    renderActions,
-                    renderPauseIndicator
-                  }
-                ) : null
-              },
-              item.id
-            );
-          });
-        })()
+          const isActive = index === focusedIndex;
+          const isPrefetch = index === prefetchIndex;
+          const isWarm = isWarmAllocated(index);
+          const isVisible = shouldRenderVideo(index) || isPrefetch;
+          const bufferTier = isActive ? "active" : isWarm ? "warm" : "hot";
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-slot-index": index,
+              style: wrapperStyle,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                VideoSlot,
+                {
+                  item,
+                  index,
+                  isActive,
+                  isPrefetch,
+                  isPreloaded: !isActive && !isPrefetch && isVisible,
+                  bufferTier,
+                  isMuted: isMuted || isDragMuted,
+                  onToggleMute: handleToggleMute,
+                  onAutoplayBlocked,
+                  showFps: showFps && isActive,
+                  renderOverlay,
+                  renderActions,
+                  renderPauseAction
+                }
+              )
+            },
+            item.id
+          );
+        })
       ]
     }
   );
@@ -2660,6 +2737,8 @@ var MockVideoLoader = class {
     this.preloaded.clear();
     this.loading.clear();
   }
+  preloadMetadata(_url) {
+  }
 };
 var MockDataSource = class {
   constructor(options = {}) {
@@ -3034,6 +3113,7 @@ exports.DEFAULT_PLAYER_CONFIG = DEFAULT_PLAYER_CONFIG;
 exports.DEFAULT_RESOURCE_CONFIG = DEFAULT_RESOURCE_CONFIG;
 exports.DefaultActions = DefaultActions;
 exports.DefaultOverlay = DefaultOverlay;
+exports.DefaultPauseAction = DefaultPauseAction;
 exports.DefaultSkeleton = DefaultSkeleton;
 exports.FeedManager = FeedManager;
 exports.HttpDataSource = HttpDataSource;