Merge remote-tracking branch 'origin/develop' into fix/maxEpisodes-count

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

components/settings/AppearanceSettings.tsx

@@ -42,14 +42,6 @@ export const AppearanceSettings: React.FC = () => {
             }
           />
         </ListItem>
-        <ListItem title={t("home.settings.other.show_large_home_carousel")}>
-          <Switch
-            value={settings.showLargeHomeCarousel}
-            onValueChange={(value) =>
-              updateSettings({ showLargeHomeCarousel: value })
-            }
-          />
-        </ListItem>
         <ListItem
           title={t("home.settings.appearance.merge_next_up_continue_watching")}
         >

components/settings/MpvBufferSettings.tsx

@@ -0,0 +1,100 @@
+import { Ionicons } from "@expo/vector-icons";
+import type React from "react";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
+import { Stepper } from "@/components/inputs/Stepper";
+import { PlatformDropdown } from "@/components/PlatformDropdown";
+import { type MpvCacheMode, useSettings } from "@/utils/atoms/settings";
+import { Text } from "../common/Text";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
+
+const CACHE_MODE_OPTIONS: { key: string; value: MpvCacheMode }[] = [
+  { key: "home.settings.buffer.cache_auto", value: "auto" },
+  { key: "home.settings.buffer.cache_yes", value: "yes" },
+  { key: "home.settings.buffer.cache_no", value: "no" },
+];
+
+export const MpvBufferSettings: React.FC = () => {
+  const { settings, updateSettings } = useSettings();
+  const { t } = useTranslation();
+
+  const cacheModeOptions = useMemo(
+    () => [
+      {
+        options: CACHE_MODE_OPTIONS.map((option) => ({
+          type: "radio" as const,
+          label: t(option.key),
+          value: option.value,
+          selected: option.value === (settings?.mpvCacheEnabled ?? "auto"),
+          onPress: () => updateSettings({ mpvCacheEnabled: option.value }),
+        })),
+      },
+    ],
+    [settings?.mpvCacheEnabled, t, updateSettings],
+  );
+
+  const currentCacheModeLabel = useMemo(() => {
+    const option = CACHE_MODE_OPTIONS.find(
+      (o) => o.value === (settings?.mpvCacheEnabled ?? "auto"),
+    );
+    return option ? t(option.key) : t("home.settings.buffer.cache_auto");
+  }, [settings?.mpvCacheEnabled, t]);
+
+  if (!settings) return null;
+
+  return (
+    <ListGroup title={t("home.settings.buffer.title")} className='mb-4'>
+      <ListItem title={t("home.settings.buffer.cache_mode")}>
+        <PlatformDropdown
+          groups={cacheModeOptions}
+          trigger={
+            <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+              <Text className='mr-1 text-[#8E8D91]'>
+                {currentCacheModeLabel}
+              </Text>
+              <Ionicons name='chevron-expand-sharp' size={18} color='#5A5960' />
+            </View>
+          }
+          title={t("home.settings.buffer.cache_mode")}
+        />
+      </ListItem>
+
+      <ListItem title={t("home.settings.buffer.buffer_duration")}>
+        <Stepper
+          value={settings.mpvCacheSeconds ?? 10}
+          step={5}
+          min={5}
+          max={120}
+          onUpdate={(value) => updateSettings({ mpvCacheSeconds: value })}
+          appendValue='s'
+        />
+      </ListItem>
+
+      <ListItem title={t("home.settings.buffer.max_cache_size")}>
+        <Stepper
+          value={settings.mpvDemuxerMaxBytes ?? 150}
+          step={25}
+          min={50}
+          max={500}
+          onUpdate={(value) => updateSettings({ mpvDemuxerMaxBytes: value })}
+          appendValue=' MB'
+        />
+      </ListItem>
+
+      <ListItem title={t("home.settings.buffer.max_backward_cache")}>
+        <Stepper
+          value={settings.mpvDemuxerMaxBackBytes ?? 50}
+          step={25}
+          min={25}
+          max={200}
+          onUpdate={(value) =>
+            updateSettings({ mpvDemuxerMaxBackBytes: value })
+          }
+          appendValue=' MB'
+        />
+      </ListItem>
+    </ListGroup>
+  );
+};

components/settings/MpvSubtitleSettings.tsx

@@ -1,6 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useMemo } from "react";
-import { Platform, View, type ViewProps } from "react-native";
+import { Platform, Switch, View, type ViewProps } from "react-native";
 import { Stepper } from "@/components/inputs/Stepper";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
@@ -55,7 +55,6 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
     return [{ options }];
   }, [settings?.mpvSubtitleAlignY, updateSettings]);
 
-  if (isTv) return null;
   if (!settings) return null;
 
   return (
@@ -68,65 +67,83 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
           </Text>
         }
       >
