feat(navbar): adds external links to trakt.tv

dvcol · dvcol · commit b29ddb46853c · 2024-04-15T18:01:12.000+02:00
diff --git a/src/components/common/buttons/ButtonLinkExternal.vue b/src/components/common/buttons/ButtonLinkExternal.vue
@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import { NButton, NIcon, NTooltip } from 'naive-ui';
+import { type Component, type PropType, ref } from 'vue';
+
+import IconExternalLinkRounded from '~/components/icons/IconExternalLinkRounded.vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineProps({
+  href: {
+    type: String,
+    required: false,
+  },
+  label: {
+    type: String,
+    required: false,
+  },
+  icon: {
+    type: Object as PropType<Component>,
+    required: false,
+    default: IconExternalLinkRounded,
+  },
+});
+
+const anchor = ref();
+</script>
+
+<template>
+  <NTooltip
+    class="button-link-external-tooltip"
+    :disabled="!label"
+    :show-arrow="false"
+    placement="bottom"
+    :delay="300"
+    trigger="hover"
+    :to="anchor"
+  >
+    <span>{{ label }}</span>
+    <template #trigger>
+      <a ref="anchor" class="anchor-link" :href="href">
+        <NButton tertiary class="external-link" v-bind="$attrs">
+          <template #icon>
+            <NIcon :component="icon" />
+          </template>
+        </NButton>
+      </a>
+    </template>
+  </NTooltip>
+</template>
+
+<style lang="scss" scoped>
+@use '~/styles/z-index' as layers;
+
+.anchor-link {
+  z-index: layers.$in-front;
+  color: inherit;
+  text-decoration: none;
+
+  .external-link {
+    width: 2.25rem;
+  }
+}
+</style>
+
+<style lang="scss">
+.button-link-external-tooltip.button-link-external-tooltip {
+  margin-top: 12px;
+}
+</style>
diff --git a/src/components/views/calendar/CalendarNavbar.vue b/src/components/views/calendar/CalendarNavbar.vue
@@ -3,11 +3,13 @@ import { NDatePicker, NFlex, NIcon, NInput, NTooltip } from 'naive-ui';
 
 import { computed, defineProps, ref } from 'vue';
 
+import ButtonLinkExternal from '~/components/common/buttons/ButtonLinkExternal.vue';
 import IconCalendar from '~/components/icons/IconCalendar.vue';
 import IconChevron from '~/components/icons/IconChevronDownSmall.vue';
 
 import IconLoop from '~/components/icons/IconLoop.vue';
 
+import { ResolveExternalLinks } from '~/settings/external.links';
 import { useCalendarStore, useCalendarStoreRefs } from '~/stores/data/calendar.store';
 import { useI18n } from '~/utils';
 import { useDebouncedSearch } from '~/utils/store.utils';
@@ -31,11 +33,19 @@ const pickerValue = computed({
   set: (value: number) => {
     const newDate = value ? new Date(value) : new Date();
     if (newDate.toLocaleDateString() === center.value.toLocaleDateString()) return;
-    console.info('pickerValue', new Date(value));
     clearState(value ? new Date(value) : undefined);
   },
 });
 
+const external = computed(() => {
+  if (pickerValue.value) {
+    return ResolveExternalLinks.trakt.calendar(
+      new Date(pickerValue.value).toISOString().split('T')[0],
+    );
+  }
+  return ResolveExternalLinks.trakt.calendar();
+});
+
 const open = ref(false);
 </script>
 
@@ -79,6 +89,7 @@ const open = ref(false);
         </NInput>
       </template>
     </NTooltip>
+    <ButtonLinkExternal :href="external" :label="i18n('calendar', 'common', 'link')" />
   </NFlex>
 </template>
 
@@ -88,11 +99,11 @@ const open = ref(false);
   padding: 0 0.5rem;
 
   .date-picker {
-    flex: 0 1 48%;
+    flex: 0 1 33%;
   }
 
   .search-input {
-    flex: 1 1 50%;
+    flex: 1 1 33%;
   }
 }
 </style>
diff --git a/src/components/views/history/HistoryNavbar.vue b/src/components/views/history/HistoryNavbar.vue
@@ -3,12 +3,15 @@ import { NDatePicker, NFlex, NIcon, NInput } from 'naive-ui';
 
 import { computed, defineProps, ref } from 'vue';
 
+import ButtonLinkExternal from '~/components/common/buttons/ButtonLinkExternal.vue';
 import NavbarPageSizeSelect from '~/components/common/navbar/NavbarPageSizeSelect.vue';
 import IconCalendar from '~/components/icons/IconCalendar.vue';
 import IconChevron from '~/components/icons/IconChevronDownSmall.vue';
 import IconLoop from '~/components/icons/IconLoop.vue';
 
