feat(panel): adds progress to picker

Author: dvcol

src/components/AppComponent.vue

@@ -131,6 +131,7 @@ header {
 
   &.open > :first-child {
     background: var(--bg-color-hover);
+    backdrop-filter: blur(var(--bg-blur-20));
   }
 }
 

src/components/common/buttons/ButtonLink.vue

@@ -24,10 +24,10 @@ defineProps({
   >
     <NButton
       tag="a"
-      quaternary
+      :secondary="isActive"
+      :quaternary="!isActive"
       class="button-link"
       :class="$attrs.class"
-      :type="isActive ? 'primary' : 'default'"
       round
       size="small"
       :href="href"

src/components/common/list/ListItemPanel.vue

@@ -13,7 +13,7 @@ import { computed, defineProps, type PropType, ref, toRefs } from 'vue';
 
 import PosterPlaceholder from '~/assets/images/poster-placholder.webp';
 import TagLink from '~/components/common/buttons/TagLink.vue';
-import { type ListScrollItem } from '~/models/list-scroll.model';
+import { type ListScrollItem, type ShowProgress } from '~/models/list-scroll.model';
 
 import { useShowStore } from '~/stores/data/show.store';
 import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
@@ -76,11 +76,11 @@ const tags = computed(
 
 const { getShowProgress } = useShowStore();
 
-const progress = computed(() => {
-  if (item?.value?.progress) return item.value.progress;
-  if (item?.value?.progressRef) return item.value.progressRef.value;
+const progress = computed<ShowProgress | undefined>(() => {
+  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();
+  const id = item.value?.getProgressQuery();
   if (!id) return;
   return getShowProgress(id).value;
 });
@@ -148,7 +148,7 @@ const onTagClick = (url?: string) => {
             <div>
               <span class="metric">{{ progress?.completed }}</span>
               <span> / </span>
-              <span class="metric">{{ progress?.total }}</span>
+              <span class="metric">{{ progress?.aired }}</span>
               <span>&nbsp;</span>
               <span>{{ i18n('tooltip_episodes') }}</span>
             </div>
@@ -159,7 +159,7 @@ const onTagClick = (url?: string) => {
               <span>{{ i18n('tooltip_watched') }}</span>
             </div>
             <div>
-              <span class="metric">{{ progress?.total - progress?.completed }}</span>
+              <span class="metric">{{ progress?.aired - progress?.completed }}</span>
               <span>&nbsp;</span>
               <span>{{ i18n('tooltip_remaining') }}</span>
             </div>

src/components/container/ContainerComponent.ce.vue

@@ -166,7 +166,7 @@ const root = ref<HTMLElement>();
 
 .n-drawer {
   background: linear-gradient(to right, var(--bg-color-60) 5%, var(--bg-color-90));
-  backdrop-filter: blur(var(--bg-blur));
+  backdrop-filter: blur(var(--bg-blur-20));
 }
 
 .n-message-wrapper .n-message,

src/components/views/panel/ShowPanel.vue

@@ -40,6 +40,13 @@ const episode = ref<TraktEpisodeExtended>();
 
 const { showId, seasonNumber, episodeNumber } = toRefs(props);
 
+const { getShowProgress } = useShowStore();
+
+const progress = computed(() => {
+  if (!showId?.value) return;
+  return getShowProgress(showId.value).value;
+});
+
 const seasonNb = computed(() => {
   if (seasonNumber?.value === undefined) return;
   const _seasonNumber = Number(seasonNumber.value);

src/components/views/panel/ShowPanelPicker.vue

@@ -5,13 +5,19 @@ import { computed, type PropType, toRefs } from 'vue';
 
 import { useRoute } from 'vue-router';
 
+import type { ShowProgress } from '~/models/list-scroll.model';
 import type { TraktEpisodeShort } from '~/models/trakt/trakt-episode.model';
 import type { ShowSeasons } from '~/stores/data/show.store';
 
 import ButtonLink from '~/components/common/buttons/ButtonLink.vue';
 import { useI18n } from '~/utils';
 
 const props = defineProps({
+  mode: {
+    type: String as PropType<'show' | 'season' | 'episode'>,
+    required: false,
+    default: 'episode',
+  },
   seasons: {
     type: Object as PropType<ShowSeasons>,
     required: false,
@@ -20,34 +26,40 @@ const props = defineProps({
     type: Array as PropType<TraktEpisodeShort[]>,
     required: false,
   },
-  mode: {
-    type: String as PropType<'show' | 'season' | 'episode'>,
+  progress: {
+    type: Object as PropType<ShowProgress>,
     required: false,
-    default: 'episode',
   },
 });
 
-const { seasons, episodes } = toRefs(props);
+const { seasons, episodes, progress } = toRefs(props);
 
 const { meta } = useRoute();
 
 const seasonsLinks = computed(() => {
   if (!seasons?.value) return;
-  return Object.entries(seasons.value).map(([_number, _season]) => ({
-    number: Number(_number),
-    link: { name: `${meta.base}-season`, params: { seasonNumber: _number } },
-  }));
+  return Object.entries(seasons.value).map(([_number, _season]) => {
+    const number = Number(_number);
+    return {
+      number,
+      link: { name: `${meta.base}-season`, params: { seasonNumber: _number } },
+      finished: progress?.value?.seasons?.find(s => s.number === number)?.finished,
+    };
+  });
 });
 
 const episodeLinks = computed(() => {
   if (!episodes?.value) return;
   if (!episodes?.value?.length) return [];
-  return episodes.value.map(_episode => ({
+  return episodes.value.map((_episode, i) => ({
     number: _episode.number,
     link: {
       name: `${meta.base}-episode`,
       params: { episodeNumber: _episode.number, seasonNumber: _episode.season },
     },
+    finished: progress?.value?.seasons
+      ?.find(s => s.number === _episode.season)
+      ?.episodes?.find(e => e.number === _episode.number)?.completed,
   }));
 });
 
@@ -62,9 +74,10 @@ const i18n = useI18n('panel', 'picker');
       <NFlex class="numbers" size="small">
         <template v-if="seasonsLinks?.length">
           <ButtonLink
-            v-for="{ link, number } in seasonsLinks"
+            v-for="{ link, number, finished } in seasonsLinks"
             :key="`season-${number}`"
             :link="{ to: link }"
+            :button="{ type: finished ? 'primary' : undefined }"
           >
             {{ number }}
           </ButtonLink>
@@ -80,10 +93,11 @@ const i18n = useI18n('panel', 'picker');
       <NFlex class="numbers episodes" size="small">
         <template v-if="episodeLinks?.length">
           <ButtonLink
-            v-for="{ link, number } in episodeLinks"
+            v-for="{ link, number, finished } in episodeLinks"
             :key="`episode-${ number }`"
             v-slot="{ isActive }"
             :link="{ to: link }"
+            :button="{ type: finished ? 'primary' : undefined }"
             class="link"
           >
             <span class="label" :class="{ active: isActive }">{{ number }}</span>

src/components/views/panel/use-panel-item.ts

@@ -25,7 +25,7 @@ export const usePanelItem = () => {
           params: { [`${type}Id`]: id },
         });
       case 'season':
-        if (!showId || !seasonNumber) return;
+        if (showId === undefined || seasonNumber === undefined) return;
         return push({
           name: `${base}-${type}`,
           params: {
@@ -34,7 +34,7 @@ export const usePanelItem = () => {
           },
         });
       case 'episode':
-        if (!showId || !seasonNumber || !episodeNumber) return;
+        if (showId === undefined || seasonNumber === undefined || episodeNumber === undefined) return;
         return push({
           name: `${base}-${type}`,
           params: {

src/models/list-scroll.model.ts

@@ -40,27 +40,28 @@ export type ListScrollItemTag = {
   i18n?: boolean | string[];
 } & TagLink;
 
-export type ListScrollItemProgressEpisode = BaseTraktProgressEpisode & {
+export type EpisodeProgress = BaseTraktProgressEpisode & {
   date: Date;
 };
 
-export type ListScrollItemProgressSeason = BaseTraktProgressSeason & {
-  episodes: ListScrollItemProgressEpisode[];
+export type SeasonProgress = BaseTraktProgressSeason & {
+  episodes: EpisodeProgress[];
+  percentage: number;
+  finished: boolean;
 };
 
 export const ListScrollItemProgressType = {
   collection: 'collection',
   watched: 'watched',
 } as const;
 
-export type ListScrollItemProgress = BaseTraktProgress & {
+export type ShowProgress = BaseTraktProgress & {
   id: string | number;
   type: (typeof ListScrollItemProgressType)[keyof typeof ListScrollItemProgressType];
   date: Date;
-  seasons: ListScrollItemProgressSeason[];
+  seasons: SeasonProgress[];
   percentage: number;
-  completed: number;
-  total: number;
+  finished: boolean;
 };
 
 export const ListScrollItemType = {
@@ -85,8 +86,8 @@ export type ListScrollItem<T = Record<string, any>> = Omit<PosterItem, 'type'> &
   content?: string;
   tags?: ListScrollItemTag[];
 
-  progress?: ListScrollItemProgress;
-  progressRef?: Ref<ListScrollItemProgress | undefined>;
+  progress?: ShowProgress;
+  progressRef?: Ref<ShowProgress | undefined>;
   getProgressQuery?: () => string | number | undefined;
 
   meta?: T;

src/services/trakt.service.ts

@@ -312,7 +312,7 @@ export class TraktService {
     },
 
     async show(showId: string | number) {
-      const response = await TraktService.traktClient.shows.progress.watched.cached({ id: showId });
+      const response = await TraktService.traktClient.shows.progress.watched.cached({ id: showId, specials: true, count_specials: false });
       return response.json();
     },
   };

src/stores/data/show.store.ts

@@ -7,7 +7,7 @@ import type { TraktWatchedProgress } from '~/models/trakt/trakt-progress.model';
 import type { TraktSeasonExtended } from '~/models/trakt/trakt-season.model';
 import type { TraktShowExtended } from '~/models/trakt/trakt-show.model';
 
-import { type ListScrollItemProgress, ListScrollItemProgressType } from '~/models/list-scroll.model';
+import { ListScrollItemProgressType, type ShowProgress } from '~/models/list-scroll.model';
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { asyncRefGetter } from '~/utils/vue.utils';
@@ -24,19 +24,18 @@ type LoadingDictionary = Record<string, boolean>;
 type SeasonEpisodesLoadingDictionary = Record<string, Record<number, boolean>>;
 type EpisodeLoadingDictionary = Record<string, Record<number, Record<number, boolean>>>;
 
-const watchProgressToListProgress = (progress: TraktWatchedProgress, id: string | number): ListScrollItemProgress => {
-  const total: number = progress.aired;
-  const { completed } = progress;
-  const percentage = (completed / total) * 100;
+const watchProgressToListProgress = (progress: TraktWatchedProgress, id: string | number): ShowProgress => {
   return {
     id,
-    percentage,
-    total,
     ...progress,
+    percentage: (progress.completed / progress.aired) * 100,
+    finished: progress.completed === progress.aired,
     type: ListScrollItemProgressType.watched,
     date: new Date(progress.last_watched_at),
     seasons: progress.seasons.map(season => ({
       ...season,
+      percentage: (season.completed / season.aired) * 100,
+      finished: season.completed === season.aired,
       episodes: season.episodes.map(episode => ({
         ...episode,
         date: new Date(episode.last_watched_at),

src/styles/base.scss

@@ -17,7 +17,9 @@
   --vt-c-text-dark-2: rgb(235 235 235 / 64%);
 
   /* ui color variables */
-  --bg-blur: 2px;
+  --bg-blur: 1px;
+  --bg-blur-20: 20px;
+  --bg-blur-40: 40px;
   --bg-black: rgba(0 0 0);
   --bg-black-20: rgba(0 0 0 / 20%);
   --bg-black-30: rgba(0 0 0 / 30%);

src/styles/mixin.scss

@@ -2,16 +2,18 @@
   $from: var(--bg-color),
   $to: var(--bg-color-hover),
   $blur: var(--bg-blur),
+  $blur-hover: var(--bg-blur-20),
   $transition: 0.5s var(--n-bezier),
   $additional-transition: ""
 ) {
   background: $from;
   backdrop-filter: blur($blur);
   transition: all $transition;
   will-change: color, background, background-color, backdrop-filter, box-shadow,
-    border-color, scale, opacity;
+    border-color, scale, opacity, backdrop-filter;
 
   &:hover {
     background: $to;
+    backdrop-filter: blur($blur-hover);
   }
 }