Skip to content

Instantly share code, notes, and snippets.

@wildseansy

wildseansy/react-native-video-types.ts

Last active July 26, 2023 19:05
Show Gist options
  • Save wildseansy/f403c81d18fc57e19c5f86af8098dc0d to your computer and use it in GitHub Desktop.
Save wildseansy/f403c81d18fc57e19c5f86af8098dc0d to your computer and use it in GitHub Desktop.
Download ZIP
React Native Video Types
Raw
react-native-video-types.ts
// This documents most of the types available in react-native-video when rendering a player
// To use these types, can inject as follows
import RNVideo from 'react-native-video';
const Video = RNVideo as unknown as React.JSXElementConstructor<VideoProps>;
// ...Now use 'Video' as your react-native-video component, and you'll get the props.
// these below types were organized in 2020, so there may be new types available now in react-native-video
// The types are below:
import { Ref } from "react";
import { ViewProps, ImageResizeMode } from "react-native";
import RNVideo from 'react-native-video';
enum DRMType {
WIDEVINE = "widevine",
PLAYREADY = "playready",
CLEARKEY = "clearkey",
FAIRPLAY = "fairplay",
}
export type DRMProp = {
type: DRMType;
licenseServer: string;
headers: { [s: string]: number | string };
base64Certificate: boolean;
certificateUrl: string;
getLicense: (spcBase64: string, contentId: string, licenseUrl: string) => string;
};
export enum TextTrackType {
SRT = "application/x-subrip",
TTML = "application/ttml+xml",
VTT = "text/vtt",
CEA = "application/cea-608",
}
export type BandwidthEvent = {
bitrate: number;
};
export type SeekEvent = {
currentTime: number;
seekTime: number;
};
type IOSError = {
code: number;
domain: string;
localizedDescription: string;
localizedFailureReason: string;
localizedRecoverySuggestion: string;
};
type AndroidError = {
errorString: string;
errorException: string;
localizedDescription?: string;
};
export type VideoError = {
error: IOSError | AndroidError;
target?: number;
};
export type TimedMetadata = { value: string; identifier: string };
export type VideoProps = {
source: { uri: string; type?: string; workoutID?: string };
ref: Ref<RNVideo>;
onAudioBecomingNoisy?: () => void;
onBandwidthUpdate?: (e: BandwidthEvent) => void;
onEnd?: (e?: any) => void;
onExternalPlaybackChange?: (e?: { isExternalPlaybackActive: boolean }) => void;
onFullscreenPlayerWillPresent?: (e?: any) => void;
onFullscreenPlayerDidPresent?: (e?: any) => void;
onFullscreenPlayerWillDismiss?: (e?: any) => void;
onFullscreenPlayerDidDismiss?: (e?: any) => void;
onLoad?: (e: VideoLoadEvent) => void;
// seek: {
// time: number;
// tolerance: number;
// };
onLoadStart?: (e?: any) => void;
onReadyForDisplay?: (e?: any) => void;
onPictureInPictureStatusChanged?: (e?: { isActive: boolean }) => void;
onPlaybackRateChange?: (e?: { playbackRate: number }) => void;
onProgress?: (e?: any) => void;
onSeek?: (e?: SeekEvent) => void;
onRestoreUserInterfaceForPictureInPictureStop?: () => void;
onAudioFocusChanged?: (e: { hasAudioFocus: boolean }) => void;
volume?: number;
paused: boolean;
width: number;
height: number;
progressUpdateInterval?: number;
onBuffer?: (e: { isBuffering: boolean }) => void;
onTimedMetadata?: (e: TimedMetadata[]) => void;
onError?: (params: VideoError) => void;
onPlaybackStalled?: () => void;
onPlaybackResume?: () => void;
currentPlaybackTime?: number;
allowsExternalPlayback?: boolean;
pictureInPicture: boolean;
bufferConfig?: {
minBufferMs?: number;
maxBufferMs?: number;
bufferForPlaybackMs?: number;
bufferForPlaybackAfterRebufferMs?: number;
};
selectedAudioTrack?: {
type: TrackPreferenceType;
value: string | number;
};
selectedVideoTrack?: {
type: VideoTrackPreferenceType;
value?: string | number;
};
selectedTextTrack?: {
type: TrackPreferenceType;
value?: string | number;
};
textTracks?: {
title: string;
uri: string;
type: TextTrackType;
language: string;
}[];
resizeMode?: ImageResizeMode;
poster?: string;
posterResizeMode?: ImageResizeMode;
audioOnly?: boolean;
drm?: DRMProp;
disableFocus?: boolean;
hideShutterView?: boolean;
ignoreSilentSwitch: "inherit" | "ignore" | "obey";
maxBitRate?: number;
minLoadRetryCount?: number;
mixWithOthers?: number;
muted?: number;
playInBackground?: boolean;
playWhenInactive?: boolean;
preferredForwardBufferDuration?: boolean;
};
export type State = {
showPoster: boolean;
};
type VideoTrackPreferenceType = "auto" | "disabled" | "resolution" | "index";
type TrackPreferenceType = "title" | "index" | "disabled" | "language";
export type TextTrack = {
language: "" | "en";
type: TextTrackType;
title: string;
index: number;
};
export type VideoTrack = {
codecs: string;
trackId: string;
bitrate: number;
height: number;
width: number;
};
export type AudioTrack = {
language: "en" | string;
type: "audio/mp4a-latm" | string;
title: string;
//Some tracks have string for bitrate:
bitrate: string | number;
};
export type VideoLoadEvent = {
trackId: string;
duration: number;
canStepBackward: boolean;
canPlaySlowReverse: boolean;
canPlaySlowForward: boolean;
canPlayReverse: boolean;
canStepForward: boolean;
canPlayFastForward: boolean;
naturalSize: {
width: number;
height: number;
orientation: "landscape" | "portrait" | null;
};
textTracks: TextTrack[];
videoTracks: VideoTrack[];
audioTracks: AudioTrack[];
currentTime: number;
title: string;
};
export type LoadStartEvent = {
isNetwork: boolean;
type: string;
uri: string;
};
export type ProgressEvent = {
currentTime: number;
playableDuration: number;
seekableDuration: number;
};
export type LicenseEvent = {
spcBase64: string;
contentId: string;
licenseUrl: string;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment