feat: use external player (vlc)

components/settings/SettingToggles.tsx

@@ -159,6 +159,23 @@ export const SettingToggles: React.FC = () => {
           onValueChange={(value) => updateSettings({ forceDirectPlay: value })}
         />
       </View>
+
+      <View className="flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4">
+        <View className="flex flex-col shrink">
+          <Text className="font-semibold">Use external player (VLC)</Text>
+          <Text className="text-xs opacity-50 shrink">
+            Open all videos in VLC instead of the default player. This requries
+            VLC to be installed on the phone.
+          </Text>
+        </View>
+        <Switch
+          value={settings?.openInVLC}
+          onValueChange={(value) => {
+            updateSettings({ openInVLC: value, forceDirectPlay: value });
+          }}
+        />
+      </View>
+
       <View
         className={`
         flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
@@ -219,7 +236,6 @@ export const SettingToggles: React.FC = () => {
         <View
           className={`
             flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-            ${settings?.forceDirectPlay ? "opacity-50 select-none" : ""}
           `}
         >
           <View className="flex flex-col shrink">

providers/PlaybackProvider.tsx

@@ -21,6 +21,8 @@ import { useAtom } from "jotai";
 import { OnProgressData, type VideoRef } from "react-native-video";
 import { apiAtom, userAtom } from "./JellyfinProvider";
 import { getDeviceId } from "@/utils/device";
+import * as Linking from "expo-linking";
+import { Platform } from "react-native";
 
 type CurrentlyPlayingState = {
   url: string;
@@ -87,19 +89,29 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
     queryFn: getDeviceId,
   });
 
-  const setCurrentlyPlayingState = (state: CurrentlyPlayingState | null) => {
-    if (state) {
-      setCurrentlyPlaying(state);
-      setIsPlaying(true);
+  const setCurrentlyPlayingState = useCallback(
+    (state: CurrentlyPlayingState | null) => {
+      const vlcLink = "vlc://" + state?.url;
+      console.log(vlcLink, settings?.openInVLC, Platform.OS === "ios");
+      if (vlcLink && settings?.openInVLC) {
+        Linking.openURL("vlc://" + state?.url || "");
+        return;
+      }
 
-      if (settings?.openFullScreenVideoPlayerByDefault)
-        presentFullscreenPlayer();
-    } else {
-      setCurrentlyPlaying(null);
-      setIsFullscreen(false);
-      setIsPlaying(false);
-    }
-  };
+      if (state) {
+        setCurrentlyPlaying(state);
+        setIsPlaying(true);
+
+        if (settings?.openFullScreenVideoPlayerByDefault)
+          presentFullscreenPlayer();
+      } else {
+        setCurrentlyPlaying(null);
+        setIsFullscreen(false);
+        setIsPlaying(false);
+      }
+    },
+    [settings]
+  );
 
   // Define control methods
   const playVideo = useCallback(() => {
@@ -167,7 +179,7 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
   }, []);
 
   useEffect(() => {
-    if (!deviceId || !api) return;
+    if (!deviceId || !api || !user) return;
 
     const url = `wss://${api?.basePath
       .replace("https://", "")
@@ -212,7 +224,7 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
       }
       newWebSocket.close();
     };
-  }, [api, deviceId]);
+  }, [api, deviceId, user]);
 
   useEffect(() => {
     if (!ws) return;

utils/atoms/settings.ts

@@ -12,6 +12,7 @@ type Settings = {
   mediaListCollectionIds?: string[];
   searchEngine: "Marlin" | "Jellyfin";
   marlinServerUrl?: string;
+  openInVLC?: boolean;
 };
 
 /**
@@ -37,6 +38,7 @@ const loadSettings = async (): Promise<Settings> => {
         mediaListCollectionIds: [],
         searchEngine: "Jellyfin",
         marlinServerUrl: "",
+        openInVLC: false,
       };
 };