A personal media tracker built on the AT Protocol
opnshelf.xyz
Show crew on movies and handle missing people
+32
-8
+22
-2
apps/web/src/routes/movies/$movieId/$movieName.tsx
+22
-2
apps/web/src/routes/movies/$movieId/$movieName.tsx
···
117
117
: `https://i.pravatar.cc/150?u=${actor.id}`,
118
118
})) || [];
119
119
120
+
const crew =
121
+
movie.credits?.crew?.slice(0, 6).map((person) => ({
122
+
id: person.id,
123
+
name: person.name,
124
+
role: person.job || "",
125
+
photo: person.profile_path
126
+
? `https://image.tmdb.org/t/p/w185${person.profile_path}`
127
+
: `https://i.pravatar.cc/150?u=${person.id}`,
128
+
})) || [];
129
+
120
130
const similarMovies =
121
131
similarMoviesData?.results
122
132
?.filter((m) => m.id !== Number(movieId))
···
239
249
</p>
240
250
</section>
241
251
242
-
<div className="hidden lg:block">
252
+
<div className="hidden space-y-8 lg:block">
243
253
<PersonGrid people={cast} />
254
+
<PersonGrid
255
+
people={crew}
256
+
title="Crew"
257
+
emptyMessage="No crew information available."
258
+
/>
244
259
</div>
245
260
<SimilarMediaGrid items={similarMovies} title="Similar Movies" />
246
261
</div>
···
286
301
</div>
287
302
</div>
288
303
289
-
<div className="mt-8 lg:hidden">
304
+
<div className="mt-8 space-y-8 lg:hidden">
290
305
<PersonGrid people={cast} />
306
+
<PersonGrid
307
+
people={crew}
308
+
title="Crew"
309
+
emptyMessage="No crew information available."
310
+
/>
291
311
</div>
292
312
</div>
293
313
+10
-6
apps/web/src/routes/people/$personId/$personName.tsx
+10
-6
apps/web/src/routes/people/$personId/$personName.tsx
···
40
40
41
41
export const Route = createFileRoute("/people/$personId/$personName")({
42
42
loader: async ({ context, params }) => {
43
-
return context.queryClient.ensureQueryData(
44
-
peopleControllerGetPersonDetailsOptions({
45
-
path: { personId: params.personId },
46
-
}),
47
-
);
43
+
try {
44
+
return await context.queryClient.ensureQueryData(
45
+
peopleControllerGetPersonDetailsOptions({
46
+
path: { personId: params.personId },
47
+
}),
48
+
);
49
+
} catch {
50
+
return null;
51
+
}
48
52
},
49
53
head: ({ loaderData, params }) => {
50
54
const meta = buildPersonPageMeta(loaderData, params.personName);
···
95
99
if (error || !person) {
96
100
return (
97
101
<ErrorState
98
-
message="Failed to load person"
102
+
message={error ? "Failed to load person" : "Person not found"}
99
103
backTo="/"
100
104
backLabel="Back to Dashboard"
101
105
/>