chore(api): adds image cache busting in panels

Author: dvcol

src/components/common/poster/PosterComponent.vue

@@ -43,9 +43,14 @@ const props = defineProps({
     required: false,
     default: 300,
   },
+  force: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
-const { backdrop, poster, item, size, type } = toRefs(props);
+const { backdrop, poster, item, size, type, force } = toRefs(props);
 
 // cache poster image to prevent flickering
 const cache = reactive<Record<string, ImageStoreMedias>>({});
@@ -122,18 +127,14 @@ const getPosters = async (
     transition.value = true;
   }, 100);
   try {
-    const response = await getImageUrl({
-      query,
-      size: size.value,
-    });
+    const response = await getImageUrl({ query, size: size.value, force: force.value });
     if (!_item?.key || !response) return;
     const key = [item.value.key, backdrop.value, type?.value].filter(Boolean).join('-');
     cache[key] = response;
   } catch (error) {
     Logger.error('Failed to fetch poster', error);
   }
 };
-
 watch([item, type, backdrop], () => getPosters(), { immediate: true, flush: 'pre' });
 
 onBeforeUnmount(() => {

src/components/views/panel/PanelPoster.vue

@@ -2,6 +2,8 @@
 import { NFlex, NSkeleton } from 'naive-ui';
 import { computed, type PropType, toRefs, Transition } from 'vue';
 
+import { useRoute } from 'vue-router';
+
 import type { PosterItem } from '~/models/poster.model';
 import type { ImageQuery, ImageStoreTypes } from '~/stores/data/image.store';
 
@@ -81,6 +83,7 @@ const label = computed(() => {
 });
 
 const { openTab } = useLinksStore();
+const route = useRoute();
 </script>
 
 <template>
@@ -92,7 +95,12 @@ const { openTab } = useLinksStore();
       :title="label"
       @click="openTab(link)"
     >
-      <PosterComponent :item="posterItem" :size="size" :backdrop="!portait" />
+      <PosterComponent
+        :item="posterItem"
+        :size="size"
+        :backdrop="!portait"
+        :force="route.query.force === 'true'"
+      />
     </NFlex>
   </Transition>
   <NSkeleton

src/services/trakt.service.ts

@@ -260,49 +260,36 @@ export class TraktService {
   }
 
   static posters = {
-    async movie(movie_id: string | number) {
-      const response = await TraktService.tmdbClient.v3.movies.images.cached({
-        movie_id,
-      });
+    async movie(movie_id: string | number, force?: boolean) {
+      const response = await TraktService.tmdbClient.v3.movies.images.cached({ movie_id }, undefined, { force });
       const data = await response.json();
       if (imageResponseEmpty(data) && shouldEvict(response.cache)) response.cache?.evict?.();
       return data;
     },
 
-    async show(series_id: string | number) {
-      const response = await TraktService.tmdbClient.v3.shows.images.cached({
-        series_id,
-      });
+    async show(series_id: string | number, force?: boolean) {
+      const response = await TraktService.tmdbClient.v3.shows.images.cached({ series_id }, undefined, { force });
       const data = await response.json();
       if (imageResponseEmpty(data) && shouldEvict(response.cache)) response.cache?.evict?.();
       return data;
     },
 
-    async season(series_id: string | number, season_number: number) {
-      const response = await TraktService.tmdbClient.v3.seasons.images.cached({
-        series_id,
-        season_number,
-      });
+    async season(series_id: string | number, season_number: number, force?: boolean) {
+      const response = await TraktService.tmdbClient.v3.seasons.images.cached({ series_id, season_number }, undefined, { force });
       const data = await response.json();
       if (imageResponseEmpty(data) && shouldEvict(response.cache)) response.cache?.evict?.();
       return data;
     },
 
-    async episode(series_id: string | number, season_number: number, episode_number: number) {
-      const response = await TraktService.tmdbClient.v3.episodes.images.cached({
-        series_id,
-        season_number,
-        episode_number,
-      });
+    async episode(series_id: string | number, season_number: number, episode_number: number, force?: boolean) {
+      const response = await TraktService.tmdbClient.v3.episodes.images.cached({ series_id, season_number, episode_number }, undefined, { force });
       const data = await response.json();
       if (imageResponseEmpty(data) && shouldEvict(response.cache)) response.cache?.evict?.();
       return data;
     },
 
-    async person(person_id: string | number) {
-      const response = await TraktService.tmdbClient.v3.people.images.cached({
-        person_id,
-      });
+    async person(person_id: string | number, force?: boolean) {
+      const response = await TraktService.tmdbClient.v3.people.images.cached({ person_id }, undefined, { force });
       const data = await response.json();
       if (imageResponseEmpty(data) && shouldEvict(response.cache)) response.cache?.evict?.();
       return data;

src/stores/data/image.store.ts

@@ -147,6 +147,7 @@ export const useImageStore = defineStore(ImageStoreConstants.Store, () => {
       if (!(key in queue)) queue[key] = request();
       const response = await queue[key];
       delete imageErrors[type]?.[key];
+      delete queue[key];
       return response;
     } catch (error) {
       if (error instanceof Response && error.status === 404) {
@@ -170,18 +171,19 @@ export const useImageStore = defineStore(ImageStoreConstants.Store, () => {
   const fetchImageUrl = async (
     key: string,
     { id, season, episode, type }: ImageQuery,
+    force?: boolean,
   ): Promise<{ image: ImageStoreMedias; key: string; type: ImageQuery['type'] } | undefined> => {
     let payload: ImagePayload;
     if (type === 'movie') {
-      payload = await queueRequest({ key, type }, () => TraktService.posters.movie(id));
+      payload = await queueRequest({ key, type }, () => TraktService.posters.movie(id, force));
     } else if (type === 'person') {
-      payload = await queueRequest({ key, type }, () => TraktService.posters.person(id));
+      payload = await queueRequest({ key, type }, () => TraktService.posters.person(id, force));
     } else if (type === 'episode' && season !== undefined && episode !== undefined) {
-      payload = await queueRequest({ key, type }, () => TraktService.posters.episode(id, season, episode));
+      payload = await queueRequest({ key, type }, () => TraktService.posters.episode(id, season, episode, force));
     } else if (type === 'season' && season !== undefined) {
-      payload = await queueRequest({ key, type }, () => TraktService.posters.season(id, season));
+      payload = await queueRequest({ key, type }, () => TraktService.posters.season(id, season, force));
     } else if (type === 'show') {
-      payload = await queueRequest({ key, type }, () => TraktService.posters.show(id));
+      payload = await queueRequest({ key, type }, () => TraktService.posters.show(id, force));
     } else {
       Logger.error('Unsupported type or missing parameters for fetchImageUrl', { key, id, season, episode, type });
       throw new Error('Unsupported type or missing parameters for fetchImageUrl');
@@ -191,7 +193,7 @@ export const useImageStore = defineStore(ImageStoreConstants.Store, () => {
       const sType = 'show';
       const sKey = `${sType}-${id}`;
       if (images[sType][sKey]) return { image: images[sType][sKey], key: sKey, type: sType };
-      return fetchImageUrl(sKey, { id, type: sType });
+      return fetchImageUrl(sKey, { id, type: sType }, force);
     }
 
     if (['movie', 'show'].includes(type)) {
@@ -270,15 +272,25 @@ export const useImageStore = defineStore(ImageStoreConstants.Store, () => {
     return { key, type, baseUrl, image: getResponseValue({ image, baseUrl, type, size }) };
   };
 
-  const getImageUrl = async ({ query, size = 300, fetch = true }: { query: ImageQuery; size?: number | 'original'; fetch?: boolean }) => {
+  const getImageUrl = async ({
+    query,
+    size = 300,
+    fetch = true,
+    force,
+  }: {
+    query: ImageQuery;
+    size?: number | 'original';
+    fetch?: boolean;
+    force?: 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 });
 
-    if (image || !fetch) return image;
+    if (!force && (image || !fetch)) return image;
 
-    const result = await fetchImageUrl(key, query);
+    const result = await fetchImageUrl(key, query, force);
     if (!result?.image) return undefined;
     return getResponseValue({ image: result.image, baseUrl, type, size });
   };