@xhub-reels/sdk 0.1.13 → 0.1.15

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,7 +1428,7 @@ 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) {
+        if (video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
           video.load();
         }
         return () => {
@@ -1439,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;
       }
@@ -1656,6 +1659,43 @@ function skeletonCircle(size) {
     background: "rgba(255,255,255,0.1)"
   };
 }
+function DefaultDoubleTap({ isDoubleTap }) {
+  if (!isDoubleTap) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        pointerEvents: "none",
+        zIndex: 20
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              fontSize: 80,
+              animation: "reels-sdk-doubleTapHeart 0.6s ease forwards"
+            },
+            children: "\u2764\uFE0F"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+                @keyframes reels-sdk-doubleTapHeart {
+                    0%   { opacity: 0; transform: scale(0.5); }
+                    30%  { opacity: 1; transform: scale(1.2); }
+                    60%  { opacity: 1; transform: scale(1.0); }
+                    100% { opacity: 0; transform: scale(1.1); }
+                }
+            ` })
+      ]
+    }
+  );
+}
 function VideoSlot({
   item,
   index,
@@ -1668,7 +1708,8 @@ function VideoSlot({
   showFps = false,
   renderOverlay,
   renderActions,
-  renderPauseIndicator
+  renderPauseIndicator,
+  renderDoubleTap
 }) {
   const { optimisticManager, adapters } = useSDK();
   if (!isVideoItem(item)) {
@@ -1705,6 +1746,7 @@ function VideoSlot({
       renderOverlay,
       renderActions,
       renderPauseIndicator,
+      renderDoubleTap,
       optimisticManager,
       adapters
     }
@@ -1723,6 +1765,7 @@ function VideoSlotInner({
   renderOverlay,
   renderActions,
   renderPauseIndicator,
+  renderDoubleTap,
   optimisticManager,
   adapters
 }) {
@@ -1834,6 +1877,7 @@ function VideoSlotInner({
     if (!video) return;
     let onReady = null;
     let fallbackTimerId = null;
+    let pollId = null;
     if (isActive) {
       wasActiveRef.current = true;
       const startPlay = () => {
@@ -1847,6 +1891,10 @@ function VideoSlotInner({
           clearTimeout(fallbackTimerId);
           fallbackTimerId = null;
         }
+        if (pollId !== null) {
+          clearInterval(pollId);
+          pollId = null;
+        }
         video.muted = true;
         video.play().then(() => {
           video.muted = isMuted;
@@ -1854,22 +1902,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 (isNativeHls && video.src && video.readyState < HTMLMediaElement.HAVE_FUTURE_DATA) {
+        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();
           }
-        }, 3e3);
+        }, isNativeHls ? 800 : 3e3);
       }
     } else if (wasActiveRef.current) {
       video.pause();
@@ -1889,6 +1948,10 @@ function VideoSlotInner({
         clearTimeout(fallbackTimerId);
         fallbackTimerId = null;
       }
+      if (pollId !== null) {
+        clearInterval(pollId);
+        pollId = null;
+      }
     };
   }, [isActive, isMuted, hasPlayedAhead, isNativeHls]);
   react.useEffect(() => {
@@ -1921,18 +1984,44 @@ function VideoSlotInner({
   }, [isActive]);
   const showPosterOverlay = isActive ? !isReady && !isActuallyPlaying : canPlayAhead ? !hasPlayedAhead : !isReady;
   const [isPaused, setIsPaused] = react.useState(false);
+  const [isDoubleTap, setIsDoubleTap] = react.useState(false);
+  const lastTapTimeRef = react.useRef(0);
+  const doubleTapTimerRef = react.useRef(null);
   const handleTap = react.useCallback(() => {
-    const video = videoRef.current;
-    if (!video || !isActive) return;
-    if (video.paused) {
-      video.play().catch(() => {
-      });
-      setIsPaused(false);
+    if (!isActive) return;
+    const now = Date.now();
+    const delta = now - lastTapTimeRef.current;
+    lastTapTimeRef.current = now;
+    if (delta < 300) {
+      if (doubleTapTimerRef.current !== null) {
+        clearTimeout(doubleTapTimerRef.current);
+        doubleTapTimerRef.current = null;
+      }
+      setIsDoubleTap(true);
+      setTimeout(() => setIsDoubleTap(false), 600);
     } else {
-      video.pause();
-      setIsPaused(true);
+      doubleTapTimerRef.current = setTimeout(() => {
+        doubleTapTimerRef.current = null;
+        const video = videoRef.current;
+        if (!video) return;
+        if (video.paused) {
+          video.play().catch(() => {
+          });
+          setIsPaused(false);
+        } else {
+          video.pause();
+          setIsPaused(true);
+        }
+      }, 300);
     }
   }, [isActive]);
+  react.useEffect(() => {
+    return () => {
+      if (doubleTapTimerRef.current !== null) {
+        clearTimeout(doubleTapTimerRef.current);
+      }
+    };
+  }, []);
   react.useEffect(() => {
     if (isActive) setIsPaused(false);
   }, [isActive]);
@@ -2006,6 +2095,18 @@ function VideoSlotInner({
             }
           }
         ),
+        (isDoubleTap || renderDoubleTap) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "none",
+              zIndex: 20
+            },
+            children: renderDoubleTap ? renderDoubleTap(isDoubleTap) : /* @__PURE__ */ jsxRuntime.jsx(DefaultDoubleTap, { isDoubleTap })
+          }
+        ),
         isPaused && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -2129,6 +2230,7 @@ function ReelsFeed({
   renderOverlay,
   renderActions,
   renderPauseIndicator,
+  renderDoubleTap,
   renderLoading,
   renderEmpty,
   renderError: _renderError,
@@ -2375,7 +2477,8 @@ function ReelsFeed({
                     showFps: showFps && isActive,
                     renderOverlay,
                     renderActions,
-                    renderPauseIndicator
+                    renderPauseIndicator,
+                    renderDoubleTap
                   }
                 ) : null
               },
@@ -3010,6 +3113,7 @@ exports.DEFAULT_FEED_CONFIG = DEFAULT_FEED_CONFIG;
 exports.DEFAULT_PLAYER_CONFIG = DEFAULT_PLAYER_CONFIG;
 exports.DEFAULT_RESOURCE_CONFIG = DEFAULT_RESOURCE_CONFIG;
 exports.DefaultActions = DefaultActions;
+exports.DefaultDoubleTap = DefaultDoubleTap;
 exports.DefaultOverlay = DefaultOverlay;
 exports.DefaultSkeleton = DefaultSkeleton;
 exports.FeedManager = FeedManager;

package/dist/index.d.cts

@@ -334,6 +334,13 @@ interface ReelsFeedProps {
      * If not provided, SDK uses a default ▶️/⏸️ emoji indicator.
      */
     renderPauseIndicator?: (isPaused: boolean) => ReactNode;
+    /**
+     * Custom double-tap overlay rendered when user double-taps a video slot.
+     * Receives isDoubleTap boolean (true for the duration of the animation window).
+     * Return ReactNode — positioned absolute center (full inset) by SDK.
+     * If not provided, SDK uses DefaultDoubleTap (animated ❤️ heart).
+     */
+    renderDoubleTap?: (isDoubleTap: boolean) => ReactNode;
     /**
      * Custom loading skeleton shown during initial feed load.
      * If not provided, SDK uses DefaultSkeleton with shimmer animation.
@@ -724,7 +731,7 @@ interface ReelsProviderProps {
 declare function ReelsProvider({ children, adapters, debug }: ReelsProviderProps): react_jsx_runtime.JSX.Element;
 declare function useSDK(): SDKContextValue;
 
-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;
+declare function ReelsFeed({ renderOverlay, renderActions, renderPauseIndicator, renderDoubleTap, 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)
@@ -801,8 +808,9 @@ interface VideoSlotProps {
     renderOverlay?: (item: ContentItem, actions: SlotActions) => ReactNode;
     renderActions?: (item: ContentItem, actions: SlotActions) => ReactNode;
     renderPauseIndicator?: (isPaused: boolean) => ReactNode;
+    renderDoubleTap?: (isDoubleTap: boolean) => ReactNode;
 }
-declare function VideoSlot({ item, index, isActive, isPrefetch, isPreloaded, bufferTier, isMuted, onToggleMute, showFps, renderOverlay, renderActions, renderPauseIndicator, }: VideoSlotProps): react_jsx_runtime.JSX.Element;
+declare function VideoSlot({ item, index, isActive, isPrefetch, isPreloaded, bufferTier, isMuted, onToggleMute, showFps, renderOverlay, renderActions, renderPauseIndicator, renderDoubleTap, }: VideoSlotProps): react_jsx_runtime.JSX.Element;
 
 declare function DefaultOverlay({ item }: {
     item: ContentItem;
@@ -820,6 +828,16 @@ declare function DefaultActions({ item, actions }: {
  */
 declare function DefaultSkeleton(): react_jsx_runtime.JSX.Element;
 
+/**
+ * DefaultDoubleTap — Default double-tap heart animation overlay
+ *
+ * Shown when user double-taps a video slot and no renderDoubleTap is provided.
+ * Renders an animated ❤️ that fades in/scales up then fades out.
+ */
+declare function DefaultDoubleTap({ isDoubleTap }: {
+    isDoubleTap: boolean;
+}): react_jsx_runtime.JSX.Element | null;
+
 declare function useFeedSelector<T>(selector: (state: FeedState) => T): T;
 declare function useFeed(): {
     items: NonNullable<ContentItem | undefined>[];
@@ -1090,4 +1108,4 @@ declare class HttpError extends Error {
     constructor(status: number, message: string, body?: string | undefined);
 }
 
-export { type Article, type ArticleImage, type Author, type BufferTier, type CommentItem, type CommentPage, type ContentItem, type ContentStats, DEFAULT_FEED_CONFIG, DEFAULT_PLAYER_CONFIG, DEFAULT_RESOURCE_CONFIG, DefaultActions, DefaultOverlay, DefaultSkeleton, type FeedConfig, type FeedError, FeedManager, type FeedPage, type FeedState, HttpDataSource, type HttpDataSourceConfig, HttpError, type IAnalytics, type ICommentAdapter, type IDataSource, type IInteraction, type ILogger, type INetworkAdapter, type ISessionStorage, type IVideoLoader, type InteractionState, type LogLevel, MockAnalytics, MockCommentAdapter, MockDataSource, MockInteraction, MockLogger, MockNetworkAdapter, MockSessionStorage, MockVideoLoader, type NetworkType, OptimisticManager, type PlayerConfig, PlayerEngine, type PlayerError, type PlayerEvent, type PlayerEventListener, type PlayerState, PlayerStatus, type PointerGestureConfig, type PreloadResult, type PreloadStatus, ReelsFeed, type ReelsFeedProps, ReelsProvider, type ReelsProviderProps, type ResourceConfig, ResourceGovernor, type ResourceState, type SDKAdapters, type SDKContextValue, type SlotActions, type SnapTarget, type UseHlsOptions, type UseHlsReturn, VALID_TRANSITIONS, type VideoItem, type VideoQuality, VideoSlot, type VideoSource, canPause, canPlay, canSeek, isArticle, isValidTransition, isVideoItem, useFeed, useFeedSelector, useHls, usePlayer, usePlayerSelector, usePointerGesture, useResource, useResourceSelector, useSDK, useSnapAnimation };
+export { type Article, type ArticleImage, type Author, type BufferTier, type CommentItem, type CommentPage, type ContentItem, type ContentStats, DEFAULT_FEED_CONFIG, DEFAULT_PLAYER_CONFIG, DEFAULT_RESOURCE_CONFIG, DefaultActions, DefaultDoubleTap, DefaultOverlay, DefaultSkeleton, type FeedConfig, type FeedError, FeedManager, type FeedPage, type FeedState, HttpDataSource, type HttpDataSourceConfig, HttpError, type IAnalytics, type ICommentAdapter, type IDataSource, type IInteraction, type ILogger, type INetworkAdapter, type ISessionStorage, type IVideoLoader, type InteractionState, type LogLevel, MockAnalytics, MockCommentAdapter, MockDataSource, MockInteraction, MockLogger, MockNetworkAdapter, MockSessionStorage, MockVideoLoader, type NetworkType, OptimisticManager, type PlayerConfig, PlayerEngine, type PlayerError, type PlayerEvent, type PlayerEventListener, type PlayerState, PlayerStatus, type PointerGestureConfig, type PreloadResult, type PreloadStatus, ReelsFeed, type ReelsFeedProps, ReelsProvider, type ReelsProviderProps, type ResourceConfig, ResourceGovernor, type ResourceState, type SDKAdapters, type SDKContextValue, type SlotActions, type SnapTarget, type UseHlsOptions, type UseHlsReturn, VALID_TRANSITIONS, type VideoItem, type VideoQuality, VideoSlot, type VideoSource, canPause, canPlay, canSeek, isArticle, isValidTransition, isVideoItem, useFeed, useFeedSelector, useHls, usePlayer, usePlayerSelector, usePointerGesture, useResource, useResourceSelector, useSDK, useSnapAnimation };

package/dist/index.d.ts

@@ -334,6 +334,13 @@ interface ReelsFeedProps {
      * If not provided, SDK uses a default ▶️/⏸️ emoji indicator.
      */
     renderPauseIndicator?: (isPaused: boolean) => ReactNode;
+    /**
+     * Custom double-tap overlay rendered when user double-taps a video slot.
+     * Receives isDoubleTap boolean (true for the duration of the animation window).
+     * Return ReactNode — positioned absolute center (full inset) by SDK.
+     * If not provided, SDK uses DefaultDoubleTap (animated ❤️ heart).
+     */
+    renderDoubleTap?: (isDoubleTap: boolean) => ReactNode;
     /**
      * Custom loading skeleton shown during initial feed load.
      * If not provided, SDK uses DefaultSkeleton with shimmer animation.
@@ -724,7 +731,7 @@ interface ReelsProviderProps {
 declare function ReelsProvider({ children, adapters, debug }: ReelsProviderProps): react_jsx_runtime.JSX.Element;
 declare function useSDK(): SDKContextValue;
 
-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;
+declare function ReelsFeed({ renderOverlay, renderActions, renderPauseIndicator, renderDoubleTap, 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)
@@ -801,8 +808,9 @@ interface VideoSlotProps {
     renderOverlay?: (item: ContentItem, actions: SlotActions) => ReactNode;
     renderActions?: (item: ContentItem, actions: SlotActions) => ReactNode;
     renderPauseIndicator?: (isPaused: boolean) => ReactNode;
+    renderDoubleTap?: (isDoubleTap: boolean) => ReactNode;
 }
-declare function VideoSlot({ item, index, isActive, isPrefetch, isPreloaded, bufferTier, isMuted, onToggleMute, showFps, renderOverlay, renderActions, renderPauseIndicator, }: VideoSlotProps): react_jsx_runtime.JSX.Element;
+declare function VideoSlot({ item, index, isActive, isPrefetch, isPreloaded, bufferTier, isMuted, onToggleMute, showFps, renderOverlay, renderActions, renderPauseIndicator, renderDoubleTap, }: VideoSlotProps): react_jsx_runtime.JSX.Element;
 
 declare function DefaultOverlay({ item }: {
     item: ContentItem;
@@ -820,6 +828,16 @@ declare function DefaultActions({ item, actions }: {
  */
 declare function DefaultSkeleton(): react_jsx_runtime.JSX.Element;
 
+/**
+ * DefaultDoubleTap — Default double-tap heart animation overlay
+ *
+ * Shown when user double-taps a video slot and no renderDoubleTap is provided.
+ * Renders an animated ❤️ that fades in/scales up then fades out.
+ */
+declare function DefaultDoubleTap({ isDoubleTap }: {
+    isDoubleTap: boolean;
+}): react_jsx_runtime.JSX.Element | null;
+
 declare function useFeedSelector<T>(selector: (state: FeedState) => T): T;
 declare function useFeed(): {
     items: NonNullable<ContentItem | undefined>[];
@@ -1090,4 +1108,4 @@ declare class HttpError extends Error {
     constructor(status: number, message: string, body?: string | undefined);
 }
 
-export { type Article, type ArticleImage, type Author, type BufferTier, type CommentItem, type CommentPage, type ContentItem, type ContentStats, DEFAULT_FEED_CONFIG, DEFAULT_PLAYER_CONFIG, DEFAULT_RESOURCE_CONFIG, DefaultActions, DefaultOverlay, DefaultSkeleton, type FeedConfig, type FeedError, FeedManager, type FeedPage, type FeedState, HttpDataSource, type HttpDataSourceConfig, HttpError, type IAnalytics, type ICommentAdapter, type IDataSource, type IInteraction, type ILogger, type INetworkAdapter, type ISessionStorage, type IVideoLoader, type InteractionState, type LogLevel, MockAnalytics, MockCommentAdapter, MockDataSource, MockInteraction, MockLogger, MockNetworkAdapter, MockSessionStorage, MockVideoLoader, type NetworkType, OptimisticManager, type PlayerConfig, PlayerEngine, type PlayerError, type PlayerEvent, type PlayerEventListener, type PlayerState, PlayerStatus, type PointerGestureConfig, type PreloadResult, type PreloadStatus, ReelsFeed, type ReelsFeedProps, ReelsProvider, type ReelsProviderProps, type ResourceConfig, ResourceGovernor, type ResourceState, type SDKAdapters, type SDKContextValue, type SlotActions, type SnapTarget, type UseHlsOptions, type UseHlsReturn, VALID_TRANSITIONS, type VideoItem, type VideoQuality, VideoSlot, type VideoSource, canPause, canPlay, canSeek, isArticle, isValidTransition, isVideoItem, useFeed, useFeedSelector, useHls, usePlayer, usePlayerSelector, usePointerGesture, useResource, useResourceSelector, useSDK, useSnapAnimation };
+export { type Article, type ArticleImage, type Author, type BufferTier, type CommentItem, type CommentPage, type ContentItem, type ContentStats, DEFAULT_FEED_CONFIG, DEFAULT_PLAYER_CONFIG, DEFAULT_RESOURCE_CONFIG, DefaultActions, DefaultDoubleTap, DefaultOverlay, DefaultSkeleton, type FeedConfig, type FeedError, FeedManager, type FeedPage, type FeedState, HttpDataSource, type HttpDataSourceConfig, HttpError, type IAnalytics, type ICommentAdapter, type IDataSource, type IInteraction, type ILogger, type INetworkAdapter, type ISessionStorage, type IVideoLoader, type InteractionState, type LogLevel, MockAnalytics, MockCommentAdapter, MockDataSource, MockInteraction, MockLogger, MockNetworkAdapter, MockSessionStorage, MockVideoLoader, type NetworkType, OptimisticManager, type PlayerConfig, PlayerEngine, type PlayerError, type PlayerEvent, type PlayerEventListener, type PlayerState, PlayerStatus, type PointerGestureConfig, type PreloadResult, type PreloadStatus, ReelsFeed, type ReelsFeedProps, ReelsProvider, type ReelsProviderProps, type ResourceConfig, ResourceGovernor, type ResourceState, type SDKAdapters, type SDKContextValue, type SlotActions, type SnapTarget, type UseHlsOptions, type UseHlsReturn, VALID_TRANSITIONS, type VideoItem, type VideoQuality, VideoSlot, type VideoSource, canPause, canPlay, canSeek, isArticle, isValidTransition, isVideoItem, useFeed, useFeedSelector, useHls, usePlayer, usePlayerSelector, usePointerGesture, useResource, useResourceSelector, useSDK, useSnapAnimation };

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,7 +1422,7 @@ 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) {
+        if (video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
           video.load();
         }
         return () => {
@@ -1433,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;
       }
@@ -1650,6 +1653,43 @@ function skeletonCircle(size) {
     background: "rgba(255,255,255,0.1)"
   };
 }
+function DefaultDoubleTap({ isDoubleTap }) {
+  if (!isDoubleTap) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        pointerEvents: "none",
+        zIndex: 20
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: 80,
+              animation: "reels-sdk-doubleTapHeart 0.6s ease forwards"
+            },
+            children: "\u2764\uFE0F"
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+                @keyframes reels-sdk-doubleTapHeart {
+                    0%   { opacity: 0; transform: scale(0.5); }
+                    30%  { opacity: 1; transform: scale(1.2); }
+                    60%  { opacity: 1; transform: scale(1.0); }
+                    100% { opacity: 0; transform: scale(1.1); }
+                }
+            ` })
+      ]
+    }
+  );
+}
 function VideoSlot({
   item,
   index,
@@ -1662,7 +1702,8 @@ function VideoSlot({
   showFps = false,
   renderOverlay,
   renderActions,
-  renderPauseIndicator
+  renderPauseIndicator,
+  renderDoubleTap
 }) {
   const { optimisticManager, adapters } = useSDK();
   if (!isVideoItem(item)) {
@@ -1699,6 +1740,7 @@ function VideoSlot({
       renderOverlay,
       renderActions,
       renderPauseIndicator,
+      renderDoubleTap,
       optimisticManager,
       adapters
     }
@@ -1717,6 +1759,7 @@ function VideoSlotInner({
   renderOverlay,
   renderActions,
   renderPauseIndicator,
+  renderDoubleTap,
   optimisticManager,
   adapters
 }) {
@@ -1828,6 +1871,7 @@ function VideoSlotInner({
     if (!video) return;
     let onReady = null;
     let fallbackTimerId = null;
+    let pollId = null;
     if (isActive) {
       wasActiveRef.current = true;
       const startPlay = () => {
@@ -1841,6 +1885,10 @@ function VideoSlotInner({
           clearTimeout(fallbackTimerId);
           fallbackTimerId = null;
         }
+        if (pollId !== null) {
+          clearInterval(pollId);
+          pollId = null;
+        }
         video.muted = true;
         video.play().then(() => {
           video.muted = isMuted;
@@ -1848,22 +1896,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 (isNativeHls && video.src && video.readyState < HTMLMediaElement.HAVE_FUTURE_DATA) {
+        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();
           }
-        }, 3e3);
+        }, isNativeHls ? 800 : 3e3);
       }
     } else if (wasActiveRef.current) {
       video.pause();
@@ -1883,6 +1942,10 @@ function VideoSlotInner({
         clearTimeout(fallbackTimerId);
         fallbackTimerId = null;
       }
+      if (pollId !== null) {
+        clearInterval(pollId);
+        pollId = null;
+      }
     };
   }, [isActive, isMuted, hasPlayedAhead, isNativeHls]);
   useEffect(() => {
@@ -1915,18 +1978,44 @@ function VideoSlotInner({
   }, [isActive]);
   const showPosterOverlay = isActive ? !isReady && !isActuallyPlaying : canPlayAhead ? !hasPlayedAhead : !isReady;
   const [isPaused, setIsPaused] = useState(false);
+  const [isDoubleTap, setIsDoubleTap] = useState(false);
+  const lastTapTimeRef = useRef(0);
+  const doubleTapTimerRef = useRef(null);
   const handleTap = useCallback(() => {
-    const video = videoRef.current;
-    if (!video || !isActive) return;
-    if (video.paused) {
-      video.play().catch(() => {
-      });
-      setIsPaused(false);
+    if (!isActive) return;
+    const now = Date.now();
+    const delta = now - lastTapTimeRef.current;
+    lastTapTimeRef.current = now;
+    if (delta < 300) {
+      if (doubleTapTimerRef.current !== null) {
+        clearTimeout(doubleTapTimerRef.current);
+        doubleTapTimerRef.current = null;
+      }
+      setIsDoubleTap(true);
+      setTimeout(() => setIsDoubleTap(false), 600);
     } else {
-      video.pause();
-      setIsPaused(true);
+      doubleTapTimerRef.current = setTimeout(() => {
+        doubleTapTimerRef.current = null;
+        const video = videoRef.current;
+        if (!video) return;
+        if (video.paused) {
+          video.play().catch(() => {
+          });
+          setIsPaused(false);
+        } else {
+          video.pause();
+          setIsPaused(true);
+        }
+      }, 300);
     }
   }, [isActive]);
+  useEffect(() => {
+    return () => {
+      if (doubleTapTimerRef.current !== null) {
+        clearTimeout(doubleTapTimerRef.current);
+      }
+    };
+  }, []);
   useEffect(() => {
     if (isActive) setIsPaused(false);
   }, [isActive]);
@@ -2000,6 +2089,18 @@ function VideoSlotInner({
             }
           }
         ),
+        (isDoubleTap || renderDoubleTap) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "none",
+              zIndex: 20
+            },
+            children: renderDoubleTap ? renderDoubleTap(isDoubleTap) : /* @__PURE__ */ jsx(DefaultDoubleTap, { isDoubleTap })
+          }
+        ),
         isPaused && /* @__PURE__ */ jsx(
           "div",
           {
@@ -2123,6 +2224,7 @@ function ReelsFeed({
   renderOverlay,
   renderActions,
   renderPauseIndicator,
+  renderDoubleTap,
   renderLoading,
   renderEmpty,
   renderError: _renderError,
@@ -2369,7 +2471,8 @@ function ReelsFeed({
                     showFps: showFps && isActive,
                     renderOverlay,
                     renderActions,
-                    renderPauseIndicator
+                    renderPauseIndicator,
+                    renderDoubleTap
                   }
                 ) : null
               },
@@ -3000,4 +3103,4 @@ var HttpError = class extends Error {
   }
 };
 
-export { DEFAULT_FEED_CONFIG, DEFAULT_PLAYER_CONFIG, DEFAULT_RESOURCE_CONFIG, DefaultActions, DefaultOverlay, DefaultSkeleton, FeedManager, HttpDataSource, HttpError, MockAnalytics, MockCommentAdapter, MockDataSource, MockInteraction, MockLogger, MockNetworkAdapter, MockSessionStorage, MockVideoLoader, OptimisticManager, PlayerEngine, PlayerStatus, ReelsFeed, ReelsProvider, ResourceGovernor, VALID_TRANSITIONS, VideoSlot, canPause, canPlay, canSeek, isArticle, isValidTransition, isVideoItem, useFeed, useFeedSelector, useHls, usePlayer, usePlayerSelector, usePointerGesture, useResource, useResourceSelector, useSDK, useSnapAnimation };
+export { DEFAULT_FEED_CONFIG, DEFAULT_PLAYER_CONFIG, DEFAULT_RESOURCE_CONFIG, DefaultActions, DefaultDoubleTap, DefaultOverlay, DefaultSkeleton, FeedManager, HttpDataSource, HttpError, MockAnalytics, MockCommentAdapter, MockDataSource, MockInteraction, MockLogger, MockNetworkAdapter, MockSessionStorage, MockVideoLoader, OptimisticManager, PlayerEngine, PlayerStatus, ReelsFeed, ReelsProvider, ResourceGovernor, VALID_TRANSITIONS, VideoSlot, canPause, canPlay, canSeek, isArticle, isValidTransition, isVideoItem, useFeed, useFeedSelector, useHls, usePlayer, usePlayerSelector, usePointerGesture, useResource, useResourceSelector, useSDK, useSnapAnimation };

package/package.json

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