feat: refactor settings

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

@@ -1,27 +1,29 @@
-import {FlatList, TouchableOpacity, View} from "react-native";
+import { FlatList, TouchableOpacity, View } from "react-native";
-import {useSafeAreaInsets} from "react-native-safe-area-context";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
-import React, {useCallback, useEffect, useState} from "react";
+import React, { useCallback, useEffect, useState } from "react";
-import {useAtom} from "jotai/index";
+import { useAtom } from "jotai/index";
-import {apiAtom} from "@/providers/JellyfinProvider";
+import { apiAtom } from "@/providers/JellyfinProvider";
-import {ListItem} from "@/components/ListItem";
+import { ListItem } from "@/components/list/ListItem";
-import * as WebBrowser from 'expo-web-browser';
+import * as WebBrowser from "expo-web-browser";
-import Ionicons from '@expo/vector-icons/Ionicons';
+import Ionicons from "@expo/vector-icons/Ionicons";
-import {Text} from "@/components/common/Text";
+import { Text } from "@/components/common/Text";
 
 export interface MenuLink {
-    name: string,
+  name: string;
-    url: string,
+  url: string;
-    icon: string
+  icon: string;
 }
 
 export default function menuLinks() {
   const [api] = useAtom(apiAtom);
-  const insets = useSafeAreaInsets()
+  const insets = useSafeAreaInsets();
-  const [menuLinks, setMenuLinks] = useState<MenuLink[]>([])
+  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[])
+      setMenuLinks(config?.menuLinks as MenuLink[]);
-      } catch (error) {
+    } catch (error) {
-        console.error("Failed to retrieve config:", error);
+      console.error("Failed to retrieve config:", error);
-      }
+    }
-  },
+  }, [api]);
-    [api]
-  )
 
-  useEffect(() => { getMenuLinks() }, []);
+  useEffect(() => {
+    getMenuLinks();
+  }, []);
   return (
     <FlatList
       contentInsetAdjustmentBehavior="automatic"
@@ -47,27 +49,27 @@ export default function menuLinks() {
         paddingRight: insets.right,
       }}
       data={menuLinks}
-      renderItem={({item}) => (
+      renderItem={({ item }) => (
-        <TouchableOpacity onPress={() => WebBrowser.openBrowserAsync(item.url) }>
+        <TouchableOpacity onPress={() => WebBrowser.openBrowserAsync(item.url)}>
           <ListItem
-              title={item.name}
+            title={item.name}
-              iconAfter={<Ionicons name="link" size={24} color="white"/>}
+            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">
+        <View className="flex flex-col items-center justify-center h-full">
-              <Text className="font-bold text-xl text-neutral-500">No links</Text>
+          <Text className="font-bold text-xl text-neutral-500">No links</Text>
-          </View>
+        </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 { ListGroup } from "@/components/list/ListGroup";
-import { SettingToggles } from "@/components/settings/SettingToggles";
+import { ListItem } from "@/components/list/ListItem";
-import {useDownload} from "@/providers/DownloadProvider";
+import { AudioToggles } from "@/components/settings/AudioToggles";
-import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
+import { DownloadSettings } from "@/components/settings/DownloadSettings";
-import { clearLogs, useLog } from "@/utils/log";
+import { MediaProvider } from "@/components/settings/MediaContext";
-import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
+import { MediaToggles } from "@/components/settings/MediaToggles";
-import { useQuery } from "@tanstack/react-query";
+import { OtherSettings } from "@/components/settings/OtherSettings";
-import * as FileSystem from "expo-file-system";
+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 { useNavigation, useRouter } from "expo-router";
-import { Alert, ScrollView, View } from "react-native";
+import { useEffect } from "react";
-import * as Progress from "react-native-progress";
+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 router = useRouter();
-  const { deleteAllFiles, appSizeUsage } = useDownload();
-  const { logs } = useLog();
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
   const insets = useSafeAreaInsets();
-
+  const { logout } = useJellyfin();
-  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 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
+        <UserInfo />
-          onPress={() => {
+        <QuickConnect className="mb-4" />
-            registerBackgroundFetchAsync();
-          }}
-        >
-          registerBackgroundFetchAsync
-        </Button> */}
-        <View>
-          <Text className="font-bold text-lg mb-2">User Info</Text>
 
-          <View className="flex flex-col rounded-xl overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
+        <MediaProvider>
-            <ListItem title="User" subTitle={user?.Name} />
+          <MediaToggles className="mb-4" />
-            <ListItem title="Server" subTitle={api?.basePath} />
+          <AudioToggles className="mb-4" />
-            <ListItem title="Token" subTitle={api?.accessToken} />
+          <SubtitleToggles className="mb-4" />
-          </View>
+        </MediaProvider>
-          <Button className="my-2.5" color="black" onPress={logout}>
+
-            Log out
+        <OtherSettings />
-          </Button>
+        <DownloadSettings />
-        </View>
 
         <View>
-          <Text className="font-bold text-lg mb-2">Quick connect</Text>
+          <ListGroup title="Jellyseerr">
-          <Button onPress={openQuickConnectAuthCodeInput} color="black">
+            <ListItem
-            Authorize
+              onPress={() => router.push("/settings/jellyseerr/page")}
-          </Button>
+              title={"Jellyseerr Settings"}
+              showArrow
+            ></ListItem>
+          </ListGroup>
         </View>
 
-        <SettingToggles />
+        <View className="mb-4">
-
+          <ListGroup title={"Logs"}>
-        <View className="flex flex-col space-y-2">
+            <ListItem
-          <Text className="font-bold text-lg mb-2">Storage</Text>
+              onPress={() => router.push("/settings/logs/page")}
-          <View className="mb-4 space-y-2">
+              showArrow
-            {size && <Text>App usage: {size.app.bytesToReadable()}</Text>}
+              title={"Logs"}
-            <Progress.Bar
-              className="bg-gray-100/10"
-              indeterminate={appSizeLoading}
-              color="#9333ea"
-              width={null}
-              height={10}
-              borderRadius={6}
-              borderWidth={0}
-              progress={size?.used}
             />
-            {size && (
+            <ListItem
-              <Text>
+              textColor="red"
-                Available: {size.remaining?.bytesToReadable()}, Total:{" "}
+              onPress={onClearLogsClicked}
-                {size.total?.bytesToReadable()}
+              title={"Delete All Logs"}
-              </Text>
+            />
-            )}
+          </ListGroup>
-          </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>
         </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>
+  );
+}

augmentations/number.ts

@@ -1,9 +1,9 @@
 declare global {
   interface Number {
     bytesToReadable(): string;
-    secondsToMilliseconds(): number
+    secondsToMilliseconds(): number;
-    minutesToMilliseconds(): number
+    minutesToMilliseconds(): number;
-    hoursToMilliseconds(): number
+    hoursToMilliseconds(): number;
   }
 }
 
@@ -11,27 +11,27 @@ Number.prototype.bytesToReadable = function () {
   const bytes = this.valueOf();
   const gb = bytes / 1e9;
 
-  if (gb >= 1) return `${gb.toFixed(2)} GB`;
+  if (gb >= 1) return `${gb.toFixed(0)} GB`;
 
   const mb = bytes / 1024.0 / 1024.0;
-  if (mb >= 1) return `${mb.toFixed(2)} MB`;
+  if (mb >= 1) return `${mb.toFixed(0)} MB`;
 
   const kb = bytes / 1024.0;
-  if (kb >= 1) return `${kb.toFixed(2)} KB`;
+  if (kb >= 1) return `${kb.toFixed(0)} KB`;
 
   return `${bytes.toFixed(2)} B`;
-}
+};
 
 Number.prototype.secondsToMilliseconds = function () {
-  return this.valueOf() * 1000
+  return this.valueOf() * 1000;
-}
+};
 
 Number.prototype.minutesToMilliseconds = function () {
-  return this.valueOf() * (60).secondsToMilliseconds()
+  return this.valueOf() * (60).secondsToMilliseconds();
-}
+};
 
 Number.prototype.hoursToMilliseconds = function () {
-  return this.valueOf() * (60).minutesToMilliseconds()
+  return this.valueOf() * (60).minutesToMilliseconds();
-}
+};
 
 export {};

components/ListItem.tsx

