feat(progress): adds progress bar

Author: dvcol

src/components/common/list/ListItem.vue

@@ -67,6 +67,11 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  showProgress: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 const emit = defineEmits<{
@@ -261,7 +266,12 @@ const itemHeight = computed(() => (height?.value ? `${height.value}px` : undefin
             :src="PosterPlaceholder"
             :fallback-src="PosterPlaceholder"
           />
-          <ListItemPanel :item="item" :loading="loading" :hide-date="hideDate">
+          <ListItemPanel
+            :item="item"
+            :loading="loading"
+            :hide-date="hideDate"
+            :show-progress="showProgress"
+          >
             <slot :item="item" :loading="loading" />
           </ListItemPanel>
         </NFlex>

src/components/common/list/ListItemPanel.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { NEllipsis, NFlex, NSkeleton, NTag } from 'naive-ui';
+import { NEllipsis, NFlex, NProgress, NSkeleton, NTag } from 'naive-ui';
 
 import { computed, defineProps, type PropType, toRefs } from 'vue';
 
 import PosterPlaceholder from '~/assets/images/poster-placholder.webp';
 import { type ListScrollItem } from '~/models/list-scroll.model';
 
+import { useShowStore } from '~/stores/data/show.store';
 import { useI18n } from '~/utils';
+import { deCapitalise } from '~/utils/string.utils';
 
 const i18n = useI18n('list-item-panel');
 
@@ -28,6 +30,11 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  showProgress: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 const { item, hideDate } = toRefs(props);
@@ -36,9 +43,9 @@ const type = computed(() =>
   item.value.type ? i18n(item.value.type, 'common', 'media', 'type') : item.value.type,
 );
 
-const title = computed(() => item.value.title);
+const title = computed(() => deCapitalise(item.value.title));
 
-const content = computed(() => item.value.content);
+const content = computed(() => deCapitalise(item.value.content));
 
 const date = computed(() => {
   if (hideDate.value) return;
@@ -56,6 +63,17 @@ const tags = computed(
       return { ...tag, label: i18n(tag.label, ...tag.i18n) };
     }),
 );
+
+const { getShowProgress } = useShowStore();
+
+const progress = computed(() => {
+  if (item?.value?.progress) return item.value.progress;
+  if (item?.value?.progressRef) return item.value.progressRef.value;
+  if (!item?.value?.getProgressQuery) return;
+  const id = item.value.getProgressQuery();
+  if (!id) return;
+  return getShowProgress(id).value;
+});
 </script>
 
 <template>
@@ -99,6 +117,19 @@ const tags = computed(
         </NTag>
       </template>
     </NFlex>
+    <NProgress
+      v-if="showProgress"
+      :data-percentage="progress?.percentage"
+      :data-last="progress?.last_episode"
+      :data-next="progress?.next_episode"
+      class="progress"
+      :theme-overrides="{
+        railHeight: 'var(--rail-height)',
+      }"
+      :percentage="progress?.percentage ?? 0"
+      :show-indicator="false"
+      color="var(--trakt-red-dark)"
+    />
   </NFlex>
 </template>
 
@@ -136,5 +167,11 @@ const tags = computed(
       width: fit-content;
     }
   }
+
+  .progress {
+    margin-top: 0.75rem;
+
+    --rail-height: 4px;
+  }
 }
 </style>

src/components/common/list/ListScroll.vue

@@ -57,6 +57,11 @@ const props = defineProps({
     required: false,
     default: 300,
   },
+  showProgress: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 const emits = defineEmits<{
@@ -171,6 +176,7 @@ const onLoadMore = (payload: { page: number; pageCount: number; pageSize: number
           :episode="episode"
           :hover="hoverDate === item.date?.current?.toDateString()"
           :scroll-into-view="scrollIntoView?.includes(item.id)"
+          :show-progress="showProgress"
           @on-hover="onHover"
           @on-scroll-into-view="(...args) => $emit('onScrollIntoView', ...args)"
           @on-scroll-out-of-view="(...args) => $emit('onScrollOutOfView', ...args)"

src/components/views/progress/ProgressComponent.vue

@@ -44,6 +44,7 @@ const { scrolled, listRef, onClick } = useBackToTop();
         :items="progress"
         episode
         hide-date
+        show-progress
         @on-scroll="scrolled = true"
         @on-scroll-top="scrolled = false"
       >

src/models/list-scroll.model.ts

@@ -5,6 +5,7 @@ import type { TraktEpisode } from '~/models/trakt/trakt-episode.model';
 import type { TraktList } from '~/models/trakt/trakt-list.model';
 import type { TraktMovie } from '~/models/trakt/trakt-movie.model';
 import type { TraktPerson } from '~/models/trakt/trakt-people.model';
+import type { BaseTraktProgress, BaseTraktProgressEpisode, BaseTraktProgressSeason } from '~/models/trakt/trakt-progress.model';
 import type { TraktSeason } from '~/models/trakt/trakt-season.model';
 import type { TraktShow } from '~/models/trakt/trakt-show.model';
 import type { ImageQuery, ImageStoreMedias } from '~/stores/data/image.store';
@@ -42,6 +43,26 @@ export type ListScrollItemTag = {
   meta?: string;
 };
 
+export type ListScrollItemProgressEpisode = BaseTraktProgressEpisode & {
+  date: Date;
+};
+
+export type ListScrollItemProgressSeason = BaseTraktProgressSeason & {
+  episodes: ListScrollItemProgressEpisode[];
+};
+
+export const ListScrollItemProgressType = {
+  collection: 'collection',
+  watched: 'watched',
+} as const;
+
+export type ListScrollItemProgress = BaseTraktProgress & {
+  type: (typeof ListScrollItemProgressType)[keyof typeof ListScrollItemProgressType];
+  date: Date;
+  seasons: ListScrollItemProgressSeason[];
+  percentage: number;
+};
+
 export const ListScrollItemType = {
   movie: 'movie',
   show: 'show',
@@ -64,6 +85,10 @@ export type ListScrollItem<T = Record<string, any>> = {
   content?: string;
   tags?: ListScrollItemTag[];
 
+  progress?: ListScrollItemProgress;
+  progressRef?: Ref<ListScrollItemProgress | undefined>;
+  getProgressQuery?: () => string | number | undefined;
+
   poster?: string;
   posterRef?: Ref<ImageStoreMedias | undefined>;
   getPosterQuery?: () => ImageQuery | undefined;

src/models/trakt/trakt-progress.model.ts

@@ -1,7 +1,7 @@
 import type { TraktEpisode } from '~/models/trakt/trakt-episode.model';
 import type { TraktSeason } from '~/models/trakt/trakt-season.model';
 
-type BaseTraktProgressEpisode = {
+export type BaseTraktProgressEpisode = {
   number: number;
   completed: boolean;
 };
@@ -11,7 +11,7 @@ export type TraktCollectionProgressEpisode = BaseTraktProgressEpisode & {
   collected_at: string;
 };
 
-type BaseTraktProgressSeason = {
+export type BaseTraktProgressSeason = {
   number: number;
   title: string;
   aired: number;
@@ -22,7 +22,7 @@ export type TraktCollectionProgressSeason = BaseTraktProgressSeason & {
   episodes: TraktCollectionProgressEpisode[];
 };
 
-type BaseTraktProgress = {
+export type BaseTraktProgress = {
   aired: number;
   completed: number;
   hidden_seasons: TraktSeason[];
@@ -38,7 +38,7 @@ export type TraktCollectionProgress = BaseTraktProgress & {
 
 export type TraktWatchedProgressEpisode = BaseTraktProgressEpisode & {
   /** Timestamp in ISO 8601 GMT format (YYYY-MM-DD'T'hh:mm:ss.sssZ) */
-  collected_at: string;
+  last_watched_at: string;
 };
 
 export type TraktWatchedProgressSeason = BaseTraktProgressSeason & {

src/services/trakt-client/api/endpoints/shows.endpoint.ts

@@ -509,12 +509,12 @@ export const shows = {
      *
      * @auth required
      *
-     * @see [get-show-watched-progress]{@link https://trakt.docs.apiary.io/#reference/shows/collection-progress/get-show-watched-progress}
+     * @see [get-show-watched-progress]{@link https://trakt.docs.apiary.io/#reference/shows/watched-progress/get-show-watched-progress}
      */
     watched: new TraktClientEndpoint<
       {
         /** Trakt ID, Trakt slug, or IMDB ID */
-        id: string;
+        id: number | string;
         /** include any hidden seasons */
         hidden?: boolean;
         /** include specials as season 0 */

src/services/trakt.service.ts

@@ -299,9 +299,16 @@ export class TraktService {
     },
   );
 
-  static async progress() {
-    const response = await this.cachedProgress();
-    if (!response.ok) throw response;
-    return response.json();
-  }
+  static progress = {
+    async onDeck() {
+      const response = await TraktService.cachedProgress();
+      if (!response.ok) throw response;
+      return response.json();
+    },
+
+    async show(showId: string | number) {
+      const response = await TraktService.traktClient.shows.progress.watched.cached({ id: showId });
+      return response.json();
+    },
+  };
 }

src/stores/data/image.store.ts

@@ -54,7 +54,7 @@ export const useImageStore = defineStore('data.image', () => {
   const tmdbConfig = ref<TmdbConfiguration>();
   const images = reactive<ImageStore>(EmptyImageStore);
 
-  const syncSaveImageStore = debounce(
+  const saveState = debounce(
     (_images = images) =>
       Promise.all([
         storage.local.set(`data.image-store.movie`, _images.movie),
@@ -66,7 +66,7 @@ export const useImageStore = defineStore('data.image', () => {
     1000,
   );
 
-  const syncRestoreImageStore = async (seed?: Partial<ImageStore>) => {
+  const restoreState = async (seed?: Partial<ImageStore>) => {
     const [movie, show, season, episode, person] = await Promise.all([
       storage.local.get<Record<string, string>>(`data.image-store.movie`),
       storage.local.get<Record<string, string>>(`data.image-store.show`),
@@ -87,7 +87,7 @@ export const useImageStore = defineStore('data.image', () => {
   const initImageStore = async (config?: TmdbConfiguration) => {
     if (!config) config = await TraktService.tmdbConfiguration();
     tmdbConfig.value = config;
-    return syncRestoreImageStore();
+    return restoreState();
   };
 
   const imageSizes = computed(() => ({
@@ -145,7 +145,7 @@ export const useImageStore = defineStore('data.image', () => {
       if (!image.poster && !image.backdrop) return;
       images[type][key] = image;
 
-      syncSaveImageStore().catch(err => console.error('Failed to save image store', err));
+      saveState().catch(err => console.error('Failed to save image store', err));
       return { image, key, type };
     }
 
@@ -160,7 +160,7 @@ export const useImageStore = defineStore('data.image', () => {
     const image = arrayMax(fetchedImages, 'vote_average', i => !!i.file_path)?.file_path;
     if (!image) return;
     images[type][key] = image;
-    syncSaveImageStore().catch(err => console.error('Failed to save image store', err));
+    saveState().catch(err => console.error('Failed to save image store', err));
     return { image, key, type };
   };
 

src/stores/data/progress.store.ts

@@ -1,19 +1,19 @@
 import { defineStore, storeToRefs } from 'pinia';
 import { ref } from 'vue';
 
-import type { ListScrollItem, ListScrollSourceItem } from '~/models/list-scroll.model';
-
 import type { TraktEpisode } from '~/models/trakt/trakt-episode.model';
 import type { TraktShow } from '~/models/trakt/trakt-show.model';
 
 import { getContent, getTags, getTitle } from '~/components/common/list/use-list-scroll';
+import { type ListScrollItem, type ListScrollSourceItem } from '~/models/list-scroll.model';
 import { type ProgressItem } from '~/models/progress.model';
 import { TraktService } from '~/services/trakt.service';
 import { debounceLoading, useLoadingPlaceholder } from '~/utils/store.utils';
 
-type ProgressListItem = Omit<ListScrollItem, 'posterRef'>;
+type ProgressListItem = Omit<ListScrollItem, 'posterRef' | 'progressRef'>;
 
 const titleRegex = /(.*)\s\d+x\d+\s"([^"]+)"/;
+
 export const progressToListItem = (progress: ProgressItem, index: number): ProgressListItem => {
   const match = titleRegex.exec(progress.fullTitle);
 
@@ -41,6 +41,7 @@ export const progressToListItem = (progress: ProgressItem, index: number): Progr
     title: getTitle({ show, episode }),
     content: getContent({ show, episode }),
     poster,
+    getProgressQuery: () => show?.ids?.trakt,
     date: {
       current: new Date(progress.firstAired),
     },
@@ -78,22 +79,23 @@ export const useProgressStore = defineStore('data.progress', () => {
     }
     if (firstLoad.value) firstLoad.value = false;
 
-    console.info('Fetching progress', progress);
+    console.info('Fetching progress');
     loading.value = true;
     const timeout = debounceLoading(progress, loadingPlaceholder, true);
     try {
-      const items = await TraktService.progress();
+      const items = await TraktService.progress.onDeck();
       progress.value = items.map(progressToListItem);
     } catch (error) {
+      progress.value = [];
+      loading.value = false;
+
       if (error instanceof Response && error.status === 401) {
         console.warn('User is not logged in', error);
         loggedOut.value = true;
-        progress.value = [];
-        loading.value = false;
         return;
       }
+
       console.error(error);
-      progress.value = [];
       throw error;
     } finally {
       clearTimeout(timeout);