feat: refactor settings

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>
-      <Text className="text-lg font-bold mb-2">Audio</Text>
-      <View className="flex flex-col rounded-xl mb-4 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">Audio language</Text>
-            <Text className="text-xs opacity-50">
-              Choose a default audio language.
-            </Text>
-          </View>
+    <View {...props}>
+      <ListGroup
+        title={"Audio"}
+        description={
+          <Text className="text-[#8E8D91] text-xs">
+            Choose a default audio language.
+          </Text>
+        }
+      >
+        <ListItem title={"Set Audio Track From Previous Item"}>
+          <Switch
+            value={settings.rememberAudioSelections}
+            onValueChange={(value) =>
+              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">
-                <Text>
+              <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3 ">
+                <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>
-        <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 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>
+        </ListItem>
+      </ListGroup>
     </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">
-      <Text className="text-lg font-bold mb-2">Jellyseerr</Text>
+    <View className="">
       <View>
         {jellyseerrUser ? (
-          <View className="flex flex-col rounded-xl overflow-hidden bg-neutral-900 pt-0 divide-y divide-neutral-800">
-            <ListItem
-              title="Total media requests"
-              subTitle={jellyseerrUser?.requestCount?.toString()}
-            />
-            <ListItem
-              title="Movie quota limit"
-              subTitle={
-                jellyseerrUser?.movieQuotaLimit?.toString() ?? "Unlimited"
-              }
-            />
-            <ListItem
-              title="Movie quota days"
-              subTitle={
-                jellyseerrUser?.movieQuotaDays?.toString() ?? "Unlimited"
-              }
-            />
-            <ListItem
-              title="TV quota limit"
-              subTitle={jellyseerrUser?.tvQuotaLimit?.toString() ?? "Unlimited"}
-            />
-            <ListItem
-              title="TV quota days"
-              subTitle={jellyseerrUser?.tvQuotaDays?.toString() ?? "Unlimited"}
-            />
+          <>
+            <ListGroup title={"Jellyseerr"}>
+              <ListItem
+                title="Total media requests"
+                value={jellyseerrUser?.requestCount?.toString()}
+              />
+              <ListItem
+                title="Movie quota limit"
+                value={
+                  jellyseerrUser?.movieQuotaLimit?.toString() ?? "Unlimited"
+                }
+              />
+              <ListItem
+                title="Movie quota days"
+                value={
+                  jellyseerrUser?.movieQuotaDays?.toString() ?? "Unlimited"
+                }
+              />
+              <ListItem
+                title="TV quota limit"
+                value={jellyseerrUser?.tvQuotaLimit?.toString() ?? "Unlimited"}
+              />
+              <ListItem
+                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 (
-    <View>
-      <Text className="text-lg font-bold mb-2">Media</Text>
-      <View className="flex flex-col rounded-xl mb-4 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">Forward skip length</Text>
-            <Text className="text-xs opacity-50">
-              Choose length in seconds when skipping in video playback.
-            </Text>
-          </View>
-          <View className="flex flex-row items-center">
-            <TouchableOpacity
-              onPress={() =>
-                updateSettings({
-                  forwardSkipTime: Math.max(0, settings.forwardSkipTime - 5),
-                })
-              }
-              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>
+  const renderSkipControl = (
+    value: number,
+    onDecrease: () => void,
+    onIncrease: () => void
+  ) => (
+    <View className="flex flex-row items-center">
+      <TouchableOpacity
+        onPress={onDecrease}
+        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">
+        {value}s
+      </Text>
+      <TouchableOpacity
+        className="w-8 h-8 bg-neutral-800 rounded-r-lg flex items-center justify-center"
+        onPress={onIncrease}
+      >
+        <Text>+</Text>
+      </TouchableOpacity>
+    </View>
+  );
 
-        <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">Rewind length</Text>
-            <Text className="text-xs opacity-50">
-              Choose length in seconds when skipping in video playback.
-            </Text>
-          </View>
-          <View className="flex flex-row items-center">
-            <TouchableOpacity
-              onPress={() =>
-                updateSettings({
-                  rewindSkipTime: Math.max(0, settings.rewindSkipTime - 5),
-                })
-              }
-              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.rewindSkipTime}s
-            </Text>
-            <TouchableOpacity
-              className="w-8 h-8 bg-neutral-800 rounded-r-lg flex items-center justify-center"
-              onPress={() =>
-                updateSettings({
-                  rewindSkipTime: Math.min(60, settings.rewindSkipTime + 5),
-                })
-              }
-            >
-              <Text>+</Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      </View>
+  return (
+    <View {...props}>
+      <ListGroup title="Media Controls">
+        <ListItem title="Forward Skip Length">
+          {renderSkipControl(
+            settings.forwardSkipTime,
+            () =>
+              updateSettings({
+                forwardSkipTime: Math.max(0, settings.forwardSkipTime - 5),
+              }),
+            () =>
+              updateSettings({
+                forwardSkipTime: Math.min(60, settings.forwardSkipTime + 5),
+              })
+          )}
+        </ListItem>
+
+        <ListItem title="Rewind Length">
+          {renderSkipControl(
+            settings.rewindSkipTime,
+            () =>
+              updateSettings({
+                rewindSkipTime: Math.max(0, settings.rewindSkipTime - 5),
+              }),
+            () =>
+              updateSettings({
+                rewindSkipTime: Math.min(60, settings.rewindSkipTime + 5),
+              })
+          )}
+        </ListItem>
+      </ListGroup>
     </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>
-      <Text className="text-lg font-bold mb-2">Subtitle</Text>
-      <View className="flex flex-col rounded-xl mb-4 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">Subtitle language</Text>
-            <Text className="text-xs opacity-50">
-              Choose a default subtitle language.
-            </Text>
-          </View>
+    <View {...props}>
+      <ListGroup
+        title={"Subtitles"}
+        description={
+          <Text className="text-[#8E8D91] text-xs">
+            Configure subtitle preferences.
+          </Text>
+        }
+      >
+        <ListItem title="Subtitle 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">
-                <Text>
+              <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
+                <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
-          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>
+        <ListItem title="Subtitle Mode">
           <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?.subtitleMode || "Loading"}</Text>
+              <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
+                <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">
-          <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
-            <View className="flex flex-col">
-              <Text className="font-semibold">
-                Set Subtitle Track From Previous Item
-              </Text>
-              <Text className="text-xs opacity-50 min max-w-[85%]">
-                Try to set the subtitle track to the closest match to the last
-                video.
-              </Text>
-            </View>
-            <Switch
-              value={settings.rememberSubtitleSelections}
-              onValueChange={(value) =>
-                updateSettings({ rememberSubtitleSelections: value })
-              }
-            />
-          </View>
-        </View>
+        <ListItem title="Set Subtitle Track From Previous Item">
+          <Switch
+            value={settings.rememberSubtitleSelections}
+            onValueChange={(value) =>
+              updateSettings({ rememberSubtitleSelections: value })
+            }
+          />
+        </ListItem>
 
-        <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">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>
+        <ListItem title="Subtitle Size">
           <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>
-      </View>
+        </ListItem>
+      </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>
+  );
+};