feat(panel): adds multi rating support & rework linking

Author: dvcol

src/components/common/buttons/TitleLink.vue

@@ -3,6 +3,8 @@ import { NH2 } from 'naive-ui';
 
 import { type Component, type PropType, useAttrs } from 'vue';
 
+import { useLinksStore } from '~/stores/settings/links.store';
+
 defineProps({
   component: {
     type: Object as PropType<Component>,
@@ -15,16 +17,14 @@ defineProps({
   },
 });
 
-const emit = defineEmits<{
-  (e: 'onClick', href?: string): void;
-}>();
-
 const attrs = useAttrs() as Record<keyof HTMLAnchorElement, string> | undefined;
 
+const { openTab } = useLinksStore();
+
 const onTitleClick = (e: MouseEvent) => {
   e.preventDefault();
   e.stopPropagation();
-  emit('onClick', attrs?.href);
+  openTab(attrs?.href);
 };
 </script>
 

src/components/icons/IconMyAnimeList.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="800px"
+    height="800px"
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="512" cy="512" r="512" style="fill: #2e51a2" />
+    <path
+      d="M432.49 410.61V590.3l-44.86-.06V479l-43.31 51.29-42.43-52.44-.43 112.75H256V410.65h47l39.79 54.29 43-54.31zm184.06 44.14.53 135.15h-50.45l-.17-61.25h-59.73c1.49 10.65 4.48 27 8.9 38 3.31 8.13 6.36 16 12.44 24.06l-36.37 24c-7.45-13.57-13.27-28.52-18.73-44.42a198.31 198.31 0 0 1-10.82-46.49c-1.81-16-2.07-31.38 2.28-47.19a83.37 83.37 0 0 1 24.77-39.81c6.68-6.25 16-10.67 23.47-14.66s15.85-5.63 23.62-7.66a158 158 0 0 1 25.41-3.9c8.49-.73 23.62-1.41 51-.6l11.63 37.31h-58.78c-12.65.17-18.73 0-28.61 4.46a47.7 47.7 0 0 0-27.26 41l56.81.7.81-38.61h49.26zM701.72 410v141.35L768 552l-9.17 37.87H656.28V409.33z"
+      style="fill: #fff"
+    />
+  </svg>
+</template>

src/components/views/panel/MoviePanel.vue

@@ -1,19 +1,14 @@
 <script setup lang="ts">
 import { deCapitalise } from '@dvcol/common-utils/common/string';
-
-import {
-  TraktRatingType,
-  type TraktSyncRatingValue,
-} from '@dvcol/trakt-http-client/models';
 import { NFlex, NSkeleton } from 'naive-ui';
 import { computed, onMounted, toRefs, watch } from 'vue';
 
 import TitleLink from '~/components/common/buttons/TitleLink.vue';
 import MoviePanelButtons from '~/components/views/panel/MoviePanelButtons.vue';
 import MoviePanelDetails from '~/components/views/panel/MoviePanelDetails.vue';
 import MoviePanelOverview from '~/components/views/panel/MoviePanelOverview.vue';
+import PanelMovieStatistics from '~/components/views/panel/PanelMovieStatistics.vue';
 import PanelPoster from '~/components/views/panel/PanelPoster.vue';
-import PanelStatistics from '~/components/views/panel/PanelStatistics.vue';
 import {
   PanelButtonsOption,
   type PanelButtonsOptions,
@@ -30,10 +25,8 @@ import {
   useListStore,
 } from '~/stores/data/list.store';
 import { useMovieStore, useMovieStoreRefs } from '~/stores/data/movie.store';
-import { useRatingsStore } from '~/stores/data/ratings.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,
@@ -103,7 +96,7 @@ const {
   fetchAll,
 } = useListStore();
 
-const { loadLists, loadListsPageSize, enableRatings } = useExtensionSettingsStoreRefs();
+const { loadLists, loadListsPageSize } = useExtensionSettingsStoreRefs();
 
 const shouldFetchLists = computed(() => {
   if (!myLists.value?.length) return false;
@@ -256,48 +249,8 @@ const onCheckin = async (cancel: boolean) => {
   await fetchMovieWatched(true);
 };
 
-const { openTab } = useLinksStore();
-
-const { loadRatings, getRatings, getLoading, addRating, removeRating } =
-  useRatingsStore();
-
-const scoreLoading = computed(() => getLoading(TraktRatingType.Movies));
-
-const score = computed(() => {
-  if (!movieId.value) return;
-  return getRatings(TraktRatingType.Movies, movieId.value);
-});
-
-const ratingUrl = computed(() => {
-  if (!movie.value?.ids?.slug) return;
-  return ResolveExternalLinks.trakt.item({
-    type: 'movies',
-    slug: movie.value.ids.slug,
-    suffix: '/stats',
-  });
-});
-
-const onScoreEdit = async (_score: TraktSyncRatingValue) => {
-  if (!movie.value?.ids?.trakt) return;
-  return (_score ? addRating : removeRating)(TraktRatingType.Movies, {
-    movies: [
-      {
-        ids: movie.value.ids,
-        rating: _score,
-      },
-    ],
-  });
-};
-
 onMounted(() => {
-  watch(
-    movieId,
-    id => {
-      fetchMovie(id);
-      if (enableRatings.value) loadRatings(TraktRatingType.Movies, id);
-    },
-    { immediate: true },
-  );
+  watch(movieId, id => fetchMovie(id), { immediate: true });
   fetchMovieWatched();
   fetchMovieCollected();
 
@@ -321,7 +274,6 @@ onMounted(() => {
       class="show-title"
       :href="titleUrl"
       :title="i18n('open_in_trakt', 'common', 'tooltip')"
-      @on-click="openTab"
     >
       {{ title }}
     </TitleLink>
@@ -332,17 +284,9 @@ onMounted(() => {
       round
     />
 
-    <PanelStatistics
-      :rating="movie?.rating"
-      :votes="movie?.votes"
-      :score="score?.rating"
-      :loading-score="scoreLoading"
-      :loading-rating="movieLoading"
-      :url="ratingUrl"
-      @on-score-edit="onScoreEdit"
-    >
-      <PanelPoster :tmdb="movie?.ids.tmdb" mode="movie" />
-    </PanelStatistics>
+    <PanelMovieStatistics :movie="movie" :movie-loading="movieLoading">
+      <PanelPoster :tmdb="movie?.ids.tmdb" mode="movie" :link="titleUrl" />
+    </PanelMovieStatistics>
 
     <MoviePanelDetails
       :movie="movie"

src/components/views/panel/PanelMovieStatistics.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import {
+  type TraktMovieExtended,
+  TraktRatingType,
+  type TraktSyncRatingValue,
+} from '@dvcol/trakt-http-client/models';
+
+import { computed, onMounted, type PropType, toRefs, watch } from 'vue';
+
+import type { RatingItem } from '~/models/rating.model';
+
+import IconTrakt from '~/components/icons/IconTrakt.vue';
+import PanelStatistics from '~/components/views/panel/PanelStatistics.vue';
+import { ResolveExternalLinks } from '~/settings/external.links';
+import { useRatingsStore } from '~/stores/data/ratings.store';
+import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
+import { useI18n } from '~/utils/i18n.utils';
+
+const i18n = useI18n('panel', 'statistics');
+
+const props = defineProps({
+  movie: {
+    type: Object as PropType<TraktMovieExtended>,
+    required: false,
+  },
+  movieLoading: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+
+const { movie, movieLoading } = toRefs(props);
+
+const { enableRatings } = useExtensionSettingsStoreRefs();
+const { loadRatings, getRatings, getLoading, addRating, removeRating } =
+  useRatingsStore();
+
+const movieId = computed(() => movie?.value?.ids.trakt);
+const scoreLoading = computed(() => getLoading(TraktRatingType.Movies));
+
+const score = computed(() => {
+  if (!movieId.value) return;
+  return getRatings(TraktRatingType.Movies, movieId.value.toString());
+});
+
+const ratingUrl = computed(() => {
+  if (!movie?.value?.ids?.slug) return;
+  return ResolveExternalLinks.trakt.item({
+    type: 'movies',
+    slug: movie?.value.ids.slug,
+    suffix: '/stats',
+  });
+});
+
+const ratings = computed<RatingItem[]>(
+  () =>
+    [
+      {
+        name: i18n('trakt', 'common', 'source', 'name'),
+        icon: IconTrakt,
+        rating: {
+          votes: movie?.value?.votes,
+          rating: movie?.value?.rating,
+          url: ratingUrl.value,
+          loading: movieLoading.value,
+        },
+      },
+    ] satisfies RatingItem[],
+);
+
+const onScoreEdit = async (_score: TraktSyncRatingValue) => {
+  if (!movie?.value?.ids?.trakt) return;
+  return (_score ? addRating : removeRating)(TraktRatingType.Movies, {
+    movies: [
+      {
+        ids: movie.value.ids,
+        rating: _score,
+      },
+    ],
+  });
+};
+
+onMounted(() => {
+  watch(movieId, () => {
+    if (!movieId.value) return;
+    if (!enableRatings.value) return;
+    loadRatings(TraktRatingType.Movies, movieId.value.toString());
+  });
+});
+</script>
+
+<template>
+  <PanelStatistics
+    :ratings="ratings"
+    :score="score?.rating"
+    :loading-score="scoreLoading"
+    @on-score-edit="onScoreEdit"
+  >
+    <slot />
+  </PanelStatistics>
+</template>

src/components/views/panel/PanelOverview.vue

@@ -2,7 +2,6 @@
 import { NFlex, NH4, NSkeleton } from 'naive-ui';
 
 import TitleLink from '~/components/common/buttons/TitleLink.vue';
-import { useLinksStore } from '~/stores/settings/links.store';
 
 defineProps({
   title: {
@@ -22,20 +21,11 @@ defineProps({
     required: false,
   },
 });
-
-const { openTab } = useLinksStore();
 </script>
 
 <template>
   <NFlex justify="center" align="center" vertical class="overview">
-    <TitleLink
-      v-if="title"
-      class="title"
-      :href="url"
-      :title="label"
-      :component="NH4"
-      @on-click="openTab"
-    >
+    <TitleLink v-if="title" class="title" :href="url" :title="label" :component="NH4">
       {{ title }}
     </TitleLink>
     <NSkeleton v-else class="title-skeleton" style="width: var(--height-40-dvh)" round />

src/components/views/panel/PanelPoster.vue

@@ -6,6 +6,10 @@ import type { PosterItem } from '~/models/poster.model';
 import type { ImageQuery, ImageStoreTypes } from '~/stores/data/image.store';
 
 import PosterComponent from '~/components/common/poster/PosterComponent.vue';
+import { useLinksStore } from '~/stores/settings/links.store';
+import { useI18n } from '~/utils/i18n.utils';
+
+const i18n = useI18n('common', 'tooltip');
 
 const props = defineProps({
   tmdb: {
@@ -28,9 +32,13 @@ const props = defineProps({
     type: Number,
     required: false,
   },
+  link: {
+    type: String,
+    required: false,
+  },
 });
 
-const { tmdb, mode, seasonNumber, episodeNumber } = toRefs(props);
+const { tmdb, mode, seasonNumber, episodeNumber, link } = toRefs(props);
 
 const size = computed(() => window?.innerWidth ?? 800 / 2);
 
@@ -61,11 +69,24 @@ const key = computed(() => {
   if (tmdb?.value !== undefined) return `tmdb-${tmdb?.value}`;
   return `placeholder`;
 });
+
+const label = computed(() => {
+  if (!link?.value?.length) return undefined;
+  return i18n(`open_${mode.value}_in_trakt`, 'common', 'tooltip');
+});
+
+const { openTab } = useLinksStore();
 </script>
 
 <template>
   <Transition v-if="posterItem" name="scale" mode="out-in">
-    <NFlex :key="key" class="poster-container" :class="{ landscape: !portait }">
+    <NFlex
+      :key="key"
+      class="poster-container"
+      :class="{ landscape: !portait, link }"
+      :title="label"
+      @click="openTab(link)"
+    >
       <PosterComponent :item="posterItem" :size="size" :backdrop="!portait" />
     </NFlex>
   </Transition>
@@ -77,13 +98,20 @@ const key = computed(() => {
 </template>
 
 <style lang="scss" scoped>
+@use '~/styles/mixin' as mixin;
 @use '~/styles/transition' as transition;
 @include transition.scale;
 
 .poster-container {
   --poster-height: calc(min(var(--half-width), var(--height-70-dvh)) * (9 / 16));
   --poster-width: calc(var(--poster-height) * (2 / 3));
 
+  &.link {
+    @include mixin.hover-box-shadow;
+
+    cursor: pointer;
+  }
+
   &.landscape {
     --poster-width: min(var(--half-width), var(--height-70-dvh));
     --poster-height: calc(var(--poster-width) * (9 / 16));