itube-specs 0.0.966 → 0.0.968

package/components/card/model-mini.vue

@@ -3,11 +3,12 @@
   <div class="card-model-mini">
     <UiImg
       :src="currentImage"
+      :image-urls="currentImageUrls"
       :alt="card.title"
       class="card-model-mini__img"
       width="48"
       height="48"
-      sizes="48px"
+      sizes="auto, 48px"
       @error="imageError = true"
     />
     <div class="card-model-mini__wrapper">
@@ -58,6 +59,8 @@ const currentImage = computed(() => {
   if (imageError.value) return fallbackImage;
   return props.card.primaryImageUrl || props.card.thumbUrl || fallbackImage;
 });
+
+const currentImageUrls = computed(() => (imageError.value ? undefined : props.card.primaryImageUrls));
 </script>
 
 <style lang="scss">

package/components/card/model.vue

@@ -8,10 +8,11 @@
     <div class="card-model__thumb">
       <UiImg
         :src="currentImage"
+        :image-urls="currentImageUrls"
         :loading="loading"
         :alt="card.title"
         :priority="priority"
-        :sizes="`(max-width: ${CSS_BREAKPOINTS.xs}px) 50vw, 240px`"
+        :sizes="SIZES"
         class="card-model__img"
         width="240"
         height="320"
@@ -77,7 +78,6 @@
 
 <script setup lang="ts">
 import { convertString, formatDate } from '../../runtime';
