@xhub-reels/sdk 0.2.1 → 0.2.6

package/README.md

@@ -86,6 +86,72 @@ function MyFeed() {
 }
 ```
 
+## Thumbnail grid
+
+`<ReelsFeedThumbnail>` is a headless grid component for the pre-drawer browsing UX
+(e.g. a community feed that opens the player drawer on tap). It must be mounted
+inside `<ReelsProvider>` and reads items from the same shared feed. The host
+provides card visuals via `renderThumbnail`.
+
+```tsx
+import { ReelsProvider, ReelsFeedThumbnail } from 'xhub-reels-sdk';
+
+function CommunityPage() {
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  return (
+    <ReelsProvider adapters={{ dataSource, interaction }}>
+      <ReelsFeedThumbnail
+        renderThumbnail={(item) => (
+          <article className="aspect-[3/2] rounded-lg overflow-hidden">
+            <img src={item.poster} alt="" />
+            <p>@{item.author.name}</p>
+          </article>
+        )}
+        onThumbnailClick={(id) => {
+          setDrawerOpen(true);
+          window.history.replaceState(null, '', `#reel_uuid=${id}`);
+        }}
+      />
+      {drawerOpen && <ReelsDrawer onClose={() => setDrawerOpen(false)} />}
+    </ReelsProvider>
+  );
+}
+```
+
+By default, clicking a card calls `setFocusedIndexImmediate(index)` on the
+`ResourceGovernor` so the player opens instantly without a scroll-to-index. To
+disable this glue (e.g. if the host manages focus separately), pass
+`setFocusOnClick={false}`.
+
+### Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `renderThumbnail` | `(item, index) => ReactNode` | required | Card visual for a single item |
+| `onThumbnailClick` | `(id, item, index) => void` | — | Click handler |
+| `renderLoading` | `() => ReactNode` | — | Shown while loading with no items |
+| `renderEmpty` | `() => ReactNode` | — | Shown when feed is empty |
+| `renderError` | `({ message, retry }) => ReactNode` | — | Shown on error with no items |
+| `className` | `string` | `'grid grid-cols-2 gap-3'` | Outer wrapper className |
+| `wrap` | `boolean` | `true` | Set `false` to render without an outer `<div>` |
+| `setFocusOnClick` | `boolean` | `true` | Pre-focus the slot before `onThumbnailClick` fires |
+| `prefetchOnHover` | `boolean` | `false` | Opt-in HLS metadata prefetch on `pointerenter` |
+| `getKey` | `(item, index) => string` | `item.id` | Key override for duplicate lists |
+
+### Hover prefetch
+
+For hover-capable devices, opt into manifest prefetch so opening the player
+feels instant:
+
+```tsx
+<ReelsFeedThumbnail prefetchOnHover renderThumbnail={...} />
+```
+
+The SDK uses `adapters.videoLoader?.preloadMetadata?.(url)` and dedupes per item
+so a card only triggers one prefetch regardless of how many times it's hovered.
+Off by default to avoid surprising bandwidth on touch devices.
+
 ## Gesture Engine
 
 ```tsx
@@ -111,48 +177,6 @@ function SwipeableFeed() {
 }
 ```
 
-## Thumbnail grid
-
-Headless pre-drawer browsing UX. Mount inside `<ReelsProvider>`. Host provides the
-card visuals via `renderThumbnail`; the SDK ships no default card.
-
-```tsx
-import { ReelsFeedThumbnail } from 'xhub-reels-sdk';
-
-<ReelsFeedThumbnail
-  renderThumbnail={(videoData) => (
-    <article className="aspect-[3/2] rounded-lg overflow-hidden">
-      <img src={videoData.poster} alt="" />
-      <p>@{videoData.author.name}</p>
-    </article>
-  )}
-  onThumbnailClick={(id) => openDrawer(id)}
-/>
-```
-
-Opt-in hover prefetch (warms HLS manifest via `adapters.videoLoader.preloadMetadata`):
-
-```tsx
-<ReelsFeedThumbnail prefetchOnHover renderThumbnail={...} />
-```
-
-On click the SDK calls `ResourceGovernor.setFocusedIndexImmediate(index)` before
-invoking `onThumbnailClick`, so opening `<ReelsFeed>` lands on the tapped item
-without a scroll-to-index flash. Disable with `setFocusOnClick={false}`.
-
-Custom slots for the zero-items branches:
-
-```tsx
-<ReelsFeedThumbnail
-  renderThumbnail={(item) => <Card item={item} />}
-  renderLoading={() => <SkeletonGrid />}
-  renderEmpty={() => <EmptyState />}
-  renderError={({ message, retry }) => (
-    <ErrorBox message={message} onRetry={retry} />
-  )}
-/>
-```
-
 ## Architecture
 
 ```

