feat: add ability to define poster props as Image type and render poster as custom component (#3972)

examples/basic/src/components/Indicator.tsx

@@ -1,22 +1,8 @@
-import React, {FC, memo} from 'react';
-import {ActivityIndicator, View} from 'react-native';
-import styles from '../styles.tsx';
+import React, {memo} from 'react';
+import {ActivityIndicator} from 'react-native';
 
-type Props = {
-  isLoading: boolean;
-};
-
-const _Indicator: FC<Props> = ({isLoading}) => {
-  if (!isLoading) {
-    return <View />;
-  }
-  return (
-    <ActivityIndicator
-      color="#3235fd"
-      size="large"
-      style={styles.IndicatorStyle}
-    />
-  );
+const _Indicator = () => {
+  return <ActivityIndicator color="#3235fd" size="large" />;
 };
 
 export const Indicator = memo(_Indicator);

examples/basic/src/components/Overlay.tsx

@@ -5,19 +5,11 @@ import React, {
   type Dispatch,
   type SetStateAction,
 } from 'react';
-import {Indicator} from './Indicator.tsx';
 import {View} from 'react-native';
 import styles from '../styles.tsx';
 import ToggleControl from '../ToggleControl.tsx';
-import {
-  isAndroid,
-  isIos,
-  samplePoster,
-  textTracksSelectionBy,
-} from '../constants';
-import MultiValueControl, {
-  type MultiValueControlPropType,
-} from '../MultiValueControl.tsx';
+import {isAndroid, isIos, textTracksSelectionBy} from '../constants';
+import MultiValueControl from '../MultiValueControl.tsx';
 import {
   ResizeMode,
   VideoRef,
@@ -69,8 +61,8 @@ type Props = {
   setPaused: Dispatch<SetStateAction<boolean>>;
   repeat: boolean;
   setRepeat: Dispatch<SetStateAction<boolean>>;
-  poster: string | undefined;
-  setPoster: Dispatch<SetStateAction<string | undefined>>;
+  showPoster: boolean;
+  setShowPoster: Dispatch<SetStateAction<boolean>>;
   muted: boolean;
   setMuted: Dispatch<SetStateAction<boolean>>;
   currentTime: number;
@@ -108,8 +100,8 @@ const _Overlay = forwardRef<VideoRef, Props>((props, ref) => {
     setPaused,
     setRepeat,
     repeat,
-    setPoster,
-    poster,
+    setShowPoster,
+    showPoster,
     setMuted,
     muted,
     duration,
@@ -217,14 +209,12 @@ const _Overlay = forwardRef<VideoRef, Props>((props, ref) => {
 
   const toggleRepeat = () => setRepeat(prev => !prev);
 
-  const togglePoster = () =>
-    setPoster(prev => (prev ? undefined : samplePoster));
+  const togglePoster = () => setShowPoster(prev => !prev);
 
   const toggleMuted = () => setMuted(prev => !prev);
 
   return (
     <>
-      <Indicator isLoading={isLoading} />
       <View style={styles.topControls}>
         <View style={styles.resizeModeControl}>
           <TopControl
@@ -270,7 +260,7 @@ const _Overlay = forwardRef<VideoRef, Props>((props, ref) => {
               <ToggleControl onPress={toggleFullscreen} text="fullscreen" />
               <ToggleControl onPress={openDecoration} text="decoration" />
               <ToggleControl
-                isSelected={!!poster}
+                isSelected={showPoster}
                 onPress={togglePoster}
                 selectedText="poster"
                 unselectedText="no poster"

examples/basic/src/components/VideoLoader.tsx

@@ -0,0 +1,15 @@
+import {Text, View} from 'react-native';
+import {Indicator} from './Indicator.tsx';
+import React, {memo} from 'react';
+import styles from '../styles.tsx';
+
+const _VideoLoader = () => {
+  return (
+    <View style={styles.indicatorContainer}>
+      <Text style={styles.indicatorText}>Loading...</Text>
+      <Indicator />
+    </View>
+  );
+};
+
+export const VideoLoader = memo(_VideoLoader);

examples/basic/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './VideoLoader';
 export * from './Indicator';
 export * from './Seeker';
 export * from './AudioTracksSelector';