feat: settings

app/(auth)/settings.tsx

@@ -4,11 +4,11 @@ import { ListItem } from "@/components/ListItem";
 import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
 import { clearLogs, readFromLog } from "@/utils/log";
 import { useQuery } from "@tanstack/react-query";
-import * as FileSystem from "expo-file-system";
 import { useAtom } from "jotai";
 import { ScrollView, View } from "react-native";
 import * as Haptics from "expo-haptics";
 import { useFiles } from "@/hooks/useFiles";
+import { SettingToggles } from "@/components/settings/SettingToggles";
 
 export default function settings() {
   const { logout } = useJellyfin();
@@ -28,11 +28,13 @@ export default function settings() {
       <View className="p-4 flex flex-col gap-y-4 pb-12">
         <Text className="font-bold text-2xl">Information</Text>
 
-        <View className="rounded-xl mb-4 overflow-hidden border-neutral-800 divide-y-2 divide-neutral-900">
+        <View className="flex flex-col rounded-xl mb-4 overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
           <ListItem title="User" subTitle={user?.Name} />
           <ListItem title="Server" subTitle={api?.basePath} />
         </View>
 
+        <SettingToggles />
+
         <View className="flex flex-col space-y-2">
           <Button color="black" onPress={logout}>
             Log out

app/_layout.tsx

@@ -14,6 +14,7 @@ import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { useJobProcessor } from "@/utils/atoms/queue";
 import { JobQueueProvider } from "@/providers/JobQueueProvider";
 import { useKeepAwake } from "expo-keep-awake";
+import { useSettings } from "@/utils/atoms/settings";
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
@@ -23,12 +24,32 @@ export const unstable_settings = {
 };
 
 export default function RootLayout() {
-  useKeepAwake();
-
   const [loaded] = useFonts({
     SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
   });
 
+  useEffect(() => {
+    if (loaded) {
+      SplashScreen.hideAsync();
+    }
+  }, [loaded]);
+
+  if (!loaded) {
+    return null;
+  }
+
+  return (
+    <JotaiProvider>
+      <Layout />
+    </JotaiProvider>
+  );
+}
+
+function Layout() {
+  const [settings, updateSettings] = useSettings();
+
+  useKeepAwake();
+
   const queryClientRef = useRef<QueryClient>(
     new QueryClient({
       defaultOptions: {
@@ -44,108 +65,81 @@ export default function RootLayout() {
   );
 
   useEffect(() => {
-    if (loaded) {
-      SplashScreen.hideAsync();
-    }
-  }, [loaded]);
-
-  const [orientation, setOrientation] = useState(
-    ScreenOrientation.Orientation.PORTRAIT_UP,
-  );
-
-  useEffect(() => {
-    ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.DEFAULT);
-
-    ScreenOrientation.getOrientationAsync().then((info) => {
-      setOrientation(info);
-    });
-
-    // subscribe to future changes
-    const subscription = ScreenOrientation.addOrientationChangeListener(
-      (evt) => {
-        setOrientation(evt.orientationInfo.orientation);
-      },
-    );
-
-    // return a clean up function to unsubscribe from notifications
-    return () => {
-      ScreenOrientation.removeOrientationChangeListener(subscription);
-    };
-  }, []);
-
-  if (!loaded) {
-    return null;
-  }
+    if (settings?.autoRotate === true)
+      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.DEFAULT);
+    else
+      ScreenOrientation.lockAsync(
+        ScreenOrientation.OrientationLock.PORTRAIT_UP,
+      );
+  }, [settings]);
 
   return (
     <QueryClientProvider client={queryClientRef.current}>
-      <JotaiProvider>
-        <JobQueueProvider>
-          <ActionSheetProvider>
-            <JellyfinProvider>
-              <StatusBar style="light" backgroundColor="#000" />
-              <ThemeProvider value={DarkTheme}>
-                <Stack>
-                  <Stack.Screen
-                    name="(auth)/(tabs)"
-                    options={{
-                      headerShown: false,
-                      title: "Home",
-                    }}
-                  />
-                  <Stack.Screen
-                    name="(auth)/settings"
-                    options={{
-                      headerShown: true,
-                      title: "Settings",
-                      headerStyle: { backgroundColor: "black" },
-                      headerShadowVisible: false,
-                    }}
-                  />
-                  <Stack.Screen
-                    name="(auth)/downloads"
-                    options={{
-                      headerShown: true,
-                      title: "Downloads",
-                      headerStyle: { backgroundColor: "black" },
-                      headerShadowVisible: false,
-                    }}
-                  />
-                  <Stack.Screen
-                    name="(auth)/items/[id]/page"
-                    options={{
-                      title: "",
-                      headerShown: false,
-                    }}
-                  />
-                  <Stack.Screen
-                    name="(auth)/collections/[collection]/page"
-                    options={{
-                      title: "",
-                      headerShown: true,
-                      headerStyle: { backgroundColor: "black" },
-                      headerShadowVisible: false,
-                    }}
-                  />
-                  <Stack.Screen
-                    name="(auth)/series/[id]/page"
-                    options={{
-                      title: "",
-                      headerShown: false,
-                    }}
-                  />
-                  <Stack.Screen
-                    name="login"
-                    options={{ headerShown: false, title: "Login" }}
-                  />
-                  <Stack.Screen name="+not-found" />
-                </Stack>
-                <CurrentlyPlayingBar />
-              </ThemeProvider>
-            </JellyfinProvider>
-          </ActionSheetProvider>
-        </JobQueueProvider>
-      </JotaiProvider>
+      <JobQueueProvider>
+        <ActionSheetProvider>
+          <JellyfinProvider>
+            <StatusBar style="light" backgroundColor="#000" />
+            <ThemeProvider value={DarkTheme}>
+              <Stack>
+                <Stack.Screen
+                  name="(auth)/(tabs)"
+                  options={{
+                    headerShown: false,
+                    title: "Home",
+                  }}
+                />
+                <Stack.Screen
+                  name="(auth)/settings"
+                  options={{
+                    headerShown: true,
+                    title: "Settings",
+                    headerStyle: { backgroundColor: "black" },
+                    headerShadowVisible: false,
+                  }}
+                />
+                <Stack.Screen
+                  name="(auth)/downloads"
+                  options={{
+                    headerShown: true,
+                    title: "Downloads",
+                    headerStyle: { backgroundColor: "black" },
+                    headerShadowVisible: false,
+                  }}
+                />
+                <Stack.Screen
+                  name="(auth)/items/[id]/page"
+                  options={{
+                    title: "",
+                    headerShown: false,
+                  }}
+                />
+                <Stack.Screen
+                  name="(auth)/collections/[collection]/page"
+                  options={{
+                    title: "",
+                    headerShown: true,
+                    headerStyle: { backgroundColor: "black" },
+                    headerShadowVisible: false,
+                  }}
+                />
+                <Stack.Screen
+                  name="(auth)/series/[id]/page"
+                  options={{
+                    title: "",
+                    headerShown: false,
+                  }}
+                />
+                <Stack.Screen
+                  name="login"
+                  options={{ headerShown: false, title: "Login" }}
+                />
+                <Stack.Screen name="+not-found" />
+              </Stack>
+              <CurrentlyPlayingBar />
+            </ThemeProvider>
+          </JellyfinProvider>
+        </ActionSheetProvider>
+      </JobQueueProvider>
     </QueryClientProvider>
   );
 }

components/ListItem.tsx

@@ -1,22 +1,26 @@
 import { PropsWithChildren, ReactNode } from "react";
-import { View } from "react-native";
+import { View, ViewProps } from "react-native";
 import { Text } from "./common/Text";
 
-type Props = {
+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">
+    <View
+      className="flex flex-row items-center justify-between bg-neutral-900 p-4"
+      {...props}
+    >
       <View className="flex flex-col">
         <Text className="font-bold ">{title}</Text>
         {subTitle && <Text className="text-xs">{subTitle}</Text>}

components/settings/SettingToggles.tsx

@@ -0,0 +1,20 @@
+import { Switch, View } from "react-native";
+import { Text } from "../common/Text";
+import { useAtom } from "jotai";
+import { useSettings } from "@/utils/atoms/settings";
+
+export const SettingToggles: React.FC = () => {
+  const [settings, updateSettings] = useSettings();
+
+  return (
+    <View className="flex flex-col rounded-xl mb-4 overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
+      <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
+        <Text>Auto rotate</Text>
+        <Switch
+          value={settings?.autoRotate}
+          onValueChange={(value) => updateSettings({ autoRotate: value })}
+        />
+      </View>
+    </View>
+  );
+};

utils/atoms/settings.ts

@@ -0,0 +1,54 @@
+import { atom, useAtom } from "jotai";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useEffect } from "react";
+
+type Settings = {
+  autoRotate?: boolean;
+  forceLandscapeInVideoPlayer?: boolean;
+};
+
+/**
+ *
+ * The settings atom is a Jotai atom that stores the user's settings.
+ * It is initialized with a default value of null, which indicates that the settings have not been loaded yet.
+ * The settings are loaded from AsyncStorage when the atom is read for the first time.
+ *
+ */
+
+// Utility function to load settings from AsyncStorage
+const loadSettings = async (): Promise<Settings> => {
+  const jsonValue = await AsyncStorage.getItem("settings");
+  return jsonValue != null
+    ? JSON.parse(jsonValue)
+    : { theme: "light", notificationsEnabled: true, language: "en" };
+};
+
+// Utility function to save settings to AsyncStorage
+const saveSettings = async (settings: Settings) => {
+  const jsonValue = JSON.stringify(settings);
+  await AsyncStorage.setItem("settings", jsonValue);
+};
+
+// Create an atom to store the settings in memory
+const settingsAtom = atom<Settings | null>(null);
+
+// A hook to manage settings, loading them on initial mount and providing a way to update them
+export const useSettings = () => {
+  const [settings, setSettings] = useAtom(settingsAtom);
+
+  useEffect(() => {
+    if (settings === null) {
+      loadSettings().then(setSettings);
+    }
+  }, [settings, setSettings]);
+
+  const updateSettings = async (update: Partial<Settings>) => {
+    if (settings) {
+      const newSettings = { ...settings, ...update };
+      setSettings(newSettings);
+      await saveSettings(newSettings);
+    }
+  };
+
+  return [settings, updateSettings] as const;
+};