@xhub-reels/sdk 0.1.12 → 0.1.14

package/dist/index.cjs

@@ -1420,7 +1420,7 @@ function useHls(options) {
     }
     if (isNative) {
       if (currentSrcRef.current === src) {
-        if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+        if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
           setIsReady(true);
           return void 0;
         }
@@ -1428,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 (video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+          video.load();
+        }
         return () => {
           video.removeEventListener("canplay", handleCanPlayReuse);
           video.removeEventListener("loadeddata", handleCanPlayReuse);
@@ -1436,7 +1439,10 @@ function useHls(options) {
       }
       video.src = src;
       currentSrcRef.current = src;
-      if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+      if (!isActive) {
+        video.load();
+      }
+      if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
         setIsReady(true);
         return void 0;
       }
@@ -1830,6 +1836,8 @@ function VideoSlotInner({
     const video = videoRef.current;
     if (!video) return;
     let onReady = null;
+    let fallbackTimerId = null;
+    let pollId = null;
     if (isActive) {
       wasActiveRef.current = true;
       const startPlay = () => {
@@ -1839,6 +1847,14 @@ function VideoSlotInner({
           video.removeEventListener("playing", onReady);
           onReady = null;
         }
+        if (fallbackTimerId !== null) {
+          clearTimeout(fallbackTimerId);
+          fallbackTimerId = null;
+        }
+        if (pollId !== null) {
+          clearInterval(pollId);
+          pollId = null;
+        }
         video.muted = true;
         video.play().then(() => {
           video.muted = isMuted;
@@ -1846,16 +1862,33 @@ function VideoSlotInner({
           video.muted = isMuted;
         });
       };
-      if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+      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 (video.readyState === HTMLMediaElement.HAVE_NOTHING && isNativeHls && video.src) {
+        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;
+              }
+              startPlay();
+            }
+          }, 100);
+        }
+        fallbackTimerId = window.setTimeout(() => {
+          fallbackTimerId = null;
+          if (onReady) {
+            startPlay();
+          }
+        }, isNativeHls ? 800 : 3e3);
       }
     } else if (wasActiveRef.current) {
       video.pause();
@@ -1871,13 +1904,25 @@ function VideoSlotInner({
         video.removeEventListener("loadeddata", onReady);
         video.removeEventListener("playing", onReady);
       }
+      if (fallbackTimerId !== null) {
+        clearTimeout(fallbackTimerId);
+        fallbackTimerId = null;
+      }
+      if (pollId !== null) {
+        clearInterval(pollId);
+        pollId = 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;
@@ -1955,8 +2000,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

@@ -1414,7 +1414,7 @@ function useHls(options) {
     }
     if (isNative) {
       if (currentSrcRef.current === src) {
-        if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+        if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
           setIsReady(true);
           return void 0;
         }
@@ -1422,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 (video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+          video.load();
+        }
         return () => {
           video.removeEventListener("canplay", handleCanPlayReuse);
           video.removeEventListener("loadeddata", handleCanPlayReuse);
@@ -1430,7 +1433,10 @@ function useHls(options) {
       }
       video.src = src;
       currentSrcRef.current = src;
-      if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+      if (!isActive) {
+        video.load();
+      }
+      if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
         setIsReady(true);
         return void 0;
       }
@@ -1824,6 +1830,8 @@ function VideoSlotInner({
     const video = videoRef.current;
     if (!video) return;
     let onReady = null;
+    let fallbackTimerId = null;
+    let pollId = null;
     if (isActive) {
       wasActiveRef.current = true;
       const startPlay = () => {
@@ -1833,6 +1841,14 @@ function VideoSlotInner({
           video.removeEventListener("playing", onReady);
           onReady = null;
         }
+        if (fallbackTimerId !== null) {
+          clearTimeout(fallbackTimerId);
+          fallbackTimerId = null;
+        }
+        if (pollId !== null) {
+          clearInterval(pollId);
+          pollId = null;
+        }
         video.muted = true;
         video.play().then(() => {
           video.muted = isMuted;
@@ -1840,16 +1856,33 @@ function VideoSlotInner({
           video.muted = isMuted;
         });
       };
-      if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+      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 (video.readyState === HTMLMediaElement.HAVE_NOTHING && isNativeHls && video.src) {
+        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;
+              }
+              startPlay();
+            }
+          }, 100);
+        }
+        fallbackTimerId = window.setTimeout(() => {
+          fallbackTimerId = null;
+          if (onReady) {
+            startPlay();
+          }
+        }, isNativeHls ? 800 : 3e3);
       }
     } else if (wasActiveRef.current) {
       video.pause();
@@ -1865,13 +1898,25 @@ function VideoSlotInner({
         video.removeEventListener("loadeddata", onReady);
         video.removeEventListener("playing", onReady);
       }
+      if (fallbackTimerId !== null) {
+        clearTimeout(fallbackTimerId);
+        fallbackTimerId = null;
+      }
+      if (pollId !== null) {
+        clearInterval(pollId);
+        pollId = 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;
@@ -1949,8 +1994,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.12",
+  "version": "0.1.14",
   "description": "High-performance Short Video / Reels SDK for React — optimized for Flutter WebView",
   "license": "MIT",
   "type": "module",