From 0f8467f51d9fb90167bbc3709ed6f69fb69c86a8 Mon Sep 17 00:00:00 2001
From: Olivier Bouillet <62574056+freeboub@users.noreply.github.com>
Date: Thu, 26 Oct 2023 08:46:04 +0200
Subject: [PATCH] chore: rework typescript integration (#3304)

* create few new types
* Add missing api

---------

Co-authored-by: olivier <olivier.bouillet@ifeelsmart.com>
Co-authored-by: Krzysztof Moch <krzysmoch.programs@gmail.com>
---
 examples/basic/src/MultiValueControl.tsx |  12 +-
 examples/basic/src/VideoPlayer.tsx       |  50 +++++---
 src/Video.tsx                            |  78 +++++++-----
 src/VideoNativeComponent.ts              |  43 +++++--
 src/index.ts                             |   8 +-
 src/lib/DRMType.ts                       |   6 -
 src/lib/FilterType.ts                    |  18 ---
 src/lib/TextTrackType.ts                 |   5 -
 src/lib/VideoResizeMode.ts               |   5 -
 src/types/FilterType.ts                  |  20 +++
 src/types/Orientation.ts                 |   6 +
 src/types/ResizeMode.ts                  |   8 ++
 src/types/TextTrackType.ts               |   7 +
 src/types/events.ts                      | 155 ++++++++++++++++++++---
 src/types/index.ts                       |   7 +
 src/types/video.ts                       | 145 ++++++++++++++-------
 16 files changed, 404 insertions(+), 169 deletions(-)
 delete mode 100644 src/lib/DRMType.ts
 delete mode 100644 src/lib/FilterType.ts
 delete mode 100644 src/lib/TextTrackType.ts
 delete mode 100644 src/lib/VideoResizeMode.ts
 create mode 100644 src/types/FilterType.ts
 create mode 100644 src/types/Orientation.ts
 create mode 100644 src/types/ResizeMode.ts
 create mode 100644 src/types/TextTrackType.ts
 create mode 100644 src/types/index.ts

diff --git a/examples/basic/src/MultiValueControl.tsx b/examples/basic/src/MultiValueControl.tsx
index 522f55eb..ae33dad2 100644
--- a/examples/basic/src/MultiValueControl.tsx
+++ b/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'},
diff --git a/examples/basic/src/VideoPlayer.tsx b/examples/basic/src/VideoPlayer.tsx
index bee804af..84719359 100644
--- a/examples/basic/src/VideoPlayer.tsx
+++ b/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,7 +198,7 @@ class VideoPlayer extends Component {
     }
   };
 
