diff --git a/components/jellyseerr/Cast.tsx b/components/jellyseerr/Cast.tsx index 7642382d..8f64355d 100644 --- a/components/jellyseerr/Cast.tsx +++ b/components/jellyseerr/Cast.tsx @@ -1,34 +1,38 @@ -import {View, ViewProps} from "react-native"; -import {MovieDetails} from "@/utils/jellyseerr/server/models/Movie"; -import {TvDetails} from "@/utils/jellyseerr/server/models/Tv"; +import { View, ViewProps } from "react-native"; +import { MovieDetails } from "@/utils/jellyseerr/server/models/Movie"; +import { TvDetails } from "@/utils/jellyseerr/server/models/Tv"; import React from "react"; -import {FlashList} from "@shopify/flash-list"; -import {Text} from "@/components/common/Text"; +import { FlashList } from "@shopify/flash-list"; +import { Text } from "@/components/common/Text"; import PersonPoster from "@/components/jellyseerr/PersonPoster"; -const CastSlide: React.FC<{ details?: MovieDetails | TvDetails } & ViewProps> = ({ details, ...props }) => { +const CastSlide: React.FC< + { details?: MovieDetails | TvDetails } & ViewProps +> = ({ details, ...props }) => { return ( - details?.credits?.cast?.length && details?.credits?.cast?.length > 0 && - + details?.credits?.cast?.length && + details?.credits?.cast?.length > 0 && ( + Cast } - estimatedItemSize={15} - keyExtractor={item => item?.id?.toString()} - renderItem={({item}) => - - } + horizontal + showsHorizontalScrollIndicator={false} + data={details?.credits.cast} + ItemSeparatorComponent={() => } + estimatedItemSize={15} + keyExtractor={(item) => item?.id?.toString()} + renderItem={({ item }) => ( + + )} /> - - ) -} + + ) + ); +}; -export default CastSlide; \ No newline at end of file +export default CastSlide; diff --git a/components/jellyseerr/DetailFacts.tsx b/components/jellyseerr/DetailFacts.tsx index aa0e7885..782ede8b 100644 --- a/components/jellyseerr/DetailFacts.tsx +++ b/components/jellyseerr/DetailFacts.tsx @@ -1,14 +1,14 @@ -import {View, ViewProps} from "react-native"; -import {MovieDetails} from "@/utils/jellyseerr/server/models/Movie"; -import {TvDetails} from "@/utils/jellyseerr/server/models/Tv"; -import {Text} from "@/components/common/Text"; -import {useMemo} from "react"; -import {useJellyseerr} from "@/hooks/useJellyseerr"; -import {uniqBy} from "lodash"; -import {TmdbRelease} from "@/utils/jellyseerr/server/api/themoviedb/interfaces"; -import {Ionicons, MaterialCommunityIcons} from "@expo/vector-icons"; +import { View, ViewProps } from "react-native"; +import { MovieDetails } from "@/utils/jellyseerr/server/models/Movie"; +import { TvDetails } from "@/utils/jellyseerr/server/models/Tv"; +import { Text } from "@/components/common/Text"; +import { useMemo } from "react"; +import { useJellyseerr } from "@/hooks/useJellyseerr"; +import { uniqBy } from "lodash"; +import { TmdbRelease } from "@/utils/jellyseerr/server/api/themoviedb/interfaces"; +import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"; import CountryFlag from "react-native-country-flag"; -import {ANIME_KEYWORD_ID} from "@/utils/jellyseerr/server/api/themoviedb/constants"; +import { ANIME_KEYWORD_ID } from "@/utils/jellyseerr/server/api/themoviedb/constants"; interface Release { certification: string; @@ -19,13 +19,16 @@ interface Release { } const dateOpts: Intl.DateTimeFormatOptions = { - year: 'numeric', - month: 'long', - day: 'numeric', -} + year: "numeric", + month: "long", + day: "numeric", +}; -const Facts: React.FC<{title: string, facts?: string[] | React.ReactNode[]} & ViewProps> = ({title, facts, ...props}) => ( - facts && facts?.length > 0 && ( +const Facts: React.FC< + { title: string; facts?: string[] | React.ReactNode[] } & ViewProps +> = ({ title, facts, ...props }) => + facts && + facts?.length > 0 && ( {title} @@ -35,31 +38,33 @@ const Facts: React.FC<{title: string, facts?: string[] | React.ReactNode[]} & Vi )} - ) -) + ); -const Fact: React.FC<{title: string, fact?: string | null} & ViewProps> = ({title, fact, ...props}) => ( - fact && -) - -const DetailFacts: React.FC<{ details?: MovieDetails | TvDetails } & ViewProps> = ({ - details, - className, +const Fact: React.FC<{ title: string; fact?: string | null } & ViewProps> = ({ + title, + fact, ...props -}) => { - const {jellyseerrUser} = useJellyseerr(); +}) => fact && ; + +const DetailFacts: React.FC< + { details?: MovieDetails | TvDetails } & ViewProps +> = ({ details, className, ...props }) => { + const { jellyseerrUser } = useJellyseerr(); const locale = useMemo(() => { - return jellyseerrUser?.settings?.locale || 'en' + return jellyseerrUser?.settings?.locale || "en"; }, [jellyseerrUser]); const region = useMemo( - () => jellyseerrUser?.settings?.region || 'US', + () => jellyseerrUser?.settings?.region || "US", [jellyseerrUser] ); const releases = useMemo( - () => (details as MovieDetails)?.releases?.results.find((r: TmdbRelease) => r.iso_3166_1 === region)?.release_dates as TmdbRelease['release_dates'], + () => + (details as MovieDetails)?.releases?.results.find( + (r: TmdbRelease) => r.iso_3166_1 === region + )?.release_dates as TmdbRelease["release_dates"], [details] ); @@ -71,97 +76,143 @@ const DetailFacts: React.FC<{ details?: MovieDetails | TvDetails } & ViewProps> // 5. Physical // 6. TV const filteredReleases = useMemo( - () => uniqBy(releases?.filter((r: Release) => r.type > 2 && r.type < 6), 'type'), + () => + uniqBy( + releases?.filter((r: Release) => r.type > 2 && r.type < 6), + "type" + ), [releases] ); const firstAirDate = useMemo(() => { - const firstAirDate = (details as TvDetails)?.firstAirDate + const firstAirDate = (details as TvDetails)?.firstAirDate; if (firstAirDate) { - return new Date(firstAirDate).toLocaleDateString(`${locale}-${region}`, dateOpts) + return new Date(firstAirDate).toLocaleDateString( + `${locale}-${region}`, + dateOpts + ); } }, [details]); const nextAirDate = useMemo(() => { - const firstAirDate = (details as TvDetails)?.firstAirDate - const nextAirDate = (details as TvDetails)?.nextEpisodeToAir?.airDate + const firstAirDate = (details as TvDetails)?.firstAirDate; + const nextAirDate = (details as TvDetails)?.nextEpisodeToAir?.airDate; if (nextAirDate && firstAirDate !== nextAirDate) { - return new Date(nextAirDate).toLocaleDateString(`${locale}-${region}`, dateOpts) + return new Date(nextAirDate).toLocaleDateString( + `${locale}-${region}`, + dateOpts + ); } }, [details]); const revenue = useMemo( - () => (details as MovieDetails)?.revenue - ?.toLocaleString?.(`${locale}-${region}`, {style: 'currency', currency: "USD"}), + () => + (details as MovieDetails)?.revenue?.toLocaleString?.( + `${locale}-${region}`, + { style: "currency", currency: "USD" } + ), [details] ); const budget = useMemo( - () => (details as MovieDetails)?.budget - ?.toLocaleString?.(`${locale}-${region}`, {style: 'currency', currency: "USD"}), + () => + (details as MovieDetails)?.budget?.toLocaleString?.( + `${locale}-${region}`, + { style: "currency", currency: "USD" } + ), [details] ); const streamingProviders = useMemo( - () => details?.watchProviders?.find((provider) => provider.iso_3166_1 === region)?.flatrate, + () => + details?.watchProviders?.find( + (provider) => provider.iso_3166_1 === region + )?.flatrate, [details] ); - const networks = useMemo( - () => (details as TvDetails)?.networks, - [details] - ); + const networks = useMemo(() => (details as TvDetails)?.networks, [details]); const spokenLanguage = useMemo( - () => details?.spokenLanguages.find((lng) => lng.iso_639_1 === details.originalLanguage)?.name, + () => + details?.spokenLanguages.find( + (lng) => lng.iso_639_1 === details.originalLanguage + )?.name, [details] ); return ( - details && + details && ( + Details - - - - {details.keywords.some((keyword) => keyword.id === ANIME_KEYWORD_ID) && ( - - )} - - - {r.type === 3 ? ( - // Theatrical - - ) : r.type === 4 ? ( - // Digital - - ) : ( - // Physical - - )} - {new Date(r.release_date).toLocaleDateString(`${locale}-${region}`, dateOpts)} - - )} + + + + {details.keywords.some( + (keyword) => keyword.id === ANIME_KEYWORD_ID + ) && } + ( + + {r.type === 3 ? ( + // Theatrical + + ) : r.type === 4 ? ( + // Digital + + ) : ( + // Physical + + )} + + {new Date(r.release_date).toLocaleDateString( + `${locale}-${region}`, + dateOpts + )} + + + ))} + /> + + + + + + ( + + + {n.name} + + ))} + /> + n.name + )} + /> + n.name)} /> + s.name)} /> - - - - - - - - - {n.name} - - )}/> - n.name)}/> - n.name)}/> - s.name)}/> - - ) -} + + ) + ); +}; -export default DetailFacts; \ No newline at end of file +export default DetailFacts;