refactor: downloads to minimize prop drilling and improve layout and design (#1337)

Co-authored-by: Alex Kim <alexkim@Alexs-MacBook-Pro.local>
Co-authored-by: Fredrik Burmester <fredrik.burmester@gmail.com>
Co-authored-by: Simon-Eklundh <simon.eklundh@proton.me>

providers/JellyfinProvider.tsx

@@ -4,7 +4,7 @@ import type { UserDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getUserApi } from "@jellyfin/sdk/lib/utils/api";
 import { useMutation } from "@tanstack/react-query";
 import axios, { AxiosError } from "axios";
-import { router, useSegments } from "expo-router";
+import { useSegments } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { atom, useAtom } from "jotai";
 import type React from "react";
@@ -21,6 +21,7 @@ import { useTranslation } from "react-i18next";
 import { AppState, Platform } from "react-native";
 import { getDeviceName } from "react-native-device-info";
 import uuid from "react-native-uuid";
+import useRouter from "@/hooks/useAppRouter";
 import { useInterval } from "@/hooks/useInterval";
 import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
 import { useSettings } from "@/utils/atoms/settings";
@@ -581,6 +582,7 @@ export const useJellyfin = (): JellyfinContextValue => {
 
 function useProtectedRoute(user: UserDto | null, loaded = false) {
   const segments = useSegments();
+  const router = useRouter();
 
   useEffect(() => {
     if (loaded === false) return;

providers/OfflineModeProvider.tsx

@@ -0,0 +1,37 @@
+import { createContext, type ReactNode, useContext } from "react";
+
+const UNSET = Symbol("OfflineModeNotProvided");
+
+const OfflineModeContext = createContext<boolean | typeof UNSET>(UNSET);
+
+interface OfflineModeProviderProps {
+  isOffline: boolean;
+  children: ReactNode;
+}
+
+/**
+ * Provides offline mode state to all child components.
+ * Wrap pages that support offline mode with this provider.
+ */
+export function OfflineModeProvider({
+  isOffline,
+  children,
+}: OfflineModeProviderProps) {
+  return (
+    <OfflineModeContext.Provider value={isOffline}>
+      {children}
+    </OfflineModeContext.Provider>
+  );
+}
+
+/**
+ * Returns whether the current view is in offline mode.
+ * Must be used within an OfflineModeProvider (set at page level).
+ */
+export function useOfflineMode(): boolean {
+  const context = useContext(OfflineModeContext);
+  if (context === UNSET) {
+    return false;
+  }
+  return context;
+}

providers/WebSocketProvider.tsx

@@ -1,5 +1,4 @@
 import { getSessionApi } from "@jellyfin/sdk/lib/utils/api";
-import { useRouter } from "expo-router";
 import { useAtomValue } from "jotai";
 import {
   createContext,
@@ -12,6 +11,7 @@ import {
   useState,
 } from "react";
 import { AppState, type AppStateStatus } from "react-native";
+import useRouter from "@/hooks/useAppRouter";
 import { apiAtom, getOrSetDeviceId } from "@/providers/JellyfinProvider";
 import { useNetworkStatus } from "@/providers/NetworkStatusProvider";