Merge branch 'main' of https://github.com/sussy-code/sudo-flix

src/assets/locales/en.json

@@ -178,6 +178,7 @@
   },
   "media": {
     "episodeDisplay": "S{{season}} - E{{episode}}",
+    "unreleased": "Unreleased",
     "types": {
       "movie": "Movie",
       "show": "Show"

src/backend/metadata/getmeta.ts

@@ -43,7 +43,7 @@ export function formatTMDBMetaResult(
       title: movie.title,
       object_type: mediaTypeToTMDB(type),
       poster: getMediaPoster(movie.poster_path) ?? undefined,
-      original_release_year: new Date(movie.release_date).getFullYear(),
+      original_release_date: new Date(movie.release_date),
     };
   }
   if (type === MWMediaType.SERIES) {
@@ -58,7 +58,7 @@ export function formatTMDBMetaResult(
         title: v.name,
       })),
       poster: getMediaPoster(show.poster_path) ?? undefined,
-      original_release_year: new Date(show.first_air_date).getFullYear(),
+      original_release_date: new Date(show.first_air_date),
     };
   }
 

src/backend/metadata/tmdb.ts

@@ -66,7 +66,7 @@ export function formatTMDBMeta(
   return {
     title: media.title,
     id: media.id.toString(),
-    year: media.original_release_year?.toString(),
+    year: media.original_release_date?.getFullYear()?.toString(),
     poster: media.poster,
     type,
     seasons: seasons as any,
@@ -94,7 +94,8 @@ export function formatTMDBMetaToMediaItem(media: TMDBMediaResult): MediaItem {
   return {
     title: media.title,
     id: media.id.toString(),
-    year: media.original_release_year ?? 0,
+    year: media.original_release_date?.getFullYear() ?? 0,
+    release_date: media.original_release_date,
     poster: media.poster,
     type,
   };
@@ -260,7 +261,7 @@ export function formatTMDBSearchResult(
       title: show.name,
       poster: getMediaPoster(show.poster_path),
       id: show.id,
-      original_release_year: new Date(show.first_air_date).getFullYear(),
+      original_release_date: new Date(show.first_air_date),
       object_type: mediatype,
     };
   }
@@ -271,7 +272,7 @@ export function formatTMDBSearchResult(
     title: movie.title,
     poster: getMediaPoster(movie.poster_path),
     id: movie.id,
-    original_release_year: new Date(movie.release_date).getFullYear(),
+    original_release_date: new Date(movie.release_date),
     object_type: mediatype,
   };
 }

src/backend/metadata/types/tmdb.ts

@@ -20,7 +20,7 @@ export type TMDBMediaResult = {
   title: string;
   poster?: string;
   id: number;
-  original_release_year?: number;
+  original_release_date?: Date;
   object_type: TMDBContentTypes;
   seasons?: TMDBSeasonShort[];
 };

src/components/media/MediaCard.tsx

@@ -1,4 +1,5 @@
 import classNames from "classnames";
+import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
@@ -24,6 +25,20 @@ export interface MediaCardProps {
   onClose?: () => void;
 }
 
+function checkReleased(media: MediaItem): boolean {
+  const isReleasedYear = Boolean(
+    media.year && media.year <= new Date().getFullYear(),
+  );
+  const isReleasedDate = Boolean(
+    media.release_date && media.release_date <= new Date(),
+  );
+
+  // If the media has a release date, use that, otherwise use the year
+  const isReleased = media.release_date ? isReleasedDate : isReleasedYear;
+
+  return isReleased;
+}
+
 function MediaCardContent({
   media,
   linkable,
@@ -35,10 +50,19 @@ function MediaCardContent({
   const { t } = useTranslation();
   const percentageString = `${Math.round(percentage ?? 0).toFixed(0)}%`;
 
-  const canLink = linkable && !closable;
+  const isReleased = useCallback(() => checkReleased(media), [media]);
+
+  const canLink = linkable && !closable && isReleased();
 
   const dotListContent = [t(`media.types.${media.type}`)];
-  if (media.year) dotListContent.push(media.year.toFixed());
+
+  if (media.year) {
+    dotListContent.push(media.year.toFixed());
+  }
+
+  if (!isReleased()) {
+    dotListContent.push(t("media.unreleased"));
+  }
 
   return (
     <Flare.Base
@@ -58,14 +82,14 @@ function MediaCardContent({
       />
       <Flare.Child
         className={`pointer-events-auto relative mb-2 p-3 transition-transform duration-100 ${
-          canLink ? "group-hover:scale-95" : ""
+          canLink ? "group-hover:scale-95" : "opacity-60"
         }`}
       >
         <div
           className={classNames(
             "relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-100",
             {
-              "group-hover:rounded-lg": !closable,
+              "group-hover:rounded-lg": canLink,
             },
           )}
           style={{
@@ -142,7 +166,12 @@ function MediaCardContent({
 export function MediaCard(props: MediaCardProps) {
   const content = <MediaCardContent {...props} />;
 
-  const canLink = props.linkable && !props.closable;
+  const isReleased = useCallback(
+    () => checkReleased(props.media),
+    [props.media],
+  );
+
+  const canLink = props.linkable && !props.closable && isReleased();
 
   let link = canLink
     ? `/media/${encodeURIComponent(mediaItemToId(props.media))}`
@@ -157,7 +186,7 @@ export function MediaCard(props: MediaCardProps) {
     }
   }
 
-  if (!props.linkable) return <span>{content}</span>;
+  if (!canLink) return <span>{content}</span>;
   return (
     <Link
       to={link}

src/utils/mediaTypes.ts

@@ -2,6 +2,7 @@ export interface MediaItem {
   id: string;
   title: string;
   year?: number;
+  release_date?: Date;
   poster?: string;
   type: "show" | "movie";
 }