chore: remove everything related to music

Merge pull request #394 from Ryan0204/enhancement/autohidecontrol
enhancement: auto hide control after 5 seconds
2025-01-12 13:40:01 +01:00 · 2025-01-12 10:16:55 +01:00 · 2025-01-12 10:10:18 +01:00 · 2025-01-12 10:07:49 +01:00 · 2025-01-12 09:37:33 +01:00 · 2025-01-12 09:36:23 +01:00
57 changed files with 1004 additions and 1926 deletions
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ Welcome to Streamyfin, a simple and user-friendly Jellyfin client built with Exp
  <img width=150 src="./assets/images/screenshots/screenshot1.png" />
  <img width=150 src="./assets/images/screenshots/screenshot3.png" />
  <img width=150 src="./assets/images/screenshots/screenshot2.png" />
-  <img width=150 src="./assets/images/jellyseerr.PNG"/>
+  <img width=159 src="./assets/images/jellyseerr.PNG"/>
 </div>

 ## 🌟 Features
@@ -70,7 +70,7 @@ Or download the APKs [here on GitHub](https://github.com/streamyfin/streamyfin/r

 ### Beta testing

-To access the Streamyfin beta, you need to subscribe to the Member tier (or higher) on [Patreon](https://www.patreon.com/streamyfin). This will give you immediate access to the ⁠🧪-public-beta channel on Discord and i'll know that you have subscribed. This is where i'll post APKs and IPAs. This won't give automatic access to the TestFlight however, so you need to send me a DM with the email you use for Apple so that i can manually add you.
+To access the Streamyfin beta, you need to subscribe to the Member tier (or higher) on [Patreon](https://www.patreon.com/streamyfin). This will give you immediate access to the ⁠🧪-public-beta channel on Discord and i'll know that you have subscribed. This is where I post APKs and IPAs. This won't give automatic access to the TestFlight, however, so you need to send me a DM with the email you use for Apple so that i can manually add you.

 **Note**: Everyone who is actively contributing to the source code of Streamyfin will have automatic access to the betas.

@@ -90,7 +90,7 @@ We welcome any help to make Streamyfin better. If you'd like to contribute, plea
 1. Use node `>20`
 2. Install dependencies `bun i && bun run submodule-reload`
 3. Make sure you have xcode and/or android studio installed.
-4. Create an expo dev build by running `npx expo run:ios` or `npx expo run:android`. This will open a simulator on you computer and run the app.
+4. Create an expo dev build by running `npx expo run:ios` or `npx expo run:android`. This will open a simulator on your computer and run the app.

 ## 📄 License

--- a/app/(auth)/(tabs)/(home)/downloads/index.tsx
+++ b/app/(auth)/(tabs)/(home)/downloads/index.tsx
@@ -4,7 +4,7 @@ import { MovieCard } from "@/components/downloads/MovieCard";
 import { SeriesCard } from "@/components/downloads/SeriesCard";
 import { DownloadedItem, useDownload } from "@/providers/DownloadProvider";
 import { queueAtom } from "@/utils/atoms/queue";
-import { useSettings } from "@/utils/atoms/settings";
+import {DownloadMethod, useSettings} from "@/utils/atoms/settings";
 import { Ionicons } from "@expo/vector-icons";
 import { useNavigation, useRouter } from "expo-router";
 import { useAtom } from "jotai";
@@ -96,7 +96,7 @@ export default function page() {
      >
        <View className="py-4">
          <View className="mb-4 flex flex-col space-y-4 px-4">
-            {settings?.downloadMethod === "remux" && (
+            {settings?.downloadMethod === DownloadMethod.Remux && (
              <View className="bg-neutral-900 p-4 rounded-2xl">
                <Text className="text-lg font-bold">Queue</Text>
                <Text className="text-xs opacity-70 text-red-600">
--- a/app/(auth)/(tabs)/(home)/intro/page.tsx
+++ b/app/(auth)/(tabs)/(home)/intro/page.tsx
@@ -5,7 +5,7 @@ import { Feather, Ionicons } from "@expo/vector-icons";
 import { Image } from "expo-image";
 import { useFocusEffect, useRouter } from "expo-router";
 import { useCallback } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { Linking, TouchableOpacity, View } from "react-native";

 export default function page() {
  const router = useRouter();
@@ -17,7 +17,7 @@ export default function page() {
  );

  return (
-    <View className="bg-neutral-900 h-full py-32 px-4 space-y-4">
+    <View className="bg-neutral-900 h-full py-16 px-4 space-y-8">
      <View>
        <Text className="text-3xl font-bold text-center mb-2">
          Welcome to Streamyfin
@@ -85,25 +85,55 @@ export default function page() {
            </Text>
          </View>
        </View>
+        <View className="flex flex-row items-center mt-4">
+          <View
+            style={{
+              width: 50,
+              height: 50,
+            }}
+            className="flex items-center justify-center"
+          >
+            <Feather name="settings" size={28} color={"white"} />
+          </View>
+          <View className="shrink ml-2">
+            <Text className="font-bold mb-1">Centralised Settings Plugin</Text>
+            <Text className="shrink text-xs">
+              Configure settings from a centralised location on your Jellyfin
+              server. All client settings for all users will be synced
+              automatically.{" "}
+              <Text
+                className="text-purple-600"
+                onPress={() => {
+                  Linking.openURL(
+                    "https://github.com/streamyfin/jellyfin-plugin-streamyfin"
+                  );
+                }}
+              >
+                Read more
+              </Text>
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View>
+        <Button
+          onPress={() => {
+            router.back();
+          }}
+          className="mt-4"
+        >
+          Done
+        </Button>
+        <TouchableOpacity
+          onPress={() => {
+            router.back();
+            router.push("/settings");
+          }}
+          className="mt-4"
+        >
+          <Text className="text-purple-600 text-center">Go to settings</Text>
+        </TouchableOpacity>
      </View>
-
-      <Button
-        onPress={() => {
-          router.back();
-        }}
-        className="mt-4"
-      >
-        Done
-      </Button>
-      <TouchableOpacity
-        onPress={() => {
-          router.back();
-          router.push("/settings");
-        }}
-        className="mt-4"
-      >
-        <Text className="text-purple-600 text-center">Go to settings</Text>
-      </TouchableOpacity>
    </View>
  );
 }
--- a/app/(auth)/(tabs)/(home)/settings.tsx
+++ b/app/(auth)/(tabs)/(home)/settings.tsx
@@ -15,7 +15,7 @@ import { useJellyfin } from "@/providers/JellyfinProvider";
 import { clearLogs } from "@/utils/log";
 import { useHaptic } from "@/hooks/useHaptic";
 import { useNavigation, useRouter } from "expo-router";
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { storage } from "@/utils/mmkv";
--- a/app/(auth)/(tabs)/(home)/settings/hide-libraries/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/hide-libraries/page.tsx
@@ -8,9 +8,10 @@ import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { Switch, View } from "react-native";
+import DisabledSetting from "@/components/settings/DisabledSetting";

 export default function page() {
-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();
  const user = useAtomValue(userAtom);
  const api = useAtomValue(apiAtom);

@@ -35,7 +36,10 @@ export default function page() {
    );

  return (
-    <View className="px-4">
+    <DisabledSetting
+      disabled={pluginSettings?.hiddenLibraries?.locked === true}
+      className="px-4"
+    >
      <ListGroup>
        {data?.map((view) => (
          <ListItem key={view.Id} title={view.Name} onPress={() => {}}>
@@ -56,6 +60,6 @@ export default function page() {
        Select the libraries you want to hide from the Library tab and home page
        sections.
      </Text>
-    </View>
+    </DisabledSetting>
  );
 }
--- a/app/(auth)/(tabs)/(home)/settings/jellyseerr/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/jellyseerr/page.tsx
@@ -1,78 +1,16 @@
-import { Text } from "@/components/common/Text";
 import { JellyseerrSettings } from "@/components/settings/Jellyseerr";
-import { OptimizedServerForm } from "@/components/settings/OptimizedServerForm";
-import { apiAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
-import { getOrSetDeviceId } from "@/utils/device";
-import { getStatistics } from "@/utils/optimize-server";
-import { useMutation } from "@tanstack/react-query";
-import { useNavigation } from "expo-router";
-import { useAtom } from "jotai";
-import { useEffect, useState } from "react";
-import { ActivityIndicator, TouchableOpacity, View } from "react-native";
-import { toast } from "sonner-native";
+import DisabledSetting from "@/components/settings/DisabledSetting";

 export default function page() {
-  const navigation = useNavigation();
-
-  const [api] = useAtom(apiAtom);
-  const [settings, updateSettings] = useSettings();
-
-  const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
-    useState<string>(settings?.optimizedVersionsServerUrl || "");
-
-  const saveMutation = useMutation({
-    mutationFn: async (newVal: string) => {
-      if (newVal.length === 0 || !newVal.startsWith("http")) {
-        toast.error("Invalid URL");
-        return;
-      }
-
-      const updatedUrl = newVal.endsWith("/") ? newVal : newVal + "/";
-
-      updateSettings({
-        optimizedVersionsServerUrl: updatedUrl,
-      });
-
-      return await getStatistics({
-        url: settings?.optimizedVersionsServerUrl,
-        authHeader: api?.accessToken,
-        deviceId: getOrSetDeviceId(),
-      });
-    },
-    onSuccess: (data) => {
-      if (data) {
-        toast.success("Connected");
-      } else {
-        toast.error("Could not connect");
-      }
-    },
-    onError: () => {
-      toast.error("Could not connect");
-    },
-  });
-
-  const onSave = (newVal: string) => {
-    saveMutation.mutate(newVal);
-  };
-
-  // useEffect(() => {
-  //   navigation.setOptions({
-  //     title: "Optimized Server",
-  //     headerRight: () =>
-  //       saveMutation.isPending ? (
-  //         <ActivityIndicator size={"small"} color={"white"} />
-  //       ) : (
-  //         <TouchableOpacity onPress={() => onSave(optimizedVersionsServerUrl)}>
-  //           <Text className="text-blue-500">Save</Text>
-  //         </TouchableOpacity>
-  //       ),
-  //   });
-  // }, [navigation, optimizedVersionsServerUrl, saveMutation.isPending]);
+  const [settings, updateSettings, pluginSettings] = useSettings();

  return (
-    <View className="p-4">
+    <DisabledSetting
+      disabled={pluginSettings?.jellyseerrServerUrl?.locked === true}
+      className="p-4"
+    >
      <JellyseerrSettings />
-    </View>
+    </DisabledSetting>
  );
 }
--- a/app/(auth)/(tabs)/(home)/settings/marlin-search/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/marlin-search/page.tsx
@@ -1,12 +1,10 @@
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
-import { apiAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { useQueryClient } from "@tanstack/react-query";
 import { useNavigation } from "expo-router";
-import { useAtom } from "jotai";
-import { useEffect, useState } from "react";
+import React, {useEffect, useMemo, useState} from "react";
 import {
  Linking,
  Switch,
@@ -15,11 +13,12 @@ import {
  View,
 } from "react-native";
 import { toast } from "sonner-native";
+import DisabledSetting from "@/components/settings/DisabledSetting";

 export default function page() {
  const navigation = useNavigation();

-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();
  const queryClient = useQueryClient();

  const [value, setValue] = useState<string>(settings?.marlinServerUrl || "");
@@ -35,69 +34,81 @@ export default function page() {
    Linking.openURL("https://github.com/fredrikburmester/marlin-search");
  };

+  const disabled = useMemo(() => {
+    return pluginSettings?.searchEngine?.locked === true && pluginSettings?.marlinServerUrl?.locked === true
+  }, [pluginSettings]);
+
  useEffect(() => {
-    navigation.setOptions({
-      headerRight: () => (
-        <TouchableOpacity onPress={() => onSave(value)}>
-          <Text className="text-blue-500">Save</Text>
-        </TouchableOpacity>
-      ),
-    });
+    if (!pluginSettings?.marlinServerUrl?.locked) {
+      navigation.setOptions({
+        headerRight: () => (
+          <TouchableOpacity onPress={() => onSave(value)}>
+            <Text className="text-blue-500">Save</Text>
+          </TouchableOpacity>
+        ),
+      });
+    }
  }, [navigation, value]);

  if (!settings) return null;

  return (
-    <View className="px-4">
+    <DisabledSetting
+      disabled={disabled}
+      className="px-4"
+    >
      <ListGroup>
-        <ListItem
-          title={"Enable Marlin Search"}
-          onPress={() => {
-            updateSettings({ searchEngine: "Jellyfin" });
-            queryClient.invalidateQueries({ queryKey: ["search"] });
-          }}
+        <DisabledSetting
+          disabled={pluginSettings?.searchEngine?.locked === true}
+          showText={!pluginSettings?.marlinServerUrl?.locked}
        >
-          <Switch
-            value={settings.searchEngine === "Marlin"}
-            onValueChange={(value) => {
-              updateSettings({ searchEngine: value ? "Marlin" : "Jellyfin" });
+          <ListItem
+            title={"Enable Marlin Search"}
+            onPress={() => {
+              updateSettings({ searchEngine: "Jellyfin" });
              queryClient.invalidateQueries({ queryKey: ["search"] });
            }}
-          />
-        </ListItem>
+          >
+            <Switch
+              value={settings.searchEngine === "Marlin"}
+              onValueChange={(value) => {
+                updateSettings({ searchEngine: value ? "Marlin" : "Jellyfin" });
+                queryClient.invalidateQueries({ queryKey: ["search"] });
+              }}
+            />
+          </ListItem>
+        </DisabledSetting>
      </ListGroup>

-      <View
-        className={`mt-2 ${
-          settings.searchEngine === "Marlin" ? "" : "opacity-50"
-        }`}
+      <DisabledSetting
+        disabled={pluginSettings?.marlinServerUrl?.locked === true}
+        showText={!pluginSettings?.searchEngine?.locked}
+        className="mt-2 flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900 px-4"
      >
-        <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
-              editable={settings.searchEngine === "Marlin"}
-              className="text-white"
-              placeholder="http(s)://domain.org:port"
-              value={value}
-              keyboardType="url"
-              returnKeyType="done"
-              autoCapitalize="none"
-              textContentType="URL"
-              onChangeText={(text) => setValue(text)}
-            />
-          </View>
+        <View
+          className={`flex flex-row items-center bg-neutral-900 h-11 pr-4`}
+        >
+          <Text className="mr-4">URL</Text>
+          <TextInput
+            editable={settings.searchEngine === "Marlin"}
+            className="text-white"
+            placeholder="http(s)://domain.org:port"
+            value={value}
+            keyboardType="url"
+            returnKeyType="done"
+            autoCapitalize="none"
+            textContentType="URL"
+            onChangeText={(text) => setValue(text)}
+          />
        </View>
-        <Text className="px-4 text-xs text-neutral-500 mt-1">
-          Enter the URL for the Marlin server. The URL should include http or
-          https and optionally the port.{" "}
-          <Text className="text-blue-500" onPress={handleOpenLink}>
-            Read more about Marlin.
-          </Text>
+      </DisabledSetting>
+      <Text className="px-4 text-xs text-neutral-500 mt-1">
+        Enter the URL for the Marlin server. The URL should include http or
+        https and optionally the port.{" "}
+        <Text className="text-blue-500" onPress={handleOpenLink}>
+          Read more about Marlin.
        </Text>
-      </View>
-    </View>
+      </Text>
+    </DisabledSetting>
  );
 }
--- a/app/(auth)/(tabs)/(home)/settings/optimized-server/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/optimized-server/page.tsx
@@ -10,12 +10,13 @@ import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { ActivityIndicator, TouchableOpacity, View } from "react-native";
 import { toast } from "sonner-native";
+import DisabledSetting from "@/components/settings/DisabledSetting";

 export default function page() {
  const navigation = useNavigation();

  const [api] = useAtom(apiAtom);
-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();

  const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
    useState<string>(settings?.optimizedVersionsServerUrl || "");
@@ -56,25 +57,30 @@ export default function page() {
  };

  useEffect(() => {
-    navigation.setOptions({
-      title: "Optimized Server",
-      headerRight: () =>
-        saveMutation.isPending ? (
-          <ActivityIndicator size={"small"} color={"white"} />
-        ) : (
-          <TouchableOpacity onPress={() => onSave(optimizedVersionsServerUrl)}>
-            <Text className="text-blue-500">Save</Text>
-          </TouchableOpacity>
-        ),
-    });
+    if (!pluginSettings?.optimizedVersionsServerUrl?.locked) {
+      navigation.setOptions({
+        title: "Optimized Server",
+        headerRight: () =>
+          saveMutation.isPending ? (
+            <ActivityIndicator size={"small"} color={"white"} />
+          ) : (
+            <TouchableOpacity onPress={() => onSave(optimizedVersionsServerUrl)}>
+              <Text className="text-blue-500">Save</Text>
+            </TouchableOpacity>
+          ),
+      });
+    }
  }, [navigation, optimizedVersionsServerUrl, saveMutation.isPending]);

  return (
-    <View className="p-4">
+    <DisabledSetting
+      disabled={pluginSettings?.optimizedVersionsServerUrl?.locked === true}
+      className="p-4"
+    >
      <OptimizedServerForm
        value={optimizedVersionsServerUrl}
        onChangeValue={setOptimizedVersionsServerUrl}
      />
-    </View>
+    </DisabledSetting>
  );
 }
--- a/app/(auth)/(tabs)/(home)/settings/popular-lists/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/popular-lists/page.tsx
@@ -9,6 +9,8 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { Linking, Switch, View } from "react-native";
+import {useMemo} from "react";
+import DisabledSetting from "@/components/settings/DisabledSetting";

 export default function page() {
  const navigation = useNavigation();
@@ -16,7 +18,7 @@ export default function page() {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);

-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();

  const handleOpenLink = () => {
    Linking.openURL(
@@ -48,13 +50,22 @@ export default function page() {
    staleTime: 0,
  });

+  const disabled = useMemo(() => (
+    pluginSettings?.usePopularPlugin?.locked === true &&
+    pluginSettings?.mediaListCollectionIds?.locked === true
+  ), [pluginSettings]);
+
  if (!settings) return null;

  return (
-    <View className="px-4 pt-4">
+    <DisabledSetting
+      disabled={disabled}
+      className="px-4 pt-4"
+    >
      <ListGroup title={"Enable plugin"} className="">
        <ListItem
          title={"Enable Popular Lists"}
+          disabled={pluginSettings?.usePopularPlugin?.locked}
          onPress={() => {
            updateSettings({ usePopularPlugin: true });
            queryClient.invalidateQueries({ queryKey: ["search"] });
@@ -62,9 +73,10 @@ export default function page() {
        >
          <Switch
            value={settings.usePopularPlugin}
-            onValueChange={(value) => {
-              updateSettings({ usePopularPlugin: value });
-            }}
+            disabled={pluginSettings?.usePopularPlugin?.locked}
+            onValueChange={(usePopularPlugin) =>
+              updateSettings({ usePopularPlugin })
+          }
          />
        </ListItem>
      </ListGroup>
@@ -88,11 +100,14 @@ export default function page() {
                <>
                  <ListGroup title="Media List Collections" className="mt-4">
                    {mediaListCollections?.map((mlc) => (
-                      <ListItem key={mlc.Id} title={mlc.Name}>
+                      <ListItem
+                        key={mlc.Id}
+                        title={mlc.Name}
+                        disabled={pluginSettings?.mediaListCollectionIds?.locked}
+                      >
                        <Switch
-                          value={settings.mediaListCollectionIds?.includes(
-                            mlc.Id!
-                          )}
+                          disabled={pluginSettings?.mediaListCollectionIds?.locked}
+                          value={settings.mediaListCollectionIds?.includes(mlc.Id!)}
                          onValueChange={(value) => {
                            if (!settings.mediaListCollectionIds) {
                              updateSettings({
@@ -130,6 +145,6 @@ export default function page() {
          )}
        </>
      )}
-    </View>
+    </DisabledSetting>
  );
 }
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/albums/[albumId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/albums/[albumId].tsx
@@ -1,128 +0,0 @@
-import { Chromecast } from "@/components/Chromecast";
-import { ItemImage } from "@/components/common/ItemImage";
-import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
-import { SongsList } from "@/components/music/SongsList";
-import { ParallaxScrollView } from "@/components/ParallaxPage";
-import ArtistPoster from "@/components/posters/ArtistPoster";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import { router, useLocalSearchParams, useNavigation } from "expo-router";
-import { useAtom } from "jotai";
-import { useEffect, useState } from "react";
-import { ScrollView, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-export default function page() {
-  const searchParams = useLocalSearchParams();
-  const { collectionId, artistId, albumId } = searchParams as {
-    collectionId: string;
-    artistId: string;
-    albumId: string;
-  };
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const navigation = useNavigation();
-
-  useEffect(() => {
-    navigation.setOptions({
-      headerRight: () => (
-        <View className="">
-          <Chromecast />
-        </View>
-      ),
-    });
-  });
-
-  const { data: album } = useQuery({
-    queryKey: ["album", albumId, artistId],
-    queryFn: async () => {
-      if (!api) return null;
-      const response = await getItemsApi(api).getItems({
-        userId: user?.Id,
-        ids: [albumId],
-      });
-      const data = response.data.Items?.[0];
-      return data;
-    },
-    enabled: !!api && !!user?.Id && !!albumId,
-    staleTime: 0,
-  });
-
-  const {
-    data: songs,
-    isLoading,
-    isError,
-  } = useQuery<{
-    Items: BaseItemDto[];
-    TotalRecordCount: number;
-  }>({
-    queryKey: ["songs", artistId, albumId],
-    queryFn: async () => {
-      if (!api)
-        return {
-          Items: [],
-          TotalRecordCount: 0,
-        };
-
-      const response = await getItemsApi(api).getItems({
-        userId: user?.Id,
-        parentId: albumId,
-        fields: [
-          "ItemCounts",
-          "PrimaryImageAspectRatio",
-          "CanDelete",
-          "MediaSourceCount",
-        ],
-        sortBy: ["ParentIndexNumber", "IndexNumber", "SortName"],
-      });
-
-      const data = response.data.Items;
-
-      return {
-        Items: data || [],
-        TotalRecordCount: response.data.TotalRecordCount || 0,
-      };
-    },
-    enabled: !!api && !!user?.Id,
-  });
-
-  const insets = useSafeAreaInsets();
-
-  if (!album) return null;
-
-  return (
-    <ParallaxScrollView
-      headerHeight={400}
-      headerImage={
-        <ItemImage
-          variant={"Primary"}
-          item={album}
-          style={{
-            width: "100%",
-            height: "100%",
-          }}
-        />
-      }
-    >
-      <View className="px-4 mb-8">
-        <Text className="font-bold text-2xl mb-2">{album?.Name}</Text>
-        <Text className="text-neutral-500">
-          {songs?.TotalRecordCount} songs
-        </Text>
-      </View>
-      <View className="px-4">
-        <SongsList
-          albumId={albumId}
-          songs={songs?.Items}
-          collectionId={collectionId}
-          artistId={artistId}
-        />
-      </View>
-    </ParallaxScrollView>
-  );
-}
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/artists/[artistId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/artists/[artistId].tsx
@@ -1,130 +0,0 @@
-import ArtistPoster from "@/components/posters/ArtistPoster";
-import { Text } from "@/components/common/Text";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import { router, useLocalSearchParams, useNavigation } from "expo-router";
-import { useAtom } from "jotai";
-import { useEffect, useState } from "react";
-import { FlatList, ScrollView, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { ItemImage } from "@/components/common/ItemImage";
-import { ParallaxScrollView } from "@/components/ParallaxPage";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
-
-export default function page() {
-  const searchParams = useLocalSearchParams();
-  const { artistId } = searchParams as {
-    artistId: string;
-  };
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const navigation = useNavigation();
-
-  const [startIndex, setStartIndex] = useState<number>(0);
-
-  const { data: artist } = useQuery({
-    queryKey: ["album", artistId],
-    queryFn: async () => {
-      if (!api) return null;
-      const response = await getItemsApi(api).getItems({
-        userId: user?.Id,
-        ids: [artistId],
-      });
-      const data = response.data.Items?.[0];
-      return data;
-    },
-    enabled: !!api && !!user?.Id && !!artistId,
-    staleTime: 0,
-  });
-
-  const {
-    data: albums,
-    isLoading,
-    isError,
-  } = useQuery<{
-    Items: BaseItemDto[];
-    TotalRecordCount: number;
-  }>({
-    queryKey: ["albums", artistId, startIndex],
-    queryFn: async () => {
-      if (!api)
-        return {
-          Items: [],
-          TotalRecordCount: 0,
-        };
-
-      const response = await getItemsApi(api).getItems({
-        userId: user?.Id,
-        parentId: artistId,
-        sortOrder: ["Descending", "Descending", "Ascending"],
-        includeItemTypes: ["MusicAlbum"],
-        recursive: true,
-        fields: [
-          "ParentId",
-          "PrimaryImageAspectRatio",
-          "ParentId",
-          "PrimaryImageAspectRatio",
-        ],
-        collapseBoxSetItems: false,
-        albumArtistIds: [artistId],
-        startIndex,
-        limit: 100,
-        sortBy: ["PremiereDate", "ProductionYear", "SortName"],
-      });
-
-      const data = response.data.Items;
-
-      return {
-        Items: data || [],
-        TotalRecordCount: response.data.TotalRecordCount || 0,
-      };
-    },
-    enabled: !!api && !!user?.Id,
-  });
-
-  const insets = useSafeAreaInsets();
-
-  if (!artist || !albums) return null;
-
-  return (
-    <ParallaxScrollView
-      headerHeight={400}
-      headerImage={
-        <ItemImage
-          variant={"Primary"}
-          item={artist}
-          style={{
-            width: "100%",
-            height: "100%",
-          }}
-        />
-      }
-    >
-      <View className="px-4 mb-8">
-        <Text className="font-bold text-2xl mb-2">{artist?.Name}</Text>
-        <Text className="text-neutral-500">
-          {albums.TotalRecordCount} albums
-        </Text>
-      </View>
-      <View className="flex flex-row flex-wrap justify-between px-4">
-        {albums.Items.map((item, idx) => (
-          <TouchableItemRouter
-            item={item}
-            style={{ width: "30%", marginBottom: 20 }}
-            key={idx}
-          >
-            <View className="flex flex-col gap-y-2">
-              <ArtistPoster item={item} />
-              <Text numberOfLines={2}>{item.Name}</Text>
-              <Text className="opacity-50 text-xs">{item.ProductionYear}</Text>
-            </View>
-          </TouchableItemRouter>
-        ))}
-      </View>
-    </ParallaxScrollView>
-  );
-}
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/artists/index.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/artists/index.tsx
@@ -1,117 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
-import ArtistPoster from "@/components/posters/ArtistPoster";
-import MoviePoster from "@/components/posters/MoviePoster";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { getArtistsApi, getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import { router, useLocalSearchParams } from "expo-router";
-import { useAtom } from "jotai";
-import { useMemo, useState } from "react";
-import { FlatList, TouchableOpacity, View } from "react-native";
-
-export default function page() {
-  const searchParams = useLocalSearchParams();
-  const { collectionId } = searchParams as { collectionId: string };
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const { data: collection } = useQuery({
-    queryKey: ["collection", collectionId],
-    queryFn: async () => {
-      if (!api) return null;
-      const response = await getItemsApi(api).getItems({
-        userId: user?.Id,
-        ids: [collectionId],
-      });
-      const data = response.data.Items?.[0];
-      return data;
-    },
-    enabled: !!api && !!user?.Id && !!collectionId,
-    staleTime: 0,
-  });
-
-  const [startIndex, setStartIndex] = useState<number>(0);
-
-  const { data, isLoading, isError } = useQuery<{
-    Items: BaseItemDto[];
-    TotalRecordCount: number;
-  }>({
-    queryKey: ["collection-items", collection?.Id, startIndex],
-    queryFn: async () => {
-      if (!api || !collectionId)
-        return {
-          Items: [],
-          TotalRecordCount: 0,
-        };
-
-      const response = await getArtistsApi(api).getArtists({
-        sortBy: ["SortName"],
-        sortOrder: ["Ascending"],
-        fields: ["PrimaryImageAspectRatio", "SortName"],
-        imageTypeLimit: 1,
-        enableImageTypes: ["Primary", "Backdrop", "Banner", "Thumb"],
-        parentId: collectionId,
-        userId: user?.Id,
-      });
-
-      const data = response.data.Items;
-
-      return {
-        Items: data || [],
-        TotalRecordCount: response.data.TotalRecordCount || 0,
-      };
-    },
-    enabled: !!collection?.Id && !!api && !!user?.Id,
-  });
-
-  const totalItems = useMemo(() => {
-    return data?.TotalRecordCount;
-  }, [data]);
-
-  if (!data) return null;
-
-  return (
-    <FlatList
-      contentContainerStyle={{
-        padding: 16,
-        paddingBottom: 140,
-      }}
-      ListHeaderComponent={
-        <View className="mb-4">
-          <Text className="font-bold text-3xl mb-2">Artists</Text>
-        </View>
-      }
-      nestedScrollEnabled
-      data={data.Items}
-      numColumns={3}
-      columnWrapperStyle={{
-        justifyContent: "space-between",
-      }}
-      renderItem={({ item, index }) => (
-        <TouchableItemRouter
-          style={{
-            maxWidth: "30%",
-            width: "100%",
-          }}
-          key={index}
-          item={item}
-        >
-          <View className="flex flex-col gap-y-2">
-            {collection?.CollectionType === "movies" && (
-              <MoviePoster item={item} />
-            )}
-            {collection?.CollectionType === "music" && (
-              <ArtistPoster item={item} />
-            )}
-            <Text>{item.Name}</Text>
-            <Text className="opacity-50 text-xs">{item.ProductionYear}</Text>
-          </View>
-        </TouchableItemRouter>
-      )}
-      keyExtractor={(item) => item.Id || ""}
-    />
-  );
-}
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx
@@ -109,7 +109,7 @@ const page: React.FC = () => {
        genres: selectedGenres,
        tags: selectedTags,
        years: selectedYears.map((year) => parseInt(year)),
-        includeItemTypes: ["Movie", "Series", "MusicAlbum"],
+        includeItemTypes: ["Movie", "Series"],
      });

      return response.data || null;
--- a/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
+++ b/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
@@ -150,8 +150,6 @@ const Page = () => {
        itemType = "Series";
      } else if (library.CollectionType === "boxsets") {
        itemType = "BoxSet";
-      } else if (library.CollectionType === "music") {
-        itemType = "MusicAlbum";
      }

      const response = await getItemsApi(api).getItems({
--- a/app/(auth)/(tabs)/(libraries)/_layout.tsx
+++ b/app/(auth)/(tabs)/(libraries)/_layout.tsx
@@ -6,7 +6,7 @@ import { Platform } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";

 export default function IndexLayout() {
-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();

  if (!settings?.libraryOptions) return null;

@@ -25,6 +25,7 @@ export default function IndexLayout() {
          headerTransparent: Platform.OS === "ios" ? true : false,
          headerShadowVisible: false,
          headerRight: () => (
+            !pluginSettings?.libraryOptions?.locked &&
            <DropdownMenu.Root>
              <DropdownMenu.Trigger>
                <Ionicons
--- a/app/(auth)/(tabs)/(libraries)/index.tsx
+++ b/app/(auth)/(tabs)/(libraries)/index.tsx
@@ -33,7 +33,11 @@ export default function index() {
  });

  const libraries = useMemo(
-    () => data?.filter((l) => !settings?.hiddenLibraries?.includes(l.Id!)),
+    () =>
+      data
+        ?.filter((l) => !settings?.hiddenLibraries?.includes(l.Id!))
+        .filter((l) => l.CollectionType !== "music")
+        .filter((l) => l.CollectionType !== "books") || [],
    [data, settings?.hiddenLibraries]
  );

--- a/app/(auth)/(tabs)/(search)/index.tsx
+++ b/app/(auth)/(tabs)/(search)/index.tsx
@@ -5,7 +5,6 @@ import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
 import { Tag } from "@/components/GenreTags";
 import { ItemCardText } from "@/components/ItemCardText";
 import { JellyserrIndexPage } from "@/components/jellyseerr/JellyseerrIndexPage";
-import AlbumCover from "@/components/posters/AlbumCover";
 import MoviePoster from "@/components/posters/MoviePoster";
 import SeriesPoster from "@/components/posters/SeriesPoster";
 import { LoadingSkeleton } from "@/components/search/LoadingSkeleton";
@@ -184,52 +183,19 @@ export default function search() {
    enabled: searchType === "Library" && debouncedSearch.length > 0,
  });

-  const { data: artists, isFetching: l4 } = useQuery({
-    queryKey: ["search", "artists", debouncedSearch],
-    queryFn: () =>
-      searchFn({
-        query: debouncedSearch,
-        types: ["MusicArtist"],
-      }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
-  });
-
-  const { data: albums, isFetching: l5 } = useQuery({
-    queryKey: ["search", "albums", debouncedSearch],
-    queryFn: () =>
-      searchFn({
-        query: debouncedSearch,
-        types: ["MusicAlbum"],
-      }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
-  });
-
-  const { data: songs, isFetching: l6 } = useQuery({
-    queryKey: ["search", "songs", debouncedSearch],
-    queryFn: () =>
-      searchFn({
-        query: debouncedSearch,
-        types: ["Audio"],
-      }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
-  });
-
  const noResults = useMemo(() => {
    return !(
-      artists?.length ||
-      albums?.length ||
-      songs?.length ||
      movies?.length ||
      episodes?.length ||
      series?.length ||
      collections?.length ||
      actors?.length
    );
-  }, [artists, episodes, albums, songs, movies, series, collections, actors]);
+  }, [episodes, movies, series, collections, actors]);

  const loading = useMemo(() => {
-    return l1 || l2 || l3 || l4 || l5 || l6 || l7 || l8;
-  }, [l1, l2, l3, l4, l5, l6, l7, l8]);
+    return l1 || l2 || l3 || l7 || l8;
+  }, [l1, l2, l3, l7, l8]);

  return (
    <>
@@ -365,48 +331,6 @@ export default function search() {
                  </TouchableItemRouter>
                )}
              />
-              <SearchItemWrapper
-                ids={artists?.map((m) => m.Id!)}
-                header="Artists"
-                renderItem={(item: BaseItemDto) => (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className="flex flex-col w-28 mr-2"
-                  >
-                    <AlbumCover id={item.Id} />
-                    <ItemCardText item={item} />
-                  </TouchableItemRouter>
-                )}
-              />
-              <SearchItemWrapper
-                ids={albums?.map((m) => m.Id!)}
-                header="Albums"
-                renderItem={(item: BaseItemDto) => (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className="flex flex-col w-28 mr-2"
-                  >
-                    <AlbumCover id={item.Id} />
-                    <ItemCardText item={item} />
-                  </TouchableItemRouter>
-                )}
-              />
-              <SearchItemWrapper
-                ids={songs?.map((m) => m.Id!)}
-                header="Songs"
-                renderItem={(item: BaseItemDto) => (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className="flex flex-col w-28 mr-2"
-                  >
-                    <AlbumCover id={item.AlbumId} />
-                    <ItemCardText item={item} />
-                  </TouchableItemRouter>
-                )}
-              />
            </View>
          ) : (
            <JellyserrIndexPage searchQuery={debouncedSearch} />
--- a/app/(auth)/player/_layout.tsx
+++ b/app/(auth)/player/_layout.tsx
@@ -25,15 +25,6 @@ export default function Layout() {
            animation: "fade",
          }}
        />
-        <Stack.Screen
-          name="music-player"
-          options={{
-            headerShown: false,
-            autoHideHomeIndicator: true,
-            title: "",
-            animation: "fade",
-          }}
-        />
      </Stack>
    </>
  );
--- a/app/(auth)/player/music-player.tsx
+++ b/app/(auth)/player/music-player.tsx
@@ -1,419 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { Loader } from "@/components/Loader";
-import { Controls } from "@/components/video-player/controls/Controls";
-import { useOrientation } from "@/hooks/useOrientation";
-import { useOrientationSettings } from "@/hooks/useOrientationSettings";
-import { useWebSocket } from "@/hooks/useWebsockets";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { secondsToTicks } from "@/utils/secondsToTicks";
-import { Api } from "@jellyfin/sdk";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import {
-  getPlaystateApi,
-  getUserLibraryApi,
-} from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import { useHaptic } from "@/hooks/useHaptic";
-import { Image } from "expo-image";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import { useAtomValue } from "jotai";
-import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Pressable, useWindowDimensions, View } from "react-native";
-import { useSharedValue } from "react-native-reanimated";
-import Video, { OnProgressData, VideoRef } from "react-native-video";
-
-export default function page() {
-  const api = useAtomValue(apiAtom);
-  const user = useAtomValue(userAtom);
-  const [settings] = useSettings();
-  const videoRef = useRef<VideoRef | null>(null);
-  const windowDimensions = useWindowDimensions();
-
-  const firstTime = useRef(true);
-
-  const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
-  const [showControls, setShowControls] = useState(true);
-  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [isBuffering, setIsBuffering] = useState(true);
-
-  const progress = useSharedValue(0);
-  const isSeeking = useSharedValue(false);
-  const cacheProgress = useSharedValue(0);
-
-  const lightHapticFeedback = useHaptic("light");
-
-  const {
-    itemId,
-    audioIndex: audioIndexStr,
-    subtitleIndex: subtitleIndexStr,
-    mediaSourceId,
-    bitrateValue: bitrateValueStr,
-  } = useLocalSearchParams<{
-    itemId: string;
-    audioIndex: string;
-    subtitleIndex: string;
-    mediaSourceId: string;
-    bitrateValue: string;
-  }>();
-
-  const audioIndex = audioIndexStr ? parseInt(audioIndexStr, 10) : undefined;
-  const subtitleIndex = subtitleIndexStr
-    ? parseInt(subtitleIndexStr, 10)
-    : undefined;
-  const bitrateValue = bitrateValueStr
-    ? parseInt(bitrateValueStr, 10)
-    : undefined;
-
-  const {
-    data: item,
-    isLoading: isLoadingItem,
-    isError: isErrorItem,
-  } = useQuery({
-    queryKey: ["item", itemId],
-    queryFn: async () => {
-      if (!api) return;
-      const res = await getUserLibraryApi(api).getItem({
-        itemId,
-        userId: user?.Id,
-      });
-
-      return res.data;
-    },
-    enabled: !!itemId && !!api,
-    staleTime: 0,
-  });
-
-  const {
-    data: stream,
-    isLoading: isLoadingStreamUrl,
-    isError: isErrorStreamUrl,
-  } = useQuery({
-    queryKey: ["stream-url"],
-    queryFn: async () => {
-      if (!api) return;
-      const res = await getStreamUrl({
-        api,
-        item,
-        startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
-        userId: user?.Id,
-        audioStreamIndex: audioIndex,
-        maxStreamingBitrate: bitrateValue,
-        mediaSourceId: mediaSourceId,
-        subtitleStreamIndex: subtitleIndex,
-      });
-
-      if (!res) return null;
-
-      const { mediaSource, sessionId, url } = res;
-
-      if (!sessionId || !mediaSource || !url) return null;
-
-      return {
-        mediaSource,
-        sessionId,
-        url,
-      };
-    },
-  });
-
-  const poster = usePoster(item, api);
-  const videoSource = useVideoSource(item, api, poster, stream?.url);
-
-  const togglePlay = useCallback(
-    async (ticks: number) => {
-      lightHapticFeedback();
-      if (isPlaying) {
-        videoRef.current?.pause();
-        await getPlaystateApi(api!).onPlaybackProgress({
-          itemId: item?.Id!,
-          audioStreamIndex: audioIndex ? audioIndex : undefined,
-          subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-          mediaSourceId: mediaSourceId,
-          positionTicks: Math.floor(ticks),
-          isPaused: true,
-          playMethod: stream?.url.includes("m3u8")
-            ? "Transcode"
-            : "DirectStream",
-          playSessionId: stream?.sessionId,
-        });
-      } else {
-        videoRef.current?.resume();
-        await getPlaystateApi(api!).onPlaybackProgress({
-          itemId: item?.Id!,
-          audioStreamIndex: audioIndex ? audioIndex : undefined,
-          subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-          mediaSourceId: mediaSourceId,
-          positionTicks: Math.floor(ticks),
-          isPaused: false,
-          playMethod: stream?.url.includes("m3u8")
-            ? "Transcode"
-            : "DirectStream",
-          playSessionId: stream?.sessionId,
-        });
-      }
-    },
-    [
-      isPlaying,
-      api,
-      item,
-      videoRef,
-      settings,
-      audioIndex,
-      subtitleIndex,
-      mediaSourceId,
-      stream,
-    ]
-  );
-
-  const play = useCallback(() => {
-    videoRef.current?.resume();
-    reportPlaybackStart();
-  }, [videoRef]);
-
-  const pause = useCallback(() => {
-    videoRef.current?.pause();
-  }, [videoRef]);
-
-  const stop = useCallback(() => {
-    setIsPlaybackStopped(true);
-    videoRef.current?.pause();
-    reportPlaybackStopped();
-  }, [videoRef]);
-
-  const seek = useCallback(
-    (seconds: number) => {
-      videoRef.current?.seek(seconds);
-    },
-    [videoRef]
-  );
-
-  const reportPlaybackStopped = async () => {
-    if (!item?.Id) return;
-    await getPlaystateApi(api!).onPlaybackStopped({
-      itemId: item.Id,
-      mediaSourceId: mediaSourceId,
-      positionTicks: Math.floor(progress.value),
-      playSessionId: stream?.sessionId,
-    });
-  };
-
-  const reportPlaybackStart = async () => {
-    if (!item?.Id) return;
-    await getPlaystateApi(api!).onPlaybackStart({
-      itemId: item?.Id,
-      audioStreamIndex: audioIndex ? audioIndex : undefined,
-      subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-      mediaSourceId: mediaSourceId,
-      playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
-      playSessionId: stream?.sessionId,
-    });
-  };
-
-  const onProgress = useCallback(
-    async (data: OnProgressData) => {
-      if (isSeeking.value === true) return;
-      if (isPlaybackStopped === true) return;
-
-      const ticks = data.currentTime * 10000000;
-
-      progress.value = secondsToTicks(data.currentTime);
-      cacheProgress.value = secondsToTicks(data.playableDuration);
-      setIsBuffering(data.playableDuration === 0);
-
-      if (!item?.Id || data.currentTime === 0) return;
-
-      await getPlaystateApi(api!).onPlaybackProgress({
-        itemId: item.Id!,
-        audioStreamIndex: audioIndex ? audioIndex : undefined,
-        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-        mediaSourceId: mediaSourceId,
-        positionTicks: Math.round(ticks),
-        isPaused: !isPlaying,
-        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
-        playSessionId: stream?.sessionId,
-      });
-    },
-    [
-      item,
-      isPlaying,
-      api,
-      isPlaybackStopped,
-      audioIndex,
-      subtitleIndex,
-      mediaSourceId,
-      stream,
-    ]
-  );
-
-  useFocusEffect(
-    useCallback(() => {
-      play();
-
-      return () => {
-        stop();
-      };
-    }, [play, stop])
-  );
-
-  useOrientation();
-  useOrientationSettings();
-
-  useWebSocket({
-    isPlaying: isPlaying,
-    pauseVideo: pause,
-    playVideo: play,
-    stopPlayback: stop,
-  });
-
-  if (isLoadingItem || isLoadingStreamUrl)
-    return (
-      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
-        <Loader />
-      </View>
-    );
-
-  if (isErrorItem || isErrorStreamUrl)
-    return (
-      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
-        <Text className="text-white">Error</Text>
-      </View>
-    );
-
-  if (!item || !stream)
-    return (
-      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
-        <Text className="text-white">Error</Text>
-      </View>
-    );
-
-  return (
-    <View
-      style={{
-        width: windowDimensions.width,
-        height: windowDimensions.height,
-        position: "relative",
-      }}
-      className="flex flex-col items-center justify-center"
-    >
-      <View className="h-screen w-screen top-0 left-0 flex flex-col items-center justify-center p-4 absolute z-0">
-        <Image
-          source={poster}
-          style={{ width: "100%", height: "100%", resizeMode: "contain" }}
-        />
-      </View>
-
-      <Pressable
-        onPress={() => {
-          setShowControls(!showControls);
-        }}
-        className="absolute z-0 h-full w-full opacity-0"
-      >
-        {videoSource && (
-          <Video
-            ref={videoRef}
-            source={videoSource}
-            style={{ width: "100%", height: "100%" }}
-            resizeMode={ignoreSafeAreas ? "cover" : "contain"}
-            onProgress={onProgress}
-            onError={() => {}}
-            onLoad={() => {
-              if (firstTime.current === true) {
-                play();
-                firstTime.current = false;
-              }
-            }}
-            progressUpdateInterval={500}
-            playWhenInactive={true}
-            allowsExternalPlayback={true}
-            playInBackground={true}
-            pictureInPicture={true}
-            showNotificationControls={true}
-            ignoreSilentSwitch="ignore"
-            fullscreen={false}
-            onPlaybackStateChanged={(state) => {
-              setIsPlaying(state.isPlaying);
-            }}
-          />
-        )}
-      </Pressable>
-
-      <Controls
-        item={item}
-        videoRef={videoRef}
-        togglePlay={togglePlay}
-        isPlaying={isPlaying}
-        isSeeking={isSeeking}
-        progress={progress}
-        cacheProgress={cacheProgress}
-        isBuffering={isBuffering}
-        showControls={showControls}
-        setShowControls={setShowControls}
-        setIgnoreSafeAreas={setIgnoreSafeAreas}
-        ignoreSafeAreas={ignoreSafeAreas}
-        enableTrickplay={false}
-        pause={pause}
-        play={play}
-        seek={seek}
-        isVlc={false}
-        stop={stop}
-      />
-    </View>
-  );
-}
-
-export function usePoster(
-  item: BaseItemDto | null | undefined,
-  api: Api | null
-): string | undefined {
-  const poster = useMemo(() => {
-    if (!item || !api) return undefined;
-    return item.Type === "Audio"
-      ? `${api.basePath}/Items/${item.AlbumId}/Images/Primary?tag=${item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
-      : getBackdropUrl({
-          api,
-          item: item,
-          quality: 70,
-          width: 200,
-        });
-  }, [item, api]);
-
-  return poster ?? undefined;
-}
-
-export function useVideoSource(
-  item: BaseItemDto | null | undefined,
-  api: Api | null,
-  poster: string | undefined,
-  url?: string | null
-) {
-  const videoSource = useMemo(() => {
-    if (!item || !api || !url) {
-      return null;
-    }
-
-    const startPosition = item?.UserData?.PlaybackPositionTicks
-      ? Math.round(item.UserData.PlaybackPositionTicks / 10000)
-      : 0;
-
-    return {
-      uri: url,
-      isNetwork: true,
-      startPosition,
-      headers: getAuthHeaders(api),
-      metadata: {
-        artist: item?.AlbumArtist ?? undefined,
-        title: item?.Name || "Unknown",
-        description: item?.Overview ?? undefined,
-        imageUri: poster,
-        subtitle: item?.Album ?? undefined,
-      },
-    };
-  }, [item, api, poster]);
-
-  return videoSource;
-}
--- a/app/(auth)/player/transcoding-player.tsx
+++ b/app/(auth)/player/transcoding-player.tsx
@@ -414,7 +414,6 @@ const Player = () => {
              playWhenInactive={true}
              allowsExternalPlayback={true}
              playInBackground={true}
-              pictureInPicture={true}
              showNotificationControls={true}
              ignoreSilentSwitch="ignore"
              fullscreen={false}
@@ -532,7 +531,6 @@ export function useVideoSource(
      startPosition,
      headers: getAuthHeaders(api),
      metadata: {
-        artist: item?.AlbumArtist ?? undefined,
        title: item?.Name || "Unknown",
        description: item?.Overview ?? undefined,
        imageUri: poster,
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -1,16 +1,12 @@
 import { Button } from "@/components/Button";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
+import JellyfinServerDiscovery from "@/components/JellyfinServerDiscovery";
 import { PreviousServersList } from "@/components/PreviousServersList";
 import { Colors } from "@/constants/Colors";
 import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
-import {
-  Ionicons,
-  MaterialCommunityIcons,
-  MaterialIcons,
-} from "@expo/vector-icons";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
-import { getSystemApi } from "@jellyfin/sdk/lib/utils/api";
 import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
@@ -313,6 +309,15 @@ const Login: React.FC = () => {
                >
                  Connect
                </Button>
+                <JellyfinServerDiscovery
+                  onServerSelect={(server) => {
+                    setServerURL(server.address);
+                    if (server.serverName) {
+                      setServerName(server.serverName);
+                    }
+                    handleConnect(server.address);
+                  }}
+                />
                <PreviousServersList
                  onServerSelect={(s) => {
                    handleConnect(s.address);
--- a/augmentations/index.ts
+++ b/augmentations/index.ts
@@ -1,3 +1,4 @@
+export * from "./api";
 export * from "./mmkv";
 export * from "./number";
 export * from "./string";
--- a/bun.lockb
+++ b/bun.lockb
--- a/components/DownloadItem.tsx
+++ b/components/DownloadItem.tsx
@@ -2,7 +2,7 @@ import { useRemuxHlsToMp4 } from "@/hooks/useRemuxHlsToMp4";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { queueActions, queueAtom } from "@/utils/atoms/queue";
-import { useSettings } from "@/utils/atoms/settings";
+import {DownloadMethod, useSettings} from "@/utils/atoms/settings";
 import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { saveDownloadItemInfoToDiskTmp } from "@/utils/optimize-server";
@@ -74,7 +74,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
    [user]
  );
  const usingOptimizedServer = useMemo(
-    () => settings?.downloadMethod === "optimized",
+    () => settings?.downloadMethod === DownloadMethod.Optimized,
    [settings]
  );

--- a/components/JellyfinServerDiscovery.tsx
+++ b/components/JellyfinServerDiscovery.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import { useJellyfinDiscovery } from "@/hooks/useJellyfinDiscovery";
+import { Button } from "./Button";
+import { ListGroup } from "./list/ListGroup";
+import { ListItem } from "./list/ListItem";
+
+interface Props {
+  onServerSelect?: (server: { address: string; serverName?: string }) => void;
+}
+
+const JellyfinServerDiscovery: React.FC<Props> = ({ onServerSelect }) => {
+  const { servers, isSearching, startDiscovery } = useJellyfinDiscovery();
+
+  return (
+    <View className="mt-2">
+      <Button onPress={startDiscovery} color="black">
+        <Text className="text-white text-center">
+          {isSearching ? "Searching..." : "Search for local servers"}
+        </Text>
+      </Button>
+
+      {servers.length ? (
+        <ListGroup title="Servers" className="mt-4">
+          {servers.map((server) => (
+            <ListItem
+              key={server.address}
+              onPress={() =>
+                onServerSelect?.({
+                  address: server.address,
+                  serverName: server.serverName,
+                })
+              }
+              title={server.address}
+              showArrow
+            />
+          ))}
+        </ListGroup>
+      ) : null}
+    </View>
+  );
+};
+
+export default JellyfinServerDiscovery;
--- a/components/common/Dropdown.tsx
+++ b/components/common/Dropdown.tsx
@@ -1,14 +1,16 @@
 import * as DropdownMenu from "zeego/dropdown-menu";
 import {TouchableOpacity, View, ViewProps} from "react-native";
 import {Text} from "@/components/common/Text";
-import React, {PropsWithChildren, useEffect, useState} from "react";
+import React, {PropsWithChildren, ReactNode, useEffect, useState} from "react";
+import DisabledSetting from "@/components/settings/DisabledSetting";

 interface Props<T> {
  data: T[]
+  disabled?: boolean
  placeholderText?: string,
  keyExtractor: (item: T) => string
-  titleExtractor: (item: T) => string
-  title: string,
+  titleExtractor: (item: T) => string | undefined
+  title: string | ReactNode,
  label: string,
  onSelected: (...item: T[]) => void
  multi?: boolean
@@ -16,6 +18,7 @@ interface Props<T> {

 const Dropdown =  <T extends unknown>({
  data,
+  disabled,
  placeholderText,
  keyExtractor,
  titleExtractor,
@@ -34,20 +37,30 @@ const Dropdown =  <T extends unknown>({
  }, [selected]);

  return (
-    <View {...props}>
+    <DisabledSetting
+      disabled={disabled === true}
+      showText={false}
+      {...props}
+    >
      <DropdownMenu.Root>
        <DropdownMenu.Trigger>
-          <View className="flex flex-col">
-            <Text className="opacity-50 mb-1 text-xs">
-              {title}
-            </Text>
-            <TouchableOpacity
-              className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
-              <Text style={{}} className="" numberOfLines={1}>
-                {selected?.length !== undefined ? selected.map(titleExtractor).join(",") : placeholderText}
+          {typeof title === 'string' ? (
+            <View className="flex flex-col">
+              <Text className="opacity-50 mb-1 text-xs">
+                {title}
              </Text>
-            </TouchableOpacity>
-          </View>
+              <TouchableOpacity
+                className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
+                <Text style={{}} className="" numberOfLines={1}>
+                  {selected?.length !== undefined ? selected.map(titleExtractor).join(",") : placeholderText}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          ) : (
+            <>
+              {title}
+            </>
+          )}
        </DropdownMenu.Trigger>
        <DropdownMenu.Content
          loop={false}
@@ -88,7 +101,7 @@ const Dropdown =  <T extends unknown>({
          ))}
        </DropdownMenu.Content>
      </DropdownMenu.Root>
-    </View>
+    </DisabledSetting>
  )
 };

--- a/components/common/TouchableItemRouter.tsx
+++ b/components/common/TouchableItemRouter.tsx
@@ -26,18 +26,6 @@ export const itemRouter = (
    return `/(auth)/(tabs)/${from}/series/${item.Id}`;
  }

-  if (item.Type === "MusicAlbum") {
-    return `/(auth)/(tabs)/${from}/albums/${item.Id}`;
-  }
-
-  if (item.Type === "Audio") {
-    return `/(auth)/(tabs)/${from}/albums/${item.AlbumId}`;
-  }
-
-  if (item.Type === "MusicArtist") {
-    return `/(auth)/(tabs)/${from}/artists/${item.Id}`;
-  }
-
  if (item.Type === "Person" || item.Type === "Actor") {
    return `/(auth)/(tabs)/${from}/actors/${item.Id}`;
  }
--- a/components/downloads/ActiveDownloads.tsx
+++ b/components/downloads/ActiveDownloads.tsx
@@ -1,7 +1,6 @@
 import { Text } from "@/components/common/Text";
 import { useDownload } from "@/providers/DownloadProvider";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
+import {DownloadMethod, useSettings} from "@/utils/atoms/settings";
 import { JobStatus } from "@/utils/optimize-server";
 import { formatTimeString } from "@/utils/time";
 import { Ionicons } from "@expo/vector-icons";
@@ -9,7 +8,6 @@ import { checkForExistingDownloads } from "@kesha-antonov/react-native-backgroun
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "expo-router";
 import { FFmpegKit } from "ffmpeg-kit-react-native";
-import { useAtom } from "jotai";
 import {
  ActivityIndicator,
  TouchableOpacity,
@@ -62,7 +60,7 @@ const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
    mutationFn: async (id: string) => {
      if (!process) throw new Error("No active download");

-      if (settings?.downloadMethod === "optimized") {
+      if (settings?.downloadMethod === DownloadMethod.Optimized) {
        try {
          const tasks = await checkForExistingDownloads();
          for (const task of tasks) {
--- a/components/home/Favorites.tsx
+++ b/components/home/Favorites.tsx
@@ -54,14 +54,6 @@ export const Favorites = () => {
    () => fetchFavoritesByType("Playlist"),
    [fetchFavoritesByType]
  );
-  const fetchFavoriteMusicAlbum = useCallback(
-    () => fetchFavoritesByType("MusicAlbum"),
-    [fetchFavoritesByType]
-  );
-  const fetchFavoriteAudio = useCallback(
-    () => fetchFavoritesByType("Audio"),
-    [fetchFavoritesByType]
-  );

  return (
    <View className="flex flex-co gap-y-4">
@@ -102,18 +94,6 @@ export const Favorites = () => {
        title="Playlists"
        hideIfEmpty
      />
-      <ScrollingCollectionList
-        queryFn={fetchFavoriteMusicAlbum}
-        queryKey={["home", "favorites", "musicAlbums"]}
-        title="Music Albums"
-        hideIfEmpty
-      />
-      <ScrollingCollectionList
-        queryFn={fetchFavoriteAudio}
-        queryKey={["home", "favorites", "audio"]}
-        title="Audio"
-        hideIfEmpty
-      />
    </View>
  );
 };
--- a/components/home/LargeMovieCarousel.tsx
+++ b/components/home/LargeMovieCarousel.tsx
@@ -1,3 +1,4 @@
+import { useHaptic } from "@/hooks/useHaptic";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
@@ -6,9 +7,11 @@ import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
+import { useRouter, useSegments } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useCallback, useMemo } from "react";
-import { Dimensions, TouchableOpacity, View, ViewProps } from "react-native";
+import { Dimensions, View, ViewProps } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
  runOnJS,
  useSharedValue,
@@ -18,11 +21,7 @@ import Carousel, {
  ICarouselInstance,
  Pagination,
 } from "react-native-reanimated-carousel";
-import { itemRouter, TouchableItemRouter } from "../common/TouchableItemRouter";
-import { Loader } from "../Loader";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import { useRouter, useSegments } from "expo-router";
-import { useHaptic } from "@/hooks/useHaptic";
+import { itemRouter } from "../common/TouchableItemRouter";

 interface Props extends ViewProps {}

--- a/components/inputs/Stepper.tsx
+++ b/components/inputs/Stepper.tsx
@@ -1,8 +1,10 @@
 import {TouchableOpacity, View} from "react-native";
 import {Text} from "@/components/common/Text";
+import DisabledSetting from "@/components/settings/DisabledSetting";

 interface StepperProps {
  value: number,
+  disabled?: boolean,
  step: number,
  min: number,
  max: number,
@@ -12,6 +14,7 @@ interface StepperProps {

 export const Stepper: React.FC<StepperProps> = ({
  value,
+  disabled,
  step,
  min,
  max,
@@ -19,7 +22,11 @@ export const Stepper: React.FC<StepperProps> = ({
  appendValue
 }) => {
  return (
-    <View className="flex flex-row items-center">
+    <DisabledSetting
+      disabled={disabled === true}
+      showText={false}
+      className="flex flex-row items-center"
+    >
      <TouchableOpacity
        onPress={() => onUpdate(Math.max(min, value - step))}
        className="w-8 h-8 bg-neutral-800 rounded-l-lg flex items-center justify-center"
@@ -39,6 +46,6 @@ export const Stepper: React.FC<StepperProps> = ({
      >
        <Text>+</Text>
      </TouchableOpacity>
-    </View>
+    </DisabledSetting>
  )
 }
--- a/components/library/LibraryItemCard.tsx
+++ b/components/library/LibraryItemCard.tsx
@@ -60,8 +60,6 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
      _itemType = "Series";
    } else if (library.CollectionType === "boxsets") {
      _itemType = "BoxSet";
-    } else if (library.CollectionType === "music") {
-      _itemType = "MusicAlbum";
    }

    return _itemType;
@@ -76,8 +74,6 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
      nameStr = "series";
    } else if (library.CollectionType === "boxsets") {
      nameStr = "box sets";
-    } else if (library.CollectionType === "music") {
-      nameStr = "albums";
    } else {
      nameStr = "items";
    }
--- a/components/music/SongsList.tsx
+++ b/components/music/SongsList.tsx
@@ -1,35 +0,0 @@
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useRouter } from "expo-router";
-import { View, ViewProps } from "react-native";
-import { SongsListItem } from "./SongsListItem";
-
-interface Props extends ViewProps {
-  songs?: BaseItemDto[] | null;
-  collectionId: string;
-  artistId: string;
-  albumId: string;
-}
-
-export const SongsList: React.FC<Props> = ({
-  collectionId,
-  artistId,
-  albumId,
-  songs = [],
-  ...props
-}) => {
-  const router = useRouter();
-  return (
-    <View className="flex flex-col space-y-2" {...props}>
-      {songs?.map((item: BaseItemDto, index: number) => (
-        <SongsListItem
-          key={item.Id}
-          item={item}
-          index={index}
-          collectionId={collectionId}
-          artistId={artistId}
-          albumId={albumId}
-        />
-      ))}
-    </View>
-  );
-};
--- a/components/music/SongsListItem.tsx
+++ b/components/music/SongsListItem.tsx
@@ -1,128 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { usePlaySettings } from "@/providers/PlaySettingsProvider";
-import { runtimeTicksToSeconds } from "@/utils/time";
-import { useActionSheet } from "@expo/react-native-action-sheet";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useRouter } from "expo-router";
-import { useAtom } from "jotai";
-import { useCallback } from "react";
-import { TouchableOpacity, TouchableOpacityProps, View } from "react-native";
-import CastContext, {
-  PlayServicesState,
-  useCastDevice,
-  useRemoteMediaClient,
-} from "react-native-google-cast";
-
-interface Props extends TouchableOpacityProps {
-  collectionId: string;
-  artistId: string;
-  albumId: string;
-  item: BaseItemDto;
-  index: number;
-}
-
-export const SongsListItem: React.FC<Props> = ({
-  collectionId,
-  artistId,
-  albumId,
-  item,
-  index,
-  ...props
-}) => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-  const castDevice = useCastDevice();
-  const router = useRouter();
-  const client = useRemoteMediaClient();
-  const { showActionSheetWithOptions } = useActionSheet();
-
-  const { setPlaySettings } = usePlaySettings();
-
-  const openSelect = () => {
-    if (!castDevice?.deviceId) {
-      play("device");
-      return;
-    }
-
-    const options = ["Chromecast", "Device", "Cancel"];
-    const cancelButtonIndex = 2;
-
-    showActionSheetWithOptions(
-      {
-        options,
-        cancelButtonIndex,
-      },
-      (selectedIndex: number | undefined) => {
-        switch (selectedIndex) {
-          case 0:
-            play("cast");
-            break;
-          case 1:
-            play("device");
-            break;
-          case cancelButtonIndex:
-            break;
-        }
-      }
-    );
-  };
-
-  const play = useCallback(async (type: "device" | "cast") => {
-    if (!user?.Id || !api || !item.Id) {
-      console.warn("No user, api or item", user, api, item.Id);
-      return;
-    }
-
-    const data = await setPlaySettings({
-      item,
-    });
-
-    if (!data?.url) {
-      throw new Error("play-music ~ No stream url");
-    }
-
-    if (type === "cast" && client) {
-      await CastContext.getPlayServicesState().then((state) => {
-        if (state && state !== PlayServicesState.SUCCESS)
-          CastContext.showPlayServicesErrorDialog(state);
-        else {
-          client.loadMedia({
-            mediaInfo: {
-              contentUrl: data.url!,
-              contentType: "video/mp4",
-              metadata: {
-                type: item.Type === "Episode" ? "tvShow" : "movie",
-                title: item.Name || "",
-                subtitle: item.Overview || "",
-              },
-            },
-            startTime: 0,
-          });
-        }
-      });
-    } else {
-      console.log("Playing on device", data.url, item.Id);
-      router.push("/music-player");
-    }
-  }, []);
-
-  return (
-    <TouchableOpacity
-      onPress={() => {
-        openSelect();
-      }}
-      {...props}
-    >
-      <View className="flex flex-row items-center space-x-4 bg-neutral-900 border-neutral-800 px-4 py-4 rounded-xl">
-        <Text className="opacity-50">{index + 1}</Text>
-        <View>
-          <Text className="mb-0.5 font-semibold">{item.Name}</Text>
-          <Text className="opacity-50 text-xs">
-            {runtimeTicksToSeconds(item.RunTimeTicks)}
-          </Text>
-        </View>
-      </View>
-    </TouchableOpacity>
-  );
-};
--- a/components/posters/AlbumCover.tsx
+++ b/components/posters/AlbumCover.tsx
@@ -1,82 +0,0 @@
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { getPrimaryImageUrlById } from "@/utils/jellyfin/image/getPrimaryImageUrlById";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { Image } from "expo-image";
-import { useAtom } from "jotai";
-import { useMemo } from "react";
-import { View } from "react-native";
-
-type ArtistPosterProps = {
-  item?: BaseItemDto | null;
-  id?: string | null;
-  showProgress?: boolean;
-};
-
-const AlbumCover: React.FC<ArtistPosterProps> = ({ item, id }) => {
-  const [api] = useAtom(apiAtom);
-
-  const url = useMemo(() => {
-    const u = getPrimaryImageUrl({
-      api,
-      item,
-    });
-    return u;
-  }, [item]);
-
-  const url2 = useMemo(() => {
-    const u = getPrimaryImageUrlById({
-      api,
-      id,
-      quality: 85,
-      width: 300,
-    });
-    return u;
-  }, [item]);
-
-  if (!item && id)
-    return (
-      <View className="relative rounded-lg overflow-hidden border border-neutral-900">
-        <Image
-          key={id}
-          id={id}
-          source={
-            url2
-              ? {
-                  uri: url2,
-                }
-              : null
-          }
-          cachePolicy={"memory-disk"}
-          contentFit="cover"
-          style={{
-            aspectRatio: "1/1",
-          }}
-        />
-      </View>
-    );
-
-  if (item)
-    return (
-      <View className="relative rounded-md overflow-hidden border border-neutral-900">
-        <Image
-          key={item.Id}
-          id={item.Id}
-          source={
-            url
-              ? {
-                  uri: url,
-                }
-              : null
-          }
-          cachePolicy={"memory-disk"}
-          contentFit="cover"
-          style={{
-            aspectRatio: "1/1",
-          }}
-        />
-      </View>
-    );
-};
-
-export default AlbumCover;
--- a/components/posters/ArtistPoster.tsx
+++ b/components/posters/ArtistPoster.tsx
@@ -1,57 +0,0 @@
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { Image } from "expo-image";
-import { useAtom } from "jotai";
-import { useMemo } from "react";
-import { View } from "react-native";
-
-type ArtistPosterProps = {
-  item: BaseItemDto;
-  showProgress?: boolean;
-};
-
-const ArtistPoster: React.FC<ArtistPosterProps> = ({
-  item,
-  showProgress = false,
-}) => {
-  const [api] = useAtom(apiAtom);
-
-  const url = useMemo(
-    () =>
-      getPrimaryImageUrl({
-        api,
-        item,
-      }),
-    [item]
-  );
-
-  if (!url)
-    return (
-      <View
-        className="rounded-lg overflow-hidden border border-neutral-900"
-        style={{
-          aspectRatio: "1/1",
-        }}
-      ></View>
-    );
-
-  return (
-    <View className="relative rounded-md overflow-hidden border border-neutral-900">
-      <Image
-        key={item.Id}
-        id={item.Id}
-        source={{
-          uri: url,
-        }}
-        cachePolicy={"memory-disk"}
-        contentFit="cover"
-        style={{
-          aspectRatio: "1/1",
-        }}
-      />
-    </View>
-  );
-};
-
-export default ArtistPoster;
--- a/components/settings/AudioToggles.tsx
+++ b/components/settings/AudioToggles.tsx
@@ -6,11 +6,13 @@ import { Switch } from "react-native-gesture-handler";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
 import { Ionicons } from "@expo/vector-icons";
+import {useSettings} from "@/utils/atoms/settings";

 interface Props extends ViewProps {}

 export const AudioToggles: React.FC<Props> = ({ ...props }) => {
  const media = useMedia();
+  const [_, __, pluginSettings] = useSettings();
  const { settings, updateSettings } = media;
  const cultures = media.cultures;

@@ -26,9 +28,13 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
          </Text>
        }
      >
-        <ListItem title={"Set Audio Track From Previous Item"}>
+        <ListItem
+          title={"Set Audio Track From Previous Item"}
+          disabled={pluginSettings?.rememberAudioSelections?.locked}
+        >
          <Switch
            value={settings.rememberAudioSelections}
+            disabled={pluginSettings?.rememberAudioSelections?.locked}
            onValueChange={(value) =>
              updateSettings({ rememberAudioSelections: value })
            }
--- a/components/settings/DisabledSetting.tsx
+++ b/components/settings/DisabledSetting.tsx
@@ -0,0 +1,26 @@
+import {View, ViewProps} from "react-native";
+import {Text} from "@/components/common/Text";
+
+const DisabledSetting: React.FC<{disabled: boolean, showText?: boolean, text?: string} & ViewProps> = ({
+  disabled = false,
+  showText = true,
+  text,
+  children,
+  ...props
+}) => (
+  <View
+    pointerEvents={disabled ? "none" : "auto"}
+    style={{
+      opacity: disabled ? 0.5 : 1,
+    }}
+  >
+    <View {...props}>
+      {disabled && showText &&
+          <Text className="text-center text-red-700 my-4">{text ?? "Currently disabled by admin."}</Text>
+      }
+      {children}
+    </View>
+  </View>
+)
+
+export default DisabledSetting;
--- a/components/settings/DownloadSettings.tsx
+++ b/components/settings/DownloadSettings.tsx
@@ -1,33 +1,45 @@
 import { Stepper } from "@/components/inputs/Stepper";
 import { useDownload } from "@/providers/DownloadProvider";
-import { Settings, useSettings } from "@/utils/atoms/settings";
+import { DownloadMethod, 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, View } from "react-native";
+import React, { useMemo } 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";
+import DisabledSetting from "@/components/settings/DisabledSetting";

 export const DownloadSettings: React.FC = ({ ...props }) => {
-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();
  const { setProcesses } = useDownload();
  const router = useRouter();
  const queryClient = useQueryClient();

+  const allDisabled = useMemo(
+    () =>
+      pluginSettings?.downloadMethod?.locked === true &&
+      pluginSettings?.remuxConcurrentLimit?.locked === true &&
+      pluginSettings?.autoDownload.locked === true,
+    [pluginSettings]
+  );
+
  if (!settings) return null;

  return (
-    <View {...props} className="mb-4">
+    <DisabledSetting disabled={allDisabled} {...props} className="mb-4">
      <ListGroup title="Downloads">
-        <ListItem title="Download method">
+        <ListItem
+          title="Download method"
+          disabled={pluginSettings?.downloadMethod?.locked}
+        >
          <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"
+                  {settings.downloadMethod === DownloadMethod.Remux
                    ? "Default"
                    : "Optimized"}
                </Text>
@@ -51,7 +63,7 @@ export const DownloadSettings: React.FC = ({ ...props }) => {
              <DropdownMenu.Item
                key="1"
                onSelect={() => {
-                  updateSettings({ downloadMethod: "remux" });
+                  updateSettings({ downloadMethod: DownloadMethod.Remux });
                  setProcesses([]);
                }}
              >
@@ -60,7 +72,7 @@ export const DownloadSettings: React.FC = ({ ...props }) => {
              <DropdownMenu.Item
                key="2"
                onSelect={() => {
-                  updateSettings({ downloadMethod: "optimized" });
+                  updateSettings({ downloadMethod: DownloadMethod.Optimized });
                  setProcesses([]);
                  queryClient.invalidateQueries({ queryKey: ["search"] });
                }}
@@ -73,7 +85,10 @@ export const DownloadSettings: React.FC = ({ ...props }) => {

        <ListItem
          title="Remux max download"
-          disabled={settings.downloadMethod !== "remux"}
+          disabled={
+            pluginSettings?.remuxConcurrentLimit?.locked ||
+            settings.downloadMethod !== DownloadMethod.Remux
+          }
        >
          <Stepper
            value={settings.remuxConcurrentLimit}
@@ -90,22 +105,31 @@ export const DownloadSettings: React.FC = ({ ...props }) => {

        <ListItem
          title="Auto download"
-          disabled={settings.downloadMethod !== "optimized"}
+          disabled={
+            pluginSettings?.autoDownload?.locked ||
+            settings.downloadMethod !== DownloadMethod.Optimized
+          }
        >
          <Switch
-            disabled={settings.downloadMethod !== "optimized"}
+            disabled={
+              pluginSettings?.autoDownload?.locked ||
+              settings.downloadMethod !== DownloadMethod.Optimized
+            }
            value={settings.autoDownload}
            onValueChange={(value) => updateSettings({ autoDownload: value })}
          />
        </ListItem>

        <ListItem
-          disabled={settings.downloadMethod !== "optimized"}
+          disabled={
+            pluginSettings?.optimizedVersionsServerUrl?.locked ||
+            settings.downloadMethod !== DownloadMethod.Optimized
+          }
          onPress={() => router.push("/settings/optimized-server/page")}
          showArrow
          title="Optimized Versions Server"
        ></ListItem>
      </ListGroup>
-    </View>
+    </DisabledSetting>
  );
 };
--- a/components/settings/Jellyseerr.tsx
+++ b/components/settings/Jellyseerr.tsx
@@ -21,7 +21,7 @@ export const JellyseerrSettings = () => {
  } = useJellyseerr();

  const [user] = useAtom(userAtom);
-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();

  const [promptForJellyseerrPass, setPromptForJellyseerrPass] =
    useState<boolean>(false);
--- a/components/settings/MediaToggles.tsx
+++ b/components/settings/MediaToggles.tsx
@@ -1,72 +1,61 @@
-import React from "react";
-import { TouchableOpacity, View, ViewProps } from "react-native";
+import React, {useMemo} from "react";
+import { 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";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import {Stepper} from "@/components/inputs/Stepper";

 interface Props extends ViewProps {}

 export const MediaToggles: React.FC<Props> = ({ ...props }) => {
-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();

  if (!settings) return null;

-  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>
-  );
+  const disabled = useMemo(() => (
+      pluginSettings?.forwardSkipTime?.locked === true &&
+      pluginSettings?.rewindSkipTime?.locked === true
+    ),
+    [pluginSettings]
+  )

  return (
-    <View {...props}>
+    <DisabledSetting
+      disabled={disabled}
+      {...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
+          title="Forward Skip Length"
+          disabled={pluginSettings?.forwardSkipTime?.locked}
+        >
+          <Stepper
+            value={settings.forwardSkipTime}
+            disabled={pluginSettings?.forwardSkipTime?.locked}
+            step={5}
+            appendValue="s"
+            min={0}
+            max={60}
+            onUpdate={(forwardSkipTime) => updateSettings({forwardSkipTime})}
+          />
        </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
+          title="Rewind Length"
+          disabled={pluginSettings?.rewindSkipTime?.locked}
+        >
+          <Stepper
+            value={settings.rewindSkipTime}
+            disabled={pluginSettings?.rewindSkipTime?.locked}
+            step={5}
+            appendValue="s"
+            min={0}
+            max={60}
+            onUpdate={(rewindSkipTime) => updateSettings({rewindSkipTime})}
+          />
        </ListItem>
      </ListGroup>
-    </View>
+    </DisabledSetting>
  );
 };
--- a/components/settings/OtherSettings.tsx
+++ b/components/settings/OtherSettings.tsx
@@ -9,19 +9,18 @@ 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 React, { useEffect } from "react";
-import { Linking, Switch, TouchableOpacity, ViewProps } from "react-native";
+import React, {useEffect, useMemo} from "react";
+import { Linking, Switch, TouchableOpacity } from "react-native";
 import { toast } from "sonner-native";
-import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
-
-interface Props extends ViewProps {}
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import Dropdown from "@/components/common/Dropdown";

 export const OtherSettings: React.FC = () => {
  const router = useRouter();
-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();

  /********************
   * Background task
@@ -53,146 +52,114 @@ export const OtherSettings: React.FC = () => {
  /**********************
   *********************/

+  const disabled = useMemo(() => (
+    pluginSettings?.autoRotate?.locked === true &&
+    pluginSettings?.defaultVideoOrientation?.locked === true &&
+    pluginSettings?.safeAreaInControlsEnabled?.locked === true &&
+    pluginSettings?.showCustomMenuLinks?.locked === true &&
+    pluginSettings?.hiddenLibraries?.locked === true &&
+    pluginSettings?.disableHapticFeedback?.locked === true
+  ), [pluginSettings]);
+
+  const orientations = [
+    ScreenOrientation.OrientationLock.DEFAULT,
+    ScreenOrientation.OrientationLock.PORTRAIT_UP,
+    ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
+    ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
+  ]
+
  if (!settings) return null;

  return (
-    <ListGroup title="Other" className="">
-      <ListItem title="Auto rotate">
-        <Switch
-          value={settings.autoRotate}
-          onValueChange={(value) => updateSettings({ autoRotate: value })}
-        />
-      </ListItem>
+    <DisabledSetting
+      disabled={disabled}
+    >
+      <ListGroup title="Other" className="">
+        <ListItem
+          title="Auto rotate"
+          disabled={pluginSettings?.autoRotate?.locked}
+        >
+          <Switch
+            value={settings.autoRotate}
+            disabled={pluginSettings?.autoRotate?.locked}
+            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="Video orientation"
+          disabled={pluginSettings?.defaultVideoOrientation?.locked || settings.autoRotate}
+        >
+          <Dropdown
+            data={orientations}
+            disabled={pluginSettings?.defaultVideoOrientation?.locked || settings.autoRotate}
+            keyExtractor={String}
+            titleExtractor={(item) =>
+              ScreenOrientationEnum[item]
+            }
+            title={
+              <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>
+            }
+            label="Orientation"
+            onSelected={(defaultVideoOrientation) =>
+              updateSettings({defaultVideoOrientation})
+            }
+          />
+        </ListItem>

-      <ListItem title="Safe area in controls">
-        <Switch
-          value={settings.safeAreaInControlsEnabled}
-          onValueChange={(value) =>
-            updateSettings({ safeAreaInControlsEnabled: value })
-          }
-        />
-      </ListItem>
+        <ListItem
+          title="Safe area in controls"
+          disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
+        >
+          <Switch
+            value={settings.safeAreaInControlsEnabled}
+            disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
+            onValueChange={(value) =>
+              updateSettings({safeAreaInControlsEnabled: value})
+            }
+          />
+        </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
+          title="Show Custom Menu Links"
+          disabled={pluginSettings?.showCustomMenuLinks?.locked}
+          onPress={() =>
+            Linking.openURL(
+              "https://jellyfin.org/docs/general/clients/web-config/#custom-menu-links"
+            )
          }
+        >
+          <Switch
+            value={settings.showCustomMenuLinks}
+            disabled={pluginSettings?.showCustomMenuLinks?.locked}
+            onValueChange={(value) =>
+              updateSettings({showCustomMenuLinks: value})
+            }
+          />
+        </ListItem>
+        <ListItem
+          onPress={() => router.push("/settings/hide-libraries/page")}
+          title="Hide Libraries"
+          showArrow
        />
-      </ListItem>
-      <ListItem
-        onPress={() => router.push("/settings/hide-libraries/page")}
-        title="Hide Libraries"
-        showArrow
-      />
-      <ListItem title="Disable Haptic Feedback">
-        <Switch
-          value={settings.disableHapticFeedback}
-          onValueChange={(value) =>
-            updateSettings({ disableHapticFeedback: value })
-          }
-        />
-      </ListItem>
-    </ListGroup>
+        <ListItem
+          title="Disable Haptic Feedback"
+          disabled={pluginSettings?.disableHapticFeedback?.locked}
+        >
+          <Switch
+            value={settings.disableHapticFeedback}
+            disabled={pluginSettings?.disableHapticFeedback?.locked}
+            onValueChange={(disableHapticFeedback) =>
+              updateSettings({disableHapticFeedback})
+            }
+          />
+        </ListItem>
+      </ListGroup>
+    </DisabledSetting>
  );
 };
--- a/components/settings/SubtitleToggles.tsx
+++ b/components/settings/SubtitleToggles.tsx
@@ -7,11 +7,15 @@ import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
 import { Ionicons } from "@expo/vector-icons";
 import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
+import {useSettings} from "@/utils/atoms/settings";
+import {Stepper} from "@/components/inputs/Stepper";
+import Dropdown from "@/components/common/Dropdown";

 interface Props extends ViewProps {}

 export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
  const media = useMedia();
+  const [_, __, pluginSettings] = useSettings();
  const { settings, updateSettings } = media;
  const cultures = media.cultures;

@@ -36,8 +40,11 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
        }
      >
        <ListItem title="Subtitle language">
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
+          <Dropdown
+            data={[{DisplayName: "None", ThreeLetterISOLanguageName: "none-subs" },...(cultures ?? [])]}
+            keyExtractor={(item) => item?.ThreeLetterISOLanguageName ?? "unknown"}
+            titleExtractor={(item) => item?.DisplayName}
+            title={
              <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
                <Text className="mr-1 text-[#8E8D91]">
                  {settings?.defaultSubtitleLanguage?.DisplayName || "None"}
@@ -48,48 +55,28 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
                  color="#5A5960"
                />
              </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>
-              {cultures?.map((l) => (
-                <DropdownMenu.Item
-                  key={l?.ThreeLetterISOLanguageName ?? "unknown"}
-                  onSelect={() => {
-                    updateSettings({
-                      defaultSubtitleLanguage: l,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>
-                    {l.DisplayName}
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              ))}
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
+            }
+            label="Languages"
+            onSelected={(defaultSubtitleLanguage) =>
+              updateSettings({
+                defaultSubtitleLanguage: defaultSubtitleLanguage.DisplayName === "None"
+                  ? null
+                  : defaultSubtitleLanguage
+              })
+          }
+          />
        </ListItem>

-        <ListItem title="Subtitle Mode">
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
+        <ListItem
+          title="Subtitle Mode"
+          disabled={pluginSettings?.subtitleMode?.locked}
+        >
+          <Dropdown
+            data={subtitleModes}
+            disabled={pluginSettings?.subtitleMode?.locked}
+            keyExtractor={String}
+            titleExtractor={String}
+            title={
              <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
                <Text className="mr-1 text-[#8E8D91]">
                  {settings?.subtitleMode || "Loading"}
@@ -100,68 +87,39 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
                  color="#5A5960"
                />
              </TouchableOpacity>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content
-              loop={true}
-              side="bottom"
-              align="start"
-              alignOffset={0}
-              avoidCollisions={true}
-              collisionPadding={8}
-              sideOffset={8}
-            >
-              <DropdownMenu.Label>Subtitle Mode</DropdownMenu.Label>
-              {subtitleModes?.map((l) => (
-                <DropdownMenu.Item
-                  key={l}
-                  onSelect={() => {
-                    updateSettings({
-                      subtitleMode: l,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>{l}</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              ))}
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
+            }
+            label="Subtitle Mode"
+            onSelected={(subtitleMode) =>
+              updateSettings({subtitleMode})
+            }
+          />
        </ListItem>

-        <ListItem title="Set Subtitle Track From Previous Item">
+        <ListItem
+          title="Set Subtitle Track From Previous Item"
+          disabled={pluginSettings?.rememberSubtitleSelections?.locked}
+        >
          <Switch
            value={settings.rememberSubtitleSelections}
+            disabled={pluginSettings?.rememberSubtitleSelections?.locked}
            onValueChange={(value) =>
              updateSettings({ rememberSubtitleSelections: value })
            }
          />
        </ListItem>

-        <ListItem title="Subtitle Size">
-          <View className="flex flex-row items-center">
-            <TouchableOpacity
-              onPress={() =>
-                updateSettings({
-                  subtitleSize: Math.max(0, settings.subtitleSize - 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 px-3 py-2 flex items-center justify-center">
-              {settings.subtitleSize}
-            </Text>
-            <TouchableOpacity
-              className="w-8 h-8 bg-neutral-800 rounded-r-lg flex items-center justify-center"
-              onPress={() =>
-                updateSettings({
-                  subtitleSize: Math.min(120, settings.subtitleSize + 5),
-                })
-              }
-            >
-              <Text>+</Text>
-            </TouchableOpacity>
-          </View>
+        <ListItem
+          title="Subtitle Size"
+          disabled={pluginSettings?.subtitleSize?.locked}
+        >
+          <Stepper
+            value={settings.subtitleSize}
+            disabled={pluginSettings?.subtitleSize?.locked}
+            step={5}
+            min={0}
+            max={120}
+            onUpdate={(subtitleSize) => updateSettings({subtitleSize})}
+          />
        </ListItem>
      </ListGroup>
    </View>
--- a/components/stacks/NestedTabPageStack.tsx
+++ b/components/stacks/NestedTabPageStack.tsx
@@ -17,14 +17,7 @@ export const commonScreenOptions: ICommonScreenOptions = {
  headerLeft: () => <HeaderBackButton />,
 };

-const routes = [
-  "actors/[actorId]",
-  "albums/[albumId]",
-  "artists/index",
-  "artists/[artistId]",
-  "items/page",
-  "series/[id]",
-];
+const routes = ["actors/[actorId]", "items/page", "series/[id]"];

 export const nestedTabPageScreenOptions: Record<string, ICommonScreenOptions> =
  Object.fromEntries(routes.map((route) => [route, commonScreenOptions]));
--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
@@ -35,12 +35,7 @@ import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
 import { debounce } from "lodash";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import {
-  Pressable,
-  TouchableOpacity,
-  useWindowDimensions,
-  View,
-} from "react-native";
+import { TouchableOpacity, useWindowDimensions, View } from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import {
  runOnJS,
@@ -59,6 +54,8 @@ import DropdownViewTranscoding from "./dropdown/DropdownViewTranscoding";
 import { EpisodeList } from "./EpisodeList";
 import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
 import SkipButton from "./SkipButton";
+import { useControlsTimeout } from "./useControlsTimeout";
+import { VideoTouchOverlay } from "./VideoTouchOverlay";

 interface Props {
  item: BaseItemDto;
@@ -89,6 +86,8 @@ interface Props {
  isVlc?: boolean;
 }

+const CONTROLS_TIMEOUT = 4000;
+
 export const Controls: React.FC<Props> = ({
  item,
  seek,
@@ -121,6 +120,12 @@ export const Controls: React.FC<Props> = ({
  const insets = useSafeAreaInsets();
  const [api] = useAtom(apiAtom);

+  const [episodeView, setEpisodeView] = useState(false);
+  const [isSliding, setIsSliding] = useState(false);
+
+  // Used when user changes audio through audio button on device.
+  const [showAudioSlider, setShowAudioSlider] = useState(false);
+
  const { height: screenHeight, width: screenWidth } = useWindowDimensions();
  const { previousItem, nextItem } = useAdjacentItems({ item });
  const {
@@ -139,6 +144,23 @@ export const Controls: React.FC<Props> = ({
  const wasPlayingRef = useRef(false);
  const lastProgressRef = useRef<number>(0);

+  const lightHapticFeedback = useHaptic("light");
+
+  useEffect(() => {
+    prefetchAllTrickplayImages();
+  }, []);
+
+  useEffect(() => {
+    if (item) {
+      progress.value = isVlc
+        ? ticksToMs(item?.UserData?.PlaybackPositionTicks)
+        : item?.UserData?.PlaybackPositionTicks || 0;
+      max.value = isVlc
+        ? ticksToMs(item.RunTimeTicks || 0)
+        : item.RunTimeTicks || 0;
+    }
+  }, [item, isVlc]);
+
  const { bitrateValue, subtitleIndex, audioIndex } = useLocalSearchParams<{
    bitrateValue: string;
    audioIndex: string;
@@ -161,8 +183,6 @@ export const Controls: React.FC<Props> = ({
    isVlc
  );

-  const lightHapticFeedback = useHaptic("light");
-
  const goToPreviousItem = useCallback(() => {
    if (!previousItem || !settings) return;

@@ -266,20 +286,19 @@ export const Controls: React.FC<Props> = ({
    [updateTimes]
  );

-  useEffect(() => {
-    if (item) {
-      progress.value = isVlc
-        ? ticksToMs(item?.UserData?.PlaybackPositionTicks)
-        : item?.UserData?.PlaybackPositionTicks || 0;
-      max.value = isVlc
-        ? ticksToMs(item.RunTimeTicks || 0)
-        : item.RunTimeTicks || 0;
-    }
-  }, [item, isVlc]);
-
-  useEffect(() => {
-    prefetchAllTrickplayImages();
+  const hideControls = useCallback(() => {
+    setShowControls(false);
+    setShowAudioSlider(false);
  }, []);
+
+  const { handleControlsInteraction } = useControlsTimeout({
+    showControls,
+    isSliding,
+    episodeView,
+    onHideControls: hideControls,
+    timeout: CONTROLS_TIMEOUT,
+  });
+
  const toggleControls = () => {
    if (showControls) {
      setShowAudioSlider(false);
@@ -300,16 +319,13 @@ export const Controls: React.FC<Props> = ({
    isSeeking.value = true;
  }, [showControls, isPlaying]);

-  const [isSliding, setIsSliding] = useState(false);
  const handleSliderComplete = useCallback(
    async (value: number) => {
      isSeeking.value = false;
      progress.value = value;
      setIsSliding(false);

-      await seek(
-        Math.max(0, Math.floor(isVlc ? value : ticksToSeconds(value)))
-      );
+      seek(Math.max(0, Math.floor(isVlc ? value : ticksToSeconds(value))));
      if (wasPlayingRef.current === true) play();
    },
    [isVlc]
@@ -339,7 +355,7 @@ export const Controls: React.FC<Props> = ({
        const newTime = isVlc
          ? Math.max(0, curr - secondsToMs(settings.rewindSkipTime))
          : Math.max(0, ticksToSeconds(curr) - settings.rewindSkipTime);
-        await seek(newTime);
+        seek(newTime);
        if (wasPlayingRef.current === true) play();
      }
    } catch (error) {
@@ -357,7 +373,7 @@ export const Controls: React.FC<Props> = ({
        const newTime = isVlc
          ? curr + secondsToMs(settings.forwardSkipTime)
          : ticksToSeconds(curr) + settings.forwardSkipTime;
-        await seek(Math.max(0, newTime));
+        seek(Math.max(0, newTime));
        if (wasPlayingRef.current === true) play();
      }
    } catch (error) {
@@ -365,81 +381,6 @@ export const Controls: React.FC<Props> = ({
    }
  }, [settings, isPlaying, isVlc]);

-  const toggleIgnoreSafeAreas = useCallback(() => {
-    setIgnoreSafeAreas((prev) => !prev);
-    lightHapticFeedback();
-  }, []);
-
-  const memoizedRenderBubble = useCallback(() => {
-    if (!trickPlayUrl || !trickplayInfo) {
-      return null;
-    }
-    const { x, y, url } = trickPlayUrl;
-    const tileWidth = 150;
-    const tileHeight = 150 / trickplayInfo.aspectRatio!;
-
-    return (
-      <View
-        style={{
-          position: "absolute",
-          left: -57,
-          bottom: 15,
-          paddingTop: 30,
-          paddingBottom: 5,
-          width: tileWidth * 1.5,
-          backgroundColor: "rgba(0, 0, 0, 0.6)",
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
-        <View
-          style={{
-            width: tileWidth,
-            height: tileHeight,
-            alignSelf: "center",
-            transform: [{ scale: 1.4 }],
-            borderRadius: 5,
-          }}
-          className="bg-neutral-800 overflow-hidden"
-        >
-          <Image
-            cachePolicy={"memory-disk"}
-            style={{
-              width: 150 * trickplayInfo?.data.TileWidth!,
-              height:
-                (150 / trickplayInfo.aspectRatio!) *
-                trickplayInfo?.data.TileHeight!,
-              transform: [
-                { translateX: -x * tileWidth },
-                { translateY: -y * tileHeight },
-              ],
-              resizeMode: "cover",
-            }}
-            source={{ uri: url }}
-            contentFit="cover"
-          />
-        </View>
-        <Text
-          style={{
-            marginTop: 30,
-            fontSize: 16,
-          }}
-        >
-          {`${time.hours > 0 ? `${time.hours}:` : ""}${
-            time.minutes < 10 ? `0${time.minutes}` : time.minutes
-          }:${time.seconds < 10 ? `0${time.seconds}` : time.seconds}`}
-        </Text>
-      </View>
-    );
-  }, [trickPlayUrl, trickplayInfo, time]);
-
-  const [EpisodeView, setEpisodeView] = useState(false);
-
-  const switchOnEpisodeMode = () => {
-    setEpisodeView(true);
-    if (isPlaying) togglePlay();
-  };
-
  const goToItem = useCallback(
    async (itemId: string) => {
      try {
@@ -486,8 +427,77 @@ export const Controls: React.FC<Props> = ({
    [settings, subtitleIndex, audioIndex]
  );

-  // Used when user changes audio through audio button on device.
-  const [showAudioSlider, setShowAudioSlider] = useState(false);
+  const toggleIgnoreSafeAreas = useCallback(() => {
+    setIgnoreSafeAreas((prev) => !prev);
+    lightHapticFeedback();
+  }, []);
+
+  const switchOnEpisodeMode = useCallback(() => {
+    setEpisodeView(true);
+    if (isPlaying) togglePlay();
+  }, [isPlaying, togglePlay]);
+
+  const memoizedRenderBubble = useCallback(() => {
+    if (!trickPlayUrl || !trickplayInfo) {
+      return null;
+    }
+    const { x, y, url } = trickPlayUrl;
+    const tileWidth = 150;
+    const tileHeight = 150 / trickplayInfo.aspectRatio!;
+
+    return (
+      <View
+        style={{
+          position: "absolute",
+          left: -62,
+          bottom: 0,
+          paddingTop: 30,
+          paddingBottom: 5,
+          width: tileWidth * 1.5,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <View
+          style={{
+            width: tileWidth,
+            height: tileHeight,
+            alignSelf: "center",
+            transform: [{ scale: 1.4 }],
+            borderRadius: 5,
+          }}
+          className="bg-neutral-800 overflow-hidden"
+        >
+          <Image
+            cachePolicy={"memory-disk"}
+            style={{
+              width: 150 * trickplayInfo?.data.TileWidth!,
+              height:
+                (150 / trickplayInfo.aspectRatio!) *
+                trickplayInfo?.data.TileHeight!,
+              transform: [
+                { translateX: -x * tileWidth },
+                { translateY: -y * tileHeight },
+              ],
+              resizeMode: "cover",
+            }}
+            source={{ uri: url }}
+            contentFit="cover"
+          />
+        </View>
+        <Text
+          style={{
+            marginTop: 30,
+            fontSize: 16,
+          }}
+        >
+          {`${time.hours > 0 ? `${time.hours}:` : ""}${
+            time.minutes < 10 ? `0${time.minutes}` : time.minutes
+          }:${time.seconds < 10 ? `0${time.seconds}` : time.seconds}`}
+        </Text>
+      </View>
+    );
+  }, [trickPlayUrl, trickplayInfo, time]);

  return (
    <ControlProvider
@@ -495,7 +505,7 @@ export const Controls: React.FC<Props> = ({
      mediaSource={mediaSource}
      isVideoLoaded={isVideoLoaded}
    >
-      {EpisodeView ? (
+      {episodeView ? (
        <EpisodeList
          item={item}
          close={() => setEpisodeView(false)}
@@ -503,23 +513,12 @@ export const Controls: React.FC<Props> = ({
        />
      ) : (
        <>
-          <Pressable
-            onPressIn={() => {
-              toggleControls();
-            }}
-            style={{
-              position: "absolute",
-              width: screenWidth,
-              height: screenHeight,
-              backgroundColor: "black",
-              left: 0,
-              right: 0,
-              top: 0,
-              bottom: 0,
-              opacity: showControls ? 0.5 : 0,
-            }}
-          ></Pressable>
-
+          <VideoTouchOverlay
+            screenWidth={screenWidth}
+            screenHeight={screenHeight}
+            showControls={showControls}
+            onToggleControls={toggleControls}
+          />
          <View
            style={[
              {
@@ -533,7 +532,7 @@ export const Controls: React.FC<Props> = ({
              },
            ]}
            pointerEvents={showControls ? "auto" : "none"}
-            className={`flex flex-row w-full p-4 `}
+            className={`flex flex-row w-full pt-2`}
          >
            <View className="mr-auto">
              <VideoProvider
@@ -557,7 +556,7 @@ export const Controls: React.FC<Props> = ({
                  onPress={() => {
                    switchOnEpisodeMode();
                  }}
-                  className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+                  className="aspect-square flex flex-col rounded-xl items-center justify-center p-2"
                >
                  <Ionicons name="list" size={24} color="white" />
                </TouchableOpacity>
@@ -565,7 +564,7 @@ export const Controls: React.FC<Props> = ({
              {previousItem && !offline && (
                <TouchableOpacity
                  onPress={goToPreviousItem}
-                  className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+                  className="aspect-square flex flex-col rounded-xl items-center justify-center p-2"
                >
                  <Ionicons name="play-skip-back" size={24} color="white" />
                </TouchableOpacity>
@@ -574,7 +573,7 @@ export const Controls: React.FC<Props> = ({
              {nextItem && !offline && (
                <TouchableOpacity
                  onPress={goToNextItem}
-                  className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+                  className="aspect-square flex flex-col rounded-xl items-center justify-center p-2"
                >
                  <Ionicons name="play-skip-forward" size={24} color="white" />
                </TouchableOpacity>
@@ -583,7 +582,7 @@ export const Controls: React.FC<Props> = ({
              {/* {mediaSource?.TranscodingUrl && ( */}
              <TouchableOpacity
                onPress={toggleIgnoreSafeAreas}
-                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+                className="aspect-square flex flex-col rounded-xl items-center justify-center p-2"
              >
                <Ionicons
                  name={ignoreSafeAreas ? "contract-outline" : "expand"}
@@ -600,7 +599,7 @@ export const Controls: React.FC<Props> = ({
                  );
                  router.back();
                }}
-                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+                className="aspect-square flex flex-col rounded-xl items-center justify-center p-2"
              >
                <Ionicons name="close" size={24} color="white" />
              </TouchableOpacity>
@@ -730,10 +729,11 @@ export const Controls: React.FC<Props> = ({
                bottom: settings?.safeAreaInControlsEnabled ? insets.bottom : 0,
              },
            ]}
-            className={`flex flex-col p-4`}
+            className={`flex flex-col px-2`}
+            onTouchStart={handleControlsInteraction}
          >
            <View
-              className="shrink flex flex-col justify-center h-full mb-2"
+              className="shrink flex flex-col justify-center h-full"
              style={{
                flexDirection: "row",
                justifyContent: "space-between",
@@ -747,10 +747,12 @@ export const Controls: React.FC<Props> = ({
                }}
                pointerEvents={showControls ? "box-none" : "none"}
              >
-                <Text className="font-bold">{item?.Name}</Text>
                {item?.Type === "Episode" && (
-                  <Text className="opacity-50">{item.SeriesName}</Text>
+                  <Text className="opacity-50">
+                    {`${item.SeriesName} - ${item.SeasonName} Episode ${item.IndexNumber}`}
+                  </Text>
                )}
+                <Text className="font-bold text-xl">{item?.Name}</Text>
                {item?.Type === "Movie" && (
                  <Text className="text-xs opacity-50">
                    {item?.ProductionYear}
@@ -785,7 +787,7 @@ export const Controls: React.FC<Props> = ({
              </View>
            </View>
            <View
-              className={`flex flex-col-reverse py-4 pb-1 px-4 rounded-lg items-center  bg-neutral-800`}
+              className={`flex flex-col-reverse rounded-lg items-center my-2`}
              style={{
                opacity: showControls ? 1 : 0,
              }}
@@ -801,19 +803,7 @@ export const Controls: React.FC<Props> = ({
                    bubbleTextColor: "#666",
                    heartbeatColor: "#999",
                  }}
-                  renderThumb={() => (
-                    <View
-                      style={{
-                        width: 18,
-                        height: 18,
-                        left: -2,
-                        borderRadius: 10,
-                        backgroundColor: "#fff",
-                        justifyContent: "center",
-                        alignItems: "center",
-                      }}
-                    />
-                  )}
+                  renderThumb={() => null}
                  cache={cacheProgress}
                  onSlidingStart={handleSliderStart}
                  onSlidingComplete={handleSliderComplete}
@@ -828,7 +818,7 @@ export const Controls: React.FC<Props> = ({
                  minimumValue={min}
                  maximumValue={max}
                />
-                <View className="flex flex-row items-center justify-between mt-0.5">
+                <View className="flex flex-row items-center justify-between mt-2">
                  <Text className="text-[12px] text-neutral-400">
                    {formatTimeString(currentTime, isVlc ? "ms" : "s")}
                  </Text>
--- a/components/video-player/controls/VideoTouchOverlay.tsx
+++ b/components/video-player/controls/VideoTouchOverlay.tsx
@@ -0,0 +1,38 @@
+import { Pressable } from "react-native";
+import { useTapDetection } from "./useTapDetection";
+
+interface Props {
+  screenWidth: number;
+  screenHeight: number;
+  showControls: boolean;
+  onToggleControls: () => void;
+}
+
+export const VideoTouchOverlay = ({
+  screenWidth,
+  screenHeight,
+  showControls,
+  onToggleControls,
+}: Props) => {
+  const { handleTouchStart, handleTouchEnd } = useTapDetection({
+    onValidTap: onToggleControls,
+  });
+
+  return (
+    <Pressable
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
+      style={{
+        position: "absolute",
+        width: screenWidth,
+        height: screenHeight,
+        backgroundColor: "black",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        opacity: showControls ? 0.75 : 0,
+      }}
+    />
+  );
+};
--- a/components/video-player/controls/dropdown/DropdownViewDirect.tsx
+++ b/components/video-player/controls/dropdown/DropdownViewDirect.tsx
@@ -74,7 +74,7 @@ const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
-        <TouchableOpacity className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2">
+        <TouchableOpacity className="aspect-square flex flex-col rounded-xl items-center justify-center p-2">
          <Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
        </TouchableOpacity>
      </DropdownMenu.Trigger>
--- a/components/video-player/controls/dropdown/DropdownViewTranscoding.tsx
+++ b/components/video-player/controls/dropdown/DropdownViewTranscoding.tsx
@@ -121,7 +121,7 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
    <View>
      <DropdownMenu.Root>
        <DropdownMenu.Trigger>
-          <TouchableOpacity className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2">
+          <TouchableOpacity className="aspect-square flex flex-col rounded-xl items-center justify-center p-2">
            <Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
          </TouchableOpacity>
        </DropdownMenu.Trigger>
--- a/components/video-player/controls/useControlsTimeout.ts
+++ b/components/video-player/controls/useControlsTimeout.ts
@@ -0,0 +1,56 @@
+import { useEffect, useRef } from "react";
+
+interface UseControlsTimeoutProps {
+  showControls: boolean;
+  isSliding: boolean;
+  episodeView: boolean;
+  onHideControls: () => void;
+  timeout?: number;
+}
+
+export const useControlsTimeout = ({
+  showControls,
+  isSliding,
+  episodeView,
+  onHideControls,
+  timeout = 4000,
+}: UseControlsTimeoutProps) => {
+  const controlsTimeoutRef = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    const resetControlsTimeout = () => {
+      if (controlsTimeoutRef.current) {
+        clearTimeout(controlsTimeoutRef.current);
+      }
+
+      if (showControls && !isSliding && !episodeView) {
+        controlsTimeoutRef.current = setTimeout(() => {
+          onHideControls();
+        }, timeout);
+      }
+    };
+
+    resetControlsTimeout();
+
+    return () => {
+      if (controlsTimeoutRef.current) {
+        clearTimeout(controlsTimeoutRef.current);
+      }
+    };
+  }, [showControls, isSliding, episodeView, timeout, onHideControls]);
+
+  const handleControlsInteraction = () => {
+    if (showControls) {
+      if (controlsTimeoutRef.current) {
+        clearTimeout(controlsTimeoutRef.current);
+      }
+      controlsTimeoutRef.current = setTimeout(() => {
+        onHideControls();
+      }, timeout);
+    }
+  };
+
+  return {
+    handleControlsInteraction,
+  };
+};
--- a/components/video-player/controls/useTapDetection.tsx
+++ b/components/video-player/controls/useTapDetection.tsx
@@ -0,0 +1,48 @@
+import { useRef } from "react";
+import { GestureResponderEvent } from "react-native";
+
+interface TapDetectionOptions {
+  maxDuration?: number;
+  maxDistance?: number;
+  onValidTap?: () => void;
+}
+
+export const useTapDetection = ({
+  maxDuration = 200,
+  maxDistance = 10,
+  onValidTap,
+}: TapDetectionOptions = {}) => {
+  const touchStartTime = useRef(0);
+  const touchStartPosition = useRef({ x: 0, y: 0 });
+
+  const handleTouchStart = (event: GestureResponderEvent) => {
+    touchStartTime.current = Date.now();
+    touchStartPosition.current = {
+      x: event.nativeEvent.pageX,
+      y: event.nativeEvent.pageY,
+    };
+  };
+
+  const handleTouchEnd = (event: GestureResponderEvent) => {
+    const touchEndTime = Date.now();
+    const touchEndPosition = {
+      x: event.nativeEvent.pageX,
+      y: event.nativeEvent.pageY,
+    };
+
+    const touchDuration = touchEndTime - touchStartTime.current;
+    const touchDistance = Math.sqrt(
+      Math.pow(touchEndPosition.x - touchStartPosition.current.x, 2) +
+        Math.pow(touchEndPosition.y - touchStartPosition.current.y, 2)
+    );
+
+    if (touchDuration < maxDuration && touchDistance < maxDistance) {
+      onValidTap?.();
+    }
+  };
+
+  return {
+    handleTouchStart,
+    handleTouchEnd,
+  };
+};
--- a/hooks/useJellyfinDiscovery.tsx
+++ b/hooks/useJellyfinDiscovery.tsx
@@ -0,0 +1,106 @@
+import { useState, useCallback } from "react";
+import dgram from "react-native-udp";
+
+const JELLYFIN_DISCOVERY_PORT = 7359;
+const DISCOVERY_MESSAGE = "Who is JellyfinServer?";
+
+interface ServerInfo {
+  address: string;
+  port: number;
+  serverId?: string;
+  serverName?: string;
+}
+
+export const useJellyfinDiscovery = () => {
+  const [servers, setServers] = useState<ServerInfo[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+
+  const startDiscovery = useCallback(() => {
+    setIsSearching(true);
+    setServers([]);
+
+    const discoveredServers = new Set<string>();
+    let discoveryTimeout: NodeJS.Timeout;
+
+    const socket = dgram.createSocket({
+      type: "udp4",
+      reusePort: true,
+      debug: __DEV__,
+    });
+
+    socket.on("error", (err) => {
+      console.error("Socket error:", err);
+      socket.close();
+      setIsSearching(false);
+    });
+
+    socket.bind(0, () => {
+      console.log("UDP socket bound successfully");
+
+      try {
+        socket.setBroadcast(true);
+        const messageBuffer = new TextEncoder().encode(DISCOVERY_MESSAGE);
+
+        socket.send(
+          messageBuffer,
+          0,
+          messageBuffer.length,
+          JELLYFIN_DISCOVERY_PORT,
+          "255.255.255.255",
+          (err) => {
+            if (err) {
+              console.error("Failed to send discovery message:", err);
+              return;
+            }
+            console.log("Discovery message sent successfully");
+          }
+        );
+
+        discoveryTimeout = setTimeout(() => {
+          setIsSearching(false);
+          socket.close();
+        }, 5000);
+      } catch (error) {
+        console.error("Error during discovery:", error);
+        setIsSearching(false);
+      }
+    });
+
+    socket.on("message", (msg, rinfo: any) => {
+      if (discoveredServers.has(rinfo.address)) {
+        return;
+      }
+
+      try {
+        const response = new TextDecoder().decode(msg);
+        const serverInfo = JSON.parse(response);
+        discoveredServers.add(rinfo.address);
+
+        const newServer: ServerInfo = {
+          address: `http://${rinfo.address}:${serverInfo.Port || 8096}`,
+          port: serverInfo.Port || 8096,
+          serverId: serverInfo.Id,
+          serverName: serverInfo.Name,
+        };
+
+        setServers((prev) => [...prev, newServer]);
+      } catch (error) {
+        console.error("Error parsing server response:", error);
+      }
+    });
+
+    return () => {
+      clearTimeout(discoveryTimeout);
+      if (isSearching) {
+        setIsSearching(false);
+      }
+      socket.close();
+    };
+  }, []);
+
+  return {
+    servers,
+    isSearching,
+    startDiscovery,
+  };
+};
--- a/package.json
+++ b/package.json
@@ -18,14 +18,15 @@
    "preset": "jest-expo"
  },
  "dependencies": {
-    "@bottom-tabs/react-navigation": "^0.7.1",
+    "@bottom-tabs/react-navigation": "0.7.8",
+    "react-native-bottom-tabs": "0.7.8",
    "@config-plugins/ffmpeg-kit-react-native": "^8.0.0",
    "@expo/react-native-action-sheet": "^4.1.0",
    "@expo/vector-icons": "^14.0.4",
    "@futurejj/react-native-visibility-sensor": "^1.3.5",
    "@gorhom/bottom-sheet": "^4.6.4",
    "@jellyfin/sdk": "^0.11.0",
-    "@kesha-antonov/react-native-background-downloader": "3.1.2",
+    "@kesha-antonov/react-native-background-downloader": "3.2.6",
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-native-community/netinfo": "11.3.1",
    "@react-native-menu/menu": "^1.1.6",
@@ -73,7 +74,6 @@
    "react-dom": "18.2.0",
    "react-native": "0.74.5",
    "react-native-awesome-slider": "^2.5.6",
-    "react-native-bottom-tabs": "0.7.8",
    "react-native-circular-progress": "^1.4.1",
    "react-native-compressor": "^1.9.0",
    "react-native-country-flag": "^2.0.2",
@@ -94,6 +94,7 @@
    "react-native-screens": "3.31.1",
    "react-native-svg": "15.2.0",
    "react-native-tab-view": "^3.5.2",
+    "react-native-udp": "^4.1.7",
    "react-native-uitextview": "^1.4.0",
    "react-native-url-polyfill": "^2.0.0",
    "react-native-uuid": "^2.0.2",
--- a/providers/DownloadProvider.tsx
+++ b/providers/DownloadProvider.tsx
@@ -1,4 +1,4 @@
-import { useSettings } from "@/utils/atoms/settings";
+import {DownloadMethod, useSettings} from "@/utils/atoms/settings";
 import { getOrSetDeviceId } from "@/utils/device";
 import { useLog, writeToLog } from "@/utils/log";
 import {
@@ -106,7 +106,7 @@ function useDownloadProvider() {
      const url = settings?.optimizedVersionsServerUrl;

      if (
-        settings?.downloadMethod !== "optimized" ||
+        settings?.downloadMethod !== DownloadMethod.Optimized ||
        !url ||
        !deviceId ||
        !authHeader
@@ -166,7 +166,7 @@ function useDownloadProvider() {
    },
    staleTime: 0,
    refetchInterval: 2000,
-    enabled: settings?.downloadMethod === "optimized",
+    enabled: settings?.downloadMethod === DownloadMethod.Optimized,
  });

  useEffect(() => {
--- a/providers/JellyfinProvider.tsx
+++ b/providers/JellyfinProvider.tsx
@@ -72,7 +72,13 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
  const [user, setUser] = useAtom(userAtom);
  const [isPolling, setIsPolling] = useState<boolean>(false);
  const [secret, setSecret] = useState<string | null>(null);
-  const [settings, updateSettings, pluginSettings, setPluginSettings, refreshStreamyfinPluginSettings] = useSettings();
+  const [
+    settings,
+    updateSettings,
+    pluginSettings,
+    setPluginSettings,
+    refreshStreamyfinPluginSettings,
+  ] = useSettings();
  const { clearAllJellyseerData, setJellyseerrUser } = useJellyseerr();

  useQuery({
@@ -233,12 +239,14 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({

          const recentPluginSettings = await refreshStreamyfinPluginSettings();
          if (recentPluginSettings?.jellyseerrServerUrl?.value) {
-            const jellyseerrApi = new JellyseerrApi(recentPluginSettings.jellyseerrServerUrl.value);
+            const jellyseerrApi = new JellyseerrApi(
+              recentPluginSettings.jellyseerrServerUrl.value
+            );
            await jellyseerrApi.test().then((result) => {
              if (result.isValid && result.requiresPass) {
                jellyseerrApi.login(username, password).then(setJellyseerrUser);
              }
-            })
+            });
          }
        }
      } catch (error) {
--- a/providers/PlaySettingsProvider.tsx
+++ b/providers/PlaySettingsProvider.tsx
@@ -38,7 +38,6 @@ type PlaySettingsContextType = {
  setPlayUrl: React.Dispatch<React.SetStateAction<string | null>>;
  playSessionId?: string | null;
  setOfflineSettings: (data: PlaybackType) => void;
-  setMusicPlaySettings: (item: BaseItemDto, url: string) => void;
 };

 const PlaySettingsContext = createContext<PlaySettingsContextType | undefined>(
@@ -61,13 +60,6 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
    _setPlaySettings(data);
  }, []);

-  const setMusicPlaySettings = (item: BaseItemDto, url: string) => {
-    setPlaySettings({
-      item: item,
-    });
-    setPlayUrl(url);
-  };
-
  const setPlaySettings = useCallback(
    async (
      dataOrUpdater:
@@ -147,7 +139,6 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
        setPlaySettings,
        playUrl,
        setPlayUrl,
-        setMusicPlaySettings,
        setOfflineSettings,
        playSessionId,
        mediaSource,
--- a/utils/atoms/settings.ts
+++ b/utils/atoms/settings.ts
@@ -1,5 +1,5 @@
 import { atom, useAtom } from "jotai";
-import { useCallback, useEffect } from "react";
+import {useCallback, useEffect, useMemo} from "react";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { storage } from "../mmkv";
 import { Platform } from "react-native";
@@ -12,7 +12,7 @@ import {apiAtom} from "@/providers/JellyfinProvider";
 import {getPluginsApi} from "@jellyfin/sdk/lib/utils/api";
 import {writeErrorLog} from "@/utils/log";

-const STREAMYFIN_PLUGIN_ID = "1e9e5d38-6e67-4615-8719-e98a5c34f004"
+const STREAMYFIN_PLUGIN_ID = "1e9e5d386e6746158719e98a5c34f004"
 const STREAMYFIN_PLUGIN_SETTINGS = "STREAMYFIN_PLUGIN_SETTINGS"

 export type DownloadQuality = "original" | "high" | "low";
@@ -66,6 +66,11 @@ export type DefaultLanguageOption = {
  label: string;
 };

+export enum DownloadMethod {
+  Remux = "remux",
+  Optimized = "optimized"
+}
+
 export type Settings = {
  autoRotate?: boolean;
  forceLandscapeInVideoPlayer?: boolean;
@@ -88,7 +93,7 @@ export type Settings = {
  forwardSkipTime: number;
  rewindSkipTime: number;
  optimizedVersionsServerUrl?: string | null;
-  downloadMethod: "optimized" | "remux";
+  downloadMethod: DownloadMethod;
  autoDownload: boolean;
  showCustomMenuLinks: boolean;
  disableHapticFeedback: boolean;
@@ -100,7 +105,7 @@ export type Settings = {
 };

 export interface Lockable<T> {
-  lockable: boolean;
+  locked: boolean;
  value: T
 }

@@ -138,7 +143,7 @@ const loadSettings = (): Settings => {
    forwardSkipTime: 30,
    rewindSkipTime: 10,
    optimizedVersionsServerUrl: null,
-    downloadMethod: "remux",
+    downloadMethod: DownloadMethod.Remux,
    autoDownload: false,
    showCustomMenuLinks: false,
    disableHapticFeedback: false,
@@ -171,15 +176,15 @@ export const pluginSettingsAtom = atom(storage.get<PluginLockableSettings>(STREA

 export const useSettings = () => {
  const [api] = useAtom(apiAtom);
-  const [settings, setSettings] = useAtom(settingsAtom);
+  const [_settings, setSettings] = useAtom(settingsAtom);
  const [pluginSettings, _setPluginSettings] = useAtom(pluginSettingsAtom);

  useEffect(() => {
-    if (settings === null) {
+    if (_settings === null) {
      const loadedSettings = loadSettings();
      setSettings(loadedSettings);
    }
-  }, [settings, setSettings]);
+  }, [_settings, setSettings]);

  const setPluginSettings = useCallback((settings: PluginLockableSettings | undefined) => {
    storage.setAny(STREAMYFIN_PLUGIN_SETTINGS, settings)
@@ -217,6 +222,27 @@ export const useSettings = () => {
    [api]
  )

+  // We do not want to save over users pre-existing settings in case admin ever removes/unlocks a setting.
+  // If admin sets locked to false but provides a value,
+  //  use user settings first and fallback on admin setting if required.
+  const settings: Settings = useMemo(() => {
+    const overrideSettings = Object.entries(pluginSettings || {})
+      .reduce((acc, [key, setting]) => {
+        if (setting) {
+          const {value, locked} = setting
+          acc = Object.assign(acc, {
+            [key]: locked ? value : _settings?.[key as keyof Settings] ?? value
+          })
+        }
+        return acc
+      }, {} as Settings)
+
+    return {
+      ..._settings,
+      ...overrideSettings
+    }
+  }, [_settings, setSettings, pluginSettings, _setPluginSettings, setPluginSettings])
+
  const updateSettings = (update: Partial<Settings>) => {
    if (settings) {
      const newSettings = { ...settings, ...update };
--- a/utils/collectionTypeToItemType.ts
+++ b/utils/collectionTypeToItemType.ts
@@ -10,8 +10,6 @@ import {
 *  readonly Unknown: "unknown";
    readonly Movies: "movies";
    readonly Tvshows: "tvshows";
-    readonly Music: "music";
-    readonly Musicvideos: "musicvideos";
    readonly Trailers: "trailers";
    readonly Homevideos: "homevideos";
    readonly Boxsets: "boxsets";
@@ -33,8 +31,6 @@ export const colletionTypeToItemType = (
      return BaseItemKind.Series;
    case CollectionType.Homevideos:
      return BaseItemKind.Video;
-    case CollectionType.Musicvideos:
-      return BaseItemKind.MusicVideo;
    case CollectionType.Books:
      return BaseItemKind.Book;
    case CollectionType.Playlists:
Author	SHA1	Message	Date
Fredrik Burmester	7c77c70024	chore: remove everything related to music	2025-01-12 13:40:01 +01:00
Fredrik Burmester	2495a318eb	Merge pull request #394 from Ryan0204/enhancement/autohidecontrol enhancement: auto hide control after 5 seconds	2025-01-12 10:16:55 +01:00
Fredrik Burmester	7832ea4d0a	chore: deps	2025-01-12 10:10:18 +01:00
Fredrik Burmester	4a0a51ef1d	chore: refactor	2025-01-12 10:07:49 +01:00
Fredrik Burmester	8cc551d906	Merge pull request #416 from streamyfin/feat/server-discovery feat: server discovery during login	2025-01-12 09:37:33 +01:00
Fredrik Burmester	c8da365a00	fix: issues listed in pr	2025-01-12 09:36:23 +01:00
Fredrik Burmester	74b7cbc530	Merge pull request #417 from whoopsi-daisy/patch-1 Update README.md	2025-01-12 09:33:38 +01:00
𝐂𝐡𝐫𝐢𝐬	a14063a736	Update README.md Adjusted the Jellyseerr screenshot height to match the others and corrected a typo, along with rephrasing a sentence for clarity	2025-01-12 00:52:17 +08:00
Fredrik Burmester	a3307a90a3	feat: server discovery during login	2025-01-11 11:21:36 +01:00
Fredrik Burmester	a2145fd7e8	chore: update deps	2025-01-11 10:20:20 +01:00
Fredrik Burmester	cab5e4d980	chore: rename var	2025-01-11 10:10:00 +01:00
Fredrik Burmester	ab603e6997	feat: add centralised plugin info	2025-01-11 10:09:53 +01:00
ryan0204	957348fe19	prevent opening control when user swipe on screen	2025-01-11 16:41:41 +08:00
herrrta	444bd040b0	Merge pull request #402 from streamyfin/feat/401 Streamyfin Plugin App Management solution	2025-01-11 00:20:35 -05:00
herrrta	d0ae63235d	feat: [StreamyfinPlugin] Library Options settings	2025-01-11 00:16:26 -05:00
herrrta	1727125ea7	feat: [StreamyfinPlugin] Popular Plugin settings	2025-01-11 00:16:25 -05:00
herrrta	dc498d62d8	feat: [StreamyfinPlugin] Other settings	2025-01-11 00:16:25 -05:00
herrrta	455bf08213	feat: [StreamyfinPlugin] Subtitle Toggles settings - Used stepper & dropdown components to simplify page	2025-01-11 00:16:20 -05:00
herrrta	0f974ef2a3	feat: [StreamyfinPlugin] Audio Toggles settings	2025-01-10 23:26:53 -05:00
herrrta	2d9aaccfe0	feat: [StreamyfinPlugin] Media Toggles settings	2025-01-10 23:26:44 -05:00
herrrta	2c6823eb53	feat: [StreamyfinPlugin] Jellyseerr, Search Engine, & Download settings - Added DisabledSetting.tsx component - Added DownloadMethod enum - cleanup	2025-01-10 23:26:32 -05:00
herrrta	9dfcc01f17	chore	2025-01-10 20:39:32 -05:00
ryan0204	0ebacd4bd3	Auto hide control after 5 seconds	2025-01-08 11:29:49 +08:00