wip

app/(auth)/(tabs)/(home)/_layout.tsx

@@ -23,7 +23,7 @@ export default function IndexLayout() {
           headerShadowVisible: false,
           headerRight: () => (
             <View className="flex flex-row items-center space-x-2">
-              <Chromecast />
+              {!Platform.isTV && <Chromecast />}
               <TouchableOpacity
                 onPress={() => {
                   router.push("/(auth)/settings");

app/(auth)/(tabs)/(home)/index.tsx

@@ -27,6 +27,7 @@ import { QueryFunction, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigation, useRouter } from "expo-router";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { Platform } from "react-native";
 import {
   ActivityIndicator,
   RefreshControl,
@@ -64,30 +65,33 @@ export default function index() {
   const [isConnected, setIsConnected] = useState<boolean | null>(null);
   const [loadingRetry, setLoadingRetry] = useState(false);
 
-  const { downloadedFiles, cleanCacheDirectory } = useDownload();
   const navigation = useNavigation();
 
   const insets = useSafeAreaInsets();
 
-  useEffect(() => {
-    const hasDownloads = downloadedFiles && downloadedFiles.length > 0;
-    navigation.setOptions({
-      headerLeft: () => (
-        <TouchableOpacity
-          onPress={() => {
-            router.push("/(auth)/downloads");
-          }}
-          className="p-2"
-        >
-          <Feather
-            name="download"
-            color={hasDownloads ? Colors.primary : "white"}
-            size={22}
-          />
-        </TouchableOpacity>
-      ),
-    });
-  }, [downloadedFiles, navigation, router]);
+  if (!Platform.isTV) {
+    const { downloadedFiles, cleanCacheDirectory } = useDownload();
+
+    useEffect(() => {
+      const hasDownloads = downloadedFiles && downloadedFiles.length > 0;
+      navigation.setOptions({
+        headerLeft: () => (
+          <TouchableOpacity
+            onPress={() => {
+              router.push("/(auth)/downloads");
+            }}
+            className="p-2"
+          >
+            <Feather
+              name="download"
+              color={hasDownloads ? Colors.primary : "white"}
+              size={22}
+            />
+          </TouchableOpacity>
+        ),
+      });
+    }, [downloadedFiles, navigation, router]);
+  }
 
   const checkConnection = useCallback(async () => {
     setLoadingRetry(true);
@@ -107,9 +111,11 @@ export default function index() {
       setIsConnected(state.isConnected);
     });
 
-    cleanCacheDirectory().catch((e) =>
-      console.error("Something went wrong cleaning cache directory")
-    );
+    if (!Platform.isTV) {
+      cleanCacheDirectory().catch((e) =>
+        console.error("Something went wrong cleaning cache directory")
+      );
+    }
     return () => {
       unsubscribe();
     };

app/(auth)/(tabs)/(home)/settings.tsx

@@ -1,3 +1,4 @@
+import { Platform } from "react-native";
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
@@ -13,7 +14,8 @@ import { SubtitleToggles } from "@/components/settings/SubtitleToggles";
 import { UserInfo } from "@/components/settings/UserInfo";
 import { useJellyfin } from "@/providers/JellyfinProvider";
 import { clearLogs } from "@/utils/log";
-import * as Haptics from "expo-haptics";
+// const Haptics = !Platform.isTV ? require("expo-haptics") : null;
+import * as Haptics from "@/packages/expo-haptics";
 import { useNavigation, useRouter } from "expo-router";
 import { useEffect } from "react";
 import { ScrollView, TouchableOpacity, View } from "react-native";
@@ -26,7 +28,9 @@ export default function settings() {
 
   const onClearLogsClicked = async () => {
     clearLogs();
-    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    if (!Platform.isTV) {
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    }
   };
 
   const navigation = useNavigation();

app/(auth)/(tabs)/(home,libraries,search,favorites)/albums/[albumId].tsx

@@ -12,7 +12,7 @@ import { useQuery } from "@tanstack/react-query";
 import { router, useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
-import { ScrollView, TouchableOpacity, View } from "react-native";
+import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function page() {
@@ -28,15 +28,17 @@ export default function page() {
 
   const navigation = useNavigation();
 
-  useEffect(() => {
-    navigation.setOptions({
-      headerRight: () => (
-        <View className="">
-          <Chromecast />
-        </View>
-      ),
+  if (!Platform.isTV) {
+    useEffect(() => {
+      navigation.setOptions({
+        headerRight: () => (
+          <View className="">
+            <Chromecast />
+          </View>
+        ),
+      });
     });
-  });
+  }
 
   const { data: album } = useQuery({
     queryKey: ["album", albumId, artistId],

app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx

@@ -29,7 +29,7 @@ import {
 import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { useLocalSearchParams, useNavigation } from "expo-router";
-import * as ScreenOrientation from "expo-screen-orientation";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { useAtom } from "jotai";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { FlatList, View } from "react-native";

app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx

@@ -34,7 +34,7 @@ import {
   IssueType,
   IssueTypeName,
 } from "@/utils/jellyseerr/server/constants/issue";
-import * as DropdownMenu from "zeego/dropdown-menu";
+import * as DropdownMenu from "@/components/DropdownMenu";
 import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 import JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
 import { JellyserrRatings } from "@/components/Ratings";

app/(auth)/(tabs)/(libraries)/[libraryId].tsx

@@ -1,6 +1,6 @@
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { useLocalSearchParams, useNavigation } from "expo-router";
-import * as ScreenOrientation from "expo-screen-orientation";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { useAtom } from "jotai";
 import React, { useCallback, useEffect, useMemo } from "react";
 import { FlatList, useWindowDimensions, View } from "react-native";

app/(auth)/(tabs)/(libraries)/_layout.tsx

@@ -3,7 +3,7 @@ import { useSettings } from "@/utils/atoms/settings";
 import { Ionicons } from "@expo/vector-icons";
 import { Stack } from "expo-router";
 import { Platform } from "react-native";
-import * as DropdownMenu from "zeego/dropdown-menu";
+import * as DropdownMenu from "@/components/DropdownMenu";
 
 export default function IndexLayout() {
   const [settings, updateSettings] = useSettings();

app/(auth)/player/direct-player.tsx

@@ -27,7 +27,7 @@ import {
   getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
-import * as Haptics from "expo-haptics";
+import * as Haptics from "@/packages/expo-haptics";
 import { useFocusEffect, useGlobalSearchParams } from "expo-router";
 import { useAtomValue } from "jotai";
 import React, {

app/(auth)/player/music-player.tsx

@@ -17,7 +17,7 @@ import {
   getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
-import * as Haptics from "expo-haptics";
+import * as Haptics from "@/packages/expo-haptics";
 import { Image } from "expo-image";
 import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useAtomValue } from "jotai";

app/(auth)/player/transcoding-player.tsx

@@ -20,7 +20,7 @@ import {
   getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
-import * as Haptics from "expo-haptics";
+import * as Haptics from "@/packages/expo-haptics";
 import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useAtomValue } from "jotai";
 import React, {

app/_layout.tsx

@@ -1,4 +1,5 @@
 import "@/augmentations";
+import { Platform } from "react-native";
 import { Text } from "@/components/common/Text";
 import { DownloadProvider } from "@/providers/DownloadProvider";
 import {
@@ -18,23 +19,28 @@ import { cancelJobById, getAllJobsByDeviceId } from "@/utils/optimize-server";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import {
-  checkForExistingDownloads,
-  completeHandler,
-  download,
-} from "@kesha-antonov/react-native-background-downloader";
+// import {
+//   checkForExistingDownloads,
+//   completeHandler,
+//   download,
+// } from "@kesha-antonov/react-native-background-downloader";
+const BackGroundDownloader = !Platform.isTV
+  ? require("@kesha-antonov/react-native-background-downloader")
+  : null;
 import { DarkTheme, ThemeProvider } from "@react-navigation/native";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import * as BackgroundFetch from "expo-background-fetch";
+const BackgroundFetch = !Platform.isTV
+  ? require("expo-background-fetch")
+  : null;
 import * as FileSystem from "expo-file-system";
 import { useFonts } from "expo-font";
 import { useKeepAwake } from "expo-keep-awake";
 import * as Linking from "expo-linking";
-import * as Notifications from "expo-notifications";
+const Notifications = !Platform.isTV ? require("expo-notifications") : null;
 import { router, Stack } from "expo-router";
-import * as ScreenOrientation from "expo-screen-orientation";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import * as SplashScreen from "expo-splash-screen";
-import * as TaskManager from "expo-task-manager";
+const TaskManager = !Platform.isTV ? require("expo-task-manager") : null;
 import { Provider as JotaiProvider, useAtom } from "jotai";
 import { useEffect, useRef } from "react";
 import { Appearance, AppState, TouchableOpacity } from "react-native";
@@ -45,15 +51,19 @@ import { Toaster } from "sonner-native";
 
 SplashScreen.preventAutoHideAsync();
 
-Notifications.setNotificationHandler({
-  handleNotification: async () => ({
-    shouldShowAlert: true,
-    shouldPlaySound: true,
-    shouldSetBadge: false,
-  }),
-});
+if (!Platform.isTV) {
+  Notifications.setNotificationHandler({
+    handleNotification: async () => ({
+      shouldShowAlert: true,
+      shouldPlaySound: true,
+      shouldSetBadge: false,
+    }),
+  });
+}
 
 function useNotificationObserver() {
+  if (Platform.isTV) return;
+
   useEffect(() => {
     let isMounted = true;
 
@@ -84,99 +94,101 @@ function useNotificationObserver() {
   }, []);
 }
 
-TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
-  console.log("TaskManager ~ trigger");
+if (!Platform.isTV) {
+  TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
+    console.log("TaskManager ~ trigger");
 
-  const now = Date.now();
+    const now = Date.now();
 
-  const settingsData = storage.getString("settings");
+    const settingsData = storage.getString("settings");
 
-  if (!settingsData) return BackgroundFetch.BackgroundFetchResult.NoData;
+    if (!settingsData) return BackgroundFetch.BackgroundFetchResult.NoData;
 
-  const settings: Partial<Settings> = JSON.parse(settingsData);
-  const url = settings?.optimizedVersionsServerUrl;
+    const settings: Partial<Settings> = JSON.parse(settingsData);
+    const url = settings?.optimizedVersionsServerUrl;
 
-  if (!settings?.autoDownload || !url)
-    return BackgroundFetch.BackgroundFetchResult.NoData;
+    if (!settings?.autoDownload || !url)
+      return BackgroundFetch.BackgroundFetchResult.NoData;
 
-  const token = getTokenFromStorage();
-  const deviceId = getOrSetDeviceId();
-  const baseDirectory = FileSystem.documentDirectory;
+    const token = getTokenFromStorage();
+    const deviceId = getOrSetDeviceId();
+    const baseDirectory = FileSystem.documentDirectory;
 
-  if (!token || !deviceId || !baseDirectory)
-    return BackgroundFetch.BackgroundFetchResult.NoData;
+    if (!token || !deviceId || !baseDirectory)
+      return BackgroundFetch.BackgroundFetchResult.NoData;
 
-  const jobs = await getAllJobsByDeviceId({
-    deviceId,
-    authHeader: token,
-    url,
-  });
+    const jobs = await getAllJobsByDeviceId({
+      deviceId,
+      authHeader: token,
+      url,
+    });
 
-  console.log("TaskManager ~ Active jobs: ", jobs.length);
+    console.log("TaskManager ~ Active jobs: ", jobs.length);
 
-  for (let job of jobs) {
-    if (job.status === "completed") {
-      const downloadUrl = url + "download/" + job.id;
-      const tasks = await checkForExistingDownloads();
+    for (let job of jobs) {
+      if (job.status === "completed") {
+        const downloadUrl = url + "download/" + job.id;
+        const tasks = await BackGroundDownloader.checkForExistingDownloads();
 
-      if (tasks.find((task) => task.id === job.id)) {
-        console.log("TaskManager ~ Download already in progress: ", job.id);
-        continue;
+        if (tasks.find((task) => task.id === job.id)) {
+          console.log("TaskManager ~ Download already in progress: ", job.id);
+          continue;
+        }
+
+        BackGroundDownloader.download({
+          id: job.id,
+          url: downloadUrl,
+          destination: `${baseDirectory}${job.item.Id}.mp4`,
+          headers: {
+            Authorization: token,
+          },
+        })
+          .begin(() => {
+            console.log("TaskManager ~ Download started: ", job.id);
+          })
+          .done(() => {
+            console.log("TaskManager ~ Download completed: ", job.id);
+            saveDownloadedItemInfo(job.item);
+            BackGroundDownloader.completeHandler(job.id);
+            cancelJobById({
+              authHeader: token,
+              id: job.id,
+              url: url,
+            });
+            Notifications.scheduleNotificationAsync({
+              content: {
+                title: job.item.Name,
+                body: "Download completed",
+                data: {
+                  url: `/downloads`,
+                },
+              },
+              trigger: null,
+            });
+          })
+          .error((error) => {
+            console.log("TaskManager ~ Download error: ", job.id, error);
+            completeHandler(job.id);
+            Notifications.scheduleNotificationAsync({
+              content: {
+                title: job.item.Name,
+                body: "Download failed",
+                data: {
+                  url: `/downloads`,
+                },
+              },
+              trigger: null,
+            });
+          });
       }
-
-      download({
-        id: job.id,
-        url: downloadUrl,
-        destination: `${baseDirectory}${job.item.Id}.mp4`,
-        headers: {
-          Authorization: token,
-        },
-      })
-        .begin(() => {
-          console.log("TaskManager ~ Download started: ", job.id);
-        })
-        .done(() => {
-          console.log("TaskManager ~ Download completed: ", job.id);
-          saveDownloadedItemInfo(job.item);
-          completeHandler(job.id);
-          cancelJobById({
-            authHeader: token,
-            id: job.id,
-            url: url,
-          });
-          Notifications.scheduleNotificationAsync({
-            content: {
-              title: job.item.Name,
-              body: "Download completed",
-              data: {
-                url: `/downloads`,
-              },
-            },
-            trigger: null,
-          });
-        })
-        .error((error) => {
-          console.log("TaskManager ~ Download error: ", job.id, error);
-          completeHandler(job.id);
-          Notifications.scheduleNotificationAsync({
-            content: {
-              title: job.item.Name,
-              body: "Download failed",
-              data: {
-                url: `/downloads`,
-              },
-            },
-            trigger: null,
-          });
-        });
     }
-  }
 
-  console.log(`Auto download started: ${new Date(now).toISOString()}`);
+    console.log(`Auto download started: ${new Date(now).toISOString()}`);
 
-  // Be sure to return the successful result type!
-  return BackgroundFetch.BackgroundFetchResult.NewData;
-});
+    // Be sure to return the successful result type!
+    return BackgroundFetch.BackgroundFetchResult.NewData;
+  });
+}
 
 const checkAndRequestPermissions = async () => {
   try {
@@ -250,55 +262,61 @@ function Layout() {
   const [orientation, setOrientation] = useAtom(orientationAtom);
 
   useKeepAwake();
-  useNotificationObserver();
-
-  useEffect(() => {
-    checkAndRequestPermissions();
-  }, []);
-
-  useEffect(() => {
-    if (settings?.autoRotate === true)
-      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.DEFAULT);
-    else
-      ScreenOrientation.lockAsync(
-        ScreenOrientation.OrientationLock.PORTRAIT_UP
-      );
-  }, [settings]);
 
   const appState = useRef(AppState.currentState);
 
-  useEffect(() => {
-    const subscription = AppState.addEventListener("change", (nextAppState) => {
-      if (
-        appState.current.match(/inactive|background/) &&
-        nextAppState === "active"
-      ) {
-        checkForExistingDownloads();
-      }
-    });
+  if (!Platform.isTV) {
+    useNotificationObserver();
 
-    checkForExistingDownloads();
+    useEffect(() => {
+      checkAndRequestPermissions();
+    }, []);
 
-    return () => {
-      subscription.remove();
-    };
-  }, []);
+    useEffect(() => {
+      if (settings?.autoRotate === true)
+        ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.DEFAULT);
+      else
+        ScreenOrientation.lockAsync(
+          ScreenOrientation.OrientationLock.PORTRAIT_UP
+        );
+    }, [settings]);
 
-  useEffect(() => {
-    const subscription = ScreenOrientation.addOrientationChangeListener(
-      (event) => {
-        setOrientation(event.orientationInfo.orientation);
-      }
-    );
+    useEffect(() => {
+      const subscription = AppState.addEventListener(
+        "change",
+        (nextAppState) => {
+          if (
+            appState.current.match(/inactive|background/) &&
+            nextAppState === "active"
+          ) {
+            BackGroundDownloader.checkForExistingDownloads();
+          }
+        }
+      );
 
-    ScreenOrientation.getOrientationAsync().then((initialOrientation) => {
-      setOrientation(initialOrientation);
-    });
+      BackGroundDownloader.checkForExistingDownloads();
 
-    return () => {
-      ScreenOrientation.removeOrientationChangeListener(subscription);
-    };
-  }, []);
+      return () => {
+        subscription.remove();
+      };
+    }, []);
+
+    useEffect(() => {
+      const subscription = ScreenOrientation.addOrientationChangeListener(
+        (event) => {
+          setOrientation(event.orientationInfo.orientation);
+        }
+      );
+
+      ScreenOrientation.getOrientationAsync().then((initialOrientation) => {
+        setOrientation(initialOrientation);
+      });
+
+      return () => {
+        ScreenOrientation.removeOrientationChangeListener(subscription);
+      };
+    }, []);
+  }
 
   const url = Linking.useURL();