fix(image): adds image size selector & fix placeholder

Author: dvcol

src/components/common/list/ListItem.vue

@@ -137,7 +137,14 @@ const resolvedPoster = computed(() => item?.value?.poster?.value || poster.value
             lazy
             preview-disabled
             :src="resolvedPoster"
-            :preview-src="resolvedPoster"
+            :fallback-src="PosterPlaceholder"
+          />
+          <NImage
+            alt="poster-image-fallback"
+            class="poster fallback"
+            lazy
+            preview-disabled
+            :src="PosterPlaceholder"
             :fallback-src="PosterPlaceholder"
           />
           <ListItemPanel :item="item" :loading="loading">
@@ -234,9 +241,17 @@ const resolvedPoster = computed(() => item?.value?.poster?.value || poster.value
 
   .poster {
     justify-content: center;
-    min-width: 5.5rem;
+    min-width: 5.75rem;
     height: 8rem;
-    background-color: #111;
+
+    &.fallback {
+      position: absolute;
+      background-color: #111;
+    }
+
+    &:not(.fallback) {
+      z-index: layers.$in-front;
+    }
   }
 }
 </style>

src/components/common/list/ListScroll.vue

@@ -103,7 +103,7 @@ const onHover = ({ item, hover }: { item: ListScrollItem; hover: boolean }) => {
       :item-size="listOptions?.itemSize ?? 145"
       :items="items"
       :item-resizable="false"
-      :ignore-item-resize="true"
+      ignore-item-resize
       :visible-items-tag="listOptions?.visibleItemsTag ?? NTimeline"
       :visible-items-props="{
         size: 'large',

src/components/views/history/HistoryComponent.vue

@@ -11,9 +11,10 @@ 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 { useImageStore, useImageStoreRefs } from '~/stores/data/image.store';
 import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
 import { useI18n } from '~/utils';
+import { findClosestMatch } from '~/utils/math.utils';
 
 const { filteredHistory, pagination, loading, pageSize, belowThreshold } =
   useHistoryStoreRefs();
@@ -36,15 +37,19 @@ onDeactivated(() => {
 
 onMounted(() => {
   watch(user, () => {
-    if (active.value) {
-      fetchHistory();
-    } else {
-      clearState();
-    }
+    if (active.value) fetchHistory();
+    else clearState();
   });
 });
 
 const { getImageUrl } = useImageStore();
+const { imageSizes } = useImageStoreRefs();
+
+const size = computed(() =>
+  imageSizes.value?.poster?.length
+    ? findClosestMatch(200, imageSizes.value.poster)
+    : 'original',
+);
 
 const history = computed<ListScrollItem[]>(() => {
   const array = filteredHistory.value;
@@ -57,18 +62,22 @@ const history = computed<ListScrollItem[]>(() => {
     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({
+    if (!_item?.poster && _item.type && _item?.movie?.ids?.tmdb) {
+      _item.poster = getImageUrl(
+        {
           id: _item.movie.ids.tmdb,
           type: _item.type,
-        });
-      } else if (_item?.show?.ids?.tmdb) {
-        _item.poster = getImageUrl({
+        },
+        size.value,
+      );
+    } else if (!_item?.poster && _item.type && _item?.show?.ids?.tmdb) {
+      _item.poster = getImageUrl(
+        {
           id: _item.show.ids.tmdb,
           type: 'show',
-        });
-      }
+        },
+        size.value,
+      );
     }
 
     if (!item.watched_at) return _item;

src/stores/data/image.store.ts

@@ -36,6 +36,11 @@ export const useImageStore = defineStore('data.image', () => {
     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 syncRestoreImageStore = async (seed?: Partial<ImageStore>) => {
@@ -76,19 +81,20 @@ export const useImageStore = defineStore('data.image', () => {
     await syncSaveImageStore();
   };
 
-  const getImageUrl = ({ id, season, episode, type }: ImageQuery) => {
+  const getImageUrl = ({ id, season, episode, type }: ImageQuery, size: string = 'original') => {
     if (!tmdbConfig.value) throw new Error('TmdbConfiguration not initialized');
     const key = [id, season, episode].filter(Boolean).join('-');
     const imageRef = ref<string>(images[type][key]);
     if (!imageRef.value) fetchImageUrl(key, { id, season, episode, type }).catch(console.error);
+
     return computed(() => {
       if (!imageRef.value) return;
       if (!tmdbConfig.value?.images?.secure_base_url) return;
-      return `${tmdbConfig.value.images.secure_base_url}original${imageRef.value}`;
+      return `${tmdbConfig.value.images.secure_base_url}${size}${imageRef.value}`;
     });
   };
 
-  return { initImageStore, getImageUrl };
+  return { initImageStore, getImageUrl, imageSizes };
 });
 
 export const useImageStoreRefs = () => storeToRefs(useImageStore());

src/utils/math.utils.ts

@@ -12,3 +12,20 @@ export const arrayMax = <T>(array: Array<T>, prop: keyof T, filter?: (item: T) =
     }
     return prev;
   });
+
+export const findClosestMatch = (value: number, array: string[]) => {
+  let closestMatch = array[0];
+  let minDifference = Math.abs(value - parseInt(array[0].substring(1), 10));
+
+  for (let i = 1; i < array.length; i += 1) {
+    const currentValue = parseInt(array[i].substring(1), 10);
+    const difference = Math.abs(value - currentValue);
+
+    if (difference < minDifference) {
+      minDifference = difference;
+      closestMatch = array[i];
+    }
+  }
+
+  return closestMatch;
+};