wip

components/AudioTrackSelector.tsx

@@ -1,7 +1,7 @@
 import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
 import { useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
-import * as DropdownMenu from "zeego/dropdown-menu";
+import * as DropdownMenu from "@/components/DropdownMenu";
 import { Text } from "./common/Text";
 
 interface Props extends React.ComponentProps<typeof View> {

components/BitrateSelector.tsx

@@ -1,5 +1,5 @@
 import { TouchableOpacity, View } from "react-native";
-import * as DropdownMenu from "zeego/dropdown-menu";
+import * as DropdownMenu from "@/components/DropdownMenu";
 import { Text } from "./common/Text";
 import { useMemo } from "react";
 

components/Button.tsx

@@ -1,4 +1,4 @@
-import * as Haptics from "expo-haptics";
+import * as Haptics from "@/packages/expo-haptics";
 import React, { PropsWithChildren, ReactNode, useMemo } from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 import { Loader } from "./Loader";

components/ContextMenu.ts

@@ -0,0 +1 @@
+export * as ContextMenu from "zeego/context-menu";

components/DropdownMenu.ts

@@ -0,0 +1 @@
+export * as DropdownMenu from "zeego/dropdown-menu";

components/ItemContent.tsx

@@ -24,10 +24,10 @@ import {
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
 import { 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, { useEffect, useMemo, useState } from "react";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Chromecast } from "./Chromecast";
 import { ItemHeader } from "./ItemHeader";
@@ -81,23 +81,25 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
       defaultMediaSource,
     ]);
 
-    useEffect(() => {
-      navigation.setOptions({
-        headerRight: () =>
-          item && (
-            <View className="flex flex-row items-center space-x-2">
-              <Chromecast background="blur" width={22} height={22} />
-              {item.Type !== "Program" && (
-                <View className="flex flex-row items-center space-x-2">
-                  <DownloadSingleItem item={item} size="large" />
-                  <PlayedStatus item={item} />
-                  <AddToFavorites item={item} type="item" />
-                </View>
-              )}
-            </View>
-          ),
-      });
-    }, [item]);
+    if (!Platform.isTV) {
+      useEffect(() => {
+        navigation.setOptions({
+          headerRight: () =>
+            item && (
+              <View className="flex flex-row items-center space-x-2">
+                <Chromecast background="blur" width={22} height={22} />
+                {item.Type !== "Program" && (
+                  <View className="flex flex-row items-center space-x-2">
+                    <DownloadSingleItem item={item} size="large" />
+                    <PlayedStatus item={item} />
+                    <AddToFavorites item={item} type="item" />
+                  </View>
+                )}
+              </View>
+            ),
+        });
+      }, [item]);
+    }
 
     useEffect(() => {
       if (orientation !== ScreenOrientation.OrientationLock.PORTRAIT_UP)

components/MediaSourceSelector.tsx

@@ -5,7 +5,7 @@ import {
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { useEffect, useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
-import * as DropdownMenu from "zeego/dropdown-menu";
+import * as DropdownMenu from "@/components/DropdownMenu";
 import { Text } from "./common/Text";
 import { convertBitsToMegabitsOrGigabits } from "@/utils/bToMb";
 

components/PlayButton.tsx

@@ -32,7 +32,7 @@ import Animated, {
 import { Button } from "./Button";
 import { SelectedOptions } from "./ItemContent";
 import { chromecastProfile } from "@/utils/profiles/chromecast";
-import * as Haptics from "expo-haptics";
+import * as Haptics from "@/packages/expo-haptics";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item: BaseItemDto;

components/RoundButton.tsx

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   TouchableOpacityProps,
 } from "react-native";
-import * as Haptics from "expo-haptics";
+import * as Haptics from "@/packages/expo-haptics";
 
 interface Props extends TouchableOpacityProps {
   onPress?: () => void;

components/SubtitleTrackSelector.tsx

@@ -2,7 +2,7 @@ import { tc } from "@/utils/textTools";
 import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
 import { useMemo } from "react";
 import { Platform, TouchableOpacity, View } from "react-native";
-import * as DropdownMenu from "zeego/dropdown-menu";
+import * as DropdownMenu from "@/components/DropdownMenu";
 import { Text } from "./common/Text";
 import { SubtitleHelper } from "@/utils/SubtitleHelper";
 

components/common/JellyseerrItemRouter.tsx

@@ -1,11 +1,14 @@
-import {useRouter, useSegments} from "expo-router";
-import React, {PropsWithChildren, useCallback, useMemo} from "react";
-import {TouchableOpacity, TouchableOpacityProps} from "react-native";
-import * as ContextMenu from "zeego/context-menu";
-import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";
-import {useJellyseerr} from "@/hooks/useJellyseerr";
-import {hasPermission, Permission} from "@/utils/jellyseerr/server/lib/permissions";
-import {MediaType} from "@/utils/jellyseerr/server/constants/media";
+import { useRouter, useSegments } from "expo-router";
+import React, { PropsWithChildren, useCallback, useMemo } from "react";
+import { TouchableOpacity, TouchableOpacityProps } from "react-native";
+import * as ContextMenu from "@/components/ContextMenu";
+import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
+import {
+  hasPermission,
+  Permission,
+} from "@/utils/jellyseerr/server/lib/permissions";
+import { MediaType } from "@/utils/jellyseerr/server/constants/media";
 
 interface Props extends TouchableOpacityProps {
   result: MovieResult | TvResult;
@@ -26,26 +29,27 @@ export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
 }) => {
   const router = useRouter();
   const segments = useSegments();
-  const {jellyseerrApi, jellyseerrUser, requestMedia} = useJellyseerr()
+  const { jellyseerrApi, jellyseerrUser, requestMedia } = useJellyseerr();
 
   const from = segments[2];
 
   const autoApprove = useMemo(() => {
-    return jellyseerrUser && hasPermission(
-      Permission.AUTO_APPROVE,
-      jellyseerrUser.permissions,
-      {type: 'or'}
-    )
-  }, [jellyseerrApi, jellyseerrUser])
+    return (
+      jellyseerrUser &&
+      hasPermission(Permission.AUTO_APPROVE, jellyseerrUser.permissions, {
+        type: "or",
+      })
+    );
+  }, [jellyseerrApi, jellyseerrUser]);
 
-  const request = useCallback(() =>
+  const request = useCallback(
+    () =>
       requestMedia(mediaTitle, {
         mediaId: result.id,
-        mediaType: result.mediaType
-      }
-    ),
+        mediaType: result.mediaType,
+      }),
     [jellyseerrApi, result]
-  )
+  );
 
   if (from === "(home)" || from === "(search)" || from === "(libraries)")
     return (
@@ -55,7 +59,16 @@ export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
             <TouchableOpacity
               onPress={() => {
                 // @ts-ignore
-                router.push({pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`, params: {...result, mediaTitle, releaseYear, canRequest, posterSrc}});
+                router.push({
+                  pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
+                  params: {
+                    ...result,
+                    mediaTitle,
+                    releaseYear,
+                    canRequest,
+                    posterSrc,
+                  },
+                });
               }}
               {...props}
             >
@@ -71,31 +84,33 @@ export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
           >
             <ContextMenu.Label key="label-1">Actions</ContextMenu.Label>
             {canRequest && result.mediaType === MediaType.MOVIE && (
-                <ContextMenu.Item
-                  key="item-1"
-                  onSelect={() => {
-                    if (autoApprove) {
-                      request()
-                    }
+              <ContextMenu.Item
+                key="item-1"
+                onSelect={() => {
+                  if (autoApprove) {
+                    request();
+                  }
+                }}
+                shouldDismissMenuOnSelect
+              >
+                <ContextMenu.ItemTitle key="item-1-title">
+                  Request
+                </ContextMenu.ItemTitle>
+                <ContextMenu.ItemIcon
+                  ios={{
+                    name: "arrow.down.to.line",
+                    pointSize: 18,
+                    weight: "semibold",
+                    scale: "medium",
+                    hierarchicalColor: {
+                      dark: "purple",
+                      light: "purple",
+                    },
                   }}
-                  shouldDismissMenuOnSelect
-                >
-                  <ContextMenu.ItemTitle key="item-1-title">Request</ContextMenu.ItemTitle>
-                  <ContextMenu.ItemIcon
-                    ios={{
-                      name: "arrow.down.to.line",
-                      pointSize: 18,
-                      weight: "semibold",
-                      scale: "medium",
-                      hierarchicalColor: {
-                        dark: "purple",
-                        light: "purple",
-                      },
-                    }}
-                    androidIconName="download"
-                  />
-                </ContextMenu.Item>
-              )}
+                  androidIconName="download"
+                />
+              </ContextMenu.Item>
+            )}
           </ContextMenu.Content>
         </ContextMenu.Root>
       </>

components/common/TouchableItemRouter.tsx

@@ -6,7 +6,7 @@ import {
 import { useRouter, useSegments } from "expo-router";
 import { PropsWithChildren } from "react";
 import { TouchableOpacity, TouchableOpacityProps } from "react-native";
-import * as ContextMenu from "zeego/context-menu";
+import * as ContextMenu from "@/components/ContextMenu";
 
 interface Props extends TouchableOpacityProps {
   item: BaseItemDto;

components/downloads/ActiveDownloads.tsx

@@ -5,13 +5,18 @@ import { useSettings } from "@/utils/atoms/settings";
 import { JobStatus } from "@/utils/optimize-server";
 import { formatTimeString } from "@/utils/time";
 import { Ionicons } from "@expo/vector-icons";
-import { checkForExistingDownloads } from "@kesha-antonov/react-native-background-downloader";
+// import { checkForExistingDownloads } from "@kesha-antonov/react-native-background-downloader";
+const BackGroundDownloader = !Platform.isTV
+  ? require("@kesha-antonov/react-native-background-downloader")
+  : null;
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "expo-router";
-import { FFmpegKit } from "ffmpeg-kit-react-native";
+// import { FFmpegKit } from "ffmpeg-kit-react-native";
+const FFmpegKit = !Platform.isTV ? require("ffmpeg-kit-react-native") : null;
 import { useAtom } from "jotai";
 import {
   ActivityIndicator,
+  Platform,
   TouchableOpacity,
   TouchableOpacityProps,
   View,
@@ -64,7 +69,7 @@ const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
 
       if (settings?.downloadMethod === "optimized") {
         try {
-          const tasks = await checkForExistingDownloads();
+          const tasks = await BackGroundDownloader.checkForExistingDownloads();
           for (const task of tasks) {
             if (task.id === id) {
               task.stop();

components/downloads/EpisodeCard.tsx

@@ -1,5 +1,5 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import * as Haptics from "expo-haptics";
+import * as Haptics from "@/packages/expo-haptics";
 import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity, TouchableOpacityProps, View } from "react-native";
 import {

components/downloads/MovieCard.tsx

@@ -3,7 +3,7 @@ import {
   useActionSheet,
 } from "@expo/react-native-action-sheet";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import * as Haptics from "expo-haptics";
+import * as Haptics from "@/packages/expo-haptics";
 import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
 

components/home/LargeMovieCarousel.tsx

@@ -22,7 +22,7 @@ import { itemRouter, TouchableItemRouter } from "../common/TouchableItemRouter";
 import { Loader } from "../Loader";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { useRouter, useSegments } from "expo-router";
-import * as Haptics from "expo-haptics";
+import * as Haptics from "@/packages/expo-haptics";
 
 interface Props extends ViewProps {}
 

components/series/SeasonDropdown.tsx

@@ -1,7 +1,7 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useEffect, useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
-import * as DropdownMenu from "zeego/dropdown-menu";
+import * as DropdownMenu from "@/components/DropdownMenu";
 import { Text } from "../common/Text";
 
 type Props = {

components/settings/AudioToggles.tsx

@@ -1,5 +1,5 @@
 import { TouchableOpacity, View, ViewProps } from "react-native";
-import * as DropdownMenu from "zeego/dropdown-menu";
+import * as DropdownMenu from "@/components/DropdownMenu";
 import { Text } from "../common/Text";
 import { useMedia } from "./MediaContext";
 import { Switch } from "react-native-gesture-handler";

components/settings/DownloadSettings.tsx

@@ -6,7 +6,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "expo-router";
 import React from "react";
 import { Switch, TouchableOpacity, View } from "react-native";
-import * as DropdownMenu from "zeego/dropdown-menu";
+import * as DropdownMenu from "@/components/DropdownMenu";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";

components/settings/OtherSettings.tsx

@@ -1,3 +1,4 @@
+import { Platform } from "react-native";
 import { ScreenOrientationEnum, useSettings } from "@/utils/atoms/settings";
 import {
   BACKGROUND_FETCH_TASK,
@@ -5,13 +6,15 @@ import {
   unregisterBackgroundFetchAsync,
 } from "@/utils/background-tasks";
 import { Ionicons } from "@expo/vector-icons";
-import * as BackgroundFetch from "expo-background-fetch";
-import * as ScreenOrientation from "expo-screen-orientation";
-import * as TaskManager from "expo-task-manager";
+const BackgroundFetch = !Platform.isTV
+  ? require("expo-background-fetch")
+  : null;
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+const TaskManager = !Platform.isTV ? require("expo-task-manager") : null;
 import React, { useEffect } from "react";
 import { Linking, Switch, TouchableOpacity, ViewProps } from "react-native";
 import { toast } from "sonner-native";
-import * as DropdownMenu from "zeego/dropdown-menu";
+import * as DropdownMenu from "@/components/DropdownMenu";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
@@ -25,6 +28,8 @@ export const OtherSettings: React.FC = () => {
    * Background task
    *******************/
   const checkStatusAsync = async () => {
+    if (Platform.isTV) return;
+
     await BackgroundFetch.getStatusAsync();
     return await TaskManager.isTaskRegisteredAsync(BACKGROUND_FETCH_TASK);
   };

components/settings/QuickConnect.tsx

@@ -7,7 +7,7 @@ import {
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
 import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
-import * as Haptics from "expo-haptics";
+import * as Haptics from "@/packages/expo-haptics";
 import { useAtom } from "jotai";
 import React, { useCallback, useRef, useState } from "react";
 import { Alert, View, ViewProps } from "react-native";

components/settings/StorageSettings.tsx

@@ -4,7 +4,7 @@ import { useDownload } from "@/providers/DownloadProvider";
 import { clearLogs } from "@/utils/log";
 import { useQuery } from "@tanstack/react-query";
 import * as FileSystem from "expo-file-system";
-import * as Haptics from "expo-haptics";
+import * as Haptics from "@/packages/expo-haptics";
 import { View } from "react-native";
 import * as Progress from "react-native-progress";
 import { toast } from "sonner-native";

components/settings/SubtitleToggles.tsx

@@ -1,5 +1,5 @@
 import { TouchableOpacity, View, ViewProps } from "react-native";
-import * as DropdownMenu from "zeego/dropdown-menu";
+import * as DropdownMenu from "@/components/DropdownMenu";
 import { Text } from "../common/Text";
 import { useMedia } from "./MediaContext";
 import { Switch } from "react-native-gesture-handler";

components/video-player/controls/AudioSlider.tsx

@@ -1,8 +1,11 @@
 import React, { useEffect, useRef } from "react";
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, Platform } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import { Slider } from "react-native-awesome-slider";
-import { VolumeManager } from "react-native-volume-manager";
+// import { VolumeManager } from "react-native-volume-manager";
+const VolumeManager = !Platform.isTV
+  ? require("react-native-volume-manager")
+  : null;
 import { Ionicons } from "@expo/vector-icons";
 
 interface AudioSliderProps {
@@ -10,6 +13,8 @@ interface AudioSliderProps {
 }
 
 const AudioSlider: React.FC<AudioSliderProps> = ({ setVisibility }) => {
+  if (Platform.isTV) return;
+
   const volume = useSharedValue<number>(50); // Explicitly type as number
   const min = useSharedValue<number>(0); // Explicitly type as number
   const max = useSharedValue<number>(100); // Explicitly type as number

components/video-player/controls/BrightnessSlider.tsx

@@ -1,12 +1,15 @@
 import React, { useEffect } from "react";
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, Platform } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import { Slider } from "react-native-awesome-slider";
-import * as Brightness from "expo-brightness";
+// import * as Brightness from "expo-brightness";
+const Brightness = !Platform.isTV ? require("expo-brightness") : null;
 import { Ionicons } from "@expo/vector-icons";
 import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
 
 const BrightnessSlider = () => {
+  if (Platform.isTV) return;
+
   const brightness = useSharedValue(50);
   const min = useSharedValue(0);
   const max = useSharedValue(100);

components/video-player/controls/Controls.tsx

@@ -29,7 +29,7 @@ import {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
-import * as Haptics from "expo-haptics";
+import * as Haptics from "@/packages/expo-haptics";
 import { Image } from "expo-image";
 import { useLocalSearchParams, useRouter } from "expo-router";
 import { useAtom } from "jotai";

components/video-player/controls/dropdown/DropdownViewDirect.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from "react";
 import { View, TouchableOpacity } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import * as DropdownMenu from "zeego/dropdown-menu";
+import * as DropdownMenu from "@/components/DropdownMenu";
 import { useControlContext } from "../contexts/ControlContext";
 import { useVideoContext } from "../contexts/VideoContext";
 import { EmbeddedSubtitle, ExternalSubtitle } from "../types";

components/video-player/controls/dropdown/DropdownViewTranscoding.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { View, TouchableOpacity } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import * as DropdownMenu from "zeego/dropdown-menu";
+import * as DropdownMenu from "@/components/DropdownMenu";
 import { useControlContext } from "../contexts/ControlContext";
 import { useVideoContext } from "../contexts/VideoContext";
 import { TranscodedSubtitle } from "../types";