@xhub-reels/sdk 0.2.16 → 0.2.18

package/dist/index.cjs

@@ -1267,7 +1267,7 @@ function usePointerGesture(config = {}) {
   };
 }
 function useSnapAnimation(config = {}) {
-  const { duration = 280, easing = "cubic-bezier(0.25, 0.46, 0.45, 0.94)" } = config;
+  const { duration = 280, easing = "ease-out" } = config;
   const activeAnimations = react.useRef([]);
   const cancelAnimation = react.useCallback(() => {
     for (const anim of activeAnimations.current) {
@@ -2112,42 +2112,6 @@ function VideoSlotInner({
     }
   }, [mp4Src, isActive, isPrefetch, isPreloaded, isHlsSource]);
   const isReady = isHlsSource ? hlsReady : mp4Ready;
-  const [capturedPoster, setCapturedPoster] = react.useState(null);
-  react.useEffect(() => {
-    const video = videoRef.current;
-    if (!video || !shouldLoadSrc) return;
-    let cancelled = false;
-    const captureFrame = () => {
-      if (cancelled) return;
-      if (video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) return;
-      if (video.videoWidth === 0 || video.videoHeight === 0) return;
-      try {
-        const canvas = document.createElement("canvas");
-        canvas.width = video.videoWidth;
-        canvas.height = video.videoHeight;
-        const ctx = canvas.getContext("2d");
-        if (!ctx) return;
-        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-        const dataUrl = canvas.toDataURL("image/webp", 0.85);
-        if (!cancelled) {
-          setCapturedPoster(dataUrl);
-        }
-      } catch {
-      }
-    };
-    if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && video.videoWidth > 0) {
-      captureFrame();
-    } else {
-      video.addEventListener("loadeddata", captureFrame, { once: true });
-    }
-    return () => {
-      cancelled = true;
-      video.removeEventListener("loadeddata", captureFrame);
-    };
-  }, [src, shouldLoadSrc]);
-  react.useEffect(() => {
-    setCapturedPoster(null);
-  }, [src]);
   const [isVideoPlaying, setIsVideoPlaying] = react.useState(false);
   react.useEffect(() => {
     const video = videoRef.current;
@@ -2408,13 +2372,13 @@ function VideoSlotInner({
             }
           }
         ),
-        (capturedPoster || item.poster) && !isPreDecoded && /* @__PURE__ */ jsxRuntime.jsx(
+        item.poster && !isPreDecoded && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             style: {
               position: "absolute",
               inset: 0,
-              backgroundImage: `url(${capturedPoster || item.poster})`,
+              backgroundImage: `url(${item.poster})`,
               backgroundSize: "cover",
               backgroundPosition: "center",
               opacity: showPosterOverlay ? 1 : 0,
@@ -2584,7 +2548,7 @@ function ReelsFeed({
   activeIndexRef.current = focusedIndex;
   const { animateSnap, animateBounceBack, cancelAnimation } = useSnapAnimation({
     duration: snapConfig?.duration ?? 260,
-    easing: snapConfig?.easing ?? "cubic-bezier(0.25, 0.46, 0.45, 0.94)"
+    easing: snapConfig?.easing ?? "ease-out"
   });
   react.useEffect(() => {
     loadInitial();
@@ -3070,7 +3034,8 @@ function ReelsModal({
     if (prewarmedRef.current === openIndex) return;
     prewarmedRef.current = openIndex;
     setFocusedIndexImmediate(openIndex);
-    const preload = adapters.videoLoader?.preloadMetadata;
+    const loader = adapters.videoLoader;
+    const preload = loader?.preloadMetadata?.bind(loader);
     if (!preload) return;
     const targets = /* @__PURE__ */ new Set();
     targets.add(openIndex);
@@ -3163,12 +3128,12 @@ function ReelsModal({
         const panel = panelRef.current;
         if (!panel) return;
         const first = panel.querySelector(FOCUSABLE);
-        (first ?? panel).focus();
+        (first ?? panel).focus({ preventScroll: true });
       });
       return () => cancelAnimationFrame(id);
     }
     if (phase === "closed") {
-      previouslyFocusedRef.current?.focus?.();
+      previouslyFocusedRef.current?.focus?.({ preventScroll: true });
       previouslyFocusedRef.current = null;
     }
     return void 0;
@@ -3926,6 +3891,109 @@ var HttpError = class extends Error {
   }
 };
 
+// src/adapters/browser/BrowserVideoLoader.ts
+var BrowserVideoLoader = class {
+  constructor(config = {}) {
+    this.statusById = /* @__PURE__ */ new Map();
+    this.controllers = /* @__PURE__ */ new Map();
+    /** URLs already warmed via preloadMetadata — dedupes fire-and-forget calls. */
+    this.warmedUrls = /* @__PURE__ */ new Set();
+    this.timeoutMs = config.timeoutMs ?? 8e3;
+    this.mp4PrefetchBytes = config.mp4PrefetchBytes ?? 512 * 1024;
+    this.headers = config.headers ?? {};
+    this.logger = config.logger;
+  }
+  async preload(videoId, url, signal) {
+    if (typeof fetch === "undefined") {
+      return { videoId, status: "idle" };
+    }
+    if (this.statusById.get(videoId) === "loaded") {
+      return { videoId, status: "loaded" };
+    }
+    this.cancel(videoId);
+    const controller = new AbortController();
+    this.controllers.set(videoId, controller);
+    this.statusById.set(videoId, "loading");
+    const onAbort = () => controller.abort();
+    signal?.addEventListener("abort", onAbort);
+    const timer = setTimeout(() => controller.abort(), this.timeoutMs);
+    const isHls = url.includes(".m3u8");
+    const requestHeaders = { ...this.headers };
+    if (!isHls && this.mp4PrefetchBytes > 0) {
+      requestHeaders["Range"] = `bytes=0-${this.mp4PrefetchBytes - 1}`;
+    }
+    try {
+      const res = await fetch(url, {
+        method: "GET",
+        signal: controller.signal,
+        headers: requestHeaders
+      });
+      if (!res.ok && res.status !== 206) {
+        throw new Error(`HTTP ${res.status}`);
+      }
+      const buf = await res.arrayBuffer();
+      this.statusById.set(videoId, "loaded");
+      this.warmedUrls.add(url);
+      return { videoId, status: "loaded", loadedBytes: buf.byteLength };
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      if (error.name === "AbortError") {
+        this.statusById.set(videoId, "idle");
+        return { videoId, status: "idle", error };
+      }
+      this.statusById.set(videoId, "error");
+      this.logger?.warn(`[BrowserVideoLoader] preload failed for ${videoId}`, error.message);
+      return { videoId, status: "error", error };
+    } finally {
+      clearTimeout(timer);
+      signal?.removeEventListener("abort", onAbort);
+      this.controllers.delete(videoId);
+    }
+  }
+  cancel(videoId) {
+    const controller = this.controllers.get(videoId);
+    if (controller) {
+      controller.abort();
+      this.controllers.delete(videoId);
+    }
+    if (this.statusById.get(videoId) === "loading") {
+      this.statusById.set(videoId, "idle");
+    }
+  }
+  isPreloaded(videoId) {
+    return this.statusById.get(videoId) === "loaded";
+  }
+  getPreloadStatus(videoId) {
+    return this.statusById.get(videoId) ?? "idle";
+  }
+  clearAll() {
+    for (const controller of this.controllers.values()) {
+      controller.abort();
+    }
+    this.controllers.clear();
+    this.statusById.clear();
+    this.warmedUrls.clear();
+  }
+  /**
+   * Tier-4 cold prefetch. Fire-and-forget GET that warms the HTTP cache.
+   * No DOM, no segment download, never throws. Deduped per-URL.
+   */
+  preloadMetadata(url) {
+    if (typeof fetch === "undefined") return;
+    if (!url || this.warmedUrls.has(url)) return;
+    this.warmedUrls.add(url);
+    const isHls = url.includes(".m3u8");
+    const headers = { ...this.headers };
+    if (!isHls) {
+      headers["Range"] = "bytes=0-0";
+    }
+    void fetch(url, { method: "GET", headers }).catch(() => {
+      this.warmedUrls.delete(url);
+    });
+  }
+};
+
+exports.BrowserVideoLoader = BrowserVideoLoader;
 exports.DEFAULT_FEED_CONFIG = DEFAULT_FEED_CONFIG;
 exports.DEFAULT_NAVIGATION_CONFIG = DEFAULT_NAVIGATION_CONFIG;
 exports.DEFAULT_PLAYER_CONFIG = DEFAULT_PLAYER_CONFIG;

package/dist/index.d.cts

@@ -858,7 +858,7 @@ declare function usePointerGesture(config?: PointerGestureConfig): {
 interface SnapAnimationConfig {
     /** Duration in ms (default: 280) */
     duration?: number;
-    /** CSS easing (default: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)') */
+    /** CSS easing (default: 'ease-out') */
     easing?: string;
 }
 interface SnapTarget {
@@ -1423,4 +1423,62 @@ 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_NAVIGATION_CONFIG, DEFAULT_PLAYER_CONFIG, DEFAULT_RESOURCE_CONFIG, DefaultActions, DefaultOverlay, DefaultPauseAction, 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 NavigationConfig, NavigationManager, type NavigationPhase, type NavigationState, type NetworkType, OptimisticManager, type PauseSlotActions, type PlayerConfig, PlayerEngine, type PlayerError, type PlayerEvent, type PlayerEventListener, type PlayerState, PlayerStatus, type PointerGestureConfig, type PreloadResult, type PreloadStatus, ReelsFeed, type ReelsFeedProps, ReelsFeedThumbnail, type ReelsFeedThumbnailProps, ReelsModal, type ReelsModalAnimationConfig, type ReelsModalProps, type ReelsModalRenderState, 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, isValidNavTransition, isValidTransition, isVideoItem, useFeed, useFeedSelector, useHls, useNavigation, useNavigationSelector, usePlayer, usePlayerSelector, usePointerGesture, useResource, useResourceSelector, useSDK, useSnapAnimation };
+/**
+ * BrowserVideoLoader — IVideoLoader implementation for browsers / WebViews.
+ *
+ * Warms the HTTP browser cache so hls.js / <video> can start from cache instead
+ * of hitting the network cold on mount. This is what closes the "poster stuck
+ * ~3s" stall: both the modal-owned prewarm path (ReelsModal `opening` phase) and
+ * the ResourceGovernor Tier-4 cold prefetch call `videoLoader?.preloadMetadata`.
+ * That method is OPTIONAL on IVideoLoader, so if no loader implements it the
+ * entire prewarm path is silently a no-op. This adapter implements it.
+ *
+ * Strategy:
+ *  - `preloadMetadata(url)` — fire-and-forget GET of the HLS manifest (or mp4
+ *    head via `Range: bytes=0-0`) into the HTTP cache. No DOM, no segment
+ *    download, never throws. Deduped per-URL so repeated taps are cheap.
+ *  - `preload(videoId, url, signal?)` — awaitable warm with state tracking and
+ *    cancellation; resolves to a PreloadResult. For progressive mp4 it fetches
+ *    only the first `mp4PrefetchBytes` via a Range request.
+ *
+ * SSR-safe: when `fetch` is unavailable (server render) every method degrades to
+ * a no-op rather than throwing.
+ */
+
+interface BrowserVideoLoaderConfig {
+    /** Abort an in-flight {@link BrowserVideoLoader.preload} after this many ms (default: 8000). */
+    timeoutMs?: number;
+    /**
+     * For progressive mp4 sources, fetch only the first N bytes via a Range
+     * request to warm the cache without downloading the whole file.
+     * Set to 0 to fetch the full file. Default: 524288 (512 KB).
+     */
+    mp4PrefetchBytes?: number;
+    /** Static headers attached to every warm request (e.g. auth). */
+    headers?: Record<string, string>;
+    /** Optional logger for warm failures. */
+    logger?: ILogger;
+}
+declare class BrowserVideoLoader implements IVideoLoader {
+    private readonly timeoutMs;
+    private readonly mp4PrefetchBytes;
+    private readonly headers;
+    private readonly logger?;
+    private readonly statusById;
+    private readonly controllers;
+    /** URLs already warmed via preloadMetadata — dedupes fire-and-forget calls. */
+    private readonly warmedUrls;
+    constructor(config?: BrowserVideoLoaderConfig);
+    preload(videoId: string, url: string, signal?: AbortSignal): Promise<PreloadResult>;
+    cancel(videoId: string): void;
+    isPreloaded(videoId: string): boolean;
+    getPreloadStatus(videoId: string): PreloadStatus;
+    clearAll(): void;
+    /**
+     * Tier-4 cold prefetch. Fire-and-forget GET that warms the HTTP cache.
+     * No DOM, no segment download, never throws. Deduped per-URL.
+     */
+    preloadMetadata(url: string): void;
+}
+
+export { type Article, type ArticleImage, type Author, BrowserVideoLoader, type BrowserVideoLoaderConfig, type BufferTier, type CommentItem, type CommentPage, type ContentItem, type ContentStats, DEFAULT_FEED_CONFIG, DEFAULT_NAVIGATION_CONFIG, DEFAULT_PLAYER_CONFIG, DEFAULT_RESOURCE_CONFIG, DefaultActions, DefaultOverlay, DefaultPauseAction, 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 NavigationConfig, NavigationManager, type NavigationPhase, type NavigationState, type NetworkType, OptimisticManager, type PauseSlotActions, type PlayerConfig, PlayerEngine, type PlayerError, type PlayerEvent, type PlayerEventListener, type PlayerState, PlayerStatus, type PointerGestureConfig, type PreloadResult, type PreloadStatus, ReelsFeed, type ReelsFeedProps, ReelsFeedThumbnail, type ReelsFeedThumbnailProps, ReelsModal, type ReelsModalAnimationConfig, type ReelsModalProps, type ReelsModalRenderState, 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, isValidNavTransition, isValidTransition, isVideoItem, useFeed, useFeedSelector, useHls, useNavigation, useNavigationSelector, usePlayer, usePlayerSelector, usePointerGesture, useResource, useResourceSelector, useSDK, useSnapAnimation };

package/dist/index.d.ts

@@ -858,7 +858,7 @@ declare function usePointerGesture(config?: PointerGestureConfig): {
 interface SnapAnimationConfig {
     /** Duration in ms (default: 280) */
     duration?: number;
-    /** CSS easing (default: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)') */
+    /** CSS easing (default: 'ease-out') */
     easing?: string;
 }
 interface SnapTarget {
@@ -1423,4 +1423,62 @@ 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_NAVIGATION_CONFIG, DEFAULT_PLAYER_CONFIG, DEFAULT_RESOURCE_CONFIG, DefaultActions, DefaultOverlay, DefaultPauseAction, 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 NavigationConfig, NavigationManager, type NavigationPhase, type NavigationState, type NetworkType, OptimisticManager, type PauseSlotActions, type PlayerConfig, PlayerEngine, type PlayerError, type PlayerEvent, type PlayerEventListener, type PlayerState, PlayerStatus, type PointerGestureConfig, type PreloadResult, type PreloadStatus, ReelsFeed, type ReelsFeedProps, ReelsFeedThumbnail, type ReelsFeedThumbnailProps, ReelsModal, type ReelsModalAnimationConfig, type ReelsModalProps, type ReelsModalRenderState, 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, isValidNavTransition, isValidTransition, isVideoItem, useFeed, useFeedSelector, useHls, useNavigation, useNavigationSelector, usePlayer, usePlayerSelector, usePointerGesture, useResource, useResourceSelector, useSDK, useSnapAnimation };
+/**
+ * BrowserVideoLoader — IVideoLoader implementation for browsers / WebViews.
+ *
+ * Warms the HTTP browser cache so hls.js / <video> can start from cache instead
+ * of hitting the network cold on mount. This is what closes the "poster stuck
+ * ~3s" stall: both the modal-owned prewarm path (ReelsModal `opening` phase) and
+ * the ResourceGovernor Tier-4 cold prefetch call `videoLoader?.preloadMetadata`.
+ * That method is OPTIONAL on IVideoLoader, so if no loader implements it the
+ * entire prewarm path is silently a no-op. This adapter implements it.
+ *
+ * Strategy:
+ *  - `preloadMetadata(url)` — fire-and-forget GET of the HLS manifest (or mp4
+ *    head via `Range: bytes=0-0`) into the HTTP cache. No DOM, no segment
+ *    download, never throws. Deduped per-URL so repeated taps are cheap.
+ *  - `preload(videoId, url, signal?)` — awaitable warm with state tracking and
+ *    cancellation; resolves to a PreloadResult. For progressive mp4 it fetches
+ *    only the first `mp4PrefetchBytes` via a Range request.
+ *
+ * SSR-safe: when `fetch` is unavailable (server render) every method degrades to
+ * a no-op rather than throwing.
+ */
+
+interface BrowserVideoLoaderConfig {
+    /** Abort an in-flight {@link BrowserVideoLoader.preload} after this many ms (default: 8000). */
+    timeoutMs?: number;
+    /**
+     * For progressive mp4 sources, fetch only the first N bytes via a Range
+     * request to warm the cache without downloading the whole file.
+     * Set to 0 to fetch the full file. Default: 524288 (512 KB).
+     */
+    mp4PrefetchBytes?: number;
+    /** Static headers attached to every warm request (e.g. auth). */
+    headers?: Record<string, string>;
+    /** Optional logger for warm failures. */
+    logger?: ILogger;
+}
+declare class BrowserVideoLoader implements IVideoLoader {
+    private readonly timeoutMs;
+    private readonly mp4PrefetchBytes;
+    private readonly headers;
+    private readonly logger?;
+    private readonly statusById;
+    private readonly controllers;
+    /** URLs already warmed via preloadMetadata — dedupes fire-and-forget calls. */
+    private readonly warmedUrls;
+    constructor(config?: BrowserVideoLoaderConfig);
+    preload(videoId: string, url: string, signal?: AbortSignal): Promise<PreloadResult>;
+    cancel(videoId: string): void;
+    isPreloaded(videoId: string): boolean;
+    getPreloadStatus(videoId: string): PreloadStatus;
+    clearAll(): void;
+    /**
+     * Tier-4 cold prefetch. Fire-and-forget GET that warms the HTTP cache.
+     * No DOM, no segment download, never throws. Deduped per-URL.
+     */
+    preloadMetadata(url: string): void;
+}
+
+export { type Article, type ArticleImage, type Author, BrowserVideoLoader, type BrowserVideoLoaderConfig, type BufferTier, type CommentItem, type CommentPage, type ContentItem, type ContentStats, DEFAULT_FEED_CONFIG, DEFAULT_NAVIGATION_CONFIG, DEFAULT_PLAYER_CONFIG, DEFAULT_RESOURCE_CONFIG, DefaultActions, DefaultOverlay, DefaultPauseAction, 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 NavigationConfig, NavigationManager, type NavigationPhase, type NavigationState, type NetworkType, OptimisticManager, type PauseSlotActions, type PlayerConfig, PlayerEngine, type PlayerError, type PlayerEvent, type PlayerEventListener, type PlayerState, PlayerStatus, type PointerGestureConfig, type PreloadResult, type PreloadStatus, ReelsFeed, type ReelsFeedProps, ReelsFeedThumbnail, type ReelsFeedThumbnailProps, ReelsModal, type ReelsModalAnimationConfig, type ReelsModalProps, type ReelsModalRenderState, 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, isValidNavTransition, isValidTransition, isVideoItem, useFeed, useFeedSelector, useHls, useNavigation, useNavigationSelector, usePlayer, usePlayerSelector, usePointerGesture, useResource, useResourceSelector, useSDK, useSnapAnimation };

package/dist/index.js

@@ -1261,7 +1261,7 @@ function usePointerGesture(config = {}) {
   };
 }
 function useSnapAnimation(config = {}) {
-  const { duration = 280, easing = "cubic-bezier(0.25, 0.46, 0.45, 0.94)" } = config;
+  const { duration = 280, easing = "ease-out" } = config;
   const activeAnimations = useRef([]);
   const cancelAnimation = useCallback(() => {
     for (const anim of activeAnimations.current) {
@@ -2106,42 +2106,6 @@ function VideoSlotInner({
     }
   }, [mp4Src, isActive, isPrefetch, isPreloaded, isHlsSource]);
   const isReady = isHlsSource ? hlsReady : mp4Ready;
-  const [capturedPoster, setCapturedPoster] = useState(null);
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video || !shouldLoadSrc) return;
-    let cancelled = false;
-    const captureFrame = () => {
-      if (cancelled) return;
-      if (video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) return;
-      if (video.videoWidth === 0 || video.videoHeight === 0) return;
-      try {
-        const canvas = document.createElement("canvas");
-        canvas.width = video.videoWidth;
-        canvas.height = video.videoHeight;
-        const ctx = canvas.getContext("2d");
-        if (!ctx) return;
-        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-        const dataUrl = canvas.toDataURL("image/webp", 0.85);
-        if (!cancelled) {
-          setCapturedPoster(dataUrl);
-        }
-      } catch {
-      }
-    };
-    if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && video.videoWidth > 0) {
-      captureFrame();
-    } else {
-      video.addEventListener("loadeddata", captureFrame, { once: true });
-    }
-    return () => {
-      cancelled = true;
-      video.removeEventListener("loadeddata", captureFrame);
-    };
-  }, [src, shouldLoadSrc]);
-  useEffect(() => {
-    setCapturedPoster(null);
-  }, [src]);
   const [isVideoPlaying, setIsVideoPlaying] = useState(false);
   useEffect(() => {
     const video = videoRef.current;
@@ -2402,13 +2366,13 @@ function VideoSlotInner({
             }
           }
         ),
-        (capturedPoster || item.poster) && !isPreDecoded && /* @__PURE__ */ jsx(
+        item.poster && !isPreDecoded && /* @__PURE__ */ jsx(
           "div",
           {
             style: {
               position: "absolute",
               inset: 0,
-              backgroundImage: `url(${capturedPoster || item.poster})`,
+              backgroundImage: `url(${item.poster})`,
               backgroundSize: "cover",
               backgroundPosition: "center",
               opacity: showPosterOverlay ? 1 : 0,
@@ -2578,7 +2542,7 @@ function ReelsFeed({
   activeIndexRef.current = focusedIndex;
   const { animateSnap, animateBounceBack, cancelAnimation } = useSnapAnimation({
     duration: snapConfig?.duration ?? 260,
-    easing: snapConfig?.easing ?? "cubic-bezier(0.25, 0.46, 0.45, 0.94)"
+    easing: snapConfig?.easing ?? "ease-out"
   });
   useEffect(() => {
     loadInitial();
@@ -3064,7 +3028,8 @@ function ReelsModal({
     if (prewarmedRef.current === openIndex) return;
     prewarmedRef.current = openIndex;
     setFocusedIndexImmediate(openIndex);
-    const preload = adapters.videoLoader?.preloadMetadata;
+    const loader = adapters.videoLoader;
+    const preload = loader?.preloadMetadata?.bind(loader);
     if (!preload) return;
     const targets = /* @__PURE__ */ new Set();
     targets.add(openIndex);
@@ -3157,12 +3122,12 @@ function ReelsModal({
         const panel = panelRef.current;
         if (!panel) return;
         const first = panel.querySelector(FOCUSABLE);
-        (first ?? panel).focus();
+        (first ?? panel).focus({ preventScroll: true });
       });
       return () => cancelAnimationFrame(id);
     }
     if (phase === "closed") {
-      previouslyFocusedRef.current?.focus?.();
+      previouslyFocusedRef.current?.focus?.({ preventScroll: true });
       previouslyFocusedRef.current = null;
     }
     return void 0;
@@ -3920,4 +3885,106 @@ var HttpError = class extends Error {
   }
 };
 
-export { DEFAULT_FEED_CONFIG, DEFAULT_NAVIGATION_CONFIG, DEFAULT_PLAYER_CONFIG, DEFAULT_RESOURCE_CONFIG, DefaultActions, DefaultOverlay, DefaultPauseAction, DefaultSkeleton, FeedManager, HttpDataSource, HttpError, MockAnalytics, MockCommentAdapter, MockDataSource, MockInteraction, MockLogger, MockNetworkAdapter, MockSessionStorage, MockVideoLoader, NavigationManager, OptimisticManager, PlayerEngine, PlayerStatus, ReelsFeed, ReelsFeedThumbnail, ReelsModal, ReelsProvider, ResourceGovernor, VALID_TRANSITIONS, VideoSlot, canPause, canPlay, canSeek, isArticle, isValidNavTransition, isValidTransition, isVideoItem, useFeed, useFeedSelector, useHls, useNavigation, useNavigationSelector, usePlayer, usePlayerSelector, usePointerGesture, useResource, useResourceSelector, useSDK, useSnapAnimation };
+// src/adapters/browser/BrowserVideoLoader.ts
+var BrowserVideoLoader = class {
+  constructor(config = {}) {
+    this.statusById = /* @__PURE__ */ new Map();
+    this.controllers = /* @__PURE__ */ new Map();
+    /** URLs already warmed via preloadMetadata — dedupes fire-and-forget calls. */
+    this.warmedUrls = /* @__PURE__ */ new Set();
+    this.timeoutMs = config.timeoutMs ?? 8e3;
+    this.mp4PrefetchBytes = config.mp4PrefetchBytes ?? 512 * 1024;
+    this.headers = config.headers ?? {};
+    this.logger = config.logger;
+  }
+  async preload(videoId, url, signal) {
+    if (typeof fetch === "undefined") {
+      return { videoId, status: "idle" };
+    }
+    if (this.statusById.get(videoId) === "loaded") {
+      return { videoId, status: "loaded" };
+    }
+    this.cancel(videoId);
+    const controller = new AbortController();
+    this.controllers.set(videoId, controller);
+    this.statusById.set(videoId, "loading");
+    const onAbort = () => controller.abort();
+    signal?.addEventListener("abort", onAbort);
+    const timer = setTimeout(() => controller.abort(), this.timeoutMs);
+    const isHls = url.includes(".m3u8");
+    const requestHeaders = { ...this.headers };
+    if (!isHls && this.mp4PrefetchBytes > 0) {
+      requestHeaders["Range"] = `bytes=0-${this.mp4PrefetchBytes - 1}`;
+    }
+    try {
+      const res = await fetch(url, {
+        method: "GET",
+        signal: controller.signal,
+        headers: requestHeaders
+      });
+      if (!res.ok && res.status !== 206) {
+        throw new Error(`HTTP ${res.status}`);
+      }
+      const buf = await res.arrayBuffer();
+      this.statusById.set(videoId, "loaded");
+      this.warmedUrls.add(url);
+      return { videoId, status: "loaded", loadedBytes: buf.byteLength };
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      if (error.name === "AbortError") {
+        this.statusById.set(videoId, "idle");
+        return { videoId, status: "idle", error };
+      }
+      this.statusById.set(videoId, "error");
+      this.logger?.warn(`[BrowserVideoLoader] preload failed for ${videoId}`, error.message);
+      return { videoId, status: "error", error };
+    } finally {
+      clearTimeout(timer);
+      signal?.removeEventListener("abort", onAbort);
+      this.controllers.delete(videoId);
+    }
+  }
+  cancel(videoId) {
+    const controller = this.controllers.get(videoId);
+    if (controller) {
+      controller.abort();
+      this.controllers.delete(videoId);
+    }
+    if (this.statusById.get(videoId) === "loading") {
+      this.statusById.set(videoId, "idle");
+    }
+  }
+  isPreloaded(videoId) {
+    return this.statusById.get(videoId) === "loaded";
+  }
+  getPreloadStatus(videoId) {
+    return this.statusById.get(videoId) ?? "idle";
+  }
+  clearAll() {
+    for (const controller of this.controllers.values()) {
+      controller.abort();
+    }
+    this.controllers.clear();
+    this.statusById.clear();
+    this.warmedUrls.clear();
+  }
+  /**
+   * Tier-4 cold prefetch. Fire-and-forget GET that warms the HTTP cache.
+   * No DOM, no segment download, never throws. Deduped per-URL.
+   */
+  preloadMetadata(url) {
+    if (typeof fetch === "undefined") return;
+    if (!url || this.warmedUrls.has(url)) return;
+    this.warmedUrls.add(url);
+    const isHls = url.includes(".m3u8");
+    const headers = { ...this.headers };
+    if (!isHls) {
+      headers["Range"] = "bytes=0-0";
+    }
+    void fetch(url, { method: "GET", headers }).catch(() => {
+      this.warmedUrls.delete(url);
+    });
+  }
+};
+
+export { BrowserVideoLoader, DEFAULT_FEED_CONFIG, DEFAULT_NAVIGATION_CONFIG, DEFAULT_PLAYER_CONFIG, DEFAULT_RESOURCE_CONFIG, DefaultActions, DefaultOverlay, DefaultPauseAction, DefaultSkeleton, FeedManager, HttpDataSource, HttpError, MockAnalytics, MockCommentAdapter, MockDataSource, MockInteraction, MockLogger, MockNetworkAdapter, MockSessionStorage, MockVideoLoader, NavigationManager, OptimisticManager, PlayerEngine, PlayerStatus, ReelsFeed, ReelsFeedThumbnail, ReelsModal, ReelsProvider, ResourceGovernor, VALID_TRANSITIONS, VideoSlot, canPause, canPlay, canSeek, isArticle, isValidNavTransition, isValidTransition, isVideoItem, useFeed, useFeedSelector, useHls, useNavigation, useNavigationSelector, usePlayer, usePlayerSelector, usePointerGesture, useResource, useResourceSelector, useSDK, useSnapAnimation };

package/package.json

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