feat: add upcoming air dates for episodes

app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/person/[personId].tsx

@@ -19,7 +19,7 @@ export default function page() {
   const local = useLocalSearchParams();
   const { t } = useTranslation();
 
-  const { jellyseerrApi, jellyseerrUser } = useJellyseerr();
+  const { jellyseerrApi, jellyseerrUser, jellyseerrRegion: region, jellyseerrLocale: locale } = useJellyseerr();
 
   const { personId } = local as { personId: string };
 
@@ -32,15 +32,6 @@ export default function page() {
     enabled: !!jellyseerrApi && !!personId,
   });
 
-  const locale = useMemo(() => {
-    return jellyseerrUser?.settings?.locale || "en";
-  }, [jellyseerrUser]);
-
-  const region = useMemo(
-    () => jellyseerrUser?.settings?.region || "US",
-    [jellyseerrUser]
-  );
-
   const castedRoles: PersonCreditCast[] = useMemo(
     () =>
       uniqBy(orderBy(

components/jellyseerr/DetailFacts.tsx

@@ -19,7 +19,7 @@ interface Release {
   type: number;
 }
 
-const dateOpts: Intl.DateTimeFormatOptions = {
+export const dateOpts: Intl.DateTimeFormatOptions = {
   year: "numeric",
   month: "long",
   day: "numeric",
@@ -50,18 +50,9 @@ const Fact: React.FC<{ title: string; fact?: string | null } & ViewProps> = ({
 const DetailFacts: React.FC<
   { details?: MovieDetails | TvDetails } & ViewProps
 > = ({ details, className, ...props }) => {
-  const { jellyseerrUser } = useJellyseerr();
+  const { jellyseerrUser, jellyseerrRegion: region, jellyseerrLocale: locale } = useJellyseerr();
   const { t } = useTranslation();
 
-  const locale = useMemo(() => {
-    return jellyseerrUser?.settings?.locale || "en";
-  }, [jellyseerrUser]);
-
-  const region = useMemo(
-    () => jellyseerrUser?.settings?.region || "US",
-    [jellyseerrUser]
-  );
-
   const releases = useMemo(
     () =>
       (details as MovieDetails)?.releases?.results.find(

components/series/JellyseerrSeasons.tsx

@@ -23,6 +23,8 @@ import { Loader } from "../Loader";
 import { t } from "i18next";
 import {MovieDetails} from "@/utils/jellyseerr/server/models/Movie";
 import {MediaRequestBody} from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
+import {textShadowStyle} from "@/components/jellyseerr/discover/GenericSlideCard";
+import {dateOpts} from "@/components/jellyseerr/DetailFacts";
 
 const JellyseerrSeasonEpisodes: React.FC<{
   details: TvDetails;
@@ -52,26 +54,51 @@ const JellyseerrSeasonEpisodes: React.FC<{
 };
 
 const RenderItem = ({ item, index }: any) => {
-  const { jellyseerrApi } = useJellyseerr();
+  const { jellyseerrApi, jellyseerrRegion: region, jellyseerrLocale: locale } = useJellyseerr();
   const [imageError, setImageError] = useState(false);
 
+  const upcomingAirDate = useMemo(() => {
+    const airDate = item.airDate;
+    if (airDate) {
+      let airDateObj = new Date(airDate);
+
+      if (new Date() < airDateObj) {
+        return airDateObj.toLocaleDateString(
+          `${locale}-${region}`,
+          dateOpts
+        );
+      }
+    }
+  }, [item]);
+
   return (
     <View className="flex flex-col w-44 mt-2">
       <View className="relative aspect-video rounded-lg overflow-hidden border border-neutral-800">
         {!imageError ? (
-          <Image
-            key={item.id}
-            id={item.id}
-            source={{
-              uri: jellyseerrApi?.imageProxy(item.stillPath),
-            }}
-            cachePolicy={"memory-disk"}
-            contentFit="cover"
-            className="w-full h-full"
-            onError={(e) => {
-              setImageError(true);
-            }}
-          />
+          <>
+            <Image
+              key={item.id}
+              id={item.id}
+              source={{
+                uri: jellyseerrApi?.imageProxy(item.stillPath),
+              }}
+              cachePolicy={"memory-disk"}
+              contentFit="cover"
+              className="w-full h-full"
+              onError={(e) => {
+                setImageError(true);
+              }}
+            />
+            {upcomingAirDate && (
+              <View className="absolute justify-center bottom-0 right-0.5 items-center">
+                <View className="rounded-full bg-purple-600/30 p-1">
+                  <Text className="text-center text-xs" style={textShadowStyle.shadow}>
+                    {upcomingAirDate}
+                  </Text>
+                </View>
+              </View>
+            )}
+          </>
         ) : (
           <View className="flex flex-col w-full h-full items-center justify-center border border-neutral-800 bg-neutral-900">
             <Ionicons

hooks/useJellyseerr.ts

@@ -449,12 +449,23 @@ export const useJellyseerr = () => {
     );
   };
 
+  const jellyseerrRegion = useMemo(
+    () => jellyseerrUser?.settings?.region || "US",
+    [jellyseerrUser]
+  );
+
+  const jellyseerrLocale = useMemo(() => {
+    return jellyseerrUser?.settings?.locale || "en";
+  }, [jellyseerrUser]);
+
   return {
     jellyseerrApi,
     jellyseerrUser,
     setJellyseerrUser,
     clearAllJellyseerData,
     isJellyseerrResult,
+    jellyseerrRegion,
+    jellyseerrLocale,
     requestMedia,
   };
 };