@@ -1,35 +0,0 @@
-import { PropsWithChildren, ReactNode } from "react";
-import { View, ViewProps } from "react-native";
-import { Text } from "./common/Text";
-
-interface Props extends ViewProps {
-  title?: string | null | undefined;
-  subTitle?: string | null | undefined;
-  children?: ReactNode;
-  iconAfter?: ReactNode;
-}
-
-export const ListItem: React.FC<PropsWithChildren<Props>> = ({
-  title,
-  subTitle,
-  iconAfter,
-  children,
-  ...props
-}) => {
-  return (
-    <View
-      className="flex flex-row items-center justify-between bg-neutral-900 p-4"
-      {...props}
-    >
-      <View className="flex flex-col overflow-visible">
-        <Text className="font-bold ">{title}</Text>
-        {subTitle && (
-          <Text uiTextView selectable className="text-xs text-neutral-400">
-            {subTitle}
-          </Text>
-        )}
-      </View>
-      {iconAfter}
-    </View>
-  );
-};

components/list/ListGroup.tsx

@@ -0,0 +1,59 @@
+import {
+  PropsWithChildren,
+  Children,
+  isValidElement,
+  cloneElement,
+  ReactElement,
+} from "react";
+import { StyleSheet, View, ViewProps, ViewStyle } from "react-native";
+import { ListItem } from "./ListItem";
+import { Text } from "../common/Text";
+
+interface Props extends ViewProps {
+  title?: string | null | undefined;
+  description?: ReactElement;
+}
+
+export const ListGroup: React.FC<PropsWithChildren<Props>> = ({
+  title,
+  children,
+  description,
+  ...props
+}) => {
+  const childrenArray = Children.toArray(children);
+
+  return (
+    <View>
+      <Text className="ml-4 mb-1 uppercase text-[#8E8D91] text-xs">
+        {title}
+      </Text>
+      <View
+        style={[]}
+        className="flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900"
+        {...props}
+      >
+        {Children.map(childrenArray, (child, index) => {
+          if (isValidElement<{ style?: ViewStyle }>(child)) {
+            return cloneElement(child as any, {
+              style: StyleSheet.compose(
+                child.props.style,
+                index < childrenArray.length - 1
+                  ? styles.borderBottom
+                  : undefined
+              ),
+            });
+          }
+          return child;
+        })}
+      </View>
+      {description && <View className="pl-4 mt-1">{description}</View>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  borderBottom: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#3D3C40",
+  },
+});

components/list/ListItem.tsx

@@ -0,0 +1,124 @@
+import { PropsWithChildren, ReactNode } from "react";
+import {
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewProps,
+} from "react-native";
+import { Text } from "../common/Text";
+import { Ionicons } from "@expo/vector-icons";
+
+interface Props extends TouchableOpacityProps, ViewProps {
+  title?: string | null | undefined;
+  value?: string | null | undefined;
+  children?: ReactNode;
+  iconAfter?: ReactNode;
+  icon?: keyof typeof Ionicons.glyphMap;
+  showArrow?: boolean;
+  textColor?: "default" | "blue" | "red";
+  onPress?: () => void;
+}
+
+export const ListItem: React.FC<PropsWithChildren<Props>> = ({
+  title,
+  value,
+  iconAfter,
+  children,
+  showArrow = false,
+  icon,
+  textColor = "default",
+  onPress,
+  disabled = false,
+  ...props
+}) => {
+  if (onPress)
+    return (
+      <TouchableOpacity
+        disabled={disabled}
+        onPress={onPress}
+        className={`flex flex-row items-center justify-between bg-neutral-900 h-11 pr-4 ${
+          disabled ? "opacity-50" : ""
+        }`}
+        {...props}
+      >
+        <ListItemContent
+          title={title}
+          value={value}
+          icon={icon}
+          textColor={textColor}
+          showArrow={showArrow}
+          iconAfter={iconAfter}
+        >
+          {children}
+        </ListItemContent>
+      </TouchableOpacity>
+    );
+  return (
+    <View
+      className={`flex flex-row items-center justify-between bg-neutral-900 h-11 pr-4 ${
+        disabled ? "opacity-50" : ""
+      }`}
+      {...props}
+    >
+      <ListItemContent
+        title={title}
+        value={value}
+        icon={icon}
+        textColor={textColor}
+        showArrow={showArrow}
+        iconAfter={iconAfter}
+      >
+        {children}
+      </ListItemContent>
+    </View>
+  );
+};
+
+const ListItemContent = ({
+  title,
+  textColor,
+  icon,
+  value,
+  showArrow,
+  iconAfter,
+  children,
+  ...props
+}: Props) => {
+  return (
+    <>
+      <View className="flex flex-row items-center w-full">
+        {icon && (
+          <View className="border border-neutral-800 rounded-md h-8 w-8 flex items-center justify-center mr-2">
+            <Ionicons name="person-circle-outline" size={18} color="white" />
+          </View>
+        )}
+        <Text
+          className={
+            textColor === "blue"
+              ? "text-[#0584FE]"
+              : textColor === "red"
+              ? "text-red-600"
+              : "text-white"
+          }
+          numberOfLines={1}
+        >
+          {title}
+        </Text>
+        {value && (
+          <View className="ml-auto items-end">
+            <Text selectable className=" text-[#9899A1]" numberOfLines={1}>
+              {value}
+            </Text>
+          </View>
+        )}
+        {children && <View className="ml-auto">{children}</View>}
+        {showArrow && (
+          <View className={children ? "ml-1" : "ml-auto"}>
+            <Ionicons name="chevron-forward" size={18} color="#5A5960" />
+          </View>
+        )}
+      </View>
+      {iconAfter}
+    </>
+  );
+};

components/settings/AudioToggles.tsx

@@ -3,6 +3,9 @@ import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "../common/Text";
 import { useMedia } from "./MediaContext";
 import { Switch } from "react-native-gesture-handler";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
+import { Ionicons } from "@expo/vector-icons";
 
 interface Props extends ViewProps {}
 
@@ -14,26 +17,35 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
   if (!settings) return null;
 
   return (
-    <View>
+    <View {...props}>
-      <Text className="text-lg font-bold mb-2">Audio</Text>
+      <ListGroup
-      <View className="flex flex-col rounded-xl mb-4 overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
+        title={"Audio"}
-        <View
+        description={
-          className={`
+          <Text className="text-[#8E8D91] text-xs">
-              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+            Choose a default audio language.
-            `}
+          </Text>
-        >
+        }
-          <View className="flex flex-col shrink">
+      >
-            <Text className="font-semibold">Audio language</Text>
+        <ListItem title={"Set Audio Track From Previous Item"}>
-            <Text className="text-xs opacity-50">
+          <Switch
-              Choose a default audio language.
+            value={settings.rememberAudioSelections}
-            </Text>
+            onValueChange={(value) =>
-          </View>
+              updateSettings({ rememberAudioSelections: value })
+            }
+          />
+        </ListItem>
+        <ListItem title="Audio language">
           <DropdownMenu.Root>
             <DropdownMenu.Trigger>
-              <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+              <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3 ">
-                <Text>
+                <Text className="mr-1 text-[#8E8D91]">
                   {settings?.defaultAudioLanguage?.DisplayName || "None"}
                 </Text>
+                <Ionicons
+                  name="chevron-expand-sharp"
+                  size={18}
+                  color="#5A5960"
+                />
               </TouchableOpacity>
             </DropdownMenu.Trigger>
             <DropdownMenu.Content
@@ -72,43 +84,8 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
               ))}
             </DropdownMenu.Content>
           </DropdownMenu.Root>
-        </View>
+        </ListItem>
-        <View className="flex flex-col">
+      </ListGroup>
-          <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
-            <View className="flex flex-col">
-              <Text className="font-semibold">Use Default Audio</Text>
-              <Text className="text-xs opacity-50">
-                Play default audio track regardless of language.
-              </Text>
-            </View>
-            <Switch
-              value={settings.playDefaultAudioTrack}
-              onValueChange={(value) =>
-                updateSettings({ playDefaultAudioTrack: value })
-              }
-            />
-          </View>
-        </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">
-              <Text className="font-semibold">
-                Set Audio Track From Previous Item
-              </Text>
-              <Text className="text-xs opacity-50 min max-w-[85%]">
-                Try to set the audio track to the closest match to the last
-                video.
-              </Text>
-            </View>
-            <Switch
-              value={settings.rememberAudioSelections}
-              onValueChange={(value) =>
-                updateSettings({ rememberAudioSelections: value })
-              }
-            />
-          </View>
-        </View>
-      </View>
     </View>
   );
 };

components/settings/DownloadSettings.tsx

