fix(JS): improve loader api to allow function call instead of component (#4171)

src/Video.tsx

@@ -127,8 +127,18 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
 
     const isPosterDeprecated = typeof poster === 'string';
 
+    const _renderLoader = useMemo(
+      () =>
+        !renderLoader
+          ? undefined
+          : renderLoader instanceof Function
+          ? renderLoader
+          : () => renderLoader,
+      [renderLoader],
+    );
+
     const hasPoster = useMemo(() => {
-      if (renderLoader) {
+      if (_renderLoader) {
         return true;
       }
 
@@ -137,7 +147,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       }
 
       return !!poster?.source;
-    }, [isPosterDeprecated, poster, renderLoader]);
+    }, [isPosterDeprecated, poster, _renderLoader]);
 
     const [showPoster, setShowPoster] = useState(hasPoster);
 
@@ -688,15 +698,23 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       }
 
       // render poster
-      if (renderLoader && (poster || posterResizeMode)) {
+      if (_renderLoader && (poster || posterResizeMode)) {
         console.warn(
           'You provided both `renderLoader` and `poster` or `posterResizeMode` props. `renderLoader` will be used.',
         );
       }
 
       // render loader
-      if (renderLoader) {
-        return <View style={StyleSheet.absoluteFill}>{renderLoader}</View>;
+      if (_renderLoader) {
+        return (
+          <View style={StyleSheet.absoluteFill}>
+            {_renderLoader({
+              source: source,
+              style: posterStyle,
+              resizeMode: resizeMode,
+            })}
+          </View>
+        );
       }
 
       return (
@@ -711,8 +729,10 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       isPosterDeprecated,
       poster,
       posterResizeMode,
-      renderLoader,
+      _renderLoader,
       showPoster,
+      source,
+      resizeMode,
     ]);
 
     const _style: StyleProp<ViewStyle> = useMemo(

src/types/video.ts

@@ -7,6 +7,7 @@ import type {
   ViewStyle,
   ImageRequireSource,
   ImageURISource,
+  ImageStyle,
 } from 'react-native';
 import type {ReactNode} from 'react';
 import type VideoResizeMode from './ResizeMode';
@@ -254,6 +255,12 @@ export type ControlsStyles = {
   hideNotificationBarOnFullScreenMode?: boolean;
 };
 
+export interface ReactVideoRenderLoaderProps {
+  source?: ReactVideoSource;
+  style?: StyleProp<ImageStyle>;
+  resizeMode?: EnumValues<VideoResizeMode>;
+}
+
 export interface ReactVideoProps extends ReactVideoEvents, ViewProps {
   source?: ReactVideoSource;
   /** @deprecated Use source.drm */
@@ -295,7 +302,7 @@ export interface ReactVideoProps extends ReactVideoEvents, ViewProps {
   preventsDisplaySleepDuringVideoPlayback?: boolean;
   progressUpdateInterval?: number;
   rate?: number;
-  renderLoader?: ReactNode;
+  renderLoader?: ReactNode | ((arg0: ReactVideoRenderLoaderProps) => ReactNode);
   repeat?: boolean;
   reportBandwidth?: boolean; //Android
   resizeMode?: EnumValues<VideoResizeMode>;