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>
This commit is contained in:
Olivier Bouillet
2023-10-26 08:46:04 +02:00
committed by GitHub
parent 286418e4a5
commit 0f8467f51d
16 changed files with 404 additions and 169 deletions

View File

@@ -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 ? (

View File

@@ -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,

View File

@@ -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;

View File

@@ -1,6 +0,0 @@
export default {
WIDEVINE: 'widevine',
PLAYREADY: 'playready',
CLEARKEY: 'clearkey',
FAIRPLAY: 'fairplay',
} as const;

View File

@@ -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;

View File

@@ -1,5 +0,0 @@
export default {
SRT: 'application/x-subrip',
TTML: 'application/ttml+xml',
VTT: 'text/vtt',
} as const;

View File

@@ -1,5 +0,0 @@
export default {
contain: 'contain',
cover: 'cover',
stretch: 'stretch',
} as const;

20
src/types/FilterType.ts Normal file
View File

@@ -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;

6
src/types/Orientation.ts Normal file
View File

@@ -0,0 +1,6 @@
enum Orientation {
PORTRAIT = 'portrait',
LANDSCAPE = 'landscape',
}
export default Orientation;

8
src/types/ResizeMode.ts Normal file
View File

@@ -0,0 +1,8 @@
enum ResizeMode {
NONE = 'none',
CONTAIN = 'contain',
COVER = 'cover',
STRETCH = 'stretch',
}
export default ResizeMode;

View File

@@ -0,0 +1,7 @@
enum TextTrackType {
SRT = 'application/x-subrip',
TTML = 'application/ttml+xml',
VTT = 'text/vtt',
}
export default TextTrackType;

View File

@@ -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;
}

7
src/types/index.ts Normal file
View File

@@ -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';

View File

@@ -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