+import { ResolveExternalLinks } from '~/settings/external.links';
 import { useHistoryStore, useHistoryStoreRefs } from '~/stores/data/history.store';
+import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
 import { useI18n } from '~/utils';
 import { debounce } from '~/utils/debounce.utils';
 import { useDebouncedSearch } from '~/utils/store.utils';
@@ -20,6 +23,15 @@ const { setHistoryRange } = useHistoryStore();
 
 const debouncedSearch = useDebouncedSearch(searchHistory);
 
+const { user } = useUserSettingsStoreRefs();
+const external = computed(() =>
+  ResolveExternalLinks.trakt.history({
+    user: user.value,
+    start: historyStart.value?.toISOString(),
+    end: historyEnd.value?.toISOString(),
+  }),
+);
+
 defineProps({
   parentElement: {
     type: HTMLElement,
@@ -73,6 +85,7 @@ const open = ref(false);
       </template>
     </NInput>
     <NavbarPageSizeSelect v-model:page-size="pageSize" :parent-element="parentElement" />
+    <ButtonLinkExternal :href="external" :label="i18n('history', 'common', 'link')" />
   </NFlex>
 </template>
 
@@ -82,7 +95,7 @@ const open = ref(false);
   padding: 0 0.5rem;
 
   .date-picker {
-    flex: 0 1 50%;
+    flex: 0 1 33%;
   }
 
   .search-input {
diff --git a/src/components/views/search/SearchNavbar.vue b/src/components/views/search/SearchNavbar.vue
@@ -13,6 +13,7 @@ import { type Component, computed, defineProps, h, onActivated, ref } from 'vue'
 
 import type { TraktSearchType } from '~/models/trakt/trakt-search.model';
 
+import ButtonLinkExternal from '~/components/common/buttons/ButtonLinkExternal.vue';
 import NavbarPageSizeSelect from '~/components/common/navbar/NavbarPageSizeSelect.vue';
 import IconAccount from '~/components/icons/IconAccount.vue';
 import IconChevronDown from '~/components/icons/IconChevronDownSmall.vue';
@@ -23,6 +24,7 @@ import IconMovie from '~/components/icons/IconMovie.vue';
 import IconScreen from '~/components/icons/IconScreen.vue';
 import IconYoutube from '~/components/icons/IconYoutube.vue';
 
+import { ResolveExternalLinks } from '~/settings/external.links';
 import { SupportedSearchType, useSearchStoreRefs } from '~/stores/data/search.store';
 import { useI18n } from '~/utils';
 import { debounce } from '~/utils/debounce.utils';
@@ -40,6 +42,7 @@ const toggleFocus = (focus: boolean) => {
 };
 
 const debouncedSearch = useDebouncedSearch(search, 1000);
+const external = computed(() => ResolveExternalLinks.trakt.query(debouncedSearch.value));
 
 const filteredHistory = computed(() =>
   [...history.value]
@@ -217,6 +220,8 @@ onActivated(() => {
     </NTooltip>
 
     <NavbarPageSizeSelect v-model:page-size="pageSize" :parent-element="parentElement" />
+    <ButtonLinkExternal :href="external" :label="i18n('search', 'common', 'link')" />
+
     <NSwitch
       v-if="false"
       v-model:value="query"
diff --git a/src/components/views/watchlist/WatchlistNavbar.vue b/src/components/views/watchlist/WatchlistNavbar.vue
@@ -3,16 +3,19 @@ import { NFlex, NIcon, NInput, NSelect, type SelectOption } from 'naive-ui';
 
 import { type Component, computed, defineProps, h, ref } from 'vue';
 
+import ButtonLinkExternal from '~/components/common/buttons/ButtonLinkExternal.vue';
 import NavbarPageSizeSelect from '~/components/common/navbar/NavbarPageSizeSelect.vue';
 import IconLoop from '~/components/icons/IconLoop.vue';
 
+import { ResolveExternalLinks } from '~/settings/external.links';
 import {
   type ListEntity,
   ListType,
   useListsStore,
   useListsStoreRefs,
   useListStoreRefs,
 } from '~/stores/data/list.store';
+import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
 import { useI18n } from '~/utils';
 import { useDebouncedSearch, watchUserChange } from '~/utils/store.utils';
 
@@ -23,6 +26,23 @@ const { pageSize, searchList } = useListStoreRefs();
 const { listsLoading, lists, activeList } = useListsStoreRefs();
 const { fetchLists, clearState, getIcon } = useListsStore();
 
+const { user } = useUserSettingsStoreRefs();
+
+const external = computed(() => {
+  switch (activeList.value.type) {
+    case ListType.Watchlist:
+      return ResolveExternalLinks.trakt.watchlist(user.value);
+    case ListType.Favorites:
+      return ResolveExternalLinks.trakt.favorites(user.value);
+    case ListType.Collection:
+      return ResolveExternalLinks.trakt.collection(user.value, activeList.value.scope);
+    case ListType.List:
+      return ResolveExternalLinks.trakt.list(user.value, activeList.value.name);
+    default:
+      return '';
+  }
+});
+
 type ListOption = SelectOption & { source: ListEntity; icon: Component };
 const listOptions = computed<ListOption[]>(() =>
   lists.value.map((list, i) => ({
@@ -109,6 +129,7 @@ const renderTag = ({ option }: { option: SelectOption }) => option.label?.toStri
       </template>
     </NInput>
     <NavbarPageSizeSelect v-model:page-size="pageSize" :parent-element="parentElement" />
+    <ButtonLinkExternal :href="external" :label="i18n('list', 'common', 'link')" />
   </NFlex>
 </template>
 
@@ -118,7 +139,7 @@ const renderTag = ({ option }: { option: SelectOption }) => option.label?.toStri
   padding: 0 0.5rem;
 
   .list-select {
-    flex: 0 1 40%;
+    flex: 0 1 33%;
   }
 
   .search-input {
diff --git a/src/i18n/en/common/link.json b/src/i18n/en/common/link.json
@@ -0,0 +1,18 @@
+{
+  "common__link__calendar": {
+    "message": "Open calendar in Trakt.tv",
+    "description": "Link to open calendar in Trakt.tv"
+  },
+  "common__link__history": {
+    "message": "Open history in Trakt.tv",
+    "description": "Link to open history in Trakt.tv"
+  },
+  "common__link__list": {
+    "message": "Open list in Trakt.tv",
+    "description": "Link to open list in Trakt.tv"
+  },
+  "common__link__search": {
+    "message": "Open search in Trakt.tv",
+    "description": "Link to open search in Trakt.tv"
+  }
+}
diff --git a/src/settings/external.links.ts b/src/settings/external.links.ts
@@ -21,22 +21,40 @@ export const ExternaLinks = {
 } as const;
 
 export const ResolveExternalLinks = {
-  trakt: ({
-    type,
-    slug,
-    season,
-    episode,
-    base = ExternaLinks.trakt.production,
-  }: {
-    type: 'movies' | 'shows' | 'season' | 'episode' | 'person' | 'comment' | 'list';
-    slug: string;
-    season?: number;
-    episode?: number;
-    base?: string;
-  }) => {
-    if (type === 'episode') return `${base}shows/${slug}/seasons/${season}/episodes/${episode}`;
-    if (type === 'season') return `${base}shows/${slug}/seasons/${season}`;
-    return `${base}${type}/${slug}`;
+  trakt: {
+    item: ({
+      type,
+      slug,
+      season,
+      episode,
+      base = ExternaLinks.trakt.production,
+    }: {
+      type: 'movies' | 'shows' | 'season' | 'episode' | 'person' | 'comment' | 'list';
+      slug: string;
+      season?: number;
+      episode?: number;
+      base?: string;
+    }) => {
+      if (type === 'episode') return `${base}shows/${slug}/seasons/${season}/episodes/${episode}`;
+      if (type === 'season') return `${base}shows/${slug}/seasons/${season}`;
+      return `${base}${type}/${slug}`;
+    },
+    query: (query: string) => `${ExternaLinks.trakt.production}search?query=${query}`,
+    watchlist: (user: string) => `${ExternaLinks.trakt.production}users/${user}/watchlist`,
+    favorites: (user: string) => `${ExternaLinks.trakt.production}users/${user}/favorites`,
+    list: (user: string, list: string) => `${ExternaLinks.trakt.production}users/${user}/lists/${list}`,
+    collection: (user: string, type?: 'movies' | 'shows' | 'episodes') => {
+      const url = `${ExternaLinks.trakt.production}users/${user}/collection`;
+      if (type) return `${url}/${type}`;
+      return url;
+    },
+    history: ({ user, start, end }: { user: string; start?: string; end?: string }) => {
+      let url = `${ExternaLinks.trakt.production}users/${user}/history`;
+      if (start) url += `?start_at=${start}`;
+      if (end) url += `${start ? '&' : '?'}end_at=${end}`;
+      return url;
+    },
+    calendar: (date?: string) => `${ExternaLinks.trakt.production}calendars/my/shows-movies/${date ?? ''}`,
   },
   search: ({
     id,