@@ -0,0 +1,103 @@
+import { Stepper } from "@/components/inputs/Stepper";
+import { useDownload } from "@/providers/DownloadProvider";
+import { Settings, useSettings } from "@/utils/atoms/settings";
+import { Ionicons } from "@expo/vector-icons";
+import { useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "expo-router";
+import React from "react";
+import { Switch, TouchableOpacity } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { Text } from "../common/Text";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
+
+export const DownloadSettings: React.FC = () => {
+  const [settings, updateSettings] = useSettings();
+  const { setProcesses } = useDownload();
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  if (!settings) return null;
+
+  return (
+    <ListGroup title="Downloads">
+      <ListItem title="Download method">
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
+              <Text className="mr-1 text-[#8E8D91]">
+                {settings.downloadMethod === "remux" ? "Default" : "Optimized"}
+              </Text>
+              <Ionicons name="chevron-expand-sharp" size={18} color="#5A5960" />
+            </TouchableOpacity>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content
+            loop={true}
+            side="bottom"
+            align="start"
+            alignOffset={0}
+            avoidCollisions={true}
+            collisionPadding={8}
+            sideOffset={8}
+          >
+            <DropdownMenu.Label>Methods</DropdownMenu.Label>
+            <DropdownMenu.Item
+              key="1"
+              onSelect={() => {
+                updateSettings({ downloadMethod: "remux" });
+                setProcesses([]);
+              }}
+            >
+              <DropdownMenu.ItemTitle>Default</DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              key="2"
+              onSelect={() => {
+                updateSettings({ downloadMethod: "optimized" });
+                setProcesses([]);
+                queryClient.invalidateQueries({ queryKey: ["search"] });
+              }}
+            >
+              <DropdownMenu.ItemTitle>Optimized</DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </ListItem>
+
+      <ListItem
+        title="Remux max download"
+        disabled={settings.downloadMethod !== "remux"}
+      >
+        <Stepper
+          value={settings.remuxConcurrentLimit}
+          step={1}
+          min={1}
+          max={4}
+          onUpdate={(value) =>
+            updateSettings({
+              remuxConcurrentLimit: value as Settings["remuxConcurrentLimit"],
+            })
+          }
+        />
+      </ListItem>
+
+      <ListItem
+        title="Auto download"
+        disabled={settings.downloadMethod !== "optimized"}
+      >
+        <Switch
+          disabled={settings.downloadMethod !== "optimized"}
+          value={settings.autoDownload}
+          onValueChange={(value) => updateSettings({ autoDownload: value })}
+        />
+      </ListItem>
+
+      <ListItem
+        disabled={settings.downloadMethod !== "optimized"}
+        onPress={() => router.push("/settings/optimized-server/page")}
+        showArrow
+        title="Optimized Versions Server"
+      ></ListItem>
+    </ListGroup>
+  );
+};

components/settings/Jellyseerr.tsx

@@ -3,7 +3,7 @@ import { View } from "react-native";
 import { Text } from "../common/Text";
 import { useCallback, useRef, useState } from "react";
 import { Input } from "../common/Input";
-import { ListItem } from "../ListItem";
+import { ListItem } from "../list/ListItem";
 import { Loader } from "../Loader";
 import { useSettings } from "@/utils/atoms/settings";
 import { Button } from "../Button";
@@ -11,6 +11,7 @@ import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useAtom } from "jotai";
 import { toast } from "sonner-native";
 import { useMutation } from "@tanstack/react-query";
