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

chore: use nativewind classes

Browse Source
This commit is contained in:
Adrian Castro
2024-02-05 18:34:51 +01:00
parent 61be1c37ac
commit 6fbea58edc
1 changed files with 54 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import type { VideoRef } from "react-native-video"; import type { VideoRef } from "react-native-video";
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { ActivityIndicator, StyleSheet } from "react-native"; import { ActivityIndicator } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context"; import { SafeAreaView } from "react-native-safe-area-context";
import Video from "react-native-video"; import Video from "react-native-video";
import { useLocalSearchParams } from "expo-router"; import { useLocalSearchParams } from "expo-router";
@@ -16,85 +16,69 @@ export default function VideoPlayerWrapper() {
return <VideoPlayer videoUrl={videoUrl} />; return <VideoPlayer videoUrl={videoUrl} />;
} }
interface VideoPlayerProps { interface VideoPlayerProps {
videoUrl: string; videoUrl: string;
} }
const VideoPlayer: React.FC<VideoPlayerProps> = ({ videoUrl }) => { const VideoPlayer: React.FC<VideoPlayerProps> = ({ videoUrl }) => {
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const videoPlayer = useRef<VideoRef>(null); const videoPlayer = useRef<VideoRef>(null);
useEffect(() => { useEffect(() => {
const lockOrientation = async () => { const lockOrientation = async () => {
await ScreenOrientation.lockAsync( await ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.LANDSCAPE ScreenOrientation.OrientationLock.LANDSCAPE,
); );
}; };
const unlockOrientation = async () => { const unlockOrientation = async () => {
await ScreenOrientation.lockAsync( await ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.PORTRAIT_UP ScreenOrientation.OrientationLock.PORTRAIT_UP,
); );
}; };
const presentFullscreenPlayer = async () => { const presentFullscreenPlayer = async () => {
if (videoPlayer.current) { if (videoPlayer.current) {
videoPlayer.current.presentFullscreenPlayer(); videoPlayer.current.presentFullscreenPlayer();
await lockOrientation(); await lockOrientation();
} }
}; };
const dismissFullscreenPlayer = async () => { const dismissFullscreenPlayer = async () => {
if (videoPlayer.current) { if (videoPlayer.current) {
videoPlayer.current.dismissFullscreenPlayer(); videoPlayer.current.dismissFullscreenPlayer();
await unlockOrientation(); await unlockOrientation();
} }
}; };
setIsLoading(true); setIsLoading(true);
void presentFullscreenPlayer(); void presentFullscreenPlayer();
return () => { return () => {
void dismissFullscreenPlayer(); void dismissFullscreenPlayer();
}; };
}, [videoUrl]); }, [videoUrl]);
const onVideoLoadStart = () => { const onVideoLoadStart = () => {
setIsLoading(true); setIsLoading(true);
}; };
const onReadyForDisplay = () => { const onReadyForDisplay = () => {
setIsLoading(false); setIsLoading(false);
}; };
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView className="flex-1 items-center justify-center bg-black">
<Video <Video
ref={videoPlayer} ref={videoPlayer}
source={{ uri: videoUrl }} source={{ uri: videoUrl }}
style={styles.fullScreen} className="absolute bottom-0 left-0 right-0 top-0"
fullscreen={true} fullscreen={true}
paused={false} paused={false}
controls={true} controls={true}
onLoadStart={onVideoLoadStart} onLoadStart={onVideoLoadStart}
onReadyForDisplay={onReadyForDisplay} onReadyForDisplay={onReadyForDisplay}
/> />
{isLoading && <ActivityIndicator size="large" color="#0000ff" />} {isLoading && <ActivityIndicator size="large" color="#0000ff" />}
</SafeAreaView> </SafeAreaView>
); );
}; };
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "black",
},
fullScreen: {
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});