-import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 import type { IModelCard } from '../../types';
 
 const props = withDefaults(defineProps<{
@@ -91,6 +91,13 @@ const props = withDefaults(defineProps<{
 const { generateLink } = useGenerateLink();
 const { t } = useI18n();
 
+/**
+ * Пороги — колоночная лестница `.grid-models` (2 → 3 с 640px → … → 6 с 1280px), а не `$brkpnts`.
+ * Слот от 640px и выше держится в 206–249px, поэтому один `250px` покрывает всю правую часть.
+ * `auto` впереди — см. `UiImg`.
+ */
+const SIZES = 'auto, (max-width: 639px) 50vw, 250px';
+
 const fallbackImage = '/img/model-placeholder.webp';
 const imageError = ref(false);
 
@@ -99,6 +106,9 @@ const currentImage = computed(() => {
   return props.card.primaryImageUrl || props.card.thumbUrl || fallbackImage;
 });
 
+/** На заглушке ладдер сбрасываем — иначе браузер продолжит тянуть битые кандидаты. */
+const currentImageUrls = computed(() => (imageError.value ? undefined : props.card.primaryImageUrls));
+
 function onImageError() {
   imageError.value = true;
 }

package/components/card/round.vue

@@ -6,13 +6,14 @@
   >
     <UiImg
       :src="currentImage"
+      :image-urls="currentImageUrls"
       :loading="loading"
       :alt="card.title"
       :priority="priority"
+      :sizes="SIZES"
       class="card-round__img"
       width="96"
       height="96"
-      sizes="96px"
       @error="onImageError"
     />
     <span
@@ -40,6 +41,7 @@
 </template>
 
 <script setup lang="ts">
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 import type { IRoundCard } from '../../types';
 
 const props = withDefaults(defineProps<{
@@ -56,6 +58,9 @@ const props = withDefaults(defineProps<{
 const { t } = useI18n();
 const { generateLink } = useGenerateLink();
 
+/** `--card-round-size`: 80px до sm, 96px дальше. `auto` впереди — см. `UiImg`. */
+const SIZES = `auto, (max-width: ${CSS_BREAKPOINTS.sm - 1}px) 80px, 96px`;
+
 const fallbackImage = props.placeholderAvatar;
 const imageError = ref(false);
 
@@ -64,6 +69,8 @@ const currentImage = computed(() => {
   return props.card.primaryImageUrl || fallbackImage || '';
 });
 
+const currentImageUrls = computed(() => (imageError.value ? undefined : props.card.primaryImageUrls));
+
 function onImageError() {
   imageError.value = true;
 }

package/components/info/main.vue

@@ -15,11 +15,12 @@
       <UiImg
         v-if="card.img"
         :src="currentImage"
+        :image-urls="currentImageUrls"
         :alt="title"
+        :sizes="IMG_SIZES"
         class="info-main__img"
         width="80"
         height="80"
-        sizes="80px"
         @error="imageError = true"
       />
 
@@ -157,6 +158,7 @@ import type {
   IChannelCard,
   ICategoryCard
 } from '../../types';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 import { AuthorizationApiService } from '../../services/api/authorization.service';
 import { groupParametersByGroup } from '../../utils/info-main/group-parameters-by-group';
 import { isoCodeToCountryName } from '../../utils/iso-code-to-country-name';
@@ -210,6 +212,11 @@ const currentImage = computed(() => {
   return props.card.img || placeholder.value;
 });
 
+/** `.info-main__img` — 80px до sm, 96px дальше. `auto` впереди — см. `UiImg`. */
+const IMG_SIZES = `auto, (max-width: ${CSS_BREAKPOINTS.sm - 1}px) 80px, 96px`;
+
+const currentImageUrls = computed(() => (imageError.value ? undefined : props.card.imgUrls));
+
 function getParameter(name: string) {
   return props.card.parameters?.find(p => p.name === name)?.values?.[ 0 ]?.name;
 }
@@ -231,6 +238,7 @@ const shareModelCard = computed<IModelCard>(() => ({
   title: props.card.title,
   videosCount: props.card.videosCount,
   thumbUrl: props.card.img || '',
+  primaryImageUrls: props.card.imgUrls,
   guid: props.card.guid || '',
   parameters: [],
   country: shareCountry.value,

package/components/player/aside-videos.vue

@@ -5,7 +5,10 @@
 макете её нет, но формат живёт именно в этой колонке.
 
 Если моделей у ролика нет (и рекламы тоже), колонка не пустует: показываем пару
-рекомендаций, как было до макета. -->
+рекомендаций, как было до макета.
+
+Высота колонки ограничена высотой плеера, лишнее уходит в прокрутку внутри неё —
+см. комментарий к стилям. -->
 <template>
   <div
     :class="[
@@ -13,26 +16,28 @@
     ]"
     class="player-aside-videos _from-sd"
   >
-    <PlayerAsideModels
-      v-for="item in models || []"
-      :key="`aside-model-${item.slug}`"
-      :title="item.title"
-      :slug="item.slug"
-      :info="item.info"
-      :videos="item.videos?.items"
-      class="player-aside-videos__model"
-    />
+    <div class="player-aside-videos__inner">
+      <PlayerAsideModels
+        v-for="item in models || []"
+        :key="`aside-model-${item.slug}`"
+        :title="item.title"
+        :slug="item.slug"
+        :info="item.info"
+        :videos="item.videos?.items"
+        class="player-aside-videos__model"
+      />
 
-    <AdvNtv v-if="featureFlags.AdsNTVEnabled" />
+      <AdvNtv v-if="featureFlags.AdsNTVEnabled" />
 
-    <template v-if="!models?.length && !featureFlags.AdsNTVEnabled">
-      <CardVideo
-        v-for="item in asideVideos?.items?.slice(0, 2)"
-        :key="`aside-video-${item.guid}`"
-        :card="item"
-        mini
-      />
-    </template>
+      <template v-if="!models?.length && !featureFlags.AdsNTVEnabled">
+        <CardVideo
+          v-for="item in asideVideos?.items?.slice(0, 2)"
+          :key="`aside-video-${item.guid}`"
+          :card="item"
+          mini
+        />
+      </template>
+    </div>
   </div>
 </template>
 
@@ -56,16 +61,36 @@ defineProps<{
 </script>
 
 <style lang="scss">
+/**
+ * Высоту колонке задаёт плеер, а не её содержимое: блоков моделей может быть
+ * больше, чем помещается рядом с роликом, и тогда колонка растягивала строку
+ * сетки — плеер с описанием уезжали вверх от остальной страницы. Поэтому сама
+ * колонка держит только рамку (её собственная высота для сетки — ноль), а всё
+ * содержимое лежит абсолютным слоем поверх и прокручивается внутри. Скроллбар
+ * общий, из base/_global.scss.
+ */
 .player-aside-videos {
   @include from-br(sd) {
-    display: grid;
-    gap: 32px;
-    grid-template-columns: 1fr;
+    position: relative;
     width: 288px;
-    height: 100%;
     grid-column: 2;
     grid-row: 1;
-    align-content: start;
+  }
+}
+
+.player-aside-videos__inner {
+  display: grid;
+  gap: 32px;
+  grid-template-columns: 1fr;
+  align-content: start;
+
+  @include from-br(sd) {
+    position: absolute;
+    inset: 0;
+    overflow-y: auto;
+
+    // полоса прокрутки не должна наезжать на карточки
+    padding-right: 4px;
   }
 }
 </style>

package/components/search/item.vue

@@ -11,9 +11,10 @@
     <UiImg
       v-if="isModel"
       :src="item?.primaryImageUrl || `/img/model-placeholder.webp`"
+      :image-urls="item?.primaryImageUrls"
       :alt="title"
       class="search-item__icon"
-      sizes="32px"
+      sizes="auto, 32px"
       width="32"
       height="32"
     />

package/components/ui/img.vue

@@ -1,21 +1,33 @@
 <template>
+  <!-- `<picture>` только под avif: обёртка сдвигает картинку на уровень ниже, а
+  `card/playlist.vue` и `playlist-mini.vue` целятся в свои UiImg через `:first-child`/`:nth-child(2)`
+  — внутри `<picture>` каждая из них стала бы первым ребёнком, и раскладка поехала бы. -->
+  <picture
+    v-if="avifSrcset"
+    class="ui-img"
+  >
+    <source
+      :srcset="avifSrcset"
+      :sizes="computedSizes"
+      type="image/avif"
+    >
+    <img
+      v-bind="imgAttrs"
+      @error="emit('error', $event)"
+    >
+  </picture>
   <img
-    v-bind="$attrs"
-    :src="imgSrc"
-    :srcset="srcset"
-    :loading="loading"
-    :width="width"
-    :height="height"
-    :sizes="computedSizes"
-    :alt="alt"
-    :fetchpriority="priority ? 'high' : 'auto'"
+    v-else
+    v-bind="imgAttrs"
     @error="emit('error', $event)"
   >
 </template>
 
 <script setup lang="ts">
-import type { IThumbUrls } from '../../types';
-import { ThumbSize } from '../../runtime';
+import type { IThumbUrls, IModelImageUrls } from '../../types';
+import { ThumbSize, buildSrcset } from '../../runtime';
+
+defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<{
   src?: string,
@@ -23,6 +35,8 @@ const props = withDefaults(defineProps<{
   height: string | number,
   sizes?: string,
   urls?: IThumbUrls,
+  /** Ладдер с avif-веткой (портреты моделей). Старше `urls`. */
+  imageUrls?: IModelImageUrls,
   alt?: string,
   loading?: 'lazy' | 'eager',
   fit?: 'cover' | 'contain' | 'fill' | 'inside' | 'outside',
@@ -32,7 +46,17 @@ const props = withDefaults(defineProps<{
   fit: 'cover',
 });
 
+const attrs = useAttrs();
+
+/**
+ * `sizes="auto"` точнее любого авторского списка, но молодой: Chrome 126, Firefox 150
+ * (апрель 2026), Safari 27 (сентябрь 2026). Где не поддержан — деградирует в `100vw`,
+ * и браузер берёт самый крупный кандидат. Для ладдеров, где это перерасход, вызывающий
+ * пишет `sizes` сам, начиная с `auto,` — остаток списка и есть фолбэк под Safari ≤26.
+ * Такой `sizes` отдаём как есть.
+ */
 const computedSizes = computed(() => {
+  if (props.sizes?.startsWith('auto')) return props.sizes;
   if (props.loading === 'lazy') return 'auto';
   return props.sizes;
 });
@@ -43,16 +67,31 @@ const imgSrc = computed(() => {
   return undefined;
 });
 
-const srcset = computed(() => {
-  if (!props.urls) return undefined;
-  const entries = Object.entries(props.urls.webp);
-  if (!entries.length) return undefined;
-  return entries
-    .map(([size, url]) => `${url} ${size.split('x')[0]}w`)
-    .join(', ');
-});
+const computedSrcset = computed(() => buildSrcset(props.imageUrls?.webp) || buildSrcset(props.urls?.webp));
+
+const avifSrcset = computed(() => buildSrcset(props.imageUrls?.avif));
+
+const imgAttrs = computed(() => ({
+  ...attrs,
+  src: imgSrc.value,
+  srcset: computedSrcset.value,
+  loading: props.loading,
+  width: props.width,
+  height: props.height,
+  sizes: computedSizes.value,
+  alt: props.alt,
+  fetchpriority: props.priority ? 'high' : 'auto',
+}));
 
 const emit = defineEmits<{
   (e: 'error', event: Event): void
 }>();
 </script>
+
+<style lang="scss">
+/* Обёртка не должна участвовать в раскладке: у потребителей вроде `.card-model__img` стоит
+   `height: 100%`, и оно должно меряться от того же родителя, что и раньше, а не от `<picture>`. */
+.ui-img {
+  display: contents;
+}
+</style>

package/components/view/video.vue

@@ -203,14 +203,14 @@ const topChips = computed(() => {
 
 const topChipsStrings = computed(() => topChips.value?.map(item => item.value));
 
-const testModelImages = Array.from({ length: 16 }, (_, index) => `/img/models/portrait-${index + 1}.png`);
+const { portraitAt } = useTestModelImages();
 
 function getModelChips(model: IVideoData['models'][number], index: number): IChipsItem {
   return {
     prefix: '/models',
     value: model.title,
     title: model.title,
-    image: testModelImages[index % testModelImages.length],
+    image: portraitAt(index).thumbUrl,
   };
 }
 </script>

package/components/view/videos.vue

@@ -11,6 +11,7 @@
         icon="video-camera"
       />
       <LazySectionToolbar
+        v-if="!hideToolbar"
         :sort-items="sortItems"
         class="view-videos__options"
         hydrate-on-idle
@@ -61,7 +62,7 @@
     <UiEmptyState v-else/>
 
     <LazyUiPagination
-      v-if="data"
+      v-if="data && !hidePagination"
       arrow-icon
       :key="`pagination-${data.allPages}`"
       :total="data.allPages"
@@ -93,6 +94,10 @@ const props = defineProps<{
   data: PaginatedResponse<IVideoCard> | undefined
   status: string
   hideCategories?: boolean
+  /** Выдача без сортировки и фильтров (векторный поиск) — тулбар не на что навесить */
+  hideToolbar?: boolean
+  /** Выдача одной страницей (векторный поиск) — страниц у эндпоинта нет */
+  hidePagination?: boolean
   title?: string
   footerText?: string
   footerLinksLink?: string

package/composables/fetch/use-fetch-vector-videos-search.ts

@@ -0,0 +1,37 @@
+import type { Language } from '../../runtime';
+import { AsyncData } from '../../runtime';
+import type { IVideoCard, PaginatedResponse } from '../../types';
+
+/**
+ * Ролики для страниц поиска через векторную близость. У эндпоинта нет ни страниц, ни сортировки,
+ * ни фильтров — только limit, поэтому запрашивается один топ по релевантности, а query-параметры
+ * роута на запрос не влияют.
+ */
+export const useFetchVectorVideosSearch = async (
+  apiMethod: (...args: any[]) => Promise<PaginatedResponse<IVideoCard>>,
+  { limit: limitOption }: { limit?: { mobile?: number, desktop?: number } } = {}
+) => {
+  const lang = useLang() as Language;
+  const mobile = !!useState<boolean>('isMobile').value;
+  const limit = (mobile ? limitOption?.mobile : limitOption?.desktop) ?? (mobile ? 12 : 48);
+  const slug = useSlug();
+  const key = AsyncData.VectorVideosSearch;
+  const stateKey = computed(() => `data-${key}-${slug.value}-${limit}-${lang}`);
+
+  const { data, status, error } = await useAsyncData<PaginatedResponse<IVideoCard>>(
+    stateKey.value,
+    () => {
+      if (!slug.value) return Promise.resolve(null as unknown as PaginatedResponse<IVideoCard>);
+
+      return useApiFetcher<PaginatedResponse<IVideoCard>>(
+        stateKey.value,
+        apiMethod,
+        limit,
+        lang,
+        slug.value
+      )();
+    }
+  );
+
+  return { data, status, error };
+};

package/composables/use-test-model-images.ts

@@ -0,0 +1,54 @@
+import type { IModelImageUrls } from '../types';
+import { ModelImageSize } from '../runtime';
+
+export interface ITestModelPortrait {
+  primaryImageUrl: string;
+  thumbUrl: string;
+  primaryImageUrls?: IModelImageUrls;
+}
+
+const PORTRAIT_COUNT = 25;
+
+/**
+ * Тестовые портреты моделей из `public/img/models/`. Формат переключается query-параметром —
+ * для замера веса и сравнения качества на одной и той же странице:
+ *
+ * - `?img=png` — исходники без ладдера, как было до нарезки;
+ * - `?img=webp` — ладдер без avif-ветки, чтобы увидеть, сколько даёт именно avif;
+ * - без параметра — avif + webp.
+ *
+ * Читается один раз на монтировании страницы, поэтому переключение — перезагрузкой,
+ * а не навигацией по query. Для сравнения сети это и нужно: замер делается с чистого захода.
+ *
+ * Исходники разнокалиберные: portrait-1..16 — 640×960, portrait-17..25 — 1000×1200. В режиме
+ * `png` это видно, нарезка же у всех одинаковая, так что сравнивать с `png` надо с поправкой.
+ */
+export function useTestModelImages() {
+  const format = useRoute().query['img'];
+
+  const portraits: ITestModelPortrait[] = Array.from({ length: PORTRAIT_COUNT }, (_, index) => {
+    const base = `/img/models/portrait-${index + 1}`;
+
+    if (format === 'png') {
+      return { primaryImageUrl: `${base}.png`, thumbUrl: `${base}.png`, primaryImageUrls: undefined };
+    }
+
+    const ladder = (extension: string) => ({
+      [ModelImageSize.Small]: `${base}-300.${extension}`,
+      [ModelImageSize.Medium]: `${base}-600.${extension}`,
+    });
+
+    return {
+      primaryImageUrl: `${base}-600.webp`,
+      thumbUrl: `${base}-300.webp`,
+      primaryImageUrls: {
+        avif: format === 'webp' ? undefined : ladder('avif'),
+        webp: ladder('webp'),
+      },
+    };
+  });
+
+  const portraitAt = (index: number) => portraits[index % PORTRAIT_COUNT]!;
+
+  return { portraits, portraitAt };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.966",
+  "version": "0.0.968",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {

package/pages/models/[slug]/index.vue

@@ -47,10 +47,12 @@ const [
   useRouteQueryCategories(),
 ]);
 
-const testModelImages = Array.from({ length: 16 }, (_, index) => `/img/models/portrait-${index + 1}.png`);
+const { portraits, portraitAt } = useTestModelImages();
 
 if (cardInfo.value) {
-  cardInfo.value.img = testModelImages[Math.floor(Math.random() * testModelImages.length)];
+  const portrait = portraitAt(Math.floor(Math.random() * portraits.length));
+  cardInfo.value.img = portrait.primaryImageUrl;
+  cardInfo.value.imgUrls = portrait.primaryImageUrls;
 }
 
 const { t } = useI18n();

package/pages/models/index.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import type { IBreadcrumbItem } from '../../types';
+import type { IBreadcrumbItem, IModelImageUrls } from '../../types';
 import { ModelsApiService } from '../../services/api/models.service';
 import { AsyncData } from '../../runtime';
 import { sortModels } from '../../lib';
@@ -34,17 +34,10 @@ const { t } = useI18n();
 const pageName = useRoute().name;
 const pagePureName = useGetPureRouteName();
 
-const testModelImages = Array.from({ length: 16 }, (_, index) => `/img/models/portrait-${index + 1}.png`);
+const { portraitAt } = useTestModelImages();
 
-/** Портреты 3:4 — только под карточку модели, круглым аватарам топа они не подходят. */
-const testModelPortraits = Array.from({ length: 16 }, (_, index) => `/img/models/portrait-${index + 1}.png`);
-
-function applyTestImages<T extends { primaryImageUrl?: string; thumbUrl?: string }>(items: T[] | undefined, images: string[]): T[] | undefined {
-  return items?.map((item, i) => ({
-    ...item,
-    primaryImageUrl: images[i % images.length],
-    thumbUrl: images[i % images.length],
-  }));
+function applyTestImages<T extends { primaryImageUrl?: string; thumbUrl?: string; primaryImageUrls?: IModelImageUrls }>(items: T[] | undefined): T[] | undefined {
+  return items?.map((item, i) => ({ ...item, ...portraitAt(i) }));
 }
 
 const [
@@ -56,10 +49,10 @@ const [
 ]);
 
 if (topModels.value?.items) {
-  topModels.value.items = applyTestImages(topModels.value.items, testModelImages)!;
+  topModels.value.items = applyTestImages(topModels.value.items)!;
 }
 if (models.value?.items) {
-  models.value.items = applyTestImages(models.value.items, testModelPortraits)!;
+  models.value.items = applyTestImages(models.value.items)!;
 }
 
 const { meta, h1 } = useMeta({

package/pages/search/[slug]/index.vue

@@ -125,6 +125,10 @@ const featureFlags = useRuntimeConfig().public.featureFlags;
 
 const slug = useSlug();
 
+const fetchVideos = featureFlags.VectorSearchEnabled
+  ? useFetchVectorVideosSearch(VideosApiService.getVectorSearch)
+  : useFetchVideosSearchByNiche(VideosApiService.getSearchByNiche);
+
 const [
   { data: modelsData },
   { data: categoriesData },
@@ -133,7 +137,7 @@ const [
 ] = await Promise.all([
   useFetchModelsByPhrases(ModelsApiService.getModelsSearch),
   useFetchCategoriesByPhrase(CategoriesApiService.getCategoriesByPhrase),
-  useFetchVideosSearchByNiche(VideosApiService.getSearchByNiche),
+  fetchVideos,
   useFetchRelatedSearch(SearchApiService.getPhrases),
 ]);
 

package/pages/search/[slug]/videos.vue

@@ -10,7 +10,9 @@
       :status="videosStatus"
       :title="h1"
       :data-models="null"
-      :sort-items="sortItemsSearch"
+      :sort-items="vectorSearch ? undefined : sortItemsSearch"
+      :hide-toolbar="vectorSearch"
+      :hide-pagination="vectorSearch"
       hide-categories
     />
     <div
@@ -30,10 +32,14 @@ const slug = useSlug();
 
 const { t } = useI18n();
 
+const vectorSearch = useRuntimeConfig().public.featureFlags.VectorSearchEnabled;
+
 const [
   { data: videosData, status: videosStatus },
 ] = await Promise.all([
-  useFetchVideos(VideosApiService.getSearchByNicheFiltered(slug.value), { sortItems: sortItemsSearch, defaultOrder: '-_score' }),
+  vectorSearch
+    ? useFetchVectorVideosSearch(VideosApiService.getVectorSearch, { limit: { mobile: 24, desktop: 48 } })
+    : useFetchVideos(VideosApiService.getSearchByNicheFiltered(slug.value), { sortItems: sortItemsSearch, defaultOrder: '-_score' }),
 ]);
 
 useNoindexThinListing(() => videosData.value?.items?.length);
@@ -45,7 +51,7 @@ const { meta, h1 } = useMeta({
   t,
   pageKey: pagePureName,
   brandName: useAppConfig().brandName,
-  sortOptions: sortItemsSearch,
+  sortOptions: vectorSearch ? [] : sortItemsSearch,
   text: metaTitle,
 });
 

package/runtime/constants/async-data.ts

@@ -13,6 +13,7 @@ export const AsyncData = {
   ModelsByFirstLetterChips: 'models-by-first-letter-chips',
   RelatedVideos: 'related-videos',
   VectorRelatedVideos: 'vector-related-videos',
+  VectorVideosSearch: 'vector-videos-search',
   RefererPhrases: 'referer-phrases-video',
   AsideVideos: 'aside-videos',
   TopModels: 'top-models',

package/runtime/constants/model-image-size.ts

@@ -0,0 +1,6 @@
+export const ModelImageSize = {
+  Small: '300x400',
+  Medium: '600x800',
+} as const;
+
+export type ModelImageSize = typeof ModelImageSize[keyof typeof ModelImageSize];

package/runtime/index.ts

@@ -8,7 +8,9 @@ export * from './constants/niche';
 export * from './constants/report-forms-subjects';
 export * from './constants/playlist-step';
 export * from './constants/thumb-size';
+export * from './constants/model-image-size';
 export * from './constants/webcams';
+export * from './utils/build-srcset';
 export * from './utils/format-date';
 export * from './utils/format-time';
 export * from './utils/get-multiple-query';

package/runtime/utils/__tests__/build-srcset.test.ts

@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest';
+import { buildSrcset } from '../build-srcset';
+
+describe('buildSrcset', () => {
+  it('собирает дескрипторы ширины из ключей карты', () => {
+    expect(buildSrcset({
+      '300x400': 'https://img.com/a-300.webp',
+      '600x800': 'https://img.com/a-600.webp',
+    })).toBe('https://img.com/a-300.webp 300w, https://img.com/a-600.webp 600w');
+  });
+
+  it('отбрасывает пустые URL', () => {
+    expect(buildSrcset({
+      '300x400': '',
+      '600x800': 'https://img.com/a-600.webp',
+    })).toBe('https://img.com/a-600.webp 600w');
+  });
+
+  it('без карты или без пригодных записей → undefined', () => {
+    expect(buildSrcset()).toBeUndefined();
+    expect(buildSrcset({})).toBeUndefined();
+    expect(buildSrcset({ '300x400': '' })).toBeUndefined();
+  });
+});

package/runtime/utils/build-srcset.ts

@@ -0,0 +1,14 @@
+/**
+ * Собирает `srcset` из карты `<ширина>x<высота>` → URL. Пустые URL отбрасываются:
+ * кандидат с пустым `src` браузер берёт за адрес документа и тянет HTML вместо картинки.
+ */
+export const buildSrcset = (urls?: Partial<Record<string, string>>): string | undefined => {
+  if (!urls) return undefined;
+
+  const entries = Object.entries(urls).filter(([, url]) => Boolean(url));
+  if (!entries.length) return undefined;
+
+  return entries
+    .map(([size, url]) => `${url} ${size.split('x')[0]}w`)
+    .join(', ');
+};

package/runtime/utils/cleaners/__tests__/clean-model-card.test.ts

@@ -26,6 +26,33 @@ describe('cleanModelCard', () => {
     expect(result.country).toEqual({ title: 'United States of America', name: 'us' });
   });
 
+  it('primary_image_urls → ладдер портрета, недостающий размер пустой строкой', () => {
+    const raw = makeRaw({
+      primary_image_urls: { webp: { '600x800': 'https://img.com/p-600.webp' } },
+    });
+    expect(cleanModelCard(raw as any).primaryImageUrls).toEqual({
+      avif: undefined,
+      webp: { '300x400': '', '600x800': 'https://img.com/p-600.webp' },
+    });
+  });
+
+  it('avif-ветка попадает в ладдер', () => {
+    const raw = makeRaw({
+      primary_image_urls: {
+        avif: { '300x400': 'https://img.com/p-300.avif', '600x800': 'https://img.com/p-600.avif' },
+        webp: { '300x400': 'https://img.com/p-300.webp', '600x800': 'https://img.com/p-600.webp' },
+      },
+    });
+    expect(cleanModelCard(raw as any).primaryImageUrls?.avif).toEqual({
+      '300x400': 'https://img.com/p-300.avif',
+      '600x800': 'https://img.com/p-600.avif',
+    });
+  });
+
+  it('без primary_image_urls → ладдера нет', () => {
+    expect(cleanModelCard(makeRaw() as any).primaryImageUrls).toBeUndefined();
+  });
+
   it('параметры: guy_type, ethnicity, age', () => {
     const result = cleanModelCard(makeRaw() as any);
     expect(result.parameters).toEqual([

package/runtime/utils/cleaners/clean-model-card.ts

@@ -1,7 +1,12 @@
 import type { IRawModelCard, IModelCard, IModelParameter } from '../../../types';
 import { ThumbSize } from '../../constants/thumb-size';
+import { ModelImageSize } from '../../constants/model-image-size';
 
 const parameterNames = ['guy_type', 'ethnicity'];
+const pickPortraitSizes = (urls?: Partial<Record<ModelImageSize, string>>) => urls && {
+  [ModelImageSize.Small]: urls[ModelImageSize.Small] || '',
+  [ModelImageSize.Medium]: urls[ModelImageSize.Medium] || '',
+};
 const firstValue = (card: IRawModelCard, name: string) => card.parameters?.find(item => item.name === name)?.values?.[0];
 const age = (card: IRawModelCard) => firstValue(card, 'age')?.title;
 
@@ -11,6 +16,10 @@ export const cleanModelCard = (card: IRawModelCard): IModelCard => ({
   videosCount: card.videos_count || 0,
   thumbUrl: card.video_thumb_urls?.webp?.[ThumbSize.Small] || '',
   primaryImageUrl: card.primary_image_url || '',
+  primaryImageUrls: card.primary_image_urls?.webp ? {
+    avif: pickPortraitSizes(card.primary_image_urls.avif),
+    webp: pickPortraitSizes(card.primary_image_urls.webp)!,
+  } : undefined,
   guid: card.guid || '',
   // Страна лежит в parameters под именем nationality_iso_codes: `name` — код ISO-2 (`us`),
   // он же имя файла флага, `title` — читаемое название. Одноимённое поле верхнего уровня

package/runtime/utils/converters/__tests__/convert-model-to-round-card.test.ts

@@ -44,6 +44,32 @@ describe('convertModelToRoundCard', () => {
     expect(result.primaryImageUrl).toBe('');
   });
 
+  it('пробрасывает ладдер портрета', () => {
+    const model = {
+      title: 'Test',
+      primaryImageUrl: 'https://img.com/primary.jpg',
+      primaryImageUrls: { webp: { '300x400': 'https://img.com/a-300.webp' } },
+      thumbUrl: '',
+      videosCount: 0,
+      guid: 'm-5',
+      parameters: [],
+    };
+    const result = convertModelToRoundCard(model);
+    expect(result.primaryImageUrls).toEqual({ webp: { '300x400': 'https://img.com/a-300.webp' } });
+  });
+
+  it('без ладдера → undefined', () => {
+    const model = {
+      title: 'Test',
+      primaryImageUrl: 'url',
+      thumbUrl: '',
+      videosCount: 0,
+      guid: 'm-6',
+      parameters: [],
+    };
+    expect(convertModelToRoundCard(model).primaryImageUrls).toBeUndefined();
+  });
+
   it('slug с пробелами и заглавными', () => {
     const model = {
       title: 'Big Name Model',

package/runtime/utils/converters/convert-model-to-round-card.ts

@@ -6,6 +6,7 @@ export function convertModelToRoundCard(model: IModelCard): IRoundCard {
   return {
     title: model.title,
     primaryImageUrl: model.primaryImageUrl || model.thumbUrl || '',
+    primaryImageUrls: model.primaryImageUrls,
     videosCount: model.videosCount,
     link: `/models/${convertString().toSlug(model.title)}`,
   };

package/server/api/videos/vector-search.post.ts

@@ -0,0 +1,30 @@
+import type { IVideoCard, IRawVideoCard } from '../../../types';
+import { cleanVideoCard, getUrlWithProxiedParams } from '../../../runtime';
+
+/** Поиск роликов по векторной близости: POST /v1/videos-vectors/search, из параметров только limit. */
+export default defineEventHandler(async (event) => {
+  const apiUrl = process.env.NUXT_PUBLIC_API_DOMAIN;
+
+  const url = getUrlWithProxiedParams(`${apiUrl}/v1/videos-vectors/search`, event);
+
+  const clientHeaders = event.node.req.headers as HeadersInit;
+
+  const body = await readBody(event);
+
+  const rawData = await apiFetch(url, {
+    method: 'POST',
+    headers: clientHeaders,
+    body: JSON.stringify(body),
+  });
+
+  const items: IRawVideoCard[] = rawData.data?.items || [];
+
+  const cleanedItems: IVideoCard[] = items.map(cleanVideoCard);
+
+  return {
+    currentPage: rawData.data?.current_page,
+    allPages: rawData.data?.all_pages,
+    total: rawData.data?.total,
+    items: cleanedItems,
+  };
+});

package/services/api/videos.service.ts

@@ -85,6 +85,34 @@ export class VideosApiService {
       );
     };
   }
+  /** Векторный поиск роликов: без страниц, сортировки и фильтров — только limit. */
+  static async getVectorSearch(
+    limit: number,
+    lang: Language,
+    phrase: string,
+    niche = NicheHelper.getSiteDefaultNiche(),
+  ): Promise<PaginatedResponse<IVideoCard>> {
+    return await ApiHelper.fetch(
+      '/videos/vector-search',
+      {
+        method: 'POST',
+        headers: {
+          'X-Niche': niche,
+          'X-Language': toHeaderLanguage(lang),
+          'X-Cache-Time': '259200',
+          'Content-Type': 'application/json',
+        },
+        params: {
+          limit,
+        },
+        body: {
+          query: phrase,
+        }
+      },
+    useRuntimeConfig(),
+    );
+  }
+
   static async sendVideoAbuse(
     data: IReportForm,
     videoGuid: string,

package/stubs/library-follows.ts

@@ -68,21 +68,21 @@ function buildVideos(slug: string, offset: number, newCount: number): LibraryFol
 
 /** Порядок по числу новинок намеренно не совпадает с алфавитным — иначе обе сортировки дают одно и то же. */
 const MODELS = [
-  { title: 'Dakota Lovell', image: 'portrait-1.png', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, guyType: 'Twink', bodyBuild: 'Slim', ethnicity: 'Caucasian', updatedAgo: 6 * HOUR, videoOffset: 3 },
-  { title: 'Jax Thirio', image: 'portrait-2.png', country: { name: 'ca', title: 'Canada' }, age: 38, videosCount: 17, newCount: 2, guyType: 'Daddy', bodyBuild: 'Muscular', ethnicity: 'Latino', updatedAgo: 2 * DAY, videoOffset: 9 },
-  { title: 'Austin Young', image: 'portrait-3.png', country: { name: 'us', title: 'USA' }, age: 24, videosCount: 75, newCount: 1, guyType: 'Twink', bodyBuild: 'Athletic', ethnicity: 'Caucasian', updatedAgo: 9 * DAY, videoOffset: 0 },
-  { title: 'Devin Franco', image: 'portrait-4.png', country: { name: 'us', title: 'USA' }, age: 33, videosCount: 24, newCount: 0, guyType: 'Jock', bodyBuild: 'Muscular', ethnicity: 'Black', updatedAgo: 21 * DAY, videoOffset: 6 },
-  { title: 'Dakota Lovell', image: 'portrait-1.png', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, guyType: 'Twink', bodyBuild: 'Slim', ethnicity: 'Caucasian', updatedAgo: 6 * HOUR, videoOffset: 3 },
-  { title: 'Jax Thirio', image: 'portrait-2.png', country: { name: 'ca', title: 'Canada' }, age: 38, videosCount: 17, newCount: 2, guyType: 'Daddy', bodyBuild: 'Muscular', ethnicity: 'Latino', updatedAgo: 2 * DAY, videoOffset: 9 },
-  { title: 'Austin Young', image: 'portrait-3.png', country: { name: 'us', title: 'USA' }, age: 24, videosCount: 75, newCount: 1, guyType: 'Twink', bodyBuild: 'Athletic', ethnicity: 'Caucasian', updatedAgo: 9 * DAY, videoOffset: 0 },
-  { title: 'Devin Franco', image: 'portrait-4.png', country: { name: 'us', title: 'USA' }, age: 33, videosCount: 24, newCount: 0, guyType: 'Jock', bodyBuild: 'Muscular', ethnicity: 'Black', updatedAgo: 21 * DAY, videoOffset: 6 },
-  { title: 'Dakota Lovell', image: 'portrait-1.png', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, guyType: 'Twink', bodyBuild: 'Slim', ethnicity: 'Caucasian', updatedAgo: 6 * HOUR, videoOffset: 3 },
-  { title: 'Dakota Lovell', image: 'portrait-1.png', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, guyType: 'Twink', bodyBuild: 'Slim', ethnicity: 'Caucasian', updatedAgo: 6 * HOUR, videoOffset: 3 },
-  { title: 'Dakota Lovell', image: 'portrait-1.png', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, guyType: 'Twink', bodyBuild: 'Slim', ethnicity: 'Caucasian', updatedAgo: 6 * HOUR, videoOffset: 3 },
-  { title: 'Dakota Lovell', image: 'portrait-1.png', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, guyType: 'Twink', bodyBuild: 'Slim', ethnicity: 'Caucasian', updatedAgo: 6 * HOUR, videoOffset: 3 },
-  { title: 'Jax Thirio', image: 'portrait-2.png', country: { name: 'ca', title: 'Canada' }, age: 38, videosCount: 17, newCount: 2, guyType: 'Daddy', bodyBuild: 'Muscular', ethnicity: 'Latino', updatedAgo: 2 * DAY, videoOffset: 9 },
-  { title: 'Austin Young', image: 'portrait-3.png', country: { name: 'us', title: 'USA' }, age: 24, videosCount: 75, newCount: 1, guyType: 'Twink', bodyBuild: 'Athletic', ethnicity: 'Caucasian', updatedAgo: 9 * DAY, videoOffset: 0 },
-  { title: 'Devin Franco', image: 'portrait-4.png', country: { name: 'us', title: 'USA' }, age: 33, videosCount: 24, newCount: 0, guyType: 'Jock', bodyBuild: 'Muscular', ethnicity: 'Black', updatedAgo: 21 * DAY, videoOffset: 6 },
+  { title: 'Dakota Lovell', image: 'portrait-1-300.webp', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, guyType: 'Twink', bodyBuild: 'Slim', ethnicity: 'Caucasian', updatedAgo: 6 * HOUR, videoOffset: 3 },
+  { title: 'Jax Thirio', image: 'portrait-2-300.webp', country: { name: 'ca', title: 'Canada' }, age: 38, videosCount: 17, newCount: 2, guyType: 'Daddy', bodyBuild: 'Muscular', ethnicity: 'Latino', updatedAgo: 2 * DAY, videoOffset: 9 },
+  { title: 'Austin Young', image: 'portrait-3-300.webp', country: { name: 'us', title: 'USA' }, age: 24, videosCount: 75, newCount: 1, guyType: 'Twink', bodyBuild: 'Athletic', ethnicity: 'Caucasian', updatedAgo: 9 * DAY, videoOffset: 0 },
+  { title: 'Devin Franco', image: 'portrait-4-300.webp', country: { name: 'us', title: 'USA' }, age: 33, videosCount: 24, newCount: 0, guyType: 'Jock', bodyBuild: 'Muscular', ethnicity: 'Black', updatedAgo: 21 * DAY, videoOffset: 6 },
+  { title: 'Dakota Lovell', image: 'portrait-1-300.webp', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, guyType: 'Twink', bodyBuild: 'Slim', ethnicity: 'Caucasian', updatedAgo: 6 * HOUR, videoOffset: 3 },
+  { title: 'Jax Thirio', image: 'portrait-2-300.webp', country: { name: 'ca', title: 'Canada' }, age: 38, videosCount: 17, newCount: 2, guyType: 'Daddy', bodyBuild: 'Muscular', ethnicity: 'Latino', updatedAgo: 2 * DAY, videoOffset: 9 },
+  { title: 'Austin Young', image: 'portrait-3-300.webp', country: { name: 'us', title: 'USA' }, age: 24, videosCount: 75, newCount: 1, guyType: 'Twink', bodyBuild: 'Athletic', ethnicity: 'Caucasian', updatedAgo: 9 * DAY, videoOffset: 0 },
+  { title: 'Devin Franco', image: 'portrait-4-300.webp', country: { name: 'us', title: 'USA' }, age: 33, videosCount: 24, newCount: 0, guyType: 'Jock', bodyBuild: 'Muscular', ethnicity: 'Black', updatedAgo: 21 * DAY, videoOffset: 6 },
+  { title: 'Dakota Lovell', image: 'portrait-1-300.webp', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, guyType: 'Twink', bodyBuild: 'Slim', ethnicity: 'Caucasian', updatedAgo: 6 * HOUR, videoOffset: 3 },
+  { title: 'Dakota Lovell', image: 'portrait-1-300.webp', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, guyType: 'Twink', bodyBuild: 'Slim', ethnicity: 'Caucasian', updatedAgo: 6 * HOUR, videoOffset: 3 },
+  { title: 'Dakota Lovell', image: 'portrait-1-300.webp', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, guyType: 'Twink', bodyBuild: 'Slim', ethnicity: 'Caucasian', updatedAgo: 6 * HOUR, videoOffset: 3 },
+  { title: 'Dakota Lovell', image: 'portrait-1-300.webp', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, guyType: 'Twink', bodyBuild: 'Slim', ethnicity: 'Caucasian', updatedAgo: 6 * HOUR, videoOffset: 3 },
+  { title: 'Jax Thirio', image: 'portrait-2-300.webp', country: { name: 'ca', title: 'Canada' }, age: 38, videosCount: 17, newCount: 2, guyType: 'Daddy', bodyBuild: 'Muscular', ethnicity: 'Latino', updatedAgo: 2 * DAY, videoOffset: 9 },
+  { title: 'Austin Young', image: 'portrait-3-300.webp', country: { name: 'us', title: 'USA' }, age: 24, videosCount: 75, newCount: 1, guyType: 'Twink', bodyBuild: 'Athletic', ethnicity: 'Caucasian', updatedAgo: 9 * DAY, videoOffset: 0 },
+  { title: 'Devin Franco', image: 'portrait-4-300.webp', country: { name: 'us', title: 'USA' }, age: 33, videosCount: 24, newCount: 0, guyType: 'Jock', bodyBuild: 'Muscular', ethnicity: 'Black', updatedAgo: 21 * DAY, videoOffset: 6 },
 ];
 
 const CHANNELS = [

package/types/card-info.d.ts

@@ -1,5 +1,6 @@
 import type { IParameterModel } from './parameter-model';
 import type { IChipsItem } from './chips-item';
+import type { IModelImageUrls } from './model-image-urls';
 import type { IPageSeo } from './page-seo';
 
 export interface ICardInfo {
@@ -7,6 +8,8 @@ export interface ICardInfo {
   description: string;
   videosCount: number;
   img?: string;
+  /** Ладдер портрета под srcset. Нет — рендерится один `img`. */
+  imgUrls?: IModelImageUrls;
   guid?: string;
   fullDescription?: string
   miniCardTitle?: string

package/types/index.d.ts

@@ -2,7 +2,9 @@ export * from './site.d.ts';
 export * from './video-data.d.ts';
 export * from './video-card.d.ts';
 export * from './thumbs-urls.d.ts';
+export * from './model-image-urls.d.ts';
 export * from './raw/raw-thumbs-urls.d.ts';
+export * from './raw/raw-model-image-urls.d.ts';
 export * from './raw/raw-category-info.d.ts';
 export * from './raw/raw-category-card.d.ts';
 export * from './raw/raw-channel-card.d.ts';

package/types/model-card.d.ts

@@ -1,8 +1,12 @@
+import type { IModelImageUrls } from './model-image-urls';
+
 export interface IModelCard {
   title: string;
   videosCount: number;
   thumbUrl: string;
   primaryImageUrl?: string;
+  /** Ладдер портрета под srcset. Нет — карточка рендерит один `primaryImageUrl`. */
+  primaryImageUrls?: IModelImageUrls;
   guid: string;
   age?: string;
   country?: {

package/types/model-image-urls.d.ts

@@ -0,0 +1,7 @@
+import type { ModelImageSize } from '../runtime/constants/model-image-size';
+
+/** Очищенный портрет модели, ключ `<ширина>x<высота>`. `avif` необязателен — webp несущий. */
+export interface IModelImageUrls {
+  avif?: Partial<Record<ModelImageSize, string>>;
+  webp: Partial<Record<ModelImageSize, string>>;
+}

package/types/raw/raw-model-card.d.ts

@@ -1,4 +1,5 @@
 import type { IRawThumbUrls } from './raw-thumbs-urls';
+import type { IRawModelImageUrls } from './raw-model-image-urls';
 import type { IModelParameter } from '~/types';
 
 export interface IRawModelCard {
@@ -8,6 +9,7 @@ export interface IRawModelCard {
   guid: string;
   likes: number;
   primary_image_url: string;
+  primary_image_urls?: IRawModelImageUrls;
   number_of_videos_in_recent_days: number;
   orientation: string;
 

package/types/raw/raw-model-image-urls.d.ts

@@ -0,0 +1,8 @@
+import type { ModelImageSize } from '../../runtime/constants/model-image-size';
+
+/** Raw портрет модели из API — зеркало `video_thumb_urls`, но с портретными размерами */
+export interface IRawModelImageUrls {
+  jpeg?: Partial<Record<ModelImageSize, string>>;
+  webp?: Partial<Record<ModelImageSize, string>>;
+  avif?: Partial<Record<ModelImageSize, string>>;
+}

package/types/round-card.d.ts

@@ -1,6 +1,10 @@
+import type { IModelImageUrls } from './model-image-urls';
+
 export interface IRoundCard {
   title: string
   primaryImageUrl: string
+  /** Ладдер портрета под srcset. Нет — карточка рендерит один `primaryImageUrl`. */
+  primaryImageUrls?: IModelImageUrls
   videosCount: number
   link: string
   /** Новинки с прошлого захода — бейдж на аватаре (страница подписок) */

package/types/search-top-models.d.ts

@@ -1,6 +1,10 @@
+import type { IModelImageUrls } from './model-image-urls';
+
 export interface ISearchTopModelsType {
   videosCount?: number
   name: string
   title: string
   primaryImageUrl?: string
+  /** Ладдер портрета под srcset. Нет — рендерится один `primaryImageUrl`. */
+  primaryImageUrls?: IModelImageUrls
 }