fix(frontend): better request/media cards for items without valid TMDb IDs (#2181)

src/components/TitleCard/TmdbTitleCard.tsx

@@ -3,9 +3,12 @@ import useSWR from 'swr';
 import TitleCard from '.';
 import type { MovieDetails } from '../../../server/models/Movie';
 import type { TvDetails } from '../../../server/models/Tv';
+import { Permission, useUser } from '../../hooks/useUser';
 
-interface TmdbTitleCardProps {
+export interface TmdbTitleCardProps {
+  id: number;
   tmdbId: number;
+  tvdbId?: number;
   type: 'movie' | 'tv';
 }
 
@@ -13,7 +16,9 @@ const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
   return (movie as MovieDetails).title !== undefined;
 };
 
-const TmdbTitleCard = ({ tmdbId, type }: TmdbTitleCardProps) => {
+const TmdbTitleCard = ({ id, tmdbId, tvdbId, type }: TmdbTitleCardProps) => {
+  const { hasPermission } = useUser();
+
   const { ref, inView } = useInView({
     triggerOnce: true,
   });
@@ -32,7 +37,14 @@ const TmdbTitleCard = ({ tmdbId, type }: TmdbTitleCardProps) => {
   }
 
   if (!title) {
-    return <TitleCard.Placeholder />;
+    return hasPermission(Permission.ADMIN) ? (
+      <TitleCard.ErrorCard
+        id={id}
+        tmdbId={tmdbId}
+        tvdbId={tvdbId}
+        type={type}
+      />
+    ) : null;
   }
 
   return isMovie(title) ? (