itube-specs 0.0.893 → 0.0.896

package/pages/library/categories.vue

@@ -0,0 +1,61 @@
+<!-- Подписки на категории: широкие показывают лучшее за неделю, узкие — новинки. Данные пока заглушка -->
+<template>
+  <div class="_page _container">
+    <UiBreadcrumbs
+      :items="breadcrumbs"
+      class="_breadcrumbs"
+    />
+
+    <LibraryFollows
+      :items="items"
+      :title="t('library.my_categories')"
+      icon="grid"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getLibraryCategoriesStub } 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[]>(() => getLibraryCategoriesStub().map(category => ({
+  guid: category.guid,
+  title: category.title,
+  to: generateLink(`/categories/${convertString().toSlug(category.title)}`),
+  newCount: category.newCount,
+  meta: [
+    { icon: 'video-camera', text: String(category.videosCount) },
+    { icon: 'date', text: t('library.updated_at', { date: formatDate(category.lastVideoAddedAt) }) },
+  ],
+  videosCount: category.videosCount,
+  // Нечего показать в новинках — лента откатывается на лучшее за неделю
+  feedTitle: category.newCount ? t('library.latest') : t('library.top_this_week'),
+  videos: category.videos,
+})));
+
+useNoindex();
+
+const { brandName } = useAppConfig();
+
+useHead(() => ({
+  title: `${t('library.my_categories')} — ${brandName}`,
+}));
+
+const breadcrumbs = [
+  {
+    name: `${t('navigation.main')}`,
+    to: '/',
+  },
+  {
+    name: `${t('navigation.library')}`,
+    to: '/library',
+  },
+  {
+    name: `${t('library.my_categories')}`,
+  },
+] as IBreadcrumbItem[];
+</script>

package/pages/library/channels.vue

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

package/pages/library/index.vue

@@ -212,14 +212,14 @@ const following = computed<LibraryLink[]>(() => [
     badge: t('library.new_count', { count: libraryStub.newModels }),
   },
   {
-    to: generateLink('/channels'),
+    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('/categories'),
+    to: generateLink('/library/categories'),
     icon: 'grid',
     title: t('categories'),
     subtitle: t('plural.categories', libraryStub.categories),

package/pages/library/models.vue

@@ -1,120 +1,43 @@
-<!-- Подписки на моделей: сортировка и лента последних роликов по каждой модели. Данные пока заглушка -->
+<!-- Подписки на моделей: аватар, теги, лента последних роликов. Данные пока заглушка -->
 <template>
-  <div class="library-models _page _container">
+  <div class="_page _container">
     <UiBreadcrumbs
       :items="breadcrumbs"
       class="_breadcrumbs"
     />
 
-    <UiSectionTitle
+    <LibraryFollows
+      :items="items"
       :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];
+import { getLibraryModelsStub } from '../../stubs/library-follows';
+import { convertString, formatDate } from '../../runtime';
+import type { IBreadcrumbItem, ILibraryFeedItem } from '../../types';
 
 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;
-}
+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();
 
@@ -138,31 +61,3 @@ const breadcrumbs = [
   },
 ] 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>

package/stubs/library-follows.ts

