@xhub-reel/feed 0.2.2 → 0.2.3

package/dist/index.js

@@ -4,8 +4,10 @@ var react = require('react');
 var core = require('@xhub-reel/core');
 var gestures = require('@xhub-reel/gestures');
 var player = require('@xhub-reel/player');
+var playerEngine = require('@xhub-reel/player-engine');
 var jsxRuntime = require('react/jsx-runtime');
 var api = require('@xhub-reel/core/api');
+var ui = require('@xhub-reel/ui');
 var reactQuery = require('@tanstack/react-query');
 
 // src/components/VideoFeed.tsx
@@ -26,8 +28,9 @@ var videoFeedItemStyles = {
   placeholder: {
     position: "absolute",
     inset: 0,
-    backgroundSize: "cover",
-    backgroundPosition: "center"
+    backgroundSize: "contain",
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat"
   },
   // Tap area for play/pause
   tapArea: {
@@ -612,6 +615,7 @@ function useVideoFeedItemState({
   return {
     video,
     isActive,
+    priority,
     shouldRenderVideo,
     preload,
     isPreloaded,
@@ -638,9 +642,245 @@ function useVideoFeedItemState({
     handleSeekEnd
   };
 }
+var VideoEnginePoolContext = react.createContext(null);
+function VideoEnginePoolProvider({
+  children,
+  options,
+  config,
+  forceHLSJS,
+  onSlotStateChange,
+  onError,
+  onFirstFrameReady
+}) {
+  const poolRef = react.useRef(null);
+  const [isReady, setIsReady] = react.useState(false);
+  const isClient = typeof window !== "undefined";
+  react.useEffect(() => {
+    if (!poolRef.current && isClient) {
+      poolRef.current = playerEngine.createVideoEnginePool({
+        ...options,
+        config,
+        forceHLSJS,
+        onSlotStateChange,
+        onError,
+        onFirstFrameReady
+      });
+      setIsReady(true);
+      console.log("[VideoEnginePoolProvider] Pool created and ready");
+    }
+    return () => {
+      poolRef.current?.destroy();
+      poolRef.current = null;
+      setIsReady(false);
+    };
+  }, []);
+  const getPool = react.useCallback(() => {
+    return poolRef.current;
+  }, []);
+  const contextValue = react.useMemo(
+    () => ({
+      pool: poolRef.current,
+      isReady,
+      getPool
+    }),
+    [isReady, getPool]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(VideoEnginePoolContext.Provider, { value: contextValue, children });
+}
+function useVideoEnginePool() {
+  const context = react.useContext(VideoEnginePoolContext);
+  if (!context) {
+    throw new Error(
+      "[useVideoEnginePool] Must be used within a VideoEnginePoolProvider. Wrap your feed component with <VideoEnginePoolProvider>."
+    );
+  }
+  return context.pool;
+}
+function useVideoEnginePoolOptional() {
+  const context = react.useContext(VideoEnginePoolContext);
+  return context?.pool ?? null;
+}
+function useVideoEnginePoolReady() {
+  const context = react.useContext(VideoEnginePoolContext);
+  return context?.isReady ?? false;
+}
+function usePoolOrchestration(currentIndex, videos, enabled = true) {
+  const pool = useVideoEnginePoolOptional();
+  react.useEffect(() => {
+    if (!pool || !enabled || videos.length === 0) return;
+    const videoList = videos.map((v) => ({
+      id: v.id,
+      url: v.url
+    }));
+    pool.orchestrate(currentIndex, videoList);
+  }, [pool, currentIndex, videos, enabled]);
+}
+function usePooledVideo(video, isActive) {
+  const pool = useVideoEnginePoolOptional();
+  const containerRef = react.useRef(null);
+  const attachedRef = react.useRef(false);
+  const state = pool?.getState(video.id) ?? null;
+  const isReady = pool?.isReady(video.id) ?? false;
+  const element = pool?.getElement(video.id) ?? null;
+  const setContainerRef = react.useCallback((node) => {
+    containerRef.current = node;
+    if (!pool || !element) return;
+    if (node && !attachedRef.current) {
+      node.appendChild(element);
+      attachedRef.current = true;
+    } else if (!node && attachedRef.current) {
+      if (element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+      attachedRef.current = false;
+    }
+  }, [pool, element]);
+  react.useEffect(() => {
+    if (!pool) return;
+    if (isActive) {
+      pool.activate(video.id).catch((err) => {
+        console.warn("[usePooledVideo] Activation failed", video.id, err);
+      });
+    } else {
+      pool.deactivate(video.id);
+    }
+  }, [pool, video.id, isActive]);
+  react.useEffect(() => {
+    return () => {
+      if (attachedRef.current && element?.parentNode && element.parentNode === containerRef.current) {
+        element.parentNode.removeChild(element);
+        attachedRef.current = false;
+      }
+    };
+  }, [element]);
+  return {
+    element,
+    isReady,
+    state,
+    containerRef: setContainerRef
+  };
+}
+function usePoolStats() {
+  const pool = useVideoEnginePoolOptional();
+  return pool?.getStats() ?? null;
+}
+function usePoolMemoryControl() {
+  const pool = useVideoEnginePoolOptional();
+  const reduceMemory = react.useCallback(() => {
+    pool?.reduceMemory();
+  }, [pool]);
+  const pauseAll = react.useCallback(() => {
+    pool?.pauseAll();
+  }, [pool]);
+  return { reduceMemory, pauseAll };
+}
 var VideoFeedItemPlayer = react.forwardRef(
-  ({ placeholder, ...props }, ref) => {
-    const { video, videoRef, shouldRenderVideo, preload, isPreloaded, initialMuted } = useVideoFeedItemContext();
+  ({ placeholder, forceNative = false, ...props }, ref) => {
+    const {
+      video,
+      videoRef,
+      shouldRenderVideo,
+      preload,
+      isPreloaded,
+      initialMuted,
+      isActive,
+      priority
+    } = useVideoFeedItemContext();
+    const pool = useVideoEnginePoolOptional();
+    const poolReady = useVideoEnginePoolReady();
+    const containerRef = react.useRef(null);
+    const attachedElementRef = react.useRef(null);
+    const [isLoading, setIsLoading] = react.useState(false);
+    const prepareStartedRef = react.useRef(false);
+    const usePool = pool && poolReady && !forceNative;
+    const attachElement = react.useCallback((element, isReady) => {
+      if (!containerRef.current) return false;
+      if (attachedElementRef.current && attachedElementRef.current.parentNode) {
+        attachedElementRef.current.parentNode.removeChild(attachedElementRef.current);
+      }
+      Object.assign(element.style, {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        objectFit: "contain",
+        zIndex: "1",
+        opacity: isReady ? "1" : "0",
+        transition: "opacity 0.15s ease-out"
+      });
+      const handleCanPlay = () => {
+        element.style.opacity = "1";
+        setIsLoading(false);
+      };
+      if (element.readyState >= 3) {
+        handleCanPlay();
+      } else {
+        element.addEventListener("canplay", handleCanPlay, { once: true });
+      }
+      containerRef.current.appendChild(element);
+      attachedElementRef.current = element;
+      if (typeof ref === "function") {
+        ref(element);
+      } else if (ref) {
+        ref.current = element;
+      }
+      videoRef.current = element;
+      return true;
+    }, [ref, videoRef]);
+    react.useEffect(() => {
+      if (!usePool || !pool || !shouldRenderVideo) {
+        setIsLoading(false);
+        prepareStartedRef.current = false;
+        return;
+      }
+      const videoId = video.id;
+      const videoUrl = video.url;
+      const existingElement = pool.getElement(videoId);
+      if (existingElement) {
+        const isReady = pool.isReady(videoId);
+        const attached = attachElement(existingElement, isReady);
+        if (attached) {
+          if (!isReady) {
+            setIsLoading(true);
+            pool.prepare(videoId, videoUrl, { priority: "high" }).catch(() => {
+            });
+          }
+          console.log("[VideoFeedItemPlayer] Attached existing element:", videoId, { isReady });
+          return;
+        }
+      }
+      if (prepareStartedRef.current) return;
+      prepareStartedRef.current = true;
+      setIsLoading(true);
+      const poolPriority = isActive ? "high" : priority === "high" ? "high" : "medium";
+      pool.prepare(videoId, videoUrl, { priority: poolPriority }).then(() => {
+        const element = pool.getElement(videoId);
+        if (element) {
+          attachElement(element, true);
+          console.log("[VideoFeedItemPlayer] Prepared and attached:", videoId);
+        }
+      }).catch((err) => {
+        console.warn("[VideoFeedItemPlayer] Prepare failed:", videoId, err);
+        setIsLoading(false);
+      });
+      return () => {
+        if (attachedElementRef.current && attachedElementRef.current.parentNode === containerRef.current) {
+          containerRef.current?.removeChild(attachedElementRef.current);
+        }
+        attachedElementRef.current = null;
+        prepareStartedRef.current = false;
+      };
+    }, [usePool, pool, video.id, video.url, shouldRenderVideo, isActive, priority, attachElement]);
+    react.useEffect(() => {
+      if (!usePool || !pool) return;
+      const videoId = video.id;
+      if (isActive) {
+        pool.activate(videoId);
+      } else {
+        pool.deactivate(videoId);
+      }
+    }, [usePool, pool, video.id, isActive]);
     if (!shouldRenderVideo) {
       return placeholder ?? /* @__PURE__ */ jsxRuntime.jsx(
         "div",
@@ -654,6 +894,67 @@ var VideoFeedItemPlayer = react.forwardRef(
         }
       );
     }
+    if (usePool) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: containerRef,
+          style: {
+            ...videoFeedItemStyles.video,
+            position: "relative"
+          },
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+            @keyframes xhub-reel-spin {
+              to { transform: rotate(360deg); }
+            }
+          ` }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  ...videoFeedItemStyles.placeholder,
+                  backgroundImage: `url(${video.thumbnail})`,
+                  position: "absolute",
+                  inset: 0,
+                  zIndex: 0
+                }
+              }
+            ),
+            isLoading && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  zIndex: 2,
+                  pointerEvents: "none"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      width: 40,
+                      height: 40,
+                      borderWidth: 3,
+                      borderStyle: "solid",
+                      borderColor: "rgba(255, 255, 255, 0.2)",
+                      borderTopColor: "#8B5CF6",
+                      borderRadius: "50%",
+                      animation: "xhub-reel-spin 0.8s linear infinite"
+                    }
+                  }
+                )
+              }
+            )
+          ]
+        }
+      );
+    }
     const showPoster = !isPreloaded;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "video",
@@ -703,8 +1004,16 @@ var VideoFeedItemActions = react.forwardRef(
 );
 VideoFeedItemActions.displayName = "VideoFeedItemActions";
 var VideoFeedItemTimeline = react.forwardRef(
-  ({ expanded: expandedProp, ...props }, ref) => {
+  ({
+    expanded: expandedProp,
+    showPreview = false,
+    getThumbnailUrl,
+    previewWidth,
+    previewHeight,
+    ...props
+  }, ref) => {
     const {
+      video,
       videoRef,
       shouldRenderVideo,
       timelineExpanded,
@@ -712,6 +1021,12 @@ var VideoFeedItemTimeline = react.forwardRef(
       handleSeekStart,
       handleSeekEnd
     } = useVideoFeedItemContext();
+    const defaultGetThumbnailUrl = react.useCallback(
+      (_time) => {
+        return video.thumbnail || void 0;
+      },
+      [video.thumbnail]
+    );
     if (!shouldRenderVideo) {
       return null;
     }
@@ -722,7 +1037,11 @@ var VideoFeedItemTimeline = react.forwardRef(
         expanded: expandedProp ?? timelineExpanded,
         onSeekStart: handleSeekStart,
         onSeekEnd: handleSeekEnd,
-        onExpandedChange: setTimelineExpanded
+        onExpandedChange: setTimelineExpanded,
+        showPreview,
+        getThumbnailUrl: getThumbnailUrl ?? (showPreview ? defaultGetThumbnailUrl : void 0),
+        previewWidth,
+        previewHeight
       }
     ) });
   }
@@ -1555,68 +1874,42 @@ async function prefetchVideoFeed(queryClient, config, params = {}) {
     initialPageParam: void 0
   });
 }
-var stateStyles = {
-  container: {
-    position: "fixed",
-    inset: 0,
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: core.colors.background,
-    color: core.colors.text,
-    gap: core.spacing[4]
-  },
-  spinner: {
-    width: 40,
-    height: 40,
-    borderWidth: 3,
-    borderStyle: "solid",
-    borderColor: "rgba(255, 255, 255, 0.2)",
-    borderTopColor: core.colors.accent,
-    borderRadius: core.radii.full,
-    animation: "xhub-reel-spin 1s linear infinite"
-  },
-  text: {
-    fontSize: core.fontSizes.md,
-    color: core.colors.textSecondary,
-    textAlign: "center",
-    maxWidth: 280,
-    lineHeight: 1.5
-  },
-  button: {
-    padding: `${core.spacing[3]}px ${core.spacing[6]}px`,
-    backgroundColor: core.colors.accent,
-    color: core.colors.text,
-    border: "none",
-    borderRadius: core.radii.md,
-    fontSize: core.fontSizes.sm,
-    fontWeight: core.fontWeights.semibold,
-    cursor: "pointer"
-  },
-  errorIcon: {
-    fontSize: 48,
-    marginBottom: core.spacing[2]
-  }
-};
-var DefaultLoading = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: stateStyles.container, children: [
-  /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-      @keyframes xhub-reel-spin {
-        to { transform: rotate(360deg); }
+var ConnectedVideoFeedInner = react.forwardRef(
+  ({
+    videos,
+    isLoading,
+    hasMore,
+    onLoadMore,
+    onVideoChange,
+    initialIndex = 0,
+    usePooling,
+    ...feedProps
+  }, ref) => {
+    const [currentIndex, setCurrentIndex] = react.useState(initialIndex);
+    usePoolOrchestration(usePooling ? currentIndex : -1, usePooling ? videos : []);
+    const handleVideoChange = react.useCallback(
+      (video, index) => {
+        setCurrentIndex(index);
+        onVideoChange?.(video, index);
+      },
+      [onVideoChange]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      VideoFeed,
+      {
+        ref,
+        videos,
+        isLoading,
+        hasMore,
+        onLoadMore,
+        onVideoChange: handleVideoChange,
+        initialIndex,
+        ...feedProps
       }
-    ` }),
-  /* @__PURE__ */ jsxRuntime.jsx("div", { style: stateStyles.spinner }),
-  /* @__PURE__ */ jsxRuntime.jsx("p", { style: stateStyles.text, children: "\u0110ang t\u1EA3i video..." })
-] });
-var DefaultError = ({ error, retry }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: stateStyles.container, children: [
-  /* @__PURE__ */ jsxRuntime.jsx("div", { style: stateStyles.errorIcon, children: "\u{1F615}" }),
-  /* @__PURE__ */ jsxRuntime.jsx("p", { style: stateStyles.text, children: error.message || "C\xF3 l\u1ED7i x\u1EA3y ra khi t\u1EA3i video" }),
-  /* @__PURE__ */ jsxRuntime.jsx("button", { style: stateStyles.button, onClick: retry, children: "Th\u1EED l\u1EA1i" })
-] });
-var DefaultEmpty = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: stateStyles.container, children: [
-  /* @__PURE__ */ jsxRuntime.jsx("div", { style: stateStyles.errorIcon, children: "\u{1F4ED}" }),
-  /* @__PURE__ */ jsxRuntime.jsx("p", { style: stateStyles.text, children: "Kh\xF4ng c\xF3 video n\xE0o \u0111\u1EC3 hi\u1EC3n th\u1ECB" })
-] });
+    );
+  }
+);
+ConnectedVideoFeedInner.displayName = "ConnectedVideoFeedInner";
 var ConnectedVideoFeed = react.forwardRef(
   ({
     config: configProp,
@@ -1626,11 +1919,14 @@ var ConnectedVideoFeed = react.forwardRef(
     pageSize = 10,
     initialVideos,
     initialMuted = true,
+    pooling = true,
+    poolConfig,
+    forceHLSJS,
     onFetchSuccess,
     onFetchError,
-    renderLoading = () => /* @__PURE__ */ jsxRuntime.jsx(DefaultLoading, {}),
-    renderError = (error, retry) => /* @__PURE__ */ jsxRuntime.jsx(DefaultError, { error, retry }),
-    renderEmpty = () => /* @__PURE__ */ jsxRuntime.jsx(DefaultEmpty, {}),
+    renderLoading,
+    renderError,
+    renderEmpty,
     // Pass through VideoFeed props
     onVideoChange,
     onLike,
@@ -1666,22 +1962,19 @@ var ConnectedVideoFeed = react.forwardRef(
       refetch();
     }, [refetch]);
     if (!config) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: stateStyles.container, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: stateStyles.errorIcon, children: "\u26A0\uFE0F" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: stateStyles.text, children: "Ch\u01B0a c\u1EA5u h\xECnh API. Vui l\xF2ng wrap component trong XHubReelProvider v\u1EDBi config ho\u1EB7c truy\u1EC1n config prop." })
-      ] });
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.FeedNoConfigState, {});
     }
     if (isLoading && videos.length === 0) {
-      return renderLoading();
+      return renderLoading ? renderLoading() : /* @__PURE__ */ jsxRuntime.jsx(ui.FeedLoadingState, {});
     }
     if (error && videos.length === 0) {
-      return renderError(error, handleRetry);
+      return renderError ? renderError(error, handleRetry) : /* @__PURE__ */ jsxRuntime.jsx(ui.FeedErrorState, { error, onRetry: handleRetry });
     }
     if (!isLoading && videos.length === 0) {
-      return renderEmpty();
+      return renderEmpty ? renderEmpty() : /* @__PURE__ */ jsxRuntime.jsx(ui.FeedEmptyState, {});
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      VideoFeed,
+    const feedContent = /* @__PURE__ */ jsxRuntime.jsx(
+      ConnectedVideoFeedInner,
       {
         ref,
         videos,
@@ -1694,96 +1987,103 @@ var ConnectedVideoFeed = react.forwardRef(
         onShare,
         onAuthorClick,
         initialMuted,
+        usePooling: pooling,
         ...videoFeedProps
       }
     );
+    if (pooling) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        VideoEnginePoolProvider,
+        {
+          config: poolConfig,
+          forceHLSJS,
+          onFirstFrameReady: (slot) => {
+            console.log("[ConnectedVideoFeed] First frame ready:", slot.videoId);
+          },
+          onError: (slot, err) => {
+            console.warn("[ConnectedVideoFeed] Slot error:", slot.videoId, err);
+          },
+          children: feedContent
+        }
+      );
+    }
+    return feedContent;
   }
 );
 ConnectedVideoFeed.displayName = "ConnectedVideoFeed";
