feat(list): source played status from history when no progress available

Author: dvcol

src/components/common/list/ListItemPanel.vue

@@ -21,6 +21,7 @@ import IconPlayFilled from '~/components/icons/IconPlayFilled.vue';
 import { type ListScrollItem, type ShowProgress } from '~/models/list-scroll.model';
 
 import { ProgressType } from '~/models/progress-type.model';
+import { useHistoryStore } from '~/stores/data/history.store';
 import { useMovieStore } from '~/stores/data/movie.store';
 import { useShowStore } from '~/stores/data/show.store';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
@@ -119,22 +120,43 @@ const collection = computed<ShowProgress | undefined>(() => {
 });
 
 const { getMovieWatched, getMovieCollected } = useMovieStore();
+const { getMovieHistory, getEpisodeHistory } = useHistoryStore();
+
+const movieHistory = computed(() => {
+  if (!showPlayed.value) return;
+  const _item = item?.value;
+  if (_item?.type !== 'movie') return;
+  if (!_item?.meta?.ids?.movie?.trakt) return;
+  return !!getMovieHistory(_item.meta.ids.movie.trakt)?.value;
+});
+
+const episodeHistory = computed(() => {
+  if (!showPlayed.value) return;
+  const _item = item?.value;
+  if (_item?.type !== 'episode') return;
+  if (!_item?.meta?.ids?.episode?.trakt) return;
+  return !!getEpisodeHistory(_item.meta.ids.episode.trakt)?.value;
+});
 
 const played = computed(() => {
   if (!showPlayed.value) return false;
   const _item = item?.value;
   if (_item?.type === 'movie' && _item?.meta?.ids?.movie?.trakt) {
-    return getMovieWatched(_item.meta.ids.movie.trakt)?.value;
+    const _watched = getMovieWatched(_item.meta.ids.movie.trakt)?.value;
+    if (_watched !== undefined) return _watched;
+    return movieHistory.value;
   }
   if (_item?.type !== 'episode') return false;
   const _progress = progress.value;
-  if (!_progress) return false;
+  if (!_progress) return episodeHistory.value;
   const _season = _item.meta?.number?.season;
   const _episode = _item.meta?.number?.episode;
-  if (!_season || !_episode) return false;
-  return _progress.seasons
+  if (!_season || !_episode) return episodeHistory.value;
+  const _watched = _progress.seasons
     ?.find(s => s.number === _season)
     ?.episodes?.find(e => e.number === _episode)?.completed;
+  if (_watched !== undefined) return _watched;
+  return episodeHistory.value;
 });
 
 const collected = computed(() => {

src/stores/data/history.store.ts

@@ -1,7 +1,10 @@
-import { TraktApiExtended, type TraktClientPagination, type TraktHistory, type TraktHistoryGetQuery } from '@dvcol/trakt-http-client/models';
+import { TraktApiExtended } from '@dvcol/trakt-http-client/models';
+
 import { defineStore, storeToRefs } from 'pinia';
 import { computed, reactive, ref, watch } from 'vue';
 
+import type { TraktApiIds, TraktClientPagination, TraktHistory, TraktHistoryGetQuery } from '@dvcol/trakt-http-client/models';
+
 import type { ErrorDictionary } from '~/utils/retry.utils';
 
 import { PageSize } from '~/models/page-size.model';
@@ -13,6 +16,13 @@ import { storage } from '~/utils/browser/browser-storage.utils';
 import { debounceLoading, useBelowThreshold, useLoadingPlaceholder, useSearchFilter } from '~/utils/store.utils';
 import { clearProxy } from '~/utils/vue.utils';
 
+type IdDictionary = Record<string, Partial<TraktApiIds>>;
+
+type HistoryDictionary = {
+  movie?: IdDictionary;
+  episode?: IdDictionary;
+};
+
 const HistoryStoreConstants = {
   Store: 'data.history',
 } as const;
@@ -29,6 +39,7 @@ export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
   const loading = ref(true);
   const pageSize = ref(PageSize.p100);
   const history = ref<TraktHistory[]>([]);
+  const historyDictionary = reactive<HistoryDictionary>({});
   const pagination = ref<TraktClientPagination>();
   const extended = ref(false);
 
@@ -66,6 +77,7 @@ export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
     historyStart.value = undefined;
     historyEnd.value = undefined;
     clearProxy(historyErrors);
+    clearProxy(historyDictionary);
   };
 
   const belowThreshold = useBelowThreshold(threshold, pagination);
@@ -117,6 +129,10 @@ export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
     await saveState();
   };
 
+  const getHistory = (id: number, type: TraktHistory['type']) => computed(() => historyDictionary[type]?.[id]);
+  const getMovieHistory = (id: number) => getHistory(id, 'movie');
+  const getEpisodeHistory = (id: number) => getHistory(id, 'episode');
+
   const initHistoryStore = async () => {
     await restoreState();
 
@@ -125,6 +141,19 @@ export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
       searchHistory.value = '';
       await saveState();
     });
+
+    watch(history, newHistory => {
+      clearProxy(historyDictionary);
+      newHistory?.forEach(h => {
+        if (h.type === 'movie' && 'movie' in h) {
+          if (!historyDictionary.movie) historyDictionary.movie = {};
+          historyDictionary.movie[h.movie.ids.trakt] = h.movie.ids;
+        } else if (h.type === 'episode' && 'episode' in h) {
+          if (!historyDictionary.episode) historyDictionary.episode = {};
+          historyDictionary.episode[h.episode.ids.trakt] = h.episode.ids;
+        }
+      });
+    });
   };
 
   return {
@@ -141,6 +170,9 @@ export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
     historyStart,
     historyEnd,
     setHistoryRange,
+    getHistory,
+    getMovieHistory,
+    getEpisodeHistory,
     clearState,
     initHistoryStore,
     extended: computed({