fix: controls safe areas

app/(auth)/player/direct-player.tsx

@@ -35,6 +35,7 @@ import { useAtomValue } from "jotai";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { Alert, Pressable, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function page() {
   const videoRef = useRef<VlcPlayerViewRef>(null);
@@ -398,19 +399,19 @@ export default function page() {
     );
 
   return (
-    <View
-      style={{
-        width: "100%",
-        height: "100%",
-        position: "relative",
-      }}
-      className="flex flex-col items-center justify-center"
-    >
+    <View style={{ flex: 1, backgroundColor: "black" }}>
       <Pressable
         onPress={() => {
           // setShowControls(!showControls);
         }}
-        className="absolute z-0 h-full w-full"
+        style={{
+          display: "flex",
+          width: "100%",
+          height: "100%",
+          position: "relative",
+          flexDirection: "column",
+          justifyContent: "center",
+        }}
       >
         <VlcPlayerView
           ref={videoRef}
@@ -440,7 +441,6 @@ export default function page() {
           }}
         />
       </Pressable>
-
       {videoRef.current && (
         <Controls
           mediaSource={stream?.mediaSource}

app/(auth)/player/transcoding-player.tsx

@@ -387,26 +387,18 @@ const Player = () => {
     );
 
   return (
-    <View
-      style={{
-        flex: 1,
-        position: "relative",
-        height: "100%",
-        width: "100%",
-      }}
-    >
+    <View style={{ flex: 1, backgroundColor: "black" }}>
       <Pressable
         onPress={() => {
-          setShowControls(!showControls);
+          // setShowControls(!showControls);
         }}
         style={{
-          flex: 1,
-          height: "100%",
+          display: "flex",
           width: "100%",
-          position: "absolute",
-          top: 0,
-          left: 0,
-          zIndex: 0,
+          height: "100%",
+          position: "relative",
+          flexDirection: "column",
+          justifyContent: "center",
         }}
       >
         {videoSource ? (

components/video-player/controls/Controls.tsx

@@ -26,7 +26,13 @@ import {
 import { Image } from "expo-image";
 import { useRouter } from "expo-router";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Platform, Pressable, TouchableOpacity, View } from "react-native";
+import {
+  Dimensions,
+  Platform,
+  Pressable,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import {
   runOnJS,
@@ -34,7 +40,10 @@ import {
   useAnimatedReaction,
   useSharedValue,
 } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
 import { VideoRef } from "react-native-video";
 import { ControlProvider } from "./contexts/ControlContext";
 import { VideoProvider } from "./contexts/VideoContext";
@@ -306,14 +315,14 @@ export const Controls: React.FC<Props> = ({
       mediaSource={mediaSource}
       isVideoLoaded={isVideoLoaded}
     >
-      <View
+      <SafeAreaView
         style={{
           flex: 1,
           position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          height: "100%",
+          top: insets.top,
+          left: insets.left,
+          right: insets.right,
+          bottom: insets.bottom,
         }}
       >
         <VideoProvider
@@ -370,10 +379,8 @@ export const Controls: React.FC<Props> = ({
           }}
           style={{
             position: "absolute",
-            top: 0,
-            left: 0,
-            width: "100%",
-            height: "100%",
+            width: Dimensions.get("window").width,
+            height: Dimensions.get("window").height,
             opacity: showControls ? 0.5 : 0,
             backgroundColor: "black",
           }}
@@ -434,10 +441,9 @@ export const Controls: React.FC<Props> = ({
           style={[
             {
               position: "absolute",
-              width: "100%",
-              maxHeight: "100%",
+              right: 0,
               left: 0,
-              bottom: Platform.OS === "ios" ? insets.bottom : insets.bottom,
+              bottom: 0,
               opacity: showControls ? 1 : 0,
             },
           ]}
@@ -592,7 +598,7 @@ export const Controls: React.FC<Props> = ({
             </View>
           </View>
         </View>
-      </View>
+      </SafeAreaView>
     </ControlProvider>
   );
 };