From cbe01a0012b6e44fb5acdcc823fcac0825d13e1b Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Tue, 20 Aug 2024 21:51:16 +0200
Subject: [PATCH] feat: use external player (vlc)

---
 components/settings/SettingToggles.tsx | 18 +++++++++++-
 providers/PlaybackProvider.tsx         | 40 +++++++++++++++++---------
 utils/atoms/settings.ts                |  2 ++
 3 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/components/settings/SettingToggles.tsx b/components/settings/SettingToggles.tsx
index 67ba5b60..05508818 100644
--- a/components/settings/SettingToggles.tsx
+++ b/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">
diff --git a/providers/PlaybackProvider.tsx b/providers/PlaybackProvider.tsx
index b5171b1b..935c1480 100644
--- a/providers/PlaybackProvider.tsx
+++ b/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;
diff --git a/utils/atoms/settings.ts b/utils/atoms/settings.ts
index e216b517..a56cd903 100644
--- a/utils/atoms/settings.ts
+++ b/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,
       };
 };