feat: [Jellyseerr] Show recent requests #324

- Added recent requests slide
- updated JellyseerrPoster.tsx to handle more options

components/GenreTags.tsx

@@ -21,14 +21,19 @@ export const Tag: React.FC<{ text: string, textClass?: ViewProps["className"], t
   );
 };
 
-export const Tags: React.FC<TagProps & ViewProps> = ({ tags, textClass = "text-xs", ...props }) => {
+export const Tags: React.FC<TagProps & {tagProps?: ViewProps} & ViewProps> = ({
+  tags,
+  textClass = "text-xs",
+  tagProps,
+  ...props
+}) => {
   if (!tags || tags.length === 0) return null;
 
   return (
     <View className={`flex flex-row flex-wrap gap-1 ${props.className}`} {...props}>
       {tags.map((tag, idx) => (
         <View key={idx}>
-          <Tag key={idx} textClass={textClass} text={tag}/>
+          <Tag key={idx} textClass={textClass} text={tag} {...tagProps}/>
         </View>
       ))}
     </View>

components/Ratings.tsx

@@ -7,6 +7,9 @@ import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { useQuery } from "@tanstack/react-query";
 import { MediaType } from "@/utils/jellyseerr/server/constants/media";
+import {MovieDetails} from "@/utils/jellyseerr/server/models/Movie";
+import {TvDetails} from "@/utils/jellyseerr/server/models/Tv";
+import {useMemo} from "react";
 
 interface Props extends ViewProps {
   item?: BaseItemDto | null;
@@ -49,14 +52,17 @@ export const Ratings: React.FC<Props> = ({ item, ...props }) => {
   );
 };
 
-export const JellyserrRatings: React.FC<{ result: MovieResult | TvResult }> = ({
+export const JellyserrRatings: React.FC<{ result: MovieResult | TvResult | TvDetails | MovieDetails }> = ({
   result,
 }) => {
-  const { jellyseerrApi } = useJellyseerr();
+  const { jellyseerrApi, getMediaType } = useJellyseerr();
+
+  const mediaType = useMemo(() => getMediaType(result), [result]);
+
   const { data, isLoading } = useQuery({
-    queryKey: ["jellyseerr", result.id, result.mediaType, "ratings"],
+    queryKey: ["jellyseerr", result.id, mediaType, "ratings"],
     queryFn: async () => {
-      return result.mediaType === MediaType.MOVIE
+      return mediaType === MediaType.MOVIE
         ? jellyseerrApi?.movieRatings(result.id)
         : jellyseerrApi?.tvRatings(result.id);
     },

components/common/JellyseerrItemRouter.tsx

@@ -9,13 +9,16 @@ import {
   Permission,
 } from "@/utils/jellyseerr/server/lib/permissions";
 import { MediaType } from "@/utils/jellyseerr/server/constants/media";
+import {TvDetails} from "@/utils/jellyseerr/server/models/Tv";
+import {MovieDetails} from "@/utils/jellyseerr/server/models/Movie";
 
 interface Props extends TouchableOpacityProps {
-  result: MovieResult | TvResult;
+  result: MovieResult | TvResult | MovieDetails | TvDetails;
   mediaTitle: string;
   releaseYear: number;
   canRequest: boolean;
   posterSrc: string;
+  mediaType: MediaType;
 }
 
 export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
@@ -24,6 +27,7 @@ export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
   releaseYear,
   canRequest,
   posterSrc,
+  mediaType,
   children,
   ...props
 }) => {
@@ -46,7 +50,7 @@ export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
     () =>
       requestMedia(mediaTitle, {
         mediaId: result.id,
-        mediaType: result.mediaType,
+        mediaType,
       }),
     [jellyseerrApi, result]
   );
@@ -67,6 +71,7 @@ export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
                     releaseYear,
                     canRequest,
                     posterSrc,
+                    mediaType
                   },
                 });
               }}
@@ -83,7 +88,7 @@ export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
             key={"content"}
           >
             <ContextMenu.Label key="label-1">Actions</ContextMenu.Label>
-            {canRequest && result.mediaType === MediaType.MOVIE && (
+            {canRequest && mediaType === MediaType.MOVIE && (
               <ContextMenu.Item
                 key="item-1"
                 onSelect={() => {

components/jellyseerr/discover/Discover.tsx

@@ -8,6 +8,7 @@ import {View} from "react-native";
 import {networks} from "@/utils/jellyseerr/src/components/Discover/NetworkSlider";
 import {studios} from "@/utils/jellyseerr/src/components/Discover/StudioSlider";
 import GenreSlide from "@/components/jellyseerr/discover/GenreSlide";
+import RecentRequestsSlide from "@/components/jellyseerr/discover/RecentRequestsSlide";
 
 interface Props {
   sliders?: DiscoverSlider[];
@@ -25,6 +26,8 @@ const Discover: React.FC<Props> = ({ sliders }) => {
     <View className="flex flex-col space-y-4 mb-8">
       {sortedSliders.map(slide => {
         switch (slide.type) {
+          case DiscoverSliderType.RECENT_REQUESTS:
+            return <RecentRequestsSlide key={slide.id} slide={slide} />
           case DiscoverSliderType.NETWORKS:
             return <CompanySlide key={slide.id} slide={slide} data={networks}/>
           case DiscoverSliderType.STUDIOS:

components/jellyseerr/discover/RecentRequestsSlide.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import {useQuery} from "@tanstack/react-query";
+import {useJellyseerr} from "@/hooks/useJellyseerr";
+import Slide, {SlideProps} from "@/components/jellyseerr/discover/Slide";
+import {ViewProps} from "react-native";
+import MediaRequest from "@/utils/jellyseerr/server/entity/MediaRequest";
+import {NonFunctionProperties} from "@/utils/jellyseerr/server/interfaces/api/common";
+import {MediaType} from "@/utils/jellyseerr/server/constants/media";
+import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
+
+const RequestCard: React.FC<{request: MediaRequest}> = ({request}) => {
+  const {jellyseerrApi} = useJellyseerr();
+
+  const { data: details, isLoading, isError } = useQuery({
+    queryKey: ["jellyseerr", "detail", request.media.mediaType, request.media.tmdbId],
+    queryFn: async () => {
+
+      return request.media.mediaType == MediaType.MOVIE
+        ? jellyseerrApi?.movieDetails(request.media.tmdbId)
+        : jellyseerrApi?.tvDetails(request.media.tmdbId);
+    },
+    enabled: !!jellyseerrApi,
+    refetchOnMount: true,
+    staleTime: 0,
+  });
+
+  const { data: refreshedRequest } = useQuery({
+    queryKey: ["jellyseerr", "requests", request.media.mediaType, request.id],
+    queryFn: async () => jellyseerrApi?.getRequest(request.id),
+    enabled: !!jellyseerrApi,
+    refetchOnMount: true,
+    refetchInterval: 5000,
+    staleTime: 0,
+  });
+
+  return (
+    details && <JellyseerrPoster horizontal showDownloadInfo item={details} mediaRequest={refreshedRequest} />
+  )
+}
+
+const RecentRequestsSlide: React.FC<SlideProps & ViewProps> = ({ slide, ...props }) => {
+  const {jellyseerrApi} = useJellyseerr();
+
+  const { data: requests, isLoading, isError } = useQuery({
+    queryKey: ["jellyseerr", "recent_requests"],
+    queryFn: async () =>  jellyseerrApi?.requests(),
+    enabled: !!jellyseerrApi,
+    refetchOnMount: true,
+    staleTime: 0,
+  });
+
+  return (
+    requests &&
+    requests.results.length > 0 &&
+    !isError && (
+      <Slide
+        {...props}
+        slide={slide}
+        data={requests.results}
+        keyExtractor={(item) => item.id.toString()}
+        renderItem={(item: NonFunctionProperties<MediaRequest>) => (
+          <RequestCard request={item}/>
+        )}
+      />
+    )
+  )
+};
+
+export default RecentRequestsSlide;

components/posters/JellyseerrPoster.tsx

@@ -1,28 +1,42 @@
-import { TouchableJellyseerrRouter } from "@/components/common/JellyseerrItemRouter";
-import { Text } from "@/components/common/Text";
+import {TouchableJellyseerrRouter} from "@/components/common/JellyseerrItemRouter";
+import {Text} from "@/components/common/Text";
 import JellyseerrMediaIcon from "@/components/jellyseerr/JellyseerrMediaIcon";
 import JellyseerrStatusIcon from "@/components/jellyseerr/JellyseerrStatusIcon";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
-import { useJellyseerrCanRequest } from "@/utils/_jellyseerr/useJellyseerrCanRequest";
-import { MediaType } from "@/utils/jellyseerr/server/constants/media";
-import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
-import { Image } from "expo-image";
-import { useMemo } from "react";
-import { View, ViewProps } from "react-native";
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
+import {useJellyseerr} from "@/hooks/useJellyseerr";
+import {useJellyseerrCanRequest} from "@/utils/_jellyseerr/useJellyseerrCanRequest";
+import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";
+import {Image} from "expo-image";
+import {useMemo} from "react";
+import {View, ViewProps} from "react-native";
+import Animated, {useAnimatedStyle, useSharedValue, withTiming,} from "react-native-reanimated";
+import {TvDetails} from "@/utils/jellyseerr/server/models/Tv";
+import {MovieDetails} from "@/utils/jellyseerr/server/models/Movie";
+import type {DownloadingItem} from "@/utils/jellyseerr/server/lib/downloadtracker";
+import MediaRequest from "@/utils/jellyseerr/server/entity/MediaRequest";
+import {useTranslation} from "react-i18next";
+import {MediaStatus} from "@/utils/jellyseerr/server/constants/media";
+import {textShadowStyle} from "@/components/jellyseerr/discover/GenericSlideCard";
+import {Colors} from "@/constants/Colors";
+import {Tags} from "@/components/GenreTags";
 
 interface Props extends ViewProps {
-  item: MovieResult | TvResult;
+  item: MovieResult | TvResult | MovieDetails | TvDetails;
+  horizontal?: boolean;
+  showDownloadInfo?: boolean;
+  mediaRequest?: MediaRequest;
 }
 
-const JellyseerrPoster: React.FC<Props> = ({ item, ...props }) => {
-  const { jellyseerrApi } = useJellyseerr();
+const JellyseerrPoster: React.FC<Props> = ({
+  item,
+  horizontal,
+  showDownloadInfo,
+  mediaRequest,
+  ...props
+}) => {
+  const { jellyseerrApi, getTitle, getYear, getMediaType, isJellyseerrResult } = useJellyseerr();
   const loadingOpacity = useSharedValue(1);
   const imageOpacity = useSharedValue(0);
+  const {t} = useTranslation();
 
   const loadingAnimatedStyle = useAnimatedStyle(() => ({
     opacity: loadingOpacity.value,
@@ -38,27 +52,64 @@ const JellyseerrPoster: React.FC<Props> = ({ item, ...props }) => {
   };
 
   const imageSrc = useMemo(
-    () => jellyseerrApi?.imageProxy(item.posterPath, "w300_and_h450_face"),
-    [item, jellyseerrApi]
+    () => jellyseerrApi?.imageProxy(
+      horizontal ? item.backdropPath : item.posterPath,
+      horizontal ? "w1920_and_h800_multi_faces" : "w300_and_h450_face"
+    ),
+    [item, jellyseerrApi, horizontal]
   );
 
-  const title = useMemo(
-    () => (item.mediaType === MediaType.MOVIE ? item.title : item.name),
-    [item]
-  );
+  const title = useMemo(() => getTitle(item), [item]);
+  const releaseYear = useMemo(() => getYear(item), [item]);
+  const mediaType = useMemo(() => getMediaType(item), [item]);
 
-  const releaseYear = useMemo(
-    () =>
-      new Date(
-        item.mediaType === MediaType.MOVIE
-          ? item.releaseDate
-          : item.firstAirDate
-      ).getFullYear(),
-    [item]
-  );
+  const size = useMemo(() => horizontal ? 'h-28' : 'w-28', [horizontal])
+  const ratio = useMemo(() => horizontal ? '15/10' : '10/15', [horizontal])
 
   const [canRequest] = useJellyseerrCanRequest(item);
 
+  const is4k = useMemo(
+    () => mediaRequest?.is4k === true,
+    [mediaRequest]
+  );
+
+  const downloadItems = useMemo(
+    () => (is4k ? mediaRequest?.media.downloadStatus4k : mediaRequest?.media.downloadStatus) || [],
+    [mediaRequest, is4k]
+  )
+
+  const progress = useMemo(() => {
+      const [totalSize, sizeLeft] = downloadItems
+        .reduce((sum: number[], next: DownloadingItem) =>
+          [sum[0] + next.size, sum[1] + next.sizeLeft],
+          [0, 0]
+        );
+
+      return (((totalSize - sizeLeft) / totalSize) * 100);
+    },
+    [downloadItems]
+  );
+
+  const requestedSeasons: string[] | undefined = useMemo(
+    () => {
+      const seasons = mediaRequest?.seasons?.flatMap(s => s.seasonNumber.toString()) || []
+      if (seasons.length > 4) {
+        const [first, second, third, fourth, ...rest] = seasons;
+        return [first, second, third, fourth, t("home.settings.plugins.jellyseerr.plus_n_more", {n: rest.length })]
+      }
+      return seasons
+    },
+    [mediaRequest]
+  );
+
+  const available = useMemo(
+    () => {
+      const status = mediaRequest?.media?.[is4k ? 'status4k' : 'status'];
+      return status === MediaStatus.AVAILABLE
+    },
+    [mediaRequest, is4k]
+  );
+
   return (
     <TouchableJellyseerrRouter
       result={item}
@@ -66,9 +117,10 @@ const JellyseerrPoster: React.FC<Props> = ({ item, ...props }) => {
       releaseYear={releaseYear}
       canRequest={canRequest}
       posterSrc={imageSrc!!}
+      mediaType={mediaType}
     >
-      <View className="flex flex-col w-28 mr-2">
-        <View className="relative rounded-lg overflow-hidden border border-neutral-900 w-28 aspect-[10/15]">
+      <View className={`flex flex-col mr-2 h-auto`}>
+        <View className={`relative rounded-lg overflow-hidden border border-neutral-900 ${size} aspect-[${ratio}]`}>
           <Animated.View style={imageAnimatedStyle}>
             <Image
               key={item.id}
@@ -77,26 +129,65 @@ const JellyseerrPoster: React.FC<Props> = ({ item, ...props }) => {
               cachePolicy={"memory-disk"}
               contentFit="cover"
               style={{
-                aspectRatio: "10/15",
-                width: "100%",
+                aspectRatio: ratio,
+                [horizontal ? 'height' : 'width']: "100%"
               }}
               onLoad={handleImageLoad}
             />
           </Animated.View>
+          {mediaRequest && showDownloadInfo && (
+            <>
+              <View className={`absolute w-full h-full bg-black ${!available ? 'opacity-70' : 'opacity-0'}`} />
+              {!available && !Number.isNaN(progress) && (
+                <>
+                  <View
+                    className="absolute left-0 h-full opacity-40"
+                    style={{
+                      width: `${progress || 0}%`,
+                      backgroundColor: Colors.primaryRGB,
+                    }}
+                  />
+                  <View className="absolute w-full h-full justify-center items-center">
+                    <Text
+                      className="font-bold"
+                      style={textShadowStyle.shadow}
+                    >
+                      {progress?.toFixed(0)}%
+                    </Text>
+                  </View>
+                </>
+              )}
+              <Text
+                className="absolute right-1 top-1 text-right font-bold"
+                style={textShadowStyle.shadow}
+              >
+                {mediaRequest?.requestedBy.displayName}
+              </Text>
+              {requestedSeasons.length > 0 && (
+                <Tags
+                  className="absolute bottom-1 left-0.5 w-32"
+                  tagProps={{
+                    className: "bg-black rounded-full px-1"
+                  }}
+                  tags={requestedSeasons}
+                />
+              )}
+            </>
+          )}
           <JellyseerrStatusIcon
             className="absolute bottom-1 right-1"
             showRequestIcon={canRequest}
-            mediaStatus={item?.mediaInfo?.status}
+            mediaStatus={mediaRequest?.media?.status || item?.mediaInfo?.status}
           />
           <JellyseerrMediaIcon
             className="absolute top-1 left-1"
-            mediaType={item?.mediaType}
+            mediaType={mediaType}
           />
         </View>
-        <View className="mt-2 flex flex-col">
-          <Text numberOfLines={2}>{title}</Text>
-          <Text className="text-xs opacity-50 align-bottom">{releaseYear}</Text>
-        </View>
+      </View>
+      <View className={`mt-2 flex flex-col ${horizontal ? 'w-44' : 'w-28'}`}>
+        <Text numberOfLines={2}>{title}</Text>
+        <Text className="text-xs opacity-50 align-bottom">{releaseYear}</Text>
       </View>
     </TouchableJellyseerrRouter>
   );

components/series/JellyseerrSeasons.tsx

@@ -128,14 +128,12 @@ const RenderItem = ({ item, index }: any) => {
 
 const JellyseerrSeasons: React.FC<{
   isLoading: boolean;
-  result?: TvResult;
   details?: TvDetails;
   hasAdvancedRequest?: boolean,
   onAdvancedRequest?: (data: MediaRequestBody) => void;
   refetch:  (options?: (RefetchOptions | undefined)) => Promise<QueryObserverResult<TvDetails | MovieDetails | undefined, Error>>;
 }> = ({
   isLoading,
-  result,
   details,
   refetch,
   hasAdvancedRequest,
@@ -195,7 +193,7 @@ const JellyseerrSeasons: React.FC<{
         return onAdvancedRequest?.(body)
       }
 
-      requestMedia(result?.name!!, body, refetch);
+      requestMedia(details.name, body, refetch);
     }
   }, [jellyseerrApi, seasons, details, hasAdvancedRequest, onAdvancedRequest]);
 
@@ -227,7 +225,7 @@ const JellyseerrSeasons: React.FC<{
         return onAdvancedRequest?.(body)
       }
 
-      requestMedia(`${result?.name!!}, Season ${seasonNumber}`, body, refetch);
+      requestMedia(`${details.name}, Season ${seasonNumber}`, body, refetch);
     }
   }, [requestMedia, hasAdvancedRequest, onAdvancedRequest]);
 

components/settings/StorageSettings.tsx

@@ -8,6 +8,7 @@ import { toast } from "sonner-native";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
 import { useTranslation } from "react-i18next";
+import {Colors} from "@/constants/Colors";
 
 export const StorageSettings = () => {
   const { deleteAllFiles, appSizeUsage } = useDownload();
@@ -61,7 +62,7 @@ export const StorageSettings = () => {
               <View
                 style={{
                   width: `${(size.app / size.total) * 100}%`,
-                  backgroundColor: "rgb(147 51 234)",
+                  backgroundColor: Colors.primaryRGB,
                 }}
               />
               <View
@@ -70,7 +71,7 @@ export const StorageSettings = () => {
                     ((size.total - size.remaining - size.app) / size.total) *
                     100
                   }%`,
-                  backgroundColor: "rgb(192 132 252)",
+                  backgroundColor: Colors.primaryLightRGB,
                 }}
               />
             </>