From 487ac398e581f29d5cad03c19ab19c59de613c1c Mon Sep 17 00:00:00 2001
From: Alex Kim <alexkim5682@gmail.com>
Date: Wed, 11 Dec 2024 04:48:53 +1100
Subject: [PATCH] Added subtitle mode in options

---
 components/settings/MediaContext.tsx    |  6 ++-
 components/settings/SubtitleToggles.tsx | 56 ++++++++++++++++++++++++-
 utils/atoms/settings.ts                 |  7 +++-
 3 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/components/settings/MediaContext.tsx b/components/settings/MediaContext.tsx
index 70aefbab..251eeade 100644
--- a/components/settings/MediaContext.tsx
+++ b/components/settings/MediaContext.tsx
@@ -11,8 +11,8 @@ import {
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 
 interface MediaContextType {
-  settings: any;
-  updateSettings: any;
+  settings: Settings | null;
+  updateSettings: (update: Partial<Settings>) => void;
   user: UserDto | undefined;
   cultures: CultureDto[];
 }
@@ -69,6 +69,8 @@ export const MediaProvider = ({ children }: { children: ReactNode }) => {
           settings?.defaultSubtitleLanguage?.ThreeLetterISOLanguageName ||
           "";
 
+    updatePayload.SubtitleMode = update?.subtitleMode;
+
     console.log("updatePayload", updatePayload);
 
     updateUserConfiguration(updatePayload);
diff --git a/components/settings/SubtitleToggles.tsx b/components/settings/SubtitleToggles.tsx
index cf3bb6dc..124bffb6 100644
--- a/components/settings/SubtitleToggles.tsx
+++ b/components/settings/SubtitleToggles.tsx
@@ -1,9 +1,9 @@
-import { useSettings } from "@/utils/atoms/settings";
 import { TouchableOpacity, View, ViewProps } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "../common/Text";
 import { useMedia } from "./MediaContext";
 import { Switch } from "react-native-gesture-handler";
+import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
 
 interface Props extends ViewProps {}
 
@@ -11,9 +11,16 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
   const media = useMedia();
   const { settings, updateSettings } = media;
   const cultures = media.cultures;
-
   if (!settings) return null;
 
+  const subtitleModes = [
+    SubtitlePlaybackMode.Default,
+    SubtitlePlaybackMode.Smart,
+    SubtitlePlaybackMode.OnlyForced,
+    SubtitlePlaybackMode.Always,
+    SubtitlePlaybackMode.None,
+  ];
+
   return (
     <View>
       <Text className="text-lg font-bold mb-2">Subtitle</Text>
@@ -75,6 +82,51 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           </DropdownMenu.Root>
         </View>
 
+        <View
+          className={`
+              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+            `}
+        >
+          <View className="flex flex-col shrink">
+            <Text className="font-semibold">Subtitle Mode</Text>
+            <Text className="text-xs opacity-50">
+              Subtitles are loaded based on the default and forced flags in the
+              embedded metadata. Language preferences are considered when
+              multiple options are available.
+            </Text>
+          </View>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+                <Text>{settings?.subtitleMode || "Loading"}</Text>
+              </TouchableOpacity>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content
+              loop={true}
+              side="bottom"
+              align="start"
+              alignOffset={0}
+              avoidCollisions={true}
+              collisionPadding={8}
+              sideOffset={8}
+            >
+              <DropdownMenu.Label>Subtitle Mode</DropdownMenu.Label>
+              {subtitleModes?.map((l) => (
+                <DropdownMenu.Item
+                  key={l}
+                  onSelect={() => {
+                    updateSettings({
+                      subtitleMode: l,
+                    });
+                  }}
+                >
+                  <DropdownMenu.ItemTitle>{l}</DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </View>
+
         <View
           className={`
               flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
diff --git a/utils/atoms/settings.ts b/utils/atoms/settings.ts
index 6e745be7..c498bab7 100644
--- a/utils/atoms/settings.ts
+++ b/utils/atoms/settings.ts
@@ -3,7 +3,10 @@ import { useEffect } from "react";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { storage } from "../mmkv";
 import { Platform } from "react-native";
-import { CultureDto } from "@jellyfin/sdk/lib/generated-client";
+import {
+  CultureDto,
+  SubtitlePlaybackMode,
+} from "@jellyfin/sdk/lib/generated-client";
 
 export type DownloadQuality = "original" | "high" | "low";
 
@@ -69,6 +72,7 @@ export type Settings = {
   libraryOptions: LibraryOptions;
   defaultSubtitleLanguage: CultureDto | null;
   defaultAudioLanguage: CultureDto | null;
+  subtitleMode: SubtitlePlaybackMode;
   showHomeTitles: boolean;
   defaultVideoOrientation: ScreenOrientation.OrientationLock;
   forwardSkipTime: number;
@@ -101,6 +105,7 @@ const loadSettings = (): Settings => {
     },
     defaultAudioLanguage: null,
     defaultSubtitleLanguage: null,
+    subtitleMode: SubtitlePlaybackMode.Default,
     showHomeTitles: true,
     defaultVideoOrientation: ScreenOrientation.OrientationLock.DEFAULT,
     forwardSkipTime: 30,