Bring back toggleSafeArea button for all videos

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

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();