refactor to tamagui

apps/expo/src/components/player/VideoPlayer.tsx

@@ -1,12 +1,6 @@
 import type { AVPlaybackSource } from "expo-av";
 import { useEffect, useState } from "react";
-import {
-  ActivityIndicator,
-  Dimensions,
-  Platform,
-  StyleSheet,
-  View,
-} from "react-native";
+import { Dimensions, Platform } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { runOnJS, useSharedValue } from "react-native-reanimated";
 import { ResizeMode, Video } from "expo-av";
@@ -14,6 +8,7 @@ import * as Haptics from "expo-haptics";
 import * as NavigationBar from "expo-navigation-bar";
 import { useRouter } from "expo-router";
 import * as StatusBar from "expo-status-bar";
+import { Spinner, Text, View } from "tamagui";
 
 import { findHighestQuality } from "@movie-web/provider-utils";
 
@@ -24,7 +19,6 @@ import { usePlayer } from "~/hooks/player/usePlayer";
 import { useVolume } from "~/hooks/player/useVolume";
 import { useAudioTrackStore } from "~/stores/audio";
 import { usePlayerStore } from "~/stores/player/store";
-import { Text } from "../ui/Text";
 import { CaptionRenderer } from "./CaptionRenderer";
 import { ControlsOverlay } from "./ControlsOverlay";
 import { isPointInSliderVicinity } from "./VideoSlider";
@@ -231,7 +225,13 @@ export const VideoPlayer = () => {
 
   return (
     <GestureDetector gesture={composedGesture}>
-      <View className="flex-1 items-center justify-center bg-black">
+      <View
+        flex={1}
+        flexDirection="row"
+        alignItems="center"
+        justifyContent="center"
+        backgroundColor="black"
+      >
         <Video
           ref={setVideoRef}
           source={videoSrc}
@@ -243,8 +243,12 @@ export const VideoPlayer = () => {
           onReadyForDisplay={onReadyForDisplay}
           onPlaybackStatusUpdate={setStatus}
           style={[
-            styles.video,
             {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
               ...(!isIdle && {
                 opacity: 0.7,
               }),
@@ -252,24 +256,47 @@ export const VideoPlayer = () => {
           ]}
           onTouchStart={() => setIsIdle(!isIdle)}
         />
-        <View className="h-full w-full flex-1 items-center justify-center">
+        <View
+          height="100%"
+          width="100%"
+          alignItems="center"
+          justifyContent="center"
+        >
           {isLoading && (
-            <ActivityIndicator
+            <Spinner
               size="large"
-              color="#0000ff"
-              className="absolute"
+              color="$loadingIndicator"
+              style={{
+                position: "absolute",
+              }}
             />
           )}
           <ControlsOverlay isLoading={isLoading} />
         </View>
         {showVolumeOverlay && (
-          <View className="absolute bottom-12 self-center rounded-xl bg-black p-3 opacity-50">
-            <Text className="font-bold">Volume: {debouncedVolume}</Text>
+          <View
+            position="absolute"
+            bottom={48}
+            alignSelf="center"
+            borderRadius={999}
+            backgroundColor="black"
+            padding={12}
+            opacity={0.5}
+          >
+            <Text fontWeight="bold">Volume: {debouncedVolume}</Text>
           </View>
         )}
         {showBrightnessOverlay && (
-          <View className="absolute bottom-12 self-center rounded-xl bg-black p-3 opacity-50">
-            <Text className="font-bold">Brightness: {debouncedBrightness}</Text>
+          <View
+            position="absolute"
+            bottom={48}
+            alignSelf="center"
+            borderRadius={999}
+            backgroundColor="black"
+            padding={12}
+            opacity={0.5}
+          >
+            <Text fontWeight="bold">Brightness: {debouncedBrightness}</Text>
           </View>
         )}
         <CaptionRenderer />
@@ -277,13 +304,3 @@ export const VideoPlayer = () => {
     </GestureDetector>
   );
 };
-
-const styles = StyleSheet.create({
-  video: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-  },
-});