package/dist/index.cjs

@@ -1447,7 +1447,7 @@ function useHls(options) {
       setIsReady(false);
       canPlayFiredRef.current = false;
       currentSrcRef.current = src;
-      const handleCanPlay2 = () => {
+      const handleCanPlay = () => {
         canPlayFiredRef.current = true;
         setIsReady(true);
       };
@@ -1457,10 +1457,10 @@ function useHls(options) {
           setIsReady(true);
         }
       };
-      video.addEventListener("canplay", handleCanPlay2, { once: true });
+      video.addEventListener("canplay", handleCanPlay, { once: true });
       video.addEventListener("loadeddata", handleLoadedData, { once: true });
       return () => {
-        video.removeEventListener("canplay", handleCanPlay2);
+        video.removeEventListener("canplay", handleCanPlay);
         video.removeEventListener("loadeddata", handleLoadedData);
       };
     }
@@ -1470,13 +1470,21 @@ function useHls(options) {
     }
     if (hlsRef.current && currentSrcRef.current === src) {
       if (!canPlayFiredRef.current) {
-        const handleCanPlay2 = () => {
+        if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+          canPlayFiredRef.current = true;
+          setIsReady(true);
+          return void 0;
+        }
+        const handleReady2 = () => {
+          if (canPlayFiredRef.current) return;
           canPlayFiredRef.current = true;
           setIsReady(true);
         };
-        video.addEventListener("canplay", handleCanPlay2, { once: true });
+        video.addEventListener("loadeddata", handleReady2, { once: true });
+        video.addEventListener("canplay", handleReady2, { once: true });
         return () => {
-          video.removeEventListener("canplay", handleCanPlay2);
+          video.removeEventListener("loadeddata", handleReady2);
+          video.removeEventListener("canplay", handleReady2);
         };
       }
       return void 0;
@@ -1513,15 +1521,18 @@ function useHls(options) {
       const mapped = mapHlsError(data);
       onErrorRef.current?.(mapped.code, mapped.message);
     });
