feat(list): adds support to person in lists

Author: dvcol

src/components/common/list/ListItem.vue

@@ -96,7 +96,7 @@ watch(
     if (_item?.poster) return;
     if (!_item?.type) return;
 
-    const type = _item.type === 'movie' ? 'movie' : 'show';
+    const type = ['show', 'episode', 'season'].includes(_item.type) ? 'show' : _item.type;
     if (!_item?.[type]?.ids?.tmdb) {
       console.warn('No tmdb id found', JSON.parse(JSON.stringify(_item?.[_item?.type])));
       return;

src/components/common/list/ListItemPanel.vue

@@ -38,6 +38,7 @@ const type = computed(() =>
 
 const title = computed(() => {
   const media = item.value;
+  if (media.person) return media.person.name;
   if (media.movie) return media.movie.title;
   if (!media.episode) return media.show?.title;
   const number = media.episode.number?.toString().padStart(2, '0');

src/components/common/list/ListScroll.model.ts

@@ -32,7 +32,7 @@ export type ListScrollItem = ListScrollSourceItem & {
   id: string | number | 'load-more';
   index: number;
 
-  type?: 'movie' | 'show' | 'season' | 'episode';
+  type?: 'movie' | 'show' | 'season' | 'episode' | 'person';
 
   poster?: Ref<string | undefined>;
 

src/components/common/list/use-list-scroll.ts

@@ -21,6 +21,7 @@ export const useListScroll = <D extends string, T extends ListScrollSourceItemWi
       else if ('episode' in _item) _item.type = 'episode';
       else if ('season' in _item) _item.type = 'season';
       else if ('show' in _item) _item.type = 'show';
+      else if ('person' in _item) _item.type = 'person';
 
       if (!_item || !dateFn) return _item;
       const _date = typeof dateFn === 'function' ? dateFn(item) : item[dateFn];

src/i18n/en/common/media.json

@@ -14,5 +14,9 @@
   "common__media__type__season": {
     "message": "Season",
     "description": "Media type for seasons"
+  },
+  "common__media__type__person": {
+    "message": "Person",
+    "description": "Media type for people"
   }
 }

src/services/trakt.service.ts

@@ -192,6 +192,13 @@ export class TraktService {
       });
       return response.json();
     },
+
+    async person(person_id: string | number) {
+      const response = await TraktService.tmdbClient.v3.people.images.cached({
+        person_id,
+      });
+      return response.json();
+    },
   };
 
   static async history(query: TraktHistoryGetQuery) {

src/stores/data/image.store.ts

@@ -16,36 +16,58 @@ type ImageStore = {
   show: Record<string, string>;
   season: Record<string, string>;
   episode: Record<string, string>;
+  person: Record<string, string>;
 };
 
 type ImageQuery = {
   id: number;
   season?: number;
   episode?: number;
-  type: 'movie' | 'show' | 'season' | 'episode';
+  type: keyof ImageStore;
 };
 
-type ImagePayload = { posters?: TmdbImage[]; stills?: TmdbImage[] };
+type ImagePayload = { posters?: TmdbImage[]; stills?: TmdbImage[]; profiles?: TmdbImage[] };
+
+const EmptyImageStore: ImageStore = {
+  movie: {},
+  show: {},
+  season: {},
+  episode: {},
+  person: {},
+};
 
 export const useImageStore = defineStore('data.image', () => {
   const tmdbConfig = ref<TmdbConfiguration>();
-  const images = reactive<ImageStore>({
-    movie: {},
-    show: {},
-    season: {},
-    episode: {},
-  });
-
-  const imageSizes = computed(() => ({
-    poster: tmdbConfig.value?.images?.poster_sizes,
-    still: tmdbConfig.value?.images?.still_sizes,
-  }));
-
-  const syncSaveImageStore = debounce((_images = images) => storage.sync.set(`data.image-store`, _images), 1000);
+  const images = reactive<ImageStore>(EmptyImageStore);
+
+  const syncSaveImageStore = debounce(
+    (_images = images) =>
+      Promise.all([
+        storage.sync.set(`data.image-store.movie`, _images.movie),
+        storage.sync.set(`data.image-store.show`, _images.show),
+        storage.sync.set(`data.image-store.season`, _images.season),
+        storage.sync.set(`data.image-store.episode`, _images.episode),
+        storage.sync.set(`data.image-store.person`, _images.person),
+      ]),
+    1000,
+  );
 
   const syncRestoreImageStore = async (seed?: Partial<ImageStore>) => {
-    const restored = await storage.sync.get<ImageStore>(`data.image-store`);
-    if (restored) Object.assign(images, { ...seed, ...restored });
+    const [movie, show, season, episode, person] = await Promise.all([
+      storage.sync.get<Record<string, string>>(`data.image-store.movie`),
+      storage.sync.get<Record<string, string>>(`data.image-store.show`),
+      storage.sync.get<Record<string, string>>(`data.image-store.season`),
+      storage.sync.get<Record<string, string>>(`data.image-store.episode`),
+      storage.sync.get<Record<string, string>>(`data.image-store.person`),
+    ]);
+    if (seed) Object.assign(images, seed);
+    if (movie) Object.assign(images.movie, movie);
+    if (show) Object.assign(images.show, show);
+    if (season) Object.assign(images.season, season);
+    if (episode) Object.assign(images.episode, episode);
+    if (person) Object.assign(images.person, person);
+
+    console.info('Restored Image Store', images);
   };
 
   const initImageStore = async (config?: TmdbConfiguration) => {
@@ -54,6 +76,11 @@ export const useImageStore = defineStore('data.image', () => {
     return syncRestoreImageStore();
   };
 
+  const imageSizes = computed(() => ({
+    poster: tmdbConfig.value?.images?.poster_sizes,
+    still: tmdbConfig.value?.images?.still_sizes,
+  }));
+
   const queue: Record<string, Promise<ImagePayload>> = {};
 
   const queueRequest = async (key: string, request: () => Promise<ImagePayload>) => {
@@ -65,6 +92,8 @@ export const useImageStore = defineStore('data.image', () => {
     let payload: ImagePayload;
     if (type === 'movie') {
       payload = await queueRequest(`${type}-${id}`, () => TraktService.posters.movie(id));
+    } else if (type === 'person') {
+      payload = await queueRequest(`${type}-${id}`, () => TraktService.posters.person(id));
     } else if (type === 'show') {
       payload = await queueRequest(`${type}-${id}`, () => TraktService.posters.show(id));
     } else if (type === 'season' && season) {
@@ -73,7 +102,7 @@ export const useImageStore = defineStore('data.image', () => {
       payload = await queueRequest(`${type}-${id}-${season}-${episode}`, () => TraktService.posters.episode(id, season, episode));
     } else throw new Error('Unsupported type or missing parameters for fetchImageUrl');
 
-    const fetchedImages = payload.posters ?? payload.stills;
+    const fetchedImages = payload.posters ?? payload.stills ?? payload.profiles;
     if (!fetchedImages?.length) {
       console.warn('No images found for', { id, season, episode, type });
       return;