-function useFeedScroll({
-  scrollRef,
-  itemCount,
-  itemHeight,
-  onScrollChange,
-  onIndexChange
-}) {
-  const [currentIndex, setCurrentIndex] = react.useState(0);
-  const [scrollVelocity, setScrollVelocity] = react.useState(0);
-  const [isScrolling, setIsScrolling] = react.useState(false);
-  const lastScrollTopRef = react.useRef(0);
-  const lastScrollTimeRef = react.useRef(Date.now());
-  const scrollTimeoutRef = react.useRef(null);
-  const getItemHeight = react.useCallback(() => {
-    if (itemHeight) return itemHeight;
-    if (typeof window !== "undefined") return window.innerHeight;
-    return 800;
-  }, [itemHeight]);
-  const scrollToIndex = react.useCallback(
-    (index, smooth = true) => {
-      const element = scrollRef.current;
-      if (!element) return;
-      const clampedIndex = Math.max(0, Math.min(index, itemCount - 1));
-      const top = clampedIndex * getItemHeight();
-      element.scrollTo({
-        top,
-        behavior: smooth ? "smooth" : "auto"
-      });
-    },
-    [scrollRef, itemCount, getItemHeight]
-  );
-  const scrollToNext = react.useCallback(() => {
-    scrollToIndex(currentIndex + 1);
-  }, [currentIndex, scrollToIndex]);
-  const scrollToPrev = react.useCallback(() => {
-    scrollToIndex(currentIndex - 1);
-  }, [currentIndex, scrollToIndex]);
-  react.useEffect(() => {
-    const element = scrollRef.current;
-    if (!element) return;
-    const handleScroll = () => {
-      const now = Date.now();
-      const scrollTop = element.scrollTop;
-      const timeDelta = now - lastScrollTimeRef.current;
-      const scrollDelta = Math.abs(scrollTop - lastScrollTopRef.current);
-      if (timeDelta > 0) {
-        const velocity = scrollDelta / timeDelta * 1e3;
-        setScrollVelocity(velocity);
-        onScrollChange?.(scrollTop, velocity);
-      }
-      const height = getItemHeight();
-      const newIndex = Math.round(scrollTop / height);
-      if (newIndex !== currentIndex && newIndex >= 0 && newIndex < itemCount) {
-        setCurrentIndex(newIndex);
-        onIndexChange?.(newIndex);
-      }
-      setIsScrolling(true);
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
+var PooledVideoFeedInner = react.forwardRef(
+  ({
+    videos,
+    showTimeline,
+    renderVideoItem,
+    onVideoChangeInternal,
+    onVideoChange,
+    ...feedProps
+  }, ref) => {
+    const [currentIndex, setCurrentIndex] = react.useState(feedProps.initialIndex ?? 0);
+    usePoolOrchestration(currentIndex, videos);
+    const handleVideoChange = react.useCallback(
+      (video, index) => {
+        setCurrentIndex(index);
+        onVideoChangeInternal(video, index);
+        onVideoChange?.(video, index);
+      },
+      [onVideoChangeInternal, onVideoChange]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      VideoFeed,
+      {
+        ref,
+        videos,
+        ...feedProps,
+        onVideoChange: handleVideoChange
       }
-      scrollTimeoutRef.current = setTimeout(() => {
-        setIsScrolling(false);
-        setScrollVelocity(0);
-      }, 150);
-      lastScrollTopRef.current = scrollTop;
-      lastScrollTimeRef.current = now;
-    };
-    element.addEventListener("scroll", handleScroll, { passive: true });
-    return () => {
-      element.removeEventListener("scroll", handleScroll);
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
+    );
+  }
+);
+PooledVideoFeedInner.displayName = "PooledVideoFeedInner";
+var PooledVideoFeed = react.forwardRef(
+  ({
+    poolConfig,
+    forceHLSJS,
+    showTimeline = true,
+    renderVideoItem,
+    onVideoChange,
+    ...feedProps
+  }, ref) => {
+    const handleVideoChangeInternal = react.useCallback(
+      (video, index) => {
+        console.log("[PooledVideoFeed] Video changed", { videoId: video.id, index });
+      },
+      []
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      VideoEnginePoolProvider,
+      {
+        config: poolConfig,
+        forceHLSJS,
+        onFirstFrameReady: (slot) => {
+          console.log("[PooledVideoFeed] First frame ready", slot.videoId);
+        },
+        onError: (slot, error) => {
+          console.warn("[PooledVideoFeed] Slot error", slot.videoId, error);
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          PooledVideoFeedInner,
+          {
+            ref,
+            showTimeline,
+            renderVideoItem,
+            onVideoChange,
+            onVideoChangeInternal: handleVideoChangeInternal,
+            ...feedProps
+          }
+        )
       }
-    };
-  }, [scrollRef, itemCount, currentIndex, getItemHeight, onScrollChange, onIndexChange]);
-  return {
-    currentIndex,
-    scrollVelocity,
-    isScrolling,
-    scrollToIndex,
-    scrollToNext,
-    scrollToPrev
-  };
-}
+    );
+  }
+);
+PooledVideoFeed.displayName = "PooledVideoFeed";
 function useInfiniteScroll({
   onLoadMore,
   isLoading = false,
@@ -1850,6 +2150,8 @@ Object.defineProperty(exports, "usePreload", {
   get: function () { return player.usePreload; }
 });
 exports.ConnectedVideoFeed = ConnectedVideoFeed;
+exports.PooledVideoFeed = PooledVideoFeed;
+exports.VideoEnginePoolProvider = VideoEnginePoolProvider;
 exports.VideoFeed = VideoFeed;
 exports.VideoFeedItem = VideoFeedItem;
 exports.VideoFeedItemActions = VideoFeedItemActions;
@@ -1862,12 +2164,17 @@ exports.getPreloadPriorityForFeed = getPreloadPriorityForFeed;
 exports.mapPriorityToNumeric = mapPriorityToNumeric;
 exports.memoryManager = memoryManager;
 exports.prefetchVideoFeed = prefetchVideoFeed;
-exports.useFeedScroll = useFeedScroll;
 exports.useGlobalMemoryState = useGlobalMemoryState;
 exports.useInfiniteScroll = useInfiniteScroll;
 exports.useMemoryManager = useMemoryManager;
+exports.usePoolMemoryControl = usePoolMemoryControl;
+exports.usePoolOrchestration = usePoolOrchestration;
+exports.usePoolStats = usePoolStats;
+exports.usePooledVideo = usePooledVideo;
 exports.useSwipeAnimation = useSwipeAnimation;
 exports.useVideoActivation = useVideoActivation;
+exports.useVideoEnginePool = useVideoEnginePool;
+exports.useVideoEnginePoolOptional = useVideoEnginePoolOptional;
 exports.useVideoFeed = useVideoFeed;
 exports.useVideoFeedItemContext = useVideoFeedItemContext;
 exports.useVideoVisibility = useVideoVisibility;