feat(poster): parametrize image format

Author: dvcol

src/components/views/calendar/CalendarComponent.vue

@@ -10,6 +10,7 @@ import { Route } from '~/models/router.model';
 import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import { useActivityStore } from '~/stores/data/activity.store';
 import { useCalendarStore, useCalendarStoreRefs } from '~/stores/data/calendar.store';
+import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
 import { useCalendar, useCenterButton } from '~/utils/calendar.utils';
 import { useI18n } from '~/utils/i18n.utils';
 import { useActiveAndDocumentVisible, watchUserChange } from '~/utils/store.utils';
@@ -33,6 +34,9 @@ const { listRef, onClick, onScrollTop, onScrollBottom, reload } = useCalendar({
   fetchData: fetchCalendar,
 });
 
+const { getImageSettings } = useExtensionSettingsStore();
+const imageSettings = getImageSettings(Route.Calendar);
+
 watch(center, (_is, _was) => {
   if (new Date(_is).toLocaleDateString() === new Date(_was).toLocaleDateString()) return;
   reload();
@@ -72,7 +76,8 @@ const { onItemClick } = usePanelItem();
       ref="listRef"
       :items="list"
       :loading="loading"
-      backdrop
+      :backdrop="imageSettings.backdrop"
+      :poster-type="imageSettings.type"
       show-played
       show-collected
       show-tag-loader

src/components/views/history/HistoryComponent.vue

@@ -15,6 +15,7 @@ import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import { useActivityStore } from '~/stores/data/activity.store';
 import { useHistoryStore, useHistoryStoreRefs } from '~/stores/data/history.store';
 import { useWatchingStoreRefs } from '~/stores/data/watching.store';
+import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
 import { useI18n } from '~/utils/i18n.utils';
 import { useActiveAndDocumentVisible, watchUserChange } from '~/utils/store.utils';
 import { useWatchActivated } from '~/utils/vue.utils';
@@ -48,6 +49,9 @@ const { onScroll, onUpdated, onLoadMore } = useListScrollEvents(fetchHistory, {
   active,
 });
 
+const { getImageSettings } = useExtensionSettingsStore();
+const imageSettings = getImageSettings(Route.History);
+
 const { getEvicted } = useActivityStore();
 useWatchActivated(
   watch(getEvicted(Route.History), async _evicted => {
@@ -80,6 +84,8 @@ useActiveAndDocumentVisible({
       :loading="loading"
       :pagination="pagination"
       :page-size="pageSize"
+      :backdrop="imageSettings.backdrop"
+      :poster-type="imageSettings.type"
       show-collected
       show-tag-loader
       @on-scroll="scrolled = true"

src/components/views/progress/ProgressComponent.vue

@@ -16,6 +16,7 @@ import { useActivityStore } from '~/stores/data/activity.store';
 import { useProgressStore, useProgressStoreRefs } from '~/stores/data/progress.store';
 import { useWatchingStoreRefs } from '~/stores/data/watching.store';
 import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
+import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
 import { useI18n } from '~/utils/i18n.utils';
 import { useActiveAndDocumentVisible, watchUserChange } from '~/utils/store.utils';
 import { getSessionUser } from '~/utils/trakt-service.utils';
@@ -46,6 +47,9 @@ const { user } = useAuthSettingsStoreRefs();
 const unSub = ref<() => void>();
 const notification = ref<NotificationReactive>();
 
+const { getImageSettings } = useExtensionSettingsStore();
+const imageSettings = getImageSettings(Route.Progress);
+
 const { getEvicted } = useActivityStore();
 useWatchActivated(
   watch(getEvicted(Route.Progress), async _evicted => {
@@ -103,7 +107,8 @@ useActiveAndDocumentVisible({
         ref="listRef"
         :loading="loading"
         :items="progress"
-        backdrop
+        :backdrop="imageSettings.backdrop"
+        :poster-type="imageSettings.type"
         hide-date
         show-progress
         show-collected

src/components/views/releases/ReleasesComponent.vue

@@ -9,9 +9,11 @@ import ListScroll from '~/components/common/list/ListScroll.vue';
 import { useListScroll } from '~/components/common/list/use-list-scroll';
 
 import { usePanelItem } from '~/components/views/panel/use-panel-item';
+import { Route } from '~/models/router.model';
 import { TraktService } from '~/services/trakt.service';
 import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import { useReleasesStore, useReleasesStoreRefs } from '~/stores/data/releases.store';
+import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
 import { useCalendar, useCenterButton } from '~/utils/calendar.utils';
 import { useI18n } from '~/utils/i18n.utils';
 import { useActiveAndDocumentVisible, watchUserChange } from '~/utils/store.utils';
@@ -25,6 +27,9 @@ const { fetchReleases, clearState } = useReleasesStore();
 
 const list = useListScroll(releases, 'date');
 
+const { getImageSettings } = useExtensionSettingsStore();
+const imageSettings = getImageSettings(Route.Releases);
+
 const { centerItem, centerIsToday, scrolledOut, recenterIcon, onScrollIntoOutOfView } =
   useCenterButton({ list, center });
 
@@ -73,6 +78,8 @@ const onMovieClick = async ({ item }: { item: ListScrollItem }) => {
       :items="list"
       :loading="loading"
       :content-height="3"
+      :backdrop="imageSettings.backdrop"
+      :poster-type="imageSettings.type"
       hide-time
       overscroll="none"
       :scroll-into-view="centerItem?.id ? [centerItem?.id] : []"

src/components/views/search/SearchComponent.vue

@@ -10,12 +10,14 @@ import {
   useListScrollEvents,
 } from '~/components/common/list/use-list-scroll';
 import { usePanelItem } from '~/components/views/panel/use-panel-item';
+import { Route } from '~/models/router.model';
 import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import {
   type SearchResult,
   useSearchStore,
   useSearchStoreRefs,
 } from '~/stores/data/search.store';
+import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
 import { useI18n } from '~/utils/i18n.utils';
 import { useActiveAndDocumentVisible } from '~/utils/store.utils';
 
@@ -26,6 +28,9 @@ const { footerOpen } = useAppStateStoreRefs();
 const { searchResults, loading, pagination } = useSearchStoreRefs();
 const { fetchSearchResults } = useSearchStore();
 
+const { getImageSettings } = useExtensionSettingsStore();
+const imageSettings = getImageSettings(Route.Search);
+
 onActivated(async () => {
   await fetchSearchResults();
 });
@@ -53,6 +58,8 @@ const { onItemClick } = usePanelItem();
       hide-date
       :items="list"
       :loading="loading"
+      :backdrop="imageSettings.backdrop"
+      :poster-type="imageSettings.type"
       show-played
       show-collected
       @on-scroll="scrolled = true"

src/components/views/watchlist/WatchlistComponent.vue

@@ -22,6 +22,7 @@ import {
   useListStoreRefs,
 } from '~/stores/data/list.store';
 import { useListsStoreRefs } from '~/stores/data/lists.store';
+import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
 import { useI18n } from '~/utils/i18n.utils';
 import { useActiveAndDocumentVisible, watchUserChange } from '~/utils/store.utils';
 import { useWatchActivated } from '~/utils/vue.utils';
@@ -65,6 +66,9 @@ const { onScroll, onUpdated, onLoadMore } = useListScrollEvents(fetchListItems,
   active,
 });
 
+const { getImageSettings } = useExtensionSettingsStore();
+const imageSettings = getImageSettings(Route.Watchlist);
+
 const { getEvicted } = useActivityStore();
 useWatchActivated(
   watch(getEvicted(Route.Watchlist), async _evicted => {
@@ -95,6 +99,8 @@ useActiveAndDocumentVisible({
       :loading="listLoading"
       :pagination="pagination"
       :page-size="pageSize"
+      :backdrop="imageSettings.backdrop"
+      :poster-type="imageSettings.type"
       show-played
       show-collected
       @on-scroll="scrolled = true"

src/stores/settings/extension.store.ts

@@ -5,6 +5,8 @@ import { computed, reactive, ref, toRaw } from 'vue';
 
 import type { ListEntity } from '~/models/list.model';
 
+import type { PosterItem } from '~/models/poster.model';
+
 import { NavbarPosition, type NavbarPositions } from '~/models/navbar-position.model';
 
 import { PageSize } from '~/models/page-size.model';
@@ -34,12 +36,33 @@ type RouteDictionary = Partial<Record<Route, boolean>>;
 const DefaultRoutes: RouteDictionary = {
   [Route.Progress]: false,
   [Route.Calendar]: true,
-  [Route.Releases]: false,
   [Route.History]: true,
   [Route.Watchlist]: true,
+  [Route.Releases]: false,
   [Route.Search]: true,
 };
 
+type ImageTypeDictionary = Partial<Record<Route, PosterItem['type'] | 'default'>>;
+
+const DefaultImageTypes: ImageTypeDictionary = {
+  [Route.Progress]: 'default',
+  [Route.Calendar]: 'default',
+  [Route.History]: 'default',
+  [Route.Watchlist]: 'default',
+  [Route.Releases]: 'default',
+  [Route.Search]: 'default',
+};
+
+type ImageFormatDictionary = Partial<Record<Route, 'backdrop' | 'poster'>>;
+const DefaultImageFormats: ImageFormatDictionary = {
+  [Route.Progress]: 'backdrop',
+  [Route.Calendar]: 'backdrop',
+  [Route.History]: 'backdrop',
+  [Route.Watchlist]: 'poster',
+  [Route.Releases]: 'poster',
+  [Route.Search]: 'poster',
+};
+
 type ExtensionSettings = {
   cacheRetention: CacheRetentionState;
   enabledRoutes: RouteDictionary;
@@ -53,6 +76,8 @@ type ExtensionSettings = {
   loadingHysteresis: number;
   navbarPosition: NavbarPositions;
   iconOnly: boolean;
+  imageType: ImageTypeDictionary;
+  imageFormat: ImageFormatDictionary;
 };
 
 const ExtensionSettingsConstants = {
@@ -75,10 +100,14 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
   const loadingHysteresis = ref(-1);
   const navbarPosition = ref<NavbarPositions>(NavbarPosition.Auto);
   const iconOnly = ref(true);
+  const imageType = reactive<ExtensionSettings['imageType']>(DefaultImageTypes);
+  const imageFormat = reactive<ExtensionSettings['imageFormat']>(DefaultImageFormats);
 
   const clearState = () => {
     Object.assign(cacheRetention, DefaultCacheRetention);
     Object.assign(routeDictionary, DefaultRoutes);
+    Object.assign(imageType, DefaultImageTypes);
+    Object.assign(imageFormat, DefaultImageFormats);
     restoreRoute.value = true;
     restorePanel.value = false;
     progressType.value = ProgressType.Show;
@@ -92,14 +121,16 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
         enabledRoutes: toRaw(routeDictionary),
         restoreRoute: restoreRoute.value,
         restorePanel: restorePanel.value,
-        loadLists,
+        loadLists: toRaw(loadLists),
         loadListsPageSize: loadListsPageSize.value,
         progressType: progressType.value,
         enableRatings: enableRatings.value,
         backgroundColor: backgroundColor.value,
         loadingHysteresis: loadingHysteresis.value,
         navbarPosition: navbarPosition.value,
         iconOnly: iconOnly.value,
+        imageType: toRaw(imageType),
+        imageFormat: toRaw(imageFormat),
       }),
     500,
   );
@@ -136,6 +167,8 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
     if (restored?.loadingHysteresis !== undefined) loadingHysteresis.value = restored.loadingHysteresis;
     if (restored?.navbarPosition !== undefined) navbarPosition.value = restored.navbarPosition;
     if (restored?.iconOnly !== undefined) iconOnly.value = restored.iconOnly;
+    if (restored?.imageType !== undefined) Object.assign(imageType, restored.imageType);
+    if (restored?.imageFormat !== undefined) Object.assign(imageFormat, restored.imageFormat);
 
     if (!chromeRuntimeId) routeDictionary[Route.Progress] = false;
   };
@@ -166,6 +199,12 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
     saveState().catch(err => Logger.error('Failed to save enabled tab extension settings', { tab, err }));
   };
 
+  const getImageSettings = (route: Route) =>
+    computed(() => ({
+      type: imageType[route] === 'default' ? undefined : imageType[route],
+      backdrop: imageFormat[route] === 'backdrop',
+    }));
+
   return {
     initExtensionSettingsStore,
     restoreDefaultTab,
@@ -266,6 +305,21 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
         saveState().catch(err => Logger.error('Failed to save icon only extension settings', { value, err }));
       },
     }),
+    getImageSettings,
+    imageType: computed({
+      get: () => imageType,
+      set: (value: ImageTypeDictionary) => {
+        Object.assign(imageType, value);
+        saveState().catch(err => Logger.error('Failed to save image type extension settings', { value, err }));
+      },
+    }),
+    imageFormat: computed({
+      get: () => imageFormat,
+      set: (value: ImageFormatDictionary) => {
+        Object.assign(imageFormat, value);
+        saveState().catch(err => Logger.error('Failed to save image format extension settings', { value, err }));
+      },
+    }),
   };
 });