feat(image): init image store

Author: dvcol

src/components/common/list/ListItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { NFlex, NImage, NSkeleton, NTime, NTimelineItem } from 'naive-ui';
 
-import { computed, type PropType } from 'vue';
+import { computed, type PropType, toRefs } from 'vue';
 
 import type { ListScrollItem } from '~/components/common/list/ListScroll.model';
 
@@ -59,26 +59,31 @@ const emit = defineEmits<{
   (e: 'onHover', event: { index: number; item: ListScrollItem; hover: boolean }): void;
 }>();
 
-const onHover = (hover: boolean) => {
-  emit('onHover', { index: props.index, item: props.item, hover });
+const { item, size, index, noHeader, nextHasHeader, poster } = toRefs(props);
+
+const onHover = (_hover: boolean) => {
+  emit('onHover', { index: index?.value, item: item?.value, hover: _hover });
 };
 
-const noHeader = computed(() => props.noHeader || props.item.date?.sameDayAsPrevious);
+const noHead = computed(() => noHeader.value || item?.value?.date?.sameDayAsPrevious);
 const nextHasHead = computed(
-  () => props.nextHasHeader || !props.item.date?.sameDayAsNext,
+  () => nextHasHeader.value || !item?.value?.date?.sameDayAsNext,
 );
-const date = computed(() => props.item.date?.current);
+const date = computed(() => item?.value?.date?.current);
+
 const year = new Date().getFullYear();
 const sameYear = computed(() => date.value?.getFullYear() === year);
-const loading = computed(() => props.item.loading);
+const loading = computed(() => item?.value?.loading);
+
+const resolvedPoster = computed(() => item?.value?.poster?.value || poster.value);
 </script>
 
 <template>
   <NTimelineItem
     :key="item.id"
     class="timeline-item"
     :class="{
-      'no-header': noHeader,
+      'no-header': noHead,
       'next-has-header': nextHasHead,
       'show-date': !hideDate,
     }"
@@ -98,7 +103,7 @@ const loading = computed(() => props.item.loading);
     <template #default>
       <NFlex
         class="content"
-        :class="{ 'no-border': noHeader }"
+        :class="{ 'no-border': noHead }"
         size="small"
         :theme-overrides="{ gapSmall: '0' }"
         :wrap="false"
@@ -113,7 +118,7 @@ const loading = computed(() => props.item.loading);
           size="small"
           :theme-overrides="{ gapSmall: '0.25rem' }"
         >
-          <template v-if="date && !noHeader && !loading">
+          <template v-if="date && !noHead && !loading">
             <NTime class="month" :time="date" format="MMM" />
             <NTime class="day" :time="date" format="dd" />
             <NTime class="week" :time="date" format="eee" />
@@ -131,8 +136,8 @@ const loading = computed(() => props.item.loading);
             class="poster"
             lazy
             preview-disabled
-            :src="poster"
-            :preview-src="poster"
+            :src="resolvedPoster"
+            :preview-src="resolvedPoster"
             :fallback-src="PosterPlaceholder"
           />
           <ListItemPanel :item="item" :loading="loading">
@@ -229,7 +234,7 @@ const loading = computed(() => props.item.loading);
 
   .poster {
     justify-content: center;
-    width: 5.5rem;
+    min-width: 5.5rem;
     height: 8rem;
     background-color: #111;
   }

src/components/common/list/ListItemPanel.vue

@@ -6,6 +6,9 @@ import { computed, type PropType, toRefs } from 'vue';
 import type { ListScrollItem } from '~/components/common/list/ListScroll.model';
 
 import PosterPlaceholder from '~/assets/images/poster-placholder.webp';
