fix(panel): fix panel routing and shell loading

Author: dvcol

src/components/AppComponent.vue

@@ -13,16 +13,12 @@ import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 const { isAuthenticated } = useAuthSettingsStoreRefs();
 const { currentRoute, push, back } = useRouter();
 
-const origin = ref();
 const panel = ref(false);
 
 watch(
   currentRoute,
   (_next, _prev) => {
-    const isPanel = !!_next.meta?.panel;
-    panel.value = isPanel;
-    if (origin.value && isPanel) return;
-    origin.value = isPanel ? _prev : undefined;
+    panel.value = !!_next.meta?.panel;
   },
   {
     immediate: true,
@@ -32,9 +28,9 @@ watch(
 const asideRef = ref();
 
 const onAfterLeave = () => {
-  if (!origin.value) return;
-  push(origin.value);
-  origin.value = undefined;
+  const base = currentRoute.value?.meta?.base as string;
+  if (!base) return;
+  push({ name: base });
 };
 
 const onClose = () => {

src/components/common/list/ListItem.vue

@@ -305,41 +305,6 @@ const onClick = () => emit('onItemClick', { item: item?.value });
       border-top: 1px solid transparent;
     }
   }
-
-  .poster {
-    flex: 0 0 var(--poster-width, 5.3125rem);
-    justify-content: center;
-    width: var(--poster-width, 5.3125rem);
-    height: var(--poster-height, 8rem);
-    opacity: 1;
-    will-change: opacity;
-
-    &.loading {
-      opacity: 0;
-    }
-
-    &.transition {
-      transition: opacity 0.5s var(--n-bezier);
-
-      &.loading {
-        transition: opacity 0.1s;
-      }
-    }
-
-    &.episode {
-      flex: 0 0 var(--poster-width, 14.23rem);
-      width: var(--poster-width, 14.23rem);
-    }
-
-    &.placeholder {
-      position: absolute;
-      background-color: #111;
-    }
-
-    &:not(.placeholder) {
-      z-index: layers.$in-front;
-    }
-  }
 }
 </style>
 

src/components/common/list/use-list-scroll.ts

@@ -142,7 +142,7 @@ export const useListScroll = <T extends ListScrollSourceItemWithDate<D>, D exten
       if (!_item.type) _item.type = getType(item);
       if (!_item.title) _item.title = getTitle(item);
       if (!_item.content) _item.content = getContent(item);
-      if (!_item.posterRef) _item.posterRef = ref<string | undefined>(undefined);
+      if (!_item.posterRef) _item.posterRef = ref<string>();
       if (!_item.getPosterQuery) _item.getPosterQuery = getPosterQuery(item, _item.type);
       if (!_item.tags) _item.tags = getTags(item, _item.type);
 

src/components/common/navbar/NavbarComponent.vue

@@ -26,6 +26,12 @@ const routes = [
   Route.Search,
 ];
 
+const activeRoute = computed(() => {
+  const _name = route.name?.toString();
+  if (!_name) return;
+  return routes.find(r => r === _name) ?? routes.find(r => _name.startsWith(r));
+});
+
 const isHover = ref(false);
 const isFocus = ref(false);
 
@@ -53,7 +59,7 @@ const navElement = ref<HTMLElement>();
     @focusout="isFocus = false"
   >
     <NTabs
-      :value="route.name?.toString()"
+      :value="activeRoute"
       class="tabs"
       type="segment"
       justify-content="space-evenly"

src/components/common/poster/PosterComponent.vue

@@ -23,7 +23,7 @@ const props = defineProps({
     default: false,
   },
   size: {
-    type: Number,
+    type: [Number, String] as PropType<number | 'original'>,
     required: false,
     default: 300,
   },
@@ -37,10 +37,12 @@ const onLoad = () => {
   imgLoaded.value = true;
 };
 
+const localPoster = ref<string>();
+
 const resolvedPoster = computed(() => {
   if (poster?.value) return poster.value;
   if (item.value.poster) return item.value.poster;
-  const image = item.value.posterRef?.value;
+  const image = (item.value.posterRef ?? localPoster)?.value;
   if (!image) return;
   if (typeof image === 'string') return image;
   if (episode.value && 'backdrop' in image) return image.backdrop;
@@ -57,9 +59,11 @@ const timeout = ref();
 const { getImageUrl } = useImageStore();
 
 const getPosters = (_item: PosterItem) => {
+  if (poster?.value) return;
+  if (_item.poster) return;
+
   imgLoaded.value = false;
   if (_item.posterRef?.value) return;
-  if (!_item.posterRef) return;
   const query = _item.getPosterQuery?.();
   if (!query) return;
   if (!episode.value && _item.type === 'episode') {
@@ -70,7 +74,7 @@ const getPosters = (_item: PosterItem) => {
     if (imgLoaded.value) return;
     transition.value = true;
   }, 100);
-  getImageUrl(query, size.value, _item.posterRef);
+  getImageUrl(query, size.value, _item.posterRef ?? localPoster);
 };
 
 watch(item, getPosters, { immediate: true, flush: 'post' });

src/components/views/panel/ShowPanel.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
 import { NFlex, NSkeleton } from 'naive-ui';
-import { onActivated, onDeactivated, ref, toRefs } from 'vue';
+import { computed, onActivated, onDeactivated, ref, toRefs } from 'vue';
 
+import { useRoute } from 'vue-router';
+
+import type { PosterItem } from '~/models/poster.model';
 import type { TraktEpisodeExtended } from '~/models/trakt/trakt-episode.model';
 import type { TraktShowExtended } from '~/models/trakt/trakt-show.model';
 
+import type { ImageQuery } from '~/stores/data/image.store';
+
+import PosterComponent from '~/components/common/poster/PosterComponent.vue';
 import { type ShowSeasons, useShowStore } from '~/stores/data/show.store';
 
 const props = defineProps({
@@ -30,18 +36,56 @@ const episode = ref<TraktEpisodeExtended>();
 
 const { showId, seasonNumber, episodeNumber } = toRefs(props);
 
+const seasonNb = computed(() => {
+  if (!seasonNumber?.value) return;
+  const _seasonNumber = Number(seasonNumber.value);
+  if (Number.isNaN(_seasonNumber)) return;
+  return _seasonNumber;
+});
+
+const episodeNb = computed(() => {
+  if (!episodeNumber?.value) return;
+  const _episodeNumber = Number(episodeNumber.value);
+  if (Number.isNaN(_episodeNumber)) return;
+  return _episodeNumber;
+});
+
+const size = computed(() => window?.innerWidth ?? 800 / 2);
+
+const { query } = useRoute();
+const posterItem = computed<PosterItem | undefined>(() => {
+  const poster = query.poster?.toString();
+  if (poster) return { poster } satisfies PosterItem;
+
+  const tmdb = query.tmdb?.toString();
+  if (!tmdb) return;
+  const imageQuery: ImageQuery = {
+    id: tmdb,
+    season: seasonNb.value,
+    episode: episodeNb.value,
+    type: 'show',
+  };
+  if (episodeNb.value) imageQuery.type = 'episode';
+  else if (seasonNb.value) imageQuery.type = 'season';
+
+  return {
+    posterRef: ref(),
+    getPosterQuery: () => imageQuery,
+  };
+});
+
 const subscriptions = new Set<() => void>();
 
 onActivated(() => {
   if (showId?.value) subscriptions.add(getShowRef(showId.value, show).unsub);
   if (showId?.value) subscriptions.add(getShowSeasonsRef(showId.value, seasons).unsub);
-  if (showId?.value && seasonNumber?.value && episodeNumber?.value) {
+  if (showId?.value && seasonNb?.value && episodeNb?.value) {
     subscriptions.add(
       getShowEpisodeRef(
         {
           id: showId.value,
-          season: Number(seasonNumber.value),
-          episode: Number(episodeNumber.value),
+          season: seasonNb.value,
+          episode: episodeNb.value,
         },
         episode,
       ).unsub,
@@ -59,14 +103,25 @@ onDeactivated(() => {
 </script>
 
 <template>
-  <NFlex justify="center" align="center"> </NFlex>
-  <div>show {{ showId }}</div>
-  <div v-if="show">show : {{ show?.title }}</div>
-  <NSkeleton v-else />
-  <div>season {{ seasonNumber }}</div>
-  <div v-if="seasons">season {{ Object.keys(seasons) }}</div>
-  <NSkeleton v-else />
-  <div>episode {{ episodeNumber }}</div>
-  <div v-if="episode">episode {{ episode?.title }}</div>
-  <NSkeleton v-else />
+  <NFlex justify="center" align="center" vertical>
+    <NFlex v-if="posterItem" class="poster-container">
+      <PosterComponent :item="posterItem" :episode="!!episodeNumber" :size="size" />
+    </NFlex>
+    <div>show {{ showId }}</div>
+    <div v-if="show">show : {{ show?.title }}</div>
+    <NSkeleton v-else />
+    <div>season {{ seasonNumber }}</div>
+    <div v-if="seasons">season {{ Object.keys(seasons) }}</div>
+    <NSkeleton v-else />
+    <div>episode {{ episodeNumber }}</div>
+    <div v-if="episode">episode {{ episode?.title }}</div>
+    <NSkeleton v-else
+  /></NFlex>
 </template>
+
+<style lang="scss" scoped>
+.poster-container {
+  --poster-width: 50dvw;
+  --poster-height: calc(var(--poster-width) * (9 / 16));
+}
+</style>

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

@@ -10,6 +10,7 @@ export const usePanelItem = () => {
     if (!type) return;
     const { path } = currentRoute.value;
     if (!path) return;
+    const base = path.split('/')[1];
     const id = item?.meta?.ids?.[type]?.trakt;
     const showId = item?.meta?.ids?.show?.trakt;
     const seasonNumber = item?.meta?.number?.season;
@@ -19,14 +20,40 @@ export const usePanelItem = () => {
       case 'movie':
       case 'show':
         if (!id) return;
-        return push(`${path}/${type}/${id}`);
+        return push({
+          name: `${base}-${type}`,
+          params: { [`${type}Id`]: id },
+          query: {
+            poster: item?.poster,
+            tmdb: item?.meta?.ids?.[type]?.tmdb,
+          },
+        });
       case 'season':
         if (!showId || !seasonNumber) return;
-        return push({ path: `${path}/show/${showId}/${type}/${seasonNumber}` });
+        return push({
+          name: `${base}-${type}`,
+          params: {
+            showId,
+            seasonNumber,
+          },
+          query: {
+            poster: item?.poster,
+            tmdb: item?.meta?.ids?.show?.tmdb,
+          },
+        });
       case 'episode':
         if (!showId || !seasonNumber || !episodeNumber) return;
         return push({
-          path: `${path}/show/${showId}/season/${seasonNumber}/${type}/${episodeNumber}`,
+          name: `${base}-${type}`,
+          params: {
+            showId,
+            seasonNumber,
+            episodeNumber,
+          },
+          query: {
+            poster: item?.poster,
+            tmdb: item?.meta?.ids?.show?.tmdb,
+          },
         });
       default:
         break;