Merge branch 'develop' into fix/subtitle-track-selection

Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>

.github/copilot-instructions.md

@@ -42,7 +42,7 @@ and provides seamless media streaming with offline capabilities and Chromecast s
 
 ## Coding Standards
 
-- Use TypeScript for ALL files (no .js files)
+- Use TypeScript for ALL files (no .js files). Tooling-required exceptions: `babel.config.js`, `metro.config.js`, `react-native.config.js`, `tailwind.config.js` (their loaders cannot parse TypeScript)
 - Use descriptive English names for variables, functions, and components
 - Prefer functional React components with hooks
 - Use Jotai atoms for global state management

.github/workflows/build-apps.yml

@@ -11,7 +11,7 @@ on:
   push:
     branches: [develop, master]
 
-# Exposed to `expo prebuild` (app.config.js → extra.build) so Settings can show the
+# Exposed to `expo prebuild` (app.config.ts → extra.build) so Settings can show the
 # branch + commit + Actions run a CI build was made from. EAS cloud builds use
 # EAS_BUILD_* instead. The run number maps a sideloaded build back to its Actions
 # run (artifacts + logs) without needing Expo access.

.github/workflows/detect-duplicate.yml

@@ -30,7 +30,7 @@ jobs:
           bun-version: "1.3.14"
 
       - name: 🔍 Detect duplicate issues
-        run: bun scripts/detect-duplicate-issue.mjs
+        run: bun scripts/detect-duplicate-issue.ts
         env:
           GH_TOKEN: ${{ github.token }}
           GITHUB_REPOSITORY: ${{ github.repository }}

.gitignore

@@ -12,10 +12,6 @@ web-build/
 # Platform-specific Build Directories
 /ios
 /android
-/iostv
-/iosmobile
-/androidmobile
-/androidtv
 
 # Gradle caches (top-level + per-module native projects)
 **/.gradle/

CLAUDE.md

@@ -152,7 +152,7 @@ import { apiAtom } from "@/providers/JellyfinProvider";
 
 ## Coding Standards
 
-- Use TypeScript for all files (no .js)
+- Use TypeScript for all files (no .js). Tooling-required exceptions: `babel.config.js`, `metro.config.js`, `react-native.config.js`, `tailwind.config.js` (their loaders cannot parse TypeScript)
 - Use functional React components with hooks
 - Use Jotai atoms for global state, React Query for server state
 - Follow BiomeJS formatting rules (2-space indent, semicolons, LF line endings)

app.config.ts

@@ -1,9 +1,13 @@
-const { execFileSync } = require("node:child_process");
+// Registers the tsx require hook so the TypeScript config plugins referenced
+// from app.json ("./plugins/*.ts") can be loaded by Node during config evaluation.
+import "tsx/cjs";
+import { execFileSync } from "node:child_process";
+import type { ConfigContext, ExpoConfig } from "expo/config";
 
 // Build metadata, injected into `extra.build` and read at runtime via
 // expo-constants (see utils/version.ts). Sources in priority order:
 // EAS cloud build → GitHub Actions → explicit EXPO_PUBLIC_* → local git → null.
