diff --git a/examples/basic/src/VideoPlayer.tsx b/examples/basic/src/VideoPlayer.tsx index 2f69b21b..e719279d 100644 --- a/examples/basic/src/VideoPlayer.tsx +++ b/examples/basic/src/VideoPlayer.tsx @@ -34,7 +34,8 @@ import Video, { SelectedTrack, DRMType, OnTextTrackDataChangedData, - SelectedTrackType, + TextTrackType, + ISO639_1, } from 'react-native-video'; import ToggleControl from './ToggleControl'; import MultiValueControl, { @@ -127,6 +128,18 @@ class VideoPlayer extends Component { description: 'sintel with subtitles', uri: 'https://bitmovin-a.akamaihd.net/content/sintel/hls/playlist.m3u8', }, + { + description: 'sintel with sideLoaded subtitles', + uri: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8', // this is sample video, my actual video file is MP4 + textTracks: [ + { + title: 'test', + language: 'en' as ISO639_1, + type: TextTrackType.VTT, + uri: 'https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt', + }, + ] + }, ]; srcIosList = []; @@ -762,6 +775,7 @@ class VideoPlayer extends Component { this.video = ref; }} source={this.srcList[this.state.srcListId]} + textTracks={this.srcList[this.state.srcListId]?.textTracks} adTagUrl={this.srcList[this.state.srcListId]?.adTagUrl} drm={this.srcList[this.state.srcListId]?.drm} style={viewStyle} diff --git a/src/types/TextTrackType.ts b/src/types/TextTrackType.ts index 2053a3c8..e0938a71 100644 --- a/src/types/TextTrackType.ts +++ b/src/types/TextTrackType.ts @@ -1,5 +1,5 @@ enum TextTrackType { - SRT = 'application/x-subrip', + SUBRIP = 'application/x-subrip', TTML = 'application/ttml+xml', VTT = 'text/vtt', } diff --git a/src/types/video.ts b/src/types/video.ts index e3489224..77c0f4db 100644 --- a/src/types/video.ts +++ b/src/types/video.ts @@ -108,7 +108,7 @@ export type SubtitleStyle = { opacity?: number; }; -export enum TextTracksType { +export enum TextTrackType { SUBRIP = 'application/x-subrip', TTML = 'application/ttml+xml', VTT = 'text/vtt', @@ -117,11 +117,11 @@ export enum TextTracksType { export type TextTracks = { title: string; language: ISO639_1; - type: TextTracksType; + type: TextTrackType; uri: string; }[]; -export type TextTrackType = +export type TextTrackSelectionType = | 'system' | 'disabled' | 'title' @@ -129,11 +129,11 @@ export type TextTrackType = | 'index'; export type SelectedTextTrack = Readonly<{ - type: TextTrackType; + type: TextTrackSelectionType; value?: string | number; }>; -export type AudioTrackType = +export type AudioTrackSelectionType = | 'system' | 'disabled' | 'title' @@ -141,7 +141,7 @@ export type AudioTrackType = | 'index'; export type SelectedAudioTrack = Readonly<{ - type: AudioTrackType; + type: AudioTrackSelectionType; value?: string | number; }>;