feat: refactor settings

app/(auth)/(tabs)/(custom-links)/index.tsx

@@ -1,27 +1,29 @@
-import {FlatList, TouchableOpacity, View} from "react-native";
-import {useSafeAreaInsets} from "react-native-safe-area-context";
-import React, {useCallback, useEffect, useState} from "react";
-import {useAtom} from "jotai/index";
-import {apiAtom} from "@/providers/JellyfinProvider";
-import {ListItem} from "@/components/ListItem";
-import * as WebBrowser from 'expo-web-browser';
-import Ionicons from '@expo/vector-icons/Ionicons';
-import {Text} from "@/components/common/Text";
+import { FlatList, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import React, { useCallback, useEffect, useState } from "react";
+import { useAtom } from "jotai/index";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { ListItem } from "@/components/list/ListItem";
+import * as WebBrowser from "expo-web-browser";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import { Text } from "@/components/common/Text";
 
 export interface MenuLink {
-    name: string,
-    url: string,
-    icon: string
+  name: string;
+  url: string;
+  icon: string;
 }
 
 export default function menuLinks() {
   const [api] = useAtom(apiAtom);
-  const insets = useSafeAreaInsets()
-  const [menuLinks, setMenuLinks] = useState<MenuLink[]>([])
+  const insets = useSafeAreaInsets();
+  const [menuLinks, setMenuLinks] = useState<MenuLink[]>([]);
 
   const getMenuLinks = useCallback(async () => {
     try {
-      const response = await api?.axiosInstance.get(api?.basePath + "/web/config.json")
+      const response = await api?.axiosInstance.get(
+        api?.basePath + "/web/config.json"
+      );
       const config = response?.data;
 
       if (!config && !config.hasOwnProperty("menuLinks")) {
@@ -29,15 +31,15 @@ export default function menuLinks() {
         return;
       }
 
-      setMenuLinks(config?.menuLinks as MenuLink[])
-      } catch (error) {
-        console.error("Failed to retrieve config:", error);
-      }
-  },
-    [api]
-  )
+      setMenuLinks(config?.menuLinks as MenuLink[]);
+    } catch (error) {
+      console.error("Failed to retrieve config:", error);
+    }
+  }, [api]);
 
-  useEffect(() => { getMenuLinks() }, []);
+  useEffect(() => {
+    getMenuLinks();
+  }, []);
   return (
     <FlatList
       contentInsetAdjustmentBehavior="automatic"
@@ -47,27 +49,27 @@ export default function menuLinks() {
         paddingRight: insets.right,
       }}
       data={menuLinks}
-      renderItem={({item}) => (
-        <TouchableOpacity onPress={() => WebBrowser.openBrowserAsync(item.url) }>
+      renderItem={({ item }) => (
+        <TouchableOpacity onPress={() => WebBrowser.openBrowserAsync(item.url)}>
           <ListItem
-              title={item.name}
-              iconAfter={<Ionicons name="link" size={24} color="white"/>}
+            title={item.name}
+            iconAfter={<Ionicons name="link" size={24} color="white" />}
           />
         </TouchableOpacity>
-        )
-      }
+      )}
       ItemSeparatorComponent={() => (
         <View
           style={{
             width: 10,
             height: 10,
-          }}/>
-        )}
+          }}
+        />
+      )}
       ListEmptyComponent={
-          <View className="flex flex-col items-center justify-center h-full">
-              <Text className="font-bold text-xl text-neutral-500">No links</Text>
-          </View>
+        <View className="flex flex-col items-center justify-center h-full">
+          <Text className="font-bold text-xl text-neutral-500">No links</Text>
+        </View>
       }
-      />
+    />
   );
-}
+}

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

@@ -49,6 +49,12 @@ export default function IndexLayout() {
           title: "Settings",
         }}
       />
+      <Stack.Screen
+        name="settings/optimized-server/page"
+        options={{
+          title: "",
+        }}
+      />
       {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
         <Stack.Screen key={name} name={name} options={options} />
       ))}

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

