fix: offline checking (#989)

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 };
+}

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({

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;
     }