itube-specs 0.0.892 → 0.0.893

package/pages/library.vue

@@ -1,366 +1,6 @@
-<!-- Библиотека: «продолжить просмотр», коллекции и подписки. Данные пока заглушка -->
 <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>
+  <NuxtPage />
 </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('/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/stubs/history.ts

@@ -1,3 +1,4 @@
+import { VIDEO_POOL } from './videos';
 import type { IThumbUrls } from '../types';
 
 const HOUR = 3600;
@@ -20,24 +21,26 @@ export type HistoryStubCard = {
 };
 
 /**
- * Ролики сняты с главной gay.cool — id, тайтлы, тумбы и каналы настоящие.
+ * Состояние просмотра поверх общего пула роликов — индекс в индекс с `VIDEO_POOL`.
  * `watchedAgo` — смещение в секундах от «сейчас», чтобы даты в вёрстке не устаревали.
  */
-const ITEMS = [
-  { id: '445839845', title: 'Drew Sebastian Barebacks Nick Fitt: Muscle Daddy Tops Athletic Bottom on the Couch', duration: 486, thumbUrls: { webp: { '320x180': 'https://nlt01.gay.cool/a/8/d/a8dc253cad705d688508de096435a989/thumbs/320x180/3.webp', '480x270': 'https://nlt01.gay.cool/a/8/d/a8dc253cad705d688508de096435a989/thumbs/480x270/3.webp' } }, channelName: 'Icon Male', channelAvatar: 'https://nli01.joystorage.com/c/0/2/c02a3f8ef14943b5f3da537aaed46fcc.jpeg', previewUrl: 'https://nlp02.gay.cool/a/8/d/a8dc253cad705d688508de096435a989/preview/video.mp4', progress: 57, watchedAgo: 2 * HOUR },
-  { id: '171708405', title: 'Bareback bathroom fisting with black latex gloves, rimming, piss play and anal gape', duration: 358, quality: '1080', thumbUrls: { webp: { '320x180': 'https://nlt03.gay.cool/b/7/5/b75c1bf33571126845502e2b9bb5d687/thumbs/320x180/33.webp', '480x270': 'https://nlt03.gay.cool/b/7/5/b75c1bf33571126845502e2b9bb5d687/thumbs/480x270/33.webp' } }, previewUrl: 'https://nlp02.gay.cool/b/7/5/b75c1bf33571126845502e2b9bb5d687/preview/video.mp4', progress: 74, watchedAgo: 5 * HOUR },
-  { id: '374534215', title: 'Jake Davis Takes Bareback Anal in Blue Harness from Athletic Partner', duration: 487, thumbUrls: { webp: { '320x180': 'https://nlt02.gay.cool/2/4/6/246f577796c7c955b8df94f6454de2a5/thumbs/320x180/12.webp', '480x270': 'https://nlt02.gay.cool/2/4/6/246f577796c7c955b8df94f6454de2a5/thumbs/480x270/12.webp' } }, channelName: 'Icon Male', channelAvatar: 'https://nli01.joystorage.com/c/0/2/c02a3f8ef14943b5f3da537aaed46fcc.jpeg', previewUrl: 'https://nlp05.gay.cool/2/4/6/246f577796c7c955b8df94f6454de2a5/preview/video.mp4', progress: 91, watchedAgo: 8 * HOUR },
-  { id: '3377550', title: 'Rego Bello and Devin Adams bareback bedroom flip: reciprocal oral then Devin tops Rego', duration: 426, thumbUrls: { webp: { '320x180': 'https://nlt01.gay.cool/3/e/b/3eb0f19f1e600a98a7f5a5e51edc4b46/thumbs/320x180/33.webp', '480x270': 'https://nlt01.gay.cool/3/e/b/3eb0f19f1e600a98a7f5a5e51edc4b46/thumbs/480x270/33.webp' } }, previewUrl: 'https://nlp05.gay.cool/3/e/b/3eb0f19f1e600a98a7f5a5e51edc4b46/preview/video.mp4', progress: 48, watchedAgo: DAY + 3 * HOUR },
-  { id: '443170695', title: 'Johnny Rapid and Malakai White lead four-man hotel bareback with Max Lorde and Kyler Drayke', duration: 487, thumbUrls: { webp: { '320x180': 'https://nlt04.gay.cool/9/f/f/9ff067b9ea8b157ff2478667423ff9bb/thumbs/320x180/29.webp', '480x270': 'https://nlt04.gay.cool/9/f/f/9ff067b9ea8b157ff2478667423ff9bb/thumbs/480x270/29.webp' } }, channelName: 'Johnny Rapid', channelAvatar: 'https://nli01.joystorage.com/e/6/d/e6d0abd734a1a2eaef0baf7ceccfdb5c.jpeg', previewUrl: 'https://nlp01.gay.cool/9/f/f/9ff067b9ea8b157ff2478667423ff9bb/preview/video.mp4', progress: 100, watchedAgo: DAY + 7 * HOUR },
-  { id: '175791825', title: 'Kyle Wilkinson flip-fucks bareback with a smooth skinny twink: deep oral, riding and doggy', duration: 586, thumbUrls: { webp: { '320x180': 'https://nlt05.gay.cool/9/0/f/90fd15f9305b32394f8d383113376c27/thumbs/320x180/7.webp', '480x270': 'https://nlt05.gay.cool/9/0/f/90fd15f9305b32394f8d383113376c27/thumbs/480x270/7.webp' } }, previewUrl: 'https://nlp04.gay.cool/9/0/f/90fd15f9305b32394f8d383113376c27/preview/video.mp4', progress: 23, watchedAgo: DAY + 11 * HOUR },
-  { id: '374648505', title: 'Devon Lebron barebacks tattooed twink after rimjob in Staxus bedroom', duration: 1800, thumbUrls: { webp: { '320x180': 'https://nlt05.gay.cool/a/2/b/a2b4dce906ce8a4c107a5d559013e555/thumbs/320x180/46.webp', '480x270': 'https://nlt05.gay.cool/a/2/b/a2b4dce906ce8a4c107a5d559013e555/thumbs/480x270/46.webp' } }, previewUrl: 'https://nlp04.gay.cool/a/2/b/a2b4dce906ce8a4c107a5d559013e555/preview/video.mp4', progress: 99, watchedAgo: DAY + 16 * HOUR },
-  { id: '307011761', title: 'Damien Nichols barebacks a tattooed twink: military amateur, deepthroat to raw anal and cumshot', duration: 419, thumbUrls: { webp: { '320x180': 'https://nlt01.gay.cool/5/a/0/5a00c5dd536d7d7ce4baef5e45930f91/thumbs/320x180/43.webp', '480x270': 'https://nlt01.gay.cool/5/a/0/5a00c5dd536d7d7ce4baef5e45930f91/thumbs/480x270/43.webp' } }, previewUrl: 'https://nlp02.gay.cool/5/a/0/5a00c5dd536d7d7ce4baef5e45930f91/preview/video.mp4', progress: 66, watchedAgo: 2 * DAY + 4 * HOUR },
-  { id: '444068845', title: 'Dean Young Bareback Flip Fuck: Versatile Anal, Deepthroat and Rimming in the Bedroom', duration: 604, thumbUrls: { webp: { '320x180': 'https://nlt03.gay.cool/7/d/a/7daacbe876b51c7cdc50101b0d504be8/thumbs/320x180/16.webp', '480x270': 'https://nlt03.gay.cool/7/d/a/7daacbe876b51c7cdc50101b0d504be8/thumbs/480x270/16.webp' } }, previewUrl: 'https://nlp03.gay.cool/7/d/a/7daacbe876b51c7cdc50101b0d504be8/preview/video.mp4', progress: 12, watchedAgo: 2 * DAY + 9 * HOUR },
-  { id: '374968825', title: 'Brody Fox sucks and rides daddy Cain Marko bareback', duration: 497, thumbUrls: { webp: { '320x180': 'https://nlt01.gay.cool/9/e/2/9e23f59e882e860da3ab2400d93ac73e/thumbs/320x180/10.webp', '480x270': 'https://nlt01.gay.cool/9/e/2/9e23f59e882e860da3ab2400d93ac73e/thumbs/480x270/10.webp' } }, previewUrl: 'https://nlp03.gay.cool/9/e/2/9e23f59e882e860da3ab2400d93ac73e/preview/video.mp4', progress: 88, watchedAgo: 2 * DAY + 15 * HOUR },
-  { id: '377844995', title: 'Rick Lovatelli: blond twink dominated, deepthroats and gets barebacked by a suited bearded top', duration: 1627, thumbUrls: { webp: { '320x180': 'https://nlt05.gay.cool/f/1/b/f1b09d77a2e23f4b4696d97169614099/thumbs/320x180/25.webp', '480x270': 'https://nlt05.gay.cool/f/1/b/f1b09d77a2e23f4b4696d97169614099/thumbs/480x270/25.webp' } }, previewUrl: 'https://nlp01.gay.cool/f/1/b/f1b09d77a2e23f4b4696d97169614099/preview/video.mp4', progress: 35, watchedAgo: 4 * DAY + 6 * HOUR },
-  { id: '375132285', title: 'Viktor Rom and Jordan Fox bareback blue-haired bottom in bedroom threesome', duration: 800, quality: '1080', thumbUrls: { webp: { '320x180': 'https://nlt03.gay.cool/5/f/b/5fbcdd007476cd0a1e9c85abc9fc0042/thumbs/320x180/1.webp', '480x270': 'https://nlt03.gay.cool/5/f/b/5fbcdd007476cd0a1e9c85abc9fc0042/thumbs/480x270/1.webp' } }, previewUrl: 'https://nlp04.gay.cool/5/f/b/5fbcdd007476cd0a1e9c85abc9fc0042/preview/video.mp4', progress: 71, watchedAgo: 4 * DAY + 12 * HOUR },
+const WATCH_STATE = [
+  { progress: 57, watchedAgo: 2 * HOUR },
+  { progress: 74, watchedAgo: 5 * HOUR },
+  { progress: 91, watchedAgo: 8 * HOUR },
+  { progress: 48, watchedAgo: DAY + 3 * HOUR },
+  { progress: 100, watchedAgo: DAY + 7 * HOUR },
+  { progress: 23, watchedAgo: DAY + 11 * HOUR },
+  { progress: 99, watchedAgo: DAY + 16 * HOUR },
+  { progress: 66, watchedAgo: 2 * DAY + 4 * HOUR },
+  { progress: 12, watchedAgo: 2 * DAY + 9 * HOUR },
+  { progress: 88, watchedAgo: 2 * DAY + 15 * HOUR },
+  { progress: 35, watchedAgo: 4 * DAY + 6 * HOUR },
+  { progress: 71, watchedAgo: 4 * DAY + 12 * HOUR },
 ];
 
+const ITEMS = VIDEO_POOL.map((video, index) => ({ ...video, ...WATCH_STATE[index] }));
+
 /** Тот же набор, отодвинутый глубже в прошлое — чтобы набралось несколько страниц. */
 const WAVES = [0, 7 * DAY, 21 * DAY, 45 * DAY, 120 * DAY];
 

package/stubs/library-models.ts

@@ -0,0 +1,75 @@
+import { VIDEO_POOL } from './videos';
+import type { StubVideo } from './videos';
+
+const HOUR = 3600;
+const DAY = 24 * HOUR;
+
+/** Ролик в ленте подписки: пул + флаг «новинки» и уникальный guid внутри модели. */
+export type LibraryModelVideo = StubVideo & {
+  guid: string;
+  isNew: boolean;
+};
+
+export type LibraryModelStub = {
+  guid: string;
+  title: string;
+  primaryImageUrl: string;
+  country: {
+    name: string
+    title: string
+  };
+  age: number;
+  videosCount: number;
+  /** Сколько роликов вышло с прошлого захода */
+  newCount: number;
+  /** Unix timestamp (сек.) последнего добавленного ролика */
+  lastVideoAddedAt: number;
+  tags: string[];
+  videos: LibraryModelVideo[];
+};
+
+/** Сколько последних роликов модели показываем в ленте. */
+const PREVIEW_LIMIT = 5;
+
+/** Порядок обновлений намеренно не совпадает с алфавитным — иначе обе сортировки дают одно и то же. */
+const MODELS = [
+  { title: 'Dakota Lovell', image: 'Dakota_Lovell.png', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, tags: ['Twink', 'Jock', 'Versatile'], 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'], 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'], 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'], updatedAgo: 21 * DAY, videoOffset: 6 },
+];
+
+/**
+ * Подписки пользователя на моделей. Ручки под них пока нет — вёрстка живёт на заглушке.
+ * Возраст ролика считаем от «сейчас», чтобы даты в разметке не устаревали.
+ */
+export function getLibraryModelsStub(): LibraryModelStub[] {
+  const now = Math.floor(Date.now() / 1000);
+
+  return MODELS.map((model) => {
+    const slug = model.title.toLowerCase().replace(/\s+/g, '-');
+
+    const videos = Array.from({ length: PREVIEW_LIMIT }, (_, index) => {
+      const video = VIDEO_POOL[(model.videoOffset + index) % VIDEO_POOL.length];
+
+      return {
+        ...video,
+        guid: `${slug}-${video.id}`,
+        isNew: index < model.newCount,
+      };
+    });
+
+    return {
+      guid: slug,
+      title: model.title,
+      primaryImageUrl: `/img/models/${model.image}`,
+      country: model.country,
+      age: model.age,
+      videosCount: model.videosCount,
+      newCount: model.newCount,
+      lastVideoAddedAt: now - model.updatedAgo,
+      tags: model.tags,
+      videos,
+    };
+  });
+}

package/stubs/videos.ts

@@ -0,0 +1,29 @@
+import type { IThumbUrls } from '../types';
+
+/** Базовый ролик заглушек: id, тайтлы и тумбы сняты с главной gay.cool. */
+export type StubVideo = {
+  id: string;
+  title: string;
+  duration: number;
+  quality?: string;
+  thumbUrls: IThumbUrls;
+  previewUrl: string;
+  channelName?: string;
+  channelAvatar?: string;
+};
+
+/** Общий пул роликов для всех заглушек — порядок фиксирован, на него завязаны наборы-надстройки. */
+export const VIDEO_POOL: StubVideo[] = [
+  { id: '445839845', title: 'Drew Sebastian Barebacks Nick Fitt: Muscle Daddy Tops Athletic Bottom on the Couch', duration: 486, thumbUrls: { webp: { '320x180': 'https://nlt01.gay.cool/a/8/d/a8dc253cad705d688508de096435a989/thumbs/320x180/3.webp', '480x270': 'https://nlt01.gay.cool/a/8/d/a8dc253cad705d688508de096435a989/thumbs/480x270/3.webp' } }, channelName: 'Icon Male', channelAvatar: 'https://nli01.joystorage.com/c/0/2/c02a3f8ef14943b5f3da537aaed46fcc.jpeg', previewUrl: 'https://nlp02.gay.cool/a/8/d/a8dc253cad705d688508de096435a989/preview/video.mp4' },
+  { id: '171708405', title: 'Bareback bathroom fisting with black latex gloves, rimming, piss play and anal gape', duration: 358, quality: '1080', thumbUrls: { webp: { '320x180': 'https://nlt03.gay.cool/b/7/5/b75c1bf33571126845502e2b9bb5d687/thumbs/320x180/33.webp', '480x270': 'https://nlt03.gay.cool/b/7/5/b75c1bf33571126845502e2b9bb5d687/thumbs/480x270/33.webp' } }, previewUrl: 'https://nlp02.gay.cool/b/7/5/b75c1bf33571126845502e2b9bb5d687/preview/video.mp4' },
+  { id: '374534215', title: 'Jake Davis Takes Bareback Anal in Blue Harness from Athletic Partner', duration: 487, thumbUrls: { webp: { '320x180': 'https://nlt02.gay.cool/2/4/6/246f577796c7c955b8df94f6454de2a5/thumbs/320x180/12.webp', '480x270': 'https://nlt02.gay.cool/2/4/6/246f577796c7c955b8df94f6454de2a5/thumbs/480x270/12.webp' } }, channelName: 'Icon Male', channelAvatar: 'https://nli01.joystorage.com/c/0/2/c02a3f8ef14943b5f3da537aaed46fcc.jpeg', previewUrl: 'https://nlp05.gay.cool/2/4/6/246f577796c7c955b8df94f6454de2a5/preview/video.mp4' },
+  { id: '3377550', title: 'Rego Bello and Devin Adams bareback bedroom flip: reciprocal oral then Devin tops Rego', duration: 426, thumbUrls: { webp: { '320x180': 'https://nlt01.gay.cool/3/e/b/3eb0f19f1e600a98a7f5a5e51edc4b46/thumbs/320x180/33.webp', '480x270': 'https://nlt01.gay.cool/3/e/b/3eb0f19f1e600a98a7f5a5e51edc4b46/thumbs/480x270/33.webp' } }, previewUrl: 'https://nlp05.gay.cool/3/e/b/3eb0f19f1e600a98a7f5a5e51edc4b46/preview/video.mp4' },
+  { id: '443170695', title: 'Johnny Rapid and Malakai White lead four-man hotel bareback with Max Lorde and Kyler Drayke', duration: 487, thumbUrls: { webp: { '320x180': 'https://nlt04.gay.cool/9/f/f/9ff067b9ea8b157ff2478667423ff9bb/thumbs/320x180/29.webp', '480x270': 'https://nlt04.gay.cool/9/f/f/9ff067b9ea8b157ff2478667423ff9bb/thumbs/480x270/29.webp' } }, channelName: 'Johnny Rapid', channelAvatar: 'https://nli01.joystorage.com/e/6/d/e6d0abd734a1a2eaef0baf7ceccfdb5c.jpeg', previewUrl: 'https://nlp01.gay.cool/9/f/f/9ff067b9ea8b157ff2478667423ff9bb/preview/video.mp4' },
+  { id: '175791825', title: 'Kyle Wilkinson flip-fucks bareback with a smooth skinny twink: deep oral, riding and doggy', duration: 586, thumbUrls: { webp: { '320x180': 'https://nlt05.gay.cool/9/0/f/90fd15f9305b32394f8d383113376c27/thumbs/320x180/7.webp', '480x270': 'https://nlt05.gay.cool/9/0/f/90fd15f9305b32394f8d383113376c27/thumbs/480x270/7.webp' } }, previewUrl: 'https://nlp04.gay.cool/9/0/f/90fd15f9305b32394f8d383113376c27/preview/video.mp4' },
+  { id: '374648505', title: 'Devon Lebron barebacks tattooed twink after rimjob in Staxus bedroom', duration: 1800, thumbUrls: { webp: { '320x180': 'https://nlt05.gay.cool/a/2/b/a2b4dce906ce8a4c107a5d559013e555/thumbs/320x180/46.webp', '480x270': 'https://nlt05.gay.cool/a/2/b/a2b4dce906ce8a4c107a5d559013e555/thumbs/480x270/46.webp' } }, previewUrl: 'https://nlp04.gay.cool/a/2/b/a2b4dce906ce8a4c107a5d559013e555/preview/video.mp4' },
+  { id: '307011761', title: 'Damien Nichols barebacks a tattooed twink: military amateur, deepthroat to raw anal and cumshot', duration: 419, thumbUrls: { webp: { '320x180': 'https://nlt01.gay.cool/5/a/0/5a00c5dd536d7d7ce4baef5e45930f91/thumbs/320x180/43.webp', '480x270': 'https://nlt01.gay.cool/5/a/0/5a00c5dd536d7d7ce4baef5e45930f91/thumbs/480x270/43.webp' } }, previewUrl: 'https://nlp02.gay.cool/5/a/0/5a00c5dd536d7d7ce4baef5e45930f91/preview/video.mp4' },
+  { id: '444068845', title: 'Dean Young Bareback Flip Fuck: Versatile Anal, Deepthroat and Rimming in the Bedroom', duration: 604, thumbUrls: { webp: { '320x180': 'https://nlt03.gay.cool/7/d/a/7daacbe876b51c7cdc50101b0d504be8/thumbs/320x180/16.webp', '480x270': 'https://nlt03.gay.cool/7/d/a/7daacbe876b51c7cdc50101b0d504be8/thumbs/480x270/16.webp' } }, previewUrl: 'https://nlp03.gay.cool/7/d/a/7daacbe876b51c7cdc50101b0d504be8/preview/video.mp4' },
+  { id: '374968825', title: 'Brody Fox sucks and rides daddy Cain Marko bareback', duration: 497, thumbUrls: { webp: { '320x180': 'https://nlt01.gay.cool/9/e/2/9e23f59e882e860da3ab2400d93ac73e/thumbs/320x180/10.webp', '480x270': 'https://nlt01.gay.cool/9/e/2/9e23f59e882e860da3ab2400d93ac73e/thumbs/480x270/10.webp' } }, previewUrl: 'https://nlp03.gay.cool/9/e/2/9e23f59e882e860da3ab2400d93ac73e/preview/video.mp4' },
+  { id: '377844995', title: 'Rick Lovatelli: blond twink dominated, deepthroats and gets barebacked by a suited bearded top', duration: 1627, thumbUrls: { webp: { '320x180': 'https://nlt05.gay.cool/f/1/b/f1b09d77a2e23f4b4696d97169614099/thumbs/320x180/25.webp', '480x270': 'https://nlt05.gay.cool/f/1/b/f1b09d77a2e23f4b4696d97169614099/thumbs/480x270/25.webp' } }, previewUrl: 'https://nlp01.gay.cool/f/1/b/f1b09d77a2e23f4b4696d97169614099/preview/video.mp4' },
+  { id: '375132285', title: 'Viktor Rom and Jordan Fox bareback blue-haired bottom in bedroom threesome', duration: 800, quality: '1080', thumbUrls: { webp: { '320x180': 'https://nlt03.gay.cool/5/f/b/5fbcdd007476cd0a1e9c85abc9fc0042/thumbs/320x180/1.webp', '480x270': 'https://nlt03.gay.cool/5/f/b/5fbcdd007476cd0a1e9c85abc9fc0042/thumbs/480x270/1.webp' } }, previewUrl: 'https://nlp04.gay.cool/5/f/b/5fbcdd007476cd0a1e9c85abc9fc0042/preview/video.mp4' },
+];

package/components/card/preview.vue

@@ -1,139 +0,0 @@
-<!-- Видео-предпросмотр (автоплей) поверх постера карточки видео + индикатор загрузки -->
-<template>
-  <span class="card-preview">
-    <video
-      ref="videoRef"
-      :src="url"
-      :class="{'--playing': isPlaying}"
-      class="card-preview__video"
-      loop
-      muted
-      autoplay
-      playsinline
-      @loadedmetadata="updateProgress"
-      @progress="updateProgress"
-      @playing="onPlaying"
-      @waiting="onWaiting"
-      @pause="isPlaying = false"
-    />
-    <span
-      :class="{'--done': isLoaded}"
-      :style="{'--preview-progress': isLoaded ? 1 : progress}"
-      class="card-preview__loader"
-    />
-  </span>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  url: string
-}>();
-
-/** Стартовая ширина полосы: видна сразу по ховеру/касанию, не дожидаясь первого скачанного куска файла. */
-const MIN_PROGRESS = 0.05;
-/** Докуда полоса подползает сама, пока нет данных о реальной загрузке. */
-const CREEP_LIMIT = 0.45;
-const CREEP_INTERVAL = 150;
-const CREEP_STEP = 0.18;
-
-const videoRef = ref<HTMLVideoElement | null>(null);
-const isPlaying = ref(false);
-const isLoaded = ref(false);
-const progress = ref(MIN_PROGRESS);
-
-let creepTimer: ReturnType<typeof setInterval> | null = null;
-
-function stopCreep() {
-  if (creepTimer) clearInterval(creepTimer);
-  creepTimer = null;
-}
-
-/** Имитация ожидания: пока идёт коннект к CDN и реального прогресса нет, полоса замедляясь подползает к CREEP_LIMIT. */
-function startCreep() {
-  creepTimer = setInterval(() => {
-    const next = progress.value + (CREEP_LIMIT - progress.value) * CREEP_STEP;
-
-    if (CREEP_LIMIT - next < CREEP_STEP / 100) {
-      stopCreep();
-      return;
-    }
-
-    progress.value = next;
-  }, CREEP_INTERVAL);
-}
-
-/** Доля скачанного файла превью: правый край последнего буферизованного отрезка к общей длительности. */
-function updateProgress() {
-  const video = videoRef.value;
-  if (!video || !video.buffered.length || !Number.isFinite(video.duration)) return;
-
-  const loaded = video.buffered.end(video.buffered.length - 1) / video.duration;
-  if (loaded > 0) stopCreep();
-
-  progress.value = Math.max(loaded, progress.value);
-  if (loaded >= 1) isLoaded.value = true;
-}
-
-function onPlaying() {
-  stopCreep();
-  isPlaying.value = true;
-  isLoaded.value = true;
-}
-
-/** Буферизация на середине: возвращаем постер и полосу, она продолжит с реально скачанного места. */
-function onWaiting() {
-  isPlaying.value = false;
-  isLoaded.value = false;
-}
-
-onMounted(() => {
-  startCreep();
-
-  const video = videoRef.value;
-  if (!video) return;
-
-  video.muted = true;
-  video.play().catch(() => {
-    isPlaying.value = false;
-  });
-});
-
-onBeforeUnmount(stopCreep);
-</script>
-
-<style lang="scss">
-$loader-height: 4px;
-
-.card-preview {
-  position: absolute;
-  inset: 0;
-  z-index: $z-index-plus;
-}
-
-.card-preview__video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  opacity: 0;
-}
-
-/* Пока автоплей не стартовал, браузер рисует поверх видео нативную кнопку плей — держим элемент невидимым */
-.card-preview__video.--playing {
-  opacity: 1;
-}
-
-.card-preview__loader {
-  position: absolute;
-  inset: 0 0 auto;
-  height: $loader-height;
-  background: $card-preview-loader-bg;
-  transform: scaleX(var(--preview-progress, 0));
-  transform-origin: left center;
-  transition: var(--transition) transform, var(--transition) var(--default-transition-duration) opacity;
-}
-
-/* Догрузилось или пошло воспроизведение — полоса доезжает до конца и только потом гаснет */
-.card-preview__loader.--done {
-  opacity: 0;
-}
-</style>