@xhub-reels/sdk 0.1.9 → 0.1.10

package/dist/index.cjs

@@ -1392,6 +1392,15 @@ function useHls(options) {
       return;
     }
     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;
@@ -1399,20 +1408,36 @@ function useHls(options) {
       return;
     }
     if (isNative) {
-      if (video.src !== src) {
-        video.src = src;
+      if (currentSrcRef.current === src) {
+        if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_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 });
+        return () => {
+          video.removeEventListener("canplay", handleCanPlayReuse);
+          video.removeEventListener("loadeddata", handleCanPlayReuse);
+          video.removeEventListener("playing", handleCanPlayReuse);
+        };
       }
+      video.src = src;
+      currentSrcRef.current = src;
       if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
         setIsReady(true);
-        currentSrcRef.current = src;
-        return;
+        return void 0;
       }
       setIsReady(false);
-      currentSrcRef.current = src;
       const handleCanPlay2 = () => setIsReady(true);
       video.addEventListener("canplay", handleCanPlay2, { once: true });
+      video.addEventListener("loadeddata", handleCanPlay2, { once: true });
+      video.addEventListener("playing", handleCanPlay2, { once: true });
       return () => {
         video.removeEventListener("canplay", handleCanPlay2);
+        video.removeEventListener("loadeddata", handleCanPlay2);
+        video.removeEventListener("playing", handleCanPlay2);
       };
     }
     if (!isHlsSupported) {
@@ -1499,6 +1524,7 @@ function useHls(options) {
   }, [bufferTier]);
   return {
     isHlsJs,
+    isNativeHls: isNative,
     isReady,
     destroy
   };
@@ -1694,7 +1720,7 @@ function VideoSlotInner({
   const isHlsSource = sourceType === "hls";
   const hlsSrc = isHlsSource && shouldLoadSrc ? src : void 0;
   const mp4Src = !isHlsSource && shouldLoadSrc ? src : void 0;
-  const { isReady: hlsReady } = useHls({
+  const { isReady: hlsReady, isNativeHls } = useHls({
     src: hlsSrc,
     videoRef,
     isActive,
@@ -1733,7 +1759,9 @@ 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;
@@ -1760,7 +1788,7 @@ function VideoSlotInner({
     return () => {
       cancelled = true;
     };
-  }, [isActive, isReady, hasPlayedAhead]);
+  }, [canPlayAhead, isActive, isReady, hasPlayedAhead]);
   react.useEffect(() => {
     setHasPlayedAhead(false);
   }, [src]);
@@ -1771,16 +1799,30 @@ function VideoSlotInner({
     let onReady = null;
     if (isActive) {
       wasActiveRef.current = true;
-      video.muted = isMuted;
-      if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
-        video.play().catch(() => {
+      const startPlay = () => {
+        if (onReady) {
+          video.removeEventListener("canplay", onReady);
+          video.removeEventListener("loadeddata", onReady);
+          video.removeEventListener("playing", onReady);
+          onReady = null;
+        }
+        video.muted = true;
+        video.play().then(() => {
+          video.muted = isMuted;
+        }).catch(() => {
+          video.muted = isMuted;
         });
+      };
+      if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+        startPlay();
       } else {
-        onReady = () => {
-          video.play().catch(() => {
-          });
-        };
+        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) {
+          video.load();
+        }
       }
     } else if (wasActiveRef.current) {
       video.pause();
@@ -1791,15 +1833,38 @@ function VideoSlotInner({
       video.pause();
     }
     return () => {
-      if (onReady) video.removeEventListener("canplay", onReady);
+      if (onReady) {
+        video.removeEventListener("canplay", onReady);
+        video.removeEventListener("loadeddata", onReady);
+        video.removeEventListener("playing", onReady);
+      }
     };
-  }, [isActive, isMuted, hasPlayedAhead]);
+  }, [isActive, isMuted, hasPlayedAhead, isNativeHls]);
   react.useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
     video.muted = isMuted;
   }, [isMuted]);
-  const showPosterOverlay = !isReady && !hasPlayedAhead;
+  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);
+    };
+  }, []);
+  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 video = videoRef.current;

package/dist/index.d.cts

