refactor to tamagui

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

@@ -1,4 +1,5 @@
-import { StyleSheet, TouchableWithoutFeedback, View } from "react-native";
+import { TouchableWithoutFeedback } from "react-native";
+import { View } from "tamagui";
 
 import { usePlayerStore } from "~/stores/player/store";
 import { Controls } from "./Controls";
@@ -15,8 +16,17 @@ export const MiddleControls = () => {
 
   return (
     <TouchableWithoutFeedback onPress={handleTouch}>
-      <View style={styles.container}>
-        <Controls className="mr-24">
+      <View
+        position="absolute"
+        height="100%"
+        width="100%"
+        flex={1}
+        flexDirection="row"
+        alignItems="center"
+        justifyContent="center"
+        gap={82}
+      >
+        <Controls>
           <SeekButton type="backward" />
         </Controls>
         <Controls>
@@ -29,16 +39,3 @@ export const MiddleControls = () => {
     </TouchableWithoutFeedback>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-    height: "100%",
-    width: "100%",
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 82,
-  },
-});