-const git = (args) => {
+const git = (args: string[]): string | null => {
   try {
     return execFileSync("git", args, { stdio: ["ignore", "pipe", "ignore"] })
       .toString()
@@ -42,16 +46,16 @@ const buildMeta = {
   builtAt: new Date().toISOString(),
 };
 
-module.exports = ({ config }) => {
+export default ({ config }: ConfigContext): ExpoConfig => {
   if (process.env.EXPO_TV !== "1") {
-    config.plugins.push("expo-background-task");
+    config.plugins?.push("expo-background-task");
 
-    config.plugins.push([
+    config.plugins?.push([
       "react-native-google-cast",
       { useDefaultExpandedMediaControls: true },
     ]);
 
-    config.plugins.push([
+    config.plugins?.push([
       "expo-camera",
       {
         cameraPermission:
@@ -61,7 +65,7 @@ module.exports = ({ config }) => {
   }
 
   // Only override googleServicesFile if env var is set
-  const androidConfig = {};
+  const androidConfig: { googleServicesFile?: string } = {};
   if (process.env.GOOGLE_SERVICES_JSON) {
     androidConfig.googleServicesFile = process.env.GOOGLE_SERVICES_JSON;
   }
@@ -71,5 +75,5 @@ module.exports = ({ config }) => {
   return {
     ...(Object.keys(androidConfig).length > 0 && { android: androidConfig }),
     ...config,
-  };
+  } as ExpoConfig;
 };

app.json

@@ -71,8 +71,8 @@
       ],
       "expo-router",
       "expo-font",
-      "./plugins/withExcludeMedia3Dash.js",
+      "./plugins/withExcludeMedia3Dash.ts",
-      "./plugins/withTVUserManagement.js",
+      "./plugins/withTVUserManagement.ts",
       [
         "expo-build-properties",
         {
@@ -134,17 +134,17 @@
         }
       ],
       "expo-web-browser",
-      ["./plugins/with-runtime-framework-headers.js"],
+      ["./plugins/with-runtime-framework-headers.ts"],
-      ["./plugins/withChangeNativeAndroidTextToWhite.js"],
+      ["./plugins/withChangeNativeAndroidTextToWhite.ts"],
-      ["./plugins/withAndroidAlertColors.js"],
+      ["./plugins/withAndroidAlertColors.ts"],
-      ["./plugins/withAndroidManifest.js"],
+      ["./plugins/withAndroidManifest.ts"],
-      ["./plugins/withTrustLocalCerts.js"],
+      ["./plugins/withTrustLocalCerts.ts"],
-      ["./plugins/withGradleProperties.js"],
+      ["./plugins/withGradleProperties.ts"],
-      ["./plugins/withTVOSAppIcon.js"],
+      ["./plugins/withTVOSAppIcon.ts"],
-      ["./plugins/withTVOSTopShelf.js"],
+      ["./plugins/withTVOSTopShelf.ts"],
-      ["./plugins/withTVXcodeEnv.js"],
+      ["./plugins/withTVXcodeEnv.ts"],
       [
-        "./plugins/withGitPod.js",
+        "./plugins/withGitPod.ts",
         {
           "podName": "MPVKit",
           "podspecUrl": "https://raw.githubusercontent.com/mpv-ios/MPVKit/0.41.0-av/MPVKit.podspec"

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

@@ -73,6 +73,7 @@ export default function IndexLayout() {
           headerLeft: () => (
             <Pressable
               onPress={() => _router.back()}
+              className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
@@ -157,6 +158,7 @@ export default function IndexLayout() {
           headerLeft: () => (
             <Pressable
               onPress={() => _router.back()}
+              className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />

app/(auth)/(tabs)/(home)/settings.tv.tsx

@@ -645,7 +645,7 @@ export default function SettingsTV() {
             formatValue={(v) => `${v.toFixed(1)}x`}
           />
           <TVSettingsStepper
-            label={t("home.settings.subtitles.mpv_subtitle_margin_y")}
+            label='Vertical Margin'
             value={settings.mpvSubtitleMarginY ?? 0}
             onDecrease={() => {
               const newValue = Math.max(
@@ -663,11 +663,11 @@ export default function SettingsTV() {
             }}
           />
           <TVSettingsOptionButton
-            label={t("home.settings.subtitles.mpv_subtitle_align_x")}
+            label='Horizontal Alignment'
             value={alignXLabel}
             onPress={() =>
               showOptions({
-                title: t("home.settings.subtitles.mpv_subtitle_align_x"),
+                title: "Horizontal Alignment",
                 options: alignXOptions,
                 onSelect: (value) =>
                   updateSettings({
@@ -677,11 +677,11 @@ export default function SettingsTV() {
             }
           />
           <TVSettingsOptionButton
-            label={t("home.settings.subtitles.mpv_subtitle_align_y")}
+            label='Vertical Alignment'
             value={alignYLabel}
             onPress={() =>
               showOptions({
-                title: t("home.settings.subtitles.mpv_subtitle_align_y"),
+                title: "Vertical Alignment",
                 options: alignYOptions,
                 onSelect: (value) =>
                   updateSettings({
@@ -854,13 +854,6 @@ export default function SettingsTV() {
               updateSettings({ mergeNextUpAndContinueWatching: value })
             }
           />
-          <TVSettingsToggle
-            label={t("home.settings.appearance.use_episode_images_next_up")}
-            value={settings.useEpisodeImagesForNextUp}
-            onToggle={(value) =>
-              updateSettings({ useEpisodeImagesForNextUp: value })
-            }
-          />
           <TVSettingsToggle
             label={t("home.settings.appearance.show_home_backdrop")}
             value={settings.showHomeBackdrop}

app/(auth)/(tabs)/(home)/settings/appearance/hide-libraries/page.tsx

@@ -2,9 +2,8 @@ import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { useTranslation } from "react-i18next";
-import { ScrollView, View } from "react-native";
+import { ScrollView, Switch, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { ListGroup } from "@/components/list/ListGroup";
@@ -51,12 +50,12 @@ export default function AppearanceHideLibrariesPage() {
     >
       <DisabledSetting
         disabled={pluginSettings?.hiddenLibraries?.locked === true}
-        className='px-4 pt-4'
+        className='px-4'
       >
         <ListGroup title={t("home.settings.other.hide_libraries")}>
           {data?.map((view) => (
             <ListItem key={view.Id} title={view.Name} onPress={() => {}}>
-              <SettingSwitch
+              <Switch
                 value={settings.hiddenLibraries?.includes(view.Id!) || false}
                 onValueChange={(value) => {
                   updateSettings({
@@ -72,7 +71,7 @@ export default function AppearanceHideLibrariesPage() {
           ))}
         </ListGroup>
         <Text className='px-4 text-xs text-neutral-500 mt-1'>
-          {t("home.settings.other.select_libraries_you_want_to_hide")}
+          {t("home.settings.other.select_liraries_you_want_to_hide")}
         </Text>
       </DisabledSetting>
     </ScrollView>

app/(auth)/(tabs)/(home)/settings/hide-libraries/page.tsx

@@ -2,8 +2,7 @@ import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { useTranslation } from "react-i18next";
-import { View } from "react-native";
+import { Switch, View } from "react-native";
-import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { ListGroup } from "@/components/list/ListGroup";
@@ -47,7 +46,7 @@ export default function HideLibrariesPage() {
       <ListGroup>
         {data?.map((view) => (
           <ListItem key={view.Id} title={view.Name} onPress={() => {}}>
-            <SettingSwitch
+            <Switch
               value={settings.hiddenLibraries?.includes(view.Id!) || false}
               onValueChange={(value) => {
                 updateSettings({
@@ -61,7 +60,7 @@ export default function HideLibrariesPage() {
         ))}
       </ListGroup>
       <Text className='px-4 text-xs text-neutral-500 mt-1'>
-        {t("home.settings.other.select_libraries_you_want_to_hide")}
+        {t("home.settings.other.select_liraries_you_want_to_hide")}
       </Text>
     </DisabledSetting>
   );

app/(auth)/(tabs)/(home)/settings/logs/page.tsx

@@ -1,6 +1,4 @@
-import { Ionicons } from "@expo/vector-icons";
 import { File, Paths } from "expo-file-system";
-import { requireOptionalNativeModule } from "expo-modules-core";
 import { useNavigation } from "expo-router";
 import type * as SharingType from "expo-sharing";
 import { useCallback, useEffect, useId, useMemo, useState } from "react";
@@ -8,7 +6,6 @@ import { useTranslation } from "react-i18next";
 import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import Collapsible from "react-native-collapsible";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { Loader } from "@/components/Loader";
@@ -75,25 +72,6 @@ export default function Page() {
     }
   }, [filteredLogs, Sharing]);
 
-  const copyLog = useCallback(
-    async (log: NonNullable<typeof logs>[number]) => {
-      // Skip on builds that don't ship the expo-clipboard native module
-      // (probe returns null instead of throwing); same guard as Quick Connect.
-      if (!requireOptionalNativeModule("ExpoClipboard")) return;
-      const Clipboard = await import("expo-clipboard");
-      const text = [
-        `[${log.level}] ${new Date(log.timestamp).toLocaleString()}`,
-        log.message,
-        log.data ? JSON.stringify(log.data, null, 2) : null,
-      ]
-        .filter(Boolean)
-        .join("\n");
-      await Clipboard.setStringAsync(text);
-      toast.success(t("home.settings.logs.copied"));
-    },
-    [logs, t],
-  );
-
   useEffect(() => {
     if (Platform.isTV) return;
 
@@ -110,15 +88,8 @@ export default function Page() {
   }, [share, loading]);
 
   return (
-    <ScrollView
+    <View className='flex-1'>
-      // Like the sibling settings pages, let iOS auto-inset the content below the
+      <View className='flex flex-row justify-end py-2 px-4 space-x-2'>
-      // transparent header (no manual header-height math). The filter bar is a
-      // sticky header so it stays pinned just under the header while logs scroll.
-      contentInsetAdjustmentBehavior='automatic'
-      stickyHeaderIndices={[0]}
-      contentContainerStyle={{ paddingBottom: insets.bottom }}
-    >
-      <View className='flex flex-row justify-end py-2 px-4 space-x-2 bg-black'>
         <FilterButton
           id={orderFilterId}
           queryKey='log'
@@ -141,7 +112,11 @@ export default function Page() {
           multiple={true}
         />
       </View>
-      <View className='flex flex-col space-y-2 px-4'>
+      <ScrollView
+        className='pb-4 px-4'
+        contentContainerStyle={{ paddingBottom: insets.bottom }}
+      >
+        <View className='flex flex-col space-y-2'>
           {filteredLogs?.map((log, index) => (
             <View className='bg-neutral-900 rounded-xl p-3' key={index}>
               <TouchableOpacity
@@ -168,41 +143,26 @@ export default function Page() {
                     {new Date(log.timestamp).toLocaleString()}
                   </Text>
                 </View>
-              <Text className='text-xs'>{log.message}</Text>
+                <Text selectable className='text-xs'>
-              {/* Keep the whole collapsed row tappable: the hint lives inside
+                  {log.message}
-                  the toggle so tapping it expands too. */}
+                </Text>
-              {log.data && !state[log.timestamp] && (
+              </TouchableOpacity>
+
+              {log.data && (
+                <>
+                  {!state[log.timestamp] && (
                     <Text className='text-xs mt-0.5'>
                       {t("home.settings.logs.click_for_more_info")}
                     </Text>
                   )}
-            </TouchableOpacity>
-
-            {log.data && (
                   <Collapsible collapsed={!state[log.timestamp]}>
                     <View className='mt-2 flex flex-col space-y-2'>
-                  <ScrollView
+                      <ScrollView className='rounded-xl' style={codeBlockStyle}>
-                    className='rounded-xl'
+                        <Text>{JSON.stringify(log.data, null, 2)}</Text>
-                    style={codeBlockStyle}
-                    nestedScrollEnabled
-                  >
-                    {/* Only the raw payload is selectable (per request); the
-                        header/message stay tap-to-toggle. */}
-                    <Text selectable>{JSON.stringify(log.data, null, 2)}</Text>
                       </ScrollView>
-                  {!Platform.isTV && (
-                    <TouchableOpacity
-                      onPress={() => copyLog(log)}
-                      className='flex flex-row items-center self-end px-2 py-1'
-                    >
-                      <Ionicons name='copy-outline' size={16} color='white' />
-                      <Text className='text-xs ml-1'>
-                        {t("home.settings.logs.copy")}
-                      </Text>
-                    </TouchableOpacity>
-                  )}
                     </View>
                   </Collapsible>
+                </>
               )}
             </View>
           ))}
@@ -213,5 +173,6 @@ export default function Page() {
           )}
         </View>
       </ScrollView>
+    </View>
   );
 }

app/(auth)/(tabs)/(home)/settings/music/page.tsx

@@ -3,9 +3,9 @@ import { useQuery } from "@tanstack/react-query";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, ScrollView, View } from "react-native";
+import { Switch } from "react-native-gesture-handler";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
-import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
@@ -136,7 +136,7 @@ export default function MusicSettingsPage() {
             title={t("home.settings.music.prefer_downloaded")}
             disabled={pluginSettings?.preferLocalAudio?.locked}
           >
-            <SettingSwitch
+            <Switch
               value={settings.preferLocalAudio}
               disabled={pluginSettings?.preferLocalAudio?.locked}
               onValueChange={(value) =>
@@ -159,7 +159,7 @@ export default function MusicSettingsPage() {
               title={t("home.settings.music.lookahead_enabled")}
               disabled={pluginSettings?.audioLookaheadEnabled?.locked}
             >
-              <SettingSwitch
+              <Switch
                 value={settings.audioLookaheadEnabled}
                 disabled={pluginSettings?.audioLookaheadEnabled?.locked}
                 onValueChange={(value) =>
@@ -233,7 +233,7 @@ export default function MusicSettingsPage() {
                 })}
               />
             </ListGroup>
-            <ListGroup className='mt-4'>
+            <ListGroup>
               <ListItem
                 textColor='red'
                 onPress={onDeleteDownloadedSongsClicked}

app/(auth)/(tabs)/(home)/settings/playback-controls/page.tsx

@@ -17,14 +17,13 @@ export default function PlaybackControlsPage() {
       contentContainerStyle={{
         paddingLeft: insets.left,
         paddingRight: insets.right,
-        paddingBottom: insets.bottom,
       }}
     >
       <View
         className='p-4 flex flex-col'
         style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
       >
-        <View>
+        <View className='mb-4'>
           <MediaProvider>
             <MediaToggles className='mb-4' />
             <GestureControls className='mb-4' />

app/(auth)/(tabs)/(home)/settings/plugins/jellyseerr/page.tsx

@@ -1,8 +1,11 @@
-import { ScrollView, View } from "react-native";
+import { ScrollView } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import DisabledSetting from "@/components/settings/DisabledSetting";
 import { JellyseerrSettings } from "@/components/settings/Jellyseerr";
+import { useSettings } from "@/utils/atoms/settings";
 
 export default function JellyseerrPluginPage() {
+  const { pluginSettings } = useSettings();
   const insets = useSafeAreaInsets();
 
   return (
@@ -13,9 +16,12 @@ export default function JellyseerrPluginPage() {
         paddingRight: insets.right,
       }}
     >
-      <View className='p-4'>
+      <DisabledSetting
+        disabled={pluginSettings?.jellyseerrServerUrl?.locked === true}
+        className='p-4'
+      >
         <JellyseerrSettings />
-      </View>
+      </DisabledSetting>
     </ScrollView>
   );
 }

app/(auth)/(tabs)/(home)/settings/plugins/kefinTweaks/page.tsx

@@ -1,8 +1,11 @@
-import { ScrollView, View } from "react-native";
+import { ScrollView } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import DisabledSetting from "@/components/settings/DisabledSetting";
 import { KefinTweaksSettings } from "@/components/settings/KefinTweaks";
+import { useSettings } from "@/utils/atoms/settings";
 
 export default function KefinTweaksPage() {
+  const { pluginSettings } = useSettings();
   const insets = useSafeAreaInsets();
 
   return (
@@ -13,9 +16,12 @@ export default function KefinTweaksPage() {
         paddingRight: insets.right,
       }}
     >
-      <View className='px-4 pt-4'>
+      <DisabledSetting
+        disabled={pluginSettings?.useKefinTweaks?.locked === true}
+        className='p-4'
+      >
         <KefinTweaksSettings />
-      </View>
+      </DisabledSetting>
     </ScrollView>
   );
 }

app/(auth)/(tabs)/(home)/settings/plugins/marlin-search/page.tsx

@@ -1,35 +1,35 @@
 import { useNavigation } from "expo-router";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   Linking,
   ScrollView,
+  Switch,
   TextInput,
   TouchableOpacity,
   View,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
-import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
+import DisabledSetting from "@/components/settings/DisabledSetting";
 import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
 import { useSettings } from "@/utils/atoms/settings";
 
 export default function MarlinSearchPage() {
   const navigation = useNavigation();
+
   const { t } = useTranslation();
+
   const insets = useSafeAreaInsets();
+
   const { settings, updateSettings, pluginSettings } = useSettings();
   const queryClient = useNetworkAwareQueryClient();
 
   const [value, setValue] = useState<string>(settings?.marlinServerUrl || "");
 
-  const searchEngineLocked = pluginSettings?.searchEngine?.locked === true;
-  const marlinUrlLocked = pluginSettings?.marlinServerUrl?.locked === true;
-  const hasStreamystats = !!pluginSettings?.streamyStatsServerUrl?.value;
-
   const onSave = (val: string) => {
     updateSettings({
       marlinServerUrl: !val.endsWith("/") ? val : val.slice(0, -1),
@@ -41,8 +41,15 @@ export default function MarlinSearchPage() {
     Linking.openURL("https://github.com/fredrikburmester/marlin-search");
   };
 
+  const disabled = useMemo(() => {
+    return (
+      pluginSettings?.searchEngine?.locked === true &&
+      pluginSettings?.marlinServerUrl?.locked === true
+    );
+  }, [pluginSettings]);
+
   useEffect(() => {
-    if (!marlinUrlLocked) {
+    if (!pluginSettings?.marlinServerUrl?.locked) {
       navigation.setOptions({
         headerRight: () => (
           <TouchableOpacity onPress={() => onSave(value)} className='px-2'>
@@ -53,7 +60,7 @@ export default function MarlinSearchPage() {
         ),
       });
     }
-  }, [navigation, value, marlinUrlLocked, t]);
+  }, [navigation, value, pluginSettings?.marlinServerUrl?.locked, t]);
 
   if (!settings) return null;
 
@@ -65,39 +72,52 @@ export default function MarlinSearchPage() {
         paddingRight: insets.right,
       }}
     >
-      <View className='px-4 pt-4'>
+      <DisabledSetting disabled={disabled} className='px-4'>
         <ListGroup>
-          {/* disabledByAdmin renders the "Disabled by admin" notice as the row's
+          <DisabledSetting
-              subtitle (same pattern as the Streamystats settings) — no clipping. */}
+            disabled={
+              pluginSettings?.searchEngine?.locked === true ||
+              !!pluginSettings?.streamyStatsServerUrl?.value
+            }
+            showText={!pluginSettings?.marlinServerUrl?.locked}
+          >
             <ListItem
               title={t(
                 "home.settings.plugins.marlin_search.enable_marlin_search",
               )}
-            disabledByAdmin={searchEngineLocked}
               onPress={() => {
                 updateSettings({ searchEngine: "Jellyfin" });
                 queryClient.invalidateQueries({ queryKey: ["search"] });
               }}
             >
-            <SettingSwitch
+              <Switch
                 value={settings.searchEngine === "Marlin"}
-              disabled={searchEngineLocked || hasStreamystats}
+                disabled={!!pluginSettings?.streamyStatsServerUrl?.value}
-              onValueChange={(val) => {
+                onValueChange={(value) => {
-                updateSettings({ searchEngine: val ? "Marlin" : "Jellyfin" });
+                  updateSettings({
+                    searchEngine: value ? "Marlin" : "Jellyfin",
+                  });
                   queryClient.invalidateQueries({ queryKey: ["search"] });
                 }}
               />
             </ListItem>
+          </DisabledSetting>
         </ListGroup>
 
-        <ListGroup className='mt-2'>
+        <DisabledSetting
-          <ListItem
+          disabled={pluginSettings?.marlinServerUrl?.locked === true}
-            title={t("home.settings.plugins.marlin_search.url")}
+          showText={!pluginSettings?.searchEngine?.locked}
-            disabledByAdmin={marlinUrlLocked}
+          className='mt-2 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'>
+              {t("home.settings.plugins.marlin_search.url")}
+            </Text>
             <TextInput
-              editable={!marlinUrlLocked && settings.searchEngine === "Marlin"}
+              editable={settings.searchEngine === "Marlin"}
-              className='text-white text-right flex-1'
+              className='text-white'
               placeholder={t(
                 "home.settings.plugins.marlin_search.server_url_placeholder",
               )}
@@ -108,16 +128,15 @@ export default function MarlinSearchPage() {
               textContentType='URL'
               onChangeText={(text) => setValue(text)}
             />
-          </ListItem>
+          </View>
-        </ListGroup>
+        </DisabledSetting>
-
         <Text className='px-4 text-xs text-neutral-500 mt-1'>
           {t("home.settings.plugins.marlin_search.marlin_search_hint")}{" "}
           <Text className='text-blue-500' onPress={handleOpenLink}>
             {t("home.settings.plugins.marlin_search.read_more_about_marlin")}
           </Text>
         </Text>
-      </View>
+      </DisabledSetting>
     </ScrollView>
   );
 }

app/(auth)/(tabs)/(home)/settings/plugins/page.tsx

@@ -1,21 +1,9 @@
-import { useCallback } from "react";
+import { Platform, ScrollView, View } from "react-native";
-import { useTranslation } from "react-i18next";
-import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { toast } from "sonner-native";
-import { Text } from "@/components/common/Text";
 import { PluginSettings } from "@/components/settings/PluginSettings";
-import { useSettings } from "@/utils/atoms/settings";
 
 export default function PluginsPage() {
   const insets = useSafeAreaInsets();
-  const { t } = useTranslation();
-  const { refreshStreamyfinPluginSettings } = useSettings();
-
-  const handleRefreshFromServer = useCallback(async () => {
-    await refreshStreamyfinPluginSettings();
-    toast.success(t("home.settings.plugins.streamystats.toasts.refreshed"));
-  }, [refreshStreamyfinPluginSettings, t]);
 
   return (
     <ScrollView
@@ -30,17 +18,6 @@ export default function PluginsPage() {
         style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
       >
         <PluginSettings />
-
-        {/* Pulls the centralised Streamyfin plugin settings for every plugin,
-            so it lives on the plugins index rather than inside Streamystats. */}
-        <TouchableOpacity
-          onPress={handleRefreshFromServer}
-          className='py-3 rounded-xl bg-neutral-800'
-        >
-          <Text className='text-center text-blue-500'>
-            {t("home.settings.plugins.streamystats.refresh_from_server")}
-          </Text>
-        </TouchableOpacity>
       </View>
     </ScrollView>
   );

app/(auth)/(tabs)/(home)/settings/plugins/streamystats/page.tsx

@@ -4,13 +4,13 @@ import { useTranslation } from "react-i18next";
 import {
   Linking,
   ScrollView,
+  Switch,
   TextInput,
   TouchableOpacity,
   View,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
-import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
@@ -22,7 +22,12 @@ export default function StreamystatsPage() {
   const navigation = useNavigation();
   const insets = useSafeAreaInsets();
 
-  const { settings, updateSettings, pluginSettings } = useSettings();
+  const {
+    settings,
+    updateSettings,
+    pluginSettings,
+    refreshStreamyfinPluginSettings,
+  } = useSettings();
   const queryClient = useNetworkAwareQueryClient();
 
   // Local state for all editable fields
@@ -44,21 +49,7 @@ export default function StreamystatsPage() {
   );
 
   const isUrlLocked = pluginSettings?.streamyStatsServerUrl?.locked === true;
-  const searchLocked = pluginSettings?.searchEngine?.locked === true;
+  const isStreamystatsEnabled = !!url;
-  const movieRecsLocked =
-    pluginSettings?.streamyStatsMovieRecommendations?.locked === true;
-  const seriesRecsLocked =
-    pluginSettings?.streamyStatsSeriesRecommendations?.locked === true;
-  const promotedWatchlistsLocked =
-    pluginSettings?.streamyStatsPromotedWatchlists?.locked === true;
-  const hideWatchlistsTabLocked =
-    pluginSettings?.hideWatchlistsTab?.locked === true;
-  // The input renders the locked admin URL; enablement must follow the same
-  // effective value or every toggle stays disabled until local state syncs.
-  const effectiveUrl = isUrlLocked
-    ? (settings?.streamyStatsServerUrl ?? "")
-    : url;
-  const isStreamystatsEnabled = !!effectiveUrl;
 
   const onSave = useCallback(() => {
     const cleanUrl = url.endsWith("/") ? url.slice(0, -1) : url;
@@ -122,6 +113,17 @@ export default function StreamystatsPage() {
     Linking.openURL("https://github.com/fredrikburmester/streamystats");
   };
 
+  const handleRefreshFromServer = useCallback(async () => {
+    const newPluginSettings = await refreshStreamyfinPluginSettings();
+    // Update local state with new values
+    const newUrl = newPluginSettings?.streamyStatsServerUrl?.value || "";
+    setUrl(newUrl);
+    if (newUrl) {
+      setUseForSearch(true);
+    }
+    toast.success(t("home.settings.plugins.streamystats.toasts.refreshed"));
+  }, [refreshStreamyfinPluginSettings, t]);
+
   if (!settings) return null;
 
   return (
@@ -132,7 +134,7 @@ export default function StreamystatsPage() {
         paddingRight: insets.right,
       }}
     >
-      <View className='px-4 pt-4'>
+      <View className='px-4'>
         <ListGroup className='flex-1'>
           <ListItem
             title={t("home.settings.plugins.streamystats.url")}
@@ -144,7 +146,7 @@ export default function StreamystatsPage() {
               placeholder={t(
                 "home.settings.plugins.streamystats.server_url_placeholder",
               )}
-              value={effectiveUrl}
+              value={url}
               keyboardType='url'
               returnKeyType='done'
               autoCapitalize='none'
@@ -169,18 +171,11 @@ export default function StreamystatsPage() {
         >
           <ListItem
             title={t("home.settings.plugins.streamystats.enable_search")}
-            disabledByAdmin={searchLocked}
+            disabledByAdmin={pluginSettings?.searchEngine?.locked === true}
           >
-            {/* Locked controls show the live admin value and can't be toggled —
+            <Switch
-                local form state would let the switch flip while the write guard
+              value={useForSearch}
-                drops the change. */}
+              disabled={!isStreamystatsEnabled}
-            <SettingSwitch
-              value={
-                searchLocked
-                  ? settings?.searchEngine === "Streamystats"
-                  : useForSearch
-              }
-              disabled={!isStreamystatsEnabled || searchLocked}
               onValueChange={setUseForSearch}
             />
           </ListItem>
@@ -188,62 +183,52 @@ export default function StreamystatsPage() {
             title={t(
               "home.settings.plugins.streamystats.enable_movie_recommendations",
             )}
-            disabledByAdmin={movieRecsLocked}
+            disabledByAdmin={
-          >
+              pluginSettings?.streamyStatsMovieRecommendations?.locked === true
-            <SettingSwitch
-              value={
-                movieRecsLocked
-                  ? (settings?.streamyStatsMovieRecommendations ?? false)
-                  : movieRecs
             }
+          >
+            <Switch
+              value={movieRecs}
               onValueChange={setMovieRecs}
-              disabled={!isStreamystatsEnabled || movieRecsLocked}
+              disabled={!isStreamystatsEnabled}
             />
           </ListItem>
           <ListItem
             title={t(
               "home.settings.plugins.streamystats.enable_series_recommendations",
             )}
-            disabledByAdmin={seriesRecsLocked}
+            disabledByAdmin={
-          >
+              pluginSettings?.streamyStatsSeriesRecommendations?.locked === true
-            <SettingSwitch
-              value={
-                seriesRecsLocked
-                  ? (settings?.streamyStatsSeriesRecommendations ?? false)
-                  : seriesRecs
             }
+          >
+            <Switch
+              value={seriesRecs}
               onValueChange={setSeriesRecs}
-              disabled={!isStreamystatsEnabled || seriesRecsLocked}
+              disabled={!isStreamystatsEnabled}
             />
           </ListItem>
           <ListItem
             title={t(
               "home.settings.plugins.streamystats.enable_promoted_watchlists",
             )}
-            disabledByAdmin={promotedWatchlistsLocked}
+            disabledByAdmin={
-          >
+              pluginSettings?.streamyStatsPromotedWatchlists?.locked === true
-            <SettingSwitch
-              value={
-                promotedWatchlistsLocked
-                  ? (settings?.streamyStatsPromotedWatchlists ?? false)
-                  : promotedWatchlists
             }
+          >
+            <Switch
+              value={promotedWatchlists}
               onValueChange={setPromotedWatchlists}
-              disabled={!isStreamystatsEnabled || promotedWatchlistsLocked}
+              disabled={!isStreamystatsEnabled}
             />
           </ListItem>
           <ListItem
             title={t("home.settings.plugins.streamystats.hide_watchlists_tab")}
-            disabledByAdmin={hideWatchlistsTabLocked}
+            disabledByAdmin={pluginSettings?.hideWatchlistsTab?.locked === true}
           >
-            <SettingSwitch
+            <Switch
-              value={
+              value={hideWatchlistsTab}
-                hideWatchlistsTabLocked
-                  ? (settings?.hideWatchlistsTab ?? false)
-                  : hideWatchlistsTab
-              }
               onValueChange={setHideWatchlistsTab}
-              disabled={!isStreamystatsEnabled || hideWatchlistsTabLocked}
+              disabled={!isStreamystatsEnabled}
             />
           </ListItem>
         </ListGroup>
@@ -251,6 +236,15 @@ export default function StreamystatsPage() {
           {t("home.settings.plugins.streamystats.home_sections_hint")}
         </Text>
 
+        <TouchableOpacity
+          onPress={handleRefreshFromServer}
+          className='mt-6 py-3 rounded-xl bg-neutral-800'
+        >
+          <Text className='text-center text-blue-500'>
+            {t("home.settings.plugins.streamystats.refresh_from_server")}
+          </Text>
+        </TouchableOpacity>
+
         {/* Disable button - only show if URL is not locked and Streamystats is enabled */}
         {!isUrlLocked && isStreamystatsEnabled && (
           <TouchableOpacity

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/collections/[collectionId].tsx

@@ -23,7 +23,6 @@ import {
   TouchableItemRouter,
 } from "@/components/common/TouchableItemRouter";
 import { FilterButton } from "@/components/filters/FilterButton";
-import { FilterSheetProvider } from "@/components/filters/FilterSheetProvider";
 import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
 import { Loader } from "@/components/Loader";
@@ -135,12 +134,6 @@ const page: React.FC = () => {
   useEffect(() => {
     navigation.setOptions({ title: collection?.Name || "" });
     setSortOrder([SortOrderOption.Ascending]);
-    // Collections open with a clean filter slate: the genre/year/tag atoms are
-    // global, so without this the previously viewed library's selection bleeds
-    // in (libraries now keep their own per-library memory).
-    setSelectedGenres([]);
-    setSelectedYears([]);
-    setSelectedTags([]);
 
     if (!collection) return;
 
@@ -211,7 +204,8 @@ const page: React.FC = () => {
     ],
   );
 
-  const { data, fetchNextPage, hasNextPage, isLoading } = useInfiniteQuery({
+  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
+    useInfiniteQuery({
       queryKey: [
         "collection-items",
         collectionId,
@@ -332,7 +326,7 @@ const page: React.FC = () => {
         data={[
           {
             key: "reset",
-            component: <ResetFiltersButton libraryId={collectionId} />,
+            component: <ResetFiltersButton />,
           },
           {
             key: "genre",
@@ -472,6 +466,7 @@ const page: React.FC = () => {
       setSortBy,
       sortOrder,
       setSortOrder,
+      isFetching,
     ],
   );
 
@@ -638,7 +633,6 @@ const page: React.FC = () => {
   // Mobile return
   if (!Platform.isTV) {
     return (
-      <FilterSheetProvider>
       <FlashList
         ListEmptyComponent={
           <View className='flex flex-col items-center justify-center h-full'>
@@ -676,7 +670,6 @@ const page: React.FC = () => {
           />
         )}
       />
-      </FilterSheetProvider>
     );
   }
 

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

@@ -9,12 +9,12 @@ import {
   getItemsApi,
   getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
-import { FlashList, type FlashListRef } from "@shopify/flash-list";
+import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import {
   FlatList,
@@ -30,7 +30,6 @@ import {
   TouchableItemRouter,
 } from "@/components/common/TouchableItemRouter";
 import { FilterButton } from "@/components/filters/FilterButton";
-import { FilterSheetProvider } from "@/components/filters/FilterSheetProvider";
 import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
 import { Loader } from "@/components/Loader";
@@ -40,7 +39,6 @@ import { TVPosterCard } from "@/components/tv/TVPosterCard";
 import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
-import { useFilterReset } from "@/hooks/useFilterReset";
 import { useOrientation } from "@/hooks/useOrientation";
 import { useRefreshLibraryOnFocus } from "@/hooks/useRefreshLibraryOnFocus";
 import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
@@ -52,9 +50,7 @@ import {
   FilterByPreferenceAtom,
   filterByAtom,
   genreFilterAtom,
-  genrePreferenceAtom,
   getFilterByPreference,
-  getMultiFilterPreference,
   getSortByPreference,
   getSortOrderPreference,
   SortByOption,
@@ -65,12 +61,11 @@ import {
   sortOrderAtom,
   sortOrderOptions,
   sortOrderPreferenceAtom,
-  tagPreferenceAtom,
   tagsFilterAtom,
   useFilterOptions,
   yearFilterAtom,
-  yearPreferenceAtom,
 } from "@/utils/atoms/filters";
+import { useSettings } from "@/utils/atoms/settings";
 import type { TVOptionItem } from "@/utils/atoms/tvOptionModal";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 
@@ -107,9 +102,6 @@ const Page = () => {
   const [sortOrderPreference, setOrderByPreference] = useAtom(
     sortOrderPreferenceAtom,
   );
-  const [genrePreference, setGenrePreference] = useAtom(genrePreferenceAtom);
-  const [yearPreference, setYearPreference] = useAtom(yearPreferenceAtom);
-  const [tagPreference, setTagPreference] = useAtom(tagPreferenceAtom);
 
   const { orientation } = useOrientation();
 
@@ -191,13 +183,6 @@ const Page = () => {
       const fp = getFilterByPreference(libraryId, filterByPreference);
       _setFilterBy(fp ? [fp] : []);
     }
-
-    // Genres / years / tags: per-library saved preference (no URL params), so
-    // switching libraries restores each library's own selection instead of
-    // bleeding the previous one.
-    setSelectedGenres(getMultiFilterPreference(libraryId, genrePreference));
-    setSelectedYears(getMultiFilterPreference(libraryId, yearPreference));
-    setSelectedTags(getMultiFilterPreference(libraryId, tagPreference));
   }, [
     libraryId,
     sortOrderPreference,
@@ -206,12 +191,6 @@ const Page = () => {
     _setSortBy,
     filterByPreference,
     _setFilterBy,
-    genrePreference,
-    yearPreference,
-    tagPreference,
-    setSelectedGenres,
-    setSelectedYears,
-    setSelectedTags,
     searchParams.sortBy,
     searchParams.sortOrder,
     searchParams.filterBy,
@@ -256,32 +235,6 @@ const Page = () => {
     [libraryId, filterByPreference, setFilterByPreference, _setFilterBy],
   );
 
-  // Genres / years / tags: save the per-library memory then update the active
-  // atom (mirrors setSortBy; avoids a save-effect that would corrupt on switch).
-  const setGenres = useCallback(
-    (genres: string[]) => {
-      setGenrePreference({ ...genrePreference, [libraryId]: genres });
-      setSelectedGenres(genres);
-    },
-    [libraryId, genrePreference, setGenrePreference, setSelectedGenres],
-  );
-
-  const setYears = useCallback(
-    (years: string[]) => {
-      setYearPreference({ ...yearPreference, [libraryId]: years });
-      setSelectedYears(years);
-    },
-    [libraryId, yearPreference, setYearPreference, setSelectedYears],
-  );
-
-  const setTags = useCallback(
-    (tags: string[]) => {
-      setTagPreference({ ...tagPreference, [libraryId]: tags });
-      setSelectedTags(tags);
-    },
-    [libraryId, tagPreference, setTagPreference, setSelectedTags],
-  );
-
   const nrOfCols = useMemo(() => {
     if (Platform.isTV) {
       // TV uses flexWrap, so nrOfCols is just for mobile
@@ -423,29 +376,6 @@ const Page = () => {
     );
   }, [data]);
 
-  const flashListRef = useRef<FlashListRef<BaseItemDto>>(null);
-
-  // Jump the grid to the top when the filters/sort change (incl. reset).
-  const filterSignature = `${selectedGenres}|${selectedYears}|${selectedTags}|${sortBy[0]}|${sortOrder[0]}|${filterBy}`;
-  const pendingScrollTopRef = useRef(false);
-
-  // Instant feedback: pin to the top the moment the filters change, without
-  // waiting for the new fetch — and flag a re-pin for once it settles.
-  useEffect(() => {
-    flashListRef.current?.scrollToOffset({ offset: 0, animated: false });
-    pendingScrollTopRef.current = true;
-  }, [filterSignature]);
-
-  // Safety net: FlashList can restore the previous offset as the filtered list
-  // grows, so re-pin once the fetch settles. Pagination keeps the same
-  // signature, so it never re-pins.
-  useEffect(() => {
-    if (pendingScrollTopRef.current && !isFetching) {
-      pendingScrollTopRef.current = false;
-      flashListRef.current?.scrollToOffset({ offset: 0, animated: false });
-    }
-  }, [isFetching, flatData]);
-
   const renderItem = useCallback(
     ({ item, index }: { item: BaseItemDto; index: number }) => (
       <TouchableItemRouter
@@ -561,6 +491,7 @@ const Page = () => {
 
   const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
   const generalFilters = useFilterOptions();
+  const settings = useSettings();
   const ListHeaderComponent = useCallback(
     () => (
       <FlatList
@@ -575,7 +506,7 @@ const Page = () => {
         data={[
           {
             key: "reset",
-            component: <ResetFiltersButton libraryId={libraryId} />,
+            component: <ResetFiltersButton />,
           },
           {
             key: "genre",
@@ -594,7 +525,7 @@ const Page = () => {
                   });
                   return response.data.Genres || [];
                 }}
-                set={setGenres}
+                set={setSelectedGenres}
                 values={selectedGenres}
                 title={t("library.filters.genres")}
                 renderItemLabel={(item) => item.toString()}
@@ -621,7 +552,7 @@ const Page = () => {
                   });
                   return response.data.Years || [];
                 }}
-                set={setYears}
+                set={setSelectedYears}
                 values={selectedYears}
                 title={t("library.filters.years")}
                 renderItemLabel={(item) => item.toString()}
@@ -646,7 +577,7 @@ const Page = () => {
                   });
                   return response.data.Tags || [];
                 }}
-                set={setTags}
+                set={setSelectedTags}
                 values={selectedTags}
                 title={t("library.filters.tags")}
                 renderItemLabel={(item) => item.toString()}
@@ -726,23 +657,35 @@ const Page = () => {
       api,
       user?.Id,
       selectedGenres,
-      setGenres,
+      setSelectedGenres,
       selectedYears,
-      setYears,
+      setSelectedYears,
       selectedTags,
-      setTags,
+      setSelectedTags,
       sortBy,
       setSortBy,
       sortOrder,
       setSortOrder,
+      isFetching,
       filterBy,
       setFilter,
+      settings,
     ],
   );
 
-  // Filter bar reset + visibility, shared with the mobile ResetFiltersButton so
+  // TV Filter bar header
-  // sort/order can't be forgotten on one path (it used to be reset on neither).
+  const hasActiveFilters =
-  const { hasActiveFilters, resetAllFilters } = useFilterReset(libraryId);
+    selectedGenres.length > 0 ||
+    selectedYears.length > 0 ||
+    selectedTags.length > 0 ||
+    filterBy.length > 0;
+
+  const resetAllFilters = useCallback(() => {
+    setSelectedGenres([]);
+    setSelectedYears([]);
+    setSelectedTags([]);
+    _setFilterBy([]);
+  }, [setSelectedGenres, setSelectedYears, setSelectedTags, _setFilterBy]);
 
   // TV Filter options - with "All" option for clearable filters
   const tvGenreFilterOptions = useMemo(
@@ -836,15 +779,15 @@ const Page = () => {
       options: tvGenreFilterOptions,
       onSelect: (value: string) => {
         if (value === "__all__") {
-          setGenres([]);
+          setSelectedGenres([]);
         } else if (selectedGenres.includes(value)) {
-          setGenres(selectedGenres.filter((g) => g !== value));
+          setSelectedGenres(selectedGenres.filter((g) => g !== value));
         } else {
-          setGenres([...selectedGenres, value]);
+          setSelectedGenres([...selectedGenres, value]);
         }
       },
     });
-  }, [showOptions, t, tvGenreFilterOptions, selectedGenres, setGenres]);
+  }, [showOptions, t, tvGenreFilterOptions, selectedGenres, setSelectedGenres]);
 
   const handleShowYearFilter = useCallback(() => {
     showOptions({
@@ -852,15 +795,15 @@ const Page = () => {
       options: tvYearFilterOptions,
       onSelect: (value: string) => {
         if (value === "__all__") {
-          setYears([]);
+          setSelectedYears([]);
         } else if (selectedYears.includes(value)) {
-          setYears(selectedYears.filter((y) => y !== value));
+          setSelectedYears(selectedYears.filter((y) => y !== value));
         } else {
-          setYears([...selectedYears, value]);
+          setSelectedYears([...selectedYears, value]);
         }
       },
     });
-  }, [showOptions, t, tvYearFilterOptions, selectedYears, setYears]);
+  }, [showOptions, t, tvYearFilterOptions, selectedYears, setSelectedYears]);
 
   const handleShowTagFilter = useCallback(() => {
     showOptions({
@@ -868,15 +811,15 @@ const Page = () => {
       options: tvTagFilterOptions,
       onSelect: (value: string) => {
         if (value === "__all__") {
-          setTags([]);
+          setSelectedTags([]);
         } else if (selectedTags.includes(value)) {
-          setTags(selectedTags.filter((tag) => tag !== value));
+          setSelectedTags(selectedTags.filter((tag) => tag !== value));
         } else {
-          setTags([...selectedTags, value]);
+          setSelectedTags([...selectedTags, value]);
         }
       },
     });
-  }, [showOptions, t, tvTagFilterOptions, selectedTags, setTags]);
+  }, [showOptions, t, tvTagFilterOptions, selectedTags, setSelectedTags]);
 
   const handleShowSortByFilter = useCallback(() => {
     showOptions({
@@ -924,9 +867,7 @@ const Page = () => {
   // Mobile return
   if (!Platform.isTV) {
     return (
-      <FilterSheetProvider>
       <FlashList
-          ref={flashListRef}
         key={orientation}
         ListEmptyComponent={
           <View className='flex flex-col items-center justify-center h-full'>
@@ -962,7 +903,6 @@ const Page = () => {
           />
         )}
       />
-      </FilterSheetProvider>
     );
   }
 

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

@@ -89,7 +89,7 @@ export default function ArtistsScreen() {
     return (
       <View className='flex-1 justify-center items-center bg-black px-6'>
         <Text className='text-neutral-500 text-center'>
-          {t("music.missing_library_id")}
+          Missing music library id.
         </Text>
       </View>
     );

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

@@ -122,7 +122,7 @@ export default function PlaylistsScreen() {
     return (
       <View className='flex-1 justify-center items-center bg-black px-6'>
         <Text className='text-neutral-500 text-center'>
-          {t("music.missing_library_id")}
+          Missing music library id.
         </Text>
       </View>
     );

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

@@ -226,7 +226,7 @@ export default function SuggestionsScreen() {
     return (
       <View className='flex-1 justify-center items-center bg-black px-6'>
         <Text className='text-neutral-500 text-center'>
-          {t("music.missing_library_id")}
+          Missing music library id.
         </Text>
       </View>
     );

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

@@ -51,8 +51,7 @@ function TVTabLayout() {
 
   const currentTab = segments.find(isTabRoute);
   const lastSegment = segments[segments.length - 1] ?? "";
-  const atTabRoot =
+  const atTabRoot = isTabRoute(lastSegment) || lastSegment === "index";
-    isTabRoute(lastSegment) || (lastSegment as string) === "index";
 
   const tabs: TVNavBarTab[] = useMemo(
     () =>

app/(auth)/now-playing.tsx

@@ -14,7 +14,6 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { useTranslation } from "react-i18next";
 import {
   ActivityIndicator,
   Dimensions,
@@ -73,7 +72,6 @@ const ARTWORK_SIZE = SCREEN_WIDTH - 80;
 type ViewMode = "player" | "queue";
 
 export default function NowPlayingScreen() {
-  const { t } = useTranslation();
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const router = useRouter();
@@ -232,9 +230,7 @@ export default function NowPlayingScreen() {
             paddingBottom: Platform.OS === "android" ? insets.bottom : 0,
           }}
         >
-          <Text className='text-neutral-500'>
+          <Text className='text-neutral-500'>No track playing</Text>
-            {t("music.no_track_playing")}
-          </Text>
         </View>
       </BottomSheetModalProvider>
     );
@@ -271,7 +267,7 @@ export default function NowPlayingScreen() {
                     : "text-neutral-500"
                 }
               >
-                {t("music.now_playing")}
+                Now Playing
               </Text>
             </TouchableOpacity>
             <TouchableOpacity
@@ -722,7 +718,6 @@ const QueueView: React.FC<QueueViewProps> = ({
   onRemoveFromQueue,
   onReorderQueue,
 }) => {
-  const { t } = useTranslation();
   const renderQueueItem = useCallback(
     ({ item, drag, isActive, getIndex }: RenderItemParams<BaseItemDto>) => {
       const index = getIndex() ?? 0;
@@ -836,15 +831,13 @@ const QueueView: React.FC<QueueViewProps> = ({
       ListHeaderComponent={
         <View className='px-4 py-2'>
           <Text className='text-neutral-400 text-xs uppercase tracking-wider'>
-            {history.length > 0
+            {history.length > 0 ? "Playing from queue" : "Up next"}
-              ? t("music.playing_from_queue")
-              : t("music.up_next")}
           </Text>
         </View>
       }
       ListEmptyComponent={
         <View className='flex-1 items-center justify-center py-20'>
-          <Text className='text-neutral-500'>{t("music.queue_empty")}</Text>
+          <Text className='text-neutral-500'>Queue is empty</Text>
         </View>
       }
     />

app/(auth)/player/direct-player.tsx

@@ -56,8 +56,8 @@ import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings"
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import {
+  applyMpvSubtitleSelection,
   getMpvAudioId,
-  getMpvSubtitleId,
 } from "@/utils/jellyfin/subtitleUtils";
 import { writeToLog } from "@/utils/log";
 import { msToTicks, ticksToSeconds } from "@/utils/time";
@@ -639,12 +639,9 @@ export default function DirectPlayerPage() {
       ).map((s) => s.DeliveryUrl!);
     }
 
-    // Calculate track IDs for initial selection
+    // Audio maps positionally (audio tracks aren't reordered or hidden like
-    const initialSubtitleId = getMpvSubtitleId(
+    // subtitles). The subtitle selection is applied later, once MPV's real track
-      mediaSource,
+    // list is known — see applySubtitleSelection / onTracksReady.
-      subtitleIndex,
-      isTranscoding,
-    );
     const initialAudioId = getMpvAudioId(
       mediaSource,
       audioIndex,
@@ -662,7 +659,6 @@ export default function DirectPlayerPage() {
       url: stream.url,
       startPosition: startPos,
       autoplay: true,
-      initialSubtitleId,
       initialAudioId,
       // Pass cache/buffer settings from user preferences
       cacheConfig: {
@@ -710,7 +706,6 @@ export default function DirectPlayerPage() {
     playbackPositionFromUrl,
     api?.basePath,
     api?.accessToken,
-    subtitleIndex,
     audioIndex,
     offline,
     settings.mpvCacheEnabled,
@@ -908,30 +903,41 @@ export default function DirectPlayerPage() {
   );
 
   // TV subtitle track change handler
+  /**
+   * Resolve a Jellyfin subtitle index against MPV's *real* track list and apply
+   * it. Identity-based (external by filename, embedded by language/title) so it
+   * stays correct across external/embedded reordering and server-hidden embedded
+   * subs — unlike positional mapping. Reused for initial selection (onTracksReady,
+   * fired again after each external sub-add) and runtime changes.
+   */
+  const applySubtitleSelection = useCallback(
+    async (jellyfinSubtitleIndex: number) => {
+      const subtitleStreams = stream?.mediaSource?.MediaStreams?.filter(
+        (s) => s.Type === "Subtitle",
+      );
+      await applyMpvSubtitleSelection(videoRef.current, {
+        subtitleStreams,
+        jellyfinSubtitleIndex,
+        // The exact URL each external sub was loaded into MPV with — mirrors the
+        // externalSubtitles array built in videoSource (online: basePath +
+        // DeliveryUrl, offline: local DeliveryUrl).
+        getExpectedExternalUrl: (s) => {
+          if (!s.DeliveryUrl) return undefined;
+          if (offline) return s.DeliveryUrl;
+          return api?.basePath ? `${api.basePath}${s.DeliveryUrl}` : undefined;
+        },
+      });
+    },
+    [stream?.mediaSource, offline, api?.basePath],
+  );
+
+  // TV/mobile subtitle track change handler
   const handleSubtitleIndexChange = useCallback(
     async (index: number) => {
       setCurrentSubtitleIndex(index);
-
+      await applySubtitleSelection(index);
-      // Check if we're transcoding
-      const isTranscoding = Boolean(stream?.mediaSource?.TranscodingUrl);
-
-      if (index === -1) {
-        // Disable subtitles
-        await videoRef.current?.disableSubtitles?.();
-      } else {
-        // Convert Jellyfin index to MPV track ID
-        const mpvTrackId = getMpvSubtitleId(
-          stream?.mediaSource,
-          index,
-          isTranscoding,
-        );
-
-        if (mpvTrackId !== undefined && mpvTrackId !== -1) {
-          await videoRef.current?.setSubtitleTrack?.(mpvTrackId);
-        }
-      }
     },
-    [stream?.mediaSource],
+    [applySubtitleSelection],
   );
 
   // Technical info toggle handler
@@ -1290,12 +1296,16 @@ export default function DirectPlayerPage() {
                   console.error("Video Error:", e.nativeEvent);
                   Alert.alert(
                     t("player.error"),
-                    t("player.an_error_occurred_while_playing_the_video"),
+                    t("player.an_error_occured_while_playing_the_video"),
                   );
                   writeToLog("ERROR", "Video Error", e.nativeEvent);
                 }}
                 onTracksReady={() => {
                   setTracksReady(true);
+                  // Fired after embedded tracks enumerate and again after each
+                  // external sub-add; re-resolve so the final fire (full track
+                  // list) selects the right track by identity.
+                  void applySubtitleSelection(currentSubtitleIndex);
                 }}
               />
               {!hasPlaybackStarted && (

app/(auth)/tv-subtitle-modal.tsx

@@ -192,7 +192,6 @@ const SubtitleResultCard = React.forwardRef<
 >(({ result, hasTVPreferredFocus, isDownloading, onPress }, ref) => {
   const { focused, handleFocus, handleBlur, animatedStyle } =
     useTVFocusAnimation({ scaleAmount: 1.03 });
-  const { t } = useTranslation();
 
   return (
     <Pressable
@@ -329,7 +328,7 @@ const SubtitleResultCard = React.forwardRef<
               ]}
             >
               <Text style={[styles.flagText, { fontSize: scaleSize(10) }]}>
-                {t("player.hash_match")}
+                Hash Match
               </Text>
             </View>
           )}

app/+not-found.tsx

@@ -1,20 +1,17 @@
 import { Link, Stack } from "expo-router";
-import { useTranslation } from "react-i18next";
 import { StyleSheet } from "react-native";
 
 import { ThemedText } from "@/components/ThemedText";
 import { ThemedView } from "@/components/ThemedView";
 
 export default function NotFoundScreen() {
-  const { t } = useTranslation();
-
   return (
     <>
-      <Stack.Screen options={{ title: t("home.oops") }} />
+      <Stack.Screen options={{ title: "Oops!" }} />
       <ThemedView style={styles.container}>
-        <ThemedText type='title'>{t("not_found.title")}</ThemedText>
+        <ThemedText type='title'>This screen doesn't exist.</ThemedText>
         <Link href={"/home"} style={styles.link}>
-          <ThemedText type='link'>{t("not_found.go_home")}</ThemedText>
+          <ThemedText type='link'>Go to home screen!</ThemedText>
         </Link>
       </ThemedView>
     </>

app/_layout.tsx

@@ -11,7 +11,6 @@ import { Image } from "expo-image";
 import { DarkTheme, ThemeProvider } from "expo-router/react-navigation";
 import { Platform } from "react-native";
 import { GlobalModal } from "@/components/GlobalModal";
-import { PendingAccountSaveModal } from "@/components/PendingAccountSaveModal";
 import { enableTVMenuKeyInterception } from "@/hooks/useTVBackHandler";
 import i18n from "@/i18n";
 import { DownloadProvider } from "@/providers/DownloadProvider";
@@ -86,8 +85,7 @@ configureReanimatedLogger({
 if (!Platform.isTV) {
   Notifications.setNotificationHandler({
     handleNotification: async () => ({
-      shouldShowBanner: true,
+      shouldShowAlert: true,
-      shouldShowList: true,
       shouldPlaySound: true,
       shouldSetBadge: false,
     }),
@@ -352,12 +350,9 @@ function Layout() {
       notificationListener.current =
         Notifications?.addNotificationReceivedListener(
           (notification: Notification) => {
-            // Log only the title — serializing the whole notification touches
-            // the deprecated dataString getter (deprecation warning) and dumps
-            // noisy payloads into the console.
             console.log(
-              "Notification received while app running:",
+              "Notification received while app running",
-              notification.request.content.title,
+              notification,
             );
           },
         );
@@ -552,7 +547,6 @@ function Layout() {
                                   closeButton
                                 />
                                 {!Platform.isTV && <GlobalModal />}
-                                {!Platform.isTV && <PendingAccountSaveModal />}
                               </ThemeProvider>
                             </IntroSheetProvider>
                           </BottomSheetModalProvider>

bun.lock

@@ -31,7 +31,6 @@
         "expo-brightness": "~56.0.5",
         "expo-build-properties": "~56.0.18",
         "expo-camera": "~56.0.8",
-        "expo-clipboard": "~56.0.4",
         "expo-constants": "~56.0.18",
         "expo-crypto": "~56.0.4",
         "expo-dev-client": "~56.0.20",
@@ -114,6 +113,7 @@
         "husky": "9.1.7",
         "lint-staged": "17.0.8",
         "react-test-renderer": "19.2.3",
+        "tsx": "^4.22.4",
         "typescript": "6.0.3",
       },
     },
@@ -295,6 +295,58 @@
 
     "@epic-web/invariant": ["@epic-web/invariant@1.0.0", "", {}, "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA=="],
 
+    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.28.1", "", { "os": "aix", "cpu": "ppc64" }, "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ=="],
+
+    "@esbuild/android-arm": ["@esbuild/android-arm@0.28.1", "", { "os": "android", "cpu": "arm" }, "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ=="],
+
+    "@esbuild/android-arm64": ["@esbuild/android-arm64@0.28.1", "", { "os": "android", "cpu": "arm64" }, "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg=="],
+
+    "@esbuild/android-x64": ["@esbuild/android-x64@0.28.1", "", { "os": "android", "cpu": "x64" }, "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng=="],
+
+    "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.28.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q=="],
+
+    "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.28.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ=="],
+
+    "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.28.1", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw=="],
+
+    "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.28.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ=="],
+
+    "@esbuild/linux-arm": ["@esbuild/linux-arm@0.28.1", "", { "os": "linux", "cpu": "arm" }, "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ=="],
+
+    "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.28.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g=="],
+
+    "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.28.1", "", { "os": "linux", "cpu": "ia32" }, "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w=="],
+
+    "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.28.1", "", { "os": "linux", "cpu": "none" }, "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg=="],
+
+    "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.28.1", "", { "os": "linux", "cpu": "none" }, "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ=="],
+
+    "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.28.1", "", { "os": "linux", "cpu": "ppc64" }, "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ=="],
+
+    "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.28.1", "", { "os": "linux", "cpu": "none" }, "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ=="],
+
+    "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.28.1", "", { "os": "linux", "cpu": "s390x" }, "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag=="],
+
+    "@esbuild/linux-x64": ["@esbuild/linux-x64@0.28.1", "", { "os": "linux", "cpu": "x64" }, "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA=="],
+
+    "@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.28.1", "", { "os": "none", "cpu": "arm64" }, "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw=="],
+
+    "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.28.1", "", { "os": "none", "cpu": "x64" }, "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg=="],
+
+    "@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.28.1", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q=="],
+
+    "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.28.1", "", { "os": "openbsd", "cpu": "x64" }, "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw=="],
+
+    "@esbuild/openharmony-arm64": ["@esbuild/openharmony-arm64@0.28.1", "", { "os": "none", "cpu": "arm64" }, "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg=="],
+
+    "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.28.1", "", { "os": "sunos", "cpu": "x64" }, "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ=="],
+
+    "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.28.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA=="],
+
+    "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.28.1", "", { "os": "win32", "cpu": "ia32" }, "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg=="],
+
+    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.28.1", "", { "os": "win32", "cpu": "x64" }, "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A=="],
+
     "@expo-google-fonts/material-symbols": ["@expo-google-fonts/material-symbols@0.4.38", "", {}, "sha512-IJkBtN1o8u9BW5fvSii1MyHPQ7Q0HxbWcVBvOrOzgMLpVtZw7R2w94wBTVR7kZwv3w1JNTESMmLA5Sqn1+Z36A=="],
 
     "@expo/cli": ["@expo/cli@56.1.16", "", { "dependencies": { "@expo/code-signing-certificates": "^0.0.6", "@expo/config": "~56.0.9", "@expo/config-plugins": "~56.0.9", "@expo/devcert": "^1.2.1", "@expo/env": "~2.3.0", "@expo/image-utils": "^0.10.1", "@expo/inline-modules": "^0.0.12", "@expo/json-file": "^10.2.0", "@expo/log-box": "^56.0.13", "@expo/metro": "~56.0.0", "@expo/metro-config": "~56.0.14", "@expo/metro-file-map": "^56.0.3", "@expo/osascript": "^2.6.0", "@expo/package-manager": "^1.12.1", "@expo/plist": "^0.7.0", "@expo/prebuild-config": "^56.0.16", "@expo/require-utils": "^56.1.3", "@expo/router-server": "^56.0.14", "@expo/schema-utils": "^56.0.0", "@expo/spawn-async": "^1.8.0", "@expo/ws-tunnel": "^2.0.0", "@expo/xcpretty": "^4.4.4", "@react-native/dev-middleware": "0.85.3", "accepts": "^1.3.8", "arg": "^5.0.2", "bplist-creator": "0.1.0", "bplist-parser": "^0.3.1", "chalk": "^4.0.0", "ci-info": "^3.3.0", "compression": "^1.7.4", "connect": "^3.7.0", "debug": "^4.3.4", "dnssd-advertise": "^1.1.4", "expo-server": "^56.0.5", "fetch-nodeshim": "^0.4.10", "getenv": "^2.0.0", "glob": "^13.0.0", "lan-network": "^0.2.1", "multitars": "^1.0.0", "node-forge": "^1.3.3", "npm-package-arg": "^11.0.0", "ora": "^3.4.0", "picomatch": "^4.0.4", "pretty-format": "^29.7.0", "progress": "^2.0.3", "prompts": "^2.3.2", "resolve-from": "^5.0.0", "semver": "^7.6.0", "send": "^0.19.0", "slugify": "^1.3.4", "stacktrace-parser": "^0.1.10", "structured-headers": "^0.4.1", "terminal-link": "^2.1.1", "toqr": "^0.1.1", "wrap-ansi": "^7.0.0", "ws": "^8.12.1", "zod": "^3.25.76" }, "peerDependencies": { "expo": "*", "expo-router": "*", "react-native": "*" }, "optionalPeers": ["expo-router", "react-native"], "bin": { "expo-internal": "main.js" } }, "sha512-VBQn0mqAwc67b9Cn0RVXyeodghomAx5xGRhA/bXaQzuxDjMQk0zIOb6pXMZX7yiIwJW66UZt/zQiJNSv6aWJYw=="],
@@ -909,6 +961,8 @@
 
     "es-set-tostringtag": ["es-set-tostringtag@2.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "get-intrinsic": "^1.2.6", "has-tostringtag": "^1.0.2", "hasown": "^2.0.2" } }, "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA=="],
 
+    "esbuild": ["esbuild@0.28.1", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.28.1", "@esbuild/android-arm": "0.28.1", "@esbuild/android-arm64": "0.28.1", "@esbuild/android-x64": "0.28.1", "@esbuild/darwin-arm64": "0.28.1", "@esbuild/darwin-x64": "0.28.1", "@esbuild/freebsd-arm64": "0.28.1", "@esbuild/freebsd-x64": "0.28.1", "@esbuild/linux-arm": "0.28.1", "@esbuild/linux-arm64": "0.28.1", "@esbuild/linux-ia32": "0.28.1", "@esbuild/linux-loong64": "0.28.1", "@esbuild/linux-mips64el": "0.28.1", "@esbuild/linux-ppc64": "0.28.1", "@esbuild/linux-riscv64": "0.28.1", "@esbuild/linux-s390x": "0.28.1", "@esbuild/linux-x64": "0.28.1", "@esbuild/netbsd-arm64": "0.28.1", "@esbuild/netbsd-x64": "0.28.1", "@esbuild/openbsd-arm64": "0.28.1", "@esbuild/openbsd-x64": "0.28.1", "@esbuild/openharmony-arm64": "0.28.1", "@esbuild/sunos-x64": "0.28.1", "@esbuild/win32-arm64": "0.28.1", "@esbuild/win32-ia32": "0.28.1", "@esbuild/win32-x64": "0.28.1" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw=="],
+
     "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
 
     "escape-html": ["escape-html@1.0.3", "", {}, "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="],
@@ -947,8 +1001,6 @@
 
     "expo-camera": ["expo-camera@56.0.8", "", { "dependencies": { "barcode-detector": "^3.0.0" }, "peerDependencies": { "expo": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native-web"] }, "sha512-UDOpUUMisFRmCv1XQV1MJCKGAH2CsIC1Rs6P9Bbc6JLVmbxEKAd5dK68y6cScOdWURxVfJ0PRcjYnSuc8ayyIQ=="],
 
-    "expo-clipboard": ["expo-clipboard@56.0.4", "", { "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-qb4DYlkiowHYHaUYVT2FN9nk/nI1xShXOUYsI7J9dVpQCOHcGFjCBPX1VAvEW4Ye4/Aagd6IuhOVAq/+scBOiA=="],
-
     "expo-constants": ["expo-constants@56.0.18", "", { "dependencies": { "@expo/env": "~2.3.0" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-8AMtbDGl/WVPnWlmbpGmvcdnNCy9E4PFnwdVwj600vljkMDPSxcAcjw8GVXEPk3PpZ+ngTqsrkltWyj0UKYAxw=="],
 
     "expo-crypto": ["expo-crypto@56.0.4", "", { "peerDependencies": { "expo": "*" } }, "sha512-fRNEhoXRXgAWBpe3/hq5X+KXTit3OZqdiAGts1YvNEUHQb+H5591mpPac0Yw+sZg9pXcrjRnzo5AxvZaENpc7g=="],
@@ -1811,6 +1863,8 @@
 
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "tsx": ["tsx@4.22.4", "", { "dependencies": { "esbuild": "~0.28.0" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "bin": { "tsx": "dist/cli.mjs" } }, "sha512-X8EX+XV4QR5xCsrgxaED954zTDfY8KqlDtskKEL0cHhyS/P8b4IFOvGDQpsC9Q1XnLq915wEfwwY/zzskCtmhg=="],
+
     "type-fest": ["type-fest@0.7.1", "", {}, "sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg=="],
 
     "type-is": ["type-is@2.1.0", "", { "dependencies": { "content-type": "^2.0.0", "media-typer": "^1.1.0", "mime-types": "^3.0.0" } }, "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA=="],

components/BitRateSheet.tsx

@@ -1,5 +1,4 @@
-import type { BottomSheetModal } from "@gorhom/bottom-sheet";
+import { useMemo, useState } from "react";
-import { useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
@@ -62,7 +61,6 @@ export const BitrateSheet: React.FC<Props> = ({
   const isTv = Platform.isTV;
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
-  const sheetModalRef = useRef<BottomSheetModal | null>(null);
 
   const sorted = useMemo(() => {
     if (inverted)
@@ -94,10 +92,7 @@ export const BitrateSheet: React.FC<Props> = ({
         </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'
-          onPress={() => {
+          onPress={() => setOpen(true)}
-            setOpen(true);
-            sheetModalRef.current?.present();
-          }}
         >
           <Text numberOfLines={1}>
             {BITRATES.find((b) => b.value === selected?.value)?.key}
@@ -108,7 +103,6 @@ export const BitrateSheet: React.FC<Props> = ({
       <FilterSheet
         open={open}
         setOpen={setOpen}
-        modalRef={sheetModalRef}
         title={t("item_card.quality")}
         data={sorted}
         values={selected ? [selected] : []}

components/ContinueWatchingPoster.tsx

@@ -35,10 +35,8 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
       return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
     }
     if (item.Type === "Episode") {
-      // Matched pair: the parent that owns the Thumb (ParentThumbItemId), not the
+      if (item.ParentBackdropItemId && item.ParentThumbImageTag) {
-      // backdrop owner — otherwise the Thumb tag is requested on the wrong item → black.
+        return `${api?.basePath}/Items/${item.ParentBackdropItemId}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ParentThumbImageTag}`;
-      if (item.ParentThumbItemId && item.ParentThumbImageTag) {
-        return `${api?.basePath}/Items/${item.ParentThumbItemId}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ParentThumbImageTag}`;
       }
 
       return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
@@ -63,9 +61,7 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
     }
 
     return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
-    // useEpisodePoster in deps so flipping the setting re-computes the URL live
+  }, [item]);
-    // (no app restart needed).
-  }, [item, useEpisodePoster]);
 
   if (!url)
     return <View className='aspect-video border border-neutral-800 w-44' />;

components/ItemContent.tv.tsx

@@ -56,6 +56,7 @@ import { useSettings } from "@/utils/atoms/settings";
 import type { TVOptionItem } from "@/utils/atoms/tvOptionModal";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { getPrimaryImageUrlById } from "@/utils/jellyfin/image/getPrimaryImageUrlById";
+import { compareTracksForMenu } from "@/utils/jellyfin/subtitleUtils";
 import { formatDuration, runtimeTicksToMinutes } from "@/utils/time";
 
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
@@ -232,12 +233,13 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
       return streams ?? [];
     }, [selectedOptions?.mediaSource]);
 
-    // Get available subtitle tracks (raw MediaStream[] for label lookup)
+    // Get available subtitle tracks (raw MediaStream[] for label lookup),
+    // ordered like jellyfin-web (embedded first, externals last, forced/default up).
     const subtitleStreams = useMemo(() => {
       const streams = selectedOptions?.mediaSource?.MediaStreams?.filter(
         (s) => s.Type === "Subtitle",
       );
-      return streams ?? [];
+      return streams ? [...streams].sort(compareTracksForMenu) : [];
     }, [selectedOptions?.mediaSource]);
 
     // Store handleSubtitleChange in a ref for stable callback reference
@@ -411,11 +413,13 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
             )
           : freshItem.MediaSources?.[0];
 
-        // Get subtitle streams from the fresh data
+        // Get subtitle streams from the fresh data, ordered like jellyfin-web
-        const streams =
+        // (embedded first, externals last) — same as the initial list.
-          mediaSource?.MediaStreams?.filter(
+        const streams = [
+          ...(mediaSource?.MediaStreams?.filter(
             (s: MediaStream) => s.Type === "Subtitle",
-          ) ?? [];
+          ) ?? []),
+        ].sort(compareTracksForMenu);
 
         // Convert to Track[] with setTrack callbacks
         const tracks: Track[] = streams.map((stream) => ({

components/MediaSourceButton.tsx

@@ -7,6 +7,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ActivityIndicator, TouchableOpacity, View } from "react-native";
 import type { ThemeColors } from "@/hooks/useImageColorsReturn";
+import { compareTracksForMenu } from "@/utils/jellyfin/subtitleUtils";
 import { BITRATES } from "./BitRateSheet";
 import type { SelectedOptions } from "./ItemContent";
 import { type OptionGroup, PlatformDropdown } from "./PlatformDropdown";
@@ -63,9 +64,12 @@ export const MediaSourceButton: React.FC<Props> = ({
 
   const subtitleStreams = useMemo(
     () =>
-      selectedOptions.mediaSource?.MediaStreams?.filter(
+      // Order like jellyfin-web (embedded first, externals last, forced/default up).
+      [
+        ...(selectedOptions.mediaSource?.MediaStreams?.filter(
           (x) => x.Type === "Subtitle",
-      ) || [],
+        ) || []),
+      ].sort(compareTracksForMenu),
     [selectedOptions.mediaSource],
   );
 

components/MediaSourceSheet.tsx

@@ -1,9 +1,8 @@
-import type { BottomSheetModal } from "@gorhom/bottom-sheet";
 import type {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
@@ -24,7 +23,6 @@ export const MediaSourceSheet: React.FC<Props> = ({
   const isTv = Platform.isTV;
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
-  const sheetModalRef = useRef<BottomSheetModal | null>(null);
 
   const getDisplayName = useCallback((source: MediaSourceInfo) => {
     const videoStream = source.MediaStreams?.find((x) => x.Type === "Video");
@@ -46,10 +44,7 @@ export const MediaSourceSheet: React.FC<Props> = ({
         <Text className='opacity-50 mb-1 text-xs'>{t("item_card.video")}</Text>
         <TouchableOpacity
           className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center'
-          onPress={() => {
+          onPress={() => setOpen(true)}
-            setOpen(true);
-            sheetModalRef.current?.present();
-          }}
         >
           <Text numberOfLines={1}>{selectedName}</Text>
         </TouchableOpacity>
@@ -58,7 +53,6 @@ export const MediaSourceSheet: React.FC<Props> = ({
       <FilterSheet
         open={open}
         setOpen={setOpen}
-        modalRef={sheetModalRef}
         title={t("item_card.video")}
         data={item.MediaSources || []}
         values={selected ? [selected] : []}

components/PendingAccountSaveModal.tsx

@@ -1,45 +0,0 @@
-import { useAtom, useAtomValue } from "jotai";
-import type React from "react";
-import { useEffect } from "react";
-import { Platform } from "react-native";
-import { SaveAccountModal } from "@/components/SaveAccountModal";
-import {
-  pendingAccountSaveAtom,
-  useJellyfin,
-  userAtom,
-} from "@/providers/JellyfinProvider";
-
-/**
- * Post-login save-account prompt. Login flows (password or Quick Connect)
- * only flag the intent via pendingAccountSaveAtom; the protection picker
- * shows here, AFTER the session is authorized — the login screen itself
- * unmounts as soon as the user is set, so it can't host the modal.
- */
-export const PendingAccountSaveModal: React.FC = () => {
-  const [pending, setPending] = useAtom(pendingAccountSaveAtom);
-  const user = useAtomValue(userAtom);
-  const { saveCurrentAccount } = useJellyfin();
-
-  // A logout before answering drops the intent — it must not resurface on
-  // the next (possibly different) login.
-  useEffect(() => {
-    if (!user && pending) setPending(null);
-  }, [user, pending, setPending]);
-
-  if (Platform.isTV) return null;
-
-  return (
-    <SaveAccountModal
-      visible={!!pending && !!user}
-      username={user?.Name ?? ""}
-      onClose={() => setPending(null)}
-      onSave={(securityType, pinCode) => {
-        const serverName = pending?.serverName;
-        setPending(null);
-        saveCurrentAccount({ securityType, pinCode, serverName }).catch(
-          (error) => console.warn("Failed to save account:", error),
-        );
-      }}
-    />
-  );
-};

components/PlatformDropdown.tsx

@@ -1,7 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
 import React, { useEffect } from "react";
-import { useTranslation } from "react-i18next";
 import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
@@ -210,7 +209,6 @@ const PlatformDropdownComponent = ({
   expoUIConfig,
   bottomSheetConfig,
 }: PlatformDropdownProps) => {
-  const { t } = useTranslation();
   const { showModal, hideModal, isVisible } = useGlobalModal();
 
   // Handle controlled open state for Android
@@ -382,7 +380,7 @@ const PlatformDropdownComponent = ({
 
   return (
     <TouchableOpacity onPress={handlePress} activeOpacity={0.7}>
-      {trigger || <Text className='text-white'>{t("common.open_menu")}</Text>}
+      {trigger || <Text className='text-white'>Open Menu</Text>}
     </TouchableOpacity>
   );
 };

components/PlayButton.tsx

@@ -502,8 +502,8 @@ export const PlayButton: React.FC<Props> = ({
   return (
     <TouchableOpacity
       disabled={!item}
-      accessibilityLabel={t("accessibility.play_button")}
+      accessibilityLabel='Play button'
-      accessibilityHint={t("accessibility.play_hint")}
+      accessibilityHint='Tap to play the media'
       onPress={onPress}
       className={"relative flex-1"}
     >

components/PlayButton.tv.tsx

@@ -2,7 +2,6 @@ import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useAtom } from "jotai";
 import { useCallback, useEffect } from "react";
-import { useTranslation } from "react-i18next";
 import { TouchableOpacity, View } from "react-native";
 import Animated, {
   Easing,
@@ -37,7 +36,6 @@ export const PlayButton: React.FC<Props> = ({
   colors,
   ...props
 }: Props) => {
-  const { t } = useTranslation();
   const [globalColorAtom] = useAtom(itemThemeColorAtom);
 
   // Use colors prop if provided, otherwise fallback to global atom
@@ -170,8 +168,8 @@ export const PlayButton: React.FC<Props> = ({
 
   return (
     <TouchableOpacity
-      accessibilityLabel={t("accessibility.play_button")}
+      accessibilityLabel='Play button'
-      accessibilityHint={t("accessibility.play_hint")}
+      accessibilityHint='Tap to play the media'
       onPress={onPress}
       className={"relative"}
       {...props}

components/PlayInRemoteSession.tsx

@@ -6,7 +6,6 @@ import {
 import { getSessionApi } from "@jellyfin/sdk/lib/utils/api/session-api";
 import { useAtomValue } from "jotai";
 import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
 import {
   FlatList,
   Modal,
@@ -32,7 +31,6 @@ export const PlayInRemoteSessionButton: React.FC<Props> = ({
   const [modalVisible, setModalVisible] = useState(false);
   const api = useAtomValue(apiAtom);
   const { sessions, isLoading } = useAllSessions({} as useSessionsProps);
-  const { t } = useTranslation();
   const handlePlayInSession = async (sessionId: string) => {
     if (!api || !item.Id) return;
 
@@ -67,9 +65,7 @@ export const PlayInRemoteSessionButton: React.FC<Props> = ({
         <View style={styles.centeredView}>
           <View style={styles.modalView}>
             <View style={styles.modalHeader}>
-              <Text style={styles.modalTitle}>
+              <Text style={styles.modalTitle}>Select Session</Text>
-                {t("home.sessions.select_session")}
-              </Text>
               <TouchableOpacity onPress={() => setModalVisible(false)}>
                 <Ionicons name='close' size={24} color='white' />
               </TouchableOpacity>
@@ -82,7 +78,7 @@ export const PlayInRemoteSessionButton: React.FC<Props> = ({
                 </View>
               ) : !sessions || sessions.length === 0 ? (
                 <Text style={styles.noSessionsText}>
-                  {t("home.sessions.no_active_sessions")}
+                  No active sessions found
                 </Text>
               ) : (
                 <FlatList
@@ -102,7 +98,7 @@ export const PlayInRemoteSessionButton: React.FC<Props> = ({
                         </Text>
                         {session.NowPlayingItem && (
                           <Text style={styles.nowPlaying} numberOfLines={1}>
-                            {t("home.sessions.now_playing")}{" "}
+                            Now playing:{" "}
                             {session.NowPlayingItem.SeriesName
                               ? `${session.NowPlayingItem.SeriesName} :`
                               : ""}

components/SubtitleTrackSelector.tsx

@@ -2,6 +2,7 @@ import type { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models"
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
+import { compareTracksForMenu } from "@/utils/jellyfin/subtitleUtils";
 import { tc } from "@/utils/textTools";
 import { Text } from "./common/Text";
 import { type OptionGroup, PlatformDropdown } from "./PlatformDropdown";
@@ -22,7 +23,9 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   const [open, setOpen] = useState(false);
 
   const subtitleStreams = useMemo(() => {
-    return source?.MediaStreams?.filter((x) => x.Type === "Subtitle");
+    const subs = source?.MediaStreams?.filter((x) => x.Type === "Subtitle");
+    // Order like jellyfin-web (embedded first, externals last, forced/default up).
+    return subs ? [...subs].sort(compareTracksForMenu) : subs;
   }, [source]);
 
   const selectedSubtitleSteam = useMemo(

components/TrackSheet.tsx

@@ -1,6 +1,5 @@
-import type { BottomSheetModal } from "@gorhom/bottom-sheet";
 import type { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
-import { useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
@@ -50,7 +49,6 @@ export const TrackSheet: React.FC<Props> = ({
     return streams;
   }, [streams, streamType, noneOption]);
   const [open, setOpen] = useState(false);
-  const sheetModalRef = useRef<BottomSheetModal | null>(null);
 
   if (isTv || (streams && streams.length === 0)) return null;
 
@@ -60,10 +58,7 @@ export const TrackSheet: React.FC<Props> = ({
         <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'
-          onPress={() => {
+          onPress={() => setOpen(true)}
-            setOpen(true);
-            sheetModalRef.current?.present();
-          }}
         >
           <Text numberOfLines={1}>
             {selected === -1 && streamType === "Subtitle"
@@ -75,7 +70,6 @@ export const TrackSheet: React.FC<Props> = ({
       <FilterSheet
         open={open}
         setOpen={setOpen}
-        modalRef={sheetModalRef}
         title={title}
         data={addNoneToSubtitles || []}
         values={

components/common/HeaderBackButton.tsx

@@ -1,6 +1,6 @@
-import { Feather } from "@expo/vector-icons";
+import { Ionicons } from "@expo/vector-icons";
 import { BlurView, type BlurViewProps } from "expo-blur";
-import { Keyboard, Platform } from "react-native";
+import { Platform } from "react-native";
 import { Pressable, type PressableProps } from "react-native-gesture-handler";
 import useRouter from "@/hooks/useAppRouter";
 
@@ -16,37 +16,30 @@ export const HeaderBackButton: React.FC<Props> = ({
 }) => {
   const router = useRouter();
 
-  // Dismiss the keyboard before navigating — otherwise it lingers over the
-  // previous screen (e.g. leaving the Jellyseerr login while typing).
-  const handleBack = () => {
-    Keyboard.dismiss();
-    router.back();
-  };
-
   if (Platform.OS === "ios") {
     return (
       <Pressable
-        onPress={handleBack}
+        onPress={() => router.back()}
         className='flex items-center justify-center w-9 h-9'
         {...pressableProps}
       >
-        <Feather name='chevron-left' size={28} color='white' />
+        <Ionicons name='arrow-back' size={24} color='white' />
       </Pressable>
     );
   }
 
   if (background === "transparent" && Platform.OS !== "android")
     return (
-      <Pressable onPress={handleBack} {...pressableProps}>
+      <Pressable onPress={() => router.back()} {...pressableProps}>
         <BlurView
           {...props}
           intensity={100}
           className='overflow-hidden rounded-full p-2'
         >
-          <Feather
+          <Ionicons
             className='drop-shadow-2xl'
-            name='chevron-left'
+            name='arrow-back'
-            size={28}
+            size={24}
             color='white'
           />
         </BlurView>
@@ -55,17 +48,14 @@ export const HeaderBackButton: React.FC<Props> = ({
 
   return (
     <Pressable
-      onPress={handleBack}
+      onPress={() => router.back()}
-      // Match the Settings page back button: chevron flush to the edge with a
+      className=' rounded-full p-2'
-      // 16px gap before the title (the old `p-2` pushed both arrow and title
-      // too far right). drop-shadow keeps it readable over images.
-      style={{ marginRight: 16 }}
       {...pressableProps}
     >
-      <Feather
+      <Ionicons
         className='drop-shadow-2xl'
-        name='chevron-left'
+        name='arrow-back'
-        size={28}
+        size={24}
         color='white'
       />
     </Pressable>

components/common/SettingSwitch.tsx

@@ -1,40 +0,0 @@
-import type React from "react";
-import { Platform, Switch, type SwitchProps, View } from "react-native";
-
-/**
- * Settings toggle. Android's native Switch lays out ~40px tall / ~56px wide and
- * inflates list rows (iOS renders it ~31px). A plain `transform: scale` is
- * visual-only and does NOT shrink the layout box, so we pin the Switch inside a
- * FIXED-SIZE box (overflow hidden) and center it:
- *  - the fixed height caps the row height (compact, uniform rows),
- *  - the fixed width + centering keep the switch in the exact same spot in the
- *    on/off states (a non-fixed wrapper let its width fluctuate between states,
- *    which shifted the switch sideways on toggle).
- * iOS renders the switch untouched.
- *
- * Tunables: BOX_H drives the row height; SCALE shrinks the visual to fit the
- * box; keep BOX_W >= scaled visual width to avoid clipping the switch sideways.
- */
-const BOX_W = 40;
-const BOX_H = 30;
-const SCALE = 0.9;
-
-export const SettingSwitch: React.FC<SwitchProps> = (props) => {
-  if (Platform.OS !== "android") return <Switch {...props} />;
-  return (
-    <View
-      style={{
-        width: BOX_W,
-        height: BOX_H,
-        alignItems: "center",
-        justifyContent: "center",
-        overflow: "hidden",
-      }}
-    >
-      <Switch
-        {...props}
-        style={[props.style, { transform: [{ scale: SCALE }] }]}
-      />
-    </View>
-  );
-};

components/downloads/DownloadCard.tsx

@@ -1,7 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import { Image } from "expo-image";
+import { t } from "i18next";
 import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
 import {
   ActivityIndicator,
   TouchableOpacity,
@@ -35,7 +35,6 @@ interface DownloadCardProps extends TouchableOpacityProps {
 }
 
 export const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
-  const { t } = useTranslation();
   const { cancelDownload } = useDownload();
   const router = useRouter();
   const queryClient = useNetworkAwareQueryClient();
@@ -174,9 +173,7 @@ export const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
 
             {isTranscoding && (
               <View className='bg-purple-600/20 px-2 py-0.5 rounded-md mt-1 self-start'>
-                <Text className='text-xs text-purple-400'>
+                <Text className='text-xs text-purple-400'>Transcoding</Text>
-                  {t("home.downloads.transcoding")}
-                </Text>
               </View>
             )}
 

components/downloads/SeriesCard.tsx

@@ -16,12 +16,9 @@ export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({ items }) => {
   const { showActionSheetWithOptions } = useActionSheet();
   const router = useRouter();
 
-  // Keyed on SeriesId so recycled FlashList cells re-read the correct poster
-  // instead of freezing the first-rendered series' image (empty deps bug).
   const base64Image = useMemo(() => {
-    const seriesId = items[0]?.SeriesId;
+    return storage.getString(items[0].SeriesId!);
-    return seriesId ? storage.getString(seriesId) : undefined;
+  }, []);
-  }, [items[0]?.SeriesId]);
 
   const deleteSeries = useCallback(
     async () =>

components/filters/FilterButton.tsx

@@ -1,11 +1,9 @@
 import { FontAwesome, Ionicons } from "@expo/vector-icons";
-import type { BottomSheetModal } from "@gorhom/bottom-sheet";
 import { useQuery } from "@tanstack/react-query";
-import { useCallback, useRef, useState } from "react";
+import { useState } from "react";
 import { TouchableOpacity, View, type ViewProps } from "react-native";
 import { Text } from "@/components/common/Text";
 import { FilterSheet } from "./FilterSheet";
-import { useFilterSheet } from "./FilterSheetProvider";
 
 interface FilterButtonProps<T> extends ViewProps {
   id: string;
@@ -35,63 +33,22 @@ export const FilterButton = <T,>({
   icon = "filter",
   ...props
 }: FilterButtonProps<T>) => {
-  // When a FilterSheetProvider is present (library / collections), all buttons
+  const [open, setOpen] = useState(false);
-  // share one sheet so two can never stack. Outside a provider (e.g. logs,
-  // discover), fall back to this button's own standalone sheet.
-  const shared = useFilterSheet();
 
-  const { data: filters, isLoading } = useQuery<T[]>({
+  const { data: filters } = useQuery<T[]>({
     queryKey: ["filters", title, queryKey, id],
     queryFn,
     staleTime: 0,
     enabled: !!id && !!queryFn && !!queryKey,
   });
 
-  // Standalone-mode state (unused in shared mode).
-  const [open, setOpen] = useState(false);
-  const sheetModalRef = useRef<BottomSheetModal | null>(null);
-
-  const onButtonPress = useCallback(() => {
-    if (shared) {
-      shared.openFilter({
-        key: `${id}:${queryKey}`,
-        id,
-        queryKey,
-        queryFn,
-        title,
-        values: values as unknown[],
-        set: set as (value: unknown[]) => void,
-        renderItemLabel: renderItemLabel as (item: unknown) => React.ReactNode,
-        searchFilter: searchFilter as
-          | ((item: unknown, query: string) => boolean)
-          | undefined,
-        disableSearch,
-        multiple,
-      });
-      return;
-    }
-    // present() must run from the press handler: from an effect after a state
-    // update it silently no-ops on the new architecture and the sheet never
-    // appears.
-    setOpen(true);
-    sheetModalRef.current?.present();
-  }, [
-    shared,
-    id,
-    queryKey,
-    queryFn,
-    title,
-    values,
-    set,
-    renderItemLabel,
-    searchFilter,
-    disableSearch,
-    multiple,
-  ]);
-
   return (
     <>
-      <TouchableOpacity onPress={onButtonPress}>
+      <TouchableOpacity
+        onPress={() => {
+          filters?.length && setOpen(true);
+        }}
+      >
         <View
           className={`
             px-3 py-1.5 rounded-full flex flex-row items-center space-x-1
@@ -128,13 +85,10 @@ export const FilterButton = <T,>({
           )}
         </View>
       </TouchableOpacity>
-      {!shared && (
       <FilterSheet<T>
         title={title}
         open={open}
         setOpen={setOpen}
-          modalRef={sheetModalRef}
-          loading={isLoading}
         data={filters}
         values={values}
         set={set}
@@ -143,7 +97,6 @@ export const FilterButton = <T,>({
         disableSearch={disableSearch}
         multiple={multiple}
       />
-      )}
     </>
   );
 };

components/filters/FilterSheet.tsx

@@ -7,14 +7,7 @@ import {
 } from "@gorhom/bottom-sheet";
 import { isEqual } from "lodash";
 import type React from "react";
-import {
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
 import { useTranslation } from "react-i18next";
 import {
   StyleSheet,
@@ -26,21 +19,11 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { Button } from "../Button";
 import { Input } from "../common/Input";
-import { Loader } from "../Loader";
 
 interface Props<T> extends ViewProps {
   open: boolean;
   setOpen: (open: boolean) => void;
-  /**
-   * Modal ref the opener must use to present() the sheet from inside its
-   * press handler. On the new architecture with Reanimated 4, present()
-   * called from an effect after a state update silently no-ops — the sheet
-   * mounts nothing. Presenting straight from the gesture handler works.
-   */
-  modalRef: React.RefObject<BottomSheetModal | null>;
   data?: T[] | null;
-  /** True while the options are loading — shows a loader inside the sheet. */
-  loading?: boolean;
   values: T[];
   set: (value: T[]) => void;
   title: string;
@@ -83,18 +66,16 @@ const LIMIT = 100;
 export const FilterSheet = <T,>({
   values,
   data: _data,
-  loading = false,
   open,
   set,
   setOpen,
-  modalRef,
   title,
   searchFilter,
   renderItemLabel,
   disableSearch = false,
   multiple = false,
 }: Props<T>) => {
-  const bottomSheetModalRef = modalRef;
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
   const snapPoints = useMemo(() => ["85%"], []);
   const { t } = useTranslation();
   const insets = useSafeAreaInsets();
@@ -103,24 +84,19 @@ export const FilterSheet = <T,>({
   const [offset, setOffset] = useState<number>(0);
 
   const [search, setSearch] = useState<string>("");
-  // Filtering and re-rendering the option list on every keystroke blocks the
-  // JS thread on large lists (2000+ tags); the controlled input then snaps the
-  // native text back to a stale value (lost/reappearing letters). Deferring the
-  // value keeps the keystroke render cheap and runs the list update after.
-  const deferredSearch = useDeferredValue(search);
 
   const [showSearch, setShowSearch] = useState<boolean>(false);
 
   const filteredData = useMemo(() => {
-    if (!deferredSearch) return _data;
+    if (!search) return _data;
     const results = [];
     for (let i = 0; i < (_data?.length || 0); i++) {
-      if (_data && searchFilter?.(_data[i], deferredSearch)) {
+      if (_data && searchFilter?.(_data[i], search)) {
         results.push(_data[i]);
       }
     }
     return results.slice(0, 100);
-  }, [deferredSearch, _data, searchFilter]);
+  }, [search, _data, searchFilter]);
 
   useEffect(() => {
     if (!data || data.length === 0 || disableSearch) return;
@@ -151,28 +127,21 @@ export const FilterSheet = <T,>({
     setData(newData);
   }, [offset, _data]);
 
-  // Opening is imperative (see the modalRef prop); this effect only closes.
-  // It also never calls dismiss() on a modal that was never presented.
-  const wasPresentedRef = useRef(false);
   useEffect(() => {
-    if (!open && wasPresentedRef.current) {
+    if (open) bottomSheetModalRef.current?.present();
-      bottomSheetModalRef.current?.dismiss();
+    else bottomSheetModalRef.current?.dismiss();
-    }
   }, [open]);
 
   const handleSheetChanges = useCallback((index: number) => {
-    if (index >= 0) {
+    if (index === -1) {
-      wasPresentedRef.current = true;
-    } else if (index === -1) {
-      wasPresentedRef.current = false;
       setOpen(false);
     }
   }, []);
 
   const renderData = useMemo(() => {
-    if (deferredSearch.length > 0 && showSearch) return filteredData;
+    if (search.length > 0 && showSearch) return filteredData;
     return data;
-  }, [deferredSearch, showSearch, filteredData, data]);
+  }, [search, filteredData, data]);
 
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
@@ -185,54 +154,6 @@ export const FilterSheet = <T,>({
     [],
   );
 
-  // Memoized so typing in the search input (urgent render with an unchanged
-  // deferred value) doesn't rebuild up to 100 row elements per keystroke.
-  const renderedRows = useMemo(
-    () =>
-      renderData?.map((item, index) => (
-        <View key={index}>
-          <TouchableOpacity
-            onPress={() => {
-              // Match the deep-equality rule used to render the selected
-              // state below — option objects are recreated across renders,
-              // so reference checks would re-add an already selected item.
-              const isSelected = values.some((value) => isEqual(value, item));
-              if (multiple) {
-                if (!isSelected) set(values.concat(item));
-                else set(values.filter((value) => !isEqual(value, item)));
-
-                setTimeout(() => {
-                  setOpen(false);
-                }, 250);
-              } else {
-                if (!isSelected) {
-                  set([item]);
-                  setTimeout(() => {
-                    setOpen(false);
-                  }, 250);
-                }
-              }
-            }}
-            className=' bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between'
-          >
-            <Text className='flex shrink'>{renderItemLabel(item)}</Text>
-            {values.some((i) => isEqual(i, item)) ? (
-              <Ionicons name='radio-button-on' size={24} color='white' />
-            ) : (
-              <Ionicons name='radio-button-off' size={24} color='white' />
-            )}
-          </TouchableOpacity>
-          <View
-            style={{
-              height: StyleSheet.hairlineWidth,
-            }}
-            className='h-1 divide-neutral-700 '
-          />
-        </View>
-      )),
-    [renderData, values, multiple, set, setOpen, renderItemLabel],
-  );
-
   return (
     <BottomSheetModal
       ref={bottomSheetModalRef}
@@ -261,15 +182,9 @@ export const FilterSheet = <T,>({
           }}
         >
           <Text className='font-bold text-2xl'>{title}</Text>
-          {loading ? (
-            <View className='my-8 flex items-center justify-center'>
-              <Loader />
-            </View>
-          ) : (
           <Text className='mb-2 text-neutral-500'>
             {t("search.x_items", { count: _data?.length })}
           </Text>
-          )}
           {showSearch && (
             <Input
               placeholder={t("search.search")}
@@ -288,7 +203,43 @@ export const FilterSheet = <T,>({
             }}
             className='mb-4 flex flex-col rounded-xl overflow-hidden'
           >
-            {renderedRows}
+            {renderData?.map((item, index) => (
+              <View key={index}>
+                <TouchableOpacity
+                  onPress={() => {
+                    if (multiple) {
+                      if (!values.includes(item)) set(values.concat(item));
+                      else set(values.filter((v) => v !== item));
+
+                      setTimeout(() => {
+                        setOpen(false);
+                      }, 250);
+                    } else {
+                      if (!values.includes(item)) {
+                        set([item]);
+                        setTimeout(() => {
+                          setOpen(false);
+                        }, 250);
+                      }
+                    }
+                  }}
+                  className=' bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between'
+                >
+                  <Text className='flex shrink'>{renderItemLabel(item)}</Text>
+                  {values.some((i) => isEqual(i, item)) ? (
+                    <Ionicons name='radio-button-on' size={24} color='white' />
+                  ) : (
+                    <Ionicons name='radio-button-off' size={24} color='white' />
+                  )}
+                </TouchableOpacity>
+                <View
+                  style={{
+                    height: StyleSheet.hairlineWidth,
+                  }}
+                  className='h-1 divide-neutral-700 '
+                />
+              </View>
+            ))}
           </View>
           {data.length < (_data?.length || 0) && (
             <Button

components/filters/FilterSheetProvider.tsx

@@ -1,74 +0,0 @@
-import type { BottomSheetModal } from "@gorhom/bottom-sheet";
-import {
-  createContext,
-  type PropsWithChildren,
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { type FilterConfig, SharedFilterSheet } from "./SharedFilterSheet";
-
-interface FilterSheetContextType {
-  openFilter: (config: FilterConfig) => void;
-}
-
-const FilterSheetContext = createContext<FilterSheetContextType | null>(null);
-
-/**
- * Returns the shared-sheet controller, or null when rendered outside a
- * FilterSheetProvider — FilterButton then falls back to its own standalone
- * sheet (used by screens that don't host a provider, e.g. logs / discover).
- */
-export const useFilterSheet = (): FilterSheetContextType | null =>
-  useContext(FilterSheetContext);
-
-/**
- * Hosts the single shared filter sheet for a screen. Every FilterButton under
- * it calls openFilter() to show its options in that one sheet — so two sheets
- * can never stack regardless of how fast the buttons are tapped. present() runs
- * synchronously from the button's press handler (the modal is always mounted).
- */
-export const FilterSheetProvider: React.FC<PropsWithChildren> = ({
-  children,
-}) => {
-  const modalRef = useRef<BottomSheetModal | null>(null);
-  const [open, setOpen] = useState(false);
-  const [config, setConfig] = useState<FilterConfig | null>(null);
-
-  // First-wins guard. With a single shared sheet there is exactly one source of
-  // truth (this ref) reset on the one close path — so unlike a per-button guard
-  // it can't get stuck on remounts or multiple instances. A second tap during
-  // the first sheet's open animation is ignored; the first tapped filter wins.
-  const openRef = useRef(false);
-
-  const openFilter = useCallback((next: FilterConfig) => {
-    if (openRef.current) return;
-    openRef.current = true;
-    setConfig(next);
-    setOpen(true);
-    modalRef.current?.present();
-  }, []);
-
-  // Single close path for every dismissal (select / swipe / backdrop) — frees
-  // the guard reliably.
-  const closeSheet = useCallback(() => {
-    openRef.current = false;
-    setOpen(false);
-  }, []);
-
-  const value = useMemo(() => ({ openFilter }), [openFilter]);
-
-  return (
-    <FilterSheetContext.Provider value={value}>
-      {children}
-      <SharedFilterSheet
-        modalRef={modalRef}
-        open={open}
-        setOpen={closeSheet}
-        config={config}
-      />
-    </FilterSheetContext.Provider>
-  );
-};

components/filters/ResetFiltersButton.tsx

@@ -1,24 +1,38 @@
 import { Ionicons } from "@expo/vector-icons";
+import { useAtom } from "jotai";
 import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
-import { useFilterReset } from "@/hooks/useFilterReset";
+import {
+  filterByAtom,
+  genreFilterAtom,
+  tagsFilterAtom,
+  yearFilterAtom,
+} from "@/utils/atoms/filters";
 
-interface Props extends TouchableOpacityProps {
+interface Props extends TouchableOpacityProps {}
-  libraryId: string;
-}
 
-export const ResetFiltersButton: React.FC<Props> = ({
+export const ResetFiltersButton: React.FC<Props> = ({ ...props }) => {
-  libraryId,
+  const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
-  ...props
+  const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
-}) => {
+  const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
-  const { hasActiveFilters, resetAllFilters } = useFilterReset(libraryId);
+  const [selectedFilters, setSelectedFilters] = useAtom(filterByAtom);
 
-  if (!hasActiveFilters) {
+  if (
+    selectedGenres.length === 0 &&
+    selectedTags.length === 0 &&
+    selectedYears.length === 0 &&
+    selectedFilters.length === 0
+  ) {
     return null;
   }
 
   return (
     <TouchableOpacity
-      onPress={resetAllFilters}
+      onPress={() => {
+        setSelectedGenres([]);
+        setSelectedTags([]);
+        setSelectedYears([]);
+        setSelectedFilters([]);
+      }}
       className='bg-purple-600 rounded-full w-[30px] h-[30px] flex items-center justify-center mr-1'
       {...props}
     >

components/filters/SharedFilterSheet.tsx

@@ -1,286 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetScrollView,
-} from "@gorhom/bottom-sheet";
-import { useQuery } from "@tanstack/react-query";
-import { isEqual } from "lodash";
-import type React from "react";
-import {
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { useTranslation } from "react-i18next";
-import { StyleSheet, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Text } from "@/components/common/Text";
-import { Button } from "../Button";
-import { Input } from "../common/Input";
-import { Loader } from "../Loader";
-
-/**
- * Config for the filter currently shown by the shared sheet. Generics are erased
- * at the FilterButton → provider boundary, so item-typed callbacks use `any`.
- */
-export interface FilterConfig {
-  /** Stable identity — changing it remounts the content with fresh state. */
-  key: string;
-  id: string;
-  queryKey: string;
-  queryFn: (params: any) => Promise<any>;
-  title: string;
-  values: any[];
-  set: (value: any[]) => void;
-  renderItemLabel: (item: any) => React.ReactNode;
-  searchFilter?: (item: any, query: string) => boolean;
-  disableSearch?: boolean;
-  multiple?: boolean;
-}
-
-const LIMIT = 100;
-
-interface SharedFilterSheetProps {
-  modalRef: React.RefObject<BottomSheetModal | null>;
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  config: FilterConfig | null;
-}
-
-/**
- * The single shared filter sheet — one BottomSheetModal hosted by
- * FilterSheetProvider for a whole screen; FilterButtons only swap its `config`.
- * Because only one modal ever exists, rapid taps across buttons can never stack
- * two sheets, so no guard/timer is needed. The modal shell stays mounted with a
- * stable ref (present() can run synchronously from the tapping button); the
- * inner content is keyed by the active filter so its pagination/search reset
- * cleanly between filters.
- */
-export const SharedFilterSheet: React.FC<SharedFilterSheetProps> = ({
-  modalRef,
-  open,
-  setOpen,
-  config,
-}) => {
-  const snapPoints = useMemo(() => ["85%"], []);
-  const insets = useSafeAreaInsets();
-
-  // Opening is imperative (the provider calls present()); this effect only
-  // closes, and never dismisses a modal that was never presented.
-  const wasPresentedRef = useRef(false);
-  useEffect(() => {
-    if (!open && wasPresentedRef.current) {
-      modalRef.current?.dismiss();
-    }
-  }, [open, modalRef]);
-
-  const handleSheetChanges = useCallback(
-    (index: number) => {
-      if (index >= 0) {
-        wasPresentedRef.current = true;
-      } else if (index === -1) {
-        wasPresentedRef.current = false;
-        setOpen(false);
-      }
-    },
-    [setOpen],
-  );
-
-  const requestClose = useCallback(() => setOpen(false), [setOpen]);
-
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
-  return (
-    <BottomSheetModal
-      ref={modalRef}
-      index={0}
-      snapPoints={snapPoints}
-      onChange={handleSheetChanges}
-      backdropComponent={renderBackdrop}
-      handleIndicatorStyle={{ backgroundColor: "white" }}
-      backgroundStyle={{ backgroundColor: "#171717" }}
-    >
-      <BottomSheetScrollView style={{ flex: 1 }}>
-        <View
-          className='mt-2 mb-8'
-          style={{
-            paddingLeft: Math.max(16, insets.left),
-            paddingRight: Math.max(16, insets.right),
-          }}
-        >
-          {config && (
-            <SharedFilterSheetContent
-              key={config.key}
-              config={config}
-              onRequestClose={requestClose}
-            />
-          )}
-        </View>
-      </BottomSheetScrollView>
-    </BottomSheetModal>
-  );
-};
-
-interface SharedFilterSheetContentProps {
-  config: FilterConfig;
-  onRequestClose: () => void;
-}
-
-const SharedFilterSheetContent: React.FC<SharedFilterSheetContentProps> = ({
-  config,
-  onRequestClose,
-}) => {
-  const {
-    id,
-    queryKey,
-    queryFn,
-    title,
-    values,
-    set,
-    renderItemLabel,
-    searchFilter,
-    disableSearch = false,
-    multiple = false,
-  } = config;
-  const { t } = useTranslation();
-
-  // The options query lives here (deduped with the FilterButton's own query via
-  // the shared React Query key), so the list stays live after the sheet opens.
-  const { data: _data, isLoading: loading } = useQuery<any[]>({
-    queryKey: ["filters", title, queryKey, id],
-    queryFn,
-    staleTime: 0,
-    enabled: !!id && !!queryFn && !!queryKey,
-  });
-
-  const [data, setData] = useState<any[]>([]);
-  const [offset, setOffset] = useState(0);
-
-  const [search, setSearch] = useState("");
-  // Filtering on every keystroke blocks the JS thread on large lists; defer the
-  // value so the keystroke render stays cheap and the list update runs after.
-  const deferredSearch = useDeferredValue(search);
-  const [showSearch, setShowSearch] = useState(false);
-
-  const filteredData = useMemo(() => {
-    if (!deferredSearch) return _data;
-    const results = [];
-    for (let i = 0; i < (_data?.length || 0); i++) {
-      if (_data && searchFilter?.(_data[i], deferredSearch)) {
-        results.push(_data[i]);
-      }
-    }
-    return results.slice(0, 100);
-  }, [deferredSearch, _data, searchFilter]);
-
-  useEffect(() => {
-    if (!data || data.length === 0 || disableSearch) return;
-    if (data.length > 15) {
-      setShowSearch(true);
-    }
-  }, [data, disableSearch]);
-
-  // Loads data in batches of LIMIT from offset (efficient "load more").
-  useEffect(() => {
-    if (!_data || _data.length === 0) return;
-
-    const newData = [...data];
-    for (let i = offset; i < Math.min(_data.length, offset + LIMIT); i++) {
-      const item = _data[i];
-      // Option objects are recreated across renders → dedupe by value.
-      const exists = newData.some((existingItem) =>
-        isEqual(existingItem, item),
-      );
-      if (!exists) {
-        newData.push(item);
-      }
-    }
-    setData(newData);
-  }, [offset, _data]);
-
-  const renderData = useMemo(() => {
-    if (deferredSearch.length > 0 && showSearch) return filteredData;
-    return data;
-  }, [deferredSearch, showSearch, filteredData, data]);
-
-  const renderedRows = useMemo(
-    () =>
-      renderData?.map((item, index) => (
-        <View key={index}>
-          <TouchableOpacity
-            onPress={() => {
-              const isSelected = values.some((value) => isEqual(value, item));
-              if (multiple) {
-                if (!isSelected) set(values.concat(item));
-                else set(values.filter((value) => !isEqual(value, item)));
-                setTimeout(() => onRequestClose(), 250);
-              } else if (!isSelected) {
-                set([item]);
-                setTimeout(() => onRequestClose(), 250);
-              }
-            }}
-            className='bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between'
-          >
-            <Text className='flex shrink'>{renderItemLabel(item)}</Text>
-            {values.some((i) => isEqual(i, item)) ? (
-              <Ionicons name='radio-button-on' size={24} color='white' />
-            ) : (
-              <Ionicons name='radio-button-off' size={24} color='white' />
-            )}
-          </TouchableOpacity>
-          <View
-            style={{ height: StyleSheet.hairlineWidth }}
-            className='h-1 divide-neutral-700'
-          />
-        </View>
-      )),
-    [renderData, values, multiple, set, renderItemLabel, onRequestClose],
-  );
-
-  return (
-    <>
-      <Text className='font-bold text-2xl'>{title}</Text>
-      {loading ? (
-        <View className='my-8 flex items-center justify-center'>
-          <Loader />
-        </View>
-      ) : (
-        <Text className='mb-2 text-neutral-500'>
-          {t("search.x_items", { count: _data?.length })}
-        </Text>
-      )}
-      {showSearch && (
-        <Input
-          placeholder={t("search.search")}
-          className='my-2 border-neutral-800 border'
-          value={search}
-          onChangeText={setSearch}
-          returnKeyType='done'
-        />
-      )}
-      <View
-        style={{ borderRadius: 20, overflow: "hidden" }}
-        className='mb-4 flex flex-col rounded-xl overflow-hidden'
-      >
-        {renderedRows}
-      </View>
-      {data.length < (_data?.length || 0) && (
-        <Button onPress={() => setOffset(offset + LIMIT)}>Load more</Button>
-      )}
-    </>
-  );
-};

components/home/Home.tsx

@@ -39,11 +39,7 @@ import { useRefreshLibraryOnFocus } from "@/hooks/useRefreshLibraryOnFocus";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useDownload } from "@/providers/DownloadProvider";
 import { useIntroSheet } from "@/providers/IntroSheetProvider";
-import {
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-  apiAtom,
-  pendingAccountSaveAtom,
-  userAtom,
-} from "@/providers/JellyfinProvider";
 import { SortByOption, SortOrderOption } from "@/utils/atoms/filters";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
@@ -93,9 +89,6 @@ const HomeMobile = () => {
   const invalidateCache = useInvalidatePlaybackProgressCache();
   const [loadedSections, setLoadedSections] = useState<Set<string>>(new Set());
   const { showIntro } = useIntroSheet();
-  // Gate the intro so it can't steal presentation from the post-login
-  // save-account sheet (both are BottomSheetModals): wait until no save is pending.
-  const pendingAccountSave = useAtomValue(pendingAccountSaveAtom);
 
   // Fallback refresh for newly added content when returning to the home screen
   // (primary path is the LibraryChanged WebSocket event).
@@ -104,9 +97,7 @@ const HomeMobile = () => {
   // Show intro modal on first launch
   useEffect(() => {
     const hasShownIntro = storage.getBoolean("hasShownIntro");
-    // Defer while the save-account sheet is up; this effect re-runs and schedules
+    if (!hasShownIntro) {
-    // the intro once the sheet is dismissed (pendingAccountSaveAtom cleared).
-    if (!hasShownIntro && !pendingAccountSave) {
       const timer = setTimeout(() => {
         showIntro();
       }, 1000);
@@ -115,7 +106,7 @@ const HomeMobile = () => {
         clearTimeout(timer);
       };
     }
-  }, [showIntro, pendingAccountSave]);
+  }, [showIntro]);
 
   useEffect(() => {
     if (isConnected && !prevIsConnected.current) {

components/home/InfiniteScrollingCollectionList.tsx

@@ -15,7 +15,6 @@ import {
 import { SectionHeader } from "@/components/common/SectionHeader";
 import { Text } from "@/components/common/Text";
 import MoviePoster from "@/components/posters/MoviePoster";
-import { useSettings } from "@/utils/atoms/settings";
 import { Colors } from "../../constants/Colors";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
@@ -86,7 +85,6 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
   }, [isSuccess, onLoaded]);
 
   const { t } = useTranslation();
-  const { settings } = useSettings();
 
   // Flatten all pages into a single array (and de-dupe by Id to avoid UI duplicates)
   const allItems = useMemo(() => {
@@ -188,10 +186,7 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
                 `}
               >
                 {item.Type === "Episode" && orientation === "horizontal" && (
-                  <ContinueWatchingPoster
+                  <ContinueWatchingPoster item={item} />
-                    item={item}
-                    useEpisodePoster={settings?.useEpisodeImagesForNextUp}
-                  />
                 )}
                 {item.Type === "Episode" && orientation === "vertical" && (
                   <SeriesPoster item={item} />

components/home/InfiniteScrollingCollectionList.tv.tsx

@@ -24,7 +24,6 @@ import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
 import { SortByOption, SortOrderOption } from "@/utils/atoms/filters";
-import { useSettings } from "@/utils/atoms/settings";
 import { scaleSize } from "@/utils/scaleSize";
 
 // Extra padding to accommodate scale animation (1.05x) and glow shadow
@@ -166,7 +165,6 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
     });
 
   const { t } = useTranslation();
-  const { settings } = useSettings();
 
   const allItems = useMemo(() => {
     const items = data?.pages.flat() ?? [];
@@ -227,7 +225,6 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
             hasTVPreferredFocus={isFirstItem}
             onFocus={() => handleItemFocus(item)}
             width={itemWidth}
-            preferEpisodeImage={settings?.useEpisodeImagesForNextUp}
           />
         </View>
       );
@@ -240,7 +237,6 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
       showItemActions,
       handleItemFocus,
       ITEM_GAP,
-      settings?.useEpisodeImagesForNextUp,
     ],
   );
 

components/home/ScrollingCollectionList.tsx

@@ -9,7 +9,6 @@ import { ScrollView, View, type ViewProps } from "react-native";
 import { Text } from "@/components/common/Text";
 import MoviePoster from "@/components/posters/MoviePoster";
 import { useInView } from "@/hooks/useInView";
-import { useSettings } from "@/utils/atoms/settings";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
 import { ItemCardText } from "../ItemCardText";
@@ -51,7 +50,6 @@ export const ScrollingCollectionList: React.FC<Props> = ({
   });
 
   const { t } = useTranslation();
-  const { settings } = useSettings();
 
   // Show skeleton if loading OR if lazy loading is enabled and not in view yet
   const shouldShowSkeleton = isLoading || (enableLazyLoading && !isInView);
@@ -110,10 +108,7 @@ export const ScrollingCollectionList: React.FC<Props> = ({
                 `}
               >
                 {item.Type === "Episode" && orientation === "horizontal" && (
-                  <ContinueWatchingPoster
+                  <ContinueWatchingPoster item={item} />
-                    item={item}
-                    useEpisodePoster={settings?.useEpisodeImagesForNextUp}
-                  />
                 )}
                 {item.Type === "Episode" && orientation === "vertical" && (
                   <SeriesPoster item={item} />

components/home/TVHeroCarousel.tsx

@@ -65,11 +65,10 @@ const HeroCard: React.FC<HeroCardProps> = React.memo(
     const posterUrl = useMemo(() => {
       if (!api) return null;
 
-      // For episodes, always use series thumb.
+      // For episodes, always use series thumb
-      // Matched pair: ParentThumbItemId owns the Thumb tag, not ParentBackdropItemId.
       if (item.Type === "Episode") {
-        if (item.ParentThumbItemId && item.ParentThumbImageTag) {
+        if (item.ParentThumbImageTag) {
-          return `${api.basePath}/Items/${item.ParentThumbItemId}/Images/Thumb?fillHeight=400&quality=80&tag=${item.ParentThumbImageTag}`;
+          return `${api.basePath}/Items/${item.ParentBackdropItemId}/Images/Thumb?fillHeight=400&quality=80&tag=${item.ParentThumbImageTag}`;
         }
         if (item.SeriesId) {
           return `${api.basePath}/Items/${item.SeriesId}/Images/Thumb?fillHeight=400&quality=80`;

components/list/ListGroup.tsx

@@ -23,11 +23,9 @@ export const ListGroup: React.FC<PropsWithChildren<Props>> = ({
 
   return (
     <View {...props}>
-      {title ? (
       <Text className='ml-4 mb-1 uppercase text-[#8E8D91] text-xs'>
         {title}
       </Text>
-      ) : null}
       <View
         style={[]}
         className='flex flex-col rounded-xl overflow-hidden pl-0 bg-neutral-900'

components/list/ListItem.tsx

@@ -1,6 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { PropsWithChildren, ReactNode } from "react";
-import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
+import { TouchableOpacity, View, type ViewProps } from "react-native";
 import { Text } from "../common/Text";
 
 interface Props extends ViewProps {
@@ -34,17 +34,12 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
 }) => {
   const effectiveSubtitle = disabledByAdmin ? "Disabled by admin" : subtitle;
   const isDisabled = disabled || disabledByAdmin;
-  // Keep the row floor uniform; Android trims padding slightly (its native
-  // controls sit taller). Switch height is capped via SettingSwitch so toggle
-  // rows match non-toggle rows.
-  const rowSizing =
-    Platform.OS === "android" ? "min-h-[42px] py-1.5" : "min-h-[42px] py-2";
   if (onPress)
     return (
       <TouchableOpacity
         disabled={isDisabled}
         onPress={onPress}
-        className={`flex flex-row items-center justify-between bg-neutral-900 ${rowSizing} pr-4 pl-4 ${isDisabled ? "opacity-50" : ""}`}
+        className={`flex flex-row items-center justify-between bg-neutral-900 min-h-[42px] py-2 pr-4 pl-4 ${isDisabled ? "opacity-50" : ""}`}
         {...(viewProps as any)}
       >
         <ListItemContent
@@ -63,7 +58,7 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
     );
   return (
     <View
-      className={`flex flex-row items-center justify-between bg-neutral-900 ${rowSizing} pr-4 pl-4 ${isDisabled ? "opacity-50" : ""}`}
+      className={`flex flex-row items-center justify-between bg-neutral-900 min-h-[42px] py-2 pr-4 pl-4 ${isDisabled ? "opacity-50" : ""}`}
       {...viewProps}
     >
       <ListItemContent

components/livetv/TVGuideProgramCell.tsx

@@ -1,6 +1,5 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import React from "react";
-import { useTranslation } from "react-i18next";
 import { Animated, Pressable, StyleSheet, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
@@ -23,7 +22,6 @@ export const TVGuideProgramCell: React.FC<TVGuideProgramCellProps> = ({
   disabled = false,
   refSetter,
 }) => {
-  const { t } = useTranslation();
   const typography = useScaledTVTypography();
   const { focused, handleFocus, handleBlur } = useTVFocusAnimation({
     scaleAmount: 1,
@@ -70,7 +68,7 @@ export const TVGuideProgramCell: React.FC<TVGuideProgramCellProps> = ({
             <Text
               style={[styles.liveBadgeText, { fontSize: typography.callout }]}
             >
-              {t("player.live")}
+              LIVE
             </Text>
           </View>
         )}

components/livetv/TVLiveTVPage.tsx

@@ -235,7 +235,7 @@ export const TVLiveTVPage: React.FC = () => {
             marginBottom: 24,
           }}
         >
-          {t("live_tv.title")}
+          Live TV
         </Text>
 
         {/* Tab Bar */}

components/login/Login.tsx

@@ -3,7 +3,7 @@ import type { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
 import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import { t } from "i18next";
-import { useAtomValue, useSetAtom } from "jotai";
+import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useState } from "react";
 import {
   Alert,
@@ -20,16 +20,14 @@ import { Button } from "@/components/Button";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import JellyfinServerDiscovery from "@/components/JellyfinServerDiscovery";
-import { QuickConnectCodeModal } from "@/components/login/QuickConnectCodeModal";
 import { PreviousServersList } from "@/components/PreviousServersList";
+import { SaveAccountModal } from "@/components/SaveAccountModal";
 import { Colors } from "@/constants/Colors";
-import {
+import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
-  apiAtom,
+import type {
-  pendingAccountSaveAtom,
+  AccountSecurityType,
-  useJellyfin,
+  SavedServer,
-  userAtom,
+} from "@/utils/secureCredentials";
-} from "@/providers/JellyfinProvider";
-import type { SavedServer } from "@/utils/secureCredentials";
 
 const CredentialsSchema = z.object({
   username: z.string().min(1, t("login.username_required")),
@@ -39,17 +37,14 @@ export const Login: React.FC = () => {
   const api = useAtomValue(apiAtom);
   const navigation = useNavigation();
   const params = useLocalSearchParams();
-  const user = useAtomValue(userAtom);
   const {
     setServer,
     login,
     removeServer,
     initiateQuickConnect,
-    stopQuickConnectPolling,
     loginWithSavedCredential,
     loginWithPassword,
   } = useJellyfin();
-  const setPendingAccountSave = useSetAtom(pendingAccountSaveAtom);
 
   const {
     apiUrl: _apiUrl,
@@ -69,43 +64,13 @@ export const Login: React.FC = () => {
     password: _password || "",
   });
 
-  // Quick Connect code shown in the in-app sheet while polling for authorization
+  // Save account state
-  const [quickConnectCode, setQuickConnectCode] = useState<string | null>(null);
-
-  // Close the code sheet as soon as the session is authorized — the native
-  // Alert used before had no programmatic dismiss and stayed open after login.
-  // A Quick Connect login with "save account" on flags the post-login save:
-  // the protection picker shows globally once the session exists (this screen
-  // unmounts on login, so it can't host the modal).
-  useEffect(() => {
-    if (user) {
-      if (quickConnectCode && saveAccount) {
-        setPendingAccountSave({ serverName });
-      }
-      setQuickConnectCode(null);
-    }
-  }, [user]);
-
-  // Stop Quick Connect polling when leaving the login page (parity with TVLogin)
-  useEffect(() => {
-    return () => {
-      stopQuickConnectPolling();
-    };
-  }, [stopQuickConnectPolling]);
-
-  // Going back to server selection keeps this component mounted (same screen,
-  // different state), so the unmount cleanup above doesn't run. Without this a
-  // code authorized after leaving would silently log the user in later.
-  useEffect(() => {
-    if (!api?.basePath) {
-      stopQuickConnectPolling();
-      setQuickConnectCode(null);
-    }
-  }, [api?.basePath, stopQuickConnectPolling]);
-
-  // Save account state — only the intent lives here; the protection picker is
-  // the global PendingAccountSaveModal, shown after the login succeeds.
   const [saveAccount, setSaveAccount] = useState(false);
+  const [showSaveModal, setShowSaveModal] = useState(false);
+  const [pendingLogin, setPendingLogin] = useState<{
+    username: string;
+    password: string;
+  } | null>(null);
 
   // Handle URL params for server connection
   useEffect(() => {
@@ -152,34 +117,55 @@ export const Login: React.FC = () => {
     const result = CredentialsSchema.safeParse(credentials);
     if (!result.success) return;
 
-    const ok = await performLogin(credentials.username, credentials.password);
+    if (saveAccount) {
-    // The protection picker shows AFTER a successful login (global modal) —
+      setPendingLogin({
-    // never for a failed one.
+        username: credentials.username,
-    if (ok && saveAccount) {
+        password: credentials.password,
-      setPendingAccountSave({ serverName });
+      });
+      setShowSaveModal(true);
+    } else {
+      await performLogin(credentials.username, credentials.password);
     }
   };
 
   const performLogin = async (
     username: string,
     password: string,
-  ): Promise<boolean> => {
+    options?: {
+      saveAccount?: boolean;
+      securityType?: AccountSecurityType;
+      pinCode?: string;
+    },
+  ) => {
     setLoading(true);
     try {
-      await login(username, password, serverName);
+      await login(username, password, serverName, options);
-      return true;
     } catch (error) {
       if (error instanceof Error) {
         Alert.alert(t("login.connection_failed"), error.message);
       } else {
         Alert.alert(
           t("login.connection_failed"),
-          t("login.an_unexpected_error_occurred"),
+          t("login.an_unexpected_error_occured"),
         );
       }
-      return false;
     } finally {
       setLoading(false);
+      setPendingLogin(null);
+    }
+  };
+
+  const handleSaveAccountConfirm = async (
+    securityType: AccountSecurityType,
+    pinCode?: string,
+  ) => {
+    setShowSaveModal(false);
+    if (pendingLogin) {
+      await performLogin(pendingLogin.username, pendingLogin.password, {
+        saveAccount: true,
+        securityType,
+        pinCode,
+      });
     }
   };
 
@@ -273,7 +259,15 @@ export const Login: React.FC = () => {
     try {
       const code = await initiateQuickConnect();
       if (code) {
-        setQuickConnectCode(code);
+        Alert.alert(
+          t("login.quick_connect"),
+          t("login.enter_code_to_login", { code: code }),
+          [
+            {
+              text: t("login.got_it"),
+            },
+          ],
+        );
       }
     } catch (_error) {
       Alert.alert(
@@ -408,7 +402,7 @@ export const Login: React.FC = () => {
                 {t("server.enter_url_to_jellyfin_server")}
               </Text>
               <Input
-                aria-label={t("server.server_url")}
+                aria-label='Server URL'
                 placeholder={t("server.server_url_placeholder")}
                 onChangeText={setServerURL}
                 value={serverURL}
@@ -450,11 +444,14 @@ export const Login: React.FC = () => {
         )}
       </KeyboardAvoidingView>
 
-      {/* Dismissing only hides the code — polling continues so the login still
+      <SaveAccountModal
-          completes if the code is authorized from another device afterwards. */}
+        visible={showSaveModal}
-      <QuickConnectCodeModal
+        onClose={() => {
-        code={quickConnectCode}
+          setShowSaveModal(false);
-        onClose={() => setQuickConnectCode(null)}
+          setPendingLogin(null);
+        }}
+        onSave={handleSaveAccountConfirm}
+        username={pendingLogin?.username || credentials.username}
       />
     </SafeAreaView>
   );

components/login/QuickConnectCodeModal.tsx

@@ -1,137 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
-import { requireOptionalNativeModule } from "expo-modules-core";
-import type React from "react";
-import { useCallback, useEffect, useMemo, useRef } from "react";
-import { useTranslation } from "react-i18next";
-import { TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { toast } from "sonner-native";
-import { Button } from "../Button";
-import { Text } from "../common/Text";
-
-interface Props {
-  /** The Quick Connect code to display, or null when hidden. */
-  code: string | null;
-  onClose: () => void;
-}
-
-/**
- * Shows the Quick Connect code while the app polls for authorization.
- * In-app sheet instead of a native Alert so it can dismiss itself once the
- * session is authorized — a native alert has no programmatic dismiss and
- * lingers over the app after login completes.
- */
-export const QuickConnectCodeModal: React.FC<Props> = ({ code, onClose }) => {
-  const { t } = useTranslation();
-  const insets = useSafeAreaInsets();
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
-  const snapPoints = useMemo(() => ["50%"], []);
-  const isPresentedRef = useRef(false);
-
-  // Keep the last code around so the dismiss animation doesn't flash empty
-  // when the parent clears the code to close the sheet.
-  const lastCodeRef = useRef<string | null>(null);
-  if (code) lastCodeRef.current = code;
-
-  useEffect(() => {
-    if (code) {
-      bottomSheetModalRef.current?.present();
-    } else if (isPresentedRef.current) {
-      bottomSheetModalRef.current?.dismiss();
-      isPresentedRef.current = false;
-    }
-  }, [code]);
-
-  const handleSheetChanges = useCallback(
-    (index: number) => {
-      if (index >= 0) {
-        isPresentedRef.current = true;
-      } else if (index === -1 && isPresentedRef.current) {
-        isPresentedRef.current = false;
-        onClose();
-      }
-    },
-    [onClose],
-  );
-
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
-  const copyCode = useCallback(async () => {
-    const value = code ?? lastCodeRef.current;
-    if (!value) return;
-    // Builds that don't ship the expo-clipboard native module yet: probe with
-    // requireOptionalNativeModule (returns null instead of throwing/logging)
-    // and skip — importing the JS wrapper there would error out.
-    if (!requireOptionalNativeModule("ExpoClipboard")) return;
-    const Clipboard = await import("expo-clipboard");
-    await Clipboard.setStringAsync(value);
-    toast.success(t("login.code_copied"));
-  }, [code, t]);
-
-  return (
-    <BottomSheetModal
-      ref={bottomSheetModalRef}
-      snapPoints={snapPoints}
-      onChange={handleSheetChanges}
-      handleIndicatorStyle={{ backgroundColor: "white" }}
-      backgroundStyle={{ backgroundColor: "#171717" }}
-      backdropComponent={renderBackdrop}
-    >
-      <BottomSheetView
-        style={{
-          flex: 1,
-          paddingLeft: Math.max(16, insets.left),
-          paddingRight: Math.max(16, insets.right),
-          paddingBottom: Math.max(16, insets.bottom),
-        }}
-      >
-        <View className='flex-1'>
-          <Text className='font-bold text-2xl text-neutral-100'>
-            {t("login.quick_connect")}
-          </Text>
-          <TouchableOpacity
-            className='mt-6 p-6 border border-neutral-800 rounded-xl bg-neutral-900 flex flex-row items-center justify-center'
-            onPress={copyCode}
-          >
-            <Text
-              className='text-center font-bold text-5xl text-neutral-100'
-              style={{ letterSpacing: 10 }}
-            >
-              {code ?? lastCodeRef.current}
-            </Text>
-            <Ionicons
-              name='copy-outline'
-              size={22}
-              color='white'
-              style={{ opacity: 0.4, marginLeft: 16 }}
-            />
-          </TouchableOpacity>
-          <Text className='mt-2 text-neutral-500 text-center text-xs'>
-            {t("login.tap_code_to_copy")}
-          </Text>
-          <Text className='mt-3 mb-5 text-neutral-400 text-center px-4'>
-            {t("login.quick_connect_instructions")}
-          </Text>
-          <Button className='mt-auto' color='purple' onPress={onClose}>
-            {t("login.got_it")}
-          </Button>
-        </View>
-      </BottomSheetView>
-    </BottomSheetModal>
-  );
-};

components/login/TVLogin.tsx

@@ -437,7 +437,7 @@ export const TVLogin: React.FC = () => {
       } else {
         Alert.alert(
           t("login.connection_failed"),
-          t("login.an_unexpected_error_occurred"),
+          t("login.an_unexpected_error_occured"),
         );
       }
     } finally {
@@ -499,7 +499,7 @@ export const TVLogin: React.FC = () => {
         const message =
           error instanceof Error
             ? error.message
-            : t("login.an_unexpected_error_occurred");
+            : t("login.an_unexpected_error_occured");
         Alert.alert(t("login.connection_failed"), message);
         goToQRScreen();
       } finally {
@@ -523,7 +523,7 @@ export const TVLogin: React.FC = () => {
         } else {
           Alert.alert(
             t("login.connection_failed"),
-            t("login.an_unexpected_error_occurred"),
+            t("login.an_unexpected_error_occured"),
           );
         }
       } finally {
@@ -768,7 +768,7 @@ export const TVLogin: React.FC = () => {
               const message =
                 error instanceof Error
                   ? error.message
-                  : t("login.an_unexpected_error_occurred");
+                  : t("login.an_unexpected_error_occured");
               Alert.alert(t("login.connection_failed"), message);
               goToQRScreen();
             });

components/search/TVSearchTabBadges.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { useTranslation } from "react-i18next";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
@@ -89,8 +88,6 @@ export const TVSearchTabBadges: React.FC<TVSearchTabBadgesProps> = ({
   showDiscover,
   disabled = false,
 }) => {
-  const { t } = useTranslation();
-
   if (!showDiscover) {
     return null;
   }
@@ -104,13 +101,13 @@ export const TVSearchTabBadges: React.FC<TVSearchTabBadgesProps> = ({
       }}
     >
       <TVSearchTabBadge
-        label={t("search.library")}
+        label='Library'
         isSelected={searchType === "Library"}
         onPress={() => setSearchType("Library")}
         disabled={disabled}
       />
       <TVSearchTabBadge
-        label={t("search.discover")}
+        label='Discover'
         isSelected={searchType === "Discover"}
         onPress={() => setSearchType("Discover")}
         disabled={disabled}

components/settings/AppearanceSettings.tsx

@@ -1,8 +1,7 @@
 import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Linking } from "react-native";
+import { Linking, Switch } from "react-native";
-import { SettingSwitch } from "@/components/common/SettingSwitch";
 import DisabledSetting from "@/components/settings/DisabledSetting";
 import useRouter from "@/hooks/useAppRouter";
 import { useSettings } from "@/utils/atoms/settings";
@@ -28,7 +27,6 @@ export const AppearanceSettings: React.FC = () => {
       <ListGroup title={t("home.settings.appearance.title")} className=''>
         <ListItem
           title={t("home.settings.other.show_custom_menu_links")}
-          subtitle={t("home.settings.other.show_custom_menu_links_hint")}
           disabled={pluginSettings?.showCustomMenuLinks?.locked}
           onPress={() =>
             Linking.openURL(
@@ -36,7 +34,7 @@ export const AppearanceSettings: React.FC = () => {
             )
           }
         >
-          <SettingSwitch
+          <Switch
             value={settings.showCustomMenuLinks}
             disabled={pluginSettings?.showCustomMenuLinks?.locked}
             onValueChange={(value) =>
@@ -46,51 +44,31 @@ export const AppearanceSettings: React.FC = () => {
         </ListItem>
         <ListItem
           title={t("home.settings.appearance.merge_next_up_continue_watching")}
-          subtitle={t(
-            "home.settings.appearance.merge_next_up_continue_watching_hint",
-          )}
         >
-          <SettingSwitch
+          <Switch
             value={settings.mergeNextUpAndContinueWatching}
             onValueChange={(value) =>
               updateSettings({ mergeNextUpAndContinueWatching: value })
             }
           />
         </ListItem>
-        <ListItem
-          title={t("home.settings.appearance.use_episode_images_next_up")}
-          subtitle={t(
-            "home.settings.appearance.use_episode_images_next_up_hint",
-          )}
-        >
-          <SettingSwitch
-            value={settings.useEpisodeImagesForNextUp}
-            onValueChange={(value) =>
-              updateSettings({ useEpisodeImagesForNextUp: value })
-            }
-          />
-        </ListItem>
-        <ListItem
-          title={t("home.settings.appearance.hide_remote_session_button")}
-          subtitle={t(
-            "home.settings.appearance.hide_remote_session_button_hint",
-          )}
-        >
-          <SettingSwitch
-            value={settings.hideRemoteSessionButton}
-            onValueChange={(value) =>
-              updateSettings({ hideRemoteSessionButton: value })
-            }
-          />
-        </ListItem>
         <ListItem
           onPress={() =>
             router.push("/settings/appearance/hide-libraries/page")
           }
           title={t("home.settings.other.hide_libraries")}
-          subtitle={t("home.settings.other.select_libraries_you_want_to_hide")}
           showArrow
         />
+        <ListItem
+          title={t("home.settings.appearance.hide_remote_session_button")}
+        >
+          <Switch
+            value={settings.hideRemoteSessionButton}
+            onValueChange={(value) =>
+              updateSettings({ hideRemoteSessionButton: value })
+            }
+          />
+        </ListItem>
       </ListGroup>
     </DisabledSetting>
   );

components/settings/AudioToggles.tsx

@@ -2,7 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, View, type ViewProps } from "react-native";
-import { SettingSwitch } from "@/components/common/SettingSwitch";
+import { Switch } from "react-native-gesture-handler";
 import { AudioTranscodeMode, useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
@@ -135,7 +135,7 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
           title={t("home.settings.audio.set_audio_track")}
           disabled={pluginSettings?.rememberAudioSelections?.locked}
         >
-          <SettingSwitch
+          <Switch
             value={settings.rememberAudioSelections}
             disabled={pluginSettings?.rememberAudioSelections?.locked}
             onValueChange={(value) =>

components/settings/ChromecastSettings.tsx

@@ -1,5 +1,4 @@
-import { View } from "react-native";
+import { Switch, View } from "react-native";
-import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
@@ -10,7 +9,7 @@ export const ChromecastSettings: React.FC = ({ ...props }) => {
     <View {...props}>
       <ListGroup title={"Chromecast"}>
         <ListItem title={"Enable H265 for Chromecast"}>
-          <SettingSwitch
+          <Switch
             value={settings.enableH265ForChromecast}
             onValueChange={(enableH265ForChromecast) =>
               updateSettings({ enableH265ForChromecast })

components/settings/GestureControls.tsx

@@ -2,7 +2,7 @@ import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import type { ViewProps } from "react-native";
-import { SettingSwitch } from "@/components/common/SettingSwitch";
+import { Switch } from "react-native";
 import DisabledSetting from "@/components/settings/DisabledSetting";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
@@ -39,7 +39,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
           )}
           disabled={pluginSettings?.enableHorizontalSwipeSkip?.locked}
         >
-          <SettingSwitch
+          <Switch
             value={settings.enableHorizontalSwipeSkip}
             disabled={pluginSettings?.enableHorizontalSwipeSkip?.locked}
             onValueChange={(enableHorizontalSwipeSkip) =>
@@ -55,7 +55,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
           )}
           disabled={pluginSettings?.enableLeftSideBrightnessSwipe?.locked}
         >
-          <SettingSwitch
+          <Switch
             value={settings.enableLeftSideBrightnessSwipe}
             disabled={pluginSettings?.enableLeftSideBrightnessSwipe?.locked}
             onValueChange={(enableLeftSideBrightnessSwipe) =>
@@ -71,7 +71,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
           )}
           disabled={pluginSettings?.enableRightSideVolumeSwipe?.locked}
         >
-          <SettingSwitch
+          <Switch
             value={settings.enableRightSideVolumeSwipe}
             disabled={pluginSettings?.enableRightSideVolumeSwipe?.locked}
             onValueChange={(enableRightSideVolumeSwipe) =>
@@ -87,7 +87,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
           )}
           disabled={pluginSettings?.hideVolumeSlider?.locked}
         >
-          <SettingSwitch
+          <Switch
             value={settings.hideVolumeSlider}
             disabled={pluginSettings?.hideVolumeSlider?.locked}
             onValueChange={(hideVolumeSlider) =>
@@ -103,7 +103,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
           )}
           disabled={pluginSettings?.hideBrightnessSlider?.locked}
         >
-          <SettingSwitch
+          <Switch
             value={settings.hideBrightnessSlider}
             disabled={pluginSettings?.hideBrightnessSlider?.locked}
             onValueChange={(hideBrightnessSlider) =>

components/settings/Jellyseerr.tsx

@@ -20,10 +20,7 @@ export const JellyseerrSettings = () => {
   const { t } = useTranslation();
 
   const [user] = useAtom(userAtom);
-  const { settings, updateSettings, pluginSettings } = useSettings();
+  const { settings, updateSettings } = useSettings();
-  // Only the server URL is admin-lockable — the password stays editable so
-  // the user can still sign in to the admin-pinned Jellyseerr server.
-  const urlLocked = pluginSettings?.jellyseerrServerUrl?.locked === true;
 
   const [jellyseerrPassword, setJellyseerrPassword] = useState<
     string | undefined
@@ -118,7 +115,6 @@ export const JellyseerrSettings = () => {
           </>
         ) : (
           <View className='flex flex-col rounded-xl overflow-hidden p-4 bg-neutral-900'>
-            <View style={{ opacity: urlLocked ? 0.5 : 1 }}>
             <Text className='font-bold mb-1'>
               {t("home.settings.plugins.jellyseerr.server_url")}
             </Text>
@@ -132,11 +128,7 @@ export const JellyseerrSettings = () => {
               placeholder={t(
                 "home.settings.plugins.jellyseerr.server_url_placeholder",
               )}
-                value={
+              value={jellyseerrServerUrl ?? settings?.jellyseerrServerUrl}
-                  urlLocked
-                    ? settings?.jellyseerrServerUrl
-                    : (jellyseerrServerUrl ?? settings?.jellyseerrServerUrl)
-                }
               defaultValue={
                 settings?.jellyseerrServerUrl ?? jellyseerrServerUrl
               }
@@ -145,14 +137,8 @@ export const JellyseerrSettings = () => {
               autoCapitalize='none'
               textContentType='URL'
               onChangeText={setjellyseerrServerUrl}
-                editable={!urlLocked && !loginToJellyseerrMutation.isPending}
+              editable={!loginToJellyseerrMutation.isPending}
             />
-              {urlLocked && (
-                <Text className='text-xs text-red-600 mb-2'>
-                  Disabled by admin
-                </Text>
-              )}
-            </View>
             <View>
               <Text className='font-bold mb-2'>
                 {t("home.settings.plugins.jellyseerr.password")}

components/settings/KefinTweaks.tsx

@@ -1,28 +1,33 @@
 import { useTranslation } from "react-i18next";
-import { SettingSwitch } from "@/components/common/SettingSwitch";
+import { Switch, Text, View } from "react-native";
 import { useSettings } from "@/utils/atoms/settings";
-import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
 
 export const KefinTweaksSettings = () => {
-  const { settings, updateSettings, pluginSettings } = useSettings();
+  const { settings, updateSettings } = useSettings();
   const { t } = useTranslation();
 
   const isEnabled = settings?.useKefinTweaks ?? false;
-  const locked = pluginSettings?.useKefinTweaks?.locked === true;
 
   return (
-    <ListGroup>
+    <View className=''>
-      <ListItem
+      <View className='flex flex-col rounded-xl overflow-hidden p-4 bg-neutral-900'>
-        title={t("home.settings.plugins.kefinTweaks.watchlist_enabler")}
+        <Text className='text-xs text-red-600 mb-2'>
-        disabledByAdmin={locked}
+          {t("home.settings.plugins.kefinTweaks.watchlist_enabler")}
-      >
+        </Text>
-        <SettingSwitch
+
+        <View className='flex flex-row items-center justify-between mt-2'>
+          <Text className='text-white'>
+            {isEnabled ? t("Watchlist On") : t("Watchlist Off")}
+          </Text>
+
+          <Switch
             value={isEnabled}
-          disabled={locked}
             onValueChange={(value) => updateSettings({ useKefinTweaks: value })}
+            trackColor={{ false: "#555", true: "purple" }}
+            thumbColor={isEnabled ? "#fff" : "#ccc"}
           />
-      </ListItem>
+        </View>
-    </ListGroup>
+      </View>
+    </View>
   );
 };

components/settings/LocalNetworkSettings.tsx

@@ -2,9 +2,8 @@ import { Ionicons } from "@expo/vector-icons";
 import type React from "react";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TouchableOpacity, View } from "react-native";
+import { Switch, TouchableOpacity, View } from "react-native";
 import { toast } from "sonner-native";
-import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { useWifiSSID } from "@/hooks/useWifiSSID";
 import { useServerUrl } from "@/providers/ServerUrlProvider";
 import { storage } from "@/utils/mmkv";
@@ -148,10 +147,7 @@ export function LocalNetworkSettings(): React.ReactElement | null {
           title={t("home.settings.network.auto_switch_enabled")}
           subtitle={t("home.settings.network.auto_switch_description")}
         >
-          <SettingSwitch
+          <Switch value={config.enabled} onValueChange={handleToggleEnabled} />
-            value={config.enabled}
-            onValueChange={handleToggleEnabled}
-          />
         </ListItem>
       </ListGroup>
 

components/settings/MpvSubtitleSettings.tsx

@@ -1,8 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
+import { Platform, Switch, View, type ViewProps } from "react-native";
-import { Platform, View, type ViewProps } from "react-native";
-import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Stepper } from "@/components/inputs/Stepper";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
@@ -19,21 +17,20 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
   const isTv = Platform.isTV;
   const media = useMedia();
   const { settings, updateSettings } = media;
-  const { t } = useTranslation();
 
   const alignXOptions: AlignX[] = ["left", "center", "right"];
   const alignYOptions: AlignY[] = ["top", "center", "bottom"];
 
   const alignXLabels: Record<AlignX, string> = {
-    left: t("home.settings.subtitles.align.left"),
+    left: "Left",
-    center: t("home.settings.subtitles.align.center"),
+    center: "Center",
-    right: t("home.settings.subtitles.align.right"),
+    right: "Right",
   };
 
   const alignYLabels: Record<AlignY, string> = {
-    top: t("home.settings.subtitles.align.top"),
+    top: "Top",
-    center: t("home.settings.subtitles.align.center"),
+    center: "Center",
-    bottom: t("home.settings.subtitles.align.bottom"),
+    bottom: "Bottom",
   };
 
   const alignXOptionGroups = useMemo(() => {
@@ -63,18 +60,16 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
   return (
     <View {...props}>
       <ListGroup
-        title={t("home.settings.subtitles.mpv_settings_title")}
+        title='MPV Subtitle Settings'
         description={
           <Text className='text-[#8E8D91] text-xs'>
-            {t("home.settings.subtitles.mpv_settings_description")}
+            Advanced subtitle customization for MPV player
           </Text>
         }
       >
         {!isTv && (
           <>
-            <ListItem
+            <ListItem title='Vertical Margin'>
-              title={t("home.settings.subtitles.mpv_subtitle_margin_y")}
-            >
               <Stepper
                 value={settings.mpvSubtitleMarginY ?? 0}
                 step={5}
@@ -86,7 +81,7 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
               />
             </ListItem>
 
-            <ListItem title={t("home.settings.subtitles.mpv_subtitle_align_x")}>
+            <ListItem title='Horizontal Alignment'>
               <PlatformDropdown
                 groups={alignXOptionGroups}
                 trigger={
@@ -101,11 +96,11 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
                     />
                   </View>
                 }
-                title={t("home.settings.subtitles.mpv_subtitle_align_x")}
+                title='Horizontal Alignment'
               />
             </ListItem>
 
-            <ListItem title={t("home.settings.subtitles.mpv_subtitle_align_y")}>
+            <ListItem title='Vertical Alignment'>
               <PlatformDropdown
                 groups={alignYOptionGroups}
                 trigger={
@@ -120,14 +115,14 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
                     />
                   </View>
                 }
-                title={t("home.settings.subtitles.mpv_subtitle_align_y")}
+                title='Vertical Alignment'
               />
             </ListItem>
           </>
         )}
 
-        <ListItem title={t("home.settings.subtitles.opaque_background")}>
+        <ListItem title='Opaque Background'>
-          <SettingSwitch
+          <Switch
             value={settings.mpvSubtitleBackgroundEnabled ?? false}
             onValueChange={(value) =>
               updateSettings({ mpvSubtitleBackgroundEnabled: value })
@@ -136,7 +131,7 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
         </ListItem>
 
         {settings.mpvSubtitleBackgroundEnabled && (
-          <ListItem title={t("home.settings.subtitles.background_opacity")}>
+          <ListItem title='Background Opacity'>
             <Stepper
               value={settings.mpvSubtitleBackgroundOpacity ?? 75}
               step={5}

components/settings/OtherSettings.tsx

@@ -3,9 +3,8 @@ import { TFunction } from "i18next";
 import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Linking, View } from "react-native";
+import { Linking, Switch, View } from "react-native";
 import { BITRATES } from "@/components/BitrateSelector";
-import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { PlatformDropdown } from "@/components/PlatformDropdown";
 import DisabledSetting from "@/components/settings/DisabledSetting";
 import useRouter from "@/hooks/useAppRouter";
@@ -133,7 +132,7 @@ export const OtherSettings: React.FC = () => {
           title={t("home.settings.other.safe_area_in_controls")}
           disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
         >
-          <SettingSwitch
+          <Switch
             value={settings.safeAreaInControlsEnabled}
             disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
             onValueChange={(value) =>
@@ -151,7 +150,7 @@ export const OtherSettings: React.FC = () => {
             )
           }
         >
-          <SettingSwitch
+          <Switch
             value={settings.showCustomMenuLinks}
             disabled={pluginSettings?.showCustomMenuLinks?.locked}
             onValueChange={(value) =>
@@ -189,7 +188,7 @@ export const OtherSettings: React.FC = () => {
           title={t("home.settings.other.disable_haptic_feedback")}
           disabled={pluginSettings?.disableHapticFeedback?.locked}
         >
-          <SettingSwitch
+          <Switch
             value={settings.disableHapticFeedback}
             disabled={pluginSettings?.disableHapticFeedback?.locked}
             onValueChange={(disableHapticFeedback) =>

components/settings/PlaybackControlsSettings.tsx

@@ -3,9 +3,8 @@ import { TFunction } from "i18next";
 import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { View } from "react-native";
+import { Switch, View } from "react-native";
 import { BITRATES } from "@/components/BitrateSelector";
-import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { PLAYBACK_SPEEDS } from "@/components/PlaybackSpeedSelector";
 import DisabledSetting from "@/components/settings/DisabledSetting";
@@ -116,7 +115,7 @@ export const PlaybackControlsSettings: React.FC = () => {
 
   return (
     <DisabledSetting disabled={disabled}>
-      <ListGroup title={t("home.settings.other.other_title")} className='mb-4'>
+      <ListGroup title={t("home.settings.other.other_title")} className=''>
         <ListItem
           title={t("home.settings.other.video_orientation")}
           disabled={pluginSettings?.defaultVideoOrientation?.locked}
@@ -147,7 +146,7 @@ export const PlaybackControlsSettings: React.FC = () => {
           title={t("home.settings.other.safe_area_in_controls")}
           disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
         >
-          <SettingSwitch
+          <Switch
             value={settings.safeAreaInControlsEnabled}
             disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
             onValueChange={(value) =>
@@ -206,7 +205,7 @@ export const PlaybackControlsSettings: React.FC = () => {
           title={t("home.settings.other.disable_haptic_feedback")}
           disabled={pluginSettings?.disableHapticFeedback?.locked}
         >
-          <SettingSwitch
+          <Switch
             value={settings.disableHapticFeedback}
             disabled={pluginSettings?.disableHapticFeedback?.locked}
             onValueChange={(disableHapticFeedback) =>
@@ -219,7 +218,7 @@ export const PlaybackControlsSettings: React.FC = () => {
           title={t("home.settings.other.auto_play_next_episode")}
           disabled={pluginSettings?.autoPlayNextEpisode?.locked}
         >
-          <SettingSwitch
+          <Switch
             value={settings.autoPlayNextEpisode}
             disabled={pluginSettings?.autoPlayNextEpisode?.locked}
             onValueChange={(autoPlayNextEpisode) =>

components/settings/PluginSettings.tsx

@@ -20,12 +20,7 @@ export const PluginSettings = () => {
     >
       <ListItem
         onPress={() => router.push("/settings/plugins/jellyseerr/page")}
-        title='Jellyseerr'
+        title={"Jellyseerr"}
-        showArrow
-      />
-      <ListItem
-        onPress={() => router.push("/settings/plugins/streamystats/page")}
-        title='Streamystats'
         showArrow
       />
       <ListItem
@@ -33,6 +28,11 @@ export const PluginSettings = () => {
         title='Marlin Search'
         showArrow
       />
+      <ListItem
+        onPress={() => router.push("/settings/plugins/streamystats/page")}
+        title='Streamystats'
+        showArrow
+      />
       <ListItem
         onPress={() => router.push("/settings/plugins/kefinTweaks/page")}
         title='KefinTweaks'

components/settings/QuickConnect.tsx

@@ -1,4 +1,3 @@
-import { Feather } from "@expo/vector-icons";
 import {
   BottomSheetBackdrop,
   type BottomSheetBackdropProps,
@@ -6,13 +5,11 @@ import {
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
 import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
-import { requireOptionalNativeModule } from "expo-modules-core";
 import { useAtom } from "jotai";
 import type React from "react";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert, Platform, View, type ViewProps } from "react-native";
-import { Pressable } from "react-native-gesture-handler";
 import { useHaptic } from "@/hooks/useHaptic";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { Button } from "../Button";
@@ -61,7 +58,7 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
           successHapticFeedback();
           Alert.alert(
             t("home.settings.quick_connect.success"),
-            t("home.settings.quick_connect.quick_connect_authorized"),
+            t("home.settings.quick_connect.quick_connect_autorized"),
           );
           setQuickConnectCode(undefined);
           bottomSheetModalRef?.current?.close();
@@ -82,15 +79,6 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
     }
   }, [api, user, quickConnectCode]);
 
-  const pasteCode = useCallback(async () => {
-    // Builds without the expo-clipboard native module: probe first (no-op).
-    if (!requireOptionalNativeModule("ExpoClipboard")) return;
-    const Clipboard = await import("expo-clipboard");
-    const text = await Clipboard.getStringAsync();
-    const digits = (text || "").replace(/\D/g, "").slice(0, 6);
-    if (digits) setQuickConnectCode(digits);
-  }, []);
-
   if (isTv) return null;
 
   return (
@@ -142,15 +130,6 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
                   style={{ paddingHorizontal: 16 }}
                   autoFocus
                 />
-                <Pressable
-                  onPress={pasteCode}
-                  className='flex-row items-center justify-center self-center'
-                >
-                  <Feather name='clipboard' size={15} color='#a3a3a3' />
-                  <Text className='text-neutral-400 ml-2'>
-                    {t("home.settings.quick_connect.paste_code")}
-                  </Text>
-                </Pressable>
               </View>
             </View>
             <Button

components/settings/StorageSettings.tsx

@@ -1,6 +1,6 @@
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
-import { Alert, Platform, View } from "react-native";
+import { Platform, View } from "react-native";
 import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
 import { Colors } from "@/constants/Colors";
@@ -12,7 +12,6 @@ import { ListItem } from "../list/ListItem";
 export const StorageSettings = () => {
   const { deleteAllFiles, appSizeUsage } = useDownload();
   const { t } = useTranslation();
-  const queryClient = useQueryClient();
   const successHapticFeedback = useHaptic("success");
   const errorHapticFeedback = useHaptic("error");
 
@@ -28,38 +27,16 @@ export const StorageSettings = () => {
         used: (app.total - app.remaining) / app.total,
       };
     },
-    // Keep the bar moving while a download is writing to disk.
-    refetchInterval: 10 * 1000,
   });
 
-  const onDeleteClicked = () => {
+  const onDeleteClicked = async () => {
-    Alert.alert(
-      t("home.settings.storage.delete_all_downloaded_files_confirm"),
-      t("home.settings.storage.delete_all_downloaded_files_confirm_desc"),
-      [
-        {
-          text: t("common.cancel"),
-          style: "cancel",
-        },
-        {
-          text: t("common.ok"),
-          style: "destructive",
-          onPress: async () => {
     try {
       await deleteAllFiles();
       successHapticFeedback();
     } catch (_e) {
       errorHapticFeedback();
       toast.error(t("home.settings.toasts.error_deleting_files"));
-            } finally {
-              // Reflect the freed space immediately instead of waiting for
-              // the next poll.
-              queryClient.invalidateQueries({ queryKey: ["appSize"] });
     }
-          },
-        },
-      ],
-    );
   };
 
   const calculatePercentage = (value: number, total: number) => {
@@ -125,7 +102,7 @@ export const StorageSettings = () => {
         </View>
       </View>
       {!Platform.isTV && (
-        <ListGroup className={Platform.OS === "android" ? "mt-4" : undefined}>
+        <ListGroup>
           <ListItem
             textColor='red'
             onPress={onDeleteClicked}

components/settings/SubtitleToggles.tsx

@@ -3,8 +3,8 @@ import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, View, type ViewProps } from "react-native";
+import { Switch } from "react-native-gesture-handler";
 import { Input } from "@/components/common/Input";
-import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Stepper } from "@/components/inputs/Stepper";
 import { useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
@@ -98,7 +98,6 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
   return (
     <View {...props}>
       <ListGroup
-        className='mb-4'
         title={t("home.settings.subtitles.subtitle_title")}
         description={
           <Text className='text-[#8E8D91] text-xs'>
@@ -153,7 +152,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           title={t("home.settings.subtitles.set_subtitle_track")}
           disabled={pluginSettings?.rememberSubtitleSelections?.locked}
         >
-          <SettingSwitch
+          <Switch
             value={settings.rememberSubtitleSelections}
             disabled={pluginSettings?.rememberSubtitleSelections?.locked}
             onValueChange={(value) =>

components/tv/TVPosterCard.tsx

@@ -3,7 +3,6 @@ import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
 import { useAtomValue } from "jotai";
 import React, { useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
 import {
   Animated,
   Easing,
@@ -70,9 +69,6 @@ export interface TVPosterCardProps {
 
   /** Custom image URL getter - if not provided, uses smart URL logic */
   imageUrlGetter?: (item: BaseItemDto) => string | undefined;
-
-  /** For horizontal episodes, prefer the episode's own image over the series thumb */
-  preferEpisodeImage?: boolean;
 }
 
 /**
@@ -109,9 +105,7 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
   glowColor = "white",
   scaleAmount = 1.05,
   imageUrlGetter,
-  preferEpisodeImage = false,
 }) => {
-  const { t } = useTranslation();
   const api = useAtomValue(apiAtom);
   const posterSizes = useScaledTVPosterSizes();
   const typography = useScaledTVTypography();
@@ -142,14 +136,9 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
     if (orientation === "horizontal") {
       // Episode: prefer series thumb image for consistent look (like hero section)
       if (item.Type === "Episode") {
-        // Opt-in: use the episode's own image instead of the series thumb.
+        // First try parent/series thumb (horizontal series artwork)
-        if (preferEpisodeImage && item.ImageTags?.Primary) {
+        if (item.ParentBackdropItemId && item.ParentThumbImageTag) {
-          return `${api.basePath}/Items/${item.Id}/Images/Primary?fillHeight=600&quality=80&tag=${item.ImageTags.Primary}`;
+          return `${api.basePath}/Items/${item.ParentBackdropItemId}/Images/Thumb?fillHeight=700&quality=80&tag=${item.ParentThumbImageTag}`;
-        }
-        // First try parent/series thumb (horizontal series artwork).
-        // Matched pair: ParentThumbItemId owns the Thumb tag, not ParentBackdropItemId.
-        if (item.ParentThumbItemId && item.ParentThumbImageTag) {
-          return `${api.basePath}/Items/${item.ParentThumbItemId}/Images/Thumb?fillHeight=700&quality=80&tag=${item.ParentThumbImageTag}`;
         }
         // Fall back to episode's own primary image
         if (item.ImageTags?.Primary) {
@@ -181,7 +170,7 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
       item,
       width: width * 2, // 2x for quality on large screens
     });
-  }, [api, item, orientation, width, imageUrlGetter, preferEpisodeImage]);
+  }, [api, item, orientation, width, imageUrlGetter]);
 
   // Progress calculation
   const progress = useMemo(() => {
@@ -382,7 +371,7 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
           fontWeight: "700",
         }}
       >
-        {t("music.now_playing")}
+        Now Playing
       </Text>
     </View>
   ) : null;

components/tv/TVSubtitleResultCard.tsx

@@ -1,6 +1,5 @@
 import { Ionicons } from "@expo/vector-icons";
 import React from "react";
-import { useTranslation } from "react-i18next";
 import {
   ActivityIndicator,
   Animated,
@@ -29,7 +28,6 @@ export const TVSubtitleResultCard = React.forwardRef<
   const styles = createStyles(typography);
   const { focused, handleFocus, handleBlur, animatedStyle } =
     useTVFocusAnimation({ scaleAmount: 1.03 });
-  const { t } = useTranslation();
 
   return (
     <Pressable
@@ -154,7 +152,7 @@ export const TVSubtitleResultCard = React.forwardRef<
                 },
               ]}
             >
-              <Text style={styles.flagText}>{t("player.hash_match")}</Text>
+              <Text style={styles.flagText}>Hash Match</Text>
             </View>
           )}
           {result.hearingImpaired && (

components/video-player/controls/BottomControls.tsx

@@ -183,7 +183,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
           <SkipButton
             showButton={showSkipButton}
             onPress={skipIntro}
-            buttonText={t("player.skip_intro")}
+            buttonText='Skip Intro'
           />
           {/* Smart Skip Credits behavior:
               - Show "Skip Credits" if there's content after credits OR no next episode
@@ -193,7 +193,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
               showSkipCreditButton && (hasContentAfterCredits || !nextItem)
             }
             onPress={skipCredit}
-            buttonText={t("player.skip_credits")}
+            buttonText='Skip Credits'
           />
           {settings.autoPlayNextEpisode !== false &&
             (settings.maxAutoPlayEpisodeCount.value === -1 ||

components/video-player/controls/ContinueWatchingOverlay.tsx

@@ -27,7 +27,7 @@ const ContinueWatchingOverlay: React.FC<ContinueWatchingOverlayProps> = ({
       }
     >
       <Text className='text-2xl font-bold text-white py-4 '>
-        {t("player.still_watching")}
+        Are you still watching ?
       </Text>
       <Button
         onPress={() => {

components/video-player/controls/Controls.tv.tsx

@@ -51,6 +51,7 @@ import { useOfflineMode } from "@/providers/OfflineModeProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import type { TVOptionItem } from "@/utils/atoms/tvOptionModal";
 import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
+import { compareTracksForMenu } from "@/utils/jellyfin/subtitleUtils";
 import { formatTimeString, msToTicks, ticksToMs } from "@/utils/time";
 import { CONTROLS_CONSTANTS } from "./constants";
 import { useVideoContext } from "./contexts/VideoContext";
@@ -317,8 +318,10 @@ export const Controls: FC<Props> = ({
     try {
       const streams = (await onRefreshSubtitleTracks?.()) ?? [];
       // Skip streams without a real index: `?? -1` would alias them to the
-      // "disable subtitles" sentinel and mis-route selection.
+      // "disable subtitles" sentinel and mis-route selection. Order like
-      return streams
+      // jellyfin-web (embedded first, externals last, forced/default up).
+      return [...streams]
+        .sort(compareTracksForMenu)
         .filter((stream) => typeof stream.Index === "number")
         .map((stream) => {
           const index = stream.Index as number;

components/video-player/controls/HeaderControls.tsx

@@ -4,7 +4,6 @@ import type {
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
 import { type FC, useCallback, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import useRouter from "@/hooks/useAppRouter";
 import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
@@ -58,7 +57,6 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
   showTechnicalInfo = false,
   onToggleTechnicalInfo,
 }) => {
-  const { t } = useTranslation();
   const router = useRouter();
   const insets = useControlsSafeAreaInsets();
   const lightHapticFeedback = useHaptic("light");
@@ -129,8 +127,8 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
             onPress={toggleOrientation}
             disabled={isTogglingOrientation}
             className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-            accessibilityLabel={t("accessibility.toggle_orientation")}
+            accessibilityLabel='Toggle screen orientation'
-            accessibilityHint={t("accessibility.toggle_orientation_hint")}
+            accessibilityHint='Toggles the screen orientation between portrait and landscape'
           >
             <MaterialIcons
               name='screen-rotation'

components/video-player/controls/TVSubtitleSheet.tsx

@@ -33,6 +33,7 @@ import {
   type SubtitleSearchResult,
   useRemoteSubtitles,
 } from "@/hooks/useRemoteSubtitles";
+import { compareTracksForMenu } from "@/utils/jellyfin/subtitleUtils";
 import { COMMON_SUBTITLE_LANGUAGES } from "@/utils/opensubtitles/api";
 
 interface TVSubtitleSheetProps {
@@ -96,13 +97,19 @@ export const TVSubtitleSheet: React.FC<TVSubtitleSheetProps> = ({
   const overlayOpacity = useRef(new Animated.Value(0)).current;
   const sheetTranslateY = useRef(new Animated.Value(300)).current;
 
+  // Order like jellyfin-web (embedded first, externals last, forced/default up).
+  const sortedTracks = useMemo(
+    () => [...subtitleTracks].sort(compareTracksForMenu),
+    [subtitleTracks],
+  );
+
   const initialSelectedTrackIndex = useMemo(() => {
     if (currentSubtitleIndex === -1) return 0;
-    const trackIdx = subtitleTracks.findIndex(
+    const trackIdx = sortedTracks.findIndex(
       (t) => t.Index === currentSubtitleIndex,
     );
     return trackIdx >= 0 ? trackIdx + 1 : 0;
-  }, [subtitleTracks, currentSubtitleIndex]);
+  }, [sortedTracks, currentSubtitleIndex]);
 
   useEffect(() => {
     if (visible) {
@@ -215,7 +222,7 @@ export const TVSubtitleSheet: React.FC<TVSubtitleSheetProps> = ({
       value: -1,
       selected: currentSubtitleIndex === -1,
     };
-    const options = subtitleTracks.map((track) => ({
+    const options = sortedTracks.map((track) => ({
       label:
         track.DisplayTitle || `${track.Language || "Unknown"} (${track.Codec})`,
       sublabel: track.Codec?.toUpperCase(),
@@ -223,7 +230,7 @@ export const TVSubtitleSheet: React.FC<TVSubtitleSheetProps> = ({
       selected: track.Index === currentSubtitleIndex,
     }));
     return [noneOption, ...options];
-  }, [subtitleTracks, currentSubtitleIndex, t]);
+  }, [sortedTracks, currentSubtitleIndex, t]);
 
   if (!visible) return null;
 

components/video-player/controls/TechnicalInfoOverlay.tsx

@@ -7,7 +7,6 @@ import {
   useMemo,
   useState,
 } from "react";
-import { useTranslation } from "react-i18next";
 import { Platform, StyleSheet, Text, View } from "react-native";
 import Animated, {
   Easing,
@@ -185,7 +184,6 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
     currentAudioIndex,
   }) => {
     const typography = useScaledTVTypography();
-    const { t } = useTranslation();
     const insets = useSafeAreaInsets();
     const safeInsets = useControlsSafeAreaInsets();
     const [info, setInfo] = useState<TechnicalInfo | null>(null);
@@ -314,13 +312,13 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
           )}
           {info?.videoCodec && (
             <Text style={textStyle}>
-              {t("player.technical_info.video")} {formatCodec(info.videoCodec)}
+              Video: {formatCodec(info.videoCodec)}
               {info.fps ? ` @ ${formatFps(info.fps)} fps` : ""}
             </Text>
           )}
           {info?.audioCodec && (
             <Text style={textStyle}>
-              {t("player.technical_info.audio")} {formatCodec(info.audioCodec)}
+              Audio: {formatCodec(info.audioCodec)}
               {streamInfo?.audioChannels
                 ? ` ${formatAudioChannels(streamInfo.audioChannels)}`
                 : ""}
@@ -328,13 +326,12 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
           )}
           {streamInfo?.subtitleCodec && (
             <Text style={textStyle}>
-              {t("player.technical_info.subtitle")}{" "}
+              Subtitle: {formatCodec(streamInfo.subtitleCodec)}
-              {formatCodec(streamInfo.subtitleCodec)}
             </Text>
           )}
           {(info?.videoBitrate || info?.audioBitrate) && (
             <Text style={textStyle}>
-              {t("player.technical_info.bitrate")}{" "}
+              Bitrate:{" "}
               {info.videoBitrate
                 ? formatBitrate(info.videoBitrate)
                 : info.audioBitrate
@@ -344,9 +341,7 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
           )}
           {info?.cacheSeconds !== undefined && (
             <Text style={textStyle}>
-              {t("player.technical_info.buffer_seconds", {
+              Buffer: {info.cacheSeconds.toFixed(1)}s
-                seconds: info.cacheSeconds.toFixed(1),
-              })}
               {info?.demuxerMaxBytes !== undefined
                 ? ` (cap ${info.demuxerMaxBytes}MB` +
                   `${info.demuxerMaxBackBytes !== undefined ? ` / ${info.demuxerMaxBackBytes}MB back` : ""}` +
@@ -357,7 +352,7 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
           )}
           {info?.voDriver && (
             <Text style={textStyle}>
-              {t("player.technical_info.vo")} {info.voDriver}
+              VO: {info.voDriver}
               {info.hwdec ? ` / ${info.hwdec}` : ""}
             </Text>
           )}
@@ -369,14 +364,10 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
           )}
           {info?.droppedFrames !== undefined && info.droppedFrames > 0 && (
             <Text style={[textStyle, styles.warningText]}>
-              {t("player.technical_info.dropped_frames", {
+              Dropped: {info.droppedFrames} frames
-                count: info.droppedFrames,
-              })}
             </Text>
           )}
-          {!info && !playMethod && (
+          {!info && !playMethod && <Text style={textStyle}>Loading...</Text>}
-            <Text style={textStyle}>{t("player.technical_info.loading")}</Text>
-          )}
         </View>
       </Animated.View>
     );

components/video-player/controls/VideoScalingModeSelector.tsx

@@ -1,6 +1,5 @@
 import { Ionicons } from "@expo/vector-icons";
 import React, { useMemo } from "react";
-import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import {
   type OptionGroup,
@@ -55,7 +54,6 @@ export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
   onRatioChange,
   disabled = false,
 }) => {
-  const { t } = useTranslation();
   const lightHapticFeedback = useHaptic("light");
 
   const handleRatioSelect = (ratio: AspectRatio) => {
@@ -68,10 +66,7 @@ export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
       {
         options: ASPECT_RATIO_OPTIONS.map((option) => ({
           type: "radio" as const,
-          label:
+          label: option.label,
-            option.id === "default"
-              ? t("player.aspect_ratio_original")
-              : option.label,
           value: option.id,
           selected: option.id === currentRatio,
           onPress: () => handleRatioSelect(option.id),
@@ -99,7 +94,7 @@ export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
 
   return (
     <PlatformDropdown
-      title={t("player.aspect_ratio")}
+      title='Aspect Ratio'
       groups={optionGroups}
       trigger={trigger}
       bottomSheetConfig={{

components/video-player/controls/contexts/VideoContext.tsx

@@ -23,32 +23,29 @@
  *    - Used to report playback state to Jellyfin server
  *    - Value of -1 means disabled/none
  *
- * 2. MPV INDEX (track.mpvIndex)
+ * 2. PLAYER TRACK (selected by IDENTITY, not position)
- *    - MPV's internal track ID
+ *    - Selection resolves the server Index against MPV's REAL track list via
- *    - MPV orders tracks as: [all embedded, then all external]
+ *      applyMpvSubtitleSelection: externals matched by external-filename,
- *    - IDs: 1..embeddedCount for embedded, embeddedCount+1.. for external
+ *      embedded by language/title. `track.mpvIndex` is no longer used to select
- *    - Value of -1 means track needs replacePlayer() (e.g., burned-in sub)
+ *      (kept -1) — positional mapping mis-selected when externals/embedded were
+ *      reordered or the server hid embedded subs (#954 et al.).
  *
  * ============================================================================
  * SUBTITLE HANDLING
  * ============================================================================
  *
- * Embedded (DeliveryMethod.Embed):
+ * Embedded & External:
- *   - Already in MPV's track list
+ *   - Selected via applyMpvSubtitleSelection (identity match against the live
- *   - Select via setSubtitleTrack(mpvId)
+ *     track list). Menu order matches jellyfin-web (compareTracksForMenu:
- *
+ *     embedded first, externals last, forced/default float up).
- * External (DeliveryMethod.External):
- *   - Loaded into MPV on video start
- *   - Select via setSubtitleTrack(embeddedCount + externalPosition + 1)
  *
  * Image-based during transcoding:
- *   - Burned into video by Jellyfin, not in MPV
+ *   - Burned into video by Jellyfin, not in MPV → replacePlayer() to change.
- *   - Requires replacePlayer() to change
  */
 
-import { SubtitleDeliveryMethod } from "@jellyfin/sdk/lib/generated-client";
 import { File } from "expo-file-system";
 import { useLocalSearchParams } from "expo-router";
+import { useAtomValue } from "jotai";
 import type React from "react";
 import {
   createContext,
@@ -61,9 +58,14 @@ import {
 import { Platform } from "react-native";
 import useRouter from "@/hooks/useAppRouter";
 import type { MpvAudioTrack } from "@/modules";
+import { apiAtom } from "@/providers/JellyfinProvider";
 import { useOfflineMode } from "@/providers/OfflineModeProvider";
 import { getSubtitlesForItem } from "@/utils/atoms/downloadedSubtitles";
-import { isImageBasedSubtitle } from "@/utils/jellyfin/subtitleUtils";
+import {
+  applyMpvSubtitleSelection,
+  compareTracksForMenu,
+  isImageBasedSubtitle,
+} from "@/utils/jellyfin/subtitleUtils";
 import type { Track } from "../types";
 import { usePlayerContext, usePlayerControls } from "./PlayerContext";
 
@@ -87,6 +89,7 @@ export const VideoProvider: React.FC<{ children: ReactNode }> = ({
   const { tracksReady, mediaSource, downloadedItem } = usePlayerContext();
   const playerControls = usePlayerControls();
   const offline = useOfflineMode();
+  const api = useAtomValue(apiAtom);
   const router = useRouter();
 
   const { itemId, audioIndex, bitrateValue, subtitleIndex, playbackPosition } =
@@ -141,6 +144,19 @@ export const VideoProvider: React.FC<{ children: ReactNode }> = ({
   useEffect(() => {
     if (!tracksReady) return;
 
+    // Guard every state commit against stale runs: api?.basePath /
+    // isCurrentSubImageBased can flip mid-run and restart this effect, and an
+    // earlier async run (which captured an old `api`) must not finish later and
+    // overwrite the fresh track list with callbacks bound to stale closures.
+    // The cleanup flips `cancelled`, so any late commit from a dead run is dropped.
+    let cancelled = false;
+    const commitSubtitleTracks = (next: Track[]) => {
+      if (!cancelled) setSubtitleTracks(next);
+    };
+    const commitAudioTracks = (next: Track[]) => {
+      if (!cancelled) setAudioTracks(next);
+    };
+
     const fetchTracks = async () => {
       // Check if this is offline transcoded content
       // For transcoded offline content, only ONE audio track exists in the file
@@ -166,10 +182,10 @@ export const VideoProvider: React.FC<{ children: ReactNode }> = ({
               },
             },
           ];
-          setAudioTracks(audio);
+          commitAudioTracks(audio);
         } else {
           // Fallback: show no audio tracks if the stored track wasn't found
-          setAudioTracks([]);
+          commitAudioTracks([]);
         }
 
         // For subtitles in transcoded offline content:
@@ -179,6 +195,24 @@ export const VideoProvider: React.FC<{ children: ReactNode }> = ({
           downloadedItem.userData.subtitleStreamIndex;
         const subs: Track[] = [];
 
+        // If an IMAGE subtitle was burned into the transcoded download it's in the
+        // video pixels — it can't be turned off or swapped. Show only that entry
+        // instead of advertising "Disable"/text controls that can't affect it.
+        const burnedInSub = allSubs.find(
+          (s) => s.Index === downloadedSubtitleIndex,
+        );
+        if (burnedInSub && isImageBasedSubtitle(burnedInSub)) {
+          commitSubtitleTracks([
+            {
+              name: `${burnedInSub.DisplayTitle || "Unknown"} (burned in)`,
+              index: burnedInSub.Index ?? -1,
+              mpvIndex: -1,
+              setTrack: () => {},
+            },
+          ]);
+          return;
+        }
+
         // Add "Disable" option
         subs.push({
           name: "Disable",
@@ -190,123 +224,82 @@ export const VideoProvider: React.FC<{ children: ReactNode }> = ({
           },
         });
 
-        // For text-based subs, they should still be available in the file
+        // Text subs are muxed into the transcoded file and switchable; resolve by
-        let subIdx = 1;
+        // identity against MPV's real track list (same as online). Order matches web.
-        for (const sub of allSubs) {
+        // Image subs aren't in the transcoded file (only the burned one was, handled
-          if (sub.IsTextSubtitleStream) {
+        // above), so skip them here.
-            subs.push({
+        for (const sub of [...allSubs].sort(compareTracksForMenu)) {
-              name: sub.DisplayTitle || "Unknown",
+          if (!isImageBasedSubtitle(sub)) {
-              index: sub.Index ?? -1,
-              mpvIndex: subIdx,
-              setTrack: () => {
-                playerControls.setSubtitleTrack(subIdx);
-                router.setParams({ subtitleIndex: String(sub.Index) });
-              },
-            });
-            subIdx++;
-          } else if (sub.Index === downloadedSubtitleIndex) {
-            // This image-based sub was burned in - show it but indicate it's active
-            subs.push({
-              name: `${sub.DisplayTitle || "Unknown"} (burned in)`,
-              index: sub.Index ?? -1,
-              mpvIndex: -1, // Can't be changed
-              setTrack: () => {
-                // Already burned in, just update params
-                router.setParams({ subtitleIndex: String(sub.Index) });
-              },
-            });
-          }
-        }
-
-        setSubtitleTracks(subs.sort((a, b) => a.index - b.index));
-        return;
-      }
-
-      // MPV track handling
-      const audioData = await playerControls.getAudioTracks().catch(() => null);
-      const playerAudio = (audioData as MpvAudioTrack[]) ?? [];
-
-      // Separate embedded vs external subtitles from Jellyfin's list
-      // MPV orders tracks as: [all embedded, then all external]
-      const embeddedSubs = allSubs.filter(
-        (s) => s.DeliveryMethod === SubtitleDeliveryMethod.Embed,
-      );
-      const externalSubs = allSubs.filter(
-        (s) => s.DeliveryMethod === SubtitleDeliveryMethod.External,
-      );
-
-      // Count embedded subs that will be in MPV
-      // (excludes image-based subs during transcoding as they're burned in)
-      const embeddedInPlayer = embeddedSubs.filter(
-        (s) => !isTranscoding || !isImageBasedSubtitle(s),
-      );
-
-      const subs: Track[] = [];
-
-      // Process all Jellyfin subtitles
-      for (const sub of allSubs) {
-        const isEmbedded = sub.DeliveryMethod === SubtitleDeliveryMethod.Embed;
-        const isExternal =
-          sub.DeliveryMethod === SubtitleDeliveryMethod.External;
-
-        // For image-based subs during transcoding, need to refresh player
-        if (isTranscoding && isImageBasedSubtitle(sub)) {
             subs.push({
               name: sub.DisplayTitle || "Unknown",
               index: sub.Index ?? -1,
               mpvIndex: -1,
               setTrack: () => {
-              replacePlayer({ subtitleIndex: String(sub.Index) });
+                router.setParams({ subtitleIndex: String(sub.Index) });
+                void applyMpvSubtitleSelection(playerControls, {
+                  subtitleStreams: allSubs,
+                  jellyfinSubtitleIndex: sub.Index ?? -1,
+                  getExpectedExternalUrl: (s) => {
+                    if (!s.DeliveryUrl) return undefined;
+                    if (offline) return s.DeliveryUrl;
+                    return api?.basePath
+                      ? `${api.basePath}${s.DeliveryUrl}`
+                      : undefined;
                   },
                 });
-          continue;
+              },
+            });
+          }
         }
 
-        // Calculate MPV track ID based on type
+        commitSubtitleTracks(subs);
-        // MPV IDs: [1..embeddedCount] for embedded, [embeddedCount+1..] for external
+        return;
-        let mpvId = -1;
+      }
 
-        if (isEmbedded) {
+      // MPV track handling
-          // Find position among embedded subs that are in player
+      const audioData = await playerControls.getAudioTracks().catch(() => null);
-          const embeddedPosition = embeddedInPlayer.findIndex(
+      if (cancelled) return;
-            (s) => s.Index === sub.Index,
+      const playerAudio = (audioData as MpvAudioTrack[]) ?? [];
-          );
+
-          if (embeddedPosition !== -1) {
+      const subs: Track[] = [];
-            mpvId = embeddedPosition + 1; // 1-based ID
+
-          }
+      // Process all Jellyfin subtitles. Selection resolves against MPV's real
-        } else if (isExternal) {
+      // track list by identity (applyMpvSubtitleSelection) — never positional
-          // Find position among external subs, offset by embedded count
+      // index math, which mis-selects across external/embedded reordering and
-          const externalPosition = externalSubs.findIndex(
+      // server-hidden embedded subs (#954/#1690/#618/#1467/#976/#1451).
-            (s) => s.Index === sub.Index,
+      // Order matches jellyfin-web (embedded first, externals last, forced/default up).
-          );
+      for (const sub of [...allSubs].sort(compareTracksForMenu)) {
-          if (externalPosition !== -1) {
+        // Image-based subs during transcoding are burned into the video by the
-            mpvId = embeddedInPlayer.length + externalPosition + 1;
+        // server; both switching TO one and switching AWAY from a currently
-          }
+        // active one require a player refresh (re-transcode), not a track change.
-        }
+        const needsReplace =
+          isTranscoding &&
+          (isImageBasedSubtitle(sub) || isCurrentSubImageBased);
 
         subs.push({
           name: sub.DisplayTitle || "Unknown",
           index: sub.Index ?? -1,
-          mpvIndex: mpvId,
+          mpvIndex: -1,
           setTrack: () => {
-            // Transcoding + switching to/from image-based sub
+            if (needsReplace) {
-            if (
-              isTranscoding &&
-              (isImageBasedSubtitle(sub) || isCurrentSubImageBased)
-            ) {
               replacePlayer({ subtitleIndex: String(sub.Index) });
               return;
             }
-
-            // Direct switch in player
-            if (mpvId !== -1) {
-              playerControls.setSubtitleTrack(mpvId);
             router.setParams({ subtitleIndex: String(sub.Index) });
-              return;
+            void applyMpvSubtitleSelection(playerControls, {
-            }
+              subtitleStreams: allSubs,
-
+              jellyfinSubtitleIndex: sub.Index ?? -1,
-            // Fallback - refresh player
+              // Mirror how external subs are loaded into MPV (online: basePath +
-            replacePlayer({ subtitleIndex: String(sub.Index) });
+              // DeliveryUrl, offline: local DeliveryUrl) so identity matching by
+              // external-filename lines up.
+              getExpectedExternalUrl: (s) => {
+                if (!s.DeliveryUrl) return undefined;
+                if (offline) return s.DeliveryUrl;
+                return api?.basePath
+                  ? `${api.basePath}${s.DeliveryUrl}`
+                  : undefined;
+              },
+            });
           },
         });
       }
@@ -374,12 +367,29 @@ export const VideoProvider: React.FC<{ children: ReactNode }> = ({
         }
       }
 
-      setSubtitleTracks(subs.sort((a, b) => a.index - b.index));
+      // Already in jellyfin-web order (sorted iteration above); "Disable" stays
-      setAudioTracks(audio);
+      // at the front (unshifted), local downloaded subs at the end.
+      commitSubtitleTracks(subs);
+      commitAudioTracks(audio);
     };
 
     fetchTracks();
-  }, [tracksReady, mediaSource, offline, downloadedItem, itemId]);
+    return () => {
+      cancelled = true;
+    };
+    // api?.basePath: setTrack builds external-sub URLs from it — rebuild once the
+    // API is ready so online externals don't resolve with undefined.
+    // isCurrentSubImageBased: setTrack closes over it for the transcode replacePlayer
+    // decision — rebuild when it flips so we refresh the stream when we should.
+  }, [
+    tracksReady,
+    mediaSource,
+    offline,
+    downloadedItem,
+    itemId,
+    api?.basePath,
+    isCurrentSubImageBased,
+  ]);
 
   return (
     <VideoContext.Provider value={{ subtitleTracks, audioTracks }}>

components/video-player/controls/dropdown/DropdownView.tsx

@@ -1,7 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useLocalSearchParams } from "expo-router";
 import { useCallback, useMemo, useRef } from "react";
-import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { BITRATES } from "@/components/BitrateSelector";
 import {
@@ -48,7 +47,6 @@ const DropdownView = ({
   const { settings, updateSettings } = useSettings();
   const router = useRouter();
   const isOffline = useOfflineMode();
-  const { t } = useTranslation();
 
   const { subtitleIndex, audioIndex, bitrateValue, playbackPosition } =
     useLocalSearchParams<{
@@ -103,7 +101,7 @@ const DropdownView = ({
     // Quality Section
     if (!isOffline) {
       groups.push({
-        title: t("player.menu.quality"),
+        title: "Quality",
         options:
           BITRATES?.map((bitrate) => ({
             type: "radio" as const,
@@ -118,7 +116,7 @@ const DropdownView = ({
     // Subtitle Section
     if (subtitleTracks && subtitleTracks.length > 0) {
       groups.push({
-        title: t("player.menu.subtitles"),
+        title: "Subtitles",
         options: subtitleTracks.map((sub) => ({
           type: "radio" as const,
           label: sub.name,
@@ -130,7 +128,7 @@ const DropdownView = ({
 
       // Subtitle Scale Section
       groups.push({
-        title: t("player.menu.subtitle_scale"),
+        title: "Subtitle Scale",
         options: SUBTITLE_SCALE_PRESETS.map((preset) => ({
           type: "radio" as const,
           label: preset.label,
@@ -144,7 +142,7 @@ const DropdownView = ({
     // Audio Section
     if (audioTracks && audioTracks.length > 0) {
       groups.push({
-        title: t("player.menu.audio"),
+        title: "Audio",
         options: audioTracks.map((track) => ({
           type: "radio" as const,
           label: track.name,
@@ -158,7 +156,7 @@ const DropdownView = ({
     // Speed Section
     if (setPlaybackSpeed) {
       groups.push({
-        title: t("player.menu.speed"),
+        title: "Speed",
         options: PLAYBACK_SPEEDS.map((speed) => ({
           type: "radio" as const,
           label: speed.label,
@@ -176,8 +174,8 @@ const DropdownView = ({
           {
             type: "action" as const,
             label: showTechnicalInfo
-              ? t("player.menu.hide_technical_info")
+              ? "Hide Technical Info"
-              : t("player.menu.show_technical_info"),
+              : "Show Technical Info",
             onPress: onToggleTechnicalInfo,
           },
         ],
@@ -187,7 +185,6 @@ const DropdownView = ({
     return groups;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    t,
     isOffline,
     bitrateValue,
     changeBitrate,
@@ -220,7 +217,7 @@ const DropdownView = ({
 
   return (
     <PlatformDropdown
-      title={t("player.menu.playback_options")}
+      title='Playback Options'
       groups={optionGroups}
       trigger={trigger}
       expoUIConfig={{}}

components/video-player/controls/hooks/useRemoteControl.ts

@@ -3,7 +3,6 @@ import { Alert } from "react-native";
 import { type SharedValue, useSharedValue } from "react-native-reanimated";
 import { useTVBackPress } from "@/hooks/useTVBackPress";
 import { useTVEventHandler } from "@/hooks/useTVEventHandler";
-import i18n from "@/i18n";
 
 interface UseRemoteControlProps {
   showControls: boolean;
@@ -125,23 +124,17 @@ export function useRemoteControl({
 
       // Controls are hidden, so confirm before leaving playback.
       Alert.alert(
-        i18n.t("player.stopPlayback"),
+        "Stop Playback",
         videoTitleRef.current
-          ? i18n.t("player.stopPlayingTitle", {
+          ? `Stop playing "${videoTitleRef.current}"?`
-              title: videoTitleRef.current,
+          : "Are you sure you want to stop playback?",
-            })
-          : i18n.t("player.stopPlayingConfirm"),
         [
           {
-            text: i18n.t("common.cancel"),
+            text: "Cancel",
             style: "cancel",
             onPress: () => onCancelExitRef.current?.(),
           },
-          {
+          { text: "Stop", style: "destructive", onPress: onBackRef.current },
-            text: i18n.t("common.stop"),
-            style: "destructive",
-            onPress: onBackRef.current,
-          },
         ],
       );
       return true;

constants/MediaTypes.ts

@@ -3,9 +3,13 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-export default {
+const MediaTypes = {
   Audio: "Audio",
   Video: "Video",
   Photo: "Photo",
   Book: "Book",
-};
+} as const;
+
+export type MediaType = (typeof MediaTypes)[keyof typeof MediaTypes];
+
+export default MediaTypes;

docs/tv-discovery.md

@@ -28,7 +28,7 @@ Apple TV uses a Top Shelf extension target, not the main app process.
 
 Relevant files:
 
-- [plugins/withTVOSTopShelf.js](../plugins/withTVOSTopShelf.js)
+- [plugins/withTVOSTopShelf.ts](../plugins/withTVOSTopShelf.ts)
 - [targets/StreamyfinTopShelf/TopShelfProvider.swift](../targets/StreamyfinTopShelf/TopShelfProvider.swift)
 - [modules/top-shelf-cache/ios/TopShelfCacheModule.swift](../modules/top-shelf-cache/ios/TopShelfCacheModule.swift)
 - [utils/topshelf/cache.ts](../utils/topshelf/cache.ts)

hooks/useAppRouter.ts

@@ -1,19 +1,13 @@
-// Imported from expo-router's bundled copy, NOT "@react-navigation/*": as of
-// SDK 56 expo-router's Metro check rejects direct @react-navigation imports.
 import { useRouter } from "expo-router";
-import { NavigationContext } from "expo-router/react-navigation";
+import { useCallback, useMemo } from "react";
-import { useCallback, useContext, useMemo } from "react";
 import { useOfflineMode } from "@/providers/OfflineModeProvider";
 
 /**
  * Drop-in replacement for expo-router's useRouter that automatically
- * preserves offline state across navigation and guards against duplicate
+ * preserves offline state across navigation.
- * screens from rapid taps.
  *
  * - For object-form navigation, automatically adds offline=true when in offline context
  * - For string URLs, passes through unchanged (caller handles offline param)
- * - push() is a no-op while the source screen is not focused, so taps fired
- *   before the pushed screen has rendered (slow devices) can't stack duplicates
  *
  * @example
  * import useRouter from "@/hooks/useAppRouter";
@@ -25,18 +19,8 @@ export function useAppRouter() {
   const router = useRouter();
   const isOffline = useOfflineMode();
 
-  // Optional: undefined when used outside a navigator (root layout, providers).
-  // When present it reflects the focus state of the screen this hook lives in.
-  const navigation = useContext(NavigationContext);
-
   const push = useCallback(
     (href: Parameters<typeof router.push>[0]) => {
-      // Rapid-push guard: a push blurs the source screen synchronously in the
-      // navigation state (only the native render is slow). Any further push from
-      // this screen — duplicate or not — is dropped until focus returns, so taps
-      // fired before the pushed screen renders can't stack screens.
-      // No navigation context => nothing to guard (deep-link pushes from root).
-      if (navigation?.isFocused?.() === false) return;
       if (typeof href === "string") {
         router.push(href as any);
       } else {
@@ -52,7 +36,7 @@ export function useAppRouter() {
         } as any);
       }
     },
-    [router, isOffline, navigation],
+    [router, isOffline],
   );
 
   const replace = useCallback(

hooks/useFilterReset.ts

@@ -1,108 +0,0 @@
-import { useAtom } from "jotai";
-import { useCallback } from "react";
-import {
-  FilterByPreferenceAtom,
-  filterByAtom,
-  genreFilterAtom,
-  genrePreferenceAtom,
-  SortByOption,
-  SortOrderOption,
-  sortByAtom,
-  sortByPreferenceAtom,
-  sortOrderAtom,
-  sortOrderPreferenceAtom,
-  tagPreferenceAtom,
-  tagsFilterAtom,
-  yearFilterAtom,
-  yearPreferenceAtom,
-} from "@/utils/atoms/filters";
-
-/**
- * Single source of truth for the library filter bar's "reset" action and its
- * visibility. The mobile ResetFiltersButton and the TV filter header both use
- * this so they can't drift — sort/order used to be reset on neither path, so
- * the reset (X) never reflected a changed sort.
- *
- * A reset clears the session filters AND the per-library in-memory preferences
- * (sort, order, filterBy, genres, years, tags); otherwise the saved preference
- * resurfaces when the library's mount effect re-applies it on the next entry.
- */
-export const useFilterReset = (libraryId: string) => {
-  const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
-  const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
-  const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
-  const [filterBy, setFilterBy] = useAtom(filterByAtom);
-  const [sortBy, setSortBy] = useAtom(sortByAtom);
-  const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
-  const [, setSortByPreference] = useAtom(sortByPreferenceAtom);
-  const [, setSortOrderPreference] = useAtom(sortOrderPreferenceAtom);
-  const [, setFilterByPreference] = useAtom(FilterByPreferenceAtom);
-  const [, setGenrePreference] = useAtom(genrePreferenceAtom);
-  const [, setYearPreference] = useAtom(yearPreferenceAtom);
-  const [, setTagPreference] = useAtom(tagPreferenceAtom);
-
-  // SortName / Ascending is the baseline a library opens with (mount-effect
-  // fallback), so any other value counts as an active, resettable sort.
-  const hasActiveFilters =
-    selectedGenres.length > 0 ||
-    selectedYears.length > 0 ||
-    selectedTags.length > 0 ||
-    filterBy.length > 0 ||
-    sortBy[0] !== SortByOption.SortName ||
-    sortOrder[0] !== SortOrderOption.Ascending;
-
-  const resetAllFilters = useCallback(() => {
-    setSelectedGenres([]);
-    setSelectedYears([]);
-    setSelectedTags([]);
-    setFilterBy([]);
-    setSortBy([SortByOption.SortName]);
-    setSortOrder([SortOrderOption.Ascending]);
-    setSortByPreference((prev) => {
-      const next = { ...prev };
-      delete next[libraryId];
-      return next;
-    });
-    setSortOrderPreference((prev) => {
-      const next = { ...prev };
-      delete next[libraryId];
-      return next;
-    });
-    setFilterByPreference((prev) => {
-      const next = { ...prev };
-      delete next[libraryId];
-      return next;
-    });
-    setGenrePreference((prev) => {
-      const next = { ...prev };
-      delete next[libraryId];
-      return next;
-    });
-    setYearPreference((prev) => {
-      const next = { ...prev };
-      delete next[libraryId];
-      return next;
-    });
-    setTagPreference((prev) => {
-      const next = { ...prev };
-      delete next[libraryId];
-      return next;
-    });
-  }, [
-    libraryId,
-    setSelectedGenres,
-    setSelectedYears,
-    setSelectedTags,
-    setFilterBy,
-    setSortBy,
-    setSortOrder,
-    setSortByPreference,
-    setSortOrderPreference,
-    setFilterByPreference,
-    setGenrePreference,
-    setYearPreference,
-    setTagPreference,
-  ]);
-
-  return { hasActiveFilters, resetAllFilters };
-};

hooks/useJellyseerr.ts

@@ -143,7 +143,7 @@ export class JellyseerrApi {
         if (inRange(status, 200, 299)) {
           if (data.version < "2.0.0") {
             const error = t(
-              "jellyseerr.toasts.jellyseerr_does_not_meet_requirements",
+              "jellyseerr.toasts.jellyseer_does_not_meet_requirements",
             );
             toast.error(error);
             throw Error(error);

modules/mpv-player/android/src/main/java/expo/modules/mpvplayer/MPVLayerRenderer.kt

@@ -535,6 +535,17 @@ class MPVLayerRenderer(private val context: Context) : MPVLib.EventObserver {
 
             mpv?.getPropertyString("track-list/$i/title")?.let { track["title"] = it }
             mpv?.getPropertyString("track-list/$i/lang")?.let { track["lang"] = it }
+            mpv?.getPropertyString("track-list/$i/codec")?.let { track["codec"] = it }
+
+            // Identity fields used to map a Jellyfin subtitle to the real track
+            // (instead of fragile positional counting). `external` + `external-filename`
+            // uniquely identify a sub-added sidecar; `ff-index` aids embedded matching.
+            val external = mpv?.getPropertyBoolean("track-list/$i/external") ?: false
+            track["external"] = external
+            mpv?.getPropertyString("track-list/$i/external-filename")?.let {
+                track["externalFilename"] = it
+            }
+            mpv?.getPropertyInt("track-list/$i/ff-index")?.let { track["ffIndex"] = it }
 
             val selected = mpv?.getPropertyBoolean("track-list/$i/selected") ?: false
             track["selected"] = selected

modules/mpv-player/android/src/main/java/expo/modules/mpvplayer/MpvPlayerView.kt

@@ -2,14 +2,12 @@ package expo.modules.mpvplayer
 
 import android.content.Context
 import android.graphics.Color
-import android.graphics.Rect
-import android.graphics.SurfaceTexture
 import android.os.Handler
 import android.os.Looper
 import android.util.Log
 import android.view.Surface
-import android.view.TextureView
+import android.view.SurfaceHolder
-import android.view.View
+import android.view.SurfaceView
 import android.view.ViewGroup
 import expo.modules.kotlin.AppContext
 import expo.modules.kotlin.viewevent.EventDispatcher
@@ -30,15 +28,26 @@ data class VideoLoadConfig(
     val cacheEnabled: String? = null,
     val cacheSeconds: Int? = null,
     val demuxerMaxBytes: Int? = null,
-    val demuxerMaxBackBytes: Int? = null
+    val demuxerMaxBackBytes: Int? = null,
 )
 
 /**
  * MpvPlayerView - ExpoView that hosts the MPV player.
- * Uses TextureView for reliable Picture-in-Picture support.
+ *
+ * Uses SurfaceView (not TextureView) so the surface routes directly to
+ * SurfaceFlinger (the OS compositor) rather than compositing into the
+ * app's window surface. This matches mpv-android's architecture and
+ * gives mpv a standalone surface.
+ *
+ * PiP black-screen mitigation: SurfaceView's surface is destroyed and
+ * recreated on PiP entry/exit, and the new surface's initial dimensions
+ * can be stale until the next layout pass. We push dimension updates to
+ * mpv via both SurfaceHolder.Callback.surfaceChanged AND an
+ * OnLayoutChangeListener, so the PiP transition (which fires layout
+ * passes on the view itself) reaches mpv promptly.
  */
 class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context, appContext),
-    MPVLayerRenderer.Delegate, TextureView.SurfaceTextureListener {
+    MPVLayerRenderer.Delegate, SurfaceHolder.Callback {
 
     companion object {
         private const val TAG = "MpvPlayerView"
@@ -52,7 +61,7 @@ class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context
     val onTracksReady by EventDispatcher()
     val onPictureInPictureChange by EventDispatcher()
 
-    private var textureView: TextureView
+    private var surfaceView: SurfaceView
     private var renderer: MPVLayerRenderer? = null
     private var pipController: PiPController? = null
 
@@ -63,31 +72,45 @@ class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context
     private var surfaceReady: Boolean = false
     private var pendingConfig: VideoLoadConfig? = null
     private var rendererStarted: Boolean = false
-    private var pendingSurface: Surface? = null
     private var activeSurface: Surface? = null
-    private var surfaceTexture: SurfaceTexture? = null
 
     // PiP state tracking
-    private var isWaitingForPiPTransition: Boolean = false
-    private var isPiPSurfaceForced: Boolean = false
     private val pipHandler = Handler(Looper.getMainLooper())
 
     init {
         setBackgroundColor(Color.BLACK)
 
-        // Create TextureView for video rendering (composites into app window for PiP support)
+        // SurfaceView for video rendering. Routes the surface directly to
-        textureView = TextureView(context).apply {
+        // SurfaceFlinger (the OS compositor), giving mpv a standalone
+        // surface. TextureView composites into the app's window surface
+        // which is less efficient and breaks PiP transitions.
+        surfaceView = SurfaceView(context).apply {
             layoutParams = ViewGroup.LayoutParams(
                 ViewGroup.LayoutParams.MATCH_PARENT,
                 ViewGroup.LayoutParams.MATCH_PARENT
             )
-            surfaceTextureListener = this@MpvPlayerView
         }
-        addView(textureView)
+        surfaceView.holder.addCallback(this@MpvPlayerView)
+        addView(surfaceView)
+
+        // Push dimension updates to mpv on every view bounds change. This
+        // is the primary PiP black-screen fix: entering PiP fires a layout
+        // pass on the SurfaceView itself, and we proactively tell mpv the
+        // new size so it resizes its EGL swapchain before rendering.
+        surfaceView.addOnLayoutChangeListener { _, left, top, right, bottom,
+                                                  oldLeft, oldTop, oldRight, oldBottom ->
+            val w = right - left
+            val h = bottom - top
+            val oldW = oldRight - oldLeft
+            val oldH = oldBottom - oldTop
+            if (w > 0 && h > 0 && (w != oldW || h != oldH)) {
+                renderer?.updateSurfaceSize(w, h)
+            }
+        }
 
         // Initialize PiP controller with Expo's AppContext for proper activity access
         pipController = PiPController(context, appContext)
-        pipController?.setPlayerView(textureView)
+        pipController?.setPlayerView(surfaceView)
         pipController?.delegate = object : PiPController.Delegate {
             override fun onPlay() {
                 play()
@@ -103,17 +126,17 @@ class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context
 
             override fun onPictureInPictureModeChanged(isInPiP: Boolean) {
                 if (isInPiP) {
-                    if (!isWaitingForPiPTransition) {
+                    // Post size syncs after the PiP layout settles. Two passes
-                        isWaitingForPiPTransition = true
+                    // catch both the immediate surface re-attach and the
+                    // post-animation layout pass. Replaces the old TextureView
+                    // measure/layout polling hack (forcePiPBufferSize).
                     pipHandler.removeCallbacksAndMessages(null)
-                        for (delay in longArrayOf(500, 1000, 1500, 2000)) {
+                    pipHandler.postDelayed({ syncSurfaceSizeToView() }, 100)
-                            pipHandler.postDelayed({ forcePiPBufferSize() }, delay)
+                    pipHandler.postDelayed({ syncSurfaceSizeToView() }, 500)
-                        }
-                    }
                 } else {
-                    isWaitingForPiPTransition = false
+                    // Restore from PiP: surface resized back to fullscreen.
                     pipHandler.removeCallbacksAndMessages(null)
-                    restoreFromPiP()
+                    pipHandler.postDelayed({ syncSurfaceSizeToView() }, 100)
                 }
                 onPictureInPictureChange(mapOf("isActive" to isInPiP))
             }
@@ -126,7 +149,7 @@ class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context
 
     /**
      * Start the renderer with the given VO driver.
-     * Called lazily on first loadVideo so the voDriver setting is available.
+     * Called lazily on first loadVideo so user settings are available.
      */
     private fun ensureRendererStarted(voDriver: String?) {
         if (rendererStarted) return
@@ -135,10 +158,14 @@ class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context
             renderer?.start(voDriver ?: "gpu-next")
             rendererStarted = true
 
-            pendingSurface?.let { surface ->
+            // If the surface is already alive (surfaceCreated fired before
+            // loadVideo), attach it now. With SurfaceView the surface is
+            // owned by the holder, so we read it from there directly rather
+            // than stashing it on the side.
+            surfaceView.holder.surface?.takeIf { it.isValid }?.let { surface ->
                 activeSurface = surface
                 renderer?.attachSurface(surface)
-                pendingSurface = null
+                syncSurfaceSizeToView()
             }
         } catch (e: Exception) {
             Log.e(TAG, "Failed to start renderer: ${e.message}")
@@ -146,23 +173,20 @@ class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context
         }
     }
 
-    // MARK: - TextureView.SurfaceTextureListener
+    // MARK: - SurfaceHolder.Callback
 
-    override fun onSurfaceTextureAvailable(surfaceTexture: SurfaceTexture, width: Int, height: Int) {
+    override fun surfaceCreated(holder: SurfaceHolder) {
-        this.surfaceTexture = surfaceTexture
+        val surface = holder.surface
-        val surface = Surface(surfaceTexture)
-        surfaceTexture.setDefaultBufferSize(width, height)
         surfaceReady = true
 
         if (rendererStarted) {
-            // Release the previous wrapper Surface before losing the only
+            // The previous Surface reference is holder-owned; do NOT release
-            // reference to it. cleanup() only runs on detach, so without this
+            // it (SurfaceView manages its lifecycle). Just track the new one.
-            // repeated PiP/background/resize cycles leak native surface objects.
-            activeSurface?.release()
             activeSurface = surface
             renderer?.attachSurface(surface)
-        } else {
+            // Push the actual view dimensions immediately so mpv doesn't
-            pendingSurface = surface
+            // render against stale full-screen geometry during PiP transitions.
+            syncSurfaceSizeToView()
         }
 
         // If we have a pending load, execute it now
@@ -173,20 +197,36 @@ class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context
         }
     }
 
-    override fun onSurfaceTextureSizeChanged(surfaceTexture: SurfaceTexture, width: Int, height: Int) {
+    override fun surfaceChanged(holder: SurfaceHolder, format: Int, width: Int, height: Int) {
-        surfaceTexture.setDefaultBufferSize(width, height)
+        if (width > 0 && height > 0) {
             renderer?.updateSurfaceSize(width, height)
         }
-
-    override fun onSurfaceTextureDestroyed(surfaceTexture: SurfaceTexture): Boolean {
-        this.surfaceTexture = null
-        surfaceReady = false
-        renderer?.detachSurface()
-        return false // mpv manages the SurfaceTexture
     }
 
-    override fun onSurfaceTextureUpdated(surfaceTexture: SurfaceTexture) {
+    override fun surfaceDestroyed(holder: SurfaceHolder) {
-        // Called every frame — no action needed, mpv drives rendering directly
+        surfaceReady = false
+        renderer?.detachSurface()
+        // Do NOT issue mpv "stop" here. Playback continues against the
+        // demuxer; when surfaceCreated fires again (PiP entry/exit, app
+        // background/foreground), we re-attach and frames resume. This
+        // matches the keep-open=always setting in MPVLayerRenderer.
+        //
+        // Do NOT release activeSurface — SurfaceView owns it via the holder.
+        activeSurface = null
+    }
+
+    /**
+     * Read the actual SurfaceView width/height and push them to mpv.
+     * The PiP transition can fire surfaceCreated before the view's layout
+     * has settled to PiP dimensions, so we re-sync after layout passes.
+     */
+    private fun syncSurfaceSizeToView() {
+        if (!surfaceReady) return
+        val w = surfaceView.width
+        val h = surfaceView.height
+        if (w > 0 && h > 0) {
+            renderer?.updateSurfaceSize(w, h)
+        }
     }
 
     // MARK: - Video Loading
@@ -275,7 +315,7 @@ class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context
 
         // Reset view-level state so a subsequent loadVideo() on the SAME view
         // instance re-creates the mpv handle and re-attaches the still-live
-        // TextureView surface. Without this, rendererStarted stays true and
+        // SurfaceView surface. Without this, rendererStarted stays true and
         // ensureRendererStarted() early-returns, so renderer.start() is never
         // called again — but stop() already nulled the renderer's mpv handle.
         // The next loadVideo() then runs loadVideoInternal() -> renderer.load()
@@ -286,13 +326,12 @@ class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context
         // which call destroy() immediately before router.replace() to the
         // same route — Expo Router reuses the same MpvPlayerView instance,
         // so the next source load happens on this view without a remount.
+        //
+        // SurfaceView note: the surface is owned by the holder and survives
+        // across destroy()/loadVideo() on the same view instance. The next
+        // ensureRendererStarted() reads it from surfaceView.holder.surface.
         rendererStarted = false
         currentUrl = null
-        // Move the active surface back to pending so ensureRendererStarted()
-        // re-attaches it to the freshly created mpv instance on next load.
-        // The Surface itself is still valid — onSurfaceTextureDestroyed has
-        // not fired because the TextureView is not being unmounted.
-        activeSurface?.let { pendingSurface = it }
         activeSurface = null
     }
 
@@ -327,59 +366,10 @@ class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context
     // MARK: - Picture in Picture
 
     fun startPictureInPicture() {
-        isWaitingForPiPTransition = true
         pipController?.startPictureInPicture()
-
-        // Resize buffer to match PiP window after animation settles
-        pipHandler.removeCallbacksAndMessages(null)
-        for (delay in longArrayOf(500, 1000, 1500, 2000)) {
-            pipHandler.postDelayed({ forcePiPBufferSize() }, delay)
-        }
-    }
-
-    /**
-     * Resize the SurfaceTexture buffer AND TextureView layout to match the PiP
-     * visible rect so mpv renders at the PiP window's actual dimensions.
-     */
-    private fun forcePiPBufferSize() {
-        if (!isWaitingForPiPTransition || !surfaceReady) return
-
-        val rect = Rect()
-        textureView.getGlobalVisibleRect(rect)
-        val visW = rect.width()
-        val visH = rect.height()
-        val vw = textureView.width
-        val vh = textureView.height
-
-        if (visW <= 0 || visH <= 0 || (vw == visW && vh == visH)) return
-
-        surfaceTexture?.setDefaultBufferSize(visW, visH)
-        renderer?.updateSurfaceSize(visW, visH)
-
-        // Force TextureView layout to match PiP visible area.
-        // layoutParams alone doesn't work during PiP because the parent
-        // never re-lays out its children.
-        textureView.measure(
-            View.MeasureSpec.makeMeasureSpec(visW, View.MeasureSpec.EXACTLY),
-            View.MeasureSpec.makeMeasureSpec(visH, View.MeasureSpec.EXACTLY)
-        )
-        textureView.layout(0, 0, visW, visH)
-        isPiPSurfaceForced = true
-    }
-
-    private fun restoreFromPiP() {
-        if (!isPiPSurfaceForced) return
-        isPiPSurfaceForced = false
-
-        val lp = textureView.layoutParams
-        lp.width = ViewGroup.LayoutParams.MATCH_PARENT
-        lp.height = ViewGroup.LayoutParams.MATCH_PARENT
-        textureView.layoutParams = lp
-        textureView.requestLayout()
     }
 
     fun stopPictureInPicture() {
-        isWaitingForPiPTransition = false
         pipHandler.removeCallbacksAndMessages(null)
         pipController?.stopPictureInPicture()
     }
@@ -547,20 +537,12 @@ class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context
      * off the JS path.
      */
     fun cleanup() {
-        isWaitingForPiPTransition = false
         pipHandler.removeCallbacksAndMessages(null)
         pipController?.stopPictureInPicture()
         renderer?.stop()
         renderer?.delegate = null
 
-        // Release the Surface that wraps the SurfaceTexture. These Surface
+        // SurfaceView owns the Surface via its holder — do NOT release it.
-        // objects are created in onSurfaceTextureAvailable and were never
-        // released; each playback session previously leaked one. The
-        // SurfaceTexture itself is owned by TextureView and released by it
-        // via onSurfaceTextureDestroyed, so we leave it alone.
-        pendingSurface?.release()
-        pendingSurface = null
-        activeSurface?.release()
         activeSurface = null
         surfaceReady = false
         currentUrl = null

modules/mpv-player/android/src/main/java/expo/modules/mpvplayer/PiPController.kt

@@ -44,6 +44,11 @@ class PiPController(private val context: Context, private val appContext: AppCon
     private var currentPosition: Double = 0.0
     private var currentDuration: Double = 0.0
     private var playbackRate: Double = 1.0
+    // Independently tracks whether the system should auto-enter PiP on home
+    // press. Decoupled from playbackRate so that disabling auto-enter
+    // (e.g. when the player unmounts) doesn't corrupt the play/pause icon
+    // state that buildPiPActions() derives from playbackRate.
+    private var autoEnterEnabled: Boolean = false
 
     private var videoWidth: Int = 0
     private var videoHeight: Int = 0
@@ -106,15 +111,37 @@ class PiPController(private val context: Context, private val appContext: AppCon
     }
 
     fun stopPictureInPicture() {
+        // Disable auto-enter eligibility without touching playbackRate.
+        // playbackRate drives the play/pause icon in buildPiPActions();
+        // mutating it here would cause a stale icon if PiP is re-entered
+        // before the next playback state callback corrects it.
+        autoEnterEnabled = false
         isInPiPMode = false
         pipEntryNotified = false
         unregisterLifecycleCallbacks()
-        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+
-            val activity = getActivity()
+        val activity = getActivity() ?: return
-            if (activity?.isInPictureInPictureMode == true) {
+
-                activity.moveTaskToBack(false)
+        // Push minimal params with just auto-enter disabled. Do NOT call
+        // buildPiPParams() — it calls ensurePiPReceiverRegistered() and
+        // setActions(), which would re-register the broadcast receiver
+        // (just unregistered above) and attach play/pause/skip actions to
+        // params being torn down. That leaves a live receiver + stale
+        // actions after the player has unmounted.
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+            try {
+                activity.setPictureInPictureParams(
+                    PictureInPictureParams.Builder()
+                        .setAutoEnterEnabled(false)
+                        .build()
+                )
+            } catch (e: Exception) {
+                Log.e(TAG, "Failed to clear PiP auto-enter params: ${e.message}")
             }
         }
+        if (activity.isInPictureInPictureMode) {
+            activity.moveTaskToBack(false)
+        }
     }
 
     fun isCurrentlyInPiP(): Boolean = isInPiPMode
@@ -126,6 +153,7 @@ class PiPController(private val context: Context, private val appContext: AppCon
 
     fun setPlaybackRate(rate: Double) {
         playbackRate = rate
+        autoEnterEnabled = rate > 0
 
         if (rate > 0) {
             registerLifecycleCallbacks()
@@ -208,7 +236,7 @@ class PiPController(private val context: Context, private val appContext: AppCon
         builder.setActions(buildPiPActions())
 
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
-            builder.setAutoEnterEnabled(forEntering || playbackRate > 0)
+            builder.setAutoEnterEnabled(forEntering || autoEnterEnabled)
         }
 
         return builder.build()