-    const handleCanPlay = () => {
+    const handleReady = () => {
+      if (canPlayFiredRef.current) return;
       canPlayFiredRef.current = true;
       setIsReady(true);
     };
-    video.addEventListener("canplay", handleCanPlay, { once: true });
+    video.addEventListener("loadeddata", handleReady, { once: true });
+    video.addEventListener("canplay", handleReady, { once: true });
     hls.attachMedia(video);
     hls.loadSource(src);
     return () => {
-      video.removeEventListener("canplay", handleCanPlay);
+      video.removeEventListener("loadeddata", handleReady);
+      video.removeEventListener("canplay", handleReady);
       if (hlsRef.current === hls) {
         hls.destroy();
         hlsRef.current = null;
@@ -1892,11 +1903,18 @@ function VideoSlotInner({
     };
     if (isActive && !isManuallyPaused) {
       wasActiveRef.current = true;
-      if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+      if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
         attemptPlay();
       } else {
-        onReady = attemptPlay;
-        video.addEventListener("canplay", onReady, { once: true });
+        let consumed = false;
+        const handler = () => {
+          if (consumed) return;
+          consumed = true;
+          attemptPlay();
+        };
+        onReady = handler;
+        video.addEventListener("loadeddata", handler, { once: true });
+        video.addEventListener("canplay", handler, { once: true });
       }
     } else if (isActive && isManuallyPaused) {
       wasActiveRef.current = true;
@@ -1912,7 +1930,10 @@ function VideoSlotInner({
     }
     return () => {
       cancelled = true;
-      if (onReady) video.removeEventListener("canplay", onReady);
+      if (onReady) {
+        video.removeEventListener("loadeddata", onReady);
+        video.removeEventListener("canplay", onReady);
+      }
     };
   }, [isActive, isMuted, hasPlayedAhead, isManuallyPaused, onAutoplayBlocked]);
   react.useEffect(() => {
@@ -2052,7 +2073,7 @@ function VideoSlotInner({
               inset: 0,
               backgroundImage: `url(${item.poster})`,
               backgroundSize: "cover",
-              backgroundPosition: "center center",
+              backgroundPosition: "center",
               opacity: showPosterOverlay ? 1 : 0,
               transition: "opacity 0.15s ease",
               pointerEvents: "none"
@@ -2499,87 +2520,80 @@ function parsePxTranslateY(el) {
   if (!match || !match[1]) return 0;
   return Number.parseFloat(match[1]);
 }
-var DEFAULT_CLASSNAME = "grid grid-cols-2 gap-3";
-var defaultGetKey = (item) => item.id;
-var buttonResetStyle = {
-  all: "unset",
-  display: "block",
-  cursor: "pointer",
-  width: "100%",
-  boxSizing: "border-box"
-};
 function ReelsFeedThumbnail({
   renderThumbnail,
   onThumbnailClick,
   renderLoading,
   renderEmpty,
   renderError,
-  className = DEFAULT_CLASSNAME,
+  className = "grid grid-cols-2 gap-3",
   wrap = true,
   setFocusOnClick = true,
   prefetchOnHover = false,
-  getKey = defaultGetKey
+  getKey
 }) {
   const { items, loading, error, refresh } = useFeed();
   const { setFocusedIndexImmediate } = useResource();
   const { adapters } = useSDK();
   const prefetchedRef = react.useRef(/* @__PURE__ */ new Set());
   const handleClick = react.useCallback(
-    (item, index) => {
+    (id, item, index) => {
       if (setFocusOnClick) {
         setFocusedIndexImmediate(index);
       }
-      onThumbnailClick?.(item.id, item, index);
+      onThumbnailClick?.(id, item, index);
     },
-    [onThumbnailClick, setFocusOnClick, setFocusedIndexImmediate]
+    [setFocusOnClick, setFocusedIndexImmediate, onThumbnailClick]
   );
   const handlePointerEnter = react.useCallback(
     (item) => {
       if (!prefetchOnHover) return;
       if (!isVideoItem(item)) return;
       if (item.source.type !== "hls") return;
-      if (prefetchedRef.current.has(item.id)) return;
-      const loader = adapters.videoLoader;
-      if (!loader?.preloadMetadata) return;
-      if (loader.isPreloaded(item.id)) {
-        prefetchedRef.current.add(item.id);
-        return;
-      }
-      loader.preloadMetadata(item.source.url);
-      prefetchedRef.current.add(item.id);
+      const url = item.source.url;
+      if (prefetchedRef.current.has(url)) return;
+      prefetchedRef.current.add(url);
+      adapters.videoLoader?.preloadMetadata?.(url);
     },
     [prefetchOnHover, adapters.videoLoader]
   );
-  const children = react.useMemo(
-    () => items.map((item, index) => {
-      const key = getKey(item, index);
-      const onEnter = prefetchOnHover ? (_e) => handlePointerEnter(item) : void 0;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          style: buttonResetStyle,
-          "data-thumbnail-index": index,
-          "data-thumbnail-id": item.id,
-          onClick: () => handleClick(item, index),
-          onPointerEnter: onEnter,
-          children: renderThumbnail(item, index)
-        },
-        key
-      );
-    }),
-    [items, getKey, prefetchOnHover, handlePointerEnter, handleClick, renderThumbnail]
-  );
-  if (items.length === 0) {
-    if (loading && renderLoading) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderLoading() });
-    if (error && renderError) {
+  if (loading && items.length === 0) {
+    if (renderLoading) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderLoading() });
+    return null;
+  }
+  if (error && items.length === 0) {
+    if (renderError) {
       return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderError({ message: error.message, retry: refresh }) });
     }
-    if (!loading && !error && renderEmpty) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderEmpty() });
     return null;
   }
-  if (!wrap) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
+  if (!loading && items.length === 0) {
+    if (renderEmpty) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderEmpty() });
+    return null;
+  }
+  const content = items.map((item, index) => {
+    const key = getKey ? getKey(item, index) : item.id;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => handleClick(item.id, item, index),
+        onPointerEnter: () => handlePointerEnter(item),
+        style: {
+          all: "unset",
+          cursor: "pointer",
+          display: "block",
+          width: "100%"
+        },
+        children: renderThumbnail(item, index)
+      },
+      key
+    );
+  });
+  if (!wrap) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: content });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: content });
 }
 function usePlayerSelector(selector) {
   const { playerEngine } = useSDK();
@@ -3001,12 +3015,16 @@ function transformVideoItem(raw) {
   const stats = transformStats(obj);
   const interaction = transformInteraction(obj);
   let poster;
-  let duration = 0;
-  const mediaArr = obj["media"];
-  if (Array.isArray(mediaArr) && mediaArr.length > 0) {
-    const first = mediaArr[0];
-    poster = toStr(first["poster"], "") || void 0;
-    duration = toNum(first["duration"], 0);
+  const thumbnailObj = obj["thumbnail"];
+  if (thumbnailObj && thumbnailObj["url"]) {
+    poster = toStr(thumbnailObj["url"], "") || void 0;
+  }
+  if (!poster) {
+    const mediaArr2 = obj["media"];
+    if (Array.isArray(mediaArr2) && mediaArr2.length > 0) {
+      const first = mediaArr2[0];
+      poster = toStr(first["poster"], "") || void 0;
+    }
   }
   if (!poster) {
     poster = toStr(
@@ -3014,11 +3032,11 @@ function transformVideoItem(raw) {
       void 0
     ) || void 0;
   }
-  if (!poster) {
-    const thumbnailObj = obj["thumbnail"];
-    if (thumbnailObj && thumbnailObj["url"]) {
-      poster = toStr(thumbnailObj["url"], "") || void 0;
-    }
+  let duration = 0;
+  const mediaArr = obj["media"];
+  if (Array.isArray(mediaArr) && mediaArr.length > 0) {
+    const first = mediaArr[0];
+    duration = toNum(first["duration"], 0);
   }
   if (duration === 0) {
     duration = toNum(tryFields(obj, "duration", "duration_seconds", "length", "video_duration"), 0);

package/dist/index.d.cts

@@ -789,6 +789,33 @@ declare function useSDK(): SDKContextValue;
 
 declare function ReelsFeed({ renderOverlay, renderActions, renderPauseAction, renderLoading, renderEmpty, renderError: _renderError, showFps, loadMoreThreshold, onSlotChange, gestureConfig, snapConfig, initialMuted, onAutoplayBlocked, }: 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;
 
+interface ReelsFeedThumbnailProps {
+    /** Render function for a single item's visual card. */
+    renderThumbnail: (videoData: ContentItem, index: number) => ReactNode;
+    /** Click handler — receives the item id, full data, and index in the feed. */
+    onThumbnailClick?: (id: string, videoData: ContentItem, index: number) => void;
+    /** Rendered when the feed is loading and has zero items yet. */
+    renderLoading?: () => ReactNode;
+    /** Rendered when the feed has loaded but is empty. */
+    renderEmpty?: () => ReactNode;
+    /** Rendered when the feed fails with no items — receives a retry callback. */
+    renderError?: (error: {
+        message: string;
+        retry: () => void;
+    }) => ReactNode;
+    /** Outer wrapper className. Defaults to `grid grid-cols-2 gap-3`. */
+    className?: string;
+    /** If the host wants to render its own wrapper, pass `false`. Default: true. */
+    wrap?: boolean;
+    /** Enable click → update focused index on ReelsProvider before host reacts. Default: true. */
+    setFocusOnClick?: boolean;
+    /** Prefetch metadata for this slot on pointer enter. Off by default. */
+    prefetchOnHover?: boolean;
+    /** Key override — useful when host renders multiple lists from the same feed. */
+    getKey?: (item: ContentItem, index: number) => string;
+}
+declare function ReelsFeedThumbnail({ renderThumbnail, onThumbnailClick, renderLoading, renderEmpty, renderError, className, wrap, setFocusOnClick, prefetchOnHover, getKey, }: ReelsFeedThumbnailProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * useHls — React hook for hls.js lifecycle management (3-Tier buffer support)
  *
@@ -875,41 +902,6 @@ interface VideoSlotProps {
 }
 declare function VideoSlot({ item, index, isActive, isPrefetch, isPreloaded, bufferTier, isMuted, onToggleMute, onAutoplayBlocked, showFps, isDragging, renderOverlay, renderActions, renderPauseAction, }: VideoSlotProps): react_jsx_runtime.JSX.Element;
 
-interface ReelsFeedThumbnailProps {
-    /** Render function for a single item's visual card. */
-    renderThumbnail: (videoData: ContentItem, index: number) => ReactNode;
-    /** Click handler — receives the item id, full data, and index in the feed. */
-    onThumbnailClick?: (id: string, videoData: ContentItem, index: number) => void;
-    /** Rendered when the feed is loading and has zero items yet. */
-    renderLoading?: () => ReactNode;
-    /** Rendered when the feed has loaded but is empty. */
-    renderEmpty?: () => ReactNode;
-    /** Rendered when the feed fails with no items — receives a retry callback. */
-    renderError?: (error: {
-        message: string;
-        retry: () => void;
-    }) => ReactNode;
-    /** Outer wrapper className. Defaults to `grid grid-cols-2 gap-3`. */
-    className?: string;
-    /** If the host wants to render its own wrapper, pass `false`. */
-    wrap?: boolean;
-    /**
-     * Update ResourceGovernor's focused index on click so the drawer/feed opens
-     * already pointing at the tapped item.
-     * @default true
-     */
-    setFocusOnClick?: boolean;
-    /**
-     * Prefetch HLS metadata for this slot on `pointerenter`. Off by default;
-     * only useful on hover-capable devices.
-     * @default false
-     */
-    prefetchOnHover?: boolean;
-    /** Key override — useful when host renders multiple lists from the same feed. */
-    getKey?: (item: ContentItem, index: number) => string;
-}
-declare function ReelsFeedThumbnail({ renderThumbnail, onThumbnailClick, renderLoading, renderEmpty, renderError, className, wrap, setFocusOnClick, prefetchOnHover, getKey, }: ReelsFeedThumbnailProps): react_jsx_runtime.JSX.Element | null;
-
 declare function DefaultOverlay({ item }: {
     item: ContentItem;
 }): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -789,6 +789,33 @@ declare function useSDK(): SDKContextValue;
 
 declare function ReelsFeed({ renderOverlay, renderActions, renderPauseAction, renderLoading, renderEmpty, renderError: _renderError, showFps, loadMoreThreshold, onSlotChange, gestureConfig, snapConfig, initialMuted, onAutoplayBlocked, }: 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;
 
+interface ReelsFeedThumbnailProps {
+    /** Render function for a single item's visual card. */
+    renderThumbnail: (videoData: ContentItem, index: number) => ReactNode;
+    /** Click handler — receives the item id, full data, and index in the feed. */
+    onThumbnailClick?: (id: string, videoData: ContentItem, index: number) => void;
+    /** Rendered when the feed is loading and has zero items yet. */
+    renderLoading?: () => ReactNode;
+    /** Rendered when the feed has loaded but is empty. */
+    renderEmpty?: () => ReactNode;
+    /** Rendered when the feed fails with no items — receives a retry callback. */
+    renderError?: (error: {
+        message: string;
+        retry: () => void;
+    }) => ReactNode;
+    /** Outer wrapper className. Defaults to `grid grid-cols-2 gap-3`. */
+    className?: string;
+    /** If the host wants to render its own wrapper, pass `false`. Default: true. */
+    wrap?: boolean;
+    /** Enable click → update focused index on ReelsProvider before host reacts. Default: true. */
+    setFocusOnClick?: boolean;
+    /** Prefetch metadata for this slot on pointer enter. Off by default. */
+    prefetchOnHover?: boolean;
+    /** Key override — useful when host renders multiple lists from the same feed. */
+    getKey?: (item: ContentItem, index: number) => string;
+}
+declare function ReelsFeedThumbnail({ renderThumbnail, onThumbnailClick, renderLoading, renderEmpty, renderError, className, wrap, setFocusOnClick, prefetchOnHover, getKey, }: ReelsFeedThumbnailProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * useHls — React hook for hls.js lifecycle management (3-Tier buffer support)
  *
@@ -875,41 +902,6 @@ interface VideoSlotProps {
 }
 declare function VideoSlot({ item, index, isActive, isPrefetch, isPreloaded, bufferTier, isMuted, onToggleMute, onAutoplayBlocked, showFps, isDragging, renderOverlay, renderActions, renderPauseAction, }: VideoSlotProps): react_jsx_runtime.JSX.Element;
 
-interface ReelsFeedThumbnailProps {
-    /** Render function for a single item's visual card. */
-    renderThumbnail: (videoData: ContentItem, index: number) => ReactNode;
-    /** Click handler — receives the item id, full data, and index in the feed. */
-    onThumbnailClick?: (id: string, videoData: ContentItem, index: number) => void;
-    /** Rendered when the feed is loading and has zero items yet. */
-    renderLoading?: () => ReactNode;
-    /** Rendered when the feed has loaded but is empty. */
-    renderEmpty?: () => ReactNode;
-    /** Rendered when the feed fails with no items — receives a retry callback. */
-    renderError?: (error: {
-        message: string;
-        retry: () => void;
-    }) => ReactNode;
-    /** Outer wrapper className. Defaults to `grid grid-cols-2 gap-3`. */
-    className?: string;
-    /** If the host wants to render its own wrapper, pass `false`. */
-    wrap?: boolean;
-    /**
-     * Update ResourceGovernor's focused index on click so the drawer/feed opens
-     * already pointing at the tapped item.
-     * @default true
-     */
-    setFocusOnClick?: boolean;
-    /**
-     * Prefetch HLS metadata for this slot on `pointerenter`. Off by default;
-     * only useful on hover-capable devices.
-     * @default false
-     */
-    prefetchOnHover?: boolean;
-    /** Key override — useful when host renders multiple lists from the same feed. */
-    getKey?: (item: ContentItem, index: number) => string;
-}
-declare function ReelsFeedThumbnail({ renderThumbnail, onThumbnailClick, renderLoading, renderEmpty, renderError, className, wrap, setFocusOnClick, prefetchOnHover, getKey, }: ReelsFeedThumbnailProps): react_jsx_runtime.JSX.Element | null;
-
 declare function DefaultOverlay({ item }: {
     item: ContentItem;
 }): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -1441,7 +1441,7 @@ function useHls(options) {
       setIsReady(false);
       canPlayFiredRef.current = false;
       currentSrcRef.current = src;
-      const handleCanPlay2 = () => {
+      const handleCanPlay = () => {
         canPlayFiredRef.current = true;
         setIsReady(true);
       };
@@ -1451,10 +1451,10 @@ function useHls(options) {
           setIsReady(true);
         }
       };
-      video.addEventListener("canplay", handleCanPlay2, { once: true });
+      video.addEventListener("canplay", handleCanPlay, { once: true });
       video.addEventListener("loadeddata", handleLoadedData, { once: true });
       return () => {
-        video.removeEventListener("canplay", handleCanPlay2);
+        video.removeEventListener("canplay", handleCanPlay);
         video.removeEventListener("loadeddata", handleLoadedData);
       };
     }
@@ -1464,13 +1464,21 @@ function useHls(options) {
     }
     if (hlsRef.current && currentSrcRef.current === src) {
       if (!canPlayFiredRef.current) {
-        const handleCanPlay2 = () => {
+        if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+          canPlayFiredRef.current = true;
+          setIsReady(true);
+          return void 0;
+        }
+        const handleReady2 = () => {
+          if (canPlayFiredRef.current) return;
           canPlayFiredRef.current = true;
           setIsReady(true);
         };
-        video.addEventListener("canplay", handleCanPlay2, { once: true });
+        video.addEventListener("loadeddata", handleReady2, { once: true });
+        video.addEventListener("canplay", handleReady2, { once: true });
         return () => {
-          video.removeEventListener("canplay", handleCanPlay2);
+          video.removeEventListener("loadeddata", handleReady2);
+          video.removeEventListener("canplay", handleReady2);
         };
       }
       return void 0;
@@ -1507,15 +1515,18 @@ function useHls(options) {
       const mapped = mapHlsError(data);
       onErrorRef.current?.(mapped.code, mapped.message);
     });
-    const handleCanPlay = () => {
+    const handleReady = () => {
+      if (canPlayFiredRef.current) return;
       canPlayFiredRef.current = true;
       setIsReady(true);
     };
-    video.addEventListener("canplay", handleCanPlay, { once: true });
+    video.addEventListener("loadeddata", handleReady, { once: true });
+    video.addEventListener("canplay", handleReady, { once: true });
     hls.attachMedia(video);
     hls.loadSource(src);
     return () => {
-      video.removeEventListener("canplay", handleCanPlay);
+      video.removeEventListener("loadeddata", handleReady);
+      video.removeEventListener("canplay", handleReady);
       if (hlsRef.current === hls) {
         hls.destroy();
         hlsRef.current = null;
@@ -1886,11 +1897,18 @@ function VideoSlotInner({
     };
     if (isActive && !isManuallyPaused) {
       wasActiveRef.current = true;
-      if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+      if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
         attemptPlay();
       } else {
-        onReady = attemptPlay;
-        video.addEventListener("canplay", onReady, { once: true });
+        let consumed = false;
+        const handler = () => {
+          if (consumed) return;
+          consumed = true;
+          attemptPlay();
+        };
+        onReady = handler;
+        video.addEventListener("loadeddata", handler, { once: true });
+        video.addEventListener("canplay", handler, { once: true });
       }
     } else if (isActive && isManuallyPaused) {
       wasActiveRef.current = true;
@@ -1906,7 +1924,10 @@ function VideoSlotInner({
     }
     return () => {
       cancelled = true;
-      if (onReady) video.removeEventListener("canplay", onReady);
+      if (onReady) {
+        video.removeEventListener("loadeddata", onReady);
+        video.removeEventListener("canplay", onReady);
+      }
     };
   }, [isActive, isMuted, hasPlayedAhead, isManuallyPaused, onAutoplayBlocked]);
   useEffect(() => {
@@ -2046,7 +2067,7 @@ function VideoSlotInner({
               inset: 0,
               backgroundImage: `url(${item.poster})`,
               backgroundSize: "cover",
-              backgroundPosition: "center center",
+              backgroundPosition: "center",
               opacity: showPosterOverlay ? 1 : 0,
               transition: "opacity 0.15s ease",
               pointerEvents: "none"
@@ -2493,87 +2514,80 @@ function parsePxTranslateY(el) {
   if (!match || !match[1]) return 0;
   return Number.parseFloat(match[1]);
 }
-var DEFAULT_CLASSNAME = "grid grid-cols-2 gap-3";
-var defaultGetKey = (item) => item.id;
-var buttonResetStyle = {
-  all: "unset",
-  display: "block",
-  cursor: "pointer",
-  width: "100%",
-  boxSizing: "border-box"
-};
 function ReelsFeedThumbnail({
   renderThumbnail,
   onThumbnailClick,
   renderLoading,
   renderEmpty,
   renderError,
-  className = DEFAULT_CLASSNAME,
+  className = "grid grid-cols-2 gap-3",
   wrap = true,
   setFocusOnClick = true,
   prefetchOnHover = false,
-  getKey = defaultGetKey
+  getKey
 }) {
   const { items, loading, error, refresh } = useFeed();
   const { setFocusedIndexImmediate } = useResource();
   const { adapters } = useSDK();
   const prefetchedRef = useRef(/* @__PURE__ */ new Set());
   const handleClick = useCallback(
-    (item, index) => {
+    (id, item, index) => {
       if (setFocusOnClick) {
         setFocusedIndexImmediate(index);
       }
-      onThumbnailClick?.(item.id, item, index);
+      onThumbnailClick?.(id, item, index);
     },
-    [onThumbnailClick, setFocusOnClick, setFocusedIndexImmediate]
+    [setFocusOnClick, setFocusedIndexImmediate, onThumbnailClick]
   );
   const handlePointerEnter = useCallback(
     (item) => {
       if (!prefetchOnHover) return;
       if (!isVideoItem(item)) return;
       if (item.source.type !== "hls") return;
-      if (prefetchedRef.current.has(item.id)) return;
-      const loader = adapters.videoLoader;
-      if (!loader?.preloadMetadata) return;
-      if (loader.isPreloaded(item.id)) {
-        prefetchedRef.current.add(item.id);
-        return;
-      }
-      loader.preloadMetadata(item.source.url);
-      prefetchedRef.current.add(item.id);
+      const url = item.source.url;
+      if (prefetchedRef.current.has(url)) return;
+      prefetchedRef.current.add(url);
+      adapters.videoLoader?.preloadMetadata?.(url);
     },
     [prefetchOnHover, adapters.videoLoader]
   );
-  const children = useMemo(
-    () => items.map((item, index) => {
-      const key = getKey(item, index);
-      const onEnter = prefetchOnHover ? (_e) => handlePointerEnter(item) : void 0;
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          style: buttonResetStyle,
-          "data-thumbnail-index": index,
-          "data-thumbnail-id": item.id,
-          onClick: () => handleClick(item, index),
-          onPointerEnter: onEnter,
-          children: renderThumbnail(item, index)
-        },
-        key
-      );
-    }),
-    [items, getKey, prefetchOnHover, handlePointerEnter, handleClick, renderThumbnail]
-  );
-  if (items.length === 0) {
-    if (loading && renderLoading) return /* @__PURE__ */ jsx(Fragment, { children: renderLoading() });
-    if (error && renderError) {
+  if (loading && items.length === 0) {
+    if (renderLoading) return /* @__PURE__ */ jsx(Fragment, { children: renderLoading() });
+    return null;
+  }
+  if (error && items.length === 0) {
+    if (renderError) {
       return /* @__PURE__ */ jsx(Fragment, { children: renderError({ message: error.message, retry: refresh }) });
     }
-    if (!loading && !error && renderEmpty) return /* @__PURE__ */ jsx(Fragment, { children: renderEmpty() });
     return null;
   }
-  if (!wrap) return /* @__PURE__ */ jsx(Fragment, { children });
-  return /* @__PURE__ */ jsx("div", { className, children });
+  if (!loading && items.length === 0) {
+    if (renderEmpty) return /* @__PURE__ */ jsx(Fragment, { children: renderEmpty() });
+    return null;
+  }
+  const content = items.map((item, index) => {
+    const key = getKey ? getKey(item, index) : item.id;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => handleClick(item.id, item, index),
+        onPointerEnter: () => handlePointerEnter(item),
+        style: {
+          all: "unset",
+          cursor: "pointer",
+          display: "block",
+          width: "100%"
+        },
+        children: renderThumbnail(item, index)
+      },
+      key
+    );
+  });
+  if (!wrap) {
+    return /* @__PURE__ */ jsx(Fragment, { children: content });
+  }
+  return /* @__PURE__ */ jsx("div", { className, children: content });
 }
 function usePlayerSelector(selector) {
   const { playerEngine } = useSDK();
@@ -2995,12 +3009,16 @@ function transformVideoItem(raw) {
   const stats = transformStats(obj);
   const interaction = transformInteraction(obj);
   let poster;
-  let duration = 0;
-  const mediaArr = obj["media"];
-  if (Array.isArray(mediaArr) && mediaArr.length > 0) {
-    const first = mediaArr[0];
-    poster = toStr(first["poster"], "") || void 0;
-    duration = toNum(first["duration"], 0);
+  const thumbnailObj = obj["thumbnail"];
+  if (thumbnailObj && thumbnailObj["url"]) {
+    poster = toStr(thumbnailObj["url"], "") || void 0;
+  }
+  if (!poster) {
+    const mediaArr2 = obj["media"];
+    if (Array.isArray(mediaArr2) && mediaArr2.length > 0) {
+      const first = mediaArr2[0];
+      poster = toStr(first["poster"], "") || void 0;
+    }
   }
   if (!poster) {
     poster = toStr(
@@ -3008,11 +3026,11 @@ function transformVideoItem(raw) {
       void 0
     ) || void 0;
   }
-  if (!poster) {
-    const thumbnailObj = obj["thumbnail"];
-    if (thumbnailObj && thumbnailObj["url"]) {
-      poster = toStr(thumbnailObj["url"], "") || void 0;
-    }
+  let duration = 0;
+  const mediaArr = obj["media"];
+  if (Array.isArray(mediaArr) && mediaArr.length > 0) {
+    const first = mediaArr[0];
+    duration = toNum(first["duration"], 0);
   }
   if (duration === 0) {
     duration = toNum(tryFields(obj, "duration", "duration_seconds", "length", "video_duration"), 0);

package/package.json

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