feat: settings toggle for safe areas in controls

app/(auth)/(tabs)/(home)/settings.tsx

@@ -2,18 +2,18 @@ import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import { ListItem } from "@/components/ListItem";
 import { SettingToggles } from "@/components/settings/SettingToggles";
-import {bytesToReadable, useDownload} from "@/providers/DownloadProvider";
+import { bytesToReadable, useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
-import {clearLogs, useLog} from "@/utils/log";
+import { clearLogs, useLog } from "@/utils/log";
 import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
+import * as FileSystem from "expo-file-system";
 import * as Haptics from "expo-haptics";
 import { useAtom } from "jotai";
-import {Alert, ScrollView, View} from "react-native";
+import { Alert, ScrollView, View } from "react-native";
+import * as Progress from "react-native-progress";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
-import * as Progress from 'react-native-progress';
-import * as FileSystem from "expo-file-system";
 
 export default function settings() {
   const { logout } = useJellyfin();
@@ -25,17 +25,17 @@ export default function settings() {
 
   const insets = useSafeAreaInsets();
 
-  const {data: size , isLoading: appSizeLoading } = useQuery({
+  const { data: size, isLoading: appSizeLoading } = useQuery({
     queryKey: ["appSize", appSizeUsage],
     queryFn: async () => {
-      const app = await appSizeUsage
+      const app = await appSizeUsage;
 
-      const remaining = await FileSystem.getFreeDiskStorageAsync()
-      const total = await FileSystem.getTotalDiskCapacityAsync()
+      const remaining = await FileSystem.getFreeDiskStorageAsync();
+      const total = await FileSystem.getTotalDiskCapacityAsync();
 
-      return {app, remaining, total, used: (total - remaining) / total}
-    }
-  })
+      return { app, remaining, total, used: (total - remaining) / total };
+    },
+  });
 
   const openQuickConnectAuthCodeInput = () => {
     Alert.prompt(
@@ -69,22 +69,16 @@ export default function settings() {
   const onDeleteClicked = async () => {
     try {
       await deleteAllFiles();
-      Haptics.notificationAsync(
-        Haptics.NotificationFeedbackType.Success
-      );
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
     } catch (e) {
-      Haptics.notificationAsync(
-        Haptics.NotificationFeedbackType.Error
-      );
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
       toast.error("Error deleting files");
     }
-  }
+  };
 
   const onClearLogsClicked = async () => {
     clearLogs();
-    Haptics.notificationAsync(
-      Haptics.NotificationFeedbackType.Success
-    );
+    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
   };
 
   return (
@@ -140,19 +134,16 @@ export default function settings() {
               progress={size?.used}
             />
             {size && (
-              <Text>Available: {bytesToReadable(size.remaining)}, Total: {bytesToReadable(size.total)}</Text>
+              <Text>
+                Available: {bytesToReadable(size.remaining)}, Total:{" "}
+                {bytesToReadable(size.total)}
+              </Text>
             )}
           </View>
-          <Button
-            color="red"
-            onPress={onDeleteClicked}
-          >
+          <Button color="red" onPress={onDeleteClicked}>
             Delete all downloaded files
           </Button>
-          <Button
-            color="red"
-            onPress={onClearLogsClicked}
-          >
+          <Button color="red" onPress={onClearLogsClicked}>
             Delete all logs
           </Button>
         </View>

components/settings/SettingToggles.tsx

@@ -258,6 +258,21 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
             </DropdownMenu.Root>
           </View>
 
+          <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
+            <View className="shrink">
+              <Text className="font-semibold">Safe area in controls</Text>
+              <Text className="text-xs opacity-50">
+                Enable safe area in video player controls
+              </Text>
+            </View>
+            <Switch
+              value={settings.safeAreaInControlsEnabled}
+              onValueChange={(value) =>
+                updateSettings({ safeAreaInControlsEnabled: value })
+              }
+            />
+          </View>
+
           <View className="flex flex-col">
             <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
               <View className="flex flex-col">

components/video-player/controls/Controls.tsx

@@ -513,8 +513,8 @@ export const Controls: React.FC<Props> = ({
               style={[
                 {
                   position: "absolute",
-                  top: insets.top,
-                  left: insets.left,
+                  top: settings?.safeAreaInControlsEnabled ? insets.top : 0,
+                  left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
                   opacity: showControls ? 1 : 0,
                   zIndex: 1000,
                 },
@@ -543,8 +543,8 @@ export const Controls: React.FC<Props> = ({
             style={[
               {
                 position: "absolute",
-                top: insets.top,
-                right: insets.right,
+                top: settings?.safeAreaInControlsEnabled ? insets.top : 0,
+                right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
                 opacity: showControls ? 1 : 0,
               },
             ]}
@@ -606,8 +606,8 @@ export const Controls: React.FC<Props> = ({
             style={{
               position: "absolute",
               top: "50%", // Center vertically
-              left: insets.left,
-              right: insets.right,
+              left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
+              right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
               flexDirection: "row",
               justifyContent: "space-between",
               alignItems: "center",
@@ -720,9 +720,9 @@ export const Controls: React.FC<Props> = ({
             style={[
               {
                 position: "absolute",
-                right: insets.right,
-                left: insets.left,
-                bottom: insets.bottom,
+                right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
+                left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
+                bottom: settings?.safeAreaInControlsEnabled ? insets.bottom : 0,
               },
             ]}
             className={`flex flex-col p-4`}

utils/atoms/settings.ts

@@ -85,7 +85,8 @@ export type Settings = {
   autoDownload: boolean;
   showCustomMenuLinks: boolean;
   subtitleSize: number;
-  remuxConcurrentLimit: 1 | 2 | 3 | 4; // TODO: Maybe let people choose their own limit? 4 seems like a safe max?
+  remuxConcurrentLimit: 1 | 2 | 3 | 4;
+  safeAreaInControlsEnabled: boolean;
 };
 
 const loadSettings = (): Settings => {
@@ -122,6 +123,7 @@ const loadSettings = (): Settings => {
     showCustomMenuLinks: false,
     subtitleSize: Platform.OS === "ios" ? 60 : 100,
     remuxConcurrentLimit: 1,
+    safeAreaInControlsEnabled: true,
   };
 
   try {