@@ -775,6 +775,12 @@ interface UseHlsOptions {
 interface UseHlsReturn {
     /** Whether hls.js is being used (false = native HLS on Safari) */
     isHlsJs: boolean;
+    /**
+     * Whether the device uses native HLS (Safari / iOS WebView).
+     * When true, play-ahead (video.play() on non-active slots) must be skipped —
+     * iOS only allows one concurrently-playing video element at a time.
+     */
+    isNativeHls: boolean;
     /** Whether the video has buffered enough data to play without black flash */
     isReady: boolean;
     /** Destroy the HLS instance manually (also called automatically on unmount) */

package/dist/index.d.ts

@@ -775,6 +775,12 @@ interface UseHlsOptions {
 interface UseHlsReturn {
     /** Whether hls.js is being used (false = native HLS on Safari) */
     isHlsJs: boolean;
+    /**
+     * Whether the device uses native HLS (Safari / iOS WebView).
+     * When true, play-ahead (video.play() on non-active slots) must be skipped —
+     * iOS only allows one concurrently-playing video element at a time.
+     */
+    isNativeHls: boolean;
     /** Whether the video has buffered enough data to play without black flash */
     isReady: boolean;
     /** Destroy the HLS instance manually (also called automatically on unmount) */

package/dist/index.js

@@ -1386,6 +1386,15 @@ function useHls(options) {
       return;
     }
     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;
@@ -1393,20 +1402,36 @@ function useHls(options) {
       return;
     }
     if (isNative) {
-      if (video.src !== src) {
-        video.src = src;
+      if (currentSrcRef.current === src) {
+        if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_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 });
+        return () => {
+          video.removeEventListener("canplay", handleCanPlayReuse);
+          video.removeEventListener("loadeddata", handleCanPlayReuse);
+          video.removeEventListener("playing", handleCanPlayReuse);
+        };
       }
+      video.src = src;
+      currentSrcRef.current = src;
       if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
         setIsReady(true);
-        currentSrcRef.current = src;
-        return;
+        return void 0;
       }
       setIsReady(false);
-      currentSrcRef.current = src;
       const handleCanPlay2 = () => setIsReady(true);
       video.addEventListener("canplay", handleCanPlay2, { once: true });
+      video.addEventListener("loadeddata", handleCanPlay2, { once: true });
+      video.addEventListener("playing", handleCanPlay2, { once: true });
       return () => {
         video.removeEventListener("canplay", handleCanPlay2);
+        video.removeEventListener("loadeddata", handleCanPlay2);
+        video.removeEventListener("playing", handleCanPlay2);
       };
     }
     if (!isHlsSupported) {
@@ -1493,6 +1518,7 @@ function useHls(options) {
   }, [bufferTier]);
   return {
     isHlsJs,
+    isNativeHls: isNative,
     isReady,
     destroy
   };
@@ -1688,7 +1714,7 @@ function VideoSlotInner({
   const isHlsSource = sourceType === "hls";
   const hlsSrc = isHlsSource && shouldLoadSrc ? src : void 0;
   const mp4Src = !isHlsSource && shouldLoadSrc ? src : void 0;
-  const { isReady: hlsReady } = useHls({
+  const { isReady: hlsReady, isNativeHls } = useHls({
     src: hlsSrc,
     videoRef,
     isActive,
@@ -1727,7 +1753,9 @@ function VideoSlotInner({
   }, [mp4Src, isActive, isPrefetch, isPreloaded, isHlsSource]);
   const isReady = isHlsSource ? hlsReady : mp4Ready;
   const [hasPlayedAhead, setHasPlayedAhead] = useState(false);
+  const canPlayAhead = isHlsSource && !isNativeHls;
   useEffect(() => {
+    if (!canPlayAhead) return;
     const video = videoRef.current;
     if (!video) return;
     if (isActive || !isReady) return;
@@ -1754,7 +1782,7 @@ function VideoSlotInner({
     return () => {
       cancelled = true;
     };
-  }, [isActive, isReady, hasPlayedAhead]);
+  }, [canPlayAhead, isActive, isReady, hasPlayedAhead]);
   useEffect(() => {
     setHasPlayedAhead(false);
   }, [src]);
@@ -1765,16 +1793,30 @@ function VideoSlotInner({
     let onReady = null;
     if (isActive) {
       wasActiveRef.current = true;
-      video.muted = isMuted;
-      if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
-        video.play().catch(() => {
+      const startPlay = () => {
+        if (onReady) {
+          video.removeEventListener("canplay", onReady);
+          video.removeEventListener("loadeddata", onReady);
+          video.removeEventListener("playing", onReady);
+          onReady = null;
+        }
+        video.muted = true;
+        video.play().then(() => {
+          video.muted = isMuted;
+        }).catch(() => {
+          video.muted = isMuted;
         });
+      };
+      if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+        startPlay();
       } else {
-        onReady = () => {
-          video.play().catch(() => {
-          });
-        };
+        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) {
+          video.load();
+        }
       }
     } else if (wasActiveRef.current) {
       video.pause();
@@ -1785,15 +1827,38 @@ function VideoSlotInner({
       video.pause();
     }
     return () => {
-      if (onReady) video.removeEventListener("canplay", onReady);
+      if (onReady) {
+        video.removeEventListener("canplay", onReady);
+        video.removeEventListener("loadeddata", onReady);
+        video.removeEventListener("playing", onReady);
+      }
     };
-  }, [isActive, isMuted, hasPlayedAhead]);
+  }, [isActive, isMuted, hasPlayedAhead, isNativeHls]);
   useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
     video.muted = isMuted;
   }, [isMuted]);
-  const showPosterOverlay = !isReady && !hasPlayedAhead;
+  const [isActuallyPlaying, setIsActuallyPlaying] = useState(false);
+  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);
+    };
+  }, []);
+  useEffect(() => {
+    if (!isActive) setIsActuallyPlaying(false);
+  }, [isActive]);
+  const showPosterOverlay = isActive ? !isReady && !isActuallyPlaying : canPlayAhead ? !hasPlayedAhead : !isReady;
   const [isPaused, setIsPaused] = useState(false);
   const handleTap = useCallback(() => {
     const video = videoRef.current;

package/package.json

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