feat(panel): adds person & movie basic panels

Author: dvcol

src/components/views/panel/MoviePanel.vue

@@ -1,18 +1,84 @@
 <script setup lang="ts">
-import { onActivated } from 'vue';
+import { NFlex, NSkeleton } from 'naive-ui';
+import { computed, onMounted, onUnmounted, ref, toRefs, watch } from 'vue';
+
+import type { TraktMovieExtended } from '~/models/trakt/trakt-movie.model';
+
+import TitleLink from '~/components/common/buttons/TitleLink.vue';
+import PanelPoster from '~/components/views/panel/PanelPoster.vue';
+import { ResolveExternalLinks } from '~/settings/external.links';
+import { useMovieStore } from '~/stores/data/movie.store';
+import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
+import { deCapitalise } from '~/utils/string.utils';
 
 const props = defineProps({
   movieId: {
     type: String,
-    required: false,
+    required: true,
   },
 });
 
-onActivated(() => {
-  console.info('MovieDrawer activated', props.movieId);
+const { movieId } = toRefs(props);
+
+const movie = ref<TraktMovieExtended>();
+
+const { getMovieRef } = useMovieStore();
+
+const unsub = ref<() => void>();
+
+onMounted(() =>
+  watch(
+    movieId,
+    async id => {
+      unsub.value?.();
+      if (!id) return;
+      unsub.value = getMovieRef(id, movie).unsub;
+    },
+    { immediate: true },
+  ),
+);
+
+onUnmounted(() => {
+  unsub.value?.();
+  movie.value = undefined;
 });
+
+const title = computed(() => {
+  if (!movie.value?.title) return;
+  return deCapitalise(movie.value.title);
+});
+
+const titleUrl = computed(() => {
+  if (!movie.value?.ids?.trakt) return;
+  return ResolveExternalLinks.search({
+    type: 'movie',
+    source: 'trakt',
+    id: movie.value.ids.trakt,
+  });
+});
+
+const { openTab } = useExtensionSettingsStore();
 </script>
 
 <template>
-  <div>movie {{ movieId }}</div>
+  <NFlex justify="center" align="center" vertical>
+    <TitleLink v-if="title" class="show-title" :href="titleUrl" @on-click="openTab">
+      {{ title }}
+    </TitleLink>
+    <NSkeleton v-else class="show-title-skeleton" style="width: 50dvh" round />
+
+    <PanelPoster :tmdb="movie?.ids.tmdb" mode="movie" />
+  </NFlex>
 </template>
+
+<style lang="scss" scoped>
+‡ .show-title:deep(h2),
+.show-title-skeleton {
+  margin-bottom: 1rem;
+}
+
+.show-title-skeleton {
+  height: 1.5rem;
+  margin-top: 0.625rem;
+}
+</style>

src/components/views/panel/PanelPoster.vue

@@ -16,6 +16,10 @@ const props = defineProps({
     type: String as PropType<ImageStoreTypes>,
     required: true,
   },
+  portait: {
+    type: Boolean,
+    required: false,
+  },
   seasonNumber: {
     type: Number,
     required: false,
@@ -61,8 +65,8 @@ const key = computed(() => {
 
 <template>
   <Transition v-if="posterItem" name="scale" mode="out-in">
-    <NFlex :key="key" class="poster-container" :class="{ landscape: mode !== 'season' }">
-      <PosterComponent :item="posterItem" :size="size" backdrop />
+    <NFlex :key="key" class="poster-container" :class="{ landscape: !portait }">
+      <PosterComponent :item="posterItem" :size="size" :backdrop="!portait" />
     </NFlex>
   </Transition>
   <NSkeleton

src/components/views/panel/PersonPanel.vue

@@ -1,18 +1,85 @@
 <script setup lang="ts">
-import { onActivated } from 'vue';
+import { NFlex, NSkeleton } from 'naive-ui';
+import { computed, onMounted, onUnmounted, ref, toRefs, watch } from 'vue';
+
+import type { TraktPersonExtended } from '~/models/trakt/trakt-people.model';
+
+import TitleLink from '~/components/common/buttons/TitleLink.vue';
+import PanelPoster from '~/components/views/panel/PanelPoster.vue';
+
+import { ResolveExternalLinks } from '~/settings/external.links';
+import { usePersonStore } from '~/stores/data/person.store';
+import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
+import { deCapitalise } from '~/utils/string.utils';
 
 const props = defineProps({
   personId: {
     type: String,
-    required: false,
+    required: true,
   },
 });
 
-onActivated(() => {
-  console.info('PersonPanel activated', props.personId);
+const { personId } = toRefs(props);
+
+const person = ref<TraktPersonExtended>();
+
+const { getPersonRef } = usePersonStore();
+
+const unsub = ref<() => void>();
+
+onMounted(() =>
+  watch(
+    personId,
+    async id => {
+      unsub.value?.();
+      if (!id) return;
+      unsub.value = getPersonRef(id, person).unsub;
+    },
+    { immediate: true },
+  ),
+);
+
+onUnmounted(() => {
+  unsub.value?.();
+  person.value = undefined;
+});
+
+const title = computed(() => {
+  if (!person.value?.name) return;
+  return deCapitalise(person.value?.name);
+});
+
+const titleUrl = computed(() => {
+  if (!person.value?.ids?.trakt) return;
+  return ResolveExternalLinks.search({
+    type: 'person',
+    source: 'trakt',
+    id: person.value.ids.trakt,
+  });
 });
+
+const { openTab } = useExtensionSettingsStore();
 </script>
 
 <template>
-  <div>person {{ personId }}</div>
+  <NFlex justify="center" align="center" vertical>
+    <TitleLink v-if="title" class="show-title" :href="titleUrl" @on-click="openTab">
+      {{ title }}
+    </TitleLink>
+    <NSkeleton v-else class="show-title-skeleton" style="width: 50dvh" round />
+
+    <PanelPoster :tmdb="person?.ids.tmdb" mode="person" portait />
+  </NFlex>
 </template>
+
+<style lang="scss" scoped>
+‡ .show-title:deep(h2),
+.show-title-skeleton {
+  margin-bottom: 1rem;
+}
+
+.show-title-skeleton {
+  height: 1.5rem;
+  margin-top: 0.625rem;
+}
+</style>

src/components/views/panel/ShowPanel.vue

@@ -154,6 +154,7 @@ const { openTab } = useExtensionSettingsStore();
     <PanelPoster
       :tmdb="show?.ids.tmdb"
       :mode="panelType"
+      :portait="panelType === 'season'"
       :season-number="seasonNb"
       :episode-number="episodeNb"
     />

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

@@ -294,7 +294,7 @@ export const movies = {
   summary: new TraktClientEndpoint<
     {
       /** Trakt ID, Trakt slug, or IMDB ID */
-      id: string;
+      id: string | number;
     } & TraktApiParamsExtended<typeof TraktApiExtended.Full>,
     TraktMovie<'any'>
   >({

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

@@ -99,7 +99,7 @@ export const people = {
   summary: new TraktClientEndpoint<
     {
       /** Trakt ID, Trakt slug, or IMDB ID */
-      id: string;
+      id: string | number;
     } & TraktApiParamsExtended<typeof TraktApiExtended.Full>,
     TraktPerson<'any'>
   >({

src/services/trakt.service.ts

@@ -8,6 +8,8 @@ import type { TraktEpisodeExtended, TraktEpisodeShort } from '~/models/trakt/tra
 import type { TraktFavoriteGetQuery } from '~/models/trakt/trakt-favorite.model';
 import type { TraktHistoryGetQuery } from '~/models/trakt/trakt-history.model';
 import type { TraktList, TraktListItemsGetQuery } from '~/models/trakt/trakt-list.model';
+import type { TraktMovieExtended } from '~/models/trakt/trakt-movie.model';
+import type { TraktPersonExtended } from '~/models/trakt/trakt-people.model';
 import type { TraktSearch } from '~/models/trakt/trakt-search.model';
 import type { TraktSeasonExtended } from '~/models/trakt/trakt-season.model';
 import type { TraktShowExtended } from '~/models/trakt/trakt-show.model';
@@ -342,14 +344,26 @@ export class TraktService {
     return response.json();
   }
 
+  static async movie(id: string | number) {
+    const response = await this.traktClient.movies.summary.cached({ id, extended: 'full' });
+    return response.json() as Promise<TraktMovieExtended>;
+  }
+
+  static async person(id: string | number) {
+    const response = await this.traktClient.people.summary.cached({ id, extended: 'full' });
+    return response.json() as Promise<TraktPersonExtended>;
+  }
+
   static evict = {
-    tmdb: TraktService.caches.tmdb.clear,
-    trakt: TraktService.caches.trakt.clear,
-    tvdb: TraktService.caches.tvdb.clear,
+    tmdb: () => TraktService.tmdbClient.clearCache(),
+    trakt: () => TraktService.traktClient.clearCache(),
+    tvdb: () => TraktService.tvdbClient.clearCache(),
     history: TraktService.traktClient.sync.history.get.cached.evict,
     watchlist: TraktService.traktClient.sync.watchlist.get.cached.evict,
     favorites: TraktService.traktClient.sync.favorites.get.cached.evict,
     collection: TraktService.traktClient.sync.collection.get.cached.evict,
+    movies: TraktService.traktClient.movies.summary.cached.evict,
+    people: TraktService.traktClient.people.summary.cached.evict,
     shows: TraktService.traktClient.shows.summary.cached.evict,
     seasons: () => Promise.all([TraktService.traktClient.seasons.summary.cached.evict(), TraktService.traktClient.seasons.season.cached.evict()]),
     episodes: TraktService.traktClient.episodes.summary.cached.evict,

src/stores/data/movie.store.ts

@@ -0,0 +1,60 @@
+import { defineStore, storeToRefs } from 'pinia';
+
+import { computed, reactive, ref } from 'vue';
+
+import type { TraktMovieExtended } from '~/models/trakt/trakt-movie.model';
+
+import { NotificationService } from '~/services/notification.service';
+import { TraktService } from '~/services/trakt.service';
+import { asyncRefGetter } from '~/utils/vue.utils';
+
+type MovieDictionary = Record<string, TraktMovieExtended>;
+type LoadingDictionary = Record<string, boolean>;
+
+export const useMovieStore = defineStore('data.movie', () => {
+  const movies = reactive<MovieDictionary>({});
+  const loading = reactive<LoadingDictionary>({});
+
+  const clearState = () => {
+    Object.assign(movies, {});
+    Object.assign(loading, {});
+  };
+
+  const fetchMovie = async (id: string | number) => {
+    if (loading[id]) {
+      console.warn('Already fetching movie', id);
+    }
+
+    console.info('Fetching movie', id);
+
+    loading[id] = true;
+
+    try {
+      movies[id] = await TraktService.movie(id);
+    } catch (error) {
+      console.error('Failed to fetch movie', id);
+      NotificationService.error(`Failed to fetch movie '${id}'.`, error);
+      throw error;
+    } finally {
+      loading[id] = false;
+    }
+  };
+
+  const getMovieLoading = (id: string | number) => computed(() => loading[id.toString()]);
+  const getMovie = async (id: string | number) => {
+    if (!movies[id.toString()] && !loading[id.toString()]) await fetchMovie(id);
+    return movies[id.toString()];
+  };
+  const getMovieRef = (id: string | number, response = ref<TraktMovieExtended>()) =>
+    asyncRefGetter(() => getMovie(id), getMovieLoading(id), response);
+
+  return {
+    clearState,
+    fetchMovie,
+    getMovie,
+    getMovieRef,
+    getMovieLoading,
+  };
+});
+
+export const useMovieStoreRefs = () => storeToRefs(useMovieStore());

src/stores/data/person.store.ts

@@ -0,0 +1,60 @@
+import { defineStore, storeToRefs } from 'pinia';
+
+import { computed, reactive, ref } from 'vue';
+
+import type { TraktPersonExtended } from '~/models/trakt/trakt-people.model';
+
+import { NotificationService } from '~/services/notification.service';
+import { TraktService } from '~/services/trakt.service';
+import { asyncRefGetter } from '~/utils/vue.utils';
+
+type PersonDictionary = Record<string, TraktPersonExtended>;
+type LoadingDictionary = Record<string, boolean>;
+
+export const usePersonStore = defineStore('data.person', () => {
+  const people = reactive<PersonDictionary>({});
+  const loading = reactive<LoadingDictionary>({});
+
+  const clearState = () => {
+    Object.assign(people, {});
+    Object.assign(loading, {});
+  };
+
+  const fetchPerson = async (id: string | number) => {
+    if (loading[id]) {
+      console.warn('Already fetching person', id);
+    }
+
+    console.info('Fetching person', id);
+
+    loading[id] = true;
+
+    try {
+      people[id] = await TraktService.person(id);
+    } catch (error) {
+      console.error('Failed to fetch person', id);
+      NotificationService.error(`Failed to fetch person '${id}'.`, error);
+      throw error;
+    } finally {
+      loading[id] = false;
+    }
+  };
+
+  const getPersonLoading = (id: string | number) => computed(() => loading[id.toString()]);
+  const getPerson = async (id: string | number) => {
+    if (!people[id.toString()] && !loading[id.toString()]) await fetchPerson(id);
+    return people[id.toString()];
+  };
+  const getPersonRef = (id: string | number, response = ref<TraktPersonExtended>()) =>
+    asyncRefGetter(() => getPerson(id), getPersonLoading(id), response);
+
+  return {
+    clearState,
+    fetchPerson,
+    getPerson,
+    getPersonRef,
+    getPersonLoading,
+  };
+});
+
+export const usePersonStoreRefs = () => storeToRefs(usePersonStore());