feat(release): setup release fetching

Author: dvcol

src/components/common/debug/DebugProvider.vue

@@ -7,7 +7,6 @@ import { TraktService } from '~/services/trakt.service';
 const debugProvider = ref<HTMLDivElement>();
 
 onMounted(() => {
-  console.info('DebugProvider mounted', debugProvider.value);
   Object.defineProperty(debugProvider.value, 'trakt', {
     value: TraktService,
   });

src/components/common/list/ListItem.vue

@@ -58,6 +58,15 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  hideTime: {
+    type: Boolean,
+    required: false,
+  },
+  contentHeight: {
+    type: Number,
+    required: false,
+    default: 1,
+  },
   hover: {
     type: Boolean,
     required: false,
@@ -204,6 +213,8 @@ const onClick = () => emit('onItemClick', { item: item?.value });
             :item="item"
             :loading="loading"
             :hide-date="hideDate"
+            :hide-time="hideTime"
+            :content-height="contentHeight"
             :show-progress="showProgress"
           >
             <slot :item="item" :loading="loading" />

src/components/common/list/ListItemPanel.vue

@@ -43,6 +43,15 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  hideTime: {
+    type: Boolean,
+    required: false,
+  },
+  contentHeight: {
+    type: Number,
+    required: false,
+    default: 1,
+  },
   showProgress: {
     type: Boolean,
     required: false,
@@ -131,16 +140,16 @@ const onTagClick = (url?: string) => {
       </div>
       <div class="content">
         <NSkeleton v-if="loading" text style="width: 60%" round />
-        <NEllipsis v-else :line-clamp="1" :tooltip="tooltipOptions">{{
+        <NEllipsis v-else :line-clamp="contentHeight" :tooltip="tooltipOptions">{{
           content
         }}</NEllipsis>
       </div>
-      <NFlex v-if="date || tags?.length" size="medium" class="tags">
+      <NFlex v-if="(!hideTime && date) || tags?.length" size="medium" class="tags">
         <template v-for="(tag, i) of tags" :key="`${i}-${tag.label}`">
           <NSkeleton v-if="loading" text style="width: 6%" />
           <TagLink :tag="tag" @on-click="onTagClick" />
         </template>
-        <template v-if="date">
+        <template v-if="!hideTime && date">
           <NSkeleton v-if="loading" text style="width: 6%" />
           <NTag v-else class="tag" size="small" type="default" :bordered="false">
             {{ date }}

src/components/common/list/ListScroll.vue

@@ -47,6 +47,15 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  hideTime: {
+    type: Boolean,
+    required: false,
+  },
+  contentHeight: {
+    type: Number,
+    required: false,
+    default: 1,
+  },
   scrollIntoView: {
     type: Array as PropType<ListScrollItem['id'][]>,
     required: false,
@@ -173,6 +182,8 @@ const onLoadMore = (payload: { page: number; pageCount: number; pageSize: number
           :height="listOptions?.itemSize ?? 145"
           :size="items.length"
           :hide-date="hideDate"
+          :hide-time="hideTime"
+          :content-height="contentHeight"
           :backdrop="backdrop"
           :hover="hoverDate === item.date?.current?.toDateString()"
           :scroll-into-view="scrollIntoView?.includes(item.id)"

src/components/views/calendar/CalendarComponent.vue

@@ -1,66 +1,32 @@
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-
-import type {
-  VirtualListRef,
-  VirtualListScrollToOptions,
-} from '~/models/list-scroll.model';
+import { watch } from 'vue';
 
 import FloatingButton from '~/components/common/buttons/FloatingButton.vue';
 import ListScroll from '~/components/common/list/ListScroll.vue';
 import { useListScroll } from '~/components/common/list/use-list-scroll';
-import IconChevronDown from '~/components/icons/IconChevronDown.vue';
-import IconChevronUp from '~/components/icons/IconChevronUp.vue';
 
 import { usePanelItem } from '~/components/views/panel/use-panel-item';
 import { useCalendarStore, useCalendarStoreRefs } from '~/stores/data/calendar.store';
+import { useCalendar, useCenterButton } from '~/utils/calendar.utils';
 import { useI18n } from '~/utils/i18n.utils';
 import { watchUserChange } from '~/utils/store.utils';
 
 const i18n = useI18n('calendar');
 
-const { calendar, loading, center, filteredCalendar } = useCalendarStoreRefs();
+const { loading, center, filteredCalendar } = useCalendarStoreRefs();
 const { fetchCalendar, clearState } = useCalendarStore();
 
 const list = useListScroll(filteredCalendar, 'date');
 
-const centerItem = computed(() => {
-  return list.value.find(
-    item => item.date?.current.toLocaleDateString() === center.value.toLocaleDateString(),
-  );
-});
+const { centerItem, centerIsToday, scrolledOut, recenterIcon, onScrollIntoOutOfView } =
+  useCenterButton({ list, center });
 
-const centerIsToday = computed(() => {
-  return (
-    centerItem.value?.date?.current.toLocaleDateString() ===
-    new Date().toLocaleDateString()
-  );
+const { listRef, onClick, onScrollTop, onScrollBottom, reload } = useCalendar({
+  list,
+  centerItem,
+  fetchData: fetchCalendar,
 });
 
-const listRef = ref<{ list: VirtualListRef }>();
-
-const scrollTo = (
-  options?: VirtualListScrollToOptions,
-  index = centerItem.value?.index,
-) => {
-  if (index === undefined) return;
-  if (!listRef.value?.list) return;
-
-  listRef.value?.list.scrollTo({
-    top: index * 145,
-    ...options,
-  });
-};
-
-const reload = async () => {
-  const promise = fetchCalendar();
-  // watch for loading changes and recenter
-  const unsub = watch(list, async () => scrollTo());
-  await promise;
-  scrollTo();
-  unsub();
-};
-
 watch(center, () => reload());
 
 watchUserChange({
@@ -74,31 +40,6 @@ watchUserChange({
   },
 });
 
-const scrolledOut = ref(false);
-const scrolledDown = ref(true);
-const onClick = () => scrollTo({ behavior: 'smooth' });
-const onScrollIntoOutOfView = (_scrolled: boolean, _itemRef?: HTMLDivElement) => {
-  scrolledOut.value = _scrolled;
-  if (!_scrolled || !_itemRef) return;
-  scrolledDown.value = _itemRef.getBoundingClientRect().top > 0;
-};
-const recenterIcon = computed(() =>
-  scrolledDown.value ? IconChevronDown : IconChevronUp,
-);
-
-const onScrollTop = async () => {
-  const first = list.value[0];
-  await fetchCalendar('start');
-
-  listRef.value?.list.scrollTo({
-    top: (list.value.findIndex(item => item.id === first.id) - 1) * 145,
-  });
-};
-
-const onScrollBottom = async () => {
-  await fetchCalendar('end');
-};
-
 const { onItemClick } = usePanelItem();
 </script>
 

src/components/views/releases/ReleasesComponent.vue

@@ -1,11 +1,15 @@
 <script lang="ts" setup>
 import { watch } from 'vue';
 
+import type { TraktSearchResult } from '@dvcol/trakt-http-client/models';
+import type { ListScrollItem } from '~/models/list-scroll.model';
+
 import FloatingButton from '~/components/common/buttons/FloatingButton.vue';
 import ListScroll from '~/components/common/list/ListScroll.vue';
 import { useListScroll } from '~/components/common/list/use-list-scroll';
 
 import { usePanelItem } from '~/components/views/panel/use-panel-item';
+import { TraktService } from '~/services/trakt.service';
 import { useReleasesStore, useReleasesStoreRefs } from '~/stores/data/releases.store';
 import { useCalendar, useCenterButton } from '~/utils/calendar.utils';
 import { useI18n } from '~/utils/i18n.utils';
@@ -21,7 +25,7 @@ const list = useListScroll(releases, 'date');
 const { centerItem, centerIsToday, scrolledOut, recenterIcon, onScrollIntoOutOfView } =
   useCenterButton({ list, center });
 
-const { onClick, onScrollTop, onScrollBottom, reload } = useCalendar({
+const { listRef, onClick, onScrollTop, onScrollBottom, reload } = useCalendar({
   list,
   centerItem,
   fetchData: fetchReleases,
@@ -41,6 +45,29 @@ watchUserChange({
 });
 
 const { onItemClick } = usePanelItem();
+
+const onMovieClick = async ({ item }: { item: ListScrollItem }) => {
+  const lookup: TraktSearchResult[] = await TraktService.lookup({
+    id: item.id.toString(),
+    id_type: 'tmdb',
+    type: 'movie',
+  });
+  onItemClick({
+    item: {
+      ...item,
+      meta: {
+        ...item.meta,
+        ids: {
+          ...item.meta?.ids,
+          movie: {
+            ...item.meta?.ids?.movie,
+            trakt: lookup.pop()?.movie?.ids?.trakt,
+          },
+        },
+      },
+    },
+  });
+};
 </script>
 
 <template>
@@ -49,9 +76,10 @@ const { onItemClick } = usePanelItem();
       ref="listRef"
       :items="list"
       :loading="loading"
-      backdrop
+      :content-height="3"
+      hide-time
       :scroll-into-view="centerItem?.id ? [centerItem?.id] : []"
-      @on-item-click="onItemClick"
+      @on-item-click="onMovieClick"
       @on-scroll-into-view="e => onScrollIntoOutOfView(false, e.ref)"
       @on-scroll-out-of-view="e => onScrollIntoOutOfView(true, e.ref)"
       @on-scroll-top="onScrollTop"

src/components/views/releases/ReleasesNavbar.vue

@@ -18,7 +18,8 @@ defineProps({
 
 const i18n = useI18n('navbar', 'releases');
 
-const { center, loading, region, regions, regionLoading, types } = useReleasesStoreRefs();
+const { center, loading, region, regions, regionLoading, releaseType } =
+  useReleasesStoreRefs();
 const { clearState, fetchRegions } = useReleasesStore();
 
 const pickerValue = computed({
@@ -52,13 +53,10 @@ onBeforeMount(() => fetchRegions());
 <template>
   <NFlex class="row" align="center" justify="space-evenly" :vertical="false">
     <NSelect
-      v-model:value="types"
+      v-model:value="releaseType"
       class="type-select"
       :options="typesOptions"
       :to="parentElement"
-      :max-tag-count="1"
-      :ellipsis-tag-popover-props="{ disabled: true }"
-      multiple
     />
     <NDatePicker
       v-model:show="open"
@@ -95,19 +93,15 @@ onBeforeMount(() => fetchRegions());
   padding: 0 0.5rem;
 
   .type-select {
-    flex: 0 0 12rem;
+    flex: 0 0 10rem;
   }
 
   .region-select {
-    flex: 0 0 12rem;
+    flex: 1 0 10rem;
   }
 
   .date-picker {
-    flex: 1 1 33%;
-  }
-
-  .search-input {
-    flex: 1 1 33%;
+    flex: 2 1 48%;
   }
 }
 </style>

src/components/views/settings/SettingsTabs.vue

@@ -145,7 +145,7 @@ const container = ref();
       <SettingsFormItem
         :label="i18n(`label_route_${ route }`)"
         :warning="
-          state && route === Route.Progress
+          state && [Route.Progress, Route.Releases].includes(route)
             ? i18n(`label_route_${ route }_warning`)
             : undefined
         "

src/i18n/en/settings/settings-tabs.json

@@ -27,6 +27,10 @@
     "message": "Enable the releases tab",
     "description": "Label for the 'Enable the releases tab' setting"
   },
+  "settings__tabs__label_route_releases_warning": {
+    "message": "Regional data is sourced from TMDb and may be incomplete or inaccurate.",
+    "description": "Warning message for the 'Enable the releases tab' setting"
+  },
   "settings__tabs__label_route_history": {
     "message": "Enable the history tab",
     "description": "Label for the 'Enable the history tab' setting"

src/services/trakt.service.ts

@@ -4,21 +4,21 @@ import { CacheRetention } from '@dvcol/common-utils/common/cache';
 import { DateUtils } from '@dvcol/common-utils/common/date';
 import { TmdbClient } from '@dvcol/tmdb-http-client';
 
+import {
+  type TmdbApiResponse,
+  type TmdbConfigurationCounty,
+  type TmdbDiscoverMovieQuery,
+  type TmdbMovieReleaseTypes,
+  type TmdbMovieShort,
+  type TmdbPaginatedData,
+  type TmdbParamPagination,
+} from '@dvcol/tmdb-http-client/models';
 import { isResponseOk, TraktClient } from '@dvcol/trakt-http-client';
 
 import { TvdbClient } from '@dvcol/tvdb-http-client';
 
 import type { JsonWriterOptions } from '@dvcol/common-utils/common/save';
 import type { CancellablePromise } from '@dvcol/common-utils/http/fetch';
-import type {
-  TmdbApiResponse,
-  TmdbConfigurationCounty,
-  TmdbDiscoverMovieQuery,
-  TmdbMovieReleaseTypes,
-  TmdbMovieShort,
-  TmdbPaginatedData,
-  TmdbParamPagination,
-} from '@dvcol/tmdb-http-client/models';
 
 import type {
   TraktApiResponse,
@@ -563,12 +563,12 @@ export class TraktService {
       query: TmdbDiscoverMovieQuery & TmdbParamPagination = {},
     ): Promise<TmdbPaginatedData<TmdbMovieShort>> => {
       query.region = options?.region ?? query.region;
-      query['release_date.gte'] = options?.from?.toISOString().split('T').at(0) ?? query['release_date.gte'];
-      if (!query['release_date.gte']) query['release_date.gte'] = DateUtils.previous(7).toISOString().split('T').at(0);
-      if (!query['release_date.gte']) throw new Error('From date is required for movie releases');
-      query['release_date.lte'] = options?.to?.toISOString().split('T').at(0) ?? query['release_date.lte'];
-      if (!query['release_date.lte']) query['release_date.lte'] = DateUtils.next(7).toISOString().split('T').at(0);
-      if (!query['release_date.lte']) throw new Error('To date is required for movie releases');
+      query[`release_date.gte`] = options?.from?.toISOString().split('T').at(0) ?? query[`release_date.gte`];
+      if (!query[`release_date.gte`]) query[`release_date.gte`] = DateUtils.previous(7).toISOString().split('T').at(0);
+      if (!query[`release_date.gte`]) throw new Error('From date is required for movie releases');
+      query[`release_date.lte`] = options?.to?.toISOString().split('T').at(0) ?? query[`release_date.lte`];
+      if (!query[`release_date.lte`]) query[`release_date.lte`] = DateUtils.next(7).toISOString().split('T').at(0);
+      if (!query[`release_date.lte`]) throw new Error('To date is required for movie releases');
       query.with_release_type = options?.release ?? query.with_release_type;
       if (!query.with_release_type) throw new Error('Release type is required for movie releases');
       const response = await TraktService.tmdbClient.v3.discover.movie.cached(query, undefined, { retention: CacheRetention.Week });