fix(image): simplify image fetching logic

Author: dvcol

src/components/common/list/ListScroll.vue

@@ -146,6 +146,7 @@ const {
   backdrop,
   hidePoster,
   scrollBoundary,
+  posterType,
 } = toRefs(props);
 
 const { floating, reverse } = useAppStateStoreRefs();
@@ -155,6 +156,7 @@ const scrolled = ref(false);
 
 const isCompact = watchMedia('(max-width: 600px)');
 const showBackdrop = computed(() => backdrop?.value && !isCompact.value);
+const overridePanelType = computed(() => (isCompact.value ? 'show' : posterType?.value));
 
 const isTiny = watchMedia('(max-width: 350px)');
 const showPoster = computed(() => !hidePoster?.value && !isTiny.value);
@@ -307,7 +309,7 @@ const listPaddingBottom = computed(() => {
           :hide-time="hideTime"
           :hide-poster="!showPoster"
           :backdrop="showBackdrop"
-          :poster-type="posterType"
+          :poster-type="overridePanelType"
           :content-height="contentHeight"
           :hover="hoverDate === item.date?.current?.toDateString()"
           :scroll-into-view="scrollIntoView?.includes(item.id)"

src/components/common/poster/PosterComponent.vue

@@ -1,7 +1,16 @@
 <script lang="ts" setup>
 import { NImage } from 'naive-ui';
 
-import { computed, onBeforeUnmount, type PropType, ref, toRefs, watch } from 'vue';
+import {
+  computed,
+  onBeforeUnmount,
+  type PropType,
+  reactive,
+  ref,
+  toRaw,
+  toRefs,
+  watch,
+} from 'vue';
 
 import type { PosterItem } from '~/models/poster.model';
 
@@ -36,19 +45,18 @@ const props = defineProps({
 
 const { backdrop, poster, item, size, type } = toRefs(props);
 
-// Local poster is used when the item has no poster ref of its own.
-const localPoster = ref<ImageStoreMedias>();
-
 // cache poster image to prevent flickering
-const cache: Map<string, ImageStoreMedias> = new Map();
+const cache = reactive<Record<string, ImageStoreMedias>>({});
 
-const resolvedPoster = computed(() => {
+const resolvedPoster = computed<string | undefined>(() => {
   if (poster?.value) return poster.value;
   if (item.value.poster) return item.value.poster;
-  let image = (item.value.posterRef ?? localPoster)?.value;
-  if (item?.value?.key) {
-    if (image) cache.set(item.value.key, image);
-    else image = cache.get(item.value.key);
+
+  let image: ImageStoreMedias | undefined = item.value.posterRef?.value;
+  if (!image) {
+    if (!item.value.key) return;
+    const key = [item.value.key, backdrop.value, type?.value].filter(Boolean).join('-');
+    image = cache[key];
   }
   if (!image) return;
   if (typeof image === 'string') return image;
@@ -83,13 +91,16 @@ const onLoad = () => {
 const { getImageUrl } = useImageStore();
 
 const timeout = ref();
-const getPosters = async (_item: PosterItem) => {
+const getPosters = async (
+  _item: PosterItem = item.value,
+  _type: PosterItem['type'] | undefined = type?.value,
+) => {
   if (resolvedPoster.value) return;
 
   const query = _item.getPosterQuery?.();
   if (!query) return;
-  if (type?.value && type.value !== _item.type) {
-    query.type = type.value;
+  if (_type === 'show' && (_item.type === 'season' || _item.type === 'episode')) {
+    query.type = _type;
     if (_item.type === 'episode') delete query.episode;
     if (_item.type === 'season') delete query.season;
   }
@@ -100,17 +111,20 @@ const getPosters = async (_item: PosterItem) => {
     transition.value = true;
   }, 100);
   try {
-    await getImageUrl({
+    const response = await getImageUrl({
       query,
       size: size.value,
-      response: _item.posterRef ?? localPoster,
     });
+    if (!_item?.key || !response) return;
+    const key = [item.value.key, backdrop.value, type?.value].filter(Boolean).join('-');
+    cache[key] = response;
+    console.info('caching', query, key, response, toRaw(cache));
   } catch (error) {
     Logger.error('Failed to fetch poster', error);
   }
 };
 
-watch(item, getPosters, { immediate: true, flush: 'pre' });
+watch([item, type, backdrop], () => getPosters(), { immediate: true, flush: 'pre' });
 
 onBeforeUnmount(() => {
   clearTimeout(timeout.value);

src/components/views/panel/PanelPoster.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { NFlex, NSkeleton } from 'naive-ui';
-import { computed, type PropType, ref, toRefs, Transition } from 'vue';
+import { computed, type PropType, toRefs, Transition } from 'vue';
 
 import type { PosterItem } from '~/models/poster.model';
 import type { ImageQuery, ImageStoreTypes } from '~/stores/data/image.store';
@@ -59,7 +59,9 @@ const posterItem = computed<PosterItem | undefined>(() => {
   };
 
   return {
-    posterRef: ref(),
+    id,
+    key: `${type}-${id}`,
+    type,
     getPosterQuery: () => imageQuery,
   };
 });

src/models/poster.model.ts

@@ -3,8 +3,9 @@ import type { Ref } from 'vue';
 import type { ImageQuery, ImageStoreMedias, ImageStoreTypes } from '~/stores/data/image.store';
 
 export type PosterItem = {
-  type?: ImageStoreTypes;
-  key?: string;
+  id: string | number;
+  key: string;
+  type: ImageStoreTypes;
 
   poster?: string;
   posterRef?: Ref<ImageStoreMedias | undefined>;

src/stores/data/image.store.ts

@@ -2,7 +2,7 @@ import { arrayMax, findClosestMatch } from '@dvcol/common-utils/common/math';
 import { getShortLocale } from '@dvcol/common-utils/common/navigator';
 import { defineStore, storeToRefs } from 'pinia';
 
-import { computed, reactive, type Ref, ref } from 'vue';
+import { computed, reactive, ref } from 'vue';
 
 import type { TmdbConfiguration, TmdbImage } from '@dvcol/tmdb-http-client/models';
 
@@ -232,66 +232,58 @@ export const useImageStore = defineStore(ImageStoreConstants.Store, () => {
   const buildImageUrl = ({ url, baseUrl, type, size }: { url: string; baseUrl: string; type: ImageQuery['type']; size: number | 'original' }) =>
     `${baseUrl}${getImageSize(type, size)}${url}`;
 
-  const setResponseValue = (
-    { image, baseUrl, type, size }: { image: ImageStoreMedias; baseUrl: string; type: ImageQuery['type']; size: number | 'original' },
-    response: Ref<ImageStoreMedias | undefined> = ref(),
-  ): Ref<ImageStoreMedias | undefined> => {
-    if (typeof image === 'string') response.value = buildImageUrl({ url: image, baseUrl, type, size });
-    else {
-      response.value = {
-        poster: image.poster ? buildImageUrl({ url: image.poster, baseUrl, type, size }) : undefined,
-        backdrop: image.backdrop ? buildImageUrl({ url: image.backdrop, baseUrl, type, size }) : undefined,
-      };
-    }
-    return response;
+  const getResponseValue = ({
+    image,
+    baseUrl,
+    type,
+    size,
+  }: {
+    image?: ImageStoreMedias;
+    baseUrl?: string;
+    type: ImageQuery['type'];
+    size: number | 'original';
+  }): ImageStoreMedias | undefined => {
+    if (!baseUrl || !image) return undefined;
+    if (typeof image === 'string') return buildImageUrl({ url: image, baseUrl, type, size });
+
+    return {
+      poster: image.poster ? buildImageUrl({ url: image.poster, baseUrl, type, size }) : undefined,
+      backdrop: image.backdrop ? buildImageUrl({ url: image.backdrop, baseUrl, type, size }) : undefined,
+    };
   };
 
   const getImageResponse = ({
     query,
     size = 300,
-    response = ref(),
   }: {
     query: ImageQuery;
     size?: number | 'original';
-    response?: Ref<ImageStoreMedias | undefined>;
   }): {
-    response: Ref<ImageStoreMedias | undefined>;
     key: string;
     type: ImageQuery['type'];
-    image?: string | ImageStoreMedias;
+    image?: ImageStoreMedias;
     baseUrl?: string;
   } => {
     const { key, type } = getKeyAndType(query);
     const image = images[type][key];
     const baseUrl = tmdbConfig.value?.images?.secure_base_url;
-    if (image && baseUrl) setResponseValue({ image, baseUrl, type, size }, response);
-    return { response, key, type, image, baseUrl };
+    return { key, type, baseUrl, image: getResponseValue({ image, baseUrl, type, size }) };
   };
 
-  const getImageUrl = async ({
-    query,
-    size = 300,
-    response = ref(),
-    fetch = true,
-  }: {
-    query: ImageQuery;
-    size?: number | 'original';
-    response?: Ref<ImageStoreMedias | undefined>;
-    fetch?: boolean;
-  }) => {
+  const getImageUrl = async ({ query, size = 300, fetch = true }: { query: ImageQuery; size?: number | 'original'; fetch?: boolean }) => {
     if (!tmdbConfig.value) throw new Error('TmdbConfiguration not initialized');
     if (!tmdbConfig.value?.images?.secure_base_url) throw new Error('TmdbConfiguration missing secure_base_url');
 
-    const { image, key, type, baseUrl = tmdbConfig.value.images.secure_base_url } = getImageResponse({ query, size, response });
+    const { image, key, type, baseUrl = tmdbConfig.value.images.secure_base_url } = getImageResponse({ query, size });
 
-    if (image || !fetch) return response;
+    if (image || !fetch) return image;
 
     const result = await fetchImageUrl(key, query);
-    if (!result?.image) return response;
-    return setResponseValue({ image: result.image, baseUrl, type, size }, response);
+    if (!result?.image) return undefined;
+    return getResponseValue({ image: result.image, baseUrl, type, size });
   };
 
-  return { initImageStore, getImageUrl, getImageResponse, imageSizes, clearState, buildImageUrl };
+  return { initImageStore, getImageUrl, imageSizes, clearState, buildImageUrl };
 });
 
 export const useImageStoreRefs = () => storeToRefs(useImageStore());