@xhub-reels/sdk 0.1.7 → 0.1.9

package/dist/index.cjs

@@ -1628,7 +1628,8 @@ function VideoSlot({
   onToggleMute,
   showFps = false,
   renderOverlay,
-  renderActions
+  renderActions,
+  renderPauseIndicator
 }) {
   const { optimisticManager, adapters } = useSDK();
   if (!isVideoItem(item)) {
@@ -1664,6 +1665,7 @@ function VideoSlot({
       showFps,
       renderOverlay,
       renderActions,
+      renderPauseIndicator,
       optimisticManager,
       adapters
     }
@@ -1681,6 +1683,7 @@ function VideoSlotInner({
   showFps,
   renderOverlay,
   renderActions,
+  renderPauseIndicator,
   optimisticManager,
   adapters
 }) {
@@ -1797,19 +1800,22 @@ function VideoSlotInner({
     video.muted = isMuted;
   }, [isMuted]);
   const showPosterOverlay = !isReady && !hasPlayedAhead;
-  const [showMuteIndicator, setShowMuteIndicator] = react.useState(false);
-  const muteIndicatorTimer = react.useRef(null);
+  const [isPaused, setIsPaused] = react.useState(false);
   const handleTap = react.useCallback(() => {
-    onToggleMute();
-    setShowMuteIndicator(true);
-    if (muteIndicatorTimer.current) clearTimeout(muteIndicatorTimer.current);
-    muteIndicatorTimer.current = setTimeout(() => setShowMuteIndicator(false), 1200);
-  }, [onToggleMute]);
+    const video = videoRef.current;
+    if (!video || !isActive) return;
+    if (video.paused) {
+      video.play().catch(() => {
+      });
+      setIsPaused(false);
+    } else {
+      video.pause();
+      setIsPaused(true);
+    }
+  }, [isActive]);
   react.useEffect(() => {
-    return () => {
-      if (muteIndicatorTimer.current) clearTimeout(muteIndicatorTimer.current);
-    };
-  }, []);
+    if (isActive) setIsPaused(false);
+  }, [isActive]);
   const likeDelta = react.useSyncExternalStore(
     optimisticManager.store.subscribe,
     () => optimisticManager.getLikeDelta(item.id),
@@ -1828,9 +1834,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 +1885,7 @@ function VideoSlotInner({
             }
           }
         ),
