fix(images): clear cache on empty staled request & fix cache eviction

Author: dvcol

src/components/views/settings/SettingsCache.vue

@@ -9,6 +9,7 @@ import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
 
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
+import { useImageStore } from '~/stores/data/image.store';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 import { logger } from '~/stores/settings/log.store';
 import { useI18n } from '~/utils/i18n.utils';
@@ -38,8 +39,13 @@ const onClick = async (fn: () => unknown, index: number) => {
   }
 };
 
+const { clearState: clearImageStore } = useImageStore();
+
 const evictScopes = [
-  { label: i18n('evict_images'), click: TraktService.evict.tmdb },
+  {
+    label: i18n('evict_images'),
+    click: () => Promise.all([clearImageStore(), TraktService.evict.tmdb()]),
+  },
   {
     label: i18n('evict_progress'),
     click: () =>

src/models/poster.model.ts

@@ -1,3 +1,4 @@
+import type { TmdbImage } from '@dvcol/tmdb-http-client/models';
 import type { Ref } from 'vue';
 import type { ImageQuery, ImageStoreMedias, ImageStoreTypes } from '~/stores/data/image.store';
 
@@ -8,3 +9,10 @@ export type PosterItem = {
   posterRef?: Ref<ImageStoreMedias | undefined>;
   getPosterQuery?: () => ImageQuery | undefined;
 };
+
+export type ImagePayload = {
+  posters?: TmdbImage[]; // movie, show, season
+  backdrops?: TmdbImage[]; // movie or shows
+  stills?: TmdbImage[]; // episodes
+  profiles?: TmdbImage[]; // profiles
+};

src/services/trakt.service.ts

@@ -39,6 +39,7 @@ import type {
 } from '@dvcol/trakt-http-client/models';
 
 import type { TvdbApiResponse } from '@dvcol/tvdb-http-client/models';
+import type { ImagePayload } from '~/models/poster.model';
 import type { ProgressItem } from '~/models/progress.model';
 import type { SettingsAuth, UserSetting } from '~/models/trakt-service.model';
 
@@ -55,7 +56,7 @@ import { useUserSettingsStore } from '~/stores/settings/user.store';
 import { createTab } from '~/utils/browser/browser.utils';
 import { CachePrefix, ChromeCacheStore } from '~/utils/cache.utils';
 
-export const shouldEvict = (date?: string | number | Date, cache?: CacheResponse<unknown>): boolean => {
+const shouldEvict = (cache?: CacheResponse<unknown>, date?: string | number | Date): boolean => {
   // no cache skip
   if (!cache?.evict) return false;
   // cached today skip
@@ -70,6 +71,12 @@ export const shouldEvict = (date?: string | number | Date, cache?: CacheResponse
   return new Date(date) > new Date();
 };
 
+const imageResponseEmpty = (payload: ImagePayload) => {
+  return Object.values(payload)
+    .filter(Array.isArray)
+    .every(v => !v?.length);
+};
+
 export class TraktService {
   private static traktClient: TraktClient;
   private static tmdbClient: TmdbClient;
@@ -240,22 +247,28 @@ export class TraktService {
       const response = await TraktService.tmdbClient.v3.movies.images.cached({
         movie_id,
       });
-      return response.json();
+      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,
       });
-      return response.json();
+      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,
       });
-      return response.json();
+      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) {
@@ -264,14 +277,18 @@ export class TraktService {
         season_number,
         episode_number,
       });
-      return response.json();
+      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,
       });
-      return response.json();
+      const data = await response.json();
+      if (imageResponseEmpty(data) && shouldEvict(response.cache)) response.cache?.evict?.();
+      return data;
     },
   };
 