+import { ListGroup } from "../list/ListGroup";
 
 export const JellyseerrSettings = () => {
   const {
@@ -83,41 +84,43 @@ export const JellyseerrSettings = () => {
   };
 
   return (
-    <View className="mt-4">
+    <View className="">
-      <Text className="text-lg font-bold mb-2">Jellyseerr</Text>
       <View>
         {jellyseerrUser ? (
-          <View className="flex flex-col rounded-xl overflow-hidden bg-neutral-900 pt-0 divide-y divide-neutral-800">
+          <>
-            <ListItem
+            <ListGroup title={"Jellyseerr"}>
-              title="Total media requests"
+              <ListItem
-              subTitle={jellyseerrUser?.requestCount?.toString()}
+                title="Total media requests"
-            />
+                value={jellyseerrUser?.requestCount?.toString()}
-            <ListItem
+              />
-              title="Movie quota limit"
+              <ListItem
-              subTitle={
+                title="Movie quota limit"
-                jellyseerrUser?.movieQuotaLimit?.toString() ?? "Unlimited"
+                value={
-              }
+                  jellyseerrUser?.movieQuotaLimit?.toString() ?? "Unlimited"
-            />
+                }
-            <ListItem
+              />
-              title="Movie quota days"
+              <ListItem
-              subTitle={
+                title="Movie quota days"
-                jellyseerrUser?.movieQuotaDays?.toString() ?? "Unlimited"
+                value={
-              }
+                  jellyseerrUser?.movieQuotaDays?.toString() ?? "Unlimited"
-            />
+                }
-            <ListItem
+              />
-              title="TV quota limit"
+              <ListItem
-              subTitle={jellyseerrUser?.tvQuotaLimit?.toString() ?? "Unlimited"}
+                title="TV quota limit"
-            />
+                value={jellyseerrUser?.tvQuotaLimit?.toString() ?? "Unlimited"}
-            <ListItem
+              />
-              title="TV quota days"
+              <ListItem
-              subTitle={jellyseerrUser?.tvQuotaDays?.toString() ?? "Unlimited"}
+                title="TV quota days"
-            />
+                value={jellyseerrUser?.tvQuotaDays?.toString() ?? "Unlimited"}
+              />
+            </ListGroup>
+
             <View className="p-4">
               <Button color="red" onPress={clearData}>
                 Reset Jellyseerr config
               </Button>
             </View>
-          </View>
+          </>
         ) : (
           <View className="flex flex-col rounded-xl overflow-hidden p-4 bg-neutral-900">
             <Text className="text-xs text-red-600 mb-2">

components/settings/MediaToggles.tsx

@@ -1,5 +1,8 @@
-import { useSettings } from "@/utils/atoms/settings";
+import React from "react";
 import { TouchableOpacity, View, ViewProps } from "react-native";
+import { useSettings } from "@/utils/atoms/settings";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
 import { Text } from "../common/Text";
 
 interface Props extends ViewProps {}
@@ -9,86 +12,61 @@ export const MediaToggles: React.FC<Props> = ({ ...props }) => {
 
   if (!settings) return null;
 
-  return (
+  const renderSkipControl = (
-    <View>
+    value: number,
-      <Text className="text-lg font-bold mb-2">Media</Text>
+    onDecrease: () => void,
-      <View className="flex flex-col rounded-xl mb-4 overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
+    onIncrease: () => void
-        <View
+  ) => (
-          className={`
+    <View className="flex flex-row items-center">
-              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+      <TouchableOpacity
-            `}
+        onPress={onDecrease}
-        >
+        className="w-8 h-8 bg-neutral-800 rounded-l-lg flex items-center justify-center"
-          <View className="flex flex-col shrink">
+      >
-            <Text className="font-semibold">Forward skip length</Text>
+        <Text>-</Text>
-            <Text className="text-xs opacity-50">
+      </TouchableOpacity>
-              Choose length in seconds when skipping in video playback.
+      <Text className="w-12 h-8 bg-neutral-800 first-letter:px-3 py-2 flex items-center justify-center">
-            </Text>
+        {value}s
-          </View>
+      </Text>
-          <View className="flex flex-row items-center">
+      <TouchableOpacity
-            <TouchableOpacity
+        className="w-8 h-8 bg-neutral-800 rounded-r-lg flex items-center justify-center"
-              onPress={() =>
+        onPress={onIncrease}
-                updateSettings({
+      >
-                  forwardSkipTime: Math.max(0, settings.forwardSkipTime - 5),
+        <Text>+</Text>
-                })
+      </TouchableOpacity>
-              }
+    </View>
-              className="w-8 h-8 bg-neutral-800 rounded-l-lg flex items-center justify-center"
+  );
-            >
-              <Text>-</Text>
-            </TouchableOpacity>
-            <Text className="w-12 h-8 bg-neutral-800 first-letter:px-3 py-2 flex items-center justify-center">
-              {settings.forwardSkipTime}s
-            </Text>
-            <TouchableOpacity
-              className="w-8 h-8 bg-neutral-800 rounded-r-lg flex items-center justify-center"
-              onPress={() =>
-                updateSettings({
-                  forwardSkipTime: Math.min(60, settings.forwardSkipTime + 5),
-                })
-              }
-            >
-              <Text>+</Text>
-            </TouchableOpacity>
-          </View>
-        </View>
 
-        <View
+  return (
-          className={`
+    <View {...props}>
-              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+      <ListGroup title="Media Controls">
-            `}
+        <ListItem title="Forward Skip Length">
-        >
+          {renderSkipControl(
-          <View className="flex flex-col shrink">
+            settings.forwardSkipTime,
-            <Text className="font-semibold">Rewind length</Text>
+            () =>
-            <Text className="text-xs opacity-50">
+              updateSettings({
-              Choose length in seconds when skipping in video playback.
+                forwardSkipTime: Math.max(0, settings.forwardSkipTime - 5),
-            </Text>
+              }),
-          </View>
+            () =>
-          <View className="flex flex-row items-center">
+              updateSettings({
-            <TouchableOpacity
+                forwardSkipTime: Math.min(60, settings.forwardSkipTime + 5),
-              onPress={() =>
+              })
-                updateSettings({
+          )}
-                  rewindSkipTime: Math.max(0, settings.rewindSkipTime - 5),
+        </ListItem>
-                })
+
-              }
+        <ListItem title="Rewind Length">
-              className="w-8 h-8 bg-neutral-800 rounded-l-lg flex items-center justify-center"
+          {renderSkipControl(
-            >
+            settings.rewindSkipTime,
-              <Text>-</Text>
+            () =>
-            </TouchableOpacity>
+              updateSettings({
-            <Text className="w-12 h-8 bg-neutral-800 first-letter:px-3 py-2 flex items-center justify-center">
+                rewindSkipTime: Math.max(0, settings.rewindSkipTime - 5),
-              {settings.rewindSkipTime}s
+              }),
-            </Text>
+            () =>
-            <TouchableOpacity
+              updateSettings({
-              className="w-8 h-8 bg-neutral-800 rounded-r-lg flex items-center justify-center"
+                rewindSkipTime: Math.min(60, settings.rewindSkipTime + 5),
-              onPress={() =>
+              })
-                updateSettings({
+          )}
-                  rewindSkipTime: Math.min(60, settings.rewindSkipTime + 5),
+        </ListItem>
-                })
+      </ListGroup>
-              }
-            >
-              <Text>+</Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      </View>
     </View>
   );
 };

components/settings/OptimizedServerForm.tsx

@@ -0,0 +1,43 @@
+import { TextInput, View, Linking } from "react-native";
+import { Text } from "../common/Text";
+
+interface Props {
+  value: string;
+  onChangeValue: (value: string) => void;
+}
+
+export const OptimizedServerForm: React.FC<Props> = ({
+  value,
+  onChangeValue,
+}) => {
+  const handleOpenLink = () => {
+    Linking.openURL("https://github.com/streamyfin/optimized-versions-server");
+  };
+
+  return (
+    <View>
+      <View className="flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900 px-4">
+        <View className={`flex flex-row items-center bg-neutral-900 h-11 pr-4`}>
+          <Text className="mr-4">URL</Text>
+          <TextInput
+            className="text-white"
+            placeholder="http(s)://domain.org:port"
+            value={value}
+            keyboardType="url"
+            returnKeyType="done"
+            autoCapitalize="none"
+            textContentType="URL"
+            onChangeText={(text) => onChangeValue(text)}
+          />
+        </View>
+      </View>
+      <Text className="px-4 text-xs text-neutral-500 mt-1">
+        Enter the URL for the optimize server. The URL should include http or
+        https and optionally the port.{" "}
+        <Text className="text-blue-500" onPress={handleOpenLink}>
+          Read more about the optimize server.
+        </Text>
+      </Text>
+    </View>
+  );
+};

components/settings/OtherSettings.tsx

@@ -0,0 +1,401 @@
+import { Stepper } from "@/components/inputs/Stepper";
+import { useDownload } from "@/providers/DownloadProvider";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import {
+  ScreenOrientationEnum,
+  Settings,
+  useSettings,
+} from "@/utils/atoms/settings";
+import {
+  BACKGROUND_FETCH_TASK,
+  registerBackgroundFetchAsync,
+  unregisterBackgroundFetchAsync,
+} from "@/utils/background-tasks";
+import { Ionicons } from "@expo/vector-icons";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import * as BackgroundFetch from "expo-background-fetch";
+import { useRouter } from "expo-router";
+import * as ScreenOrientation from "expo-screen-orientation";
+import * as TaskManager from "expo-task-manager";
+import { useAtom } from "jotai";
+import React, { useEffect, useState } from "react";
+import {
+  Linking,
+  Switch,
+  TouchableOpacity,
+  View,
+  ViewProps,
+} from "react-native";
+import { toast } from "sonner-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { Button } from "../Button";
+import { Input } from "../common/Input";
+import { Text } from "../common/Text";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
+import { Loader } from "../Loader";
+
+interface Props extends ViewProps {}
+
+export const OtherSettings: React.FC = () => {
+  const [settings, updateSettings] = useSettings();
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const [marlinUrl, setMarlinUrl] = useState<string>("");
+
+  /********************
+   * Background task
+   *******************/
+  const checkStatusAsync = async () => {
+    await BackgroundFetch.getStatusAsync();
+    return await TaskManager.isTaskRegisteredAsync(BACKGROUND_FETCH_TASK);
+  };
+
+  useEffect(() => {
+    (async () => {
+      const registered = await checkStatusAsync();
+
+      if (settings?.autoDownload === true && !registered) {
+        registerBackgroundFetchAsync();
+        toast.success("Background downloads enabled");
+      } else if (settings?.autoDownload === false && registered) {
+        unregisterBackgroundFetchAsync();
+        toast.info("Background downloads disabled");
+      } else if (settings?.autoDownload === true && registered) {
+        // Don't to anything
+      } else if (settings?.autoDownload === false && !registered) {
+        // Don't to anything
+      } else {
+        updateSettings({ autoDownload: false });
+      }
+    })();
+  }, [settings?.autoDownload]);
+  /**********************
+   *********************/
+
+  const {
+    data: mediaListCollections,
+    isLoading: isLoadingMediaListCollections,
+  } = useQuery({
+    queryKey: ["sf_promoted", user?.Id, settings?.usePopularPlugin],
+    queryFn: async () => {
+      if (!api || !user?.Id) return [];
+
+      const response = await getItemsApi(api).getItems({
+        userId: user.Id,
+        tags: ["sf_promoted"],
+        recursive: true,
+        fields: ["Tags"],
+        includeItemTypes: ["BoxSet"],
+      });
+
+      return response.data.Items ?? [];
+    },
+    enabled: !!api && !!user?.Id && settings?.usePopularPlugin === true,
+    staleTime: 0,
+  });
+
+  if (!settings) return null;
+
+  return (
+    <ListGroup title="Other" className="mb-4">
+      <ListItem title="Auto rotate">
+        <Switch
+          value={settings.autoRotate}
+          onValueChange={(value) => updateSettings({ autoRotate: value })}
+        />
+      </ListItem>
+
+      <ListItem title="Video orientation" disabled={settings.autoRotate}>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
+              <Text className="mr-1 text-[#8E8D91]">
+                {ScreenOrientationEnum[settings.defaultVideoOrientation]}
+              </Text>
+              <Ionicons name="chevron-expand-sharp" size={18} color="#5A5960" />
+            </TouchableOpacity>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content
+            loop={true}
+            side="bottom"
+            align="start"
+            alignOffset={0}
+            avoidCollisions={true}
+            collisionPadding={8}
+            sideOffset={8}
+          >
+            <DropdownMenu.Label>Orientation</DropdownMenu.Label>
+            <DropdownMenu.Item
+              key="1"
+              onSelect={() => {
+                updateSettings({
+                  defaultVideoOrientation:
+                    ScreenOrientation.OrientationLock.DEFAULT,
+                });
+              }}
+            >
+              <DropdownMenu.ItemTitle>
+                {
+                  ScreenOrientationEnum[
+                    ScreenOrientation.OrientationLock.DEFAULT
+                  ]
+                }
+              </DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              key="2"
+              onSelect={() => {
+                updateSettings({
+                  defaultVideoOrientation:
+                    ScreenOrientation.OrientationLock.PORTRAIT_UP,
+                });
+              }}
+            >
+              <DropdownMenu.ItemTitle>
+                {
+                  ScreenOrientationEnum[
+                    ScreenOrientation.OrientationLock.PORTRAIT_UP
+                  ]
+                }
+              </DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              key="3"
+              onSelect={() => {
+                updateSettings({
+                  defaultVideoOrientation:
+                    ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
+                });
+              }}
+            >
+              <DropdownMenu.ItemTitle>
+                {
+                  ScreenOrientationEnum[
+                    ScreenOrientation.OrientationLock.LANDSCAPE_LEFT
+                  ]
+                }
+              </DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              key="4"
+              onSelect={() => {
+                updateSettings({
+                  defaultVideoOrientation:
+                    ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT,
+                });
+              }}
+            >
+              <DropdownMenu.ItemTitle>
+                {
+                  ScreenOrientationEnum[
+                    ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
+                  ]
+                }
+              </DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </ListItem>
+
+      <ListItem title="Safe area in controls">
+        <Switch
+          value={settings.safeAreaInControlsEnabled}
+          onValueChange={(value) =>
+            updateSettings({ safeAreaInControlsEnabled: value })
+          }
+        />
+      </ListItem>
+
+      <ListItem
+        title="Use popular lists plugin"
+        onPress={() =>
+          Linking.openURL(
+            "https://github.com/lostb1t/jellyfin-plugin-media-lists"
+          )
+        }
+      >
+        <Switch
+          value={settings.usePopularPlugin}
+          onValueChange={(value) => updateSettings({ usePopularPlugin: value })}
+        />
+      </ListItem>
+
+      {settings.usePopularPlugin && (
+        <ListGroup title="Media List Collections">
+          {mediaListCollections?.map((mlc) => (
+            <ListItem key={mlc.Id} title={mlc.Name}>
+              <Switch
+                value={settings.mediaListCollectionIds?.includes(mlc.Id!)}
+                onValueChange={(value) => {
+                  if (!settings.mediaListCollectionIds) {
+                    updateSettings({
+                      mediaListCollectionIds: [mlc.Id!],
+                    });
+                    return;
+                  }
+
+                  updateSettings({
+                    mediaListCollectionIds:
+                      settings.mediaListCollectionIds.includes(mlc.Id!)
+                        ? settings.mediaListCollectionIds.filter(
+                            (id) => id !== mlc.Id
+                          )
+                        : [...settings.mediaListCollectionIds, mlc.Id!],
+                  });
+                }}
+              />
+            </ListItem>
+          ))}
+          {isLoadingMediaListCollections && <Loader />}
+          {mediaListCollections?.length === 0 && (
+            <Text className="text-xs opacity-50 p-4">
+              No collections found. Add some in Jellyfin.
+            </Text>
+          )}
+        </ListGroup>
+      )}
+
+      <ListItem title="Search engine">
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
+              <Text className="mr-1 text-[#8E8D91]">
+                {settings.searchEngine}
+              </Text>
+              <Ionicons name="chevron-expand-sharp" size={18} color="#5A5960" />
+            </TouchableOpacity>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content
+            loop={true}
+            side="bottom"
+            align="start"
+            alignOffset={0}
+            avoidCollisions={true}
+            collisionPadding={8}
+            sideOffset={8}
+          >
+            <DropdownMenu.Label>Orientation</DropdownMenu.Label>
+            <DropdownMenu.Item
+              key="1"
+              onSelect={() => {
+                updateSettings({
+                  defaultVideoOrientation:
+                    ScreenOrientation.OrientationLock.DEFAULT,
+                });
+              }}
+            >
+              <DropdownMenu.ItemTitle>
+                {
+                  ScreenOrientationEnum[
+                    ScreenOrientation.OrientationLock.DEFAULT
+                  ]
+                }
+              </DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              key="2"
+              onSelect={() => {
+                updateSettings({
+                  defaultVideoOrientation:
+                    ScreenOrientation.OrientationLock.PORTRAIT_UP,
+                });
+              }}
+            >
+              <DropdownMenu.ItemTitle>
+                {
+                  ScreenOrientationEnum[
+                    ScreenOrientation.OrientationLock.PORTRAIT_UP
+                  ]
+                }
+              </DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              key="3"
+              onSelect={() => {
+                updateSettings({
+                  defaultVideoOrientation:
+                    ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
+                });
+              }}
+            >
+              <DropdownMenu.ItemTitle>
+                {
+                  ScreenOrientationEnum[
+                    ScreenOrientation.OrientationLock.LANDSCAPE_LEFT
+                  ]
+                }
+              </DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              key="4"
+              onSelect={() => {
+                updateSettings({
+                  defaultVideoOrientation:
+                    ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT,
+                });
+              }}
+            >
+              <DropdownMenu.ItemTitle>
+                {
+                  ScreenOrientationEnum[
+                    ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
+                  ]
+                }
+              </DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </ListItem>
+
+      {settings.searchEngine === "Marlin" && (
+        <ListItem title="Marlin Server URL">
+          <View className="flex flex-row items-center space-x-2">
+            <Input
+              placeholder="Marlin Server URL..."
+              defaultValue={settings.marlinServerUrl}
+              value={marlinUrl}
+              keyboardType="url"
+              returnKeyType="done"
+              autoCapitalize="none"
+              textContentType="URL"
+              onChangeText={(text) => setMarlinUrl(text)}
+            />
+            <Button
+              color="purple"
+              className="shrink w-16 h-12"
+              onPress={() => {
+                updateSettings({
+                  marlinServerUrl: marlinUrl.endsWith("/")
+                    ? marlinUrl
+                    : marlinUrl + "/",
+                });
+              }}
+            >
+              Save
+            </Button>
+          </View>
+        </ListItem>
+      )}
+
+      <ListItem
+        title="Show Custom Menu Links"
+        onPress={() =>
+          Linking.openURL(
+            "https://jellyfin.org/docs/general/clients/web-config/#custom-menu-links"
+          )
+        }
+      >
+        <Switch
+          value={settings.showCustomMenuLinks}
+          onValueChange={(value) =>
+            updateSettings({ showCustomMenuLinks: value })
+          }
+        />
+      </ListItem>
+    </ListGroup>
+  );
+};

components/settings/QuickConnect.tsx

@@ -0,0 +1,59 @@
+import { Alert, View, ViewProps } from "react-native";
+import { Text } from "../common/Text";
+import { ListItem } from "../list/ListItem";
+import { Button } from "../Button";
+import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
+import { useAtom } from "jotai";
+import Constants from "expo-constants";
+import Application from "expo-application";
+import { ListGroup } from "../list/ListGroup";
+import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
+import * as Haptics from "expo-haptics";
+
+interface Props extends ViewProps {}
+
+export const QuickConnect: React.FC<Props> = ({ ...props }) => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  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");
+          }
+        }
+      }
+    );
+  };
+
+  return (
+    <View {...props}>
+      <ListGroup title={"Quick Connect"}>
+        <ListItem
+          onPress={openQuickConnectAuthCodeInput}
+          title="Autheorize Quick Connect"
+          textColor="blue"
+        ></ListItem>
+      </ListGroup>
+    </View>
+  );
+};

