itube-specs 0.0.892 → 0.0.895

package/pages/library/index.vue

@@ -0,0 +1,366 @@
+<!-- Библиотека: «продолжить просмотр», коллекции и подписки. Данные пока заглушка -->
+<template>
+  <div class="library _page _container">
+    <UiBreadcrumbs
+      :items="breadcrumbs"
+      class="_breadcrumbs"
+    />
+
+    <div class="library__header">
+      <h1 class="library__title _title">{{ t('navigation.library') }}</h1>
+
+      <UiToggle
+        v-model="saveHistory"
+        class="library__save"
+        left
+      >{{ t('history_text') }}</UiToggle>
+    </div>
+
+    <section
+      v-if="continueWatching.length > 0"
+      class="library__section"
+    >
+      <header class="library__section-header">
+        <h2 class="library__heading">
+          <span class="library__heading-icon">
+            <UiIcon
+              name="history"
+              size="16"
+            />
+          </span>
+          {{ t('library.continue_watching') }}
+        </h2>
+
+        <UiLink
+          :to="generateLink('/history')"
+          theme="secondary"
+        >
+          {{ t('library.view_all_history') }}
+          <UiIcon
+            name="arrow-right"
+            size="16"
+          />
+        </UiLink>
+      </header>
+
+      <div class="library__continue">
+        <CardHistory
+          v-for="item in continueWatching"
+          :key="`continue-${item.guid}`"
+          :card="item"
+          loading="eager"
+          priority
+          remaining
+          @share="onShare"
+          @remove="onRemove"
+        />
+      </div>
+    </section>
+
+    <section class="library__section">
+      <header class="library__section-header">
+        <h2 class="library__heading">
+          <span class="library__heading-icon">
+            <UiIcon
+              name="layers"
+              size="16"
+            />
+          </span>
+          {{ t('library.collections') }}
+        </h2>
+      </header>
+
+      <ul class="library__grid">
+        <li
+          v-for="item in collections"
+          :key="item.title"
+        >
+          <LibraryItem
+            :to="item.to"
+            :icon="item.icon"
+            :title="item.title"
+            :subtitle="item.subtitle"
+          />
+        </li>
+      </ul>
+    </section>
+
+    <section class="library__section">
+      <header class="library__section-header">
+        <h2 class="library__heading">
+          <span class="library__heading-icon">
+            <UiIcon
+              name="plus"
+              size="16"
+            />
+          </span>
+          {{ t('library.following') }}
+        </h2>
+
+        <UiBtn theme="secondary">
+          {{ t('library.whats_new', { count: newTotal }) }}
+          <UiIcon
+            name="arrow-right"
+            size="16"
+          />
+        </UiBtn>
+      </header>
+
+      <ul class="library__grid">
+        <li
+          v-for="item in following"
+          :key="item.title"
+        >
+          <LibraryItem
+            :to="item.to"
+            :icon="item.icon"
+            :title="item.title"
+            :subtitle="item.subtitle"
+            :badge="item.badge"
+            :badge-note="item.badgeNote"
+            :badge-theme="item.badgeTheme"
+          />
+        </li>
+      </ul>
+    </section>
+
+    <ShareMain
+      v-model="isShareOpen"
+      :url="shareUrl"
+    >
+      <template #card>
+        <CardVideoMini
+          v-if="shareCard"
+          :card="shareCard"
+        />
+      </template>
+    </ShareMain>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getHistoryStub } from '../../stubs/history';
+import type { HistoryStubCard } from '../../stubs/history';
+import { libraryStub } from '../../stubs/library';
+import type { IBreadcrumbItem, IVideoCard } from '../../types';
+
+/** Карточка-ссылка библиотеки в разметке страницы. */
+type LibraryLink = {
+  to: string
+  icon: string
+  title: string
+  subtitle?: string
+  badge?: string
+  badgeNote?: string
+  badgeTheme?: 'accent' | 'bordered'
+};
+
+const CONTINUE_LIMIT = 4;
+
+const { t } = useI18n();
+
+const { generateLink } = useGenerateLink();
+
+const saveHistory = ref(true);
+
+const removedGuids = ref<string[]>([]);
+
+/** Недосмотренные ролики: прогресс есть, но до конца не дошли. */
+const continueWatching = computed(() => getHistoryStub()
+  .filter(item => item.progress > 0 && item.progress < 100)
+  .filter(item => !removedGuids.value.includes(item.guid))
+  .slice(0, CONTINUE_LIMIT));
+
+const newTotal = computed(() => libraryStub.newModels + libraryStub.newChannels + libraryStub.newPlaylists);
+
+const collections = computed<LibraryLink[]>(() => [
+  {
+    to: generateLink('/favorites'),
+    icon: 'heart-stroke',
+    title: t('favorites'),
+    subtitle: t('plural.videos', libraryStub.favorites),
+  },
+  {
+    to: `${generateLink('/favorites')}?tab=watch-later`,
+    icon: 'clock',
+    title: t('watch_later'),
+    subtitle: t('plural.videos', libraryStub.watchLater),
+  },
+  {
+    to: generateLink('/playlists'),
+    icon: 'playlist',
+    title: t('my_playlists'),
+    subtitle: t('library.playlists_visibility', {
+      privateCount: libraryStub.privatePlaylists,
+      publicCount: libraryStub.publicPlaylists,
+    }),
+  },
+  {
+    to: generateLink('/history'),
+    icon: 'history',
+    title: t('history'),
+    subtitle: t('library.watched_today', { count: libraryStub.watchedToday }),
+  },
+]);
+
+const following = computed<LibraryLink[]>(() => [
+  {
+    to: generateLink('/library/models'),
+    icon: 'user',
+    title: t('models'),
+    subtitle: t('plural.models', libraryStub.models),
+    badge: t('library.new_count', { count: libraryStub.newModels }),
+  },
+  {
+    to: generateLink('/library/channels'),
+    icon: 'play-circle',
+    title: t('channels'),
+    subtitle: t('plural.channels', libraryStub.channels),
+    badge: t('library.new_count', { count: libraryStub.newChannels }),
+  },
+  {
+    to: generateLink('/library/categories'),
+    icon: 'grid',
+    title: t('categories'),
+    subtitle: t('plural.categories', libraryStub.categories),
+    badge: `+${libraryStub.categoryVideosPerWeek}`,
+    badgeNote: t('library.this_week'),
+    badgeTheme: 'bordered',
+  },
+  {
+    to: generateLink('/playlists'),
+    icon: 'playlist',
+    title: t('playlists'),
+    subtitle: t('plural.playlists', libraryStub.playlists),
+    badge: t('library.new_count', { count: libraryStub.newPlaylists }),
+  },
+]);
+
+function onRemove(card: HistoryStubCard) {
+  removedGuids.value = [...removedGuids.value, card.guid];
+}
+
+const isShareOpen = ref(false);
+const shareCard = ref<IVideoCard | null>(null);
+
+const shareUrl = computed(() => shareCard.value ? generateLink(`/videos/${shareCard.value.id}`) : '');
+
+function onShare(card: IVideoCard) {
+  shareCard.value = card;
+  isShareOpen.value = true;
+}
+
+useNoindex();
+
+const { brandName } = useAppConfig();
+
+useHead(() => ({
+  title: `${t('navigation.library')} — ${brandName}`,
+}));
+
+const breadcrumbs = [
+  {
+    name: `${t('navigation.main')}`,
+    to: '/',
+  },
+  {
+    name: `${t('navigation.library')}`,
+  },
+] as IBreadcrumbItem[];
+</script>
+
+<style lang="scss">
+.library__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 16px;
+  row-gap: 12px;
+  margin-bottom: 24px;
+}
+
+.library__title._title {
+  margin-bottom: 0;
+}
+
+.library__save .ui-toggle__text {
+  @include font-sm;
+
+  color: $page-library-toggle-text;
+}
+
+.library__section {
+  margin-bottom: 48px;
+}
+
+.library__section-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 16px;
+  row-gap: 12px;
+  margin-bottom: 16px;
+}
+
+.library__heading {
+  @include font-xl;
+
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+  margin: 0;
+  font-weight: 600;
+  color: $page-library-heading;
+}
+
+.library__heading-icon {
+  display: grid;
+  place-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  color: $page-library-heading-icon;
+  background-color: $page-library-heading-icon-bg;
+  border-radius: $radius-md;
+}
+
+.library__continue {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: 1fr;
+
+  @include from-br(xm) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include from-br(sm) {
+    gap: 24px;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @include from-br(md) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.library__grid {
+  display: grid;
+  gap: 16px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+
+  @include from-br(sm) {
+    gap: 24px;
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* Карточка тянется на всю высоту ряда — иначе соседи с двухстрочным тайтлом разной высоты. */
+.library__grid > li {
+  display: grid;
+}
+</style>

package/pages/library/models.vue

@@ -0,0 +1,63 @@
+<!-- Подписки на моделей: аватар, теги, лента последних роликов. Данные пока заглушка -->
+<template>
+  <div class="_page _container">
+    <UiBreadcrumbs
+      :items="breadcrumbs"
+      class="_breadcrumbs"
+    />
+
+    <LibraryFollows
+      :items="items"
+      :title="t('library.my_models')"
+      icon="user"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getLibraryModelsStub } from '../../stubs/library-follows';
+import { convertString, formatDate } from '../../runtime';
+import type { IBreadcrumbItem, ILibraryFeedItem } from '../../types';
+
+const { t } = useI18n();
+const { generateLink } = useGenerateLink();
+
+const items = computed<ILibraryFeedItem[]>(() => getLibraryModelsStub().map(model => ({
+  guid: model.guid,
+  title: model.title,
+  to: generateLink(`/models/${convertString().toSlug(model.title)}`),
+  avatarUrl: model.avatarUrl,
+  country: model.country,
+  tags: model.tags.map(tag => convertString().toChips(tag, 'tag')),
+  newCount: model.newCount,
+  meta: [
+    { icon: 'video-camera', text: String(model.videosCount) },
+    { text: `${model.age} ${t('yo')}` },
+    { icon: 'date', text: t('library.updated_at', { date: formatDate(model.lastVideoAddedAt) }) },
+  ],
+  videosCount: model.videosCount,
+  videos: model.videos,
+})));
+
+useNoindex();
+
+const { brandName } = useAppConfig();
+
+useHead(() => ({
+  title: `${t('library.my_models')} — ${brandName}`,
+}));
+
+const breadcrumbs = [
+  {
+    name: `${t('navigation.main')}`,
+    to: '/',
+  },
+  {
+    name: `${t('navigation.library')}`,
+    to: '/library',
+  },
+  {
+    name: `${t('library.my_models')}`,
+  },
+] as IBreadcrumbItem[];
+</script>