-        showMuteIndicator && /* @__PURE__ */ jsxRuntime.jsx(
+        isPaused && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             style: {
@@ -1885,18 +1893,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(
@@ -1904,11 +1920,13 @@ function VideoSlotInner({
           {
             style: {
               position: "absolute",
-              bottom: 80,
+              bottom: 0,
               left: 16,
               right: 80,
+              paddingBottom: 16,
               pointerEvents: "none",
-              color: "#fff"
+              color: "#fff",
+              zIndex: 10
             },
             children: renderOverlay ? renderOverlay(item, actions) : /* @__PURE__ */ jsxRuntime.jsx(DefaultOverlay, { item })
           }
@@ -1916,14 +1934,18 @@ function VideoSlotInner({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
+            onClick: (e) => e.stopPropagation(),
             style: {
               position: "absolute",
-              bottom: 80,
+              bottom: 0,
               right: 16,
+              paddingBottom: 16,
               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 })
           }
@@ -1985,6 +2007,7 @@ var centerStyle = {
 function ReelsFeed({
   renderOverlay,
   renderActions,
+  renderPauseIndicator,
   renderLoading,
   renderEmpty,
   renderError: _renderError,
@@ -2004,7 +2027,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);
@@ -2218,7 +2241,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 */
@@ -312,17 +316,24 @@ interface ReelsFeedProps {
     /**
      * Custom overlay rendered on each video slot.
      * Receives the content item + actions. Return ReactNode.
-     * Positioned absolute bottom-left by SDK.
+     * Positioned absolute bottom (bottom-0) left by SDK.
      * If not provided, SDK uses DefaultOverlay showing author + title.
      */
     renderOverlay?: (item: ContentItem, actions: SlotActions) => ReactNode;
     /**
      * Custom action bar rendered on each video slot.
      * Receives the content item + actions. Return ReactNode.
-     * Positioned absolute bottom-right by SDK.
+     * Positioned absolute bottom (bottom-0) right by SDK.
      * 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)
@@ -783,8 +794,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 */
@@ -312,17 +316,24 @@ interface ReelsFeedProps {
     /**
      * Custom overlay rendered on each video slot.
      * Receives the content item + actions. Return ReactNode.
-     * Positioned absolute bottom-left by SDK.
+     * Positioned absolute bottom (bottom-0) left by SDK.
      * If not provided, SDK uses DefaultOverlay showing author + title.
      */
     renderOverlay?: (item: ContentItem, actions: SlotActions) => ReactNode;
     /**
      * Custom action bar rendered on each video slot.
      * Receives the content item + actions. Return ReactNode.
-     * Positioned absolute bottom-right by SDK.
+     * Positioned absolute bottom (bottom-0) right by SDK.
      * 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)
@@ -783,8 +794,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

@@ -1622,7 +1622,8 @@ function VideoSlot({
   onToggleMute,
   showFps = false,
   renderOverlay,
-  renderActions
+  renderActions,
+  renderPauseIndicator
 }) {
   const { optimisticManager, adapters } = useSDK();
   if (!isVideoItem(item)) {
@@ -1658,6 +1659,7 @@ function VideoSlot({
       showFps,
       renderOverlay,
       renderActions,
+      renderPauseIndicator,
       optimisticManager,
       adapters
     }
@@ -1675,6 +1677,7 @@ function VideoSlotInner({
   showFps,
   renderOverlay,
   renderActions,
+  renderPauseIndicator,
   optimisticManager,
   adapters
 }) {
@@ -1791,19 +1794,22 @@ function VideoSlotInner({
     video.muted = isMuted;
   }, [isMuted]);
   const showPosterOverlay = !isReady && !hasPlayedAhead;
-  const [showMuteIndicator, setShowMuteIndicator] = useState(false);
-  const muteIndicatorTimer = useRef(null);
+  const [isPaused, setIsPaused] = useState(false);
   const handleTap = useCallback(() => {
-    onToggleMute();
-    setShowMuteIndicator(true);
-    if (muteIndicatorTimer.current) clearTimeout(muteIndicatorTimer.current);
-    muteIndicatorTimer.current = setTimeout(() => setShowMuteIndicator(false), 1200);
-  }, [onToggleMute]);
+    const video = videoRef.current;
+    if (!video || !isActive) return;
+    if (video.paused) {
+      video.play().catch(() => {
+      });
+      setIsPaused(false);
+    } else {
+      video.pause();
+      setIsPaused(true);
+    }
+  }, [isActive]);
   useEffect(() => {
-    return () => {
-      if (muteIndicatorTimer.current) clearTimeout(muteIndicatorTimer.current);
-    };
-  }, []);
+    if (isActive) setIsPaused(false);
+  }, [isActive]);
   const likeDelta = useSyncExternalStore(
     optimisticManager.store.subscribe,
     () => optimisticManager.getLikeDelta(item.id),
@@ -1822,9 +1828,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 +1879,7 @@ function VideoSlotInner({
             }
           }
         ),
-        showMuteIndicator && /* @__PURE__ */ jsx(
+        isPaused && /* @__PURE__ */ jsx(
           "div",
           {
             style: {
@@ -1879,18 +1887,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(
@@ -1898,11 +1914,13 @@ function VideoSlotInner({
           {
             style: {
               position: "absolute",
-              bottom: 80,
+              bottom: 0,
               left: 16,
               right: 80,
+              paddingBottom: 16,
               pointerEvents: "none",
-              color: "#fff"
+              color: "#fff",
+              zIndex: 10
             },
             children: renderOverlay ? renderOverlay(item, actions) : /* @__PURE__ */ jsx(DefaultOverlay, { item })
           }
@@ -1910,14 +1928,18 @@ function VideoSlotInner({
         /* @__PURE__ */ jsx(
           "div",
           {
+            onClick: (e) => e.stopPropagation(),
             style: {
               position: "absolute",
-              bottom: 80,
+              bottom: 0,
               right: 16,
+              paddingBottom: 16,
               display: "flex",
               flexDirection: "column",
               gap: 20,
-              alignItems: "center"
+              alignItems: "center",
+              pointerEvents: "auto",
+              zIndex: 10
             },
             children: renderActions ? renderActions(item, actions) : /* @__PURE__ */ jsx(DefaultActions, { item, actions })
           }
@@ -1979,6 +2001,7 @@ var centerStyle = {
 function ReelsFeed({
   renderOverlay,
   renderActions,
+  renderPauseIndicator,
   renderLoading,
   renderEmpty,
   renderError: _renderError,
@@ -1998,7 +2021,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);
@@ -2212,7 +2235,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.7",
+  "version": "0.1.9",
   "description": "High-performance Short Video / Reels SDK for React — optimized for Flutter WebView",
   "license": "MIT",
   "type": "module",