react-native-video-provider 0.2.3 → 0.2.4

package/AuVideo.podspec

@@ -11,7 +11,7 @@ Pod::Spec.new do |s|
   s.authors      = package["author"]
 
   s.platforms    = { :ios => min_ios_version_supported }
-  s.source       = { :git => "https://github.com/grdp99/react-native-au-video.git", :tag => "#{s.version}" }
+  s.source       = { :git => "https://github.com/gurdeep99/react-native-au-video.git", :tag => "#{s.version}" }
 
   s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
   s.private_header_files = "ios/**/*.h"

package/lib/module/components/VideoFeed.js

@@ -0,0 +1,150 @@
+"use strict";
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { FlatList, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { useVideoManager } from "../provider/VideoContext.js";
+import { VideoSurface } from "./VideoSurface.js";
+
+/** Surface id a feed item registers under. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const feedSurfaceId = id => `feed:${id}`;
+
+/** Minimal shape of a FlatList viewability token (avoids RN type-name drift). */
+
+/**
+ * A single-engine video feed: render many videos in a scrollable list, but
+ * only the one scrolled into focus plays — the rest are stopped. There is
+ * still exactly ONE native player; scrolling hands it off to the focused
+ * item's surface, so memory and CPU stay flat no matter how long the feed.
+ *
+ * Each item is a plain `VideoSurface` (never a `VideoPlayer`, which would
+ * fight for the engine on mount). Focus is driven centrally from FlatList
+ * viewability.
+ *
+ * ```tsx
+ * <VideoFeed
+ *   data={videos} // [{ id, uri, title? }, …]
+ *   renderOverlay={({ item, focused }) => <Caption title={item.title} />}
+ * />
+ * ```
+ */
+export function VideoFeed({
+  data,
+  itemHeight,
+  resizeMode,
+  muted = true,
+  repeat = true,
+  visibilityThreshold = 80,
+  renderOverlay,
+  onFocusChange,
+  pauseOnUnmount = true,
+  ...rest
+}) {
+  const manager = useVideoManager();
+  const {
+    height: windowHeight
+  } = useWindowDimensions();
+  const height = itemHeight ?? windowHeight;
+  const [focusedId, setFocusedId] = useState(null);
+
+  // Global engine settings — apply to whatever is currently playing.
+  useEffect(() => {
+    if (muted) {
+      manager.mute();
+    } else {
+      manager.unmute();
+    }
+  }, [manager, muted]);
+  useEffect(() => {
+    manager.setRepeat(repeat);
+  }, [manager, repeat]);
+  useEffect(() => {
+    if (resizeMode) {
+      manager.setResizeMode(resizeMode);
+    }
+  }, [manager, resizeMode]);
+  useEffect(() => {
+    return () => {
+      if (pauseOnUnmount) {
+        manager.pause();
+      }
+    };
+  }, [manager, pauseOnUnmount]);
+  const focus = useCallback((item, index) => {
+    setFocusedId(item?.id ?? null);
+    if (item) {
+      // Same-id handoff aware: re-focusing the same video never reloads.
+      // A different id replaces the source, which stops the previous one —
+      // so only the focused video ever plays.
+      manager.setSource(item, {
+        autoplay: true,
+        surfaceId: feedSurfaceId(item.id)
+      });
+    }
+    onFocusChange?.(item, index);
+  }, [manager, onFocusChange]);
+
+  // FlatList forbids changing these on the fly, so keep them stable and read
+  // the latest `focus`/`data` through a ref.
+  const latest = useRef({
+    focus,
+    data
+  });
+  latest.current = {
+    focus,
+    data
+  };
+  const viewabilityConfig = useRef({
+    itemVisiblePercentThreshold: visibilityThreshold,
+    minimumViewTime: 100
+  }).current;
+  const onViewableItemsChanged = useRef(({
+    viewableItems
+  }) => {
+    const focusedToken = viewableItems.find(v => v.isViewable);
+    if (focusedToken) {
+      latest.current.focus(focusedToken.item, focusedToken.index ?? 0);
+    }
+  }).current;
+  const renderItem = useCallback(({
+    item,
+    index
+  }) => /*#__PURE__*/_jsxs(View, {
+    style: [styles.item, {
+      height
+    }],
+    children: [/*#__PURE__*/_jsx(VideoSurface, {
+      surfaceId: feedSurfaceId(item.id),
+      style: StyleSheet.absoluteFill
+    }), renderOverlay?.({
+      item,
+      index,
+      focused: item.id === focusedId
+    })]
+  }), [height, renderOverlay, focusedId]);
+  return /*#__PURE__*/_jsx(FlatList, {
+    data: data,
+    keyExtractor: item => item.id,
+    renderItem: renderItem,
+    onViewableItemsChanged: onViewableItemsChanged,
+    viewabilityConfig: viewabilityConfig,
+    getItemLayout: (_, index) => ({
+      length: height,
+      offset: height * index,
+      index
+    }),
+    showsVerticalScrollIndicator: false,
+    snapToInterval: height,
+    snapToAlignment: "start",
+    decelerationRate: "fast",
+    ...rest
+  });
+}
+const styles = StyleSheet.create({
+  item: {
+    width: '100%',
+    backgroundColor: '#000',
+    overflow: 'hidden'
+  }
+});
+//# sourceMappingURL=VideoFeed.js.map

package/lib/module/components/VideoFeed.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useRef","useState","FlatList","StyleSheet","useWindowDimensions","View","useVideoManager","VideoSurface","jsx","_jsx","jsxs","_jsxs","feedSurfaceId","id","VideoFeed","data","itemHeight","resizeMode","muted","repeat","visibilityThreshold","renderOverlay","onFocusChange","pauseOnUnmount","rest","manager","height","windowHeight","focusedId","setFocusedId","mute","unmute","setRepeat","setResizeMode","pause","focus","item","index","setSource","autoplay","surfaceId","latest","current","viewabilityConfig","itemVisiblePercentThreshold","minimumViewTime","onViewableItemsChanged","viewableItems","focusedToken","find","v","isViewable","renderItem","style","styles","children","absoluteFill","focused","keyExtractor","getItemLayout","_","length","offset","showsVerticalScrollIndicator","snapToInterval","snapToAlignment","decelerationRate","create","width","backgroundColor","overflow"],"sourceRoot":"../../../src","sources":["components/VideoFeed.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/VideoPlayer.js

@@ -1,8 +1,9 @@
 "use strict";
 
-import { useEffect } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { forwardRef, useEffect, useImperativeHandle } from 'react';
+import { AppState, StyleSheet, View } from 'react-native';
 import { useVideoManager } from "../provider/VideoContext.js";
+import { useVideoEvents } from "../hooks/useVideoEvents.js";
 import { VideoControls } from "./VideoControls.js";
 import { VideoSurface } from "./VideoSurface.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -14,20 +15,31 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * ```tsx
  * <VideoPlayer source={{ id: '123', uri }} style={{ aspectRatio: 16 / 9 }} />
  * ```
+ *
+ * `ref` exposes the underlying `VideoManager` for imperative control
+ * (`ref.current.play()`, `.seek()`, …) — the same instance `useVideo()`
+ * returns elsewhere in the app.
  */
-export function VideoPlayer({
+export const VideoPlayer = /*#__PURE__*/forwardRef(({
   source,
   autoplay = true,
   surfaceId,
   controls = true,
   resizeMode,
+  repeat,
+  muted,
   orientation,
   fullscreenOrientation,
+  pauseOnFocusLost = true,
+  onLoadComplete,
+  onBuffering,
+  onError,
   style,
   ...rest
-}) {
+}, ref) => {
   const manager = useVideoManager();
   const id = surfaceId ?? `player:${source.id}`;
+  useImperativeHandle(ref, () => manager, [manager]);
   useEffect(() => {
     manager.setSource(source, {
       autoplay,
@@ -42,6 +54,22 @@ export function VideoPlayer({
       manager.setResizeMode(resizeMode);
     }
   }, [manager, resizeMode]);
+  useEffect(() => {
+    if (repeat === undefined) {
+      return;
+    }
+    manager.setRepeat(repeat);
+  }, [manager, repeat]);
+  useEffect(() => {
+    if (muted === undefined) {
+      return;
+    }
+    if (muted) {
+      manager.mute();
+    } else {
+      manager.unmute();
+    }
+  }, [manager, muted]);
   useEffect(() => {
     if (!orientation || orientation === 'auto') {
       return;
@@ -56,6 +84,24 @@ export function VideoPlayer({
     manager.setFullscreenOrientation(fullscreenOrientation);
     return () => manager.setFullscreenOrientation(null);
   }, [manager, fullscreenOrientation]);
+  useEffect(() => {
+    if (!pauseOnFocusLost) {
+      return;
+    }
+    const sub = AppState.addEventListener('change', next => {
+      // Only the player currently owning the engine reacts, so a video
+      // attached to another surface keeps playing untouched.
+      if (next !== 'active' && manager.store.getState().surfaceId === id) {
+        manager.pause();
+      }
+    });
+    return () => sub.remove();
+  }, [manager, id, pauseOnFocusLost]);
+  useVideoEvents({
+    onLoad: onLoadComplete,
+    onBuffer: e => onBuffering?.(e.buffering),
+    onError
+  });
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.container, style],
     ...rest,
@@ -64,7 +110,8 @@ export function VideoPlayer({
       style: styles.surface
     }), controls ? /*#__PURE__*/_jsx(VideoControls, {}) : null]
   });
-}
+});
+VideoPlayer.displayName = 'VideoPlayer';
 const styles = StyleSheet.create({
   container: {
     backgroundColor: '#000',

package/lib/module/components/VideoPlayer.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","StyleSheet","View","useVideoManager","VideoControls","VideoSurface","jsx","_jsx","jsxs","_jsxs","VideoPlayer","source","autoplay","surfaceId","controls","resizeMode","orientation","fullscreenOrientation","style","rest","manager","id","setSource","setResizeMode","setOrientation","setFullscreenOrientation","styles","container","children","surface","create","backgroundColor","overflow","position","top","left","right","bottom"],"sourceRoot":"../../../src","sources":["components/VideoPlayer.tsx"],"mappings":";;AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,UAAU,EAAEC,IAAI,QAAwB,cAAc;AAC/D,SAASC,eAAe,QAAQ,6BAA0B;AAE1D,SAASC,aAAa,QAAQ,oBAAiB;AAC/C,SAASC,YAAY,QAAQ,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AA8B9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,WAAWA,CAAC;EAC1BC,MAAM;EACNC,QAAQ,GAAG,IAAI;EACfC,SAAS;EACTC,QAAQ,GAAG,IAAI;EACfC,UAAU;EACVC,WAAW;EACXC,qBAAqB;EACrBC,KAAK;EACL,GAAGC;AACa,CAAC,EAAE;EACnB,MAAMC,OAAO,GAAGjB,eAAe,CAAC,CAAC;EACjC,MAAMkB,EAAE,GAAGR,SAAS,IAAI,UAAUF,MAAM,CAACU,EAAE,EAAE;EAE7CrB,SAAS,CAAC,MAAM;IACdoB,OAAO,CAACE,SAAS,CAACX,MAAM,EAAE;MAAEC,QAAQ;MAAEC,SAAS,EAAEQ;IAAG,CAAC,CAAC;IACtD;IACA;IACA;EACF,CAAC,EAAE,CAACD,OAAO,EAAET,MAAM,CAACU,EAAE,EAAEA,EAAE,CAAC,CAAC;EAE5BrB,SAAS,CAAC,MAAM;IACd,IAAIe,UAAU,EAAE;MACdK,OAAO,CAACG,aAAa,CAACR,UAAU,CAAC;IACnC;EACF,CAAC,EAAE,CAACK,OAAO,EAAEL,UAAU,CAAC,CAAC;EAEzBf,SAAS,CAAC,MAAM;IACd,IAAI,CAACgB,WAAW,IAAIA,WAAW,KAAK,MAAM,EAAE;MAC1C;IACF;IACAI,OAAO,CAACI,cAAc,CAACR,WAAW,CAAC;IACnC,OAAO,MAAMI,OAAO,CAACI,cAAc,CAAC,MAAM,CAAC;EAC7C,CAAC,EAAE,CAACJ,OAAO,EAAEJ,WAAW,CAAC,CAAC;EAE1BhB,SAAS,CAAC,MAAM;IACd,IAAI,CAACiB,qBAAqB,EAAE;MAC1B;IACF;IACAG,OAAO,CAACK,wBAAwB,CAACR,qBAAqB,CAAC;IACvD,OAAO,MAAMG,OAAO,CAACK,wBAAwB,CAAC,IAAI,CAAC;EACrD,CAAC,EAAE,CAACL,OAAO,EAAEH,qBAAqB,CAAC,CAAC;EAEpC,oBACER,KAAA,CAACP,IAAI;IAACgB,KAAK,EAAE,CAACQ,MAAM,CAACC,SAAS,EAAET,KAAK,CAAE;IAAA,GAAKC,IAAI;IAAAS,QAAA,gBAC9CrB,IAAA,CAACF,YAAY;MAACQ,SAAS,EAAEQ,EAAG;MAACH,KAAK,EAAEQ,MAAM,CAACG;IAAQ,CAAE,CAAC,EACrDf,QAAQ,gBAAGP,IAAA,CAACH,aAAa,IAAE,CAAC,GAAG,IAAI;EAAA,CAChC,CAAC;AAEX;AAEA,MAAMsB,MAAM,GAAGzB,UAAU,CAAC6B,MAAM,CAAC;EAC/BH,SAAS,EAAE;IACTI,eAAe,EAAE,MAAM;IACvBC,QAAQ,EAAE;EACZ,CAAC;EACDH,OAAO,EAAE;IACPI,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["forwardRef","useEffect","useImperativeHandle","AppState","StyleSheet","View","useVideoManager","useVideoEvents","VideoControls","VideoSurface","jsx","_jsx","jsxs","_jsxs","VideoPlayer","source","autoplay","surfaceId","controls","resizeMode","repeat","muted","orientation","fullscreenOrientation","pauseOnFocusLost","onLoadComplete","onBuffering","onError","style","rest","ref","manager","id","setSource","setResizeMode","undefined","setRepeat","mute","unmute","setOrientation","setFullscreenOrientation","sub","addEventListener","next","store","getState","pause","remove","onLoad","onBuffer","e","buffering","styles","container","children","surface","displayName","create","backgroundColor","overflow","position","top","left","right","bottom"],"sourceRoot":"../../../src","sources":["components/VideoPlayer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/index.js

@@ -5,6 +5,7 @@ export { useVideoManager } from "./provider/VideoContext.js";
 export { VideoManager, FULLSCREEN_SURFACE_ID, FLOATING_SURFACE_ID } from "./core/VideoManager.js";
 export { VideoSurface } from "./components/VideoSurface.js";
 export { VideoPlayer } from "./components/VideoPlayer.js";
+export { VideoFeed, feedSurfaceId } from "./components/VideoFeed.js";
 export { FullscreenPlayer } from "./components/FullscreenPlayer.js";
 export { FloatingPlayer } from "./components/FloatingPlayer.js";
 export { MiniPlayer } from "./components/MiniPlayer.js";

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["VideoProvider","useVideoManager","VideoManager","FULLSCREEN_SURFACE_ID","FLOATING_SURFACE_ID","VideoSurface","VideoPlayer","FullscreenPlayer","FloatingPlayer","MiniPlayer","VideoControls","GestureOverlay","useVideo","usePlayback","useFullscreen","usePiP","useVideoEvents","formatTime"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,SACEA,aAAa,QAER,6BAA0B;AACjC,SAASC,eAAe,QAAQ,4BAAyB;AACzD,SACEC,YAAY,EACZC,qBAAqB,EACrBC,mBAAmB,QACd,wBAAqB;AAE5B,SACEC,YAAY,QAEP,8BAA2B;AAClC,SAASC,WAAW,QAA+B,6BAA0B;AAC7E,SAASC,gBAAgB,QAAQ,kCAA+B;AAChE,SACEC,cAAc,QAET,gCAA6B;AACpC,SAASC,UAAU,QAA8B,4BAAyB;AAC1E,SACEC,aAAa,QAER,+BAA4B;AACnC,SACEC,cAAc,QAET,gCAA6B;AAEpC,SAASC,QAAQ,QAAQ,qBAAkB;AAC3C,SAASC,WAAW,QAAQ,wBAAqB;AACjD,SAASC,aAAa,QAAQ,0BAAuB;AACrD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SACEC,cAAc,QAET,2BAAwB;AAE/B,SAASC,UAAU,QAAQ,uBAAoB","ignoreList":[]}
+{"version":3,"names":["VideoProvider","useVideoManager","VideoManager","FULLSCREEN_SURFACE_ID","FLOATING_SURFACE_ID","VideoSurface","VideoPlayer","VideoFeed","feedSurfaceId","FullscreenPlayer","FloatingPlayer","MiniPlayer","VideoControls","GestureOverlay","useVideo","usePlayback","useFullscreen","usePiP","useVideoEvents","formatTime"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,SACEA,aAAa,QAER,6BAA0B;AACjC,SAASC,eAAe,QAAQ,4BAAyB;AACzD,SACEC,YAAY,EACZC,qBAAqB,EACrBC,mBAAmB,QACd,wBAAqB;AAE5B,SACEC,YAAY,QAEP,8BAA2B;AAClC,SAASC,WAAW,QAA+B,6BAA0B;AAC7E,SACEC,SAAS,EACTC,aAAa,QAGR,2BAAwB;AAC/B,SAASC,gBAAgB,QAAQ,kCAA+B;AAChE,SACEC,cAAc,QAET,gCAA6B;AACpC,SAASC,UAAU,QAA8B,4BAAyB;AAC1E,SACEC,aAAa,QAER,+BAA4B;AACnC,SACEC,cAAc,QAET,gCAA6B;AAEpC,SAASC,QAAQ,QAAQ,qBAAkB;AAC3C,SAASC,WAAW,QAAQ,wBAAqB;AACjD,SAASC,aAAa,QAAQ,0BAAuB;AACrD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SACEC,cAAc,QAET,2BAAwB;AAE/B,SAASC,UAAU,QAAQ,uBAAoB","ignoreList":[]}

package/lib/typescript/src/components/VideoFeed.d.ts

@@ -0,0 +1,49 @@
+import { type ReactNode } from 'react';
+import { type FlatListProps } from 'react-native';
+import type { ResizeMode, VideoSource } from '../types/video.js';
+/** Surface id a feed item registers under. */
+export declare const feedSurfaceId: (id: string) => string;
+export interface VideoFeedRenderInfo<T> {
+    item: T;
+    index: number;
+    /** True when this item is the one currently playing. */
+    focused: boolean;
+}
+export interface VideoFeedProps<T extends VideoSource> extends Omit<FlatListProps<T>, 'data' | 'renderItem' | 'keyExtractor' | 'onViewableItemsChanged' | 'viewabilityConfig' | 'getItemLayout'> {
+    /** The videos. Each needs a stable `id` (used for the surface + handoff). */
+    data: T[];
+    /** Height of each item. Default: the window height (a full-screen reels feed). */
+    itemHeight?: number;
+    resizeMode?: ResizeMode;
+    /** Start muted. Default `true` (autoplay policies + typical feed UX). */
+    muted?: boolean;
+    /** Loop the focused video. Default `true`. */
+    repeat?: boolean;
+    /** Percent of an item that must be visible to become focused. Default 80. */
+    visibilityThreshold?: number;
+    /** Overlay above each item — captions, like button, a tap-to-pause layer, … */
+    renderOverlay?: (info: VideoFeedRenderInfo<T>) => ReactNode;
+    /** Called when the focused item changes (null when none is visible). */
+    onFocusChange?: (item: T | null, index: number) => void;
+    /** Pause playback when the feed unmounts. Default `true`. */
+    pauseOnUnmount?: boolean;
+}
+/**
+ * A single-engine video feed: render many videos in a scrollable list, but
+ * only the one scrolled into focus plays — the rest are stopped. There is
+ * still exactly ONE native player; scrolling hands it off to the focused
+ * item's surface, so memory and CPU stay flat no matter how long the feed.
+ *
+ * Each item is a plain `VideoSurface` (never a `VideoPlayer`, which would
+ * fight for the engine on mount). Focus is driven centrally from FlatList
+ * viewability.
+ *
+ * ```tsx
+ * <VideoFeed
+ *   data={videos} // [{ id, uri, title? }, …]
+ *   renderOverlay={({ item, focused }) => <Caption title={item.title} />}
+ * />
+ * ```
+ */
+export declare function VideoFeed<T extends VideoSource>({ data, itemHeight, resizeMode, muted, repeat, visibilityThreshold, renderOverlay, onFocusChange, pauseOnUnmount, ...rest }: VideoFeedProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=VideoFeed.d.ts.map

package/lib/typescript/src/components/VideoFeed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoFeed.d.ts","sourceRoot":"","sources":["../../../../src/components/VideoFeed.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,KAAK,aAAa,EACnB,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,mBAAgB,CAAC;AAG9D,8CAA8C;AAC9C,eAAO,MAAM,aAAa,GAAI,IAAI,MAAM,WAAiB,CAAC;AAS1D,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,IAAI,CACjE,aAAa,CAAC,CAAC,CAAC,EACd,MAAM,GACN,YAAY,GACZ,cAAc,GACd,wBAAwB,GACxB,mBAAmB,GACnB,eAAe,CAClB;IACC,6EAA6E;IAC7E,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,yEAAyE;IACzE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6EAA6E;IAC7E,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,+EAA+E;IAC/E,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IAC5D,wEAAwE;IACxE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,EAC/C,IAAI,EACJ,UAAU,EACV,UAAU,EACV,KAAY,EACZ,MAAa,EACb,mBAAwB,EACxB,aAAa,EACb,aAAa,EACb,cAAqB,EACrB,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,CAAC,CAAC,+BAqGnB"}

package/lib/typescript/src/components/VideoPlayer.d.ts

@@ -1,5 +1,7 @@
 import { type ViewProps } from 'react-native';
-import type { OrientationLock, ResizeMode, VideoSource } from '../types/video.js';
+import { VideoManager } from '../core/VideoManager.js';
+import type { VideoEventMap } from '../types/events.js';
+import type { OrientationLock, ResizeMode, VideoError, VideoSource } from '../types/video.js';
 export interface VideoPlayerProps extends ViewProps {
     source: VideoSource;
     /** Default true. */
@@ -13,6 +15,10 @@ export interface VideoPlayerProps extends ViewProps {
     /** Show built-in controls. Default true. */
     controls?: boolean;
     resizeMode?: ResizeMode;
+    /** Loop playback when it ends. Default false. */
+    repeat?: boolean;
+    /** Default false. */
+    muted?: boolean;
     /**
      * Force the screen into this orientation while the player is mounted:
      * `'landscape'`, `'inverted-landscape'`, `'portrait'` or
@@ -26,6 +32,18 @@ export interface VideoPlayerProps extends ViewProps {
      * when it closes, so the rest of the app is unaffected.
      */
     fullscreenOrientation?: OrientationLock;
+    /**
+     * Pause this player when it loses focus — i.e. the app goes to the
+     * background while this player's surface is the one currently playing.
+     * Default `true`. Set `false` to keep playing (e.g. background audio).
+     * Only the focused player acts, so a video attached elsewhere is untouched.
+     */
+    pauseOnFocusLost?: boolean;
+    /** Fires once metadata (duration, dimensions) is available. */
+    onLoadComplete?: (info: VideoEventMap['onLoad']) => void;
+    /** Fires whenever buffering starts or stops. */
+    onBuffering?: (buffering: boolean) => void;
+    onError?: (error: VideoError) => void;
 }
 /**
  * Convenience all-in-one player: `setSource` (same-video handoff aware) +
@@ -35,6 +53,10 @@ export interface VideoPlayerProps extends ViewProps {
  * ```tsx
  * <VideoPlayer source={{ id: '123', uri }} style={{ aspectRatio: 16 / 9 }} />
  * ```
+ *
+ * `ref` exposes the underlying `VideoManager` for imperative control
+ * (`ref.current.play()`, `.seek()`, …) — the same instance `useVideo()`
+ * returns elsewhere in the app.
  */
-export declare function VideoPlayer({ source, autoplay, surfaceId, controls, resizeMode, orientation, fullscreenOrientation, style, ...rest }: VideoPlayerProps): import("react").JSX.Element;
+export declare const VideoPlayer: import("react").ForwardRefExoticComponent<VideoPlayerProps & import("react").RefAttributes<VideoManager>>;
 //# sourceMappingURL=VideoPlayer.d.ts.map

package/lib/typescript/src/components/VideoPlayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../../../src/components/VideoPlayer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhE,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,mBAAgB,CAAC;AAI/E,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,MAAM,EAAE,WAAW,CAAC;IACpB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,eAAe,CAAC;CACzC;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,QAAe,EACf,SAAS,EACT,QAAe,EACf,UAAU,EACV,WAAW,EACX,qBAAqB,EACrB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAuClB"}
+{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../../../src/components/VideoPlayer.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAsB,CAAC;AAGpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAiB,CAAC;AACrD,OAAO,KAAK,EACV,eAAe,EACf,UAAU,EACV,UAAU,EACV,WAAW,EACZ,MAAM,mBAAgB,CAAC;AAIxB,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,MAAM,EAAE,WAAW,CAAC;IACpB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,eAAe,CAAC;IACxC;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+DAA+D;IAC/D,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACzD,gDAAgD;IAChD,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,2GAoGvB,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -3,6 +3,7 @@ export { useVideoManager } from './provider/VideoContext.js';
 export { VideoManager, FULLSCREEN_SURFACE_ID, FLOATING_SURFACE_ID, } from './core/VideoManager.js';
 export { VideoSurface, type VideoSurfaceProps, } from './components/VideoSurface.js';
 export { VideoPlayer, type VideoPlayerProps } from './components/VideoPlayer.js';
+export { VideoFeed, feedSurfaceId, type VideoFeedProps, type VideoFeedRenderInfo, } from './components/VideoFeed.js';
 export { FullscreenPlayer } from './components/FullscreenPlayer.js';
 export { FloatingPlayer, type FloatingPlayerProps, } from './components/FloatingPlayer.js';
 export { MiniPlayer, type MiniPlayerProps } from './components/MiniPlayer.js';

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,6BAA0B,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,4BAAyB,CAAC;AAC1D,OAAO,EACL,YAAY,EACZ,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,wBAAqB,CAAC;AAE7B,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,8BAA2B,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,6BAA0B,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAA+B,CAAC;AACjE,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,gCAA6B,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAAyB,CAAC;AAC3E,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,+BAA4B,CAAC;AACpC,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,gCAA6B,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAkB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAAuB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAgB,CAAC;AACxC,OAAO,EACL,cAAc,EACd,KAAK,kBAAkB,GACxB,MAAM,2BAAwB,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAoB,CAAC;AAEhD,YAAY,EACV,WAAW,EACX,UAAU,EACV,eAAe,EACf,UAAU,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,cAAc,GACf,MAAM,kBAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,6BAA0B,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,4BAAyB,CAAC;AAC1D,OAAO,EACL,YAAY,EACZ,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,wBAAqB,CAAC;AAE7B,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,8BAA2B,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,6BAA0B,CAAC;AAC9E,OAAO,EACL,SAAS,EACT,aAAa,EACb,KAAK,cAAc,EACnB,KAAK,mBAAmB,GACzB,MAAM,2BAAwB,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAA+B,CAAC;AACjE,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,gCAA6B,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAAyB,CAAC;AAC3E,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,+BAA4B,CAAC;AACpC,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,gCAA6B,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAkB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAAuB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAgB,CAAC;AACxC,OAAO,EACL,cAAc,EACd,KAAK,kBAAkB,GACxB,MAAM,2BAAwB,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAoB,CAAC;AAEhD,YAAY,EACV,WAAW,EACX,UAAU,EACV,eAAe,EACf,UAAU,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,cAAc,GACf,MAAM,kBAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-video-provider",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Singleton-engine video library for React Native (one native player, many surfaces)",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -18,6 +18,7 @@
     "android",
     "ios",
     "cpp",
+    "scripts/postinstall.js",
     "*.podspec",
     "react-native.config.js",
     "!ios/build",
@@ -35,6 +36,7 @@
     "example": "yarn workspace react-native-video-provider-example",
     "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
     "prepare": "bob build",
+    "postinstall": "node scripts/postinstall.js",
     "typecheck": "tsc",
     "test": "jest",
     "lint": "eslint \"**/*.{js,ts,tsx}\""
@@ -46,14 +48,14 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/grdp99/react-native-au-video.git"
+    "url": "git+https://github.com/gurdeep99/react-native-au-video.git"
   },
   "author": "Gurdeep Singh <grdp99@gmail.com> (https://gurdeep.net)",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/grdp99/react-native-au-video/issues"
+    "url": "https://github.com/gurdeep99/react-native-au-video/issues"
   },
-  "homepage": "https://github.com/grdp99/react-native-au-video#readme",
+  "homepage": "https://github.com/gurdeep99/react-native-au-video#readme",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/scripts/postinstall.js

@@ -0,0 +1,44 @@
+'use strict';
+
+/**
+ * Prints a banner after install. Wrapped so it can NEVER fail a consumer's
+ * `npm install` — any error is swallowed and the process always exits 0.
+ * Skipped in CI and non-interactive shells to avoid polluting build logs.
+ */
+
+const BANNER = `
+                                                                                       ++
+                       +++                              +++                      +++++++++++    ++
+      ++++++++++++++  ++++++++++         ++++++++++++++ +++                    +++++++ ++      +++
+      ++    +++   +++ ++++++++++++       +++      +++++ ++++    +++++++   ++++ +++++++ ++      +++
+      ++    +++   +++ ++++     +++       +++++++++++++  ++++ +++++ ++++ +++++  +++++++ ++      +++++++++++
+      +++   +++   +++ ++++    ++++       +++    +++++++ +++++++    +++++++++    +++++++++      ++++    ++++
+      ++++  +++   +++ ++++++++++         ++++++     +++ ++++++    +++++  +++           ++      +++      +++
+      +++   ++    +++ ++++  +++          +++  ++++++++  ++++     ++++   +++      ++++ +++      +++      +++
+                      ++++   ++++                       ++++    +++     ++      +++++ ++       +++     ++++
+        +++++++               ++++                                      ++       ++++++         ++++++++++
+     ++++ ++++        +         +++                       ++++        +                        +++++++++++
+   +++   +++        ++++        +++++        ++++        +++        +++        ++++       ++++        +++
+   ++++++++         ++           ++                       ++                             +++ +        ++
+`;
+
+try {
+  const quiet = process.env.CI || process.env.npm_config_loglevel === 'silent';
+  if (!quiet && process.stdout && process.stdout.isTTY) {
+    const cyan = '\x1b[36m';
+    const dim = '\x1b[2m';
+    const reset = '\x1b[0m';
+    process.stdout.write(cyan + BANNER + reset + '\n');
+    process.stdout.write(
+      dim +
+        '  react-native-video-provider — one native player, many surfaces.\n' +
+        '  Docs: https://github.com/gurdeep99/react-native-video-provider#readme\n' +
+        reset +
+        '\n'
+    );
+  }
+} catch {
+  // Never break an install over a banner.
+}
+
+process.exit(0);

package/src/components/VideoFeed.tsx

@@ -0,0 +1,201 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  FlatList,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+  type FlatListProps,
+} from 'react-native';
+import { useVideoManager } from '../provider/VideoContext';
+import type { ResizeMode, VideoSource } from '../types/video';
+import { VideoSurface } from './VideoSurface';
+
+/** Surface id a feed item registers under. */
+export const feedSurfaceId = (id: string) => `feed:${id}`;
+
+/** Minimal shape of a FlatList viewability token (avoids RN type-name drift). */
+interface FeedViewToken {
+  item: unknown;
+  index: number | null | undefined;
+  isViewable: boolean;
+}
+
+export interface VideoFeedRenderInfo<T> {
+  item: T;
+  index: number;
+  /** True when this item is the one currently playing. */
+  focused: boolean;
+}
+
+export interface VideoFeedProps<T extends VideoSource> extends Omit<
+  FlatListProps<T>,
+  | 'data'
+  | 'renderItem'
+  | 'keyExtractor'
+  | 'onViewableItemsChanged'
+  | 'viewabilityConfig'
+  | 'getItemLayout'
+> {
+  /** The videos. Each needs a stable `id` (used for the surface + handoff). */
+  data: T[];
+  /** Height of each item. Default: the window height (a full-screen reels feed). */
+  itemHeight?: number;
+  resizeMode?: ResizeMode;
+  /** Start muted. Default `true` (autoplay policies + typical feed UX). */
+  muted?: boolean;
+  /** Loop the focused video. Default `true`. */
+  repeat?: boolean;
+  /** Percent of an item that must be visible to become focused. Default 80. */
+  visibilityThreshold?: number;
+  /** Overlay above each item — captions, like button, a tap-to-pause layer, … */
+  renderOverlay?: (info: VideoFeedRenderInfo<T>) => ReactNode;
+  /** Called when the focused item changes (null when none is visible). */
+  onFocusChange?: (item: T | null, index: number) => void;
+  /** Pause playback when the feed unmounts. Default `true`. */
+  pauseOnUnmount?: boolean;
+}
+
+/**
+ * A single-engine video feed: render many videos in a scrollable list, but
+ * only the one scrolled into focus plays — the rest are stopped. There is
+ * still exactly ONE native player; scrolling hands it off to the focused
+ * item's surface, so memory and CPU stay flat no matter how long the feed.
+ *
+ * Each item is a plain `VideoSurface` (never a `VideoPlayer`, which would
+ * fight for the engine on mount). Focus is driven centrally from FlatList
+ * viewability.
+ *
+ * ```tsx
+ * <VideoFeed
+ *   data={videos} // [{ id, uri, title? }, …]
+ *   renderOverlay={({ item, focused }) => <Caption title={item.title} />}
+ * />
+ * ```
+ */
+export function VideoFeed<T extends VideoSource>({
+  data,
+  itemHeight,
+  resizeMode,
+  muted = true,
+  repeat = true,
+  visibilityThreshold = 80,
+  renderOverlay,
+  onFocusChange,
+  pauseOnUnmount = true,
+  ...rest
+}: VideoFeedProps<T>) {
+  const manager = useVideoManager();
+  const { height: windowHeight } = useWindowDimensions();
+  const height = itemHeight ?? windowHeight;
+  const [focusedId, setFocusedId] = useState<string | null>(null);
+
+  // Global engine settings — apply to whatever is currently playing.
+  useEffect(() => {
+    if (muted) {
+      manager.mute();
+    } else {
+      manager.unmute();
+    }
+  }, [manager, muted]);
+
+  useEffect(() => {
+    manager.setRepeat(repeat);
+  }, [manager, repeat]);
+
+  useEffect(() => {
+    if (resizeMode) {
+      manager.setResizeMode(resizeMode);
+    }
+  }, [manager, resizeMode]);
+
+  useEffect(() => {
+    return () => {
+      if (pauseOnUnmount) {
+        manager.pause();
+      }
+    };
+  }, [manager, pauseOnUnmount]);
+
+  const focus = useCallback(
+    (item: T | null, index: number) => {
+      setFocusedId(item?.id ?? null);
+      if (item) {
+        // Same-id handoff aware: re-focusing the same video never reloads.
+        // A different id replaces the source, which stops the previous one —
+        // so only the focused video ever plays.
+        manager.setSource(item, {
+          autoplay: true,
+          surfaceId: feedSurfaceId(item.id),
+        });
+      }
+      onFocusChange?.(item, index);
+    },
+    [manager, onFocusChange]
+  );
+
+  // FlatList forbids changing these on the fly, so keep them stable and read
+  // the latest `focus`/`data` through a ref.
+  const latest = useRef({ focus, data });
+  latest.current = { focus, data };
+
+  const viewabilityConfig = useRef({
+    itemVisiblePercentThreshold: visibilityThreshold,
+    minimumViewTime: 100,
+  }).current;
+
+  const onViewableItemsChanged = useRef(
+    ({ viewableItems }: { viewableItems: FeedViewToken[] }) => {
+      const focusedToken = viewableItems.find((v) => v.isViewable);
+      if (focusedToken) {
+        latest.current.focus(focusedToken.item as T, focusedToken.index ?? 0);
+      }
+    }
+  ).current;
+
+  const renderItem = useCallback(
+    ({ item, index }: { item: T; index: number }) => (
+      <View style={[styles.item, { height }]}>
+        <VideoSurface
+          surfaceId={feedSurfaceId(item.id)}
+          style={StyleSheet.absoluteFill}
+        />
+        {renderOverlay?.({ item, index, focused: item.id === focusedId })}
+      </View>
+    ),
+    [height, renderOverlay, focusedId]
+  );
+
+  return (
+    <FlatList
+      data={data}
+      keyExtractor={(item) => item.id}
+      renderItem={renderItem}
+      onViewableItemsChanged={onViewableItemsChanged}
+      viewabilityConfig={viewabilityConfig}
+      getItemLayout={(_, index) => ({
+        length: height,
+        offset: height * index,
+        index,
+      })}
+      showsVerticalScrollIndicator={false}
+      snapToInterval={height}
+      snapToAlignment="start"
+      decelerationRate="fast"
+      {...rest}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  item: {
+    width: '100%',
+    backgroundColor: '#000',
+    overflow: 'hidden',
+  },
+});

package/src/components/VideoPlayer.tsx

@@ -1,7 +1,15 @@
-import { useEffect } from 'react';
-import { StyleSheet, View, type ViewProps } from 'react-native';
+import { forwardRef, useEffect, useImperativeHandle } from 'react';
+import { AppState, StyleSheet, View, type ViewProps } from 'react-native';
+import { VideoManager } from '../core/VideoManager';
 import { useVideoManager } from '../provider/VideoContext';
-import type { OrientationLock, ResizeMode, VideoSource } from '../types/video';
+import { useVideoEvents } from '../hooks/useVideoEvents';
+import type { VideoEventMap } from '../types/events';
+import type {
+  OrientationLock,
+  ResizeMode,
+  VideoError,
+  VideoSource,
+} from '../types/video';
 import { VideoControls } from './VideoControls';
 import { VideoSurface } from './VideoSurface';
 
@@ -18,6 +26,10 @@ export interface VideoPlayerProps extends ViewProps {
   /** Show built-in controls. Default true. */
   controls?: boolean;
   resizeMode?: ResizeMode;
+  /** Loop playback when it ends. Default false. */
+  repeat?: boolean;
+  /** Default false. */
+  muted?: boolean;
   /**
    * Force the screen into this orientation while the player is mounted:
    * `'landscape'`, `'inverted-landscape'`, `'portrait'` or
@@ -31,6 +43,18 @@ export interface VideoPlayerProps extends ViewProps {
    * when it closes, so the rest of the app is unaffected.
    */
   fullscreenOrientation?: OrientationLock;
+  /**
+   * Pause this player when it loses focus — i.e. the app goes to the
+   * background while this player's surface is the one currently playing.
+   * Default `true`. Set `false` to keep playing (e.g. background audio).
+   * Only the focused player acts, so a video attached elsewhere is untouched.
+   */
+  pauseOnFocusLost?: boolean;
+  /** Fires once metadata (duration, dimensions) is available. */
+  onLoadComplete?: (info: VideoEventMap['onLoad']) => void;
+  /** Fires whenever buffering starts or stops. */
+  onBuffering?: (buffering: boolean) => void;
+  onError?: (error: VideoError) => void;
 }
 
 /**
@@ -41,57 +65,114 @@ export interface VideoPlayerProps extends ViewProps {
  * ```tsx
  * <VideoPlayer source={{ id: '123', uri }} style={{ aspectRatio: 16 / 9 }} />
  * ```
+ *
+ * `ref` exposes the underlying `VideoManager` for imperative control
+ * (`ref.current.play()`, `.seek()`, …) — the same instance `useVideo()`
+ * returns elsewhere in the app.
  */
-export function VideoPlayer({
-  source,
-  autoplay = true,
-  surfaceId,
-  controls = true,
-  resizeMode,
-  orientation,
-  fullscreenOrientation,
-  style,
-  ...rest
-}: VideoPlayerProps) {
-  const manager = useVideoManager();
-  const id = surfaceId ?? `player:${source.id}`;
+export const VideoPlayer = forwardRef<VideoManager, VideoPlayerProps>(
+  (
+    {
+      source,
+      autoplay = true,
+      surfaceId,
+      controls = true,
+      resizeMode,
+      repeat,
+      muted,
+      orientation,
+      fullscreenOrientation,
+      pauseOnFocusLost = true,
+      onLoadComplete,
+      onBuffering,
+      onError,
+      style,
+      ...rest
+    },
+    ref
+  ) => {
+    const manager = useVideoManager();
+    const id = surfaceId ?? `player:${source.id}`;
 
-  useEffect(() => {
-    manager.setSource(source, { autoplay, surfaceId: id });
-    // Attach on mount / when the video identity changes. Other source
-    // fields (title, headers) don't retrigger: identity is source.id.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [manager, source.id, id]);
+    useImperativeHandle(ref, () => manager, [manager]);
 
-  useEffect(() => {
-    if (resizeMode) {
-      manager.setResizeMode(resizeMode);
-    }
-  }, [manager, resizeMode]);
+    useEffect(() => {
+      manager.setSource(source, { autoplay, surfaceId: id });
+      // Attach on mount / when the video identity changes. Other source
+      // fields (title, headers) don't retrigger: identity is source.id.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [manager, source.id, id]);
 
-  useEffect(() => {
-    if (!orientation || orientation === 'auto') {
-      return;
-    }
-    manager.setOrientation(orientation);
-    return () => manager.setOrientation('auto');
-  }, [manager, orientation]);
+    useEffect(() => {
+      if (resizeMode) {
+        manager.setResizeMode(resizeMode);
+      }
+    }, [manager, resizeMode]);
 
-  useEffect(() => {
-    if (!fullscreenOrientation) {
-      return;
-    }
-    manager.setFullscreenOrientation(fullscreenOrientation);
-    return () => manager.setFullscreenOrientation(null);
-  }, [manager, fullscreenOrientation]);
+    useEffect(() => {
+      if (repeat === undefined) {
+        return;
+      }
+      manager.setRepeat(repeat);
+    }, [manager, repeat]);
 
-  return (
-    <View style={[styles.container, style]} {...rest}>
-      <VideoSurface surfaceId={id} style={styles.surface} />
-      {controls ? <VideoControls /> : null}
-    </View>
-  );
-}
+    useEffect(() => {
+      if (muted === undefined) {
+        return;
+      }
+      if (muted) {
+        manager.mute();
+      } else {
+        manager.unmute();
+      }
+    }, [manager, muted]);
+
+    useEffect(() => {
+      if (!orientation || orientation === 'auto') {
+        return;
+      }
+      manager.setOrientation(orientation);
+      return () => manager.setOrientation('auto');
+    }, [manager, orientation]);
+
+    useEffect(() => {
+      if (!fullscreenOrientation) {
+        return;
+      }
+      manager.setFullscreenOrientation(fullscreenOrientation);
+      return () => manager.setFullscreenOrientation(null);
+    }, [manager, fullscreenOrientation]);
+
+    useEffect(() => {
+      if (!pauseOnFocusLost) {
+        return;
+      }
+      const sub = AppState.addEventListener('change', (next) => {
+        // Only the player currently owning the engine reacts, so a video
+        // attached to another surface keeps playing untouched.
+        if (next !== 'active' && manager.store.getState().surfaceId === id) {
+          manager.pause();
+        }
+      });
+      return () => sub.remove();
+    }, [manager, id, pauseOnFocusLost]);
+
+    useVideoEvents({
+      onLoad: onLoadComplete,
+      onBuffer: (e) => onBuffering?.(e.buffering),
+      onError,
+    });
+
+    return (
+      <View style={[styles.container, style]} {...rest}>
+        <VideoSurface surfaceId={id} style={styles.surface} />
+        {controls ? <VideoControls /> : null}
+      </View>
+    );
+  }
+);
+
+VideoPlayer.displayName = 'VideoPlayer';
 
 const styles = StyleSheet.create({
   container: {

package/src/index.ts

@@ -14,6 +14,12 @@ export {
   type VideoSurfaceProps,
 } from './components/VideoSurface';
 export { VideoPlayer, type VideoPlayerProps } from './components/VideoPlayer';
+export {
+  VideoFeed,
+  feedSurfaceId,
+  type VideoFeedProps,
+  type VideoFeedRenderInfo,
+} from './components/VideoFeed';
 export { FullscreenPlayer } from './components/FullscreenPlayer';
 export {
   FloatingPlayer,