@@ -0,0 +1,135 @@
+import { VIDEO_POOL } from './videos';
+import type { StubVideo } from './videos';
+
+const HOUR = 3600;
+const DAY = 24 * HOUR;
+
+/** Сколько последних роликов сущности показываем в ленте. */
+const PREVIEW_LIMIT = 5;
+
+export type LibraryFollowVideo = StubVideo & {
+  guid: string;
+  isNew: boolean;
+};
+
+type LibraryFollowBase = {
+  guid: string;
+  title: string;
+  videosCount: number;
+  /** Сколько роликов вышло с прошлого захода; 0 — плашки «новое» нет */
+  newCount: number;
+  /** Unix timestamp (сек.) последнего добавленного ролика */
+  lastVideoAddedAt: number;
+  videos: LibraryFollowVideo[];
+};
+
+export type LibraryModelStub = LibraryFollowBase & {
+  avatarUrl: string;
+  country: {
+    name: string
+    title: string
+  };
+  age: number;
+  tags: string[];
+};
+
+export type LibraryChannelStub = LibraryFollowBase & {
+  avatarUrl?: string;
+  followersCount: number;
+  tags: string[];
+};
+
+export type LibraryCategoryStub = LibraryFollowBase;
+
+const now = () => Math.floor(Date.now() / 1000);
+
+const toSlug = (title: string) => title.toLowerCase().replace(/\s+/g, '-');
+
+/** Нарезает пул на ленту сущности: guid уникален внутри неё, первые `newCount` помечены новинками. */
+function buildVideos(slug: string, offset: number, newCount: number): LibraryFollowVideo[] {
+  return Array.from({ length: PREVIEW_LIMIT }, (_, index) => {
+    const video = VIDEO_POOL[(offset + index) % VIDEO_POOL.length];
+
+    return {
+      ...video,
+      guid: `${slug}-${video.id}`,
+      isNew: index < newCount,
+    };
+  });
+}
+
+/** Порядок по числу новинок намеренно не совпадает с алфавитным — иначе обе сортировки дают одно и то же. */
+const MODELS = [
+  { title: 'Dakota Lovell', image: 'Dakota_Lovell.png', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, tags: ['Twink', 'Jock', 'Versatile', 'Smooth', 'Bareback', 'Amateur'], updatedAgo: 6 * HOUR, videoOffset: 3 },
+  { title: 'Jax Thirio', image: 'Jax_Thirio.png', country: { name: 'ca', title: 'Canada' }, age: 38, videosCount: 17, newCount: 2, tags: ['Muscle', 'Daddy', 'Top', 'Tattooed'], updatedAgo: 2 * DAY, videoOffset: 9 },
+  { title: 'Austin Young', image: 'Austin_Young.png', country: { name: 'us', title: 'USA' }, age: 24, videosCount: 75, newCount: 1, tags: ['Twink', 'Smooth', 'Bottom', 'Blond', 'Solo'], updatedAgo: 9 * DAY, videoOffset: 0 },
+  { title: 'Devin Franco', image: 'Devin_Franco.png', country: { name: 'us', title: 'USA' }, age: 33, videosCount: 24, newCount: 0, tags: ['Muscle', 'Tattooed', 'Bottom', 'Fisting', 'Hardcore', 'Professional'], updatedAgo: 21 * DAY, videoOffset: 6 },
+];
+
+const CHANNELS = [
+  { title: 'Top To Bottom', avatarUrl: undefined, videosCount: 17, followersCount: 12800, newCount: 3, tags: ['Versatile', 'Flip-Flop', 'HD', 'Professional', 'Exclusive', 'Bareback'], updatedAgo: 4 * HOUR, videoOffset: 2 },
+  { title: 'Icon Male', avatarUrl: 'https://nli01.joystorage.com/c/0/2/c02a3f8ef14943b5f3da537aaed46fcc.jpeg', videosCount: 128, followersCount: 128400, newCount: 2, tags: ['Muscle', 'Daddy', 'Bareback', 'Professional', 'Exclusive', 'HD', 'Studio'], updatedAgo: DAY, videoOffset: 0 },
+  { title: 'Sean Cody', avatarUrl: undefined, videosCount: 64, followersCount: 210500, newCount: 1, tags: ['Jock', 'Muscle', 'Bareback', 'Studio'], updatedAgo: 5 * DAY, videoOffset: 7 },
+  { title: 'Johnny Rapid', avatarUrl: 'https://nli01.joystorage.com/e/6/d/e6d0abd734a1a2eaef0baf7ceccfdb5c.jpeg', videosCount: 86, followersCount: 94200, newCount: 0, tags: ['Twink', 'Bareback', 'Group', 'Amateur'], updatedAgo: 14 * DAY, videoOffset: 4 },
+];
+
+/**
+ * Широкие категории пополняются постоянно, поэтому новинки у них есть всегда; узкие вроде Firemen
+ * неделями стоят на месте — там `newCount: 0`, и лента откатывается на лучшее за неделю.
+ */
+const CATEGORIES = [
+  { title: 'Bareback', videosCount: 214, newCount: 3, updatedAgo: 3 * HOUR, videoOffset: 1 },
+  { title: 'Twinks', videosCount: 176, newCount: 2, updatedAgo: 9 * HOUR, videoOffset: 5 },
+  { title: 'Bears', videosCount: 92, newCount: 0, updatedAgo: 11 * DAY, videoOffset: 10 },
+  { title: 'Firemen', videosCount: 61, newCount: 0, updatedAgo: 24 * DAY, videoOffset: 8 },
+];
+
+/**
+ * Подписки пользователя. Ручек под них пока нет — вёрстка живёт на заглушке.
+ * Возраст ролика считаем от «сейчас», чтобы даты в разметке не устаревали.
+ */
+export function getLibraryModelsStub(): LibraryModelStub[] {
+  const stamp = now();
+
+  return MODELS.map(({ image, updatedAgo, videoOffset, ...model }) => {
+    const guid = toSlug(model.title);
+
+    return {
+      ...model,
+      guid,
+      avatarUrl: `/img/models/${image}`,
+      lastVideoAddedAt: stamp - updatedAgo,
+      videos: buildVideos(guid, videoOffset, model.newCount),
+    };
+  });
+}
+
+export function getLibraryChannelsStub(): LibraryChannelStub[] {
+  const stamp = now();
+
+  return CHANNELS.map(({ updatedAgo, videoOffset, ...channel }) => {
+    const guid = toSlug(channel.title);
+
+    return {
+      ...channel,
+      guid,
+      lastVideoAddedAt: stamp - updatedAgo,
+      videos: buildVideos(guid, videoOffset, channel.newCount),
+    };
+  });
+}
+
+export function getLibraryCategoriesStub(): LibraryCategoryStub[] {
+  const stamp = now();
+
+  return CATEGORIES.map(({ updatedAgo, videoOffset, ...category }) => {
+    const guid = toSlug(category.title);
+
+    return {
+      ...category,
+      guid,
+      lastVideoAddedAt: stamp - updatedAgo,
+      videos: buildVideos(guid, videoOffset, category.newCount),
+    };
+  });
+}

