chore: versions

fixes #47

README.md

@@ -28,11 +28,17 @@ Downloading works by using ffmpeg to convert a HLS stream into a video file on t
 
 ## Get it now
 
-<a href="https://apps.apple.com/se/app/streamyfin/id6593660679?l=en-GB">
-  <img height=75 alt="Get Streamyfin on App Store" src="./assets/Download_on_the_App_Store_Badge.png"/>
-</a>
+<div style="display:flex;">
+  <a href="https://apps.apple.com/se/app/streamyfin/id6593660679?l=en-GB">
+    <img height=50 alt="Get Streamyfin on App Store" src="./assets/Download_on_the_App_Store_Badge.png"/>
+  </a>
 
-### TestFlight
+  <a href="https://play.google.com/store/apps/details?id=com.fredrikburmester.streamyfin">
+    <img height=75 alt="Get the beta on Google Play" src="./assets/en_badge_web_generic.png"/>
+  </a>
+</div>
+
+### Beta testing
 
 Get the latest updates by using the TestFlight version of the app.
 
@@ -40,11 +46,7 @@ Get the latest updates by using the TestFlight version of the app.
   <img height=75 alt="Get the beta on TestFlight" src="./assets/Get_the_beta_on_Testflight.svg"/>
 </a>
 
-### Play Store Open Beta
-
-<a href="https://play.google.com/store/apps/details?id=com.fredrikburmester.streamyfin">
-  <img height=75 alt="Get the beta on Google Play" src="./assets/en_badge_web_generic.png"/>
-</a>
+Or download the APKs here on GitHub for Android.
 
 ## 🚀 Getting Started
 
@@ -100,6 +102,8 @@ Key points of the MPL-2.0:
 
 ## 🌐 Connect with Us
 
+Join our Discord: [https://discord.gg/zyGKHJZvv4](https://discord.gg/zyGKHJZvv4)
+
 If you have questions or need support, feel free to reach out:
 
 - GitHub Issues: Report bugs or request features here.

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.4.2",
+    "version": "0.5.1",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -35,7 +35,7 @@
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 15,
+      "versionCode": 16,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon.png"
       },
