feat(calendar): adds basic support for calendar

Author: dvcol

src/components/common/list/ListItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { NFlex, NImage, NSkeleton, NTime, NTimelineItem } from 'naive-ui';
 
-import { computed, type PropType, toRefs, watch } from 'vue';
+import { computed, type PropType, toRefs } from 'vue';
 
 import type { ListScrollItem } from '~/components/common/list/ListScroll.model';
 
@@ -20,15 +20,15 @@ const props = defineProps({
     type: Number,
     required: true,
   },
-  size: {
-    type: Number,
-    required: true,
-  },
   poster: {
     type: String,
     required: false,
     default: PosterPlaceholder,
   },
+  episode: {
+    type: Boolean,
+    required: false,
+  },
   color: {
     type: String,
     required: false,
@@ -61,7 +61,7 @@ const emit = defineEmits<{
   (e: 'onHover', event: { index: number; item: ListScrollItem; hover: boolean }): void;
 }>();
 
-const { item, size, index, noHeader, nextHasHeader, poster, hideDate } = toRefs(props);
+const { item, index, noHeader, nextHasHeader, poster, episode, hideDate } = toRefs(props);
 
 const onHover = (_hover: boolean) => {
   emit('onHover', { index: index?.value, item: item?.value, hover: _hover });
@@ -79,8 +79,6 @@ const year = new Date().getFullYear();
 const sameYear = computed(() => date.value?.getFullYear() === year);
 const loading = computed(() => item?.value?.loading);
 
-const resolvedPoster = computed(() => item?.value?.poster?.value || poster.value);
-
 const { getImageUrl } = useImageStore();
 const { imageSizes } = useImageStoreRefs();
 
@@ -90,22 +88,19 @@ const imageSize = computed(() =>
     : 'original',
 );
 
-watch(
-  item,
-  _item => {
-    if (_item?.poster) return;
-    if (!_item?.type) return;
-
-    const type = ['show', 'episode', 'season'].includes(_item.type) ? 'show' : _item.type;
-    if (!_item?.[type]?.ids?.tmdb) {
-      console.warn('No tmdb id found', JSON.parse(JSON.stringify(_item?.[_item?.type])));
-      return;
-    }
+const itemPoster = computed(() => {
+  const media = item.value;
+  if (media.poster) return media.poster;
+  const query = media.getPosterQuery?.();
+  if (query)
+    return getImageUrl(
+      episode.value ? query : { ...query, episode: undefined },
+      imageSize.value,
+    ).value;
+  return null;
+});
 
-    _item.poster = getImageUrl({ id: _item[type]!.ids.tmdb, type }, imageSize.value);
-  },
-  { immediate: true },
-);
+const resolvedPoster = computed(() => itemPoster.value || poster.value);
 </script>
 
 <template>

src/components/common/list/ListItemPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NEllipsis, NFlex, NSkeleton } from 'naive-ui';
+import { NEllipsis, NFlex, NSkeleton, NTag } from 'naive-ui';
 
 import { computed, type PropType, toRefs } from 'vue';
 
@@ -30,30 +30,32 @@ const props = defineProps({
   },
 });
 
-const { item } = toRefs(props);
+const { item, hideDate } = toRefs(props);
 
 const type = computed(() =>
   item.value.type ? i18n(item.value.type, 'common', 'media', 'type') : item.value.type,
 );
 
-const title = computed(() => {
-  const media = item.value;
-  if (media.person) return media.person.name;
-  if (media.movie) return media.movie.title;
-  if (!media.episode) return media.show?.title;
-  const number = media.episode.number?.toString().padStart(2, '0');
-  return `${media.episode.season}x${number} - ${media.episode.title}`;
-});
+const title = computed(() => item.value.title);
+
+const content = computed(() => item.value.content);
 
-const content = computed(() => {
-  const media = item.value;
-  if (media.movie) return media.movie.year;
-  if (!media.episode) return media.show?.year;
-  return media.show?.title;
+const date = computed(() => {
+  if (hideDate.value) return;
+  return item.value.date?.current?.toLocaleTimeString(navigator.language, {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
 });
 
-const currentDate = computed(() => item.value.date?.current);
-const date = computed(() => currentDate.value?.toLocaleTimeString());
+const tags = computed(
+  () =>
+    item.value.tags?.map(tag => {
+      if (!tag.i18n) return tag;
+      if (typeof tag.i18n === 'boolean') return { ...tag, label: i18n(tag.label) };
+      return { ...tag, label: i18n(tag.label, ...tag.i18n) };
+    }),
+);
 </script>
 
 <template>
@@ -76,10 +78,25 @@ const date = computed(() => currentDate.value?.toLocaleTimeString());
       <NSkeleton v-if="loading" text style="width: 60%" round />
       <NEllipsis v-else :line-clamp="2">{{ content }}</NEllipsis>
     </div>
-    <div v-if="!hideDate" class="meta time">
-      <NSkeleton v-if="loading" text style="width: 20%" round />
-      <NEllipsis v-else :line-clamp="1">{{ date }}</NEllipsis>
-    </div>
+    <NFlex v-if="date || tags?.length" size="medium" class="tags">
+      <NTag v-if="date" class="tag meta" size="small">
+        <NSkeleton v-if="loading" text style="width: 20%" round />
+        <span>{{ date }} </span>
+      </NTag>
+      <NTag
+        v-for="tag of tags"
+        :key="tag.label"
+        class="tag"
+        :class="{
+          meta: tag.meta,
+        }"
+        size="small"
+        :type="tag.type"
+        :bordered="tag.bordered ?? true"
+      >
+        {{ tag.label }}
+      </NTag>
+    </NFlex>
   </NFlex>
 </template>
 
@@ -89,11 +106,12 @@ const date = computed(() => currentDate.value?.toLocaleTimeString());
   margin: 0.25rem 0;
 
   .title {
-    font-variant-numeric: tabular-nums;
+    margin-top: 0.1rem;
     color: var(--trakt-red);
     font-weight: var(--n-title-font-weight);
     font-size: var(--n-title-font-size);
     transition: color 0.3s var(--n-bezier);
+    font-variant-numeric: tabular-nums;
   }
 
   .content {
@@ -108,8 +126,13 @@ const date = computed(() => currentDate.value?.toLocaleTimeString());
     transition: color 0.3s var(--n-bezier);
   }
 
-  .time {
-    margin-top: 0.25rem;
+  .tags {
+    gap: 0.5rem !important;
+    margin-top: 0.3rem;
+
+    .tag {
+      width: fit-content;
+    }
   }
 }
 </style>

src/components/common/list/ListScroll.model.ts

@@ -1,10 +1,12 @@
-import type { NVirtualList, VirtualListInst } from 'naive-ui';
+import type { NVirtualList, TagProps, VirtualListInst } from 'naive-ui';
+
 import type { Ref } from 'vue';
 import type { TraktEpisode } from '~/models/trakt/trakt-episode.model';
 import type { TraktMovie } from '~/models/trakt/trakt-movie.model';
 import type { TraktPerson } from '~/models/trakt/trakt-people.model';
 import type { TraktSeason } from '~/models/trakt/trakt-season.model';
 import type { TraktShow } from '~/models/trakt/trakt-show.model';
+import type { ImageQuery } from '~/stores/data/image.store';
 
 export type VirtualListRef = VirtualListInst & InstanceType<typeof NVirtualList>;
 export type VirtualListProps = {
@@ -28,13 +30,34 @@ export type ListScrollSourceItem = {
   person?: TraktPerson<'short'>;
 };
 
-export type ListScrollItem = ListScrollSourceItem & {
-  id: string | number | 'load-more';
+export type ListScrollItemTag = {
+  label: string;
+  i18n?: boolean | string[];
+  type?: TagProps['type'];
+  bordered?: boolean;
+  meta?: string;
+};
+
+export const ListScrollItemType = {
+  movie: 'movie',
+  show: 'show',
+  season: 'season',
+  episode: 'episode',
+  person: 'person',
+  placeholder: 'placeholder',
+} as const;
+
+export type ListScrollItem = {
+  id: string | number | 'load-more' | 'empty';
   index: number;
 
-  type?: 'movie' | 'show' | 'season' | 'episode' | 'person';
+  type?: keyof typeof ListScrollItemType;
+  title?: string;
+  content?: string;
+  tags?: ListScrollItemTag[];
 
-  poster?: Ref<string | undefined>;
+  poster?: string;
+  getPosterQuery?: () => ImageQuery | undefined;
 
   loading?: boolean;
   date?: {

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

@@ -2,42 +2,108 @@ import { computed } from 'vue';
 
 import type { Ref } from 'vue';
 
-import type { ListScrollItem, ListScrollSourceItem, OnScroll, OnUpdated } from '~/components/common/list/ListScroll.model';
 import type { TraktClientPagination } from '~/models/trakt/trakt-client.model';
 
+import type { ImageQuery } from '~/stores/data/image.store';
+
+import {
+  type ListScrollItem,
+  ListScrollItemType,
+  type ListScrollSourceItem,
+  type OnScroll,
+  type OnUpdated,
+} from '~/components/common/list/ListScroll.model';
+
 export type ListScrollSourceItemWithDate<T extends string> = ListScrollSourceItem & Partial<Record<T, string | number | Date>>;
 
+export const getTitle = (media: ListScrollSourceItem): ListScrollItem['title'] => {
+  if (!media) return;
+  if (media.person) return media.person.name;
+  if (media.movie) return media.movie.title;
+  if (!media.episode) return media.show?.title;
+  const number = media.episode.number?.toString().padStart(2, '0');
+  return `${media.episode.season}x${number} - ${media.episode.title}`;
+};
+
+export const getContent = (media: ListScrollSourceItem): ListScrollItem['content'] => {
+  if (!media) return;
+  if (media.movie) return media.movie.year?.toString();
+  if (!media.episode) return media.show?.year?.toString();
+  return media.show?.title;
+};
+
+export const getType = (media: ListScrollSourceItem): ListScrollItem['type'] => {
+  if (!media) return;
+  if ('movie' in media) return ListScrollItemType.movie;
+  if ('episode' in media) return ListScrollItemType.episode;
+  if ('season' in media) return ListScrollItemType.season;
+  if ('show' in media) return ListScrollItemType.show;
+  if ('person' in media) return ListScrollItemType.person;
+};
+
+export const getDate = <D extends string, T extends ListScrollSourceItemWithDate<D>>(
+  media: T,
+  array: T[],
+  index: number,
+  dateFn?: D | ((item: T) => ListScrollSourceItemWithDate<D>[D]),
+): ListScrollItem['date'] => {
+  if (!media || !dateFn) return;
+  const _date = typeof dateFn === 'function' ? dateFn(media) : media[dateFn];
+  if (!_date) return;
+  const date: ListScrollItem['date'] = { current: new Date(_date) };
+  const previous = typeof dateFn === 'function' ? dateFn(array[index - 1]) : array[index - 1]?.[dateFn];
+  if (index > 0 && previous) date.previous = new Date(previous);
+  const next = typeof dateFn === 'function' ? dateFn(array[index + 1]) : array[index + 1]?.[dateFn];
+  if (next) date.next = new Date(next);
+  date.sameDayAsPrevious = date.previous?.toLocaleDateString() === date.current?.toLocaleDateString();
+  date.sameDayAsNext = date.next?.toLocaleDateString() === date.current?.toLocaleDateString();
+  return date;
+};
+
+const isMediaType = (type: ListScrollItem['type']): type is 'movie' | 'show' | 'season' | 'episode' | 'person' =>
+  type === ListScrollItemType.movie ||
+  type === ListScrollItemType.show ||
+  type === ListScrollItemType.season ||
+  type === ListScrollItemType.episode ||
+  type === ListScrollItemType.person;
+
+export const getPosterQuery =
+  (item: ListScrollSourceItem, type: ListScrollItem['type']): ListScrollItem['getPosterQuery'] =>
+  () => {
+    if (!item || !type) return;
+    if (type === ListScrollItemType.placeholder) return;
+    if (!isMediaType(type)) return;
+    const _type = ['show', 'episode', 'season'].includes(type) ? 'show' : type;
+    const media = item[_type];
+    if (!media?.ids.tmdb) return;
+    return {
+      type,
+      id: media.ids.tmdb,
+      season: item?.episode?.season ?? item.season?.number,
+      episode: item?.episode?.number,
+    } satisfies ImageQuery;
+  };
+
 export const useListScroll = <D extends string, T extends ListScrollSourceItemWithDate<D>>(
   items: Ref<T[]>,
   dateFn?: D | ((item: T) => ListScrollSourceItemWithDate<D>[D]),
-) =>
-  computed<ListScrollItem[]>(() => {
+) => {
+  return computed<ListScrollItem[]>(() => {
     const array = items.value;
     if (!array.length) return [];
     return array.map((item, index) => {
       const _item: ListScrollItem = { ...item, index, loading: typeof item.id === 'number' && item.id < 0 };
 
-      if ('movie' in _item) _item.type = 'movie';
-      else if ('episode' in _item) _item.type = 'episode';
-      else if ('season' in _item) _item.type = 'season';
-      else if ('show' in _item) _item.type = 'show';
-      else if ('person' in _item) _item.type = 'person';
-
-      if (!_item || !dateFn) return _item;
-      const _date = typeof dateFn === 'function' ? dateFn(item) : item[dateFn];
-      if (!_date) return _item;
-
-      const date: ListScrollItem['date'] = { current: new Date(_date!) };
-      const previous = typeof dateFn === 'function' ? dateFn(array[index - 1]) : array[index - 1]?.[dateFn];
-      if (index > 0 && previous) date.previous = new Date(previous);
-      const next = typeof dateFn === 'function' ? dateFn(array[index + 1]) : array[index + 1]?.[dateFn];
-      if (next) date.next = new Date(next);
-      date.sameDayAsPrevious = date.previous?.toLocaleDateString() === date.current?.toLocaleDateString();
-      date.sameDayAsNext = date.next?.toLocaleDateString() === date.current?.toLocaleDateString();
-
-      return { ..._item, date };
+      if (!_item.type) _item.type = getType(item);
+      if (!_item.title) _item.title = getTitle(item);
+      if (!_item.content) _item.content = getContent(item);
+      if (!_item.poster && !_item.getPosterQuery) _item.getPosterQuery = getPosterQuery(item, _item.type);
+      _item.date = getDate(item, array, index, dateFn);
+
+      return _item;
     });
   });
+};
 
 export const useListScrollEvents = (
   callback: (query: { page: number }) => Promise<unknown>,