feat(ratings): adds score & review options

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.3",
+    "@dvcol/trakt-http-client": "^1.4.5",
     "@dvcol/tvdb-http-client": "^1.1.3",
     "@dvcol/web-extension-utils": "^3.0.1",
     "@vue/devtools": "^7.0.15",

pnpm-lock.yaml

@@ -62,10 +62,15 @@ defineProps({
     default: 'baseline',
   },
   size: {
-    type: String,
+    type: String as PropType<'small' | 'medium' | 'large'>,
     required: false,
     default: 'medium',
   },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 const { openTab } = useLinksStore();
@@ -74,14 +79,16 @@ const { openTab } = useLinksStore();
 <template>
   <NFlex
     class="detail"
-    :class="{ grow, array }"
+    :class="{ grow, array, disabled }"
     :style="{ '--prefix-min-width': labelWidth, '--text-flex': flex }"
     :align="align"
     :wrap="wrap"
     :vertical="vertical"
     :size="size"
   >
-    <span class="prefix">{{ label }}</span>
+    <slot name="label">
+      <span class="prefix">{{ label }}</span>
+    </slot>
     <slot>
       <NFlex v-if="array" class="value">
         <template v-if="values !== undefined">
@@ -109,6 +116,7 @@ const { openTab } = useLinksStore();
 <style lang="scss" scoped>
 .prefix {
   flex: 0 0 auto;
+  align-self: center;
   min-width: var(--prefix-min-width);
   color: var(--white-50);
   font-weight: 600;
@@ -117,9 +125,16 @@ const { openTab } = useLinksStore();
 
 .value {
   flex: 1 1 auto;
+  align-self: center;
   min-width: max-content;
 }
 
+.disabled {
+  .value {
+    color: var(--text-color-disabled);
+  }
+}
+
 .detail {
   flex: var(--text-flex);
   align-items: baseline;

src/components/common/typography/TextField.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { deCapitalise } from '@dvcol/common-utils/common/string';
+
+import { TraktRatingType } from '@dvcol/trakt-http-client/models';
 import { NFlex, NSkeleton } from 'naive-ui';
 import { computed, onMounted, toRefs, watch } from 'vue';
 
@@ -26,6 +28,7 @@ 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';
@@ -94,7 +97,7 @@ const {
   fetchAll,
 } = useListStore();
 
-const { loadLists, loadListsPageSize } = useExtensionSettingsStoreRefs();
+const { loadLists, loadListsPageSize, enableRatings } = useExtensionSettingsStoreRefs();
 
 const shouldFetchLists = computed(() => {
   if (!myLists.value?.length) return false;
@@ -248,11 +251,19 @@ const onCheckin = async (cancel: boolean) => {
 
 const { openTab } = useLinksStore();
 
+const { loadRatings, getRatings } = useRatingsStore();
+
+const score = computed(() => {
+  if (!movieId.value) return;
+  return getRatings(TraktRatingType.Movies, movieId.value);
+});
+
 onMounted(() => {
   watch(
     movieId,
     id => {
       fetchMovie(id);
+      if (enableRatings.value) loadRatings(TraktRatingType.Movies, id);
     },
     { immediate: true },
   );
@@ -290,9 +301,10 @@ onMounted(() => {
       round
     />
 
-    <NFlex>
+    <NFlex class="rating-row" justify="space-around">
+      <PanelRatings v-if="enableRatings" :votes="movie?.votes" :rating="movie?.rating" />
       <PanelPoster :tmdb="movie?.ids.tmdb" mode="movie" />
-      <PanelRatings :votes="movie?.votes" :rating="movie?.rating" />
+      <PanelRatings v-if="enableRatings" :score="score?.rating" mode="score" />
     </NFlex>
 
     <MoviePanelDetails
@@ -323,6 +335,10 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
+.rating-row {
+  width: 100%;
+}
+
 .show-title-skeleton {
   height: 1.5rem;
   margin-top: 0.625rem;

src/components/views/panel/MoviePanel.vue

@@ -1,25 +1,29 @@
 <script lang="ts" setup>
 import { NFlex, NNumberAnimation, NProgress, NStatistic } from 'naive-ui';
-import { computed, onMounted, ref, toRefs, watch } from 'vue';
+import { computed, onMounted, type PropType, ref, toRefs, watch } from 'vue';
 
 import TextField from '~/components/common/typography/TextField.vue';
+import { RatingLabel } from '~/models/rating.model';
+import { logger } from '~/stores/settings/log.store';
 import { useI18n } from '~/utils/i18n.utils';
 
 const props = defineProps({
+  mode: {
+    type: String as PropType<'rating' | 'score'>,
+    required: false,
+    default: 'rating',
+  },
   rating: {
     type: Number,
     required: false,
-    default: 0,
   },
   votes: {
     type: Number,
     required: false,
-    default: 0,
   },
   score: {
     type: Number,
     required: false,
-    default: 0,
   },
   duration: {
     type: Number,
@@ -38,6 +42,7 @@ const i18n = useI18n('panel', 'ratings');
 const { votes, rating, score } = toRefs(props);
 
 const votesUnit = computed(() => {
+  if (votes?.value === undefined) return null;
   if (votes?.value >= 10000) return 'k';
   if (votes?.value >= 1000000) return 'm';
   if (votes?.value >= 1000000000) return 'b';
@@ -57,6 +62,16 @@ const _ratingProgress = ref(0);
 const _score = computed(() => (score?.value ?? 0) * 10);
 const _scoreProgress = ref(0);
 
+const _scoreLabel = computed(() => {
+  if (!score?.value) return 'not_rated';
+  try {
+    return RatingLabel[score.value];
+  } catch (e) {
+    logger.error('RatingLabel', e);
+    return 'not_rated';
+  }
+});
+
 onMounted(() => {
   watch(
     _rating,
@@ -76,9 +91,17 @@ onMounted(() => {
 </script>
 
 <template>
-  <NFlex class="rating-container" align="center" justify="center" vertical>
-    <TextField :label="i18n('label_votes')" vertical size="small" flex="0 1 auto">
-      <NStatistic class="statistics" tabular-nums>
+  <NFlex class="rating-container" align="center" justify="center" vertical size="large">
+    <!--  Vote count  -->
+    <TextField
+      v-if="mode === 'rating'"
+      :label="i18n('label_votes')"
+      :disabled="!votes"
+      vertical
+      size="small"
+      flex="0 1 auto"
+    >
+      <NStatistic class="statistics" :class="{ disabled: !votes }" tabular-nums>
         <NNumberAnimation
           :from="0"
           :to="_votes"
@@ -88,14 +111,21 @@ onMounted(() => {
         <span v-if="votesUnit" class="unit">{{ votesUnit }}</span>
       </NStatistic>
     </TextField>
-    <TextField :label="i18n('label_rating')" vertical flex="0 1 auto">
+
+    <!--  Rating progress  -->
+    <TextField
+      v-if="mode === 'rating'"
+      :label="i18n('label_rating')"
+      vertical
+      flex="0 1 auto"
+    >
       <NProgress
         class="progress"
         type="circle"
         :percentage="_ratingProgress"
         :style="{ '--duration': `${duration}ms` }"
       >
-        <NStatistic class="statistics" tabular-nums>
+        <NStatistic class="statistics" :class="{ disabled: !rating }" tabular-nums>
           <NNumberAnimation
             :from="0"
             :to="_rating"
@@ -105,17 +135,38 @@ onMounted(() => {
         </NStatistic>
       </NProgress>
     </TextField>
-    <TextField :label="i18n('label_score')" vertical flex="0 1 auto">
+
+    <!--  Review  -->
+    <TextField
+      v-if="mode === 'score'"
+      :label="i18n('label_review')"
+      :disabled="!score"
+      vertical
+      size="small"
+      flex="0 1 auto"
+    >
+      <span class="score-label" :class="{ disabled: !score }">
+        {{ i18n(_scoreLabel, 'common', 'rating') }}
+      </span>
+    </TextField>
+
+    <!--  Score  -->
+    <TextField
+      v-if="mode === 'score'"
+      :label="i18n('label_score')"
+      vertical
+      flex="0 1 auto"
+    >
       <NProgress
         class="progress"
         type="circle"
         :percentage="_scoreProgress"
         :style="{ '--duration': `${duration}ms` }"
       >
-        <NStatistic class="statistics" tabular-nums>
+        <NStatistic class="statistics" :class="{ disabled: !score }" tabular-nums>
           <NNumberAnimation
             :from="0"
-            :to="_pStores"
+            :to="_score"
             :duration="duration"
             :precision="precision"
           />
@@ -130,7 +181,7 @@ onMounted(() => {
   --duration: 1000ms;
 
   gap: 1rem;
-  padding: 1rem;
+  padding: 0.5rem;
 
   .progress {
     width: 3rem;
@@ -153,6 +204,23 @@ onMounted(() => {
       padding-left: 0.125rem;
       color: var(--white-50);
     }
+
+    &.disabled {
+      --n-value-text-color: var(--text-color-disabled) !important;
+    }
+  }
+
+  .score-label {
+    align-self: center;
+    padding: 0.25rem 0;
+
+    &.disabled {
+      color: var(--text-color-disabled);
+    }
+  }
+
+  @media (width <= 640px) {
+    padding: 0.5rem 25%;
   }
 }
 </style>