feat(progress): allows display of progress for season instead of shows

Author: dvcol

src/components/common/list/ListItemPanel.vue

@@ -16,7 +16,9 @@ import TagLink from '~/components/common/buttons/TagLink.vue';
 import ProgressTooltip from '~/components/common/tooltip/ProgressTooltip.vue';
 import { type ListScrollItem, type ShowProgress } from '~/models/list-scroll.model';
 
+import { ProgressType } from '~/models/progress-type.model';
 import { useShowStore } from '~/stores/data/show.store';
+import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 import { useLinksStore } from '~/stores/settings/links.store';
 import { shortTime } from '~/utils/date.utils';
 import { useI18n } from '~/utils/i18n.utils';
@@ -84,6 +86,16 @@ const progress = computed<ShowProgress | undefined>(() => {
   return getShowWatchedProgress(id, cacheOptions).value;
 });
 
+const { progressType } = useExtensionSettingsStoreRefs();
+
+const percentage = computed(() => {
+  if (!progress.value) return;
+  if (progressType.value === ProgressType.Season) {
+    if (progress.value?.lastAired) return progress.value?.lastAired?.percentage;
+  }
+  return progress.value?.percentage;
+});
+
 const innerContainer = ref();
 const tooltipOptions = computed<PopoverProps>(() => ({
   to: innerContainer.value,
@@ -140,11 +152,11 @@ const onTagClick = (url?: string) => {
           <NProgress
             class="line"
             :data-show-id="progress?.id"
-            :data-percentage="progress?.percentage"
+            :data-percentage="percentage"
             :theme-overrides="{
               railHeight: 'var(--rail-height)',
             }"
-            :percentage="progress?.percentage ?? 0"
+            :percentage="percentage ?? 0"
             :show-indicator="false"
             color="var(--trakt-red-dark)"
           />

src/components/common/tooltip/ProgressTooltip.vue

@@ -11,6 +11,8 @@ import {
   type ShowProgressTypes,
 } from '~/models/list-scroll.model';
 
+import { ProgressType } from '~/models/progress-type.model';
+import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 import { useI18n } from '~/utils/i18n.utils';
 
 const props = defineProps({
@@ -31,16 +33,32 @@ const props = defineProps({
 
 const { progress, type, disabled } = toRefs(props);
 
+const { progressType } = useExtensionSettingsStoreRefs();
+
 const percentage = computed(() => {
   if (!progress?.value) return;
+  if (
+    progressType.value === ProgressType.Season &&
+    'lastAired' in progress.value &&
+    progress.value?.lastAired
+  ) {
+    return Math.round(progress.value.lastAired.percentage);
+  }
   if (!('percentage' in progress.value)) return;
   return Math.round(progress.value?.percentage);
 });
 
 const remaining = computed(() => {
   if (!progress?.value) return;
-  if (!('aired' in progress.value)) return;
   if (!progress.value.completed) return;
+  if (
+    progressType.value === ProgressType.Season &&
+    'lastAired' in progress.value &&
+    progress.value?.lastAired
+  ) {
+    return progress.value.lastAired.aired - progress.value.lastAired.completed;
+  }
+  if (!('aired' in progress.value)) return;
   return progress.value.aired - progress.value.completed;
 });
 
@@ -51,6 +69,32 @@ const isCount = computed(() => {
   return typeof progress.value?.aired === 'number';
 });
 
+const completed = computed(() => {
+  if (!progress?.value) return '-';
+  if (
+    progressType.value === ProgressType.Season &&
+    'lastAired' in progress.value &&
+    progress.value?.lastAired
+  ) {
+    return progress.value.lastAired.completed;
+  }
+  if (!('completed' in progress.value)) return '-';
+  return progress.value.completed;
+});
+
+const aired = computed(() => {
+  if (!progress?.value) return '-';
+  if (
+    progressType.value === ProgressType.Season &&
+    'lastAired' in progress.value &&
+    progress.value?.lastAired
+  ) {
+    return progress.value.lastAired.aired;
+  }
+  if (!('aired' in progress.value)) return '-';
+  return progress.value.aired;
+});
+
 const i18n = useI18n('common', 'tooltip', 'progress');
 </script>
 
@@ -63,9 +107,9 @@ const i18n = useI18n('common', 'tooltip', 'progress');
     <slot name="label">
       <NFlex v-if="progress && isCount" vertical align="flex-end">
         <div v-if="'aired' in progress">
-          <span class="metric">{{ progress?.completed ?? '-' }}</span>
+          <span class="metric">{{ completed }}</span>
           <span> / </span>
-          <span class="metric">{{ progress?.aired ?? '-' }}</span>
+          <span class="metric">{{ aired }}</span>
           <span>&nbsp;</span>
           <span>{{ i18n('episodes') }}</span>
         </div>

src/components/views/settings/SettingsTabs.vue

@@ -5,6 +5,7 @@ import { type Component, computed, h, onBeforeMount, ref } from 'vue';
 
 import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
 import { pageSizeOptions } from '~/models/page-size.model';
+import { ProgressType } from '~/models/progress-type.model';
 import { Route } from '~/models/router.model';
 import { useHistoryStoreRefs } from '~/stores/data/history.store';
 import {
@@ -33,6 +34,7 @@ const {
   defaultTab,
   loadLists,
   loadListsPageSize,
+  progressType,
 } = useExtensionSettingsStoreRefs();
 
 const { getIcon, fetchLists } = useListsStore();
@@ -82,6 +84,11 @@ const tabsOptions = computed(() =>
   })),
 );
 
+const progressTypeOptions = Object.values(ProgressType).map(pt => ({
+  label: i18n(`type__${pt}`, 'progress'),
+  value: pt,
+}));
+
 const disabled = computed(
   () => enabledTabs.value.filter(([_, state]) => state).length <= 1,
 );
@@ -134,26 +141,39 @@ const container = ref();
     </SettingsFormItem>
 
     <!--  Enable tabs  -->
-    <SettingsFormItem
-      v-for="[route, state] of enabledTabs"
-      :key="route"
-      :label="i18n(`label_route_${ route }`)"
-      :warning="
-        state && route === Route.Progress
-          ? i18n(`label_route_${ route }_warning`)
-          : undefined
-      "
-    >
-      <NSwitch
-        :value="state"
-        class="form-switch"
-        :disabled="state && disabled"
-        @update:value="toggleTab(route)"
+    <template v-for="[route, state] of enabledTabs" :key="route">
+      <SettingsFormItem
+        :label="i18n(`label_route_${ route }`)"
+        :warning="
+          state && route === Route.Progress
+            ? i18n(`label_route_${ route }_warning`)
+            : undefined
+        "
       >
-        <template #checked>{{ i18n('on', 'common', 'button') }}</template>
-        <template #unchecked>{{ i18n('off', 'common', 'button') }}</template>
-      </NSwitch>
-    </SettingsFormItem>
+        <NSwitch
+          :value="state"
+          class="form-switch"
+          :disabled="state && disabled"
+          @update:value="toggleTab(route)"
+        >
+          <template #checked>{{ i18n('on', 'common', 'button') }}</template>
+          <template #unchecked>{{ i18n('off', 'common', 'button') }}</template>
+        </NSwitch>
+      </SettingsFormItem>
+
+      <!--  Progress Type  -->
+      <SettingsFormItem
+        v-if="state && route === Route.Progress"
+        :label="i18n('label_progress_type')"
+      >
+        <NSelect
+          v-model:value="progressType"
+          class="progress-type"
+          :to="container"
+          :options="progressTypeOptions"
+        />
+      </SettingsFormItem>
+    </template>
 
     <!--  Page Size  -->
     <SettingsFormItem :label="i18n('label_load_lists_page_size')">
@@ -222,4 +242,8 @@ const container = ref();
 .list-select {
   width: 12.5rem;
 }
+
+.progress-type {
+  width: 6rem;
+}
 </style>

src/i18n/en/progress/progress.json

@@ -6,5 +6,13 @@
   "progress__logout__trakt": {
     "message": "Please sign into trakt.tv directly.",
     "description": "Login message for trakt.tv auth sessions."
+  },
+  "progress__type__show": {
+    "message": "Show",
+    "description": "Type label for a show."
+  },
+  "progress__type__season": {
+    "message": "Season",
+    "description": "Type label for a movie."
   }
 }

src/i18n/en/settings/settings-tabs.json

@@ -54,5 +54,9 @@
   "settings__tabs__label_load_lists_page_size": {
     "message": "Page size for lists",
     "description": "Label for the 'Page size for lists' setting"
+  },
+  "settings__tabs__label_progress_type": {
+    "message": "Progress type",
+    "description": "Label for the 'Progress type' setting"
   }
 }

src/models/list-scroll.model.ts

@@ -71,6 +71,7 @@ export type ShowProgress = BaseTraktProgress & {
   seasons: SeasonProgress[];
   percentage: number;
   finished: boolean;
+  lastAired?: SeasonProgress;
 };
 
 export const ListScrollItemType = {

src/models/progress-type.model.ts

@@ -0,0 +1,6 @@
+export const ProgressType = {
+  Show: 'show',
+  Season: 'season',
+} as const;
+
+export type ProgressTypes = (typeof ProgressType)[keyof typeof ProgressType];

src/stores/data/show.store.ts

@@ -49,8 +49,9 @@ const parseProgressDate = (
 };
 
 const watchProgressToListProgress = (progress: TraktWatchedProgress | TraktCollectionProgress, id: string | number): ShowProgress => {
-  let completed = 0;
-  let aired = 0;
+  let completed: ShowProgress['completed'] = 0;
+  let aired: ShowProgress['aired'] = 0;
+  let lastAired: ShowProgress['lastAired'];
 
   const result = {
     id,
@@ -75,6 +76,8 @@ const watchProgressToListProgress = (progress: TraktWatchedProgress | TraktColle
         return { ...episode, date };
       });
 
+      if (_season.aired && (!lastAired || _season.number > lastAired.number)) lastAired = _season;
+
       return _season;
     }),
   };
@@ -84,6 +87,7 @@ const watchProgressToListProgress = (progress: TraktWatchedProgress | TraktColle
     aired,
     percentage: aired ? ((completed ?? 0) / aired) * 100 : 0,
     finished: !!aired && completed === aired,
+    lastAired,
   };
 };
 

src/stores/settings/extension.store.ts

@@ -2,6 +2,7 @@ import { CacheRetention } from '@dvcol/common-utils/common/cache';
 import { defineStore, storeToRefs } from 'pinia';
 import { computed, reactive, ref, toRaw } from 'vue';
 
+import { ProgressType, type ProgressTypes } from '~/models/progress-type.model';
 import { Route } from '~/models/router.model';
 import { TraktService } from '~/services/trakt.service';
 import { type ListEntity } from '~/stores/data/list.store';
@@ -38,6 +39,7 @@ type ExtensionSettings = {
   restorePanel: boolean;
   loadLists: ListEntity[];
   loadListsPageSize: number;
+  progressType: ProgressTypes;
 };
 
 const ExtensionSettingsConstants = {
@@ -54,13 +56,15 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
   const loadListsPageSize = ref<ExtensionSettings['loadListsPageSize']>(500);
   const defaultTab = ref<Route>(Route.Calendar);
   const initialized = ref<Promise<boolean>>();
+  const progressType = ref<ExtensionSettings['progressType']>(ProgressType.Show);
 
   const clearState = () => {
     Object.assign(cacheRetention, DefaultCacheRetention);
     Object.assign(routeDictionary, DefaultRoutes);
     restoreRoute.value = true;
     restorePanel.value = false;
     loadLists.value = [];
+    progressType.value = ProgressType.Show;
   };
 
   const saveState = debounce(
@@ -72,6 +76,7 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
         restorePanel: restorePanel.value,
         loadLists: loadLists.value,
         loadListsPageSize: loadListsPageSize.value,
+        progressType: progressType.value,
       }),
     500,
   );
@@ -93,6 +98,7 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
     if (restored?.restorePanel !== undefined) restorePanel.value = restored.restorePanel;
     if (restored?.loadLists !== undefined) loadLists.value = Object.values(restored.loadLists);
     if (restored?.loadListsPageSize !== undefined) loadListsPageSize.value = restored.loadListsPageSize;
+    if (restored?.progressType !== undefined) progressType.value = restored.progressType;
   };
 
   const saveDefaultTab = debounce(() => storage.sync.set(ExtensionSettingsConstants.LocalDefaultTab, defaultTab.value), 500);
@@ -168,6 +174,13 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
       get: () => cacheRetention.tmdb,
       set: (value: number) => setRetention({ tmdb: value }),
     }),
+    progressType: computed({
+      get: () => progressType.value,
+      set: (value: ExtensionSettings['progressType']) => {
+        progressType.value = value;
+        saveState().catch(err => logger.error('Failed to save progress type extension settings', { value, err }));
+      },
+    }),
   };
 });