From 6fbea58edc361ad53dd1792114a47b3a54025a84 Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Mon, 5 Feb 2024 18:34:51 +0100
Subject: [PATCH] chore: use nativewind classes

---
 apps/expo/src/app/video-player.tsx | 124 +++++++++++++----------------
 1 file changed, 54 insertions(+), 70 deletions(-)

diff --git a/apps/expo/src/app/video-player.tsx b/apps/expo/src/app/video-player.tsx
index 0ddefc2..32fc2d7 100644
--- a/apps/expo/src/app/video-player.tsx
+++ b/apps/expo/src/app/video-player.tsx
@@ -1,6 +1,6 @@
 import type { VideoRef } from "react-native-video";
 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 Video from "react-native-video";
 import { useLocalSearchParams } from "expo-router";
@@ -16,85 +16,69 @@ export default function VideoPlayerWrapper() {
   return <VideoPlayer videoUrl={videoUrl} />;
 }
 interface VideoPlayerProps {
-	videoUrl: string;
+  videoUrl: string;
 }
 
 const VideoPlayer: React.FC<VideoPlayerProps> = ({ videoUrl }) => {
-	const [isLoading, setIsLoading] = useState(true);
-	const videoPlayer = useRef<VideoRef>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const videoPlayer = useRef<VideoRef>(null);
 
-	useEffect(() => {
-		const lockOrientation = async () => {
-			await ScreenOrientation.lockAsync(
-				ScreenOrientation.OrientationLock.LANDSCAPE
-			);
-		};
+  useEffect(() => {
+    const lockOrientation = async () => {
+      await ScreenOrientation.lockAsync(
+        ScreenOrientation.OrientationLock.LANDSCAPE,
+      );
+    };
 
-		const unlockOrientation = async () => {
-			await ScreenOrientation.lockAsync(
-				ScreenOrientation.OrientationLock.PORTRAIT_UP
-			);
-		};
+    const unlockOrientation = async () => {
+      await ScreenOrientation.lockAsync(
+        ScreenOrientation.OrientationLock.PORTRAIT_UP,
+      );
+    };
 
-		const presentFullscreenPlayer = async () => {
-			if (videoPlayer.current) {
-				videoPlayer.current.presentFullscreenPlayer();
-				await lockOrientation();
-			}
-		};
+    const presentFullscreenPlayer = async () => {
+      if (videoPlayer.current) {
+        videoPlayer.current.presentFullscreenPlayer();
+        await lockOrientation();
+      }
+    };
 
-		const dismissFullscreenPlayer = async () => {
-			if (videoPlayer.current) {
-				videoPlayer.current.dismissFullscreenPlayer();
-				await unlockOrientation();
-			}
-		};
+    const dismissFullscreenPlayer = async () => {
+      if (videoPlayer.current) {
+        videoPlayer.current.dismissFullscreenPlayer();
+        await unlockOrientation();
+      }
+    };
 
-		setIsLoading(true);
-		void presentFullscreenPlayer();
+    setIsLoading(true);
+    void presentFullscreenPlayer();
 
-		return () => {
-			void dismissFullscreenPlayer();
-		};
-	}, [videoUrl]);
+    return () => {
+      void dismissFullscreenPlayer();
+    };
+  }, [videoUrl]);
 
-	const onVideoLoadStart = () => {
-		setIsLoading(true);
-	};
+  const onVideoLoadStart = () => {
+    setIsLoading(true);
+  };
 
-	const onReadyForDisplay = () => {
-		setIsLoading(false);
-	};
+  const onReadyForDisplay = () => {
+    setIsLoading(false);
+  };
 
-	return (
-		<SafeAreaView style={styles.container}>
-			<Video
-				ref={videoPlayer}
-				source={{ uri: videoUrl }}
-				style={styles.fullScreen}
-				fullscreen={true}
-				paused={false}
-				controls={true}
-				onLoadStart={onVideoLoadStart}
-				onReadyForDisplay={onReadyForDisplay}
-			/>
-			{isLoading && <ActivityIndicator size="large" color="#0000ff" />}
-		</SafeAreaView>
-	);
+  return (
+    <SafeAreaView className="flex-1 items-center justify-center bg-black">
+      <Video
+        ref={videoPlayer}
+        source={{ uri: videoUrl }}
+        className="absolute bottom-0 left-0 right-0 top-0"
+        fullscreen={true}
+        paused={false}
+        controls={true}
+        onLoadStart={onVideoLoadStart}
+        onReadyForDisplay={onReadyForDisplay}
+      />
+      {isLoading && <ActivityIndicator size="large" color="#0000ff" />}
+    </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,
-  },
-});