fix: add safe areas back to controls

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

@@ -43,6 +43,7 @@ import {
   View,
   AppState,
   AppStateStatus,
+  Platform,
 } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import settings from "../(tabs)/(home)/settings";
@@ -448,7 +449,7 @@ export default function page() {
           position: "relative",
           flexDirection: "column",
           justifyContent: "center",
-          opacity: showControls ? 0.5 : 1,
+          opacity: showControls ? (Platform.OS === "android" ? 0.7 : 0.5) : 1,
         }}
       >
         <VlcPlayerView

components/video-player/controls/Controls.tsx

@@ -42,7 +42,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 AudioSlider from "./AudioSlider";
 import BrightnessSlider from "./BrightnessSlider";
@@ -506,11 +509,23 @@ export const Controls: React.FC<Props> = ({
             setSubtitleTrack={setSubtitleTrack}
             setSubtitleURL={setSubtitleURL}
           >
-            {!mediaSource?.TranscodingUrl ? (
-              <DropdownViewDirect showControls={showControls} />
-            ) : (
-              <DropdownViewTranscoding showControls={showControls} />
-            )}
+            <View
+              style={[
+                {
+                  position: "absolute",
+                  top: insets.top,
+                  left: insets.left,
+                  opacity: showControls ? 1 : 0,
+                  zIndex: 1000,
+                },
+              ]}
+            >
+              {!mediaSource?.TranscodingUrl ? (
+                <DropdownViewDirect showControls={showControls} />
+              ) : (
+                <DropdownViewTranscoding showControls={showControls} />
+              )}
+            </View>
           </VideoProvider>
 
           <Pressable
@@ -528,8 +543,8 @@ export const Controls: React.FC<Props> = ({
             style={[
               {
                 position: "absolute",
-                top: 0,
-                right: 0,
+                top: insets.top,
+                right: insets.right,
                 opacity: showControls ? 1 : 0,
               },
             ]}
@@ -579,7 +594,7 @@ export const Controls: React.FC<Props> = ({
             <TouchableOpacity
               onPress={async () => {
                 Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-                stop();
+                router.back();
               }}
               className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
             >
@@ -591,8 +606,8 @@ export const Controls: React.FC<Props> = ({
             style={{
               position: "absolute",
               top: "50%", // Center vertically
-              left: 0,
-              right: 0,
+              left: insets.left,
+              right: insets.right,
               flexDirection: "row",
               justifyContent: "space-between",
               alignItems: "center",
@@ -705,9 +720,9 @@ export const Controls: React.FC<Props> = ({
             style={[
               {
                 position: "absolute",
-                right: 0,
-                left: 0,
-                bottom: 0,
+                right: insets.right,
+                left: insets.left,
+                bottom: insets.bottom,
               },
             ]}
             className={`flex flex-col p-4`}

components/video-player/controls/dropdown/DropdownViewDirect.tsx

@@ -72,105 +72,93 @@ const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
   }>();
 
   return (
-    <View
-      style={{
-        position: "absolute",
-        zIndex: 1000,
-        opacity: showControls ? 1 : 0,
-      }}
-      className="p-4"
-    >
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <TouchableOpacity className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2">
-            <Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
-          </TouchableOpacity>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={true}
-          side="bottom"
-          align="start"
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={8}
-          sideOffset={8}
-        >
-          <DropdownMenu.Sub>
-            <DropdownMenu.SubTrigger key="subtitle-trigger">
-              Subtitle
-            </DropdownMenu.SubTrigger>
-            <DropdownMenu.SubContent
-              alignOffset={-10}
-              avoidCollisions={true}
-              collisionPadding={0}
-              loop={true}
-              sideOffset={10}
-            >
-              {allSubtitleTracksForDirectPlay?.map((sub, idx: number) => (
-                <DropdownMenu.CheckboxItem
-                  key={`subtitle-item-${idx}`}
-                  value={subtitleIndex === sub.index.toString()}
-                  onValueChange={() => {
-                    if ("deliveryUrl" in sub && sub.deliveryUrl) {
-                      setSubtitleURL &&
-                        setSubtitleURL(
-                          api?.basePath + sub.deliveryUrl,
-                          sub.name
-                        );
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <TouchableOpacity className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2">
+          <Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
+        </TouchableOpacity>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        loop={true}
+        side="bottom"
+        align="start"
+        alignOffset={0}
+        avoidCollisions={true}
+        collisionPadding={8}
+        sideOffset={8}
+      >
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger key="subtitle-trigger">
+            Subtitle
+          </DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent
+            alignOffset={-10}
+            avoidCollisions={true}
+            collisionPadding={0}
+            loop={true}
+            sideOffset={10}
+          >
+            {allSubtitleTracksForDirectPlay?.map((sub, idx: number) => (
+              <DropdownMenu.CheckboxItem
+                key={`subtitle-item-${idx}`}
+                value={subtitleIndex === sub.index.toString()}
+                onValueChange={() => {
+                  if ("deliveryUrl" in sub && sub.deliveryUrl) {
+                    setSubtitleURL &&
+                      setSubtitleURL(api?.basePath + sub.deliveryUrl, sub.name);
 
-                      console.log(
-                        "Set external subtitle: ",
-                        api?.basePath + sub.deliveryUrl
-                      );
-                    } else {
-                      console.log("Set sub index: ", sub.index);
-                      setSubtitleTrack && setSubtitleTrack(sub.index);
-                    }
-                    router.setParams({
-                      subtitleIndex: sub.index.toString(),
-                    });
-                    console.log("Subtitle: ", sub);
-                  }}
-                >
-                  <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
-                    {sub.name}
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.CheckboxItem>
-              ))}
-            </DropdownMenu.SubContent>
-          </DropdownMenu.Sub>
-          <DropdownMenu.Sub>
-            <DropdownMenu.SubTrigger key="audio-trigger">
-              Audio
-            </DropdownMenu.SubTrigger>
-            <DropdownMenu.SubContent
-              alignOffset={-10}
-              avoidCollisions={true}
-              collisionPadding={0}
-              loop={true}
-              sideOffset={10}
-            >
-              {audioTracks?.map((track, idx: number) => (
-                <DropdownMenu.CheckboxItem
-                  key={`audio-item-${idx}`}
-                  value={audioIndex === track.index.toString()}
-                  onValueChange={() => {
-                    setAudioTrack && setAudioTrack(track.index);
-                    router.setParams({
-                      audioIndex: track.index.toString(),
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
-                    {track.name}
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.CheckboxItem>
-              ))}
-            </DropdownMenu.SubContent>
-          </DropdownMenu.Sub>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-    </View>
+                    console.log(
+                      "Set external subtitle: ",
+                      api?.basePath + sub.deliveryUrl
+                    );
+                  } else {
+                    console.log("Set sub index: ", sub.index);
+                    setSubtitleTrack && setSubtitleTrack(sub.index);
+                  }
+                  router.setParams({
+                    subtitleIndex: sub.index.toString(),
+                  });
+                  console.log("Subtitle: ", sub);
+                }}
+              >
+                <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
+                  {sub.name}
+                </DropdownMenu.ItemTitle>
+              </DropdownMenu.CheckboxItem>
+            ))}
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger key="audio-trigger">
+            Audio
+          </DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent
+            alignOffset={-10}
+            avoidCollisions={true}
+            collisionPadding={0}
+            loop={true}
+            sideOffset={10}
+          >
+            {audioTracks?.map((track, idx: number) => (
+              <DropdownMenu.CheckboxItem
+                key={`audio-item-${idx}`}
+                value={audioIndex === track.index.toString()}
+                onValueChange={() => {
+                  setAudioTrack && setAudioTrack(track.index);
+                  router.setParams({
+                    audioIndex: track.index.toString(),
+                  });
+                }}
+              >
+                <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
+                  {track.name}
+                </DropdownMenu.ItemTitle>
+              </DropdownMenu.CheckboxItem>
+            ))}
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
   );
 };