From c86a8438e56bd040b0f33aebe2e83f29244ac9da Mon Sep 17 00:00:00 2001
From: ryan0204 <chanpakhank@gmail.com>
Date: Mon, 6 Jan 2025 23:15:00 +0800
Subject: [PATCH] Bring back toggleSafeArea button for all videos

---
 app/(auth)/player/direct-player.tsx           |  5 ++++
 components/video-player/controls/Controls.tsx | 24 +++++++++----------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/app/(auth)/player/direct-player.tsx b/app/(auth)/player/direct-player.tsx
index 44b0eb34..86851db6 100644
--- a/app/(auth)/player/direct-player.tsx
+++ b/app/(auth)/player/direct-player.tsx
@@ -48,6 +48,7 @@ import {
 import { useSharedValue } from "react-native-reanimated";
 import settings from "../(tabs)/(home)/settings";
 import { useSettings } from "@/utils/atoms/settings";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function page() {
   const videoRef = useRef<VlcPlayerViewRef>(null);
@@ -413,6 +414,8 @@ export default function page() {
     }
   }
 
+  const insets = useSafeAreaInsets();
+
   if (!item || isLoadingItem || isLoadingStreamUrl || !stream)
     return (
       <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
@@ -437,6 +440,8 @@ export default function page() {
           position: "relative",
           flexDirection: "column",
           justifyContent: "center",
+          paddingLeft: ignoreSafeAreas ? 0 : insets.left,
+          paddingRight: ignoreSafeAreas ? 0 : insets.right,
         }}
       >
         <VlcPlayerView
diff --git a/components/video-player/controls/Controls.tsx b/components/video-player/controls/Controls.tsx
index 620e112e..cef265ec 100644
--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
@@ -572,18 +572,18 @@ export const Controls: React.FC<Props> = ({
                 </TouchableOpacity>
               )}
 
-              {mediaSource?.TranscodingUrl && (
-                <TouchableOpacity
-                  onPress={toggleIgnoreSafeAreas}
-                  className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-                >
-                  <Ionicons
-                    name={ignoreSafeAreas ? "contract-outline" : "expand"}
-                    size={24}
-                    color="white"
-                  />
-                </TouchableOpacity>
-              )}
+              {/* {mediaSource?.TranscodingUrl && ( */}
+              <TouchableOpacity
+                onPress={toggleIgnoreSafeAreas}
+                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+              >
+                <Ionicons
+                  name={ignoreSafeAreas ? "contract-outline" : "expand"}
+                  size={24}
+                  color="white"
+                />
+              </TouchableOpacity>
+              {/* )} */}
               <TouchableOpacity
                 onPress={async () => {
                   lightHapticFeedback();