feat(summary): displays episode counts for cast

Fixes #2125

Author: seferturan

projects/client/src/lib/requests/_internal/mapToMediaCredits.ts

@@ -11,6 +11,7 @@ import type {
   PeopleShowCreditsResponse,
   ShowResponse,
 } from '@trakt/api';
+import type { MediaEntry } from '../models/MediaEntry.ts';
 
 type MediaCreditsResponse =
   | PeopleMovieCreditsResponse
@@ -49,6 +50,19 @@ function mapToMediaEntry(entryResponse: EntryResponse) {
 type CrewResponse = NonNullable<MediaCreditsResponse['crew']>;
 type CrewEntry = CrewResponse[string][number];
 
+type CastResponse = NonNullable<MediaCreditsResponse['cast']>;
+type CastEntry = CastResponse[number];
+
+function toCredit(media: MediaEntry, entry: CrewEntry | CastEntry) {
+  return {
+    media,
+    key: media.key,
+    ...('episode_count' in entry && entry.episode_count != null
+      ? { episodeCount: entry.episode_count }
+      : {}),
+  };
+}
+
 export function mapToMediaCredits(
   response: MediaCreditsResponse,
 ): MediaCredits {
@@ -66,10 +80,9 @@ export function mapToMediaCredits(
     const media = mapToMediaEntry(entry);
 
     entries?.push({
-      media,
+      ...toCredit(media, entry),
       type: 'cast',
       character: entry.character,
-      key: media.key,
     });
   });
 
@@ -78,10 +91,9 @@ export function mapToMediaCredits(
     const mediaEntries = entries.map((entry: CrewEntry) => {
       const media = mapToMediaEntry(entry);
       return {
-        media,
+        ...toCredit(media, entry),
         type: 'crew',
         job: entry.job,
-        key: media.key,
       };
     });
 

projects/client/src/lib/requests/_internal/mapToMediaCrew.ts

@@ -13,23 +13,29 @@ export const EMPTY_CREW: Readonly<MediaCrew> = {
   cast: [],
 };
 
+function toMember(response: CrewResponse | CastResponse) {
+  return ({
+    name: response.person.name,
+    key: response.person.ids.slug,
+    ...(response.episode_count != null ? { episodeCount: response.episode_count } : {}),
+  });
+}
+
 function toCrewMember(
   crewResponse: CrewResponse,
 ): CrewMember {
   return ({
+    ...toMember(crewResponse),
     jobs: crewResponse.jobs,
-    name: crewResponse.person.name,
-    key: crewResponse.person.ids.slug,
   });
 }
 
 function toCastMember(
   castResponse: CastResponse,
 ): CastMember {
   return ({
-    name: castResponse.person.name,
+    ...toMember(castResponse),
     characterName: castResponse.characters.at(0) ?? '',
-    key: castResponse.person.ids.slug,
     headshot: mapToHeadshot(castResponse.person.images),
   });
 }

projects/client/src/lib/requests/models/MediaCredits.ts

@@ -5,6 +5,7 @@ import { crewPositionSchema } from './CrewPosition.ts';
 const BaseCreditSchema = z.object({
   media: MediaEntrySchema,
   key: z.string(),
+  episodeCount: z.number().optional(),
 });
 
 const CharacterSchema = BaseCreditSchema.extend({

projects/client/src/lib/requests/models/MediaCrew.ts

@@ -3,17 +3,19 @@ import { ImageUrlsSchema } from './ImageUrlsSchema.ts';
 
 export type Job = string;
 
-export const CrewMemberSchema = z.object({
-  jobs: z.array(z.string()),
+const baseSchema = z.object({
   name: z.string(),
   key: z.string(),
+  episodeCount: z.number().optional(),
+});
+
+export const CrewMemberSchema = baseSchema.extend({
+  jobs: z.array(z.string()),
 });
 export type CrewMember = z.infer<typeof CrewMemberSchema>;
 
-export const CastMemberSchema = z.object({
-  name: z.string(),
+export const CastMemberSchema = baseSchema.extend({
   characterName: z.string(),
-  key: z.string(),
   headshot: z.object({
     url: ImageUrlsSchema,
   }),

projects/client/src/lib/sections/lists/components/CastMemberItem.svelte

@@ -2,6 +2,8 @@
   import CardCover from "$lib/components/card/CardCover.svelte";
   import CardFooter from "$lib/components/card/CardFooter.svelte";
   import Link from "$lib/components/link/Link.svelte";
+  import EpisodeCountTag from "$lib/components/media/tags/EpisodeCountTag.svelte";
+  import { TagIntlProvider } from "$lib/components/media/tags/TagIntlProvider";
   import PersonCard from "$lib/components/people/card/PersonCard.svelte";
   import * as m from "$lib/features/i18n/messages";
   import type { CastMember } from "$lib/requests/models/MediaCrew";
@@ -20,12 +22,23 @@
   });
 </script>
 
+{#snippet tag()}
+  {#if type === "show" && castMember.episodeCount}
+    <EpisodeCountTag
+      count={castMember.episodeCount}
+      i18n={TagIntlProvider}
+      type="tag"
+    />
+  {/if}
+{/snippet}
+
 <PersonCard>
   <Link focusable={false} href={UrlBuilder.people(castMember.key, params)}>
     <CardCover
       title={castMember.name}
       src={castMember.headshot.url.thumb}
       alt={`${m.image_alt_person_headshot({ person: castMember.name })}`}
+      {tag}
     />
   </Link>
   <CardFooter>

projects/client/src/lib/sections/lists/components/CreditMediaItem.svelte

@@ -1,4 +1,8 @@
 <script lang="ts">
+  import AirDateTag from "$lib/components/media/tags/AirDateTag.svelte";
+  import DurationTag from "$lib/components/media/tags/DurationTag.svelte";
+  import EpisodeCountTag from "$lib/components/media/tags/EpisodeCountTag.svelte";
+  import { TagIntlProvider } from "$lib/components/media/tags/TagIntlProvider";
   import * as m from "$lib/features/i18n/messages";
   import type { MediaCredit } from "$lib/requests/models/MediaCredits";
   import { toTranslatedJob } from "$lib/utils/formatting/string/toTranslatedJob";
@@ -23,14 +27,31 @@
 
     return toTranslatedJob(job);
   };
+
+  const media = $derived(mediaCredit.media);
 </script>
 
+{#snippet tag()}
+  <AirDateTag i18n={TagIntlProvider} airDate={media.airDate} />
+
+  {#if media.type === "show" && mediaCredit.episodeCount}
+    <EpisodeCountTag i18n={TagIntlProvider} count={mediaCredit.episodeCount} />
+  {/if}
+
+  {#if media.type === "movie"}
+    {#if media.airDate < new Date()}
+      <DurationTag i18n={TagIntlProvider} runtime={media.runtime} />
+    {/if}
+  {/if}
+{/snippet}
+
 <DefaultMediaItem
-  type={mediaCredit.media.type}
-  media={mediaCredit.media}
+  type={media.type}
+  {media}
   {source}
   variant="credit"
   {mode}
+  {tag}
   role={mediaCredit.type === "cast"
     ? toCharacter(mediaCredit.character)
     : toJob(mediaCredit.job)}