@@ -1,176 +1,94 @@
-import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
-import { ListItem } from "@/components/ListItem";
-import { SettingToggles } from "@/components/settings/SettingToggles";
-import {useDownload} from "@/providers/DownloadProvider";
-import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
-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 { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import { AudioToggles } from "@/components/settings/AudioToggles";
+import { DownloadSettings } from "@/components/settings/DownloadSettings";
+import { MediaProvider } from "@/components/settings/MediaContext";
+import { MediaToggles } from "@/components/settings/MediaToggles";
+import { OtherSettings } from "@/components/settings/OtherSettings";
+import { QuickConnect } from "@/components/settings/QuickConnect";
+import { StorageSettings } from "@/components/settings/StorageSettings";
+import { SubtitleToggles } from "@/components/settings/SubtitleToggles";
+import { UserInfo } from "@/components/settings/UserInfo";
+import { useJellyfin } from "@/providers/JellyfinProvider";
+import { clearLogs } from "@/utils/log";
 import * as Haptics from "expo-haptics";
-import { useAtom } from "jotai";
-import { Alert, ScrollView, View } from "react-native";
-import * as Progress from "react-native-progress";
+import { useNavigation, useRouter } from "expo-router";
+import { useEffect } from "react";
+import { ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { toast } from "sonner-native";
 
 export default function settings() {
-  const { logout } = useJellyfin();
-  const { deleteAllFiles, appSizeUsage } = useDownload();
-  const { logs } = useLog();
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
+  const router = useRouter();
   const insets = useSafeAreaInsets();
-
-  const { data: size, isLoading: appSizeLoading } = useQuery({
-    queryKey: ["appSize", appSizeUsage],
-    queryFn: async () => {
-      const app = await appSizeUsage;
-
-      const remaining = await FileSystem.getFreeDiskStorageAsync();
-      const total = await FileSystem.getTotalDiskCapacityAsync();
-
-      return { app, remaining, total, used: (total - remaining) / total };
-    },
-  });
-
-  const openQuickConnectAuthCodeInput = () => {
-    Alert.prompt(
-      "Quick connect",
-      "Enter the quick connect code",
-      async (text) => {
-        if (text) {
-          try {
-            const res = await getQuickConnectApi(api!).authorizeQuickConnect({
-              code: text,
-              userId: user?.Id,
-            });
-            if (res.status === 200) {
-              Haptics.notificationAsync(
-                Haptics.NotificationFeedbackType.Success
-              );
-              Alert.alert("Success", "Quick connect authorized");
-            } else {
-              Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
-              Alert.alert("Error", "Invalid code");
-            }
-          } catch (e) {
-            Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
-            Alert.alert("Error", "Invalid code");
-          }
-        }
-      }
-    );
-  };
-
-  const onDeleteClicked = async () => {
-    try {
-      await deleteAllFiles();
-      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
-    } catch (e) {
-      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
-      toast.error("Error deleting files");
-    }
-  };
+  const { logout } = useJellyfin();
 
   const onClearLogsClicked = async () => {
     clearLogs();
     Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
   };
 
+  const navigation = useNavigation();
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <TouchableOpacity
+          onPress={() => {
+            logout();
+          }}
+        >
+          <Text className="text-red-600">Log out</Text>
+        </TouchableOpacity>
+      ),
+    });
+  }, []);
+
   return (
     <ScrollView
       contentContainerStyle={{
         paddingLeft: insets.left,
         paddingRight: insets.right,
-        paddingBottom: 100,
       }}
     >
       <View className="p-4 flex flex-col gap-y-4">
-        {/* <Button
-          onPress={() => {
-            registerBackgroundFetchAsync();
-          }}
-        >
-          registerBackgroundFetchAsync
-        </Button> */}
-        <View>
-          <Text className="font-bold text-lg mb-2">User Info</Text>
+        <UserInfo />
+        <QuickConnect className="mb-4" />
 
-          <View className="flex flex-col rounded-xl overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
-            <ListItem title="User" subTitle={user?.Name} />
-            <ListItem title="Server" subTitle={api?.basePath} />
-            <ListItem title="Token" subTitle={api?.accessToken} />
-          </View>
-          <Button className="my-2.5" color="black" onPress={logout}>
-            Log out
-          </Button>
-        </View>
+        <MediaProvider>
+          <MediaToggles className="mb-4" />
+          <AudioToggles className="mb-4" />
+          <SubtitleToggles className="mb-4" />
+        </MediaProvider>
+
+        <OtherSettings />
+        <DownloadSettings />
 
         <View>
-          <Text className="font-bold text-lg mb-2">Quick connect</Text>
-          <Button onPress={openQuickConnectAuthCodeInput} color="black">
-            Authorize
-          </Button>
+          <ListGroup title="Jellyseerr">
+            <ListItem
+              onPress={() => router.push("/settings/jellyseerr/page")}
+              title={"Jellyseerr Settings"}
+              showArrow
+            ></ListItem>
+          </ListGroup>
         </View>
 
-        <SettingToggles />
-
-        <View className="flex flex-col space-y-2">
-          <Text className="font-bold text-lg mb-2">Storage</Text>
-          <View className="mb-4 space-y-2">
-            {size && <Text>App usage: {size.app.bytesToReadable()}</Text>}
-            <Progress.Bar
-              className="bg-gray-100/10"
-              indeterminate={appSizeLoading}
-              color="#9333ea"
-              width={null}
-              height={10}
-              borderRadius={6}
-              borderWidth={0}
-              progress={size?.used}
+        <View className="mb-4">
+          <ListGroup title={"Logs"}>
+            <ListItem
+              onPress={() => router.push("/settings/logs/page")}
+              showArrow
+              title={"Logs"}
             />
-            {size && (
-              <Text>
-                Available: {size.remaining?.bytesToReadable()}, Total:{" "}
-                {size.total?.bytesToReadable()}
-              </Text>
-            )}
-          </View>
-          <Button color="red" onPress={onDeleteClicked}>
-            Delete all downloaded files
-          </Button>
-          <Button color="red" onPress={onClearLogsClicked}>
-            Delete all logs
-          </Button>
-        </View>
-        <View>
-          <Text className="font-bold text-lg mb-2">Logs</Text>
-          <View className="flex flex-col space-y-2">
-            {logs?.map((log, index) => (
-              <View key={index} className="bg-neutral-900 rounded-xl p-3">
-                <Text
-                  className={`
-                  mb-1
-              ${log.level === "INFO" && "text-blue-500"}
-              ${log.level === "ERROR" && "text-red-500"}
-                `}
-                >
-                  {log.level}
-                </Text>
-                <Text uiTextView selectable className="text-xs">
-                  {log.message}
-                </Text>
-              </View>
-            ))}
-            {logs?.length === 0 && (
-              <Text className="opacity-50">No logs available</Text>
-            )}
-          </View>
+            <ListItem
+              textColor="red"
+              onPress={onClearLogsClicked}
+              title={"Delete All Logs"}
+            />
+          </ListGroup>
         </View>
+
+        <StorageSettings />
       </View>
     </ScrollView>
   );

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

