feat(panel): adds watched history toggle support

Author: dvcol

src/components/views/panel/MoviePanel.vue

@@ -14,6 +14,7 @@ import {
 } from '~/components/views/panel/use-panel-buttons';
 import { ResolveExternalLinks } from '~/settings/external.links';
 import {
+  DefaultListId,
   DefaultLists,
   type ListEntity,
   ListType,
@@ -93,6 +94,16 @@ const collectionLoading = computed(() => {
   }).value;
 });
 
+const watchedLoading = computed(() => {
+  if (loadingWatched.value) return true;
+  if (movieId.value === undefined) return true;
+  return isItemListLoading({
+    listType: ListType.History,
+    itemType: 'movie',
+    itemId: movieId.value,
+  }).value;
+});
+
 const activeLists = computed(() => {
   if (movieId?.value === undefined) return;
   return lists.value
@@ -133,8 +144,17 @@ const onCollectionUpdate = async (value: PanelButtonsOptions, date?: number) =>
 const onWatchedUpdate = async (value: PanelButtonsOptions, date?: number) => {
   if (!movie.value?.ids) return;
 
-  // TODO : implement add/remove from history
-  // addToOrRemoveFromList(DefaultLists.Watchlist, `${panelType.value}s`, activeItem.value.ids);
+  await addToOrRemoveFromList({
+    list: {
+      id: DefaultListId.History,
+      type: ListType.History,
+      name: 'list_type__history',
+    },
+    itemType: 'movie',
+    itemIds: movie.value?.ids,
+    date,
+    remove: value === PanelButtonsOption.Remove,
+  });
 
   const _id = movie.value?.ids?.trakt;
   if (_id === undefined) return;
@@ -179,7 +199,7 @@ const { openTab } = useExtensionSettingsStore();
 
     <MoviePanelButtons
       :watched="watched"
-      :watched-loading="loadingWatched"
+      :watched-loading="watchedLoading"
       :collected="collected"
       :collected-loading="collectionLoading"
       :active-loading="listLoading"

src/components/views/panel/ShowPanel.vue

@@ -14,6 +14,7 @@ import {
 } from '~/components/views/panel/use-panel-buttons';
 import { ResolveExternalLinks } from '~/settings/external.links';
 import {
+  DefaultListId,
   DefaultLists,
   type ListEntity,
   ListType,
@@ -65,12 +66,6 @@ const watchedProgress = computed(() => {
   if (!showId?.value) return;
   return getShowWatchedProgress(showId.value).value;
 });
-
-const watchedLoading = computed(() => {
-  if (!showId?.value) return;
-  return getShowProgressLoading(showId.value).value;
-});
-
 const collectionProgress = computed(() => {
   if (!showId?.value) return;
   return getShowCollectionProgress(showId.value).value;
@@ -188,11 +183,27 @@ const activeItemCollectionLoading = computed(() => {
 });
 
 const collectionLoading = computed(() => {
-  if (!showId?.value) return;
   if (activeItemCollectionLoading.value) return true;
+  if (!showId?.value) return true;
   return getShowCollectionLoading(showId.value).value;
 });
 
+const activeItemWatchedLoading = computed(() => {
+  const _id = activeItem.value?.ids?.trakt;
+  if (_id === undefined) return;
+  return isItemListLoading({
+    listType: ListType.History,
+    itemType: panelType.value,
+    itemId: _id,
+  }).value;
+});
+
+const watchedLoading = computed(() => {
+  if (activeItemWatchedLoading.value) return true;
+  if (!showId?.value) return true;
+  return getShowProgressLoading(showId.value).value;
+});
+
 const activeLists = computed(() => {
   const _id = activeItem?.value?.ids?.trakt;
   const _type = panelType.value;
@@ -246,8 +257,17 @@ const onCollectionUpdate = async (value: PanelButtonsOptions, date?: number) =>
 const onWatchedUpdate = async (value: PanelButtonsOptions, date?: number) => {
   if (!panelType.value || !activeItem.value?.ids) return;
 
-  // TODO : implement add/remove from history
-  // addToOrRemoveFromList(DefaultLists.Watchlist, `${panelType.value}s`, activeItem.value.ids);
+  await addToOrRemoveFromList({
+    list: {
+      id: DefaultListId.History,
+      type: ListType.History,
+      name: 'list_type__history',
+    },
+    itemType: panelType.value,
+    itemIds: activeItem.value.ids,
+    date,
+    remove: value === PanelButtonsOption.Remove,
+  });
   if (!showId.value) return;
   await fetchShowProgress(showId.value, { force: true });
 };

src/stores/data/list.store.ts

@@ -33,6 +33,7 @@ export const ListType = {
   Collection: 'collection',
   Watchlist: 'watchlist',
   Favorites: 'favorites',
+  History: 'history',
 } as const;
 
 export type ListTypes = (typeof ListType)[keyof typeof ListType];
@@ -42,14 +43,15 @@ export const DefaultListId = {
   Favorites: 'favorites',
   MovieCollection: 'movie-collection',
   ShowCollection: 'show-collection',
+  History: 'history',
 } as const;
 
 export type DefaultListIds = (typeof DefaultListId)[keyof typeof DefaultListId];
 
 export type ListEntity = {
   type: ListTypes;
-  name: string;
   id: number | string | DefaultListIds;
+  name: string;
   owner?: TraktUser;
   scope?: 'movies' | 'shows';
 };
@@ -270,11 +272,11 @@ export const useListStore = defineStore('data.list', () => {
 
       let response;
 
-      if (list.type === 'watchlist') {
+      if (list.type === ListType.Watchlist) {
         response = await TraktService.watchlist(query);
-      } else if (list.type === 'favorites') {
+      } else if (list.type === ListType.Favorites) {
         response = await TraktService.favorites(query);
-      } else if (list.type === 'collection' && list.scope) {
+      } else if (list.type === ListType.Collection && list.scope) {
         response = await TraktService.collection({
           ...query,
           type: list.scope,
@@ -317,7 +319,7 @@ export const useListStore = defineStore('data.list', () => {
     date?: Date | string | number;
     remove?: boolean;
   }) => {
-    const listId = list.id.toString();
+    const listId = list.id?.toString();
     const listType = list.type;
     const userId = list.owner?.username;
 
@@ -340,7 +342,14 @@ export const useListStore = defineStore('data.list', () => {
     typeLoading[listType] = true;
 
     try {
-      if (listType === ListType.Watchlist) {
+      if (listType === ListType.History) {
+        if (remove) {
+          await TraktService.remove.history({ [`${itemType}s`]: [{ ids: itemIds }] });
+        } else {
+          const _date = date ? new Date(date).toISOString() : undefined;
+          await TraktService.add.history({ [`${itemType}s`]: [{ watched_at: _date, ids: itemIds }] });
+        }
+      } else if (listType === ListType.Watchlist) {
         await TraktService[remove ? 'remove' : 'add'].watchlist({ [`${itemType}s`]: [{ ids: itemIds }] });
         updateDictionary(list, { [itemType]: { ids: itemIds } }, remove);
       } else if (listType === 'favorites') {