From 62b25d7bf7e537670d84ed43204624a5aa6c9f85 Mon Sep 17 00:00:00 2001
From: lance chant <13349722+lancechant@users.noreply.github.com>
Date: Wed, 3 Sep 2025 12:26:56 +0200
Subject: [PATCH] fix: offline checking (#989)

---
 components/settings/HomeIndex.tsx | 59 +++++++++----------------------
 hooks/useNetworkStatus.ts         | 30 ++++++++++++++++
 hooks/usePlaybackManager.ts       |  6 ++--
 hooks/useTwoWaySync.ts            |  6 ++--
 4 files changed, 53 insertions(+), 48 deletions(-)
 create mode 100644 hooks/useNetworkStatus.ts

diff --git a/components/settings/HomeIndex.tsx b/components/settings/HomeIndex.tsx
index 79243147..f7b2713d 100644
--- a/components/settings/HomeIndex.tsx
+++ b/components/settings/HomeIndex.tsx
@@ -11,7 +11,6 @@ import {
   getUserLibraryApi,
   getUserViewsApi,
 } from "@jellyfin/sdk/lib/utils/api";
-import NetInfo from "@react-native-community/netinfo";
 import { type QueryFunction, useQuery } from "@tanstack/react-query";
 import { useNavigation, useRouter, useSegments } from "expo-router";
 import { useAtomValue } from "jotai";
@@ -33,6 +32,7 @@ import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionLi
 import { Loader } from "@/components/Loader";
 import { MediaListSection } from "@/components/medialists/MediaListSection";
 import { Colors } from "@/constants/Colors";
+import { useNetworkStatus } from "@/hooks/useNetworkStatus";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
@@ -72,9 +72,6 @@ export const HomeIndex = () => {
     refreshStreamyfinPluginSettings,
   ] = useSettings(null);
 
-  const [isConnected, setIsConnected] = useState<boolean | null>(null);
-  const [loadingRetry, setLoadingRetry] = useState(false);
-
   const navigation = useNavigation();
 
   const insets = useSafeAreaInsets();
@@ -83,6 +80,7 @@ export const HomeIndex = () => {
 
   const { getDownloadedItems, cleanCacheDirectory } = useDownload();
   const prevIsConnected = useRef<boolean | null>(false);
+  const { isConnected, loading: retryLoading, retryCheck } = useNetworkStatus();
   const invalidateCache = useInvalidatePlaybackProgressCache();
   useEffect(() => {
     // Only invalidate cache when transitioning from offline to online
@@ -137,29 +135,6 @@ export const HomeIndex = () => {
     };
   }, [segments]);
 
-  const checkConnection = useCallback(async () => {
-    setLoadingRetry(true);
-    const state = await NetInfo.fetch();
-    setIsConnected(state.isConnected);
-    setLoadingRetry(false);
-  }, []);
-
-  useEffect(() => {
-    const unsubscribe = NetInfo.addEventListener((state) => {
-      if (state.isConnected === false || state.isInternetReachable === false)
-        setIsConnected(false);
-      else setIsConnected(true);
-    });
-
-    NetInfo.fetch().then((state) => {
-      setIsConnected(state.isConnected);
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-
   const {
     data,
     isError: e1,
@@ -397,30 +372,30 @@ export const HomeIndex = () => {
           {t("home.no_internet_message")}
         </Text>
         <View className='mt-4'>
-          <Button
-            color='purple'
-            onPress={() => router.push("/(auth)/downloads")}
-            justify='center'
-            iconRight={
-              <Ionicons name='arrow-forward' size={20} color='white' />
-            }
-          >
-            {t("home.go_to_downloads")}
-          </Button>
+          {!Platform.isTV && (
+            <Button
+              color='purple'
+              onPress={() => router.push("/(auth)/downloads")}
+              justify='center'
+              iconRight={
+                <Ionicons name='arrow-forward' size={20} color='white' />
+              }
+            >
+              {t("home.go_to_downloads")}
+            </Button>
+          )}
           <Button
             color='black'
-            onPress={() => {
-              checkConnection();
-            }}
+            onPress={retryCheck}
             justify='center'
             className='mt-2'
             iconRight={
-              loadingRetry ? null : (
+              retryLoading ? null : (
                 <Ionicons name='refresh' size={20} color='white' />
               )
             }
           >
-            {loadingRetry ? (
+            {retryLoading ? (
               <ActivityIndicator size={"small"} color={"white"} />
             ) : (
               "Retry"
diff --git a/hooks/useNetworkStatus.ts b/hooks/useNetworkStatus.ts
new file mode 100644
index 00000000..aac70ee4
--- /dev/null
+++ b/hooks/useNetworkStatus.ts
@@ -0,0 +1,30 @@
+import NetInfo from "@react-native-community/netinfo";
+import { useCallback, useEffect, useState } from "react";
+
+export function useNetworkStatus() {
+  const [isConnected, setIsConnected] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  // Manual check (optional)
+  const retryCheck = useCallback(async () => {
+    setLoading(true);
+    const state = await NetInfo.fetch();
+    setIsConnected(!!state.isConnected && !!state.isInternetReachable);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener((state) => {
+      setIsConnected(!!state.isConnected && !!state.isInternetReachable);
+    });
+
+    // Initial state
+    NetInfo.fetch().then((state) => {
+      setIsConnected(!!state.isConnected && !!state.isInternetReachable);
+    });
+
+    return () => unsubscribe();
+  }, []);
+
+  return { isConnected, loading, retryCheck };
+}
diff --git a/hooks/usePlaybackManager.ts b/hooks/usePlaybackManager.ts
index 1ed1b5b7..0b70752b 100644
--- a/hooks/usePlaybackManager.ts
+++ b/hooks/usePlaybackManager.ts
@@ -1,12 +1,12 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { getPlaystateApi, getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useNetInfo } from "@react-native-community/netinfo";
 import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { useMemo } from "react";
 import { useDownload } from "@/providers/DownloadProvider";
 import { DownloadedItem } from "@/providers/Downloads/types";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useNetworkStatus } from "./useNetworkStatus";
 
 interface PlaybackManagerProps {
   item?: BaseItemDto | null;
@@ -65,12 +65,12 @@ export const usePlaybackManager = ({
 }: PlaybackManagerProps = {}) => {
   const api = useAtomValue(apiAtom);
   const user = useAtomValue(userAtom);
-  const netInfo = useNetInfo();
+  const { isConnected } = useNetworkStatus();
   const { getDownloadedItemById, updateDownloadedItem, getDownloadedItems } =
     useDownload();
 
   /** Whether the device is online. actually it's connected to the internet. */
-  const isOnline = useMemo(() => netInfo.isConnected, [netInfo.isConnected]);
+  const isOnline = isConnected;
 
   // Adjacent episodes logic
   const { data: adjacentItems } = useQuery({
diff --git a/hooks/useTwoWaySync.ts b/hooks/useTwoWaySync.ts
index c31bf7ea..d7809b96 100644
--- a/hooks/useTwoWaySync.ts
+++ b/hooks/useTwoWaySync.ts
@@ -1,8 +1,8 @@
 import { getItemsApi, getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
-import { useNetInfo } from "@react-native-community/netinfo";
 import { useAtomValue } from "jotai";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "../providers/JellyfinProvider";
+import { useNetworkStatus } from "./useNetworkStatus";
 
 /**
  * This hook is used to sync the playback state of a downloaded item with the server
@@ -11,8 +11,8 @@ import { apiAtom, userAtom } from "../providers/JellyfinProvider";
 export const useTwoWaySync = () => {
   const api = useAtomValue(apiAtom);
   const user = useAtomValue(userAtom);
-  const netInfo = useNetInfo();
   const { getDownloadedItemById, updateDownloadedItem } = useDownload();
+  const { isConnected } = useNetworkStatus();
 
   /**
    * Syncs the playback state of an offline item with the server.
@@ -21,7 +21,7 @@ export const useTwoWaySync = () => {
    * @returns A Promise<boolean> indicating whether a server update was made (true) or not (false).
    */
   const syncPlaybackState = async (itemId: string): Promise<boolean> => {
-    if (!api || !user || !netInfo.isConnected) {
+    if (!api || !user || !isConnected) {
       // Cannot sync if offline or not logged in
       return false;
     }