itube-specs 0.0.892 → 0.0.893

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('/channels'),
+    icon: 'play-circle',
+    title: t('channels'),
+    subtitle: t('plural.channels', libraryStub.channels),
+    badge: t('library.new_count', { count: libraryStub.newChannels }),
+  },
+  {
+    to: generateLink('/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,168 @@
+<!-- Подписки на моделей: сортировка и лента последних роликов по каждой модели. Данные пока заглушка -->
+<template>
+  <div class="library-models _page _container">
+    <UiBreadcrumbs
+      :items="breadcrumbs"
+      class="_breadcrumbs"
+    />
+
+    <UiSectionTitle
+      :title="t('library.my_models')"
+      :count="models.length"
+      class="library-models__title"
+      icon="user"
+    />
+
+    <div class="library-models__sort">
+      <UiBtn
+        v-for="item in sortItems"
+        :key="item.name"
+        :theme="sort === item.name ? 'primary' : 'secondary'"
+        @click="sort = item.name"
+      >{{ item.title }}</UiBtn>
+    </div>
+
+    <div
+      v-if="models.length > 0"
+      class="library-models__list"
+    >
+      <LibraryModel
+        v-for="(model, index) in models"
+        :key="model.guid"
+        :model="model"
+        :following="isFollowing(model)"
+        :priority="index === 0"
+        @toggle-follow="onToggleFollow"
+      />
+    </div>
+
+    <UiEmptyState
+      v-else
+      without-reset
+    />
+
+    <UiConfirm
+      v-model="isUnfollowOpen"
+      :title="t('library.unfollow_title', { name: pendingUnfollow?.title })"
+      :confirm-text="t('library.unfollow_confirm')"
+      @confirm="onUnfollowConfirm"
+    >
+      <p class="library-models__confirm">{{ t('library.unfollow_text') }}</p>
+    </UiConfirm>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getLibraryModelsStub } from '../../stubs/library-models';
+import type { LibraryModelStub } from '../../stubs/library-models';
+import type { IBreadcrumbItem } from '../../types';
+
+const LibrarySort = {
+  New: 'new',
+  Alphabet: 'alphabet',
+} as const;
+
+type LibrarySortValue = typeof LibrarySort[keyof typeof LibrarySort];
+
+const { t } = useI18n();
+
+const sort = ref<LibrarySortValue>(LibrarySort.New);
+
+const sortItems = computed(() => [
+  { name: LibrarySort.New, title: t('library.sort_new_first') },
+  { name: LibrarySort.Alphabet, title: t('library.sort_alphabet') },
+]);
+
+const unfollowed = ref<string[]>([]);
+
+const allModels = getLibraryModelsStub();
+
+const models = computed(() => {
+  const items = [...allModels];
+
+  return sort.value === LibrarySort.Alphabet
+    ? items.sort((a, b) => a.title.localeCompare(b.title))
+    : items.sort((a, b) => b.lastVideoAddedAt - a.lastVideoAddedAt);
+});
+
+function isFollowing(model: LibraryModelStub) {
+  return !unfollowed.value.includes(model.guid);
+}
+
+/** Модель, для которой открыт попап отписки. */
+const pendingUnfollow = ref<LibraryModelStub | null>(null);
+
+const isUnfollowOpen = computed({
+  get: () => pendingUnfollow.value !== null,
+  set: value => {
+    if (!value) pendingUnfollow.value = null;
+  },
+});
+
+/** Подписка — сразу, отписка — только через подтверждение: она сносит ленту обновлений. */
+function onToggleFollow(model: LibraryModelStub) {
+  if (isFollowing(model)) {
+    pendingUnfollow.value = model;
+    return;
+  }
+
+  unfollowed.value = unfollowed.value.filter(guid => guid !== model.guid);
+}
+
+function onUnfollowConfirm() {
+  if (!pendingUnfollow.value) return;
+
+  unfollowed.value = [...unfollowed.value, pendingUnfollow.value.guid];
+  pendingUnfollow.value = null;
+}
+
+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>
+
+<style lang="scss">
+.library-models__title {
+  margin-bottom: 16px;
+}
+
+.library-models__sort {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+
+.library-models__list {
+  display: grid;
+  row-gap: 24px;
+}
+
+.library-models__confirm {
+  @include font-sm;
+
+  max-width: 400px;
+  margin: 0 auto;
+  text-align: center;
+  color: $page-library-confirm-text;
+}
+</style>