package/types/index.d.ts

@@ -49,6 +49,7 @@ export * from './navigation-items.d.ts';
 export * from './link-item.d.ts';
 export * from './fluid-player.d.ts';
 export * from './chips-item.d.ts';
+export * from './library-feed.d.ts';
 export * from './nav-link-item.d.ts';
 export * from './paginated-response.d.ts';
 export * from './request-pagination.d.ts';

package/types/library-feed.d.ts

@@ -0,0 +1,34 @@
+import type { IChipsItem } from './chips-item';
+import type { IVideoCard } from './video-card';
+
+/** Счётчик в строке под тегами: «17», «128.4K followers», «Updated 04.06.2026». */
+export interface ILibraryFeedMeta {
+  icon?: string
+  text: string
+}
+
+/**
+ * Блок одной подписки в «Библиотеке». Модели, каналы и категории отличаются только
+ * составом шапки, поэтому страница приводит их к этой форме, а вёрстка одна.
+ */
+export interface ILibraryFeedItem {
+  guid: string
+  title: string
+  /** Ссылка на саму сущность */
+  to: string
+  /** Нет — вместо картинки рисуются инициалы */
+  avatarUrl?: string
+  /** Только у моделей */
+  country?: {
+    name: string
+    title: string
+  }
+  tags?: IChipsItem[]
+  /** Роликов с прошлого захода: плашка «N new» и порядок в сортировке «сначала новые». 0 — плашки нет */
+  newCount: number
+  meta: ILibraryFeedMeta[]
+  videosCount: number
+  /** Подпись над лентой: «Latest» / «Top this week». Нет — лента без подписи */
+  feedTitle?: string
+  videos: IVideoCard[]
+}