@@ -414,36 +431,36 @@ export class TraktService {
     async summary(id: string | number) {
       const response = await TraktService.traktClient.shows.summary.cached({ id, extended: 'full' });
       const data = await response.json();
-      if (shouldEvict(data?.first_aired, response?.cache)) response.cache?.evict?.();
+      if (shouldEvict(response?.cache, data?.first_aired)) response.cache?.evict?.();
       return data as TraktShowExtended;
     },
 
     async season(id: string | number, season: number) {
       const response = await TraktService.traktClient.seasons.season.cached({ id, season });
       const data = await response.json();
-      if (data.some(e => shouldEvict(e?.first_aired, response?.cache))) response.cache?.evict?.();
+      if (data.some(e => shouldEvict(response?.cache, e?.first_aired))) response.cache?.evict?.();
       return data as TraktEpisodeShort[];
     },
 
     async seasons(id: string | number) {
       const response = await TraktService.traktClient.seasons.summary.cached({ id, extended: 'full' });
       const data = await response.json();
-      if (data.some(s => shouldEvict(s?.first_aired, response?.cache))) response.cache?.evict?.();
+      if (data.some(s => shouldEvict(response?.cache, s?.first_aired))) response.cache?.evict?.();
       return data as TraktSeasonExtended[];
     },
 
     async episode({ id, season, episode }: { id: string | number; season: number; episode: number }) {
       const response = await TraktService.traktClient.episodes.summary.cached({ id, season, episode, extended: 'full' });
       const data = await response.json();
-      if (shouldEvict(data?.first_aired, response?.cache)) response.cache?.evict?.();
+      if (shouldEvict(response?.cache, data?.first_aired)) response.cache?.evict?.();
       return data as TraktEpisodeExtended;
     },
   };
 
   static async movie(id: string | number) {
     const response = await this.traktClient.movies.summary.cached({ id, extended: 'full' });
     const data = await response.json();
-    if (shouldEvict(data?.released, response?.cache)) response.cache?.evict?.();
+    if (shouldEvict(response?.cache, data?.released)) response.cache?.evict?.();
     return data as TraktMovieExtended;
   }
 

src/stores/data/image.store.ts

@@ -5,6 +5,8 @@ import { computed, reactive, type Ref, ref } from 'vue';
 
 import type { TmdbConfiguration, TmdbImage } from '@dvcol/tmdb-http-client/models';
 
+import type { ImagePayload } from '~/models/poster.model';
+
 import { ErrorService } from '~/services/error.service';
 import { TraktService } from '~/services/trakt.service';
 import { logger } from '~/stores/settings/log.store';
@@ -13,6 +15,7 @@ import { getShortLocale } from '~/utils/browser/browser.utils';
 import { CachePrefix } from '~/utils/cache.utils';
 import { debounce } from '~/utils/debounce.utils';
 import { ErrorCount, type ErrorDictionary } from '~/utils/retry.utils';
+import { clearProxy } from '~/utils/vue.utils';
 
 type ImageStoreMedia = {
   poster?: string;
@@ -55,13 +58,6 @@ export type ImageQuery = {
   type: ImageStoreTypes;
 };
 
-type ImagePayload = {
-  posters?: TmdbImage[]; // movie, show, season
-  backdrops?: TmdbImage[]; // movie or shows
-  stills?: TmdbImage[]; // episodes
-  profiles?: TmdbImage[]; // profiles
-};
-
 const emptyImageStore = {
   movie: {},
   show: {},
@@ -123,6 +119,16 @@ export const useImageStore = defineStore(ImageStoreConstants.Store, () => {
     if (person) Object.assign(images.person, person);
   };
 
+  const clearState = async () => {
+    clearProxy(images.movie);
+    clearProxy(images.show);
+    clearProxy(images.season);
+    clearProxy(images.episode);
+    clearProxy(images.person);
+    clearProxy(imageErrors);
+    return saveState().catch(err => logger.error('Failed to save image store', err));
+  };
+
   const initImageStore = async (config?: TmdbConfiguration) => {
     if (!config) config = await TraktService.tmdbConfiguration();
     tmdbConfig.value = config;
@@ -249,7 +255,7 @@ export const useImageStore = defineStore(ImageStoreConstants.Store, () => {
     return setResponseValue({ image: result.image, baseUrl, type, size }, response);
   };
 
-  return { initImageStore, getImageUrl, imageSizes };
+  return { initImageStore, getImageUrl, imageSizes, clearState };
 });
 
 export const useImageStoreRefs = () => storeToRefs(useImageStore());