diff --git a/apps/expo/src/app/video-player.tsx b/apps/expo/src/app/video-player.tsx index bc23905..223ef8d 100644 --- a/apps/expo/src/app/video-player.tsx +++ b/apps/expo/src/app/video-player.tsx @@ -1,8 +1,12 @@ -import type { ReactVideoSource } from "react-native-video"; +import type { + ISO639_1, + ReactVideoSource, + TextTracks, +} from "react-native-video"; import React, { useEffect, useState } from "react"; import { ActivityIndicator, StyleSheet } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context"; -import Video from "react-native-video"; +import Video, { TextTracksType } from "react-native-video"; import { useLocalSearchParams, useRouter } from "expo-router"; import * as ScreenOrientation from "expo-screen-orientation"; @@ -30,6 +34,7 @@ interface VideoPlayerProps { const VideoPlayer: React.FC = ({ data }) => { const [videoSrc, setVideoSrc] = useState(); + const [_textTracks, setTextTracks] = useState([]); const [isLoading, setIsLoading] = useState(true); const router = useRouter(); const { @@ -89,6 +94,12 @@ const VideoPlayer: React.FC = ({ data }) => { url = stream.playlist; } + setTextTracks( + stream.captions && stream.captions.length > 0 + ? convertCaptionsToTextTracks(stream.captions) + : [], + ); + setVideoSrc({ uri: url, headers: { @@ -96,6 +107,7 @@ const VideoPlayer: React.FC = ({ data }) => { ...stream.headers, }, }); + setIsLoading(false); } else { await ScreenOrientation.lockAsync( @@ -134,6 +146,7 @@ const VideoPlayer: React.FC = ({ data }) => {