@@ -0,0 +1,78 @@
+import { Text } from "@/components/common/Text";
+import { JellyseerrSettings } from "@/components/settings/Jellyseerr";
+import { OptimizedServerForm } from "@/components/settings/OptimizedServerForm";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getOrSetDeviceId } from "@/utils/device";
+import { getStatistics } from "@/utils/optimize-server";
+import { useMutation } from "@tanstack/react-query";
+import { useNavigation } from "expo-router";
+import { useAtom } from "jotai";
+import { useEffect, useState } from "react";
+import { ActivityIndicator, TouchableOpacity, View } from "react-native";
+import { toast } from "sonner-native";
+
+export default function page() {
+  const navigation = useNavigation();
+
+  const [api] = useAtom(apiAtom);
+  const [settings, updateSettings] = useSettings();
+
+  const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
+    useState<string>(settings?.optimizedVersionsServerUrl || "");
+
+  const saveMutation = useMutation({
+    mutationFn: async (newVal: string) => {
+      if (newVal.length === 0 || !newVal.startsWith("http")) {
+        toast.error("Invalid URL");
+        return;
+      }
+
+      const updatedUrl = newVal.endsWith("/") ? newVal : newVal + "/";
+
+      updateSettings({
+        optimizedVersionsServerUrl: updatedUrl,
+      });
+
+      return await getStatistics({
+        url: settings?.optimizedVersionsServerUrl,
+        authHeader: api?.accessToken,
+        deviceId: getOrSetDeviceId(),
+      });
+    },
+    onSuccess: (data) => {
+      if (data) {
+        toast.success("Connected");
+      } else {
+        toast.error("Could not connect");
+      }
+    },
+    onError: () => {
+      toast.error("Could not connect");
+    },
+  });
+
+  const onSave = (newVal: string) => {
+    saveMutation.mutate(newVal);
+  };
+
+  // useEffect(() => {
+  //   navigation.setOptions({
+  //     title: "Optimized Server",
+  //     headerRight: () =>
+  //       saveMutation.isPending ? (
+  //         <ActivityIndicator size={"small"} color={"white"} />
+  //       ) : (
+  //         <TouchableOpacity onPress={() => onSave(optimizedVersionsServerUrl)}>
+  //           <Text className="text-blue-500">Save</Text>
+  //         </TouchableOpacity>
+  //       ),
+  //   });
+  // }, [navigation, optimizedVersionsServerUrl, saveMutation.isPending]);
+
+  return (
+    <View className="p-4">
+      <JellyseerrSettings />
+    </View>
+  );
+}

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

