@xhub-reels/sdk 0.1.8 → 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
   };
@@ -1628,7 +1654,8 @@ function VideoSlot({
   onToggleMute,
   showFps = false,
   renderOverlay,
-  renderActions
+  renderActions,
+  renderPauseIndicator
 }) {
   const { optimisticManager, adapters } = useSDK();
   if (!isVideoItem(item)) {
@@ -1664,6 +1691,7 @@ function VideoSlot({
       showFps,
       renderOverlay,
       renderActions,
+      renderPauseIndicator,
       optimisticManager,
       adapters
     }
@@ -1681,6 +1709,7 @@ function VideoSlotInner({
   showFps,
   renderOverlay,
   renderActions,
+  renderPauseIndicator,
   optimisticManager,
   adapters
 }) {
@@ -1691,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,
@@ -1730,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;
@@ -1757,7 +1788,7 @@ function VideoSlotInner({
     return () => {
       cancelled = true;
     };
-  }, [isActive, isReady, hasPlayedAhead]);
+  }, [canPlayAhead, isActive, isReady, hasPlayedAhead]);
   react.useEffect(() => {
     setHasPlayedAhead(false);
   }, [src]);
@@ -1768,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();
@@ -1788,28 +1833,54 @@ 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 [showMuteIndicator, setShowMuteIndicator] = react.useState(false);
-  const muteIndicatorTimer = react.useRef(null);
-  const handleTap = react.useCallback(() => {
-    onToggleMute();
-    setShowMuteIndicator(true);
-    if (muteIndicatorTimer.current) clearTimeout(muteIndicatorTimer.current);
-    muteIndicatorTimer.current = setTimeout(() => setShowMuteIndicator(false), 1200);
-  }, [onToggleMute]);
+  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 () => {
-      if (muteIndicatorTimer.current) clearTimeout(muteIndicatorTimer.current);
+      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;
+    if (!video || !isActive) return;
+    if (video.paused) {
+      video.play().catch(() => {
+      });
+      setIsPaused(false);
+    } else {
+      video.pause();
+      setIsPaused(true);
+    }
+  }, [isActive]);
+  react.useEffect(() => {
+    if (isActive) setIsPaused(false);
+  }, [isActive]);
   const likeDelta = react.useSyncExternalStore(
     optimisticManager.store.subscribe,
     () => optimisticManager.getLikeDelta(item.id),
@@ -1828,9 +1899,11 @@ function VideoSlotInner({
     share: () => adapters.interaction?.share?.(item.id),
     isMuted,
     toggleMute: onToggleMute,
+    isPaused,
+    togglePause: handleTap,
     isActive,
     index
-  }), [item, likeDelta, followState, isMuted, isActive, index, optimisticManager, adapters, onToggleMute]);
+  }), [item, likeDelta, followState, isMuted, isPaused, isActive, index, optimisticManager, adapters, onToggleMute, handleTap]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1877,7 +1950,7 @@ function VideoSlotInner({
             }
           }
         ),
