chore

app/(auth)/(tabs)/(libraries)/[libraryId].tsx

@@ -11,7 +11,7 @@ import { FilterButton } from "@/components/filters/FilterButton";
 import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
 import { Loader } from "@/components/Loader";
-import MoviePoster from "@/components/posters/MoviePoster";
+import { ItemPoster } from "@/components/posters/ItemPoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
   genreFilterAtom,
@@ -36,7 +36,6 @@ import {
 } from "@jellyfin/sdk/lib/utils/api";
 import { FlashList } from "@shopify/flash-list";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { ItemPoster } from "@/components/posters/ItemPoster";
 
 const MemoizedTouchableItemRouter = React.memo(TouchableItemRouter);
 

components/home/ScrollingCollectionList.tsx

@@ -1,18 +1,18 @@
 import { Text } from "@/components/common/Text";
 import MoviePoster from "@/components/posters/MoviePoster";
+import { useSettings } from "@/utils/atoms/settings";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  useQuery,
+  type QueryFunction,
+  type QueryKey,
+} from "@tanstack/react-query";
 import { View, ViewProps } from "react-native";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
-import {
-  type QueryKey,
-  useQuery,
-  type QueryFunction,
-} from "@tanstack/react-query";
 import SeriesPoster from "../posters/SeriesPoster";
