feat(rating): adds url to external ratings

Author: dvcol

src/components/common/buttons/ButtonLinkExternal.vue

@@ -26,6 +26,11 @@ defineProps({
     required: false,
     default: IconExternalLinkRounded,
   },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 const anchor = ref();
@@ -34,7 +39,7 @@ const anchor = ref();
 <template>
   <NTooltip
     class="button-link-external-tooltip"
-    :disabled="!label"
+    :disabled="disabled || !label || !href"
     :show-arrow="false"
     placement="bottom"
     :delay="300"
@@ -46,8 +51,10 @@ const anchor = ref();
       <a ref="anchor" class="anchor-link" :href="href" :title="title" tabindex="-1">
         <NButton
           tertiary
+          :disabled="disabled"
+          :focusable="!!href?.length"
           class="external-link"
-          :class="{ slotted: $slots.default }"
+          :class="{ slotted: $slots.default, 'no-link': !href?.length }"
           v-bind="$attrs"
         >
           <slot />
@@ -68,6 +75,10 @@ const anchor = ref();
   color: inherit;
   text-decoration: none;
 
+  .no-link {
+    cursor: default;
+  }
+
   .external-link {
     height: unset;
     min-height: var(--n-height);

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

@@ -252,7 +252,6 @@ export const useBufferedListScroll = <T extends ListScrollSourceItemWithDate<D>,
   return {
     paused,
     list: computed<ListScrollItem[]>(() => {
-      console.info('paused', paused.value, { previous, list: list.value });
       if (paused.value) return previous;
       return list.value;
     }),

src/components/views/panel/PanelMovieStatistics.vue

@@ -10,12 +10,12 @@ import { computed, onMounted, type PropType, toRefs, watch } from 'vue';
 import type { RatingItem } from '~/models/rating.model';
 
 import PanelStatistics from '~/components/views/panel/PanelStatistics.vue';
+import { DataSource, getUrlFromSource } from '~/models/source.model';
 import { ResolveExternalLinks } from '~/settings/external.links';
 import { useRatingsStore } from '~/stores/data/ratings.store';
 import { useSimklStore } from '~/stores/data/simkl.store';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 import { useI18n } from '~/utils/i18n.utils';
-import { DataSource } from '~/utils/icon.utils';
 
 const i18n = useI18n('panel', 'statistics');
 
@@ -85,6 +85,7 @@ const ratings = computed<RatingItem[]>(() => {
         votes: value.votes,
         rating: value.rating,
         loading: simklMovieLoading.value,
+        url: getUrlFromSource(key, simklMovie?.value?.ids, { type: 'movie' }),
       },
     });
   });

src/components/views/panel/PanelRatings.vue

@@ -7,7 +7,7 @@ import type { DropdownOption } from 'naive-ui';
 import type { RatingItem } from '~/models/rating.model';
 
 import PanelRating from '~/components/views/panel/PanelRating.vue';
-import { getIconFromSource } from '~/utils/icon.utils';
+import { getIconFromSource } from '~/models/source.model';
 
 const props = defineProps({
   ratings: {

src/components/views/panel/PanelShowStatistics.vue

@@ -12,14 +12,14 @@ import { computed, type PropType, toRefs } from 'vue';
 import type { RatingItem } from '~/models/rating.model';
 
 import PanelStatistics from '~/components/views/panel/PanelStatistics.vue';
+import { DataSource } from '~/models/source.model';
 import { ResolveExternalLinks } from '~/settings/external.links';
 import { useRatingsStore } from '~/stores/data/ratings.store';
 
 import { useShowStore } from '~/stores/data/show.store';
 import { useSimklStore } from '~/stores/data/simkl.store';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 import { useI18n } from '~/utils/i18n.utils';
-import { DataSource } from '~/utils/icon.utils';
 
 const i18n = useI18n('panel', 'statistics');
 
@@ -178,6 +178,8 @@ const ratings = computed<RatingItem[]>(() => {
         votes: value.votes,
         rating: value.rating,
         loading: simklShowLoading.value,
+        url:
+          key === 'mal' ? `https://myanimelist.net/anime/${simklShow.value}` : undefined,
       },
     });
   });

src/models/source.model.ts

