@xhub-reels/sdk 0.1.10 → 0.1.12

package/dist/index.cjs

@@ -1364,9 +1364,18 @@ function mapHlsError(data) {
 }
 function useHls(options) {
   const { src, videoRef, isActive, isPrefetch, bufferTier = "active", hlsConfig, onError } = options;
-  const isHlsSupported = typeof window !== "undefined" && Hls__default.default.isSupported();
-  const isNative = supportsNativeHls();
-  const isHlsJs = isHlsSupported && !isNative;
+  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 [isReady, setIsReady] = react.useState(false);
   const hlsRef = react.useRef(null);
   const onErrorRef = react.useRef(onError);
@@ -1391,6 +1400,8 @@ function useHls(options) {
       currentSrcRef.current = void 0;
       return;
     }
+    const isNative = isNativeRef.current;
+    const isHlsSupported = isHlsJsRef.current;
     if (!isActive && !isPrefetch) {
       if (isNative) {
         if (video.src) {
@@ -1441,7 +1452,6 @@ function useHls(options) {
       };
     }
     if (!isHlsSupported) {
-      onErrorRef.current?.("UNKNOWN", "HLS playback not supported in this browser");
       return;
     }
     if (hlsRef.current && currentSrcRef.current === src) {
@@ -1505,7 +1515,7 @@ function useHls(options) {
         currentSrcRef.current = void 0;
       }
     };
-  }, [src, isActive, isPrefetch]);
+  }, [src, isActive, isPrefetch, isHlsJs, isNativeHls]);
   react.useEffect(() => {
     const hls = hlsRef.current;
     if (!hls) {
@@ -1524,7 +1534,7 @@ function useHls(options) {
   }, [bufferTier]);
   return {
     isHlsJs,
-    isNativeHls: isNative,
+    isNativeHls,
     isReady,
     destroy
   };
@@ -1769,24 +1779,47 @@ 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 () => {
       try {
         await video.play();
         if (cancelled) return;
-        const pauseAfterDecode = () => {
-          if (cancelled) return;
-          video.pause();
-          video.currentTime = 0;
-          video.muted = prevMuted;
-          setHasPlayedAhead(true);
-        };
-        setTimeout(pauseAfterDecode, 50);
+        if ("requestVideoFrameCallback" in video) {
+          vfcHandle = video.requestVideoFrameCallback(() => {
+            vfcHandle = null;
+            pauseAfterDecode();
+          });
+        } else {
+          rafId = requestAnimationFrame(() => {
+            rafId = requestAnimationFrame(() => {
+              rafId = null;
+              pauseAfterDecode();
+            });
+          });
+        }
       } catch {
+        video.muted = prevMuted;
       }
     };
     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]);
   react.useEffect(() => {
@@ -2084,6 +2117,8 @@ function ReelsFeed({
 }) {
   const { items, loading, loadInitial, loadMore, hasMore } = useFeed();
   const {
+    activeIndices,
+    warmIndices,
     focusedIndex,
     prefetchIndex,
     setFocusedIndexImmediate,
@@ -2277,43 +2312,54 @@ function ReelsFeed({
                     to { transform: rotate(360deg); }
                 }
             ` }),
-        items.map((item, index) => {
-          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: {
-                position: "absolute",
-                inset: 0,
-                willChange: "transform",
-                transform: getInitialTransformPx(index)
+        (() => {
+          const windowIndices = /* @__PURE__ */ new Set([
+            ...activeIndices,
+            ...warmIndices
+          ]);
+          if (prefetchIndex !== null && prefetchIndex !== void 0) {
+            windowIndices.add(prefetchIndex);
+          }
+          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
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                VideoSlot,
-                {
-                  item,
-                  index,
-                  isActive,
-                  isPrefetch,
-                  isPreloaded: !isActive && !isPrefetch && isVisible,
-                  bufferTier,
-                  isMuted,
-                  onToggleMute: handleToggleMute,
-                  showFps: showFps && isActive,
-                  renderOverlay,
-                  renderActions,
-                  renderPauseIndicator
-                }
-              )
-            },
-            item.id
-          );
-        })
+              item.id
+            );
+          });
+        })()
       ]
     }
   );

package/dist/index.js

@@ -1358,9 +1358,18 @@ function mapHlsError(data) {
 }
 function useHls(options) {
   const { src, videoRef, isActive, isPrefetch, bufferTier = "active", hlsConfig, onError } = options;
-  const isHlsSupported = typeof window !== "undefined" && Hls.isSupported();
-  const isNative = supportsNativeHls();
-  const isHlsJs = isHlsSupported && !isNative;
+  const [isHlsJs, setIsHlsJs] = useState(false);
+  const [isNativeHls, setIsNativeHls] = useState(false);
+  useEffect(() => {
+    const hlsSupported = Hls.isSupported();
+    const native = supportsNativeHls();
+    setIsHlsJs(hlsSupported && !native);
+    setIsNativeHls(native);
+  }, []);
+  const isHlsJsRef = useRef(false);
+  const isNativeRef = useRef(false);
+  isHlsJsRef.current = isHlsJs;
+  isNativeRef.current = isNativeHls;
   const [isReady, setIsReady] = useState(false);
   const hlsRef = useRef(null);
   const onErrorRef = useRef(onError);
@@ -1385,6 +1394,8 @@ function useHls(options) {
       currentSrcRef.current = void 0;
       return;
     }
+    const isNative = isNativeRef.current;
+    const isHlsSupported = isHlsJsRef.current;
     if (!isActive && !isPrefetch) {
       if (isNative) {
         if (video.src) {
@@ -1435,7 +1446,6 @@ function useHls(options) {
       };
     }
     if (!isHlsSupported) {
-      onErrorRef.current?.("UNKNOWN", "HLS playback not supported in this browser");
       return;
     }
     if (hlsRef.current && currentSrcRef.current === src) {
@@ -1499,7 +1509,7 @@ function useHls(options) {
         currentSrcRef.current = void 0;
       }
     };
-  }, [src, isActive, isPrefetch]);
+  }, [src, isActive, isPrefetch, isHlsJs, isNativeHls]);
   useEffect(() => {
     const hls = hlsRef.current;
     if (!hls) {
@@ -1518,7 +1528,7 @@ function useHls(options) {
   }, [bufferTier]);
   return {
     isHlsJs,
-    isNativeHls: isNative,
+    isNativeHls,
     isReady,
     destroy
   };
@@ -1763,24 +1773,47 @@ 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 () => {
       try {
         await video.play();
         if (cancelled) return;
-        const pauseAfterDecode = () => {
-          if (cancelled) return;
-          video.pause();
-          video.currentTime = 0;
-          video.muted = prevMuted;
-          setHasPlayedAhead(true);
-        };
-        setTimeout(pauseAfterDecode, 50);
+        if ("requestVideoFrameCallback" in video) {
+          vfcHandle = video.requestVideoFrameCallback(() => {
+            vfcHandle = null;
+            pauseAfterDecode();
+          });
+        } else {
+          rafId = requestAnimationFrame(() => {
+            rafId = requestAnimationFrame(() => {
+              rafId = null;
+              pauseAfterDecode();
+            });
+          });
+        }
       } catch {
+        video.muted = prevMuted;
       }
     };
     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]);
   useEffect(() => {
@@ -2078,6 +2111,8 @@ function ReelsFeed({
 }) {
   const { items, loading, loadInitial, loadMore, hasMore } = useFeed();
   const {
+    activeIndices,
+    warmIndices,
     focusedIndex,
     prefetchIndex,
     setFocusedIndexImmediate,
@@ -2271,43 +2306,54 @@ function ReelsFeed({
                     to { transform: rotate(360deg); }
                 }
             ` }),
-        items.map((item, index) => {
-          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__ */ jsx(
-            "div",
-            {
-              "data-slot-index": index,
-              style: {
-                position: "absolute",
-                inset: 0,
-                willChange: "transform",
-                transform: getInitialTransformPx(index)
+        (() => {
+          const windowIndices = /* @__PURE__ */ new Set([
+            ...activeIndices,
+            ...warmIndices
+          ]);
+          if (prefetchIndex !== null && prefetchIndex !== void 0) {
+            windowIndices.add(prefetchIndex);
+          }
+          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__ */ jsx(
+              "div",
+              {
+                "data-slot-index": index,
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  willChange: "transform",
+                  transform: getInitialTransformPx(index)
+                },
+                children: isVisible ? /* @__PURE__ */ jsx(
+                  VideoSlot,
+                  {
+                    item,
+                    index,
+                    isActive,
+                    isPrefetch: isPrefetchSlot,
+                    isPreloaded: !isActive && !isPrefetchSlot && isVisible,
+                    bufferTier,
+                    isMuted,
+                    onToggleMute: handleToggleMute,
+                    showFps: showFps && isActive,
+                    renderOverlay,
+                    renderActions,
+                    renderPauseIndicator
+                  }
+                ) : null
               },
-              children: /* @__PURE__ */ jsx(
-                VideoSlot,
-                {
-                  item,
-                  index,
-                  isActive,
-                  isPrefetch,
-                  isPreloaded: !isActive && !isPrefetch && isVisible,
-                  bufferTier,
-                  isMuted,
-                  onToggleMute: handleToggleMute,
-                  showFps: showFps && isActive,
-                  renderOverlay,
-                  renderActions,
-                  renderPauseIndicator
-                }
-              )
-            },
-            item.id
-          );
-        })
+              item.id
+            );
+          });
+        })()
       ]
     }
   );

package/package.json

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