From 39f27357562aa6cc1abe2fb4331db67e659622f8 Mon Sep 17 00:00:00 2001 From: herrrta <73949927+herrrta@users.noreply.github.com> Date: Sat, 4 Jan 2025 17:11:01 -0500 Subject: [PATCH] Add badge to differentiate a movie/series fixes #332 --- components/GenreTags.tsx | 7 ++-- components/jellyseerr/JellyseerrMediaIcon.tsx | 37 +++++++++++++++++++ .../JellyseerrStatusIcon.tsx} | 5 +-- components/posters/JellyseerrPoster.tsx | 16 +++++--- components/series/JellyseerrSeasons.tsx | 4 +- 5 files changed, 55 insertions(+), 14 deletions(-) create mode 100644 components/jellyseerr/JellyseerrMediaIcon.tsx rename components/{icons/JellyseerrIconStatus.tsx => jellyseerr/JellyseerrStatusIcon.tsx} (93%) diff --git a/components/GenreTags.tsx b/components/GenreTags.tsx index cc5db670..35de54a6 100644 --- a/components/GenreTags.tsx +++ b/components/GenreTags.tsx @@ -1,6 +1,6 @@ // GenreTags.tsx import React from "react"; -import {View, ViewProps} from "react-native"; +import {StyleProp, TextStyle, View, ViewProps} from "react-native"; import { Text } from "./common/Text"; interface TagProps { @@ -8,14 +8,15 @@ interface TagProps { textClass?: ViewProps["className"] } -export const Tag: React.FC<{ text: string, textClass?: ViewProps["className"]} & ViewProps> = ({ +export const Tag: React.FC<{ text: string, textClass?: ViewProps["className"], textStyle?: StyleProp} & ViewProps> = ({ text, textClass, + textStyle, ...props }) => { return ( - {text} + {text} ); }; diff --git a/components/jellyseerr/JellyseerrMediaIcon.tsx b/components/jellyseerr/JellyseerrMediaIcon.tsx new file mode 100644 index 00000000..97a5ab69 --- /dev/null +++ b/components/jellyseerr/JellyseerrMediaIcon.tsx @@ -0,0 +1,37 @@ +import {useMemo} from "react"; +import {MediaType} from "@/utils/jellyseerr/server/constants/media"; +import {Feather, MaterialCommunityIcons} from "@expo/vector-icons"; +import {View, ViewProps} from "react-native"; + +const JellyseerrMediaIcon: React.FC<{ mediaType: "tv" | "movie" } & ViewProps> = ({ + mediaType, + className, + ...props +}) => { + const style = useMemo( + () => mediaType === MediaType.MOVIE + ? 'bg-blue-600/90 border-blue-400/40' + : 'bg-purple-600/90 border-purple-400/40', + [mediaType] + ); + return ( + mediaType && + + {mediaType === MediaType.MOVIE ? ( + + ) : ( + + )} + + ) +} + +export default JellyseerrMediaIcon; \ No newline at end of file diff --git a/components/icons/JellyseerrIconStatus.tsx b/components/jellyseerr/JellyseerrStatusIcon.tsx similarity index 93% rename from components/icons/JellyseerrIconStatus.tsx rename to components/jellyseerr/JellyseerrStatusIcon.tsx index 4c1bda37..8fc593fa 100644 --- a/components/icons/JellyseerrIconStatus.tsx +++ b/components/jellyseerr/JellyseerrStatusIcon.tsx @@ -2,7 +2,6 @@ import {useEffect, useState} from "react"; import {MediaStatus} from "@/utils/jellyseerr/server/constants/media"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import {TouchableOpacity, View, ViewProps} from "react-native"; -import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search"; interface Props { mediaStatus?: MediaStatus; @@ -10,7 +9,7 @@ interface Props { onPress?: () => void; } -const JellyseerrIconStatus: React.FC = ({ +const JellyseerrStatusIcon: React.FC = ({ mediaStatus, showRequestIcon, onPress, @@ -69,4 +68,4 @@ const JellyseerrIconStatus: React.FC = ({ ) } -export default JellyseerrIconStatus; \ No newline at end of file +export default JellyseerrStatusIcon; \ No newline at end of file diff --git a/components/posters/JellyseerrPoster.tsx b/components/posters/JellyseerrPoster.tsx index 5a9647ae..0de80a75 100644 --- a/components/posters/JellyseerrPoster.tsx +++ b/components/posters/JellyseerrPoster.tsx @@ -1,14 +1,14 @@ import {View, ViewProps} from "react-native"; import {Image} from "expo-image"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; import {Text} from "@/components/common/Text"; -import {useEffect, useMemo, useState} from "react"; -import {MovieResult, Results, TvResult} from "@/utils/jellyseerr/server/models/Search"; +import {useMemo} from "react"; +import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search"; import {MediaStatus, MediaType} from "@/utils/jellyseerr/server/constants/media"; import {useJellyseerr} from "@/hooks/useJellyseerr"; import {hasPermission, Permission} from "@/utils/jellyseerr/server/lib/permissions"; import {TouchableJellyseerrRouter} from "@/components/common/JellyseerrItemRouter"; -import JellyseerrIconStatus from "@/components/icons/JellyseerrIconStatus"; +import JellyseerrStatusIcon from "@/components/jellyseerr/JellyseerrStatusIcon"; +import JellyseerrMediaIcon from "@/components/jellyseerr/JellyseerrMediaIcon"; interface Props extends ViewProps { item: MovieResult | TvResult; } @@ -72,16 +72,20 @@ const JellyseerrPoster: React.FC = ({ width: "100%", }} /> - + {title} - {releaseYear} + {releaseYear} diff --git a/components/series/JellyseerrSeasons.tsx b/components/series/JellyseerrSeasons.tsx index bcd9b336..d6dedeb6 100644 --- a/components/series/JellyseerrSeasons.tsx +++ b/components/series/JellyseerrSeasons.tsx @@ -5,7 +5,7 @@ import { TvDetails } from "@/utils/jellyseerr/server/models/Tv"; import { FlashList } from "@shopify/flash-list"; import { orderBy } from "lodash"; import { Tags } from "@/components/GenreTags"; -import JellyseerrIconStatus from "@/components/icons/JellyseerrIconStatus"; +import JellyseerrStatusIcon from "@/components/jellyseerr/JellyseerrStatusIcon"; import Season from "@/utils/jellyseerr/server/entity/Season"; import { MediaStatus, @@ -246,7 +246,7 @@ const JellyseerrSeasons: React.FC<{ seasons?.find((s) => s.seasonNumber === season.seasonNumber) ?.status === MediaStatus.UNKNOWN; return ( - requestSeason(canRequest, season.seasonNumber)} className={canRequest ? "bg-gray-700/40" : undefined}