+import { useI18n } from '~/utils';
+
+const i18n = useI18n('list-item-panel');
 
 const props = defineProps({
   item: {
@@ -25,6 +28,10 @@ const props = defineProps({
 
 const { item } = toRefs(props);
 
+const type = computed(() =>
+  item.value.type ? i18n(item.value.type, 'common', 'media', 'type') : item.value.type,
+);
+
 const title = computed(() => {
   const media = item.value;
   if (media.movie) return media.movie.title;
@@ -42,13 +49,6 @@ const content = computed(() => {
 
 const currentDate = computed(() => item.value.date?.current);
 const date = computed(() => currentDate.value?.toLocaleTimeString());
-
-const type = computed(() => {
-  const media = item.value;
-  if ('movie' in media) return 'Movie';
-  if (!media.episode) return 'Show';
-  return 'Episode';
-});
 </script>
 
 <template>

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

@@ -1,5 +1,9 @@
 import type { NVirtualList, VirtualListInst } from 'naive-ui';
 import type { Ref } from 'vue';
+import type { TraktEpisode } from '~/models/trakt/trakt-episode.model';
+import type { TraktMovie } from '~/models/trakt/trakt-movie.model';
+import type { TraktSeason } from '~/models/trakt/trakt-season.model';
+import type { TraktShow } from '~/models/trakt/trakt-show.model';
 
 export type VirtualListRef = VirtualListInst & InstanceType<typeof NVirtualList>;
 export type VirtualListProps = {
@@ -17,9 +21,14 @@ export type ListScrollItem = {
   id: string | number;
   index: number;
 
-  movie?: { title: string; year: number };
-  show?: { title: string; year: number };
-  episode?: { title: string; season: number; number: number };
+  type?: 'movie' | 'show' | 'season' | 'episode';
+
+  movie?: TraktMovie<'short'>;
+  show?: TraktShow<'short'>;
+  season?: TraktSeason<'short'>;
+  episode?: TraktEpisode<'short'>;
+
+  poster?: Ref<string | undefined>;
 
   loading?: boolean;
   date?: {

src/components/views/history/HistoryComponent.vue

@@ -11,6 +11,7 @@ import type {
 import FloatingButton from '~/components/common/buttons/FloatingButton.vue';
 import ListScroll from '~/components/common/list/ListScroll.vue';
 import { useHistoryStore, useHistoryStoreRefs } from '~/stores/data/history.store';
+import { useImageStore } from '~/stores/data/image.store';
 import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
 import { useI18n } from '~/utils';
 
@@ -43,11 +44,33 @@ onMounted(() => {
   });
 });
 
+const { getImageUrl } = useImageStore();
+
 const history = computed<ListScrollItem[]>(() => {
   const array = filteredHistory.value;
   if (!array.length) return [];
   return array.map((item, index) => {
     const _item: ListScrollItem = { ...item, index, loading: item.id < 0 };
+
+    if ('movie' in _item) _item.type = 'movie';
+    else if ('episode' in _item) _item.type = 'episode';
+    else if ('season' in _item) _item.type = 'season';
+    else if ('show' in _item) _item.type = 'show';
+
+    if (!_item?.poster && _item.type) {
+      if (_item?.movie?.ids?.tmdb) {
+        _item.poster = getImageUrl({
+          id: _item.movie.ids.tmdb,
+          type: _item.type,
+        });
+      } else if (_item?.show?.ids?.tmdb) {
+        _item.poster = getImageUrl({
+          id: _item.show.ids.tmdb,
+          type: 'show',
+        });
+      }
+    }
+
     if (!item.watched_at) return _item;
 
     const date: ListScrollItem['date'] = { current: new Date(item.watched_at) };
@@ -61,6 +84,7 @@ const history = computed<ListScrollItem[]>(() => {
       date.previous?.toLocaleDateString() === date.current?.toLocaleDateString();
     date.sameDayAsNext =
       date.next?.toLocaleDateString() === date.current?.toLocaleDateString();
+
     return { ..._item, date };
   });
 });

src/i18n/en/common/media.json

@@ -0,0 +1,18 @@
+{
+  "common__media__type__movie": {
+    "message": "Movie",
+    "description": "Media type for movies"
+  },
+  "common__media__type__show": {
+    "message": "Show",
+    "description": "Media type for shows"
+  },
+  "common__media__type__episode": {
+    "message": "Episode",
+    "description": "Media type for episodes"
+  },
+  "common__media__type__season": {
+    "message": "Season",
+    "description": "Media type for seasons"
+  }
+}

src/models/tmdb/tmdb-client.model.ts

@@ -1,15 +1,16 @@
+import type {
+  BaseOptions,
+  BaseQuery,
+  BaseRequest,
+  BaseSettings,
+  BaseTemplate,
+  BaseTemplateOptions,
+  ResponseOrTypedResponse,
+} from '~/services/common/base-client';
+
 import type { RecursiveRecord } from '~/utils/typescript.utils';
 
-import {
-  type BaseOptions,
-  type BaseQuery,
-  type BaseRequest,
-  type BaseSettings,
-  type BaseTemplate,
-  type BaseTemplateOptions,
-  ClientEndpoint,
-  type ResponseOrTypedResponse,
-} from '~/services/common/base-client';
+import { ClientEndpoint } from '~/services/common/base-client';
 
 export type TmdbClientSettings = BaseSettings<{
   /** The consumer client identifier */

src/models/trakt/trakt-client.model.ts

@@ -1,4 +1,5 @@
 import type {
+  BaseCacheOption,
   BaseInit,
   BaseOptions,
   BaseQuery,
@@ -98,13 +99,19 @@ export interface TraktClientEndpoint<Parameter extends TraktApiParams = Record<s
   (param?: Parameter, init?: TraktApiInit): Promise<TraktApiResponse<Response>>;
 }
 
+export type TraktClientCachedEndpoint<Parameter extends TraktApiParams = Record<string, never>, Response = unknown> = (
+  param?: Parameter,
+  init?: BaseInit,
+  cacheOptions?: BaseCacheOption,
+) => Promise<TraktApiResponse<Response>>;
+
 // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging  -- To allow type extension
 export class TraktClientEndpoint<
   Parameter extends TraktApiParams = Record<string, never>,
   Response = unknown,
   Cache extends boolean = true,
 > extends ClientEndpoint<Parameter, Response, Cache, TraktApiTemplateOptions<keyof Parameter>> {
-  declare cached: Cache extends true ? Omit<this, 'cached'> & TraktClientEndpoint<Parameter, Response> : never;
+  declare cached: Cache extends true ? Omit<this, 'cached'> & TraktClientCachedEndpoint<Parameter, Response> : never;
 }
 
 export type TraktApiRequest = BaseRequest;

src/models/trakt/trakt-history.model.ts

@@ -1,3 +1,4 @@
+import type { TraktApiExtended, TraktApiParamsExtended, TraktApiParamsPagination } from '~/models/trakt/trakt-client.model';
 import type { Any, EntityTypes } from '~/models/trakt/trakt-entity.model';
 import type { TraktEpisode } from '~/models/trakt/trakt-episode.model';
 import type { TraktMovie } from '~/models/trakt/trakt-movie.model';
@@ -66,3 +67,14 @@ export type TraktHistoryRemoved = {
     ids: number[];
   };
 };
+
+export type TraktHistoryGetQuery = {
+  /** Trakt ID for a specific item. */
+  id?: string;
+  type?: 'movies' | 'shows' | 'seasons' | 'episodes';
+  /** Timestamp in ISO 8601 GMT format (YYYY-MM-DD'T'hh:mm:ss.sssZ) */
+  start_at?: string;
+  /** Timestamp in ISO 8601 GMT format (YYYY-MM-DD'T'hh:mm:ss.sssZ) */
+  end_at?: string;
+} & TraktApiParamsExtended<typeof TraktApiExtended.Full> &
+  TraktApiParamsPagination;

src/services/common/base-client.ts

@@ -98,15 +98,15 @@ export type TypedResponse<T> = Omit<Response, 'json'> & {
 
 export type ResponseOrTypedResponse<T = unknown> = T extends never ? Response : TypedResponse<T>;
 
-type ClientEndpointCall<Parameter extends Record<string, never> = Record<string, never>, Response = unknown> = (
+type ClientEndpointCall<Parameter extends RecursiveRecord = Record<string, never>, Response = unknown> = (
   param?: Parameter,
   init?: BaseInit,
 ) => Promise<ResponseOrTypedResponse<Response>>;
 
 export interface ClientEndpoint<Parameter extends RecursiveRecord = Record<string, never>, Response = unknown> {
   (param?: Parameter, init?: BaseInit): Promise<ResponseOrTypedResponse<Response>>;
 }
-type BaseCacheOption = { force?: boolean; retention?: number; evictOnError?: boolean };
+export type BaseCacheOption = { force?: boolean; retention?: number; evictOnError?: boolean };
 
 type ClientEndpointCache<Parameter extends RecursiveRecord = Record<string, never>, Response = unknown> = (
   param?: Parameter,

src/services/trakt-client/api/endpoints/sync.endpoint.ts

@@ -9,6 +9,7 @@ import type {
 import type {
   TraktHistory,
   TraktHistoryAdded,
+  TraktHistoryGetQuery,
   TraktHistoryRemoved,
   TraktHistoryRemovedRequest,
   TraktHistoryRequest,
@@ -299,19 +300,7 @@ export const sync = {
    * @see [get-watched-history]{@link https://trakt.docs.apiary.io/#reference/sync/get-history/get-watched-history}
    */
   history: {
-    get: new TraktClientEndpoint<
-      {
-        /** Trakt ID for a specific item. */
-        id?: string;
-        type?: 'movies' | 'shows' | 'seasons' | 'episodes';
-        /** Timestamp in ISO 8601 GMT format (YYYY-MM-DD'T'hh:mm:ss.sssZ) */
-        start_at?: string;
-        /** Timestamp in ISO 8601 GMT format (YYYY-MM-DD'T'hh:mm:ss.sssZ) */
-        end_at?: string;
-      } & TraktApiParamsExtended<typeof TraktApiExtended.Full> &
-        TraktApiParamsPagination,
-      TraktHistory[]
-    >({
+    get: new TraktClientEndpoint<TraktHistoryGetQuery, TraktHistory[]>({
       method: HttpMethod.GET,
       url: '/sync/history/:type/:id?start_at=&end_at=',
       opts: {