components/settings/SettingToggles.tsx

@@ -1,643 +0,0 @@
-import { useDownload } from "@/providers/DownloadProvider";
-import {
-  apiAtom,
-  getOrSetDeviceId,
-  userAtom,
-} from "@/providers/JellyfinProvider";
-import {
-  ScreenOrientationEnum,
-  Settings,
-  useSettings,
-} from "@/utils/atoms/settings";
-import {
-  BACKGROUND_FETCH_TASK,
-  registerBackgroundFetchAsync,
-  unregisterBackgroundFetchAsync,
-} from "@/utils/background-tasks";
-import { getStatistics } from "@/utils/optimize-server";
-import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import * as BackgroundFetch from "expo-background-fetch";
-import * as ScreenOrientation from "expo-screen-orientation";
-import * as TaskManager from "expo-task-manager";
-import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import {
-  Linking,
-  Switch,
-  TouchableOpacity,
-  View,
-  ViewProps,
-} from "react-native";
-import { toast } from "sonner-native";
-import * as DropdownMenu from "zeego/dropdown-menu";
-import { Button } from "../Button";
-import { Input } from "../common/Input";
-import { Text } from "../common/Text";
-import { Loader } from "../Loader";
-import { MediaToggles } from "./MediaToggles";
-import { Stepper } from "@/components/inputs/Stepper";
-import { MediaProvider } from "./MediaContext";
-import { SubtitleToggles } from "./SubtitleToggles";
-import { AudioToggles } from "./AudioToggles";
-import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
-import { ListItem } from "@/components/ListItem";
-import { JellyseerrSettings } from "./Jellyseerr";
-
-interface Props extends ViewProps {}
-
-export const SettingToggles: React.FC<Props> = ({ ...props }) => {
-  const [settings, updateSettings] = useSettings();
-  const { setProcesses } = useDownload();
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const [marlinUrl, setMarlinUrl] = useState<string>("");
-  const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
-    useState<string>(settings?.optimizedVersionsServerUrl || "");
-
-  const queryClient = useQueryClient();
-
-  /********************
-   * Background task
-   *******************/
-  const checkStatusAsync = async () => {
-    await BackgroundFetch.getStatusAsync();
-    return await TaskManager.isTaskRegisteredAsync(BACKGROUND_FETCH_TASK);
-  };
-
-  useEffect(() => {
-    (async () => {
-      const registered = await checkStatusAsync();
-
-      if (settings?.autoDownload === true && !registered) {
-        registerBackgroundFetchAsync();
-        toast.success("Background downloads enabled");
-      } else if (settings?.autoDownload === false && registered) {
-        unregisterBackgroundFetchAsync();
-        toast.info("Background downloads disabled");
-      } else if (settings?.autoDownload === true && registered) {
-        // Don't to anything
-      } else if (settings?.autoDownload === false && !registered) {
-        // Don't to anything
-      } else {
-        updateSettings({ autoDownload: false });
-      }
-    })();
-  }, [settings?.autoDownload]);
-  /**********************
-   *********************/
-
-  const {
-    data: mediaListCollections,
-    isLoading: isLoadingMediaListCollections,
-  } = useQuery({
-    queryKey: ["sf_promoted", user?.Id, settings?.usePopularPlugin],
-    queryFn: async () => {
-      if (!api || !user?.Id) return [];
-
-      const response = await getItemsApi(api).getItems({
-        userId: user.Id,
-        tags: ["sf_promoted"],
-        recursive: true,
-        fields: ["Tags"],
-        includeItemTypes: ["BoxSet"],
-      });
-
-      return response.data.Items ?? [];
-    },
-    enabled: !!api && !!user?.Id && settings?.usePopularPlugin === true,
-    staleTime: 0,
-  });
-
-  if (!settings) return null;
-
-  return (
-    <View {...props}>
-      {/* <View>
-        <Text className="text-lg font-bold mb-2">Look and feel</Text>
-        <View className="flex flex-col rounded-xl mb-4 overflow-hidden divide-y-2 divide-solid divide-neutral-800 opacity-50">
-          <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
-            <View className="shrink">
-              <Text className="font-semibold">Coming soon</Text>
-              <Text className="text-xs opacity-50 max-w-[90%]">
-                Options for changing the look and feel of the app.
-              </Text>
-            </View>
-            <Switch disabled />
-          </View>
-        </View>
-      </View> */}
-
-      <MediaProvider>
-        <MediaToggles />
-        <AudioToggles />
-        <SubtitleToggles />
-      </MediaProvider>
-
-      <View>
-        <Text className="text-lg font-bold mb-2">Other</Text>
-
-        <View className="flex flex-col rounded-xl overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
-          <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
-            <View className="shrink">
-              <Text className="font-semibold">Auto rotate</Text>
-              <Text className="text-xs opacity-50">
-                Important on android since the video player orientation is
-                locked to the app orientation.
-              </Text>
-            </View>
-            <Switch
-              value={settings.autoRotate}
-              onValueChange={(value) => updateSettings({ autoRotate: value })}
-            />
-          </View>
-
-          <View
-            pointerEvents={settings.autoRotate ? "none" : "auto"}
-            className={`
-            ${
-              settings.autoRotate
-                ? "opacity-50 pointer-events-none"
-                : "opacity-100"
-            }
-                flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-              `}
-          >
-            <View className="flex flex-col shrink">
-              <Text className="font-semibold">Video orientation</Text>
-              <Text className="text-xs opacity-50">
-                Set the full screen video player orientation.
-              </Text>
-            </View>
-            <DropdownMenu.Root>
-              <DropdownMenu.Trigger>
-                <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                  <Text>
-                    {ScreenOrientationEnum[settings.defaultVideoOrientation]}
-                  </Text>
-                </TouchableOpacity>
-              </DropdownMenu.Trigger>
-              <DropdownMenu.Content
-                loop={true}
-                side="bottom"
-                align="start"
-                alignOffset={0}
-                avoidCollisions={true}
-                collisionPadding={8}
-                sideOffset={8}
-              >
-                <DropdownMenu.Label>Orientation</DropdownMenu.Label>
-                <DropdownMenu.Item
-                  key="1"
-                  onSelect={() => {
-                    updateSettings({
-                      defaultVideoOrientation:
-                        ScreenOrientation.OrientationLock.DEFAULT,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>
-                    {
-                      ScreenOrientationEnum[
-                        ScreenOrientation.OrientationLock.DEFAULT
-                      ]
-                    }
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-                <DropdownMenu.Item
-                  key="2"
-                  onSelect={() => {
-                    updateSettings({
-                      defaultVideoOrientation:
-                        ScreenOrientation.OrientationLock.PORTRAIT_UP,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>
-                    {
-                      ScreenOrientationEnum[
-                        ScreenOrientation.OrientationLock.PORTRAIT_UP
-                      ]
-                    }
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-                <DropdownMenu.Item
-                  key="3"
-                  onSelect={() => {
-                    updateSettings({
-                      defaultVideoOrientation:
-                        ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>
-                    {
-                      ScreenOrientationEnum[
-                        ScreenOrientation.OrientationLock.LANDSCAPE_LEFT
-                      ]
-                    }
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-                <DropdownMenu.Item
-                  key="4"
-                  onSelect={() => {
-                    updateSettings({
-                      defaultVideoOrientation:
-                        ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>
-                    {
-                      ScreenOrientationEnum[
-                        ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
-                      ]
-                    }
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              </DropdownMenu.Content>
-            </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">
-                <Text className="font-semibold">Use popular lists plugin</Text>
-                <Text className="text-xs opacity-50">Made by: lostb1t</Text>
-                <TouchableOpacity
-                  onPress={() => {
-                    Linking.openURL(
-                      "https://github.com/lostb1t/jellyfin-plugin-media-lists"
-                    );
-                  }}
-                >
-                  <Text className="text-xs text-purple-600">More info</Text>
-                </TouchableOpacity>
-              </View>
-              <Switch
-                value={settings.usePopularPlugin}
-                onValueChange={(value) =>
-                  updateSettings({ usePopularPlugin: value })
-                }
-              />
-            </View>
-            {settings.usePopularPlugin && (
-              <View className="flex flex-col py-2 bg-neutral-900">
-                {mediaListCollections?.map((mlc) => (
-                  <View
-                    key={mlc.Id}
-                    className="flex flex-row items-center justify-between bg-neutral-900 px-4 py-2"
-                  >
-                    <View className="flex flex-col">
-                      <Text className="font-semibold">{mlc.Name}</Text>
-                    </View>
-                    <Switch
-                      value={settings.mediaListCollectionIds?.includes(mlc.Id!)}
-                      onValueChange={(value) => {
-                        if (!settings.mediaListCollectionIds) {
-                          updateSettings({
-                            mediaListCollectionIds: [mlc.Id!],
-                          });
-                          return;
-                        }
-
-                        updateSettings({
-                          mediaListCollectionIds:
-                            settings.mediaListCollectionIds.includes(mlc.Id!)
-                              ? settings.mediaListCollectionIds.filter(
-                                  (id) => id !== mlc.Id
-                                )
-                              : [...settings.mediaListCollectionIds, mlc.Id!],
-                        });
-                      }}
-                    />
-                  </View>
-                ))}
-                {isLoadingMediaListCollections && (
-                  <View className="flex flex-row items-center justify-center bg-neutral-900 p-4">
-                    <Loader />
-                  </View>
-                )}
-                {mediaListCollections?.length === 0 && (
-                  <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
-                    <Text className="text-xs opacity-50">
-                      No collections found. Add some in Jellyfin.
-                    </Text>
-                  </View>
-                )}
-              </View>
-            )}
-          </View>
-
-          <View className="flex flex-col">
-            <View
-              className={`
-                flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-              `}
-            >
-              <View className="flex flex-col shrink">
-                <Text className="font-semibold">Search engine</Text>
-                <Text className="text-xs opacity-50">
-                  Choose the search engine you want to use.
-                </Text>
-              </View>
-              <DropdownMenu.Root>
-                <DropdownMenu.Trigger>
-                  <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                    <Text>{settings.searchEngine}</Text>
-                  </TouchableOpacity>
-                </DropdownMenu.Trigger>
-                <DropdownMenu.Content
-                  loop={true}
-                  side="bottom"
-                  align="start"
-                  alignOffset={0}
-                  avoidCollisions={true}
-                  collisionPadding={8}
-                  sideOffset={8}
-                >
-                  <DropdownMenu.Label>Profiles</DropdownMenu.Label>
-                  <DropdownMenu.Item
-                    key="1"
-                    onSelect={() => {
-                      updateSettings({ searchEngine: "Jellyfin" });
-                      queryClient.invalidateQueries({ queryKey: ["search"] });
-                    }}
-                  >
-                    <DropdownMenu.ItemTitle>Jellyfin</DropdownMenu.ItemTitle>
-                  </DropdownMenu.Item>
-                  <DropdownMenu.Item
-                    key="2"
-                    onSelect={() => {
-                      updateSettings({ searchEngine: "Marlin" });
-                      queryClient.invalidateQueries({ queryKey: ["search"] });
-                    }}
-                  >
-                    <DropdownMenu.ItemTitle>Marlin</DropdownMenu.ItemTitle>
-                  </DropdownMenu.Item>
-                </DropdownMenu.Content>
-              </DropdownMenu.Root>
-            </View>
-            {settings.searchEngine === "Marlin" && (
-              <View className="flex flex-col bg-neutral-900 px-4 pb-4">
-                <View className="flex flex-row items-center space-x-2">
-                  <View className="grow">
-                    <Input
-                      placeholder="Marlin Server URL..."
-                      defaultValue={settings.marlinServerUrl}
-                      value={marlinUrl}
-                      keyboardType="url"
-                      returnKeyType="done"
-                      autoCapitalize="none"
-                      textContentType="URL"
-                      onChangeText={(text) => setMarlinUrl(text)}
-                    />
-                  </View>
-                  <Button
-                    color="purple"
-                    className="shrink w-16 h-12"
-                    onPress={() => {
-                      updateSettings({
-                        marlinServerUrl: marlinUrl.endsWith("/")
-                          ? marlinUrl
-                          : marlinUrl + "/",
-                      });
-                    }}
-                  >
-                    Save
-                  </Button>
-                </View>
-
-                {settings.marlinServerUrl && (
-                  <Text className="text-neutral-500 mt-2">
-                    Current: {settings.marlinServerUrl}
-                  </Text>
-                )}
-              </View>
-            )}
-          </View>
-
-          <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
-            <View className="shrink">
-              <Text className="font-semibold">Show Custom Menu Links</Text>
-              <Text className="text-xs opacity-50">
-                Show custom menu links defined inside your Jellyfin web
-                config.json file
-              </Text>
-              <TouchableOpacity
-                onPress={() =>
-                  Linking.openURL(
-                    "https://jellyfin.org/docs/general/clients/web-config/#custom-menu-links"
-                  )
-                }
-              >
-                <Text className="text-xs text-purple-600">More info</Text>
-              </TouchableOpacity>
-            </View>
-            <Switch
-              value={settings.showCustomMenuLinks}
-              onValueChange={(value) =>
-                updateSettings({ showCustomMenuLinks: value })
-              }
-            />
-          </View>
-        </View>
-      </View>
-
-      <View className="mt-4">
-        <Text className="text-lg font-bold mb-2">Downloads</Text>
-        <View className="flex flex-col rounded-xl overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
-          <View
-            className={`
-                flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-              `}
-          >
-            <View className="flex flex-col shrink">
-              <Text className="font-semibold">Download method</Text>
-              <Text className="text-xs opacity-50">
-                Choose the download method to use. Optimized requires the
-                optimized server.
-              </Text>
-            </View>
-            <DropdownMenu.Root>
-              <DropdownMenu.Trigger>
-                <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                  <Text>
-                    {settings.downloadMethod === "remux"
-                      ? "Default"
-                      : "Optimized"}
-                  </Text>
-                </TouchableOpacity>
-              </DropdownMenu.Trigger>
-              <DropdownMenu.Content
-                loop={true}
-                side="bottom"
-                align="start"
-                alignOffset={0}
-                avoidCollisions={true}
-                collisionPadding={8}
-                sideOffset={8}
-              >
-                <DropdownMenu.Label>Methods</DropdownMenu.Label>
-                <DropdownMenu.Item
-                  key="1"
-                  onSelect={() => {
-                    updateSettings({ downloadMethod: "remux" });
-                    setProcesses([]);
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>Default</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-                <DropdownMenu.Item
-                  key="2"
-                  onSelect={() => {
-                    updateSettings({ downloadMethod: "optimized" });
-                    setProcesses([]);
-                    queryClient.invalidateQueries({ queryKey: ["search"] });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>Optimized</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              </DropdownMenu.Content>
-            </DropdownMenu.Root>
-          </View>
-          <View
-            pointerEvents={
-              settings.downloadMethod === "remux" ? "auto" : "none"
-            }
-            className={`
-              flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4
-              ${
-                settings.downloadMethod === "remux"
-                  ? "opacity-100"
-                  : "opacity-50"
-              }`}
-          >
-            <View className="flex flex-col shrink">
-              <Text className="font-semibold">Remux max download</Text>
-              <Text className="text-xs opacity-50 shrink">
-                This is the total media you want to be able to download at the
-                same time.
-              </Text>
-            </View>
-            <Stepper
-              value={settings.remuxConcurrentLimit}
-              step={1}
-              min={1}
-              max={4}
-              onUpdate={(value) =>
-                updateSettings({
-                  remuxConcurrentLimit:
-                    value as Settings["remuxConcurrentLimit"],
-                })
-              }
-            />
-          </View>
-          <View
-            pointerEvents={
-              settings.downloadMethod === "optimized" ? "auto" : "none"
-            }
-            className={`
-              flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4
-              ${
-                settings.downloadMethod === "optimized"
-                  ? "opacity-100"
-                  : "opacity-50"
-              }`}
-          >
-            <View className="flex flex-col shrink">
-              <Text className="font-semibold">Auto download</Text>
-              <Text className="text-xs opacity-50 shrink">
-                This will automatically download the media file when it's
-                finished optimizing on the server.
-              </Text>
-            </View>
-            <Switch
-              value={settings.autoDownload}
-              onValueChange={(value) => updateSettings({ autoDownload: value })}
-            />
-          </View>
-          <View
-            pointerEvents={
-              settings.downloadMethod === "optimized" ? "auto" : "none"
-            }
-            className={`
-              ${
-                settings.downloadMethod === "optimized"
-                  ? "opacity-100"
-                  : "opacity-50"
-              }`}
-          >
-            <View className="flex flex-col bg-neutral-900 px-4 py-4">
-              <View className="flex flex-col shrink mb-2">
-                <View className="flex flex-row justify-between items-center">
-                  <Text className="font-semibold">
-                    Optimized versions server
-                  </Text>
-                </View>
-                <Text className="text-xs opacity-50">
-                  Set the URL for the optimized versions server for downloads.
-                </Text>
-              </View>
-              <View></View>
-              <View className="flex flex-col">
-                <Input
-                  placeholder="Optimized versions server URL..."
-                  value={optimizedVersionsServerUrl}
-                  keyboardType="url"
-                  returnKeyType="done"
-                  autoCapitalize="none"
-                  textContentType="URL"
-                  onChangeText={(text) => setOptimizedVersionsServerUrl(text)}
-                />
-                <Button
-                  color="purple"
-                  className="h-12 mt-2"
-                  onPress={async () => {
-                    updateSettings({
-                      optimizedVersionsServerUrl:
-                        optimizedVersionsServerUrl.length === 0
-                          ? null
-                          : optimizedVersionsServerUrl.endsWith("/")
-                          ? optimizedVersionsServerUrl
-                          : optimizedVersionsServerUrl + "/",
-                    });
-                    const res = await getStatistics({
-                      url: settings?.optimizedVersionsServerUrl,
-                      authHeader: api?.accessToken,
-                      deviceId: await getOrSetDeviceId(),
-                    });
-                    if (res) {
-                      toast.success("Connected");
-                    } else toast.error("Could not connect");
-                  }}
-                >
-                  Save
-                </Button>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-
-      <JellyseerrSettings />
-    </View>
-  );
-};

components/settings/StorageSettings.tsx

@@ -0,0 +1,109 @@
+import { Button } from "@/components/Button";
+import { Text } from "@/components/common/Text";
+import { useDownload } from "@/providers/DownloadProvider";
+import { clearLogs } from "@/utils/log";
+import { useQuery } from "@tanstack/react-query";
+import * as FileSystem from "expo-file-system";
+import * as Haptics from "expo-haptics";
+import { View } from "react-native";
+import * as Progress from "react-native-progress";
+import { toast } from "sonner-native";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
+
+export const StorageSettings = () => {
+  const { deleteAllFiles, appSizeUsage } = useDownload();
+
+  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 onDeleteClicked = async () => {
+    try {
+      await deleteAllFiles();
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    } catch (e) {
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+      toast.error("Error deleting files");
+    }
+  };
+
+  const calculatePercentage = (value: number, total: number) => {
+    return ((value / total) * 100).toFixed(2);
+  };
+
+  return (
+    <View>
+      <View className="flex flex-col gap-y-1">
+        <View className="flex flex-row items-center justify-between">
+          <Text className="">Storage</Text>
+          {size && (
+            <Text className="text-neutral-500">
+              {Number(size.total - size.remaining).bytesToReadable()} of{" "}
+              {size.total?.bytesToReadable()} used
+            </Text>
+          )}
+        </View>
+        <View className="h-3 w-full bg-gray-100/10 rounded-md overflow-hidden flex flex-row">
+          {size && (
+            <>
+              <View
+                style={{
+                  width: `${(size.app / size.total) * 100}%`,
+                  backgroundColor: "rgb(147 51 234)",
+                }}
+              />
+              <View
+                style={{
+                  width: `${
+                    ((size.total - size.remaining - size.app) / size.total) *
+                    100
+                  }%`,
+                  backgroundColor: "rgb(192 132 252)",
+                }}
+              />
+            </>
+          )}
+        </View>
+        <View className="flex flex-row gap-x-2">
+          {size && (
+            <>
+              <View className="flex flex-row items-center">
+                <View className="w-3 h-3 rounded-full bg-purple-600 mr-1"></View>
+                <Text className="text-white text-xs">
+                  App {calculatePercentage(size.app, size.total)}%
+                </Text>
+              </View>
+              <View className="flex flex-row items-center">
+                <View className="w-3 h-3 rounded-full bg-purple-400 mr-1"></View>
+                <Text className="text-white text-xs">
+                  Phone{" "}
+                  {calculatePercentage(
+                    size.total - size.remaining - size.app,
+                    size.total
+                  )}
+                  %
+                </Text>
+              </View>
+            </>
+          )}
+        </View>
+      </View>
+      <ListGroup>
+        <ListItem
+          textColor="red"
+          onPress={onDeleteClicked}
+          title="Delete All Downloaded Files"
+        />
+      </ListGroup>
+    </View>
+  );
+};

components/settings/SubtitleToggles.tsx

@@ -3,6 +3,9 @@ import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "../common/Text";
 import { useMedia } from "./MediaContext";
 import { Switch } from "react-native-gesture-handler";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
+import { Ionicons } from "@expo/vector-icons";
 import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
 
 interface Props extends ViewProps {}
@@ -11,6 +14,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
   const media = useMedia();
   const { settings, updateSettings } = media;
   const cultures = media.cultures;
+
   if (!settings) return null;
 
   const subtitleModes = [
@@ -22,26 +26,27 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
   ];
 
   return (
-    <View>
+    <View {...props}>
-      <Text className="text-lg font-bold mb-2">Subtitle</Text>
+      <ListGroup
-      <View className="flex flex-col rounded-xl mb-4 overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
+        title={"Subtitles"}
-        <View
+        description={
-          className={`
+          <Text className="text-[#8E8D91] text-xs">
-              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+            Configure subtitle preferences.
-            `}
+          </Text>
-        >
+        }
-          <View className="flex flex-col shrink">
+      >
-            <Text className="font-semibold">Subtitle language</Text>
+        <ListItem title="Subtitle language">
-            <Text className="text-xs opacity-50">
-              Choose a default subtitle language.
-            </Text>
-          </View>
           <DropdownMenu.Root>
             <DropdownMenu.Trigger>
-              <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+              <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
-                <Text>
+                <Text className="mr-1 text-[#8E8D91]">
                   {settings?.defaultSubtitleLanguage?.DisplayName || "None"}
                 </Text>
+                <Ionicons
+                  name="chevron-expand-sharp"
+                  size={18}
+                  color="#5A5960"
+                />
               </TouchableOpacity>
             </DropdownMenu.Trigger>
             <DropdownMenu.Content
@@ -80,25 +85,20 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
               ))}
             </DropdownMenu.Content>
           </DropdownMenu.Root>
-        </View>
+        </ListItem>
 
-        <View
+        <ListItem title="Subtitle Mode">
-          className={`
-              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-            `}
-        >
-          <View className="flex flex-col shrink">
-            <Text className="font-semibold">Subtitle Mode</Text>
-            <Text className="text-xs opacity-50 mr-2">
-              Subtitles are loaded based on the default and forced flags in the
-              embedded metadata. Language preferences are considered when
-              multiple options are available.
-            </Text>
-          </View>
           <DropdownMenu.Root>
             <DropdownMenu.Trigger>
-              <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+              <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
-                <Text>{settings?.subtitleMode || "Loading"}</Text>
+                <Text className="mr-1 text-[#8E8D91]">
+                  {settings?.subtitleMode || "Loading"}
+                </Text>
+                <Ionicons
+                  name="chevron-expand-sharp"
+                  size={18}
+                  color="#5A5960"
+                />
               </TouchableOpacity>
             </DropdownMenu.Trigger>
             <DropdownMenu.Content
@@ -125,40 +125,18 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
               ))}
             </DropdownMenu.Content>
           </DropdownMenu.Root>
-        </View>
+        </ListItem>
 
-        <View className="flex flex-col">
+        <ListItem title="Set Subtitle Track From Previous Item">
-          <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
+          <Switch
-            <View className="flex flex-col">
+            value={settings.rememberSubtitleSelections}
-              <Text className="font-semibold">
+            onValueChange={(value) =>
-                Set Subtitle Track From Previous Item
+              updateSettings({ rememberSubtitleSelections: value })
-              </Text>
+            }
-              <Text className="text-xs opacity-50 min max-w-[85%]">
+          />
-                Try to set the subtitle track to the closest match to the last
+        </ListItem>
-                video.
-              </Text>
-            </View>
-            <Switch
-              value={settings.rememberSubtitleSelections}
-              onValueChange={(value) =>
-                updateSettings({ rememberSubtitleSelections: value })
-              }
-            />
-          </View>
-        </View>
 
-        <View
+        <ListItem title="Subtitle Size">
-          className={`
-              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-            `}
-        >
-          <View className="flex flex-col shrink">
-            <Text className="font-semibold">Subtitle Size</Text>
-            <Text className="text-xs opacity-50">
-              Choose a default subtitle size for direct play (only works for
-              some subtitle formats).
-            </Text>
-          </View>
           <View className="flex flex-row items-center">
             <TouchableOpacity
               onPress={() =>
@@ -170,7 +148,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
             >
               <Text>-</Text>
             </TouchableOpacity>
-            <Text className="w-12 h-8 bg-neutral-800 first-letter:px-3 py-2 flex items-center justify-center">
+            <Text className="w-12 h-8 bg-neutral-800 px-3 py-2 flex items-center justify-center">
               {settings.subtitleSize}
             </Text>
             <TouchableOpacity
@@ -184,8 +162,8 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
               <Text>+</Text>
             </TouchableOpacity>
           </View>
-        </View>
+        </ListItem>
-      </View>
+      </ListGroup>
     </View>
   );
 };

components/settings/UserInfo.tsx

@@ -0,0 +1,29 @@
+import { View, ViewProps } from "react-native";
+import { Text } from "../common/Text";
+import { ListItem } from "../list/ListItem";
+import { Button } from "../Button";
+import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
+import { useAtom } from "jotai";
+import Constants from "expo-constants";
+import Application from "expo-application";
+import { ListGroup } from "../list/ListGroup";
+
+interface Props extends ViewProps {}
+
+export const UserInfo: React.FC<Props> = ({ ...props }) => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const version = Application?.nativeApplicationVersion || "N/A";
+
+  return (
+    <View {...props}>
+      <ListGroup title={"User Info"}>
+        <ListItem title="User" value={user?.Name} />
+        <ListItem title="Server" value={api?.basePath} />
+        <ListItem title="Token" value={api?.accessToken} />
+        <ListItem title="App version" value={version} />
+      </ListGroup>
+    </View>
+  );
+};