feat(checkin): implement checkin button & progress state evict

Author: dvcol

src/components/views/checkin/CheckinComponent.vue

@@ -1,19 +1,21 @@
 <script lang="ts" setup>
-import { elapsedTime } from '@dvcol/common-utils/common/date';
 import { formatTime } from '@dvcol/common-utils/common/format';
-import { NButton, NIcon, NTooltip, useDialog } from 'naive-ui';
-import { computed, defineProps, onBeforeMount, type Ref, ref, watch } from 'vue';
+import { NButton, NIcon, NTooltip } from 'naive-ui';
+import { computed, defineProps } from 'vue';
 
 import IconCancel from '~/components/icons/IconCancel.vue';
 import IconMovie from '~/components/icons/IconMovie.vue';
 import IconScreen from '~/components/icons/IconScreen.vue';
+import { useMovieStore } from '~/stores/data/movie.store';
+import { useShowStore } from '~/stores/data/show.store';
+import { useWatchingStore, useWatchingStoreRefs } from '~/stores/data/watching.store';
+import { useI18n } from '~/utils/i18n.utils';
 import {
   isWatchingMovie,
   isWatchingShow,
-  useWatchingStore,
-  useWatchingStoreRefs,
-} from '~/stores/data/watching.store';
-import { useI18n } from '~/utils/i18n.utils';
+  useCancelWatching,
+  useWatchingProgress,
+} from '~/utils/watching.utils';
 
 defineProps({
   parentElement: {
@@ -51,38 +53,22 @@ const episode = computed(() => {
   )} ${watching.value.episode.number}`;
 });
 
-const now = ref(new Date());
+const {
+  elapsed: elapsedSeconds,
+  duration: durationSeconds,
+  progress,
+} = useWatchingProgress(watching);
 
-const elapsedSeconds = computed(() => {
-  if (!watching.value) return 0;
-  if (!watching.value.started_at) return 0;
-  return elapsedTime(now.value, new Date(watching.value.started_at));
-});
 const elapsed = computed(() => {
   if (!elapsedSeconds.value) return '';
   return formatTime(elapsedSeconds.value);
 });
 
-const durationSeconds = computed(() => {
-  if (!watching.value) return 0;
-  if (!watching.value.started_at) return 0;
-  if (!watching.value.expires_at) return 0;
-  return elapsedTime(
-    new Date(watching.value.expires_at),
-    new Date(watching.value.started_at),
-  );
-});
 const duration = computed(() => {
   if (!durationSeconds.value) return '';
   return formatTime(durationSeconds.value);
 });
 
-const progress = computed(() => {
-  if (!durationSeconds.value) return 0;
-  if (!elapsedSeconds.value) return 0;
-  return `${(elapsedSeconds.value / durationSeconds.value) * 100}%`;
-});
-
 const type = computed(() => {
   if (!watching.value) return '';
   return i18n(watching.value.type);
@@ -99,52 +85,16 @@ const started = computed(() => {
   return new Date(watching.value.started_at).toLocaleString();
 });
 
-const dialog = useDialog();
-const onCancel = () => {
-  dialog.error({
-    title: i18n(`dialog_cancel_${watching.value?.action ?? 'checkin'}`),
-    content: i18n('dialog_cancel_content'),
-    positiveText: i18n('yes', 'common', 'button'),
-    negativeText: i18n('no', 'common', 'button'),
-    bordered: false,
-    style: {
-      width: '20rem',
-      background: 'var(--bg-black-80)',
-      backdropFilter: 'var(--bg-blur-10)',
-      whiteSpace: 'pre-line',
-    },
-    positiveButtonProps: {
-      quaternary: true,
-      type: 'success',
-      ghost: false,
-      bordered: false,
-    },
-    negativeButtonProps: {
-      quaternary: true,
-      type: 'error',
-      ghost: false,
-      bordered: false,
-    },
-    onPositiveClick: () => cancel(),
-  });
-};
+const { onCancel: onCancelWatching } = useCancelWatching(cancel, watching.value?.action);
+const { clearShowWatchedProgress } = useShowStore();
+const { clearMovieWatchedProgress } = useMovieStore();
 
-const interval: Ref<ReturnType<typeof setInterval> | undefined> = ref();
-onBeforeMount(() => {
-  watch(
-    isWatching,
-    value => {
-      if (value) {
-        interval.value = setInterval(() => {
-          now.value = new Date();
-        }, 1000);
-      } else if (interval.value) {
-        clearInterval(interval.value);
-      }
-    },
-    { immediate: true },
-  );
-});
+const onCancel = async () => {
+  const cancelled = await onCancelWatching();
+  if (!cancelled) return;
+  clearShowWatchedProgress();
+  clearMovieWatchedProgress();
+};
 </script>
 
 <template>
@@ -191,7 +141,7 @@ onBeforeMount(() => {
         </NTooltip>
       </span>
     </div>
-    <div class="background" :style="{ '--progress': progress }" />
+    <div class="background" :style="{ '--progress': `${progress}%` }" />
   </div>
 </template>
 

src/components/views/panel/MoviePanel.vue

@@ -13,6 +13,7 @@ import {
   PanelButtonsOption,
   type PanelButtonsOptions,
 } from '~/components/views/panel/use-panel-buttons';
+import { NotificationService } from '~/services/notification.service';
 import { ResolveExternalLinks } from '~/settings/external.links';
 import {
   DefaultListId,
@@ -23,9 +24,15 @@ import {
   useListStore,
 } from '~/stores/data/list.store';
 import { useMovieStore, useMovieStoreRefs } from '~/stores/data/movie.store';
+import { useWatchingStore, useWatchingStoreRefs } from '~/stores/data/watching.store';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 import { useLinksStore } from '~/stores/settings/links.store';
 import { useI18n } from '~/utils/i18n.utils';
+import {
+  isWatchingMovie,
+  useCancelWatching,
+  useWatchingProgress,
+} from '~/utils/watching.utils';
 
 const props = defineProps({
   movieId: {
@@ -159,7 +166,7 @@ const onCollectionUpdate = async (
 
   const _id = movie.value?.ids?.trakt;
   if (_id === undefined) return;
-  changeMovieCollected(_id, value === PanelButtonsOption.Remove);
+  return changeMovieCollected(_id, value === PanelButtonsOption.Remove);
 };
 
 const onWatchedUpdate = async (
@@ -185,7 +192,7 @@ const onWatchedUpdate = async (
 
   const _id = movie.value?.ids?.trakt;
   if (_id === undefined) return;
-  changeMovieWatched(_id, value === PanelButtonsOption.Remove);
+  return changeMovieWatched(_id, value === PanelButtonsOption.Remove);
 };
 
 const i18n = useI18n('movie', 'panel');
@@ -204,6 +211,32 @@ const titleUrl = computed(() => {
   });
 });
 
+const { watching, loading: checkinLoading } = useWatchingStoreRefs();
+const { progress } = useWatchingProgress(watching);
+const isWatching = computed(() => {
+  if (!watching.value) return false;
+  if (isWatchingMovie(watching.value))
+    return watching.value.movie?.ids?.trakt.toString() === movieId.value;
+  return false;
+});
+
+const { cancel: cancelCheckin, checkin } = useWatchingStore();
+
+const { onCancel } = useCancelWatching(cancelCheckin);
+const onCheckin = async (cancel: boolean) => {
+  if (cancel) {
+    const cancelled = await onCancel();
+    if (!cancelled) return;
+  } else if (!movie.value?.ids?.trakt) {
+    return NotificationService.error(
+      i18n('checkin_failed', 'watching'),
+      new Error('No movie id'),
+    );
+  } else await checkin({ movie: { ids: movie.value.ids } });
+
+  await fetchMovieWatched(true);
+};
+
 const { openTab } = useLinksStore();
 
 onMounted(() => {
@@ -259,9 +292,13 @@ onMounted(() => {
       :active-loading="listLoading"
       :active-lists="activeLists"
       :has-release="!!releaseDate"
+      :watching="isWatching"
+      :watch-progress="progress"
+      :watch-loading="checkinLoading"
       @on-list-update="onListUpdate"
       @on-collection-update="onCollectionUpdate"
       @on-watched-update="onWatchedUpdate"
+      @on-checkin="onCheckin"
     />
 
     <MoviePanelOverview :movie="movie" />

src/components/views/panel/MoviePanelButtons.vue

@@ -60,7 +60,7 @@ const props = defineProps({
     type: Number,
     required: false,
   },
-  checkinLoading: {
+  watchLoading: {
     type: Boolean,
     required: false,
   },
@@ -209,12 +209,11 @@ onMounted(() => fetchLists());
     <!--  Check-in  -->
     <NFlex class="button-container checkin" justify="center" align="center">
       <PanelButtonProgress
-        :filled="watching"
-        :percentage="watchProgress"
-        :loading="checkinLoading"
+        :percentage="watching ? watchProgress : 0"
+        :loading="watchLoading"
         @click="onCheckin"
       >
-        {{ i18n('checkin', 'common', 'button') }}
+        {{ i18n(watching ? 'cancel' : 'checkin', 'common', 'button') }}
       </PanelButtonProgress>
     </NFlex>
   </div>
@@ -224,7 +223,7 @@ onMounted(() => fetchLists());
 .panel-buttons {
   display: flex;
   flex-wrap: wrap;
-  gap: 1.25rem 1.5rem;
+  gap: 1rem;
   align-items: center;
   justify-content: center;
   width: 100%;

src/components/views/panel/PanelButtonProgress.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
-import { type ButtonProps, NButton, NIcon } from 'naive-ui';
+import { type ButtonProps, NButton, NIcon, NTooltip } from 'naive-ui';
 
 import { computed, type PropType, toRefs } from 'vue';
 
 import IconConfirmCircle from '~/components/icons/IconConfirmCircle.vue';
+import { useI18n } from '~/utils/i18n.utils';
+
+const i18n = useI18n('common');
 
 const props = defineProps({
   filled: {
@@ -31,6 +34,11 @@ const progress = computed(() => {
   if (percentage?.value === undefined) return false;
   return percentage.value > 0 && percentage.value < 100;
 });
+
+const percentageLabel = computed(() => {
+  if (percentage?.value) return Math.round(percentage.value);
+  return 0;
+});
 </script>
 
 <template>
@@ -43,20 +51,32 @@ const progress = computed(() => {
       '--progress-color': `var(--color-${type}-dark)`,
     }"
   >
-    <NButton
-      class="button"
-      :class="{ filled, progress }"
-      round
-      :secondary="!filled"
-      :disabled="loading"
-      :loading="loading"
-      :type="type"
-    >
-      <template #icon>
-        <NIcon :component="IconConfirmCircle" />
+    <NTooltip class="progress-tooltip" :disabled="!progress" :delay="100">
+      <slot name="tooltip">
+        <div>
+          <span class="metric">{{ percentageLabel }}</span>
+          <span>%</span>
+          <span>&nbsp;</span>
+          <span>{{ i18n('watched', 'common', 'button') }}</span>
+        </div>
+      </slot>
+      <template #trigger>
+        <NButton
+          class="button"
+          :class="{ filled, progress }"
+          round
+          :secondary="!filled"
+          :disabled="loading"
+          :loading="loading"
+          :type="type"
+        >
+          <template #icon>
+            <NIcon :component="IconConfirmCircle" />
+          </template>
+          <span><slot /></span>
+        </NButton>
       </template>
-      <span><slot /></span>
-    </NButton>
+    </NTooltip>
   </div>
 </template>
 
@@ -93,4 +113,10 @@ const progress = computed(() => {
     var(--n-color) 100%
   );
 }
+
+.metric {
+  color: var(--white);
+  font-weight: bolder;
+  font-variant-numeric: tabular-nums;
+}
 </style>