chore: rework typescript integration

examples/basic/src/MultiValueControl.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 
 import {
   StyleSheet,
@@ -12,16 +12,16 @@ import {
 * MultiValueControl displays a list clickable text view
 */
 
-interface MultiValueControlType {
+interface MultiValueControlType<T> {
   // a list a string or number to be displayed
-  values: Array<string | number>
+  values: Array<T>
   // The selected value in values
-  selected?: string | number
+  selected?: T
   // callback to press onPress
-  onPress: (arg: string | number) => any
+  onPress: (arg: T) => any
 }
 
-const MultiValueControl = ({ values, selected, onPress }: MultiValueControlType) => {
+const MultiValueControl: FunctionComponent<MultiValueControlType<any>> = ({ values, selected, onPress }) => {
   const selectedStyle: TextStyle = StyleSheet.flatten([
     styles.option,
     {fontWeight: 'bold'},

examples/basic/src/VideoPlayer.tsx

@@ -17,7 +17,21 @@ import {
 
 import {Picker} from '@react-native-picker/picker';
 
-import Video, {VideoDecoderProperties} from 'react-native-video';
+import Video, {
+  AudioTrack,
+  OnAudioTracksData,
+  OnLoadData,
+  OnProgressData,
+  OnTextTracksData,
+  OnVideoAspectRatioData,
+  TextTrack,
+  VideoDecoderProperties,
+  OnBufferData,
+  OnAudioFocusChangedData,
+  OnVideoErrorData,
+  VideoRef,
+  ResizeMode
+} from 'react-native-video';
 import ToggleControl from './ToggleControl';
 import MultiValueControl from './MultiValueControl';
 
@@ -26,7 +40,7 @@ class VideoPlayer extends Component {
     rate: 1,
     volume: 1,
     muted: false,
-    resizeMode: 'contain',
+    resizeMode: ResizeMode.CONTAIN,
     duration: 0.0,
     currentTime: 0.0,
     videoWidth: 0,
@@ -106,7 +120,7 @@ class VideoPlayer extends Component {
       Platform.OS === 'android' ? this.srcAndroidList : this.srcIosList,
   );
 
-  video?: Video;
+  video?: VideoRef;
   seekPanResponder?: PanResponderInstance;
 
   popupInfo = () => {
@@ -129,13 +143,13 @@ class VideoPlayer extends Component {
     });
   };
 
-  onLoad = (data: any) => {
+  onLoad = (data: OnLoadData) => {
     this.setState({duration: data.duration, loading: false});
     this.onAudioTracks(data);
     this.onTextTracks(data);
   };
 
-  onProgress = (data: any) => {
+  onProgress = (data: OnProgressData) => {
     if (!this.state.seeking) {
       const position = this.calculateSeekerPosition();
       this.setSeekerPosition(position);
@@ -148,8 +162,8 @@ class VideoPlayer extends Component {
     this.setState({isLoading: true});
   };
 
-  onAudioTracks = (data: any) => {
-    const selectedTrack = data.audioTracks?.find((x: any) => {
+  onAudioTracks = (data: OnAudioTracksData) => {
+    const selectedTrack = data.audioTracks?.find((x: AudioTrack) => {
       return x.selected;
     });
     this.setState({
@@ -165,8 +179,8 @@ class VideoPlayer extends Component {
     }
   };
 
-  onTextTracks = (data: any) => {
-    const selectedTrack = data.textTracks?.find((x: any) => {
+  onTextTracks = (data: OnTextTracksData) => {
+    const selectedTrack = data.textTracks?.find((x: TextTrack) => {
       return x.selected;
     });
 
@@ -184,15 +198,15 @@ class VideoPlayer extends Component {
     }
   };
 
-  onAspectRatio = (data: any) => {
+  onAspectRatio = (data: OnVideoAspectRatioData) => {
     console.log('onAspectRadio called ' + JSON.stringify(data));
     this.setState({
       videoWidth: data.width,
       videoHeight: data.height,
     });
   };
 
-  onVideoBuffer = (param: any) => {
+  onVideoBuffer = (param: OnBufferData) => {
     console.log('onVideoBuffer');
     this.setState({isLoading: param.isBuffering});
   };
@@ -206,7 +220,7 @@ class VideoPlayer extends Component {
     this.setState({paused: true});
   };
 
-  onAudioFocusChanged = (event: {hasAudioFocus: boolean}) => {
+  onAudioFocusChanged = (event: OnAudioFocusChangedData) => {
     this.setState({paused: !event.hasAudioFocus});
   };
 
@@ -233,9 +247,9 @@ class VideoPlayer extends Component {
     }
   };
 
-  onError = (err: any) => {
-    console.log(JSON.stringify(err?.error.errorCode));
-    this.toast(true, 'error: ' + err?.error.errorCode);
+  onError = (err: OnVideoErrorData) => {
+    console.log(JSON.stringify(err));
+    this.toast(true, 'error: ' + JSON.stringify(err));
   };
 
   onEnd = () => {
@@ -488,7 +502,7 @@ class VideoPlayer extends Component {
   onVolumeSelected = (value: string | number) => {
     this.setState({volume: value});
   }
-  onResizeModeSelected = (value: string | number) => {
+  onResizeModeSelected = (value: ResizeMode) => {
     this.setState({resizeMode: value});
   }
 
@@ -572,7 +586,7 @@ class VideoPlayer extends Component {
                   selected={this.state.volume}
                 />
                 <MultiValueControl
-                  values={['cover', 'contain', 'stretch']}
+                  values={[ResizeMode.COVER, ResizeMode.CONTAIN, ResizeMode.STRETCH]}
                   onPress={this.onResizeModeSelected}
                   selected={this.state.resizeMode}
                 />
@@ -648,7 +662,7 @@ class VideoPlayer extends Component {
     return (
       <TouchableOpacity style={viewStyle}>
         <Video
-          ref={(ref: Video) => {
+          ref={(ref: VideoRef) => {
             this.video = ref;
           }}
           source={this.srcList[this.state.srcListId]}

src/Video.tsx

@@ -8,34 +8,38 @@ import React, {
   type ComponentRef,
 } from 'react';
 import {View, StyleSheet, Image, Platform} from 'react-native';
-import NativeVideoComponent from './VideoNativeComponent';
+import NativeVideoComponent, {
+  type VideoComponentType,
+} from './VideoNativeComponent';
+
+import type {StyleProp, ImageStyle, NativeSyntheticEvent} from 'react-native';
+import type {ReactVideoProps} from './types/video';
+import {getReactTag, resolveAssetSourceForVideo} from './utils';
+import {VideoManager} from './VideoNativeComponent';
 import type {
   OnAudioFocusChangedData,
   OnAudioTracksData,
+  OnBandwidthUpdateData,
+  OnBufferData,
+  OnExternalPlaybackChangeData,
+  OnGetLicenseData,
+  OnLoadData,
+  OnLoadStartData,
+  OnPictureInPictureStatusChangedData,
   OnPlaybackStateChangedData,
+  OnProgressData,
+  OnReceiveAdEventData,
+  OnSeekData,
   OnTextTracksData,
   OnTimedMetadataData,
+  OnVideoAspectRatioData,
   OnVideoErrorData,
   OnVideoTracksData,
-} from './VideoNativeComponent';
+} from './types/events';
 
-import type {StyleProp, ImageStyle, NativeSyntheticEvent} from 'react-native';
-import {
-  type VideoComponentType,
-  type OnLoadData,
-  type OnGetLicenseData,
-  type OnLoadStartData,
-  type OnProgressData,
-  type OnSeekData,
-  type OnPictureInPictureStatusChangedData,
-  type OnBandwidthUpdateData,
-  type OnBufferData,
-  type OnExternalPlaybackChangeData,
-  type OnReceiveAdEventData,
-  VideoManager,
-} from './VideoNativeComponent';
-import type {ReactVideoProps} from './types/video';
-import {getReactTag, resolveAssetSourceForVideo} from './utils';
+export type VideoSaveData = {
+  uri: string;
+};
 
 export interface VideoRef {
   seek: (time: number, tolerance?: number) => void;
@@ -46,6 +50,7 @@ export interface VideoRef {
   restoreUserInterfaceForPictureInPictureStopCompleted: (
     restore: boolean,
   ) => void;
+  save: () => Promise<VideoSaveData>;
 }
 
 const Video = forwardRef<VideoRef, ReactVideoProps>(
@@ -88,6 +93,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       onAudioTracks,
       onTextTracks,
       onVideoTracks,
+      onAspectRatio,
       ...rest
     },
     ref,
@@ -122,7 +128,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         uri = `file://${uri}`;
       }
       if (!uri) {
-        console.warn('Trying to load empty source');
+        console.log('Trying to load empty source');
       }
       const isNetwork = !!(uri && uri.match(/^https?:/));
       const isAsset = !!(
@@ -214,7 +220,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           nativeRef.current?.setNativeProps({
             seek: {
               time,
-              tolerance,
+              tolerance: tolerance || 0,
             },
           });
         },
@@ -234,16 +240,16 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       setIsFullscreen(false);
     }, [setIsFullscreen]);
 
-    const save = useCallback(async () => {
-      await VideoManager.save(getReactTag(nativeRef));
+    const save = useCallback(() => {
+      return VideoManager.save(getReactTag(nativeRef));
     }, []);
 
-    const pause = useCallback(async () => {
-      await VideoManager.setPlayerPauseState(true, getReactTag(nativeRef));
+    const pause = useCallback(() => {
+      return VideoManager.setPlayerPauseState(true, getReactTag(nativeRef));
     }, []);
 
-    const resume = useCallback(async () => {
-      await VideoManager.setPlayerPauseState(false, getReactTag(nativeRef));
+    const resume = useCallback(() => {
+      return VideoManager.setPlayerPauseState(false, getReactTag(nativeRef));
     }, []);
 
     const restoreUserInterfaceForPictureInPictureStopCompleted = useCallback(
@@ -386,6 +392,13 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       [onReceiveAdEvent],
     );
 
+    const _onVideoAspectRatio = useCallback(
+      (e: NativeSyntheticEvent<OnVideoAspectRatioData>) => {
+        onAspectRatio?.(e.nativeEvent);
+      },
+      [onAspectRatio],
+    );
+
     const onGetLicense = useCallback(
       (event: NativeSyntheticEvent<OnGetLicenseData>) => {
         if (drm && drm.getLicense instanceof Function) {
@@ -483,7 +496,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           onVideoEnd={onEnd}
           onVideoBuffer={onVideoBuffer}
           onVideoPlaybackStateChanged={onVideoPlaybackStateChanged}
-          onBandwidthUpdate={_onBandwidthUpdate}
+          onVideoBandwidthUpdate={_onBandwidthUpdate}
           onTimedMetadata={_onTimedMetadata}
           onAudioTracks={_onAudioTracks}
           onTextTracks={_onTextTracks}
@@ -502,6 +515,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           onRestoreUserInterfaceForPictureInPictureStop={
             onRestoreUserInterfaceForPictureInPictureStop
           }
+          onVideoAspectRatio={_onVideoAspectRatio}
           onReceiveAdEvent={_onReceiveAdEvent}
         />
         {showPoster ? (