@@ -53,7 +53,6 @@
     "plugins": [
       "expo-router",
       "expo-font",
-      "react-native-compressor",
       "@config-plugins/ffmpeg-kit-react-native",
       [
         "react-native-google-cast",

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

@@ -25,9 +25,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="index"
         options={{
-          headerShown: true,
-          headerStyle: { backgroundColor: "black" },
-          headerShadowVisible: false,
+          headerShown: false,
           title: "Home",
           tabBarIcon: ({ color, focused }) => (
             <TabBarIcon
@@ -35,39 +33,12 @@ export default function TabLayout() {
               color={color}
             />
           ),
-          headerLeft: () => (
-            <TouchableOpacity
-              style={{ marginHorizontal: 17 }}
-              onPress={() => {
-                router.push("/(auth)/downloads");
-              }}
-            >
-              <Feather name="download" color={"white"} size={22} />
-            </TouchableOpacity>
-          ),
-          headerRight: () => (
-            <View className="flex flex-row items-center space-x-2">
-              <Chromecast />
-              <TouchableOpacity
-                style={{ marginRight: 17 }}
-                onPress={() => {
-                  router.push("/(auth)/settings");
-                }}
-              >
-                <View className="h-10 aspect-square flex items-center justify-center rounded">
-                  <Feather name="settings" color={"white"} size={22} />
-                </View>
-              </TouchableOpacity>
-            </View>
-          ),
         }}
       />
       <Tabs.Screen
         name="search"
         options={{
-          headerStyle: { backgroundColor: "black" },
-          headerShown: true,
-          headerShadowVisible: false,
+          headerShown: false,
           title: "Search",
           tabBarIcon: ({ color, focused }) => (
             <TabBarIcon name={focused ? "search" : "search"} color={color} />

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

@@ -0,0 +1,48 @@
+import { Chromecast } from "@/components/Chromecast";
+import { Feather } from "@expo/vector-icons";
+import { Stack, useRouter } from "expo-router";
+import { Platform, View } from "react-native";
+import { TouchableOpacity } from "react-native";
+
+export default function IndexLayout() {
+  const router = useRouter();
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          headerShown: true,
+          headerLargeTitle: true,
+          headerTitle: "Home",
+          headerStyle: { backgroundColor: "black" },
+          headerLeft: () => (
+            <TouchableOpacity
+              style={{
+                marginRight: Platform.OS === "android" ? 17 : 0,
+              }}
+              onPress={() => {
+                router.push("/(auth)/downloads");
+              }}
+            >
+              <Feather name="download" color={"white"} size={22} />
+            </TouchableOpacity>
+          ),
+          headerRight: () => (
+            <View className="flex flex-row items-center space-x-2">
+              <Chromecast />
+              <TouchableOpacity
+                onPress={() => {
+                  router.push("/(auth)/settings");
+                }}
+              >
+                <View className="h-10 aspect-square flex items-center justify-center rounded">
+                  <Feather name="settings" color={"white"} size={22} />
+                </View>
+              </TouchableOpacity>
+            </View>
+          ),
+        }}
+      />
+    </Stack>
+  );
+}

app/(auth)/(tabs)/index/index.tsx

@@ -237,6 +237,7 @@ export default function index() {
   return (
     <ScrollView
       nestedScrollEnabled
+      contentInsetAdjustmentBehavior="automatic"
       refreshControl={
         <RefreshControl refreshing={loading} onRefresh={refetch} />
       }

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

@@ -0,0 +1,17 @@
+import { Stack } from "expo-router";
+
+export default function SearchLayout() {
+  return (
+    <Stack>
+      <Stack.Screen
+        name="search"
+        options={{
+          headerShown: true,
+          headerLargeTitle: true,
+          headerTitle: "Search",
+          headerStyle: { backgroundColor: "black" },
+        }}
+      />
+    </Stack>
+  );
+}

app/(auth)/(tabs)/search/search.tsx

@@ -11,10 +11,10 @@ import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getSearchApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
-import { router } from "expo-router";
+import { router, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
-import React, { useState } from "react";
-import { ScrollView, TouchableOpacity, View } from "react-native";
+import React, { useLayoutEffect, useState } from "react";
+import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 
 export default function search() {
   const [search, setSearch] = useState<string>("");
@@ -22,6 +22,18 @@ export default function search() {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
+  const navigation = useNavigation();
+  useLayoutEffect(() => {
+    if (Platform.OS === "ios")
+      navigation.setOptions({
+        headerSearchBarOptions: {
+          placeholder: "Search...",
+          onChangeText: (e: any) => setSearch(e.nativeEvent.text),
+          hideWhenScrolling: false,
+        },
+      });
+  }, [navigation]);
+
   const { data: movies } = useQuery({
     queryKey: ["search-movies", search],
     queryFn: async () => {
@@ -67,19 +79,23 @@ export default function search() {
   });
 
   return (
-    <ScrollView keyboardDismissMode="on-drag">
+    <ScrollView
+      keyboardDismissMode="on-drag"
+      contentInsetAdjustmentBehavior="automatic"
+    >
       <View className="flex flex-col pt-2 pb-20">
-        <View className="mb-4 px-4">
-          <Input
-            autoCorrect={false}
-            returnKeyType="done"
-            keyboardType="web-search"
-            placeholder="Search here..."
-            value={search}
-            onChangeText={(text) => setSearch(text)}
-          />
-        </View>
-
+        {Platform.OS === "android" && (
+          <View className="mb-4 px-4">
+            <Input
+              autoCorrect={false}
+              returnKeyType="done"
+              keyboardType="web-search"
+              placeholder="Search here..."
+              value={search}
+              onChangeText={(text) => setSearch(text)}
+            />
+          </View>
+        )}
         <Text className="font-bold text-2xl px-4 mb-2">Movies</Text>
         <SearchItemWrapper
           ids={movies?.map((m) => m.Id!)}

app/(auth)/items/[id]/page.tsx

@@ -26,7 +26,10 @@ import CastContext, {
 } from "react-native-google-cast";
 import { chromecastProfile } from "@/utils/profiles/chromecast";
 import ios12 from "@/utils/profiles/ios12";
-import { currentlyPlayingItemAtom } from "@/components/CurrentlyPlayingBar";
+import {
+  currentlyPlayingItemAtom,
+  triggerPlayAtom,
+} from "@/components/CurrentlyPlayingBar";
 import { AudioTrackSelector } from "@/components/AudioTrackSelector";
 import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
 import { NextEpisodeButton } from "@/components/series/NextEpisodeButton";
@@ -130,6 +133,7 @@ const page: React.FC = () => {
 
   const [, setCp] = useAtom(currentlyPlayingItemAtom);
   const client = useRemoteMediaClient();
+  const [, setPlayTrigger] = useAtom(triggerPlayAtom);
 
   const onPressPlay = useCallback(
     async (type: "device" | "cast" = "device") => {
@@ -159,6 +163,9 @@ const page: React.FC = () => {
           item,
           playbackUrl,
         });
+
+        // Use this trigger to initiate playback in another component (CurrentlyPlayingBar)
+        setPlayTrigger((prev) => prev + 1);
       }
     },
     [playbackUrl, item],

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/CurrentlyPlayingBar.tsx

@@ -6,7 +6,15 @@ import {
 } from "react-native";
 import { Text } from "./common/Text";
 import { Ionicons } from "@expo/vector-icons";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  Ref,
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import Video, { OnProgressData, VideoRef } from "react-native-video";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { atom, useAtom } from "jotai";
@@ -26,12 +34,16 @@ import { BlurView } from "expo-blur";
 import { writeToLog } from "@/utils/log";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
+import { useSettings } from "@/utils/atoms/settings";
+import * as ScreenOrientation from "expo-screen-orientation";
 
 export const currentlyPlayingItemAtom = atom<{
   item: BaseItemDto;
   playbackUrl: string;
 } | null>(null);
 
+export const triggerPlayAtom = atom(0);
+
 export const CurrentlyPlayingBar: React.FC = () => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
@@ -39,10 +51,12 @@ export const CurrentlyPlayingBar: React.FC = () => {
 
   const queryClient = useQueryClient();
   const segments = useSegments();
+  const [settings] = useSettings();
 
   const videoRef = useRef<VideoRef | null>(null);
   const [paused, setPaused] = useState(true);
   const [progress, setProgress] = useState(0);
+  const [fullScreen, setFullScreen] = useState(false);
 
   const aBottom = useSharedValue(0);
   const aPadding = useSharedValue(0);
@@ -90,6 +104,14 @@ export const CurrentlyPlayingBar: React.FC = () => {
     }
   }, [segments]);
 
+  // TODO: Fix this
+  // useEffect(() => {
+  //   if (settings?.forceLandscapeInVideoPlayer === true && fullScreen)
+  //     ScreenOrientation.lockAsync(
+  //       ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
+  //     );
+  // }, [settings, fullScreen]);
+
   const { data: item } = useQuery({
     queryKey: ["item", cp?.item.Id],
     queryFn: async () =>
@@ -179,12 +201,29 @@ export const CurrentlyPlayingBar: React.FC = () => {
     [item],
   );
 
+  /**
+   * These two useEffects are used to start playing the
+   * video when the playbackUrl is available.
+   *
+   * The trigger playback is triggered from the button component.
+   */
   useEffect(() => {
     if (cp?.playbackUrl) {
       play();
+      if (settings?.openFullScreenVideoPlayerByDefault) {
+        videoRef.current?.presentFullscreenPlayer();
+      }
     }
   }, [cp?.playbackUrl]);
 
+  const [triggerPlay] = useAtom(triggerPlayAtom);
+  useEffect(() => {
+    play();
+    if (settings?.openFullScreenVideoPlayerByDefault) {
+      videoRef.current?.presentFullscreenPlayer();
+    }
+  }, [triggerPlay]);
+
   if (!cp || !api) return null;
 
   return (
@@ -247,6 +286,12 @@ export const CurrentlyPlayingBar: React.FC = () => {
                   onBuffer={(e) =>
                     e.isBuffering ? console.log("Buffering...") : null
                   }
+                  onFullscreenPlayerDidDismiss={() => {
+                    setFullScreen(false);
+                  }}
+                  onFullscreenPlayerDidPresent={() => {
+                    setFullScreen(true);
+                  }}
                   onPlaybackStateChanged={(e) => {
                     if (e.isPlaying) {
                       setPaused(false);

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,29 @@
+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 className="flex flex-row items-center justify-between bg-neutral-900 p-4">
+        <Text>Start videos in fullscreen</Text>
+        <Switch
+          value={settings?.openFullScreenVideoPlayerByDefault}
+          onValueChange={(value) =>
+            updateSettings({ openFullScreenVideoPlayerByDefault: value })
+          }
+        />
+      </View>
+    </View>
+  );
+};

eas.json

@@ -21,13 +21,13 @@
       }
     },
     "production": {
-      "channel": "0.4.2",
+      "channel": "0.5.1",
       "android": {
         "image": "latest"
       }
     },
     "production-apk": {
-      "channel": "0.4.2",
+      "channel": "0.5.1",
       "android": {
         "buildType": "apk",
         "image": "latest"

package.json

@@ -27,7 +27,7 @@
     "@tanstack/react-query": "^5.51.16",
     "@types/uuid": "^10.0.0",
     "axios": "^1.7.3",
-    "expo": "~51.0.26",
+    "expo": "~51.0.27",
     "expo-blur": "~13.0.2",
     "expo-build-properties": "~0.12.5",
     "expo-constants": "~16.0.2",

utils/atoms/settings.ts

@@ -0,0 +1,55 @@
+import { atom, useAtom } from "jotai";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useEffect } from "react";
+
+type Settings = {
+  autoRotate?: boolean;
+  forceLandscapeInVideoPlayer?: boolean;
+  openFullScreenVideoPlayerByDefault?: 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;
+};