-import { EpisodePoster } from "../posters/EpisodePoster";
 
 interface Props extends ViewProps {
   title?: string | null;
@@ -32,6 +32,7 @@ export const ScrollingCollectionList: React.FC<Props> = ({
   queryKey,
   ...props
 }) => {
+  const [settings] = useSettings();
   const { data, isLoading } = useQuery({
     queryKey,
     queryFn,

components/settings/MediaToggles.tsx

@@ -0,0 +1,150 @@
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import {
+  DefaultLanguageOption,
+  DownloadOptions,
+  useSettings,
+} from "@/utils/atoms/settings";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import {
+  Linking,
+  Switch,
+  TouchableOpacity,
+  View,
+  ViewProps,
+} from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { Text } from "../common/Text";
+import { Loader } from "../Loader";
+import { Input } from "../common/Input";
+import { useState } from "react";
+import { Button } from "../Button";
+
+const LANGUAGES: DefaultLanguageOption[] = [
+  { label: "eng", value: "eng" },
+  {
+    label: "sv",
+    value: "sv",
+  },
+];
+
+interface Props extends ViewProps {}
+
+export const MediaToggles: React.FC<Props> = ({ ...props }) => {
+  const [settings, updateSettings] = useSettings();
+
+  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">Audio language</Text>
+            <Text className="text-xs opacity-50">
+              Choose a default audio language.
+            </Text>
+          </View>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+                <Text>{settings?.defaultAudioLanguage?.label || "None"}</Text>
+              </TouchableOpacity>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content
+              loop={true}
+              side="bottom"
+              align="start"
+              alignOffset={0}
+              avoidCollisions={true}
+              collisionPadding={8}
+              sideOffset={8}
+            >
+              <DropdownMenu.Label>Languages</DropdownMenu.Label>
+              <DropdownMenu.Item
+                key={"none-audio"}
+                onSelect={() => {
+                  updateSettings({
+                    defaultAudioLanguage: null,
+                  });
+                }}
+              >
+                <DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
+              </DropdownMenu.Item>
+              {LANGUAGES.map((l) => (
+                <DropdownMenu.Item
+                  key={l.value}
+                  onSelect={() => {
+                    updateSettings({
+                      defaultAudioLanguage: l,
+                    });
+                  }}
+                >
+                  <DropdownMenu.ItemTitle>{l.label}</DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </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">Subtitle language</Text>
+            <Text className="text-xs opacity-50">
+              Choose a default subtitle language.
+            </Text>
+          </View>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+                <Text>
+                  {settings?.defaultSubtitleLanguage?.label || "None"}
+                </Text>
+              </TouchableOpacity>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content
+              loop={true}
+              side="bottom"
+              align="start"
+              alignOffset={0}
+              avoidCollisions={true}
+              collisionPadding={8}
+              sideOffset={8}
+            >
+              <DropdownMenu.Label>Languages</DropdownMenu.Label>
+              <DropdownMenu.Item
+                key={"none-subs"}
+                onSelect={() => {
+                  updateSettings({
+                    defaultSubtitleLanguage: null,
+                  });
+                }}
+              >
+                <DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
+              </DropdownMenu.Item>
+              {LANGUAGES.map((l) => (
+                <DropdownMenu.Item
+                  key={l.value}
+                  onSelect={() => {
+                    updateSettings({
+                      defaultSubtitleLanguage: l,
+                    });
+                  }}
+                >
+                  <DropdownMenu.ItemTitle>{l.label}</DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </View>
+      </View>
+    </View>
+  );
+};

components/settings/SettingToggles.tsx

@@ -14,14 +14,7 @@ import { Loader } from "../Loader";
 import { Input } from "../common/Input";
 import { useState } from "react";
 import { Button } from "../Button";
-
-const LANGUAGES: DefaultLanguageOption[] = [
-  { label: "eng", value: "eng" },
-  {
-    label: "sv",
-    value: "sv",
-  },
-];
+import { MediaToggles } from "./MediaToggles";
 
 export const SettingToggles: React.FC = () => {
   const [settings, updateSettings] = useSettings();
@@ -57,117 +50,22 @@ export const SettingToggles: React.FC = () => {
 
   return (
     <View>
-      <View>
-        <Text className="text-lg font-bold mb-2">Downloads</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 for downloads.
+      {/* <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>
-            <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?.defaultAudioLanguage?.label || "None"}</Text>
-                </TouchableOpacity>
-              </DropdownMenu.Trigger>
-              <DropdownMenu.Content
-                loop={true}
-                side="bottom"
-                align="start"
-                alignOffset={0}
-                avoidCollisions={true}
-                collisionPadding={8}
-                sideOffset={8}
-              >
-                <DropdownMenu.Label>Languages</DropdownMenu.Label>
-                <DropdownMenu.Item
-                  key={"none-audio"}
-                  onSelect={() => {
-                    updateSettings({
-                      defaultAudioLanguage: null,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-                {LANGUAGES.map((l) => (
-                  <DropdownMenu.Item
-                    key={l.value}
-                    onSelect={() => {
-                      updateSettings({
-                        defaultAudioLanguage: l,
-                      });
-                    }}
-                  >
-                    <DropdownMenu.ItemTitle>{l.label}</DropdownMenu.ItemTitle>
-                  </DropdownMenu.Item>
-                ))}
-              </DropdownMenu.Content>
-            </DropdownMenu.Root>
-          </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">Subtitle language</Text>
-              <Text className="text-xs opacity-50">
-                Choose a default subtitle language for downloads.
-              </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?.defaultSubtitleLanguage?.label || "None"}
-                  </Text>
-                </TouchableOpacity>
-              </DropdownMenu.Trigger>
-              <DropdownMenu.Content
-                loop={true}
-                side="bottom"
-                align="start"
-                alignOffset={0}
-                avoidCollisions={true}
-                collisionPadding={8}
-                sideOffset={8}
-              >
-                <DropdownMenu.Label>Languages</DropdownMenu.Label>
-                <DropdownMenu.Item
-                  key={"none-subs"}
-                  onSelect={() => {
-                    updateSettings({
-                      defaultSubtitleLanguage: null,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-                {LANGUAGES.map((l) => (
-                  <DropdownMenu.Item
-                    key={l.value}
-                    onSelect={() => {
-                      updateSettings({
-                        defaultSubtitleLanguage: l,
-                      });
-                    }}
-                  >
-                    <DropdownMenu.ItemTitle>{l.label}</DropdownMenu.ItemTitle>
-                  </DropdownMenu.Item>
-                ))}
-              </DropdownMenu.Content>
-            </DropdownMenu.Root>
+            <Switch disabled />
           </View>
         </View>
-      </View>
+      </View> */}
+
+      <MediaToggles />
 
       <View>
         <Text className="text-lg font-bold mb-2">Other</Text>

utils/atoms/settings.ts

@@ -52,6 +52,7 @@ type Settings = {
   libraryOptions: LibraryOptions;
   defaultSubtitleLanguage: DefaultLanguageOption | null;
   defaultAudioLanguage: DefaultLanguageOption | null;
+  showHomeTitles: boolean;
 };
 
 /**
@@ -84,6 +85,7 @@ const loadSettings = async (): Promise<Settings> => {
     },
     defaultAudioLanguage: null,
     defaultSubtitleLanguage: null,
+    showHomeTitles: true,
   };
 
   try {