@xhub-reels/sdk 0.2.6 → 0.2.12

package/dist/index.cjs

@@ -444,6 +444,13 @@ var FeedManager = class {
   // ═══════════════════════════════════════════
   // PUBLIC API — Prefetch
   // ═══════════════════════════════════════════
+  setInitialItems(items) {
+    this.prefetchCache = {
+      items,
+      nextCursor: null,
+      timestamp: Date.now()
+    };
+  }
   async prefetch(ttlMs) {
     if (this.prefetchCache) {
       const ttl = ttlMs ?? this.config.staleTTL;
@@ -593,16 +600,23 @@ var FeedManager = class {
   applyItems(incoming, _nextCursor, append) {
     const { itemsById, displayOrder } = this.store.getState();
     const nextById = new Map(itemsById);
-    const existingIds = new Set(displayOrder);
-    const newIds = [];
     for (const item of incoming) {
-      if (!existingIds.has(item.id)) {
-        newIds.push(item.id);
-      }
       nextById.set(item.id, item);
       this.accessOrder.set(item.id, Date.now());
     }
-    const nextOrder = append ? [...displayOrder, ...newIds] : newIds;
+    let nextOrder;
+    if (append) {
+      const existingIds = new Set(displayOrder);
+      const newIds = [];
+      for (const item of incoming) {
+        if (!existingIds.has(item.id)) {
+          newIds.push(item.id);
+        }
+      }
+      nextOrder = [...displayOrder, ...newIds];
+    } else {
+      nextOrder = incoming.map((item) => item.id);
+    }
     if (nextById.size > this.config.maxCacheSize) {
       this.evictLRU(nextById, nextOrder);
     }
@@ -1130,7 +1144,12 @@ function useSnapAnimation(config = {}) {
   return { animateSnap, animateBounceBack, cancelAnimation };
 }
 var SDKContext = react.createContext(null);
-function ReelsProvider({ children, adapters, debug = false }) {
+function ReelsProvider({
+  children,
+  adapters,
+  initialItems,
+  debug = false
+}) {
   const logger = adapters.logger;
   const sdkRef = react.useRef(null);
   const value = react.useMemo(() => {
@@ -1141,6 +1160,9 @@ function ReelsProvider({ children, adapters, debug = false }) {
       sdkRef.current.optimisticManager.destroy();
     }
     const feedManager = new FeedManager(adapters.dataSource, {}, logger);
+    if (initialItems && initialItems.length > 0) {
+      feedManager.setInitialItems(initialItems);
+    }
     const playerEngine = new PlayerEngine(
       {},
       adapters.analytics,
@@ -1329,10 +1351,11 @@ var ACTIVE_HLS_DEFAULTS = {
   maxMaxBufferLength: 15,
   capLevelToPlayerSize: true,
   startLevel: 0,
-  abrEwmaDefaultEstimate: 5e5,
+  abrEwmaDefaultEstimate: 2e6,
   lowLatencyMode: false,
   backBufferLength: 5,
-  enableWorker: true
+  enableWorker: true,
+  startFragPrefetch: true
 };
 var HOT_HLS_DEFAULTS = {
   maxBufferLength: 2,
@@ -1826,6 +1849,20 @@ function VideoSlotInner({
     }
   }, [mp4Src, isActive, isPrefetch, isPreloaded, isHlsSource]);
   const isReady = isHlsSource ? hlsReady : mp4Ready;
+  const [isVideoPlaying, setIsVideoPlaying] = react.useState(false);
+  react.useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !isActive) {
+      setIsVideoPlaying(false);
+      return;
+    }
+    const onPlaying = () => setIsVideoPlaying(true);
+    video.addEventListener("playing", onPlaying);
+    return () => {
+      video.removeEventListener("playing", onPlaying);
+      setIsVideoPlaying(false);
+    };
+  }, [isActive]);
   const [hasPlayedAhead, setHasPlayedAhead] = react.useState(false);
   react.useEffect(() => {
     const video = videoRef.current;
@@ -1865,6 +1902,7 @@ function VideoSlotInner({
   }, [isActive, isReady, hasPlayedAhead]);
   react.useEffect(() => {
     setHasPlayedAhead(false);
+    setIsVideoPlaying(false);
   }, [src]);
   const wasActiveRef = react.useRef(false);
   const [isManuallyPaused, setIsManuallyPaused] = react.useState(false);
@@ -1941,7 +1979,7 @@ function VideoSlotInner({
     if (!video) return;
     video.muted = isActive ? isMuted : true;
   }, [isMuted, isActive]);
-  const showPosterOverlay = !isReady && !hasPlayedAhead;
+  const showPosterOverlay = isActive ? !isVideoPlaying : !isReady && !hasPlayedAhead;
   const isPreDecoded = hasPlayedAhead;
   const [showMuteIndicator, setShowMuteIndicator] = react.useState(false);
   const muteIndicatorTimer = react.useRef(null);
@@ -2059,9 +2097,9 @@ function VideoSlotInner({
               height: "100%",
               objectFit: "cover",
               // Hide video until ready to avoid black frame flash.
-              // When pre-decoded, skip transition — first frame is already on canvas.
+              // When pre-decoded or active, skip transition — first frame is already on canvas or playing.
               opacity: showPosterOverlay ? 0 : 1,
-              transition: isPreDecoded ? "none" : "opacity 0.15s ease"
+              transition: isActive ? "none" : isPreDecoded ? "none" : "opacity 0.15s ease"
             }
           }
         ),
@@ -2075,7 +2113,7 @@ function VideoSlotInner({
               backgroundSize: "cover",
               backgroundPosition: "center",
               opacity: showPosterOverlay ? 1 : 0,
-              transition: "opacity 0.15s ease",
+              transition: isActive ? "none" : "opacity 0.15s ease",
               pointerEvents: "none"
             }
           }

package/dist/index.d.cts

@@ -503,6 +503,7 @@ declare class FeedManager {
     constructor(dataSource: IDataSource, config?: FeedConfig, logger?: ILogger);
     getDataSource(): IDataSource;
     setDataSource(dataSource: IDataSource, reset?: boolean): void;
+    setInitialItems(items: ContentItem[]): void;
     prefetch(ttlMs?: number): Promise<void>;
     hasPrefetchCache(): boolean;
     clearPrefetchCache(): void;
@@ -781,10 +782,12 @@ interface SDKContextValue {
 interface ReelsProviderProps {
     children: ReactNode;
     adapters: SDKAdapters;
+    /** Seed initial items into feedManager */
+    initialItems?: ContentItem[];
     /** Enable verbose logging (default: false) */
     debug?: boolean;
 }
-declare function ReelsProvider({ children, adapters, debug }: ReelsProviderProps): react_jsx_runtime.JSX.Element;
+declare function ReelsProvider({ children, adapters, initialItems, debug, }: ReelsProviderProps): react_jsx_runtime.JSX.Element;
 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;

package/dist/index.d.ts

@@ -503,6 +503,7 @@ declare class FeedManager {
     constructor(dataSource: IDataSource, config?: FeedConfig, logger?: ILogger);
     getDataSource(): IDataSource;
     setDataSource(dataSource: IDataSource, reset?: boolean): void;
+    setInitialItems(items: ContentItem[]): void;
     prefetch(ttlMs?: number): Promise<void>;
     hasPrefetchCache(): boolean;
     clearPrefetchCache(): void;
@@ -781,10 +782,12 @@ interface SDKContextValue {
 interface ReelsProviderProps {
     children: ReactNode;
     adapters: SDKAdapters;
+    /** Seed initial items into feedManager */
+    initialItems?: ContentItem[];
     /** Enable verbose logging (default: false) */
     debug?: boolean;
 }
-declare function ReelsProvider({ children, adapters, debug }: ReelsProviderProps): react_jsx_runtime.JSX.Element;
+declare function ReelsProvider({ children, adapters, initialItems, debug, }: ReelsProviderProps): react_jsx_runtime.JSX.Element;
 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;

package/dist/index.js

@@ -438,6 +438,13 @@ var FeedManager = class {
   // ═══════════════════════════════════════════
   // PUBLIC API — Prefetch
   // ═══════════════════════════════════════════
+  setInitialItems(items) {
+    this.prefetchCache = {
+      items,
+      nextCursor: null,
+      timestamp: Date.now()
+    };
+  }
   async prefetch(ttlMs) {
     if (this.prefetchCache) {
       const ttl = ttlMs ?? this.config.staleTTL;
@@ -587,16 +594,23 @@ var FeedManager = class {
   applyItems(incoming, _nextCursor, append) {
     const { itemsById, displayOrder } = this.store.getState();
     const nextById = new Map(itemsById);
-    const existingIds = new Set(displayOrder);
-    const newIds = [];
     for (const item of incoming) {
-      if (!existingIds.has(item.id)) {
-        newIds.push(item.id);
-      }
       nextById.set(item.id, item);
       this.accessOrder.set(item.id, Date.now());
     }
-    const nextOrder = append ? [...displayOrder, ...newIds] : newIds;
+    let nextOrder;
+    if (append) {
+      const existingIds = new Set(displayOrder);
+      const newIds = [];
+      for (const item of incoming) {
+        if (!existingIds.has(item.id)) {
+          newIds.push(item.id);
+        }
+      }
+      nextOrder = [...displayOrder, ...newIds];
+    } else {
+      nextOrder = incoming.map((item) => item.id);
+    }
     if (nextById.size > this.config.maxCacheSize) {
       this.evictLRU(nextById, nextOrder);
     }
@@ -1124,7 +1138,12 @@ function useSnapAnimation(config = {}) {
   return { animateSnap, animateBounceBack, cancelAnimation };
 }
 var SDKContext = createContext(null);
-function ReelsProvider({ children, adapters, debug = false }) {
+function ReelsProvider({
+  children,
+  adapters,
+  initialItems,
+  debug = false
+}) {
   const logger = adapters.logger;
   const sdkRef = useRef(null);
   const value = useMemo(() => {
@@ -1135,6 +1154,9 @@ function ReelsProvider({ children, adapters, debug = false }) {
       sdkRef.current.optimisticManager.destroy();
     }
     const feedManager = new FeedManager(adapters.dataSource, {}, logger);
+    if (initialItems && initialItems.length > 0) {
+      feedManager.setInitialItems(initialItems);
+    }
     const playerEngine = new PlayerEngine(
       {},
       adapters.analytics,
@@ -1323,10 +1345,11 @@ var ACTIVE_HLS_DEFAULTS = {
   maxMaxBufferLength: 15,
   capLevelToPlayerSize: true,
   startLevel: 0,
-  abrEwmaDefaultEstimate: 5e5,
+  abrEwmaDefaultEstimate: 2e6,
   lowLatencyMode: false,
   backBufferLength: 5,
-  enableWorker: true
+  enableWorker: true,
+  startFragPrefetch: true
 };
 var HOT_HLS_DEFAULTS = {
   maxBufferLength: 2,
@@ -1820,6 +1843,20 @@ function VideoSlotInner({
     }
   }, [mp4Src, isActive, isPrefetch, isPreloaded, isHlsSource]);
   const isReady = isHlsSource ? hlsReady : mp4Ready;
+  const [isVideoPlaying, setIsVideoPlaying] = useState(false);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !isActive) {
+      setIsVideoPlaying(false);
+      return;
+    }
+    const onPlaying = () => setIsVideoPlaying(true);
+    video.addEventListener("playing", onPlaying);
+    return () => {
+      video.removeEventListener("playing", onPlaying);
+      setIsVideoPlaying(false);
+    };
+  }, [isActive]);
   const [hasPlayedAhead, setHasPlayedAhead] = useState(false);
   useEffect(() => {
     const video = videoRef.current;
@@ -1859,6 +1896,7 @@ function VideoSlotInner({
   }, [isActive, isReady, hasPlayedAhead]);
   useEffect(() => {
     setHasPlayedAhead(false);
+    setIsVideoPlaying(false);
   }, [src]);
   const wasActiveRef = useRef(false);
   const [isManuallyPaused, setIsManuallyPaused] = useState(false);
@@ -1935,7 +1973,7 @@ function VideoSlotInner({
     if (!video) return;
     video.muted = isActive ? isMuted : true;
   }, [isMuted, isActive]);
-  const showPosterOverlay = !isReady && !hasPlayedAhead;
+  const showPosterOverlay = isActive ? !isVideoPlaying : !isReady && !hasPlayedAhead;
   const isPreDecoded = hasPlayedAhead;
   const [showMuteIndicator, setShowMuteIndicator] = useState(false);
   const muteIndicatorTimer = useRef(null);
@@ -2053,9 +2091,9 @@ function VideoSlotInner({
               height: "100%",
               objectFit: "cover",
               // Hide video until ready to avoid black frame flash.
-              // When pre-decoded, skip transition — first frame is already on canvas.
+              // When pre-decoded or active, skip transition — first frame is already on canvas or playing.
               opacity: showPosterOverlay ? 0 : 1,
-              transition: isPreDecoded ? "none" : "opacity 0.15s ease"
+              transition: isActive ? "none" : isPreDecoded ? "none" : "opacity 0.15s ease"
             }
           }
         ),
@@ -2069,7 +2107,7 @@ function VideoSlotInner({
               backgroundSize: "cover",
               backgroundPosition: "center",
               opacity: showPosterOverlay ? 1 : 0,
-              transition: "opacity 0.15s ease",
+              transition: isActive ? "none" : "opacity 0.15s ease",
               pointerEvents: "none"
             }
           }

package/package.json

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