@xhub-reels/sdk 0.1.11 → 0.1.13

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) {
@@ -1417,6 +1428,9 @@ function useHls(options) {
         video.addEventListener("canplay", handleCanPlayReuse, { once: true });
         video.addEventListener("loadeddata", handleCanPlayReuse, { once: true });
         video.addEventListener("playing", handleCanPlayReuse, { once: true });
+        if (isActive && video.readyState < HTMLMediaElement.HAVE_FUTURE_DATA) {
+          video.load();
+        }
         return () => {
           video.removeEventListener("canplay", handleCanPlayReuse);
           video.removeEventListener("loadeddata", handleCanPlayReuse);
@@ -1441,7 +1455,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 +1518,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 +1537,7 @@ function useHls(options) {
   }, [bufferTier]);
   return {
     isHlsJs,
-    isNativeHls: isNative,
+    isNativeHls,
     isReady,
     destroy
   };
@@ -1769,24 +1782,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(() => {
@@ -1797,6 +1833,7 @@ function VideoSlotInner({
     const video = videoRef.current;
     if (!video) return;
     let onReady = null;
+    let fallbackTimerId = null;
     if (isActive) {
       wasActiveRef.current = true;
       const startPlay = () => {
@@ -1806,6 +1843,10 @@ function VideoSlotInner({
           video.removeEventListener("playing", onReady);
           onReady = null;
         }
+        if (fallbackTimerId !== null) {
+          clearTimeout(fallbackTimerId);
+          fallbackTimerId = null;
+        }
         video.muted = true;
         video.play().then(() => {
           video.muted = isMuted;
@@ -1820,9 +1861,15 @@ function VideoSlotInner({
         video.addEventListener("canplay", onReady, { once: true });
         video.addEventListener("loadeddata", onReady, { once: true });
         video.addEventListener("playing", onReady, { once: true });
-        if (video.readyState === HTMLMediaElement.HAVE_NOTHING && isNativeHls && video.src) {
+        if (isNativeHls && video.src && video.readyState < HTMLMediaElement.HAVE_FUTURE_DATA) {
           video.load();
         }
+        fallbackTimerId = window.setTimeout(() => {
+          fallbackTimerId = null;
+          if (onReady) {
+            startPlay();
+          }
+        }, 3e3);
       }
     } else if (wasActiveRef.current) {
       video.pause();
@@ -1838,13 +1885,21 @@ function VideoSlotInner({
         video.removeEventListener("loadeddata", onReady);
         video.removeEventListener("playing", onReady);
       }
+      if (fallbackTimerId !== null) {
+        clearTimeout(fallbackTimerId);
+        fallbackTimerId = null;
+      }
     };
   }, [isActive, isMuted, hasPlayedAhead, isNativeHls]);
   react.useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
-    video.muted = isMuted;
-  }, [isMuted]);
+    if (isActive) {
+      video.muted = isMuted;
+    } else {
+      video.muted = true;
+    }
+  }, [isMuted, isActive]);
   const [isActuallyPlaying, setIsActuallyPlaying] = react.useState(false);
   react.useEffect(() => {
     const video = videoRef.current;
@@ -1922,8 +1977,9 @@ function VideoSlotInner({
             ref: videoRef,
             src: mp4Src,
             loop: true,
-            muted: isMuted,
+            muted: true,
             playsInline: true,
+            autoPlay: isActive,
             preload: shouldLoadSrc ? "auto" : "none",
             style: {
               width: "100%",

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) {
@@ -1411,6 +1422,9 @@ function useHls(options) {
         video.addEventListener("canplay", handleCanPlayReuse, { once: true });
         video.addEventListener("loadeddata", handleCanPlayReuse, { once: true });
         video.addEventListener("playing", handleCanPlayReuse, { once: true });
+        if (isActive && video.readyState < HTMLMediaElement.HAVE_FUTURE_DATA) {
+          video.load();
+        }
         return () => {
           video.removeEventListener("canplay", handleCanPlayReuse);
           video.removeEventListener("loadeddata", handleCanPlayReuse);
@@ -1435,7 +1449,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 +1512,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 +1531,7 @@ function useHls(options) {
   }, [bufferTier]);
   return {
     isHlsJs,
-    isNativeHls: isNative,
+    isNativeHls,
     isReady,
     destroy
   };
@@ -1763,24 +1776,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(() => {
@@ -1791,6 +1827,7 @@ function VideoSlotInner({
     const video = videoRef.current;
     if (!video) return;
     let onReady = null;
+    let fallbackTimerId = null;
     if (isActive) {
       wasActiveRef.current = true;
       const startPlay = () => {
@@ -1800,6 +1837,10 @@ function VideoSlotInner({
           video.removeEventListener("playing", onReady);
           onReady = null;
         }
+        if (fallbackTimerId !== null) {
+          clearTimeout(fallbackTimerId);
+          fallbackTimerId = null;
+        }
         video.muted = true;
         video.play().then(() => {
           video.muted = isMuted;
@@ -1814,9 +1855,15 @@ function VideoSlotInner({
         video.addEventListener("canplay", onReady, { once: true });
         video.addEventListener("loadeddata", onReady, { once: true });
         video.addEventListener("playing", onReady, { once: true });
-        if (video.readyState === HTMLMediaElement.HAVE_NOTHING && isNativeHls && video.src) {
+        if (isNativeHls && video.src && video.readyState < HTMLMediaElement.HAVE_FUTURE_DATA) {
           video.load();
         }
+        fallbackTimerId = window.setTimeout(() => {
+          fallbackTimerId = null;
+          if (onReady) {
+            startPlay();
+          }
+        }, 3e3);
       }
     } else if (wasActiveRef.current) {
       video.pause();
@@ -1832,13 +1879,21 @@ function VideoSlotInner({
         video.removeEventListener("loadeddata", onReady);
         video.removeEventListener("playing", onReady);
       }
+      if (fallbackTimerId !== null) {
+        clearTimeout(fallbackTimerId);
+        fallbackTimerId = null;
+      }
     };
   }, [isActive, isMuted, hasPlayedAhead, isNativeHls]);
   useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
-    video.muted = isMuted;
-  }, [isMuted]);
+    if (isActive) {
+      video.muted = isMuted;
+    } else {
+      video.muted = true;
+    }
+  }, [isMuted, isActive]);
   const [isActuallyPlaying, setIsActuallyPlaying] = useState(false);
   useEffect(() => {
     const video = videoRef.current;
@@ -1916,8 +1971,9 @@ function VideoSlotInner({
             ref: videoRef,
             src: mp4Src,
             loop: true,
-            muted: isMuted,
+            muted: true,
             playsInline: true,
+            autoPlay: isActive,
             preload: shouldLoadSrc ? "auto" : "none",
             style: {
               width: "100%",

package/package.json

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