-  onAspectRatio = (data: any) => {
+  onAspectRatio = (data: OnVideoAspectRatioData) => {
     console.log('onAspectRadio called ' + JSON.stringify(data));
     this.setState({
       videoWidth: data.width,
@@ -192,7 +206,7 @@ class VideoPlayer extends Component {
     });
   };
 
-  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]}
diff --git a/src/Video.tsx b/src/Video.tsx
index f4582864..cf2c82eb 100644
--- a/src/Video.tsx
+++ b/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 type {
-  OnAudioFocusChangedData,
-  OnAudioTracksData,
-  OnPlaybackStateChangedData,
-  OnTextTracksData,
-  OnTimedMetadataData,
-  OnVideoErrorData,
-  OnVideoTracksData,
+import NativeVideoComponent, {
+  type VideoComponentType,
 } from './VideoNativeComponent';
 
 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';
+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 './types/events';
+
+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(
@@ -385,6 +391,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) {
@@ -482,7 +495,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           onVideoEnd={onEnd}
           onVideoBuffer={onVideoBuffer}
           onVideoPlaybackStateChanged={onVideoPlaybackStateChanged}
-          onBandwidthUpdate={_onBandwidthUpdate}
+          onVideoBandwidthUpdate={_onBandwidthUpdate}
           onTimedMetadata={_onTimedMetadata}
           onAudioTracks={_onAudioTracks}
           onTextTracks={_onTextTracks}
@@ -501,6 +514,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           onRestoreUserInterfaceForPictureInPictureStop={
             onRestoreUserInterfaceForPictureInPictureStop
           }
+          onVideoAspectRatio={_onVideoAspectRatio}
           onReceiveAdEvent={_onReceiveAdEvent}
         />
         {showPoster ? (
diff --git a/src/VideoNativeComponent.ts b/src/VideoNativeComponent.ts
index f30edd44..627c84f6 100644
--- a/src/VideoNativeComponent.ts
+++ b/src/VideoNativeComponent.ts
@@ -4,6 +4,10 @@ import type {
   ViewProps,
 } from 'react-native';
 import {NativeModules, requireNativeComponent} from 'react-native';
+import type ResizeMode from './types/ResizeMode';
+import type FilterType from './types/FilterType';
+import type Orientation from './types/Orientation';
+import type {OnTextTracksTypeData} from './types';
 
 // -------- There are types for native component (future codegen) --------
 // if you are looking for types for react component, see src/types/video.ts
@@ -119,9 +123,11 @@ export type OnLoadData = Readonly<{
   naturalSize: Readonly<{
     width: number;
     height: number;
-    orientation: 'portrait' | 'landscape';
+    orientation: Orientation;
   }>;
-}>;
+}> &
+  OnAudioTracksData &
+  OnTextTracksData;
 
 export type OnLoadStartData = Readonly<{
   isNetwork: boolean;
@@ -129,6 +135,11 @@ export type OnLoadStartData = Readonly<{
   uri: string;
 }>;
 
+export type OnVideoAspectRatioData = Readonly<{
+  width: number;
+  height: number;
+}>;
+
 export type OnBufferData = Readonly<{isBuffering: boolean}>;
 
 export type OnProgressData = Readonly<{
@@ -139,6 +150,9 @@ export type OnProgressData = Readonly<{
 
 export type OnBandwidthUpdateData = Readonly<{
   bitrate: number;
+  width: number;
+  height: number;
+  trackId: number;
 }>;
 
 export type OnSeekData = Readonly<{
@@ -181,7 +195,7 @@ export type OnTextTracksData = Readonly<{
       /**
        * iOS only supports VTT, Android supports all 3
        */
-      type?: 'srt' | 'ttml' | 'vtt';
+      type?: OnTextTracksTypeData;
       selected?: boolean;
     }>
   >;
@@ -223,19 +237,24 @@ export type OnReceiveAdEventData = Readonly<{
 }>;
 
 export type OnVideoErrorData = Readonly<{
+  errorString: string;
+  errorException: string;
+  errorStackTrace: string;
+  errorCode: string;
   error: string;
 }>;
 
 export type OnAudioFocusChangedData = Readonly<{
-  hasFocus: boolean;
+  hasAudioFocus: boolean;
 }>;
+
 export interface VideoNativeProps extends ViewProps {
   src?: VideoSrc;
   drm?: Drm;
   adTagUrl?: string;
   allowsExternalPlayback?: boolean; // ios, true
   maxBitRate?: number;
-  resizeMode?: 'none' | 'cover' | 'contain' | 'stretch';
+  resizeMode?: ResizeMode;
   repeat?: boolean;
   automaticallyWaitsToMinimizeStalling?: boolean;
   textTracks?: TextTracks;
@@ -244,7 +263,7 @@ export interface VideoNativeProps extends ViewProps {
   paused?: boolean;
   muted?: boolean;
   controls?: boolean;
-  filter?: Filter;
+  filter?: FilterType;
   filterEnabled?: boolean;
   volume?: number; // default 1.0
   playInBackground?: boolean;
@@ -277,13 +296,15 @@ export interface VideoNativeProps extends ViewProps {
   trackId?: string; // Android
   useTextureView?: boolean; // Android
   useSecureView?: boolean; // Android
-
   onVideoLoad?: (event: NativeSyntheticEvent<OnLoadData>) => void;
   onVideoLoadStart?: (event: NativeSyntheticEvent<OnLoadStartData>) => void;
+  onVideoAspectRatio?: (
+    event: NativeSyntheticEvent<OnVideoAspectRatioData>,
+  ) => void;
   onVideoBuffer?: (event: NativeSyntheticEvent<OnBufferData>) => void;
   onVideoError?: (event: NativeSyntheticEvent<OnVideoErrorData>) => void;
   onVideoProgress?: (event: NativeSyntheticEvent<OnProgressData>) => void;
-  onBandwidthUpdate?: (
+  onVideoBandwidthUpdate?: (
     event: NativeSyntheticEvent<OnBandwidthUpdateData>,
   ) => void;
   onVideoSeek?: (event: NativeSyntheticEvent<OnSeekData>) => void;
@@ -333,8 +354,12 @@ export interface VideoNativeProps extends ViewProps {
 
 export type VideoComponentType = HostComponent<VideoNativeProps>;
 
+export type VideoSaveData = {
+  uri: string;
+};
+
 export interface VideoManagerType {
-  save: (reactTag: number) => Promise<void>;
+  save: (reactTag: number) => Promise<VideoSaveData>;
   setPlayerPauseState: (paused: boolean, reactTag: number) => Promise<void>;
   setLicenseResult: (
     result: string,
diff --git a/src/index.ts b/src/index.ts
index fb396b3e..331d8065 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,11 +1,5 @@
 import Video from './Video';
-
-export {default as FilterType} from './lib/FilterType';
-export {default as VideoResizeMode} from './lib/VideoResizeMode';
-export {default as TextTrackType} from './lib/TextTrackType';
-export {default as DRMType} from './lib/DRMType';
 export {VideoDecoderProperties} from './VideoNativeComponent';
-
+export * from './types';
 export type {VideoRef} from './Video';
-
 export default Video;
diff --git a/src/lib/DRMType.ts b/src/lib/DRMType.ts
deleted file mode 100644
index 4982965b..00000000
--- a/src/lib/DRMType.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  WIDEVINE: 'widevine',
-  PLAYREADY: 'playready',
-  CLEARKEY: 'clearkey',
-  FAIRPLAY: 'fairplay',
-} as const;
diff --git a/src/lib/FilterType.ts b/src/lib/FilterType.ts
deleted file mode 100644
index 32be8b07..00000000
--- a/src/lib/FilterType.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export default {
-  NONE: '',
-  INVERT: 'CIColorInvert',
-  MONOCHROME: 'CIColorMonochrome',
-  POSTERIZE: 'CIColorPosterize',
-  FALSE: 'CIFalseColor',
-  MAXIMUMCOMPONENT: 'CIMaximumComponent',
-  MINIMUMCOMPONENT: 'CIMinimumComponent',
-  CHROME: 'CIPhotoEffectChrome',
-  FADE: 'CIPhotoEffectFade',
-  INSTANT: 'CIPhotoEffectInstant',
-  MONO: 'CIPhotoEffectMono',
-  NOIR: 'CIPhotoEffectNoir',
-  PROCESS: 'CIPhotoEffectProcess',
-  TONAL: 'CIPhotoEffectTonal',
-  TRANSFER: 'CIPhotoEffectTransfer',
-  SEPIA: 'CISepiaTone',
-} as const;
diff --git a/src/lib/TextTrackType.ts b/src/lib/TextTrackType.ts
deleted file mode 100644
index c7a0dabd..00000000
--- a/src/lib/TextTrackType.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-  SRT: 'application/x-subrip',
-  TTML: 'application/ttml+xml',
-  VTT: 'text/vtt',
-} as const;
diff --git a/src/lib/VideoResizeMode.ts b/src/lib/VideoResizeMode.ts
deleted file mode 100644
index f407a212..00000000
--- a/src/lib/VideoResizeMode.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-  contain: 'contain',
-  cover: 'cover',
-  stretch: 'stretch',
-} as const;
diff --git a/src/types/FilterType.ts b/src/types/FilterType.ts
new file mode 100644
index 00000000..561dac0d
--- /dev/null
+++ b/src/types/FilterType.ts
@@ -0,0 +1,20 @@
+enum FilterType {
+  NONE = '',
+  INVERT = 'CIColorInvert',
+  MONOCHROME = 'CIColorMonochrome',
+  POSTERIZE = 'CIColorPosterize',
+  FALSE = 'CIFalseColor',
+  MAXIMUMCOMPONENT = 'CIMaximumComponent',
+  MINIMUMCOMPONENT = 'CIMinimumComponent',
+  CHROME = 'CIPhotoEffectChrome',
+  FADE = 'CIPhotoEffectFade',
+  INSTANT = 'CIPhotoEffectInstant',
+  MONO = 'CIPhotoEffectMono',
+  NOIR = 'CIPhotoEffectNoir',
+  PROCESS = 'CIPhotoEffectProcess',
+  TONAL = 'CIPhotoEffectTonal',
+  TRANSFER = 'CIPhotoEffectTransfer',
+  SEPIA = 'CISepiaTone',
+}
+
+export default FilterType;
diff --git a/src/types/Orientation.ts b/src/types/Orientation.ts
new file mode 100644
index 00000000..06c6ddc7
--- /dev/null
+++ b/src/types/Orientation.ts
@@ -0,0 +1,6 @@
+enum Orientation {
+  PORTRAIT = 'portrait',
+  LANDSCAPE = 'landscape',
+}
+
+export default Orientation;
diff --git a/src/types/ResizeMode.ts b/src/types/ResizeMode.ts
new file mode 100644
index 00000000..d4c254ca
--- /dev/null
+++ b/src/types/ResizeMode.ts
@@ -0,0 +1,8 @@
+enum ResizeMode {
+  NONE = 'none',
+  CONTAIN = 'contain',
+  COVER = 'cover',
+  STRETCH = 'stretch',
+}
+
+export default ResizeMode;
diff --git a/src/types/TextTrackType.ts b/src/types/TextTrackType.ts
new file mode 100644
index 00000000..2053a3c8
--- /dev/null
+++ b/src/types/TextTrackType.ts
@@ -0,0 +1,7 @@
+enum TextTrackType {
+  SRT = 'application/x-subrip',
+  TTML = 'application/ttml+xml',
+  VTT = 'text/vtt',
+}
+
+export default TextTrackType;
diff --git a/src/types/events.ts b/src/types/events.ts
index 983a1686..ee6305f9 100644
--- a/src/types/events.ts
+++ b/src/types/events.ts
@@ -1,22 +1,138 @@
-import type {
-  OnBandwidthUpdateData,
-  OnBufferData,
-  OnLoadData,
-  OnLoadStartData,
-  OnProgressData,
-  OnSeekData,
-  OnPlaybackData,
-  OnExternalPlaybackChangeData,
-  OnPictureInPictureStatusChangedData,
-  OnReceiveAdEventData,
-  OnVideoErrorData,
-  OnPlaybackStateChangedData,
-  OnAudioFocusChangedData,
-  OnTimedMetadataData,
-  OnAudioTracksData,
-  OnTextTracksData,
-  OnVideoTracksData,
-} from '../VideoNativeComponent';
+import type Orientation from './Orientation';
+
+export type OnLoadData = Readonly<{
+  currentTime: number;
+  duration: number;
+  naturalSize: Readonly<{
+    width: number;
+    height: number;
+    orientation: Orientation;
+  }>;
+}> &
+  OnAudioTracksData &
+  OnTextTracksData;
+
+export type OnVideoAspectRatioData = Readonly<{
+  width: number;
+  height: number;
+}>;
+
+export type OnLoadStartData = Readonly<{
+  isNetwork: boolean;
+  type: string;
+  uri: string;
+}>;
+
+export type OnProgressData = Readonly<{
+  currentTime: number;
+  playableDuration: number;
+  seekableDuration: number;
+}>;
+
+export type OnSeekData = Readonly<{
+  currentTime: number;
+  seekTime: number;
+}>;
+
+export type OnPlaybackStateChangedData = Readonly<{
+  isPlaying: boolean;
+}>;
+
+export type OnTimedMetadataData = Readonly<{
+  metadata: ReadonlyArray<
+    Readonly<{
+      value?: string;
+      identifier: string;
+    }>
+  >;
+}>;
+
+export type AudioTrack = Readonly<{
+  index: number;
+  title?: string;
+  language?: string;
+  bitrate?: number;
+  type?: string;
+  selected?: boolean;
+}>;
+
+export type OnAudioTracksData = Readonly<{
+  audioTracks: ReadonlyArray<AudioTrack>;
+}>;
+
+export enum OnTextTracksTypeData {
+  SRT = 'srt',
+  TTML = 'ttml',
+  VTT = 'vtt',
+}
+
+export type TextTrack = Readonly<{
+  index: number;
+  title?: string;
+  language?: string;
+  type?: OnTextTracksTypeData;
+  selected?: boolean;
+}>;
+
+export type OnTextTracksData = Readonly<{
+  textTracks: ReadonlyArray<TextTrack>;
+}>;
+
+export type OnVideoTracksData = Readonly<{
+  videoTracks: ReadonlyArray<
+    Readonly<{
+      trackId: number;
+      codecs?: string;
+      width?: number;
+      height?: number;
+      bitrate?: number;
+      selected?: boolean;
+    }>
+  >;
+}>;
+
+export type OnPlaybackData = Readonly<{
+  playbackRate: number;
+}>;
+
+export type OnExternalPlaybackChangeData = Readonly<{
+  isExternalPlaybackActive: boolean;
+}>;
+
+export type OnGetLicenseData = Readonly<{
+  licenseUrl: string;
+  contentId: string;
+  spcBase64: string;
+}>;
+
+export type OnPictureInPictureStatusChangedData = Readonly<{
+  isActive: boolean;
+}>;
+
+export type OnReceiveAdEventData = Readonly<{
+  event: string;
+}>;
+
+export type OnVideoErrorData = Readonly<{
+  errorString: string;
+  errorException: string;
+  errorStackTrace: string;
+  errorCode: string;
+  error: string;
+}>;
+
+export type OnAudioFocusChangedData = Readonly<{
+  hasAudioFocus: boolean;
+}>;
+
+export type OnBufferData = Readonly<{isBuffering: boolean}>;
+
+export type OnBandwidthUpdateData = Readonly<{
+  bitrate: number;
+  width: number;
+  height: number;
+  trackId: number;
+}>;
 
 export interface ReactVideoEvents {
   onAudioBecomingNoisy?: () => void; //Android, iOS
@@ -47,4 +163,5 @@ export interface ReactVideoEvents {
   onAudioTracks?: (e: OnAudioTracksData) => void; // Android
   onTextTracks?: (e: OnTextTracksData) => void; //Android
   onVideoTracks?: (e: OnVideoTracksData) => void; //Android
+  onAspectRatio?: (e: OnVideoAspectRatioData) => void;
 }
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 00000000..17901986
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,7 @@
+export * from './events';
+export {default as FilterType} from './FilterType';
+export * from './language';
+export {default as Orientation} from './Orientation';
+export {default as ResizeMode} from './ResizeMode';
+export {default as TextTrackType} from './TextTrackType';
+export * from './video';
diff --git a/src/types/video.ts b/src/types/video.ts
index c0686e20..e3b03bc0 100644
--- a/src/types/video.ts
+++ b/src/types/video.ts
@@ -1,26 +1,10 @@
 import type {ISO639_1} from './language';
 import type {ReactVideoEvents} from './events';
 import type {StyleProp, ViewStyle} from 'react-native';
+import type VideoResizeMode from './ResizeMode';
+import type FilterType from './FilterType';
 
-type Filter =
-  | 'None'
-  | 'CIColorInvert'
-  | 'CIColorMonochrome'
-  | 'CIColorPosterize'
-  | 'CIFalseColor'
-  | 'CIMaximumComponent'
-  | 'CIMinimumComponent'
-  | 'CIPhotoEffectChrome'
-  | 'CIPhotoEffectFade'
-  | 'CIPhotoEffectInstant'
-  | 'CIPhotoEffectMono'
-  | 'CIPhotoEffectNoir'
-  | 'CIPhotoEffectProcess'
-  | 'CIPhotoEffectTonal'
-  | 'CIPhotoEffectTransfer'
-  | 'CISepiaTone';
-
-type Headers = Record<string, string>;
+export type Headers = Record<string, string>;
 
 export type ReactVideoSource = Readonly<{
   uri?: string;
@@ -39,13 +23,20 @@ export type ReactVideoSource = Readonly<{
   customImageUri?: string;
 }>;
 
-type DebugConfig = Readonly<{
+export type DebugConfig = Readonly<{
   enable?: boolean;
   thread?: boolean;
 }>;
 
-export type ReactVideoDrm = Readonly<{
-  type?: 'widevine' | 'playready' | 'clearkey' | 'fairplay';
+export enum DrmType {
+  WIDEVINE = 'widevine',
+  PLAYREADY = 'playready',
+  CLEARKEY = 'clearkey',
+  FAIRPLAY = 'fairplay',
+}
+
+export type Drm = Readonly<{
+  type?: DrmType;
   licenseServer?: string;
   headers?: Headers;
   contentId?: string; // ios
@@ -60,7 +51,7 @@ export type ReactVideoDrm = Readonly<{
   /* eslint-enable @typescript-eslint/no-unused-vars */
 }>;
 
-type BufferConfig = {
+export type BufferConfig = {
   minBufferMs?: number;
   maxBufferMs?: number;
   bufferForPlaybackMs?: number;
@@ -70,17 +61,32 @@ type BufferConfig = {
   minBufferMemoryReservePercent?: number;
 };
 
-type SelectedTrack = {
-  type: 'system' | 'disabled' | 'title' | 'language' | 'index';
+export enum SelectedTrackType {
+  SYSTEM = 'system',
+  DISABLED = 'disabled',
+  TITLE = 'title',
+  LANGUAGE = 'language',
+  INDEX = 'index',
+}
+
+export type SelectedTrack = {
+  type: SelectedTrackType;
   value?: string | number;
 };
 
-type SelectedVideoTrack = {
-  type: 'auto' | 'disabled' | 'resolution' | 'index';
+export enum SelectedVideoTrackType {
+  AUDO = 'auto',
+  DISABLED = 'disabled',
+  RESOLUTION = 'resolution',
+  IUNDEX = 'index',
+}
+
+export type SelectedVideoTrack = {
+  type: SelectedVideoTrackType;
   value?: number;
 };
 
-type SubtitleStyle = {
+export type SubtitleStyle = {
   fontSize?: number;
   paddingTop?: number;
   paddingBottom?: number;
@@ -88,23 +94,80 @@ type SubtitleStyle = {
   paddingRight?: number;
 };
 
-type TextTracks = {
+export enum TextTracksType {
+  SUBRIP = 'application/x-subrip',
+  TTML = 'application/ttml+xml',
+  VTT = 'text/vtt',
+}
+
+export type TextTracks = {
   title: string;
   language: ISO639_1;
-  type: 'application/x-subrip' | 'application/ttml+xml' | 'text/vtt';
+  type: TextTracksType;
   uri: string;
 }[];
 
-type Chapters = {
+export type TextTrackType =
+  | 'system'
+  | 'disabled'
+  | 'title'
+  | 'language'
+  | 'index';
+
+export type SelectedTextTrack = Readonly<{
+  type: TextTrackType;
+  value?: string | number;
+}>;
+
+export type AudioTrackType =
+  | 'system'
+  | 'disabled'
+  | 'title'
+  | 'language'
+  | 'index';
+
+export type SelectedAudioTrack = Readonly<{
+  type: AudioTrackType;
+  value?: string | number;
+}>;
+
+export type Chapters = {
   title: string;
   startTime: number;
   endTime: number;
   uri?: string;
 };
 
+export enum FullscreenOrientationType {
+  ALL = 'all',
+  LANDSCAPE = 'landscape',
+  PORTRAIT = 'portrait',
+}
+
+export enum IgnoreSilentSwitchType {
+  INHERIT = 'inherit',
+  IGNORE = 'ignore',
+  OBEY = 'obey',
+}
+
+export enum MixWithOthersType {
+  INHERIT = 'inherit',
+  MIX = 'mix',
+  DUCK = 'duck',
+}
+
+export enum PosterResizeModeType {
+  CONTAIN = 'contain',
+  CENTER = 'center',
+  COVER = 'cover',
+  NONE = 'none',
+  REPEAT = 'repeat',
+  STRETCH = 'stretch',
+}
+
 export interface ReactVideoProps extends ReactVideoEvents {
   source?: ReactVideoSource;
-  drm?: ReactVideoDrm;
+  drm?: Drm;
   style?: StyleProp<ViewStyle>;
   adTagUrl?: string; // iOS
   audioOnly?: boolean;
@@ -117,37 +180,31 @@ export interface ReactVideoProps extends ReactVideoEvents {
   currentPlaybackTime?: number; // Android
   disableFocus?: boolean;
   disableDisconnectError?: boolean; // Android
-  filter?: Filter; // iOS
+  filter?: FilterType; // iOS
   filterEnabled?: boolean; // iOS
   focusable?: boolean; // Android
   fullscreen?: boolean; // iOS
   fullscreenAutorotate?: boolean; // iOS
-  fullscreenOrientation?: 'all' | 'landscape' | 'portrait'; // iOS
+  fullscreenOrientation?: FullscreenOrientationType; // iOS
   hideShutterView?: boolean; //	Android
-  ignoreSilentSwitch?: 'inherit' | 'ignore' | 'obey'; // iOS
+  ignoreSilentSwitch?: IgnoreSilentSwitchType; // iOS
   minLoadRetryCount?: number; // Android
   maxBitRate?: number;
-  mixWithOthers?: 'inherit' | 'mix' | 'duck'; // iOS
+  mixWithOthers?: MixWithOthersType; // iOS
   muted?: boolean;
   paused?: boolean;
   pictureInPicture?: boolean; // iOS
   playInBackground?: boolean;
   playWhenInactive?: boolean; // iOS
   poster?: string;
-  posterResizeMode?:
-    | 'contain'
-    | 'center'
-    | 'cover'
-    | 'none'
-    | 'repeat'
-    | 'stretch';
+  posterResizeMode?: PosterResizeModeType;
   preferredForwardBufferDuration?: number; // iOS
   preventsDisplaySleepDuringVideoPlayback?: boolean;
   progressUpdateInterval?: number;
   rate?: number;
   repeat?: boolean;
   reportBandwidth?: boolean; //Android
-  resizeMode?: 'none' | 'contain' | 'cover' | 'stretch';
+  resizeMode?: VideoResizeMode;
   selectedAudioTrack?: SelectedTrack;
   selectedTextTrack?: SelectedTrack;
   selectedVideoTrack?: SelectedVideoTrack; // android