-        <ListItem title='Subtitle Scale'>
-          <Stepper
-            value={settings.mpvSubtitleScale ?? 1.0}
-            step={0.1}
-            min={0.5}
-            max={2.0}
-            onUpdate={(value) =>
-              updateSettings({ mpvSubtitleScale: Math.round(value * 10) / 10 })
+        {!isTv && (
+          <>
+            <ListItem title='Vertical Margin'>
+              <Stepper
+                value={settings.mpvSubtitleMarginY ?? 0}
+                step={5}
+                min={0}
+                max={100}
+                onUpdate={(value) =>
+                  updateSettings({ mpvSubtitleMarginY: value })
+                }
+              />
+            </ListItem>
+
+            <ListItem title='Horizontal Alignment'>
+              <PlatformDropdown
+                groups={alignXOptionGroups}
+                trigger={
+                  <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                    <Text className='mr-1 text-[#8E8D91]'>
+                      {alignXLabels[settings?.mpvSubtitleAlignX ?? "center"]}
+                    </Text>
+                    <Ionicons
+                      name='chevron-expand-sharp'
+                      size={18}
+                      color='#5A5960'
+                    />
+                  </View>
+                }
+                title='Horizontal Alignment'
+              />
+            </ListItem>
+
+            <ListItem title='Vertical Alignment'>
+              <PlatformDropdown
+                groups={alignYOptionGroups}
+                trigger={
+                  <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                    <Text className='mr-1 text-[#8E8D91]'>
+                      {alignYLabels[settings?.mpvSubtitleAlignY ?? "bottom"]}
+                    </Text>
+                    <Ionicons
+                      name='chevron-expand-sharp'
+                      size={18}
+                      color='#5A5960'
+                    />
+                  </View>
+                }
+                title='Vertical Alignment'
+              />
+            </ListItem>
+          </>
+        )}
+
+        <ListItem title='Opaque Background'>
+          <Switch
+            value={settings.mpvSubtitleBackgroundEnabled ?? false}
+            onValueChange={(value) =>
+              updateSettings({ mpvSubtitleBackgroundEnabled: value })
             }
           />
         </ListItem>
 
-        <ListItem title='Vertical Margin'>
-          <Stepper
-            value={settings.mpvSubtitleMarginY ?? 0}
-            step={5}
-            min={0}
-            max={100}
-            onUpdate={(value) => updateSettings({ mpvSubtitleMarginY: value })}
-          />
-        </ListItem>
-
-        <ListItem title='Horizontal Alignment'>
-          <PlatformDropdown
-            groups={alignXOptionGroups}
-            trigger={
-              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {alignXLabels[settings?.mpvSubtitleAlignX ?? "center"]}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </View>
-            }
-            title='Horizontal Alignment'
-          />
-        </ListItem>
-
-        <ListItem title='Vertical Alignment'>
-          <PlatformDropdown
-            groups={alignYOptionGroups}
-            trigger={
-              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {alignYLabels[settings?.mpvSubtitleAlignY ?? "bottom"]}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </View>
-            }
-            title='Vertical Alignment'
-          />
-        </ListItem>
+        {settings.mpvSubtitleBackgroundEnabled && (
+          <ListItem title='Background Opacity'>
+            <Stepper
+              value={settings.mpvSubtitleBackgroundOpacity ?? 75}
+              step={5}
+              min={10}
+              max={100}
+              appendValue='%'
+              onUpdate={(value) =>
+                updateSettings({ mpvSubtitleBackgroundOpacity: value })
+              }
+            />
+          </ListItem>
+        )}
       </ListGroup>
     </View>
   );

components/settings/MpvVoSettings.tsx

