feat(checkin): open panels on checkin click

Author: dvcol

package.json

@@ -54,7 +54,7 @@
     "@dvcol/base-http-client": "^1.10.0",
     "@dvcol/common-utils": "^1.4.0",
     "@dvcol/tmdb-http-client": "^1.2.3",
-    "@dvcol/trakt-http-client": "^1.4.0",
+    "@dvcol/trakt-http-client": "^1.4.1",
     "@dvcol/tvdb-http-client": "^1.1.3",
     "@dvcol/web-extension-utils": "^3.0.1",
     "@vue/devtools": "^7.0.15",

pnpm-lock.yaml

@@ -88,8 +88,8 @@ const onBack = () => {
               width="100%"
               class="panel"
               close-on-esc
-              :on-after-leave="onAfterLeave"
               auto-focus
+              :on-after-leave="onAfterLeave"
             >
               <NDrawerContent :native-scrollbar="false">
                 <!--  Header  -->

src/components/AppComponent.vue

@@ -6,6 +6,7 @@ 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 { usePanelItem } from '~/components/views/panel/use-panel-item';
 import { useMovieStore } from '~/stores/data/movie.store';
 import { useShowStore } from '~/stores/data/show.store';
 import { useWatchingStore, useWatchingStoreRefs } from '~/stores/data/watching.store';
@@ -89,17 +90,36 @@ const { onCancel: onCancelWatching } = useCancelWatching(cancel, watching.value?
 const { clearShowWatchedProgress } = useShowStore();
 const { clearMovieWatchedProgress } = useMovieStore();
 
-const onCancel = async () => {
+const onCancel = async (event: MouseEvent) => {
+  event.stopPropagation();
   const cancelled = await onCancelWatching();
   if (!cancelled) return;
   clearShowWatchedProgress();
   clearMovieWatchedProgress();
 };
+
+const { onItemClick } = usePanelItem();
+const onClick = () => {
+  if (!watching.value) return;
+  if (isWatchingMovie(watching.value))
+    onItemClick({
+      type: 'movie',
+      id: watching.value.movie.ids.trakt,
+    });
+  if (isWatchingShow(watching.value))
+    onItemClick({
+      type: 'episode',
+      id: watching.value.episode.ids.trakt,
+      showId: watching.value.show.ids.trakt,
+      seasonNumber: watching.value.episode.season,
+      episodeNumber: watching.value.episode.number,
+    });
+};
 </script>
 
 <template>
   <div class="wrapper">
-    <div class="container" :class="{ watching: isWatching }">
+    <div class="container" :class="{ watching: isWatching }" @click="onClick">
       <span class="left">
         <NIcon class="icon" :component="icon" />
         <div class="column">

src/components/views/checkin/CheckinComponent.vue

@@ -5,41 +5,56 @@ import type { ListScrollItem } from '~/models/list-scroll.model';
 export const usePanelItem = () => {
   const { push, currentRoute } = useRouter();
 
-  const onItemClick = ({ item }: { item: ListScrollItem }) => {
-    const type = item?.type;
-    if (!type) return;
+  const onItemClick = ({
+    type,
+    id,
+    showId,
+    seasonNumber,
+    episodeNumber,
+    item,
+  }: {
+    type?: 'person' | 'movie' | 'show' | 'season' | 'episode';
+    id?: number;
+    showId?: number;
+    seasonNumber?: number;
+    episodeNumber?: number;
+
+    item?: ListScrollItem;
+  }) => {
+    const _type = type ?? item?.type;
+    if (!_type) return;
     const base = currentRoute.value.name?.toString();
     if (!base) return;
-    const id = item?.meta?.ids?.[type]?.trakt;
-    const showId = item?.meta?.ids?.show?.trakt;
-    const seasonNumber = item?.meta?.number?.season;
-    const episodeNumber = item?.meta?.number?.episode;
-    switch (type) {
+    const _id = id ?? item?.meta?.ids?.[_type]?.trakt;
+    const _showId = showId ?? item?.meta?.ids?.show?.trakt;
+    const _seasonNumber = seasonNumber ?? item?.meta?.number?.season;
+    const _episodeNumber = episodeNumber ?? item?.meta?.number?.episode;
+    switch (_type) {
       case 'person':
       case 'movie':
       case 'show':
-        if (!id) return;
+        if (!_id) return;
         return push({
-          name: `${base}-${type}`,
-          params: { [`${type}Id`]: id },
+          name: `${base}-${_type}`,
+          params: { [`${_type}Id`]: _id },
         });
       case 'season':
-        if (showId === undefined || seasonNumber === undefined) return;
+        if (_showId === undefined || _seasonNumber === undefined) return;
         return push({
-          name: `${base}-${type}`,
+          name: `${base}-${_type}`,
           params: {
-            showId,
-            seasonNumber,
+            showId: _showId,
+            seasonNumber: _seasonNumber,
           },
         });
       case 'episode':
-        if (showId === undefined || seasonNumber === undefined || episodeNumber === undefined) return;
+        if (_showId === undefined || _seasonNumber === undefined || _episodeNumber === undefined) return;
         return push({
-          name: `${base}-${type}`,
+          name: `${base}-${_type}`,
           params: {
-            showId,
-            seasonNumber,
-            episodeNumber,
+            showId: _showId,
+            seasonNumber: _seasonNumber,
+            episodeNumber: _episodeNumber,
           },
         });
       default:

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

@@ -60,19 +60,8 @@ const onMovieClick = async ({ item }: { item: ListScrollItem }) => {
     type: 'movie',
   });
   onItemClick({
-    item: {
-      ...item,
-      meta: {
-        ...item.meta,
-        ids: {
-          ...item.meta?.ids,
-          movie: {
-            ...item.meta?.ids?.movie,
-            trakt: lookup.pop()?.movie?.ids?.trakt,
-          },
-        },
-      },
-    },
+    item,
+    id: lookup.pop()?.movie?.ids?.trakt,
   });
 };
 </script>

src/components/views/releases/ReleasesComponent.vue

@@ -105,10 +105,12 @@ export const routes: RouteRecordRaw[] = [
     path: `/${Route.Settings}`,
     name: Route.Settings,
     component: () => import('../components/views/settings/SettingsComponent.vue'),
+    children: panelRoutes(Route.Settings),
   },
   {
     path: `/${Route.About}`,
     name: Route.About,
     component: () => import('../components/views/about/AboutComponent.vue'),
+    children: panelRoutes(Route.About),
   },
 ];