movie-web/native-app
1
0
Fork 0
mirror of https://github.com/movie-web/native-app.git synced 2025-09-13 10:23:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: pass video url to player

Browse Source
This commit is contained in:
Adrian Castro
2024-02-05 10:33:44 +01:00
parent 8e03075ebc
commit 667bf4ab13
2 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/expo/src/app/components/item/item.tsx
View File

@@ -16,8 +16,11 @@ export default function Item({ data }: { data: ItemData }) {
const { title, type, year, posterUrl } = data; const { title, type, year, posterUrl } = data;
const handlePress = () => { const handlePress = () => {
console.log('Item pressed. Opening VideoPlayer...');
router.push('/video-player'); router.push('/video-player');
// router.push({
// pathname: '/video-player',
// params: { videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4' }
// });
}; };
return ( return (

33
apps/expo/src/app/video-player.tsx
View File

@@ -4,6 +4,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
import type { VideoRef } from 'react-native-video'; import type { VideoRef } from 'react-native-video';
import Video from 'react-native-video'; import Video from 'react-native-video';
import * as ScreenOrientation from 'expo-screen-orientation'; import * as ScreenOrientation from 'expo-screen-orientation';
import { useLocalSearchParams } from "expo-router";
interface VideoPlayerState { interface VideoPlayerState {
videoUrl: string; videoUrl: string;
@@ -12,13 +13,23 @@ interface VideoPlayerState {
paused: boolean; paused: boolean;
} }
class VideoPlayer extends Component<object, VideoPlayerState> { interface VideoPlayerProps {
private videoPlayer: React.RefObject<VideoRef>; videoUrl: string;
}
constructor(props: object) { export default function VideoPlayerWrapper() {
const params = useLocalSearchParams();
const videoUrl = typeof params.videoUrl === 'string' ? params.videoUrl : '';
return <VideoPlayer videoUrl={videoUrl} />;
}
class VideoPlayer extends Component<VideoPlayerProps, VideoPlayerState> {
private videoPlayer: React.RefObject<VideoRef>;
constructor(props: VideoPlayerProps) {
super(props); super(props);
this.state = { this.state = {
videoUrl: '', videoUrl: props.videoUrl || '',
fullscreen: true, fullscreen: true,
isLoading: true, isLoading: true,
paused: false paused: false
@@ -31,10 +42,14 @@ class VideoPlayer extends Component<object, VideoPlayerState> {
await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE); await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
}; };
if (this.videoPlayer.current) { const { videoUrl } = this.props;
this.videoPlayer.current.presentFullscreenPlayer();
void lockOrientation(); this.setState({ videoUrl }, () => {
} if (this.videoPlayer.current) {
this.videoPlayer.current.presentFullscreenPlayer();
void lockOrientation();
}
});
} }
componentWillUnmount() { componentWillUnmount() {
@@ -98,5 +113,3 @@ const styles = StyleSheet.create({
}, },
}); });
export default VideoPlayer;