@@ -0,0 +1,66 @@
+import { Ionicons } from "@expo/vector-icons";
+import type React from "react";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform, View } from "react-native";
+import { PlatformDropdown } from "@/components/PlatformDropdown";
+import { type MpvVoDriver, useSettings } from "@/utils/atoms/settings";
+import { Text } from "../common/Text";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
+
+const VO_DRIVER_OPTIONS: { key: string; value: MpvVoDriver }[] = [
+  { key: "home.settings.vo_driver.gpu_next", value: "gpu-next" },
+  { key: "home.settings.vo_driver.gpu", value: "gpu" },
+];
+
+export const MpvVoSettings: React.FC = () => {
+  const { settings, updateSettings } = useSettings();
+  const { t } = useTranslation();
+
+  const voDriverOptions = useMemo(
+    () => [
+      {
+        options: VO_DRIVER_OPTIONS.map((option) => ({
+          type: "radio" as const,
+          label: t(option.key),
+          value: option.value,
+          selected: option.value === (settings?.mpvVoDriver ?? "gpu-next"),
+          onPress: () => updateSettings({ mpvVoDriver: option.value }),
+        })),
+      },
+    ],
+    [settings?.mpvVoDriver, t, updateSettings],
+  );
+
+  const currentVoDriverLabel = useMemo(() => {
+    const option = VO_DRIVER_OPTIONS.find(
+      (o) => o.value === (settings?.mpvVoDriver ?? "gpu-next"),
+    );
+    return option ? t(option.key) : t("home.settings.vo_driver.gpu_next");
+  }, [settings?.mpvVoDriver, t]);
+
+  // Only show on Android
+  if (Platform.OS !== "android") return null;
+
+  if (!settings) return null;
+
+  return (
+    <ListGroup title={t("home.settings.vo_driver.title")} className='mb-4'>
+      <ListItem title={t("home.settings.vo_driver.vo_mode")}>
+        <PlatformDropdown
+          groups={voDriverOptions}
+          trigger={
+            <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+              <Text className='mr-1 text-[#8E8D91]'>
+                {currentVoDriverLabel}
+              </Text>
+              <Ionicons name='chevron-expand-sharp' size={18} color='#5A5960' />
+            </View>
+          }
+          title={t("home.settings.vo_driver.vo_mode")}
+        />
+      </ListItem>
+    </ListGroup>
+  );
+};

components/settings/OtherSettings.tsx

@@ -158,14 +158,6 @@ export const OtherSettings: React.FC = () => {
             }
           />
         </ListItem>
-        <ListItem title={t("home.settings.other.show_large_home_carousel")}>
-          <Switch
-            value={settings.showLargeHomeCarousel}
-            onValueChange={(value) =>
-              updateSettings({ showLargeHomeCarousel: value })
-            }
-          />
-        </ListItem>
         <ListItem
           onPress={() => router.push("/settings/hide-libraries/page")}
           title={t("home.settings.other.hide_libraries")}

components/settings/SubtitleToggles.tsx

@@ -1,9 +1,10 @@
 import { Ionicons } from "@expo/vector-icons";
 import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
-import { useMemo } from "react";
+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 { Stepper } from "@/components/inputs/Stepper";
 import { useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
@@ -23,6 +24,11 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
   const cultures = media.cultures;
   const { t } = useTranslation();
 
+  // Local state for OpenSubtitles API key (only commit on blur)
+  const [openSubtitlesApiKey, setOpenSubtitlesApiKey] = useState(
+    settings?.openSubtitlesApiKey || "",
+  );
+
   const subtitleModes = [
     SubtitlePlaybackMode.Default,
     SubtitlePlaybackMode.Smart,
@@ -160,17 +166,55 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           disabled={pluginSettings?.subtitleSize?.locked}
         >
           <Stepper
-            value={settings.subtitleSize / 100}
+            value={settings.mpvSubtitleScale ?? 1.0}
             disabled={pluginSettings?.subtitleSize?.locked}
             step={0.1}
-            min={0.3}
-            max={1.5}
+            min={0.1}
+            max={3.0}
             onUpdate={(value) =>
-              updateSettings({ subtitleSize: Math.round(value * 100) })
+              updateSettings({ mpvSubtitleScale: Math.round(value * 10) / 10 })
             }
           />
         </ListItem>
       </ListGroup>
+
+      {/* OpenSubtitles API Key for client-side subtitle fetching */}
+      <ListGroup
+        title={
+          t("home.settings.subtitles.opensubtitles_title") || "OpenSubtitles"
+        }
+        description={
+          <Text className='text-[#8E8D91] text-xs'>
+            {t("home.settings.subtitles.opensubtitles_hint") ||
+              "Enter your OpenSubtitles API key to enable client-side subtitle search as a fallback when your Jellyfin server doesn't have a subtitle provider configured."}
+          </Text>
+        }
+      >
+        <View className='p-4'>
+          <Text className='text-xs text-gray-400 mb-2'>
+            {t("home.settings.subtitles.opensubtitles_api_key") || "API Key"}
+          </Text>
+          <Input
+            className='border border-neutral-800'
+            placeholder={
+              t("home.settings.subtitles.opensubtitles_api_key_placeholder") ||
+              "Enter API key..."
+            }
+            value={openSubtitlesApiKey}
+            onChangeText={setOpenSubtitlesApiKey}
+            onBlur={() => {
+              updateSettings({ openSubtitlesApiKey });
+            }}
+            autoCapitalize='none'
+            autoCorrect={false}
+            secureTextEntry
+          />
+          <Text className='text-xs text-gray-500 mt-2'>
+            {t("home.settings.subtitles.opensubtitles_get_key") ||
+              "Get your free API key at opensubtitles.com/en/consumers"}
+          </Text>
+        </View>
+      </ListGroup>
     </View>
   );
 };