@@ -0,0 +1,71 @@
+import type { Component } from 'vue';
+
+import IconIMDb from '~/components/icons/IconIMDb.vue';
+import IconMyAnimeList from '~/components/icons/IconMyAnimeList.vue';
+import IconSimkl from '~/components/icons/IconSimkl.vue';
+import IconStarFilledHalf from '~/components/icons/IconStarFilledHalf.vue';
+import IconTMDb from '~/components/icons/IconTMDb.vue';
+import IconTVDb from '~/components/icons/IconTVDb.vue';
+import IconTrakt from '~/components/icons/IconTrakt.vue';
+import { ResolveExternalLinks } from '~/settings/external.links';
+
+export const DataSource = {
+  Trakt: 'trakt',
+  Tmdb: 'tmdb',
+  Imdb: 'imdb',
+  Tvdb: 'tvdb',
+  Simkl: 'simkl',
+  Mal: 'mal',
+} as const;
+
+export type DataSources = (typeof DataSource)[keyof typeof DataSource];
+
+export const getIconFromSource = (source: DataSources | string): Component => {
+  switch (source) {
+    case DataSource.Trakt:
+      return IconTrakt;
+    case DataSource.Tmdb:
+      return IconTMDb;
+    case DataSource.Imdb:
+      return IconIMDb;
+    case DataSource.Tvdb:
+      return IconTVDb;
+    case DataSource.Simkl:
+      return IconSimkl;
+    case DataSource.Mal:
+      return IconMyAnimeList;
+    default:
+      return IconStarFilledHalf;
+  }
+};
+
+export const getUrlFromSource = (
+  source: DataSources | string,
+  ids?: Record<DataSources | string, number | string>,
+  metadata: {
+    season?: string | number;
+    episode?: string | number;
+    type?: 'movie' | 'show' | 'season' | 'episode' | 'person' | 'anime';
+  } = {},
+): string | undefined => {
+  if (!ids) return undefined;
+  switch (source) {
+    case DataSource.Mal:
+      if (!ids[source]) return undefined;
+      return ResolveExternalLinks.mal(ids[source]);
+    case DataSource.Tmdb:
+      if (!metadata.type || !ids[source]) return undefined;
+      return ResolveExternalLinks.tmdb({ id: ids[source], type: metadata.type, ...metadata });
+    case DataSource.Tvdb:
+      if (!metadata.type || !ids[source]) return undefined;
+      return ResolveExternalLinks.tvdb(ids[source], metadata.type);
+    case DataSource.Imdb:
+      if (!ids[source]) return undefined;
+      return ResolveExternalLinks.imdb(ids[source]);
+    case DataSource.Simkl:
+      if (!metadata.type || !ids[source]) return undefined;
+      return ResolveExternalLinks.simkl.item(ids[source], metadata.type);
+    default:
+      return undefined;
+  }
+};

src/settings/external.links.ts

@@ -9,6 +9,7 @@ export const ExternaLinks = {
   imdb: 'https://www.imdb.com/',
   tvdb: 'https://thetvdb.com/',
   simkl: 'https://simkl.com/',
+  mal: 'https://myanimelist.net/',
   omdb: 'https://www.omdbapi.com/',
   fanart: 'https://fanart.tv/',
   justwatch: 'https://www.justwatch.com/',
@@ -93,26 +94,32 @@ export const ResolveExternalLinks = {
     id: string | number;
     season?: string | number;
     episode?: string | number;
-    type: 'movie' | 'show' | 'season' | 'episode' | 'person';
+    type: 'movie' | 'show' | 'season' | 'episode' | 'person' | string;
   }) => {
     if (type === 'person') return `${ExternaLinks.tmdb}person/${id}`;
     if (type === 'movie') return `${ExternaLinks.tmdb}movie/${id}`;
     if (type === 'show') return `${ExternaLinks.tmdb}tv/${id}`;
     if (type === 'season') return `${ExternaLinks.tmdb}tv/${id}/season/${season}`;
     if (type === 'episode') return `${ExternaLinks.tmdb}tv/${id}/season/${season}/episode/${episode}`;
   },
-  tvdb: (id: string | number, type: 'movie' | 'show' | 'season' | 'episode' | 'person') => {
+  tvdb: (id: string | number, type: 'movie' | 'show' | 'season' | 'episode' | 'person' | string) => {
     if (type === 'person') return `${ExternaLinks.tvdb}dereferrer/people/${id}`;
     if (type === 'movie') return `${ExternaLinks.tvdb}dereferrer/movies/${id}`;
     if (type === 'show') return `${ExternaLinks.tvdb}dereferrer/series/${id}`;
     if (type === 'season') return `${ExternaLinks.tvdb}dereferrer/season/${id}`;
     if (type === 'episode') return `${ExternaLinks.tvdb}dereferrer/episode/${id}`;
   },
+  mal: (id: number | string) => `${ExternaLinks.mal}anime/${id}`,
   facebook: (id: string) => `${ExternaLinks.facebook}${id}`,
   twitter: (id: string) => `${ExternaLinks.twitter}${id}`,
   instagram: (id: string) => `${ExternaLinks.instagram}${id}`,
   wikipedia: (id: string) => `${ExternaLinks.wikipedia}wiki/${id}`,
   simkl: {
     settings: `${ExternaLinks.simkl}/settings/`,
+    item: (id: string | number, type: 'movie' | 'show' | 'anime' | string) => {
+      if (type === 'movie') return `${ExternaLinks.simkl}movies/${id}`;
+      if (type === 'show') return `${ExternaLinks.simkl}tv/${id}`;
+      if (type === 'anime') return `${ExternaLinks.simkl}anime/${id}`;
+    },
   },
 };