itube-specs 0.0.893 → 0.0.896

package/components/library/model.vue

@@ -1,307 +0,0 @@
-<!-- Блок подписки на модель: шапка с аватаром, тегами и счётчиками + лента последних роликов -->
-<template>
-  <article class="library-model">
-    <header class="library-model__header">
-      <NuxtLink
-        :to="link"
-        :title="model.title"
-        class="library-model__avatar-link"
-      >
-        <UiImg
-          :src="currentImage"
-          :alt="model.title"
-          :loading="priority ? 'eager' : 'lazy'"
-          :priority="priority"
-          class="library-model__avatar"
-          width="96"
-          height="96"
-          sizes="96px"
-          @error="imageError = true"
-        />
-      </NuxtLink>
-
-      <div class="library-model__info">
-        <div class="library-model__heading">
-          <NuxtLink
-            :to="link"
-            class="library-model__name"
-          >
-            {{ model.title }}
-            <img
-              v-if="model.country"
-              :alt="model.country.title"
-              :title="`${t('birthplace_country')}: ${model.country.title}`"
-              :src="`/icons/flags/${model.country.name}.svg`"
-              class="library-model__flag"
-              width="20"
-              height="14"
-            >
-          </NuxtLink>
-
-          <span
-            v-if="model.newCount"
-            class="library-model__badge"
-          >{{ t('library.new_count', { count: model.newCount }) }}</span>
-        </div>
-
-        <p
-          v-if="model.tags.length"
-          class="library-model__tags"
-        >{{ model.tags.join(' · ') }}</p>
-
-        <p class="library-model__meta">
-          <span class="library-model__meta-item">
-            <UiIcon
-              name="video-camera"
-              size="14"
-            />
-            <span class="library-model__meta-videos">{{ $n(model.videosCount, 'compact') }}</span>
-            {{ model.age }} {{ t('yo') }}
-          </span>
-
-          <span class="library-model__meta-item">
-            <UiIcon
-              name="date"
-              size="14"
-            />
-            {{ t('library.updated_at', { date: formatDate(model.lastVideoAddedAt) }) }}
-          </span>
-        </p>
-      </div>
-
-      <div class="library-model__actions _from-sm">
-        <UiBtn
-          :theme="following ? 'secondary' : 'primary'"
-          class="library-model__follow"
-          @click="emit('toggle-follow', model)"
-        >
-          <UiIcon
-            :name="following ? 'check' : 'plus'"
-            size="16"
-          />
-          {{ following ? t('library.following_state') : t('follow') }}
-        </UiBtn>
-
-        <UiLink
-          :to="link"
-          theme="secondary"
-        >
-          {{ t('plural.videos', model.videosCount) }}
-          <UiIcon
-            name="arrow-right"
-            size="16"
-          />
-        </UiLink>
-      </div>
-    </header>
-
-    <div class="library-model__grid">
-      <CardVideo
-        v-for="(video, index) in model.videos"
-        :key="video.guid"
-        :card="video"
-        :loading="priority && index < 3 ? 'eager' : 'lazy'"
-        :priority="priority && index < 3"
-        compact
-      />
-    </div>
-
-    <UiLink
-      :to="link"
-      theme="secondary"
-      class="library-model__all _to-sm"
-      wide
-    >
-      {{ t('plural.videos', model.videosCount) }}
-      <UiIcon
-        name="arrow-right"
-        size="16"
-      />
-    </UiLink>
-  </article>
-</template>
-
-<script setup lang="ts">
-import { convertString, formatDate } from '../../runtime';
-import type { LibraryModelStub } from '../../stubs/library-models';
-
-const props = defineProps<{
-  model: LibraryModelStub
-  following?: boolean
-  priority?: boolean
-}>();
-
-const emit = defineEmits<{
-  (eventName: 'toggle-follow', model: LibraryModelStub): void,
-}>();
-
-const { t } = useI18n();
-const { generateLink } = useGenerateLink();
-
-const link = computed(() => generateLink(`/models/${convertString().toSlug(props.model.title)}`));
-
-const fallbackImage = '/img/model-placeholder.webp';
-const imageError = ref(false);
-
-const currentImage = computed(() => imageError.value ? fallbackImage : props.model.primaryImageUrl);
-</script>
-
-<style lang="scss">
-.library-model {
-  padding: 16px;
-  background-color: $library-model-bg;
-  border: 1px solid $library-model-border;
-  border-radius: $radius-xl;
-
-  @include from-br(sm) {
-    padding: 20px;
-  }
-}
-
-.library-model__header {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  column-gap: 16px;
-  row-gap: 12px;
-  align-items: start;
-  margin-bottom: 20px;
-
-  @include from-br(sm) {
-    grid-template-columns: auto 1fr auto;
-  }
-}
-
-.library-model__avatar {
-  width: 80px;
-  height: 80px;
-  object-fit: cover;
-  object-position: center 30%;
-  border-radius: $radius-full;
-  border: 2px solid $library-model-avatar-border;
-
-  @include from-br(sm) {
-    width: 96px;
-    height: 96px;
-    transition: var(--transition) border-color;
-  }
-}
-
-@include from-br(sm) {
-  .library-model__avatar-link:is(:hover, :focus-visible) .library-model__avatar {
-    border-color: $library-model-avatar-border--hover;
-  }
-}
-
-.library-model__info {
-  min-width: 0;
-}
-
-.library-model__heading {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  column-gap: 10px;
-  row-gap: 6px;
-}
-
-.library-model__name {
-  @include font-lg;
-
-  display: flex;
-  align-items: center;
-  column-gap: 8px;
-  font-weight: 700;
-  text-transform: capitalize;
-  color: $library-model-name;
-
-  @include from-br(sm) {
-    transition: var(--transition) color;
-  }
-
-  @include hover(color) {
-    color: $library-model-name--hover;
-  }
-}
-
-.library-model__flag {
-  flex-shrink: 0;
-  border-radius: 2px;
-}
-
-.library-model__badge {
-  @include font-3xs;
-
-  flex-shrink: 0;
-  font-weight: 600;
-  white-space: nowrap;
-  padding-block: 4px;
-  padding-inline: 10px;
-  color: $library-model-badge-text;
-  background-color: $library-model-badge-bg;
-  border-radius: $radius-full;
-}
-
-.library-model__tags {
-  @include font-sm;
-
-  margin-top: 4px;
-  color: $library-model-tags;
-}
-
-.library-model__meta {
-  @include font-sm;
-
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  column-gap: 16px;
-  row-gap: 4px;
-  margin-top: 2px;
-  color: $library-model-meta;
-}
-
-.library-model__meta-item {
-  display: flex;
-  align-items: center;
-  column-gap: 6px;
-}
-
-.library-model__meta-videos::after {
-  content: '·';
-  margin-inline-start: 6px;
-  color: $library-model-meta-dot;
-}
-
-.library-model__actions {
-  display: flex;
-  align-items: center;
-  column-gap: 8px;
-}
-
-.library-model__follow {
-  min-width: 124px;
-}
-
-.library-model__grid {
-  display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(2, 1fr);
-
-  @include from-br(xm) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  @include from-br(sm) {
-    gap: 24px 16px;
-    grid-template-columns: repeat(4, 1fr);
-  }
-
-  @include from-br(md) {
-    grid-template-columns: repeat(5, 1fr);
-  }
-}
-
-.library-model__all {
-  margin-top: 16px;
-}
-</style>

package/stubs/library-models.ts

@@ -1,75 +0,0 @@
-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,
-    };
-  });
-}