-        showMuteIndicator && /* @__PURE__ */ jsxRuntime.jsx(
+        isPaused && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             style: {
@@ -1885,18 +1958,26 @@ 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",
-              animation: "fadeInOut 1.2s ease forwards"
+              zIndex: 5,
+              opacity: 0.3
             },
-            children: isMuted ? "\u{1F507}" : "\u{1F50A}"
+            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"
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1909,7 +1990,8 @@ function VideoSlotInner({
               right: 80,
               paddingBottom: 16,
               pointerEvents: "none",
-              color: "#fff"
+              color: "#fff",
+              zIndex: 10
             },
             children: renderOverlay ? renderOverlay(item, actions) : /* @__PURE__ */ jsxRuntime.jsx(DefaultOverlay, { item })
           }
@@ -1917,6 +1999,7 @@ function VideoSlotInner({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
+            onClick: (e) => e.stopPropagation(),
             style: {
               position: "absolute",
               bottom: 0,
@@ -1925,7 +2008,9 @@ function VideoSlotInner({
               display: "flex",
               flexDirection: "column",
               gap: 20,
-              alignItems: "center"
+              alignItems: "center",
+              pointerEvents: "auto",
+              zIndex: 10
             },
             children: renderActions ? renderActions(item, actions) : /* @__PURE__ */ jsxRuntime.jsx(DefaultActions, { item, actions })
           }
@@ -1987,6 +2072,7 @@ var centerStyle = {
 function ReelsFeed({
   renderOverlay,
   renderActions,
+  renderPauseIndicator,
   renderLoading,
   renderEmpty,
   renderError: _renderError,
@@ -2006,7 +2092,7 @@ function ReelsFeed({
     isWarmAllocated,
     setPrefetchIndex
   } = useResource();
-  const [isMuted, setIsMuted] = react.useState(true);
+  const [isMuted, setIsMuted] = react.useState(false);
   const containerRef = react.useRef(null);
   const slotCacheRef = react.useRef(/* @__PURE__ */ new Map());
   const activeIndexRef = react.useRef(0);
@@ -2220,7 +2306,8 @@ function ReelsFeed({
                   onToggleMute: handleToggleMute,
                   showFps: showFps && isActive,
                   renderOverlay,
-                  renderActions
+                  renderActions,
+                  renderPauseIndicator
                 }
               )
             },

package/dist/index.d.cts

@@ -302,6 +302,10 @@ interface SlotActions {
     isMuted: boolean;
     /** Toggle global mute */
     toggleMute: () => void;
+    /** Whether the active video is currently paused */
+    isPaused: boolean;
+    /** Toggle pause/play on the active video */
+    togglePause: () => void;
     /** Whether this slot is the active playing slot */
     isActive: boolean;
     /** Slot index in feed */
@@ -323,6 +327,13 @@ interface ReelsFeedProps {
      * If not provided, SDK uses DefaultActions showing like/comment/share emojis.
      */
     renderActions?: (item: ContentItem, actions: SlotActions) => ReactNode;
+    /**
+     * Custom pause/play indicator rendered when user taps to pause/play.
+     * Receives isPaused state. Return ReactNode.
+     * Positioned absolute center by SDK.
+     * If not provided, SDK uses a default ▶️/⏸️ emoji indicator.
+     */
+    renderPauseIndicator?: (isPaused: boolean) => ReactNode;
     /**
      * Custom loading skeleton shown during initial feed load.
      * If not provided, SDK uses DefaultSkeleton with shimmer animation.
@@ -713,7 +724,7 @@ interface ReelsProviderProps {
 declare function ReelsProvider({ children, adapters, debug }: ReelsProviderProps): react_jsx_runtime.JSX.Element;
 declare function useSDK(): SDKContextValue;
 
-declare function ReelsFeed({ renderOverlay, renderActions, renderLoading, renderEmpty, renderError: _renderError, showFps, loadMoreThreshold, onSlotChange, gestureConfig, snapConfig, }: ReelsFeedProps): string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+declare function ReelsFeed({ renderOverlay, renderActions, renderPauseIndicator, renderLoading, renderEmpty, renderError: _renderError, showFps, loadMoreThreshold, onSlotChange, gestureConfig, snapConfig, }: ReelsFeedProps): string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
 
 /**
  * useHls — React hook for hls.js lifecycle management (3-Tier buffer support)
@@ -764,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) */
@@ -783,8 +800,9 @@ interface VideoSlotProps {
     showFps?: boolean;
     renderOverlay?: (item: ContentItem, actions: SlotActions) => ReactNode;
     renderActions?: (item: ContentItem, actions: SlotActions) => ReactNode;
+    renderPauseIndicator?: (isPaused: boolean) => ReactNode;
 }
-declare function VideoSlot({ item, index, isActive, isPrefetch, isPreloaded, bufferTier, isMuted, onToggleMute, showFps, renderOverlay, renderActions, }: VideoSlotProps): react_jsx_runtime.JSX.Element;
+declare function VideoSlot({ item, index, isActive, isPrefetch, isPreloaded, bufferTier, isMuted, onToggleMute, showFps, renderOverlay, renderActions, renderPauseIndicator, }: VideoSlotProps): react_jsx_runtime.JSX.Element;
 
 declare function DefaultOverlay({ item }: {
     item: ContentItem;

package/dist/index.d.ts

@@ -302,6 +302,10 @@ interface SlotActions {
     isMuted: boolean;
     /** Toggle global mute */
     toggleMute: () => void;
+    /** Whether the active video is currently paused */
+    isPaused: boolean;
+    /** Toggle pause/play on the active video */
+    togglePause: () => void;
     /** Whether this slot is the active playing slot */
     isActive: boolean;
     /** Slot index in feed */
@@ -323,6 +327,13 @@ interface ReelsFeedProps {
      * If not provided, SDK uses DefaultActions showing like/comment/share emojis.
      */
     renderActions?: (item: ContentItem, actions: SlotActions) => ReactNode;
+    /**
+     * Custom pause/play indicator rendered when user taps to pause/play.
+     * Receives isPaused state. Return ReactNode.
+     * Positioned absolute center by SDK.
+     * If not provided, SDK uses a default ▶️/⏸️ emoji indicator.
+     */
+    renderPauseIndicator?: (isPaused: boolean) => ReactNode;
     /**
      * Custom loading skeleton shown during initial feed load.
      * If not provided, SDK uses DefaultSkeleton with shimmer animation.
@@ -713,7 +724,7 @@ interface ReelsProviderProps {
 declare function ReelsProvider({ children, adapters, debug }: ReelsProviderProps): react_jsx_runtime.JSX.Element;
 declare function useSDK(): SDKContextValue;
 
-declare function ReelsFeed({ renderOverlay, renderActions, renderLoading, renderEmpty, renderError: _renderError, showFps, loadMoreThreshold, onSlotChange, gestureConfig, snapConfig, }: ReelsFeedProps): string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+declare function ReelsFeed({ renderOverlay, renderActions, renderPauseIndicator, renderLoading, renderEmpty, renderError: _renderError, showFps, loadMoreThreshold, onSlotChange, gestureConfig, snapConfig, }: ReelsFeedProps): string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
 
 /**
  * useHls — React hook for hls.js lifecycle management (3-Tier buffer support)
@@ -764,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) */
@@ -783,8 +800,9 @@ interface VideoSlotProps {
     showFps?: boolean;
     renderOverlay?: (item: ContentItem, actions: SlotActions) => ReactNode;
     renderActions?: (item: ContentItem, actions: SlotActions) => ReactNode;
+    renderPauseIndicator?: (isPaused: boolean) => ReactNode;
 }
-declare function VideoSlot({ item, index, isActive, isPrefetch, isPreloaded, bufferTier, isMuted, onToggleMute, showFps, renderOverlay, renderActions, }: VideoSlotProps): react_jsx_runtime.JSX.Element;
+declare function VideoSlot({ item, index, isActive, isPrefetch, isPreloaded, bufferTier, isMuted, onToggleMute, showFps, renderOverlay, renderActions, renderPauseIndicator, }: VideoSlotProps): react_jsx_runtime.JSX.Element;
 
 declare function DefaultOverlay({ item }: {
     item: ContentItem;

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
   };
@@ -1622,7 +1648,8 @@ function VideoSlot({
   onToggleMute,
   showFps = false,
   renderOverlay,
-  renderActions
+  renderActions,
+  renderPauseIndicator
 }) {
   const { optimisticManager, adapters } = useSDK();
   if (!isVideoItem(item)) {
@@ -1658,6 +1685,7 @@ function VideoSlot({
       showFps,
       renderOverlay,
       renderActions,
+      renderPauseIndicator,
       optimisticManager,
       adapters
     }
@@ -1675,6 +1703,7 @@ function VideoSlotInner({
   showFps,
   renderOverlay,
   renderActions,
+  renderPauseIndicator,
   optimisticManager,
   adapters
 }) {
@@ -1685,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,
@@ -1724,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;
@@ -1751,7 +1782,7 @@ function VideoSlotInner({
     return () => {
       cancelled = true;
     };
-  }, [isActive, isReady, hasPlayedAhead]);
+  }, [canPlayAhead, isActive, isReady, hasPlayedAhead]);
   useEffect(() => {
     setHasPlayedAhead(false);
   }, [src]);
@@ -1762,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();
@@ -1782,28 +1827,54 @@ 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 [showMuteIndicator, setShowMuteIndicator] = useState(false);
-  const muteIndicatorTimer = useRef(null);
-  const handleTap = useCallback(() => {
-    onToggleMute();
-    setShowMuteIndicator(true);
-    if (muteIndicatorTimer.current) clearTimeout(muteIndicatorTimer.current);
-    muteIndicatorTimer.current = setTimeout(() => setShowMuteIndicator(false), 1200);
-  }, [onToggleMute]);
+  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 () => {
-      if (muteIndicatorTimer.current) clearTimeout(muteIndicatorTimer.current);
+      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;
+    if (!video || !isActive) return;
+    if (video.paused) {
+      video.play().catch(() => {
+      });
+      setIsPaused(false);
+    } else {
+      video.pause();
+      setIsPaused(true);
+    }
+  }, [isActive]);
+  useEffect(() => {
+    if (isActive) setIsPaused(false);
+  }, [isActive]);
   const likeDelta = useSyncExternalStore(
     optimisticManager.store.subscribe,
     () => optimisticManager.getLikeDelta(item.id),
@@ -1822,9 +1893,11 @@ function VideoSlotInner({
     share: () => adapters.interaction?.share?.(item.id),
     isMuted,
     toggleMute: onToggleMute,
+    isPaused,
+    togglePause: handleTap,
     isActive,
     index
-  }), [item, likeDelta, followState, isMuted, isActive, index, optimisticManager, adapters, onToggleMute]);
+  }), [item, likeDelta, followState, isMuted, isPaused, isActive, index, optimisticManager, adapters, onToggleMute, handleTap]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1871,7 +1944,7 @@ function VideoSlotInner({
             }
           }
         ),
-        showMuteIndicator && /* @__PURE__ */ jsx(
+        isPaused && /* @__PURE__ */ jsx(
           "div",
           {
             style: {
@@ -1879,18 +1952,26 @@ 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",
-              animation: "fadeInOut 1.2s ease forwards"
+              zIndex: 5,
+              opacity: 0.3
             },
-            children: isMuted ? "\u{1F507}" : "\u{1F50A}"
+            children: renderPauseIndicator ? renderPauseIndicator(isPaused) : /* @__PURE__ */ 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"
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1903,7 +1984,8 @@ function VideoSlotInner({
               right: 80,
               paddingBottom: 16,
               pointerEvents: "none",
-              color: "#fff"
+              color: "#fff",
+              zIndex: 10
             },
             children: renderOverlay ? renderOverlay(item, actions) : /* @__PURE__ */ jsx(DefaultOverlay, { item })
           }
@@ -1911,6 +1993,7 @@ function VideoSlotInner({
         /* @__PURE__ */ jsx(
           "div",
           {
+            onClick: (e) => e.stopPropagation(),
             style: {
               position: "absolute",
               bottom: 0,
@@ -1919,7 +2002,9 @@ function VideoSlotInner({
               display: "flex",
               flexDirection: "column",
               gap: 20,
-              alignItems: "center"
+              alignItems: "center",
+              pointerEvents: "auto",
+              zIndex: 10
             },
             children: renderActions ? renderActions(item, actions) : /* @__PURE__ */ jsx(DefaultActions, { item, actions })
           }
@@ -1981,6 +2066,7 @@ var centerStyle = {
 function ReelsFeed({
   renderOverlay,
   renderActions,
+  renderPauseIndicator,
   renderLoading,
   renderEmpty,
   renderError: _renderError,
@@ -2000,7 +2086,7 @@ function ReelsFeed({
     isWarmAllocated,
     setPrefetchIndex
   } = useResource();
-  const [isMuted, setIsMuted] = useState(true);
+  const [isMuted, setIsMuted] = useState(false);
   const containerRef = useRef(null);
   const slotCacheRef = useRef(/* @__PURE__ */ new Map());
   const activeIndexRef = useRef(0);
@@ -2214,7 +2300,8 @@ function ReelsFeed({
                   onToggleMute: handleToggleMute,
                   showFps: showFps && isActive,
                   renderOverlay,
-                  renderActions
+                  renderActions,
+                  renderPauseIndicator
                 }
               )
             },

package/package.json

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