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>
2023-10-26 08:46:04 +02:00 · 2023-10-26 08:46:04 +02:00 · 0f8467f51d
commit 0f8467f51d
parent 286418e4a5
16 changed files with 404 additions and 169 deletions
--- 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'},
--- 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]}
--- 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 ? (
--- 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,
--- 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;
--- a/src/lib/DRMType.ts
+++ b/src/lib/DRMType.ts
@ -1,6 +0,0 @@
-export default {
-  WIDEVINE: 'widevine',
-  PLAYREADY: 'playready',
-  CLEARKEY: 'clearkey',
-  FAIRPLAY: 'fairplay',
-} as const;
--- a/src/lib/FilterType.ts
+++ b/src/lib/FilterType.ts
@ -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;
--- a/src/lib/TextTrackType.ts
+++ b/src/lib/TextTrackType.ts
@ -1,5 +0,0 @@
-export default {
-  SRT: 'application/x-subrip',
-  TTML: 'application/ttml+xml',
-  VTT: 'text/vtt',
-} as const;
--- a/src/lib/VideoResizeMode.ts
+++ b/src/lib/VideoResizeMode.ts
@ -1,5 +0,0 @@
-export default {
-  contain: 'contain',
-  cover: 'cover',
-  stretch: 'stretch',
-} as const;
--- a/src/types/FilterType.ts
+++ 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;
--- a/src/types/Orientation.ts
+++ b/src/types/Orientation.ts
@ -0,0 +1,6 @@
+enum Orientation {
+  PORTRAIT = 'portrait',
+  LANDSCAPE = 'landscape',
+}
+
+export default Orientation;
--- a/src/types/ResizeMode.ts
+++ b/src/types/ResizeMode.ts
@ -0,0 +1,8 @@
+enum ResizeMode {
+  NONE = 'none',
+  CONTAIN = 'contain',
+  COVER = 'cover',
+  STRETCH = 'stretch',
+}
+
+export default ResizeMode;
--- a/src/types/TextTrackType.ts
+++ 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;
--- 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;
 }
--- a/src/types/index.ts
+++ 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';
--- 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