feat: KSPlayer as an option for iOS + other improvements (#1266)

components/settings/VideoPlayerSettings.tsx

@@ -0,0 +1,93 @@
+import { Ionicons } from "@expo/vector-icons";
+import type React from "react";
+import { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform, Switch, View } from "react-native";
+import { setHardwareDecode } from "@/modules/sf-player";
+import { useSettings, VideoPlayerIOS } from "@/utils/atoms/settings";
+import { Text } from "../common/Text";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
+import { PlatformDropdown } from "../PlatformDropdown";
+
+export const VideoPlayerSettings: React.FC = () => {
+  const { settings, updateSettings } = useSettings();
+  const { t } = useTranslation();
+
+  const handleHardwareDecodeChange = useCallback(
+    (value: boolean) => {
+      updateSettings({ ksHardwareDecode: value });
+      setHardwareDecode(value);
+    },
+    [updateSettings],
+  );
+
+  const videoPlayerOptions = useMemo(
+    () => [
+      {
+        options: [
+          {
+            type: "radio" as const,
+            label: t("home.settings.video_player.ksplayer"),
+            value: VideoPlayerIOS.KSPlayer,
+            selected: settings?.videoPlayerIOS === VideoPlayerIOS.KSPlayer,
+            onPress: () =>
+              updateSettings({ videoPlayerIOS: VideoPlayerIOS.KSPlayer }),
+          },
+          {
+            type: "radio" as const,
+            label: t("home.settings.video_player.vlc"),
+            value: VideoPlayerIOS.VLC,
+            selected: settings?.videoPlayerIOS === VideoPlayerIOS.VLC,
+            onPress: () =>
+              updateSettings({ videoPlayerIOS: VideoPlayerIOS.VLC }),
+          },
+        ],
+      },
+    ],
+    [settings?.videoPlayerIOS, t, updateSettings],
+  );
+
+  const getPlayerLabel = useCallback(() => {
+    switch (settings?.videoPlayerIOS) {
+      case VideoPlayerIOS.VLC:
+        return t("home.settings.video_player.vlc");
+      default:
+        return t("home.settings.video_player.ksplayer");
+    }
+  }, [settings?.videoPlayerIOS, t]);
+
+  if (Platform.OS !== "ios" || !settings) return null;
+
+  return (
+    <ListGroup title={t("home.settings.video_player.title")} className='mt-4'>
+      <ListItem
+        title={t("home.settings.video_player.video_player")}
+        subtitle={t("home.settings.video_player.video_player_description")}
+      >
+        <PlatformDropdown
+          groups={videoPlayerOptions}
+          trigger={
+            <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+              <Text className='mr-1 text-[#8E8D91]'>{getPlayerLabel()}</Text>
+              <Ionicons name='chevron-expand-sharp' size={18} color='#5A5960' />
+            </View>
+          }
+          title={t("home.settings.video_player.video_player")}
+        />
+      </ListItem>
+
+      {settings.videoPlayerIOS === VideoPlayerIOS.KSPlayer && (
+        <ListItem
+          title={t("home.settings.subtitles.hardware_decode")}
+          subtitle={t("home.settings.subtitles.hardware_decode_description")}
+        >
+          <Switch
+            value={settings.ksHardwareDecode}
+            onValueChange={handleHardwareDecodeChange}
+          />
+        </ListItem>
+      )}
+    </ListGroup>
+  );
+};