@@ -0,0 +1,33 @@
+import { Text } from "@/components/common/Text";
+import { useLog } from "@/utils/log";
+import { ScrollView, View } from "react-native";
+
+export default function page() {
+  const { logs } = useLog();
+
+  return (
+    <ScrollView className="p-4">
+      <View className="flex flex-col space-y-2">
+        {logs?.map((log, index) => (
+          <View key={index} className="bg-neutral-900 rounded-xl p-3">
+            <Text
+              className={`
+                  mb-1
+              ${log.level === "INFO" && "text-blue-500"}
+              ${log.level === "ERROR" && "text-red-500"}
+                `}
+            >
+              {log.level}
+            </Text>
+            <Text uiTextView selectable className="text-xs">
+              {log.message}
+            </Text>
+          </View>
+        ))}
+        {logs?.length === 0 && (
+          <Text className="opacity-50">No logs available</Text>
+        )}
+      </View>
+    </ScrollView>
+  );
+}

app/(auth)/(tabs)/(home)/settings/optimized-server/page.tsx

@@ -0,0 +1,80 @@
+import { Text } from "@/components/common/Text";
+import { OptimizedServerForm } from "@/components/settings/OptimizedServerForm";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getOrSetDeviceId } from "@/utils/device";
+import { getStatistics } from "@/utils/optimize-server";
+import { useMutation } from "@tanstack/react-query";
+import { useNavigation } from "expo-router";
+import { useAtom } from "jotai";
+import { useEffect, useState } from "react";
+import { ActivityIndicator, TouchableOpacity, View } from "react-native";
+import { toast } from "sonner-native";
+
+export default function page() {
+  const navigation = useNavigation();
+
+  const [api] = useAtom(apiAtom);
+  const [settings, updateSettings] = useSettings();
+
+  const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
+    useState<string>(settings?.optimizedVersionsServerUrl || "");
+
+  const saveMutation = useMutation({
+    mutationFn: async (newVal: string) => {
+      if (newVal.length === 0 || !newVal.startsWith("http")) {
+        toast.error("Invalid URL");
+        return;
+      }
+
+      const updatedUrl = newVal.endsWith("/") ? newVal : newVal + "/";
+
+      updateSettings({
+        optimizedVersionsServerUrl: updatedUrl,
+      });
+
+      return await getStatistics({
+        url: settings?.optimizedVersionsServerUrl,
+        authHeader: api?.accessToken,
+        deviceId: getOrSetDeviceId(),
+      });
+    },
+    onSuccess: (data) => {
+      if (data) {
+        toast.success("Connected");
+      } else {
+        toast.error("Could not connect");
+      }
+    },
+    onError: () => {
+      toast.error("Could not connect");
+    },
+  });
+
+  const onSave = (newVal: string) => {
+    saveMutation.mutate(newVal);
+  };
+
+  useEffect(() => {
+    navigation.setOptions({
+      title: "Optimized Server",
+      headerRight: () =>
+        saveMutation.isPending ? (
+          <ActivityIndicator size={"small"} color={"white"} />
+        ) : (
+          <TouchableOpacity onPress={() => onSave(optimizedVersionsServerUrl)}>
+            <Text className="text-blue-500">Save</Text>
+          </TouchableOpacity>
+        ),
+    });
+  }, [navigation, optimizedVersionsServerUrl, saveMutation.isPending]);
+
+  return (
+    <View className="p-4">
+      <OptimizedServerForm
+        value={optimizedVersionsServerUrl}
+        onChangeValue={setOptimizedVersionsServerUrl}
+      />
+    </View>
+  );
+}