itube-specs 0.0.985 → 0.0.988

package/components/card/model-mini.vue

@@ -52,16 +52,18 @@ const props = defineProps<{
   card: IModelCard
 }>();
 
-const fallbackImage = '/img/model-placeholder.webp';
+const fallbackImage = '/img/model-placeholder-square.webp';
+const fallbackAvifImage = '/img/model-placeholder-square.avif';
 const imageError = ref(false);
 
 /** Аватар 48px круглый — нужен квадратный кроп, вертикальный портрет сюда не годится. */
-const currentImage = computed(() => {
-  if (imageError.value) return fallbackImage;
-  return props.card.primaryImageSmallUrl || fallbackImage;
-});
+const isFallback = computed(() => imageError.value || !props.card.primaryImageSmallUrl);
 
-const currentAvifSrc = computed(() => (imageError.value ? undefined : props.card.primaryImageSmallAvifUrl));
+const currentImage = computed(() => (isFallback.value ? fallbackImage : props.card.primaryImageSmallUrl));
+
+const currentAvifSrc = computed(() => (
+  isFallback.value ? fallbackAvifImage : props.card.primaryImageSmallAvifUrl
+));
 </script>
 
 <style lang="scss">

package/components/card/model.vue

@@ -98,16 +98,16 @@ const { t } = useI18n();
  */
 const SIZES = 'auto, (max-width: 449px) 50vw, (max-width: 1385px) 215px, 250px';
 
-const fallbackImage = '/img/model-placeholder.webp';
+const fallbackImage = '/img/model-placeholder-portrait.webp';
+const fallbackAvifImage = '/img/model-placeholder-portrait.avif';
 const imageError = ref(false);
 
-const currentImage = computed(() => {
-  if (imageError.value) return fallbackImage;
-  return props.card.primaryImageUrl || fallbackImage;
-});
+const isFallback = computed(() => imageError.value || !props.card.primaryImageUrl);
+
+const currentImage = computed(() => (isFallback.value ? fallbackImage : props.card.primaryImageUrl));
 
-/** На заглушке ладдер сбрасываем — иначе браузер продолжит тянуть битые кандидаты. */
-const currentAvifSrc = computed(() => (imageError.value ? undefined : props.card.primaryImageAvifUrl));
+/** На заглушке подменяем и avif-ветку — иначе браузер продолжит тянуть битый кандидат. */
+const currentAvifSrc = computed(() => (isFallback.value ? fallbackAvifImage : props.card.primaryImageAvifUrl));
 
 function onImageError() {
   imageError.value = true;

package/components/card/round.vue

@@ -49,6 +49,8 @@ const props = withDefaults(defineProps<{
   loading?: 'eager' | 'lazy'
   priority?: boolean
   placeholderAvatar?: string
+  /** Та же заглушка в avif. У канальной (svg) пары нет — тогда проп не передают. */
+  placeholderAvatarAvif?: string
   /** Только аватар и название — без счётчика роликов (страница подписок) */
   withoutCount?: boolean
 }>(), {
@@ -64,12 +66,15 @@ const SIZES = `auto, (max-width: ${CSS_BREAKPOINTS.sm - 1}px) 80px, 96px`;
 const fallbackImage = props.placeholderAvatar;
 const imageError = ref(false);
 
-const currentImage = computed(() => {
-  if (imageError.value) return fallbackImage || '';
-  return props.card.primaryImageUrl || fallbackImage || '';
-});
+const isFallback = computed(() => imageError.value || !props.card.primaryImageUrl);
+
+const currentImage = computed(() => (
+  (isFallback.value ? fallbackImage : props.card.primaryImageUrl) || ''
+));
 
-const currentAvifSrc = computed(() => (imageError.value ? undefined : props.card.primaryImageAvifUrl));
+const currentAvifSrc = computed(() => (
+  isFallback.value ? props.placeholderAvatarAvif : props.card.primaryImageAvifUrl
+));
 
 function onImageError() {
   imageError.value = true;

package/components/card/video/index.vue

@@ -5,7 +5,6 @@
       {'--mini': mini},
       {'--compact': compact},
       {'--avatar': card.channelAvatar},
-      {'--no-channel': isChannelPage},
       {'--progress': hasProgress},
       {'--favorite': isFavoriteCard},
       {'--tags-open': isTagsOpen},
@@ -95,30 +94,10 @@
         class="card-video__title _truncate"
       >{{ card.title }}
       </NuxtLink>
-      <component
-        v-if="!mini && !compact && !history && card.channelName"
-        :is="component"
-        :to="channelLink"
-        class="card-video__channel-wrapper"
-      >
-        <span
-          :data-nosnippet="!card.channelName || null"
-          class="card-video__channel-title"
-        >
-          <template v-if="card.channelName">
-            {{ card.channelName }}
-          </template>
-        </span>
-      </component>
       <p
         v-if="history"
         class="card-video__meta"
       >
-        <NuxtLink
-          v-if="card.channelName"
-          :to="channelLink"
-          class="card-video__channel-title"
-        >{{ card.channelName }}</NuxtLink>
         <span
           :class="{'--remaining': remaining}"
           class="card-video__watched"
@@ -189,9 +168,6 @@ const component = computed(() => props.card.channelName ? NuxtLinkComponent : 'd
 
 const { generateLink } = useGenerateLink();
 
-const pageName = useGetPureRouteName();
-const isChannelPage = computed(() => pageName === 'channels-channel');
-
 const previewId = useId();
 const { activePreviewId, startPreviewByHover, stopPreviewByHover, startPreviewByTouch } = useVideoPreview();
 
@@ -383,7 +359,6 @@ $dropdown-column: 18px;
   grid-column: 2;
 }
 
-.--avatar .card-video__channel-wrapper,
 .--avatar .card-video__meta {
   grid-column: 2;
 }
@@ -398,25 +373,26 @@ $dropdown-column: 18px;
   grid-column: 2 / -1;
 }
 
+/* Кружок канала — только на десктопе: на мобиле карточка отдаёт всю ширину заголовку */
 @include to-br(sm) {
-  .--no-channel .card-video__logo-wrapper,
-  .--no-channel .card-video__channel-wrapper {
+  .card-video .card-video__logo-wrapper {
     display: none;
   }
 
-  .--no-channel .card-video__wrapper {
+  .card-video .card-video__wrapper {
     grid-template-columns: minmax(0, 1fr) $dropdown-column;
   }
 
-  .--no-channel .card-video__title {
+  .card-video .card-video__title,
+  .card-video .card-video__meta {
     grid-column: 1;
   }
 
-  .--no-channel .card-video__tags {
+  .card-video .card-video__tags {
     grid-column: 1 / -1;
   }
 
-  .--no-channel .card-video__dropdown {
+  .card-video .card-video__dropdown {
     grid-column: 2;
     grid-row: 1;
   }
@@ -426,7 +402,7 @@ $dropdown-column: 18px;
   grid-template-columns: minmax(0, 1fr) $dropdown-column;
 }
 
-/* Без строки канала и тегов вторая строка грида не нужна — иначе аватар и «троеточие» растягиваются. */
+/* Без тегов вторая строка грида не нужна — иначе кружок и «троеточие» растягиваются. */
 .--compact .card-video__logo-wrapper,
 .--compact .card-video__dropdown {
   grid-row: 1;
@@ -455,23 +431,7 @@ $dropdown-column: 18px;
   }
 }
 
-.card-video__channel-wrapper {
-  @include font-xs;
-
-  font-weight: 400;
-  display: grid;
-  grid-row: 2;
-  grid-template-columns: auto 1fr;
-  align-items: center;
-  column-gap: 4px;
-  margin-top: 6px;
-
-  @include to-cq($layout-breakpoint) {
-    grid-column: 1;
-  }
-}
-
-/* Мета-строка истории: «канал · когда смотрели / сколько осталось» на месте строки канала */
+/* Мета-строка истории: когда смотрели / сколько осталось */
 .card-video__meta {
   @include font-xs;
 
@@ -488,19 +448,6 @@ $dropdown-column: 18px;
   }
 }
 
-/* На узкой карточке (две колонки на телефоне) «канал · время» в строку не встают, а нешрикуемое
-   время задаёт колонке min-content и разносит грид — оставляем только время просмотра */
-@include to-cq($layout-breakpoint) {
-  .card-video__meta .card-video__channel-title {
-    display: none;
-  }
-}
-
-.card-video__meta .card-video__channel-title + .card-video__watched::before {
-  content: '·';
-  margin-inline: 6px;
-}
-
 .card-video__watched {
   display: flex;
   align-items: center;
@@ -519,29 +466,24 @@ $dropdown-column: 18px;
   border-radius: 50%;
 }
 
+/* Кружок раскидан на обе строки: его 36px набираются заголовком плюс плашками, иначе под
+   однострочным заголовком остаётся пустой хвост высотой в остаток кружка */
 .card-video__logo-wrapper {
   grid-row: 1/3;
   grid-column: 1;
 }
 
-.card-video__logo-wrapper[href],
-.card-video__channel-wrapper[href] {
+/* У видео без моделей плашек нет вовсе — второй строки тоже, кружку спан не по чему набирать */
+.card-video__wrapper:not(:has(.card-video__tags, .card-video__meta)) .card-video__logo-wrapper {
+  grid-row: 1;
+}
+
+.card-video__logo-wrapper[href] {
   @include hover(opacity) {
     opacity: 0.9;
   }
 }
 
-.card-video__channel-title {
-  @include font-xs;
-
-  font-weight: 400;
-  color: $video-card-secondary;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  max-width: 100%;
-}
-
 .card-video.--mini {
   row-gap: 8px;
 }
@@ -561,13 +503,15 @@ $dropdown-column: 18px;
   z-index: $z-index-dropdown;
 }
 
-/* Ряд плашек лежит ниже «троеточия» — колонка под меню в этом ряду свободна, отдаём её плашкам */
+/* Ряд плашек лежит ниже «троеточия» — колонка под меню в этом ряду свободна, отдаём её плашкам.
+   Строка задана явно: на авторазмещении плашки уезжали в третью строку, оставляя пустую вторую */
 .card-video__tags {
+  grid-row: 2;
   grid-column: 1 / -1;
 
   @include from-cq($layout-breakpoint) {
     grid-column: 2 / -1;
-    margin-top: 10px;
+    margin-top: 6px;
   }
 }
 

package/components/info/main.vue

@@ -204,20 +204,25 @@ function onFollowClick() {
 }
 
 const placeholders: Record<string, string> = {
-  model: '/img/model-placeholder.webp',
+  model: '/img/model-placeholder-square.webp',
   channel: '/img/logo-placeholder.svg',
 };
-const placeholder = computed(() => placeholders[ props.type || 'channel' ]);
+/** У канала заглушка — svg, avif-пары у неё нет. */
+const avifPlaceholders: Record<string, string | undefined> = {
+  model: '/img/model-placeholder-square.avif',
+};
+const placeholderType = computed(() => props.type || 'channel');
+const placeholder = computed(() => placeholders[ placeholderType.value ]);
 const imageError = ref(false);
-const currentImage = computed(() => {
-  if (imageError.value) return placeholder.value;
-  return props.card.img || placeholder.value;
-});
+const isFallback = computed(() => imageError.value || !props.card.img);
+const currentImage = computed(() => (isFallback.value ? placeholder.value : props.card.img));
 
 /** `.info-main__img` — 80px до sm, 96px дальше. `auto` впереди — см. `UiImg`. */
 const IMG_SIZES = `auto, (max-width: ${CSS_BREAKPOINTS.sm - 1}px) 80px, 96px`;
 
-const currentAvifSrc = computed(() => (imageError.value ? undefined : props.card.imgAvifUrl));
+const currentAvifSrc = computed(() => (
+  isFallback.value ? avifPlaceholders[ placeholderType.value ] : props.card.imgAvifUrl
+));
 
 function getParameter(name: string) {
   return props.card.parameters?.find(p => p.name === name)?.values?.[ 0 ]?.name;

package/components/search/item.vue

@@ -31,7 +31,7 @@
 
 <script setup lang="ts">
 import type { ISearchTopModelsType } from '../../types';
-import { convertString, pickPortraitVariant } from '../../runtime';
+import { convertString } from '../../runtime';
 import DOMPurify from 'dompurify';
 
 const props = defineProps<{
@@ -42,14 +42,10 @@ const props = defineProps<{
 }>();
 
 /** Иконка 32px — квадратный кроп по лицу, если он есть в ответе. */
-const icon = computed(() => {
-  const square = pickPortraitVariant(props.item?.portraits)?.square;
-
-  return {
-    webp: square?.webp || '/img/model-placeholder.webp',
-    avif: square?.avif,
-  };
-});
+const icon = computed(() => ({
+  webp: props.item?.imageUrl || '/img/model-placeholder-square.webp',
+  avif: props.item?.imageUrl ? props.item.imageAvifUrl : '/img/model-placeholder-square.avif',
+}));
 
 const title = computed(() => props.item?.title?.replace(/<[^>]*>/g, ''));
 const { generateLink } = useGenerateLink();

package/components/search/result.vue

@@ -143,6 +143,8 @@ const topModels = computed(() => {
     title: item.title,
     name: item.title,
     videosCount: item.videosCount,
+    imageUrl: item.primaryImageSmallUrl,
+    imageAvifUrl: item.primaryImageSmallAvifUrl,
   })) || [];
 });
 

package/components/section/swiper-cards.vue

@@ -38,6 +38,7 @@
           <CardRound
             :card="item"
             :placeholder-avatar="placeholderAvatar"
+            :placeholder-avatar-avif="placeholderAvatarAvif"
             :without-count="withoutCount"
             class="section-swiper-cards__card"
           />
@@ -79,6 +80,8 @@ withDefaults(defineProps<{
   /** Вариант заголовка — см. `UiSectionTitle` */
   variant?: 'page' | 'section'
   placeholderAvatar?: string
+  /** Та же заглушка в avif — см. `CardRound` */
+  placeholderAvatarAvif?: string
   /** Карточки только с аватаром и названием, без счётчика роликов */
   withoutCount?: boolean
 }>(), {

package/components/ui/chips.vue

@@ -24,12 +24,13 @@
     <UiImg
       v-if="item.image"
       :src="item.image"
+      :avif-src="item.imageAvif"
       :alt="name"
       :class="`--${imageFit}`"
       :width="imageBox.width"
       :height="imageBox.height"
       class="ui-chips__img"
-      sizes="20px sm:24px"
+      sizes="auto, 24px"
     />
     {{ name }}
     <UiIcon

package/components/view/model-videos.vue

@@ -92,7 +92,8 @@
       v-if="similarModels && similarModels.length > 0"
       :items="modelsRoundCards"
       :title="$t('similar_models')"
-      placeholder-avatar="/img/model-placeholder.webp"
+      placeholder-avatar="/img/model-placeholder-square.webp"
+      placeholder-avatar-avif="/img/model-placeholder-square.avif"
       class="view-model-videos__other-models"
       hydrate-on-visible
     />

package/components/view/models.vue

@@ -6,7 +6,8 @@
         v-if="topCards.length >= MINIMUM_TOP_THUMBS"
         :items="topCards"
         class="view-models__popular"
-        placeholder-avatar="/img/model-placeholder.webp"
+        placeholder-avatar="/img/model-placeholder-square.webp"
+        placeholder-avatar-avif="/img/model-placeholder-square.avif"
         only-grid
       />
 

package/components/view/video.vue

@@ -91,7 +91,8 @@
       :items="modelsRoundCards"
       :title="$t('related_models')"
       class="view-video__popular-models"
-      placeholder-avatar="/img/model-placeholder.webp"
+      placeholder-avatar="/img/model-placeholder-square.webp"
+      placeholder-avatar-avif="/img/model-placeholder-square.avif"
       hydrate-on-visible
     />
 
@@ -203,11 +204,14 @@ const topChips = computed(() => {
 
 const topChipsStrings = computed(() => topChips.value?.map(item => item.value));
 
+/** Портрет в чипсе — квадратный кроп по лицу; своего у видео нет, его подмешивает BFF. */
 function getModelChips(model: IVideoData['models'][number]): IChipsItem {
   return {
     prefix: '/models',
     value: model.title,
     title: model.title,
+    image: model.imageUrl || '/img/model-placeholder-square.webp',
+    imageAvif: model.imageUrl ? model.imageAvifUrl : '/img/model-placeholder-square.avif',
   };
 }
 </script>

package/components/view/videos.vue

@@ -49,7 +49,8 @@
         :all-link-text="$t('show_all_models')"
         :header-link-text-short="$t('all_models')"
         class="view-videos__popular-models"
-        placeholder-avatar="/img/model-placeholder.webp"
+        placeholder-avatar="/img/model-placeholder-square.webp"
+        placeholder-avatar-avif="/img/model-placeholder-square.avif"
         hydrate-on-visible
       />
     </GridVideos>

package/package.json

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

package/pages/categories/[slug].vue

@@ -55,7 +55,8 @@
           :items="modelsRoundCards"
           :title="$t('category_top_models_title', {name: title})"
           class="category__models"
-          placeholder-avatar="/img/model-placeholder.webp"
+          placeholder-avatar="/img/model-placeholder-square.webp"
+          placeholder-avatar-avif="/img/model-placeholder-square.avif"
         />
       </template>
     </GridVideos>

package/pages/channels/[channel].vue

@@ -52,7 +52,8 @@
           :items="modelsRoundCards"
           :title="t('channels_popular_models')"
           class="channel__videos-models"
-          placeholder-avatar="/img/model-placeholder.webp"
+          placeholder-avatar="/img/model-placeholder-square.webp"
+          placeholder-avatar-avif="/img/model-placeholder-square.avif"
           hydrate-on-visible
         />
       </template>

package/pages/following.vue

@@ -18,7 +18,8 @@
       all-link="/library/models"
       icon="user"
       variant="section"
-      placeholder-avatar="/img/model-placeholder.webp"
+      placeholder-avatar="/img/model-placeholder-square.webp"
+      placeholder-avatar-avif="/img/model-placeholder-square.avif"
       class="following__section"
       without-count
     />

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

@@ -49,7 +49,8 @@
           <template #default="item">
             <CardRound
               :card="item"
-              placeholder-avatar="/img/model-placeholder.webp"
+              placeholder-avatar="/img/model-placeholder-square.webp"
+              placeholder-avatar-avif="/img/model-placeholder-square.avif"
             />
           </template>
           <template

package/runtime/index.ts

@@ -37,7 +37,8 @@ export * from './utils/cleaners/clean-profile-data';
 export * from './utils/cleaners/clean-video-data';
 export * from './utils/cleaners/clean-video-card';
 export * from './utils/cleaners/clean-model-info';
-export * from './utils/video-data-add-model-icon';
+export * from './utils/cleaners/clean-suggest-models';
+export * from './utils/video-data-add-model-portraits';
 export * from './utils/converters/convert-categories-to-footer';
 export * from './utils/converters/convert-categories-to-chips';
 export * from './utils/converters/convert-model-card-to-chips';

package/runtime/utils/__tests__/video-data-add-model-portraits.test.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest';
+import { videoDataAddModelPortraits } from '../video-data-add-model-portraits';
+
+const portraits = {
+  dark: {
+    tall: { width: 300, height: 450, webp: 'a-tall.webp', avif: 'a-tall.avif' },
+    square: { width: 200, height: 200, webp: 'a-square.webp', avif: 'a-square.avif' },
+  },
+};
+
+describe('videoDataAddModelPortraits', () => {
+  it('добавляет portraits к matching модели', () => {
+    const videoData = {
+      models: [
+        { guid: 'm-1', title: 'Model A' },
+        { guid: 'm-2', title: 'Model B' },
+      ],
+    };
+    const modelsData = [
+      { guid: 'm-1', portraits },
+    ];
+    const result = videoDataAddModelPortraits(videoData as any, modelsData as any);
+    expect(result.models[0].portraits).toEqual(portraits);
+    expect(result.models[1].portraits).toBeUndefined();
+  });
+
+  it('карточка без портретов ничего не добавляет', () => {
+    const videoData = { models: [{ guid: 'm-1', title: 'A' }] };
+    const modelsData = [{ guid: 'm-1', primary_image_url: 'https://img.com/a.jpg' }];
+    const result = videoDataAddModelPortraits(videoData as any, modelsData as any);
+    expect(result.models[0].portraits).toBeUndefined();
+  });
+
+  it('не мутирует исходный объект', () => {
+    const videoData = { models: [{ guid: 'm-1', title: 'A' }] };
+    const modelsData = [{ guid: 'm-1', portraits }];
+    const result = videoDataAddModelPortraits(videoData as any, modelsData as any);
+    expect(result).not.toBe(videoData);
+    expect((videoData.models[0] as any).portraits).toBeUndefined();
+  });
+
+  it('пустой массив моделей', () => {
+    const videoData = { models: [{ guid: 'm-1', title: 'A' }] };
+    const result = videoDataAddModelPortraits(videoData as any, []);
+    expect(result.models[0].portraits).toBeUndefined();
+  });
+});

package/runtime/utils/cleaners/__tests__/clean-suggest-models.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest';
+import { cleanSuggestModels } from '../clean-suggest-models';
+
+const portraits = {
+  dark: {
+    tall: { width: 640, height: 960, webp: 'tall.webp', avif: 'tall.avif' },
+    square: { width: 256, height: 256, webp: 'square.webp', avif: 'square.avif' },
+  },
+};
+
+describe('cleanSuggestModels', () => {
+  it('берёт квадратный кроп, вертикальный игнорирует', () => {
+    const result = cleanSuggestModels([
+      { title: 'Alex Ink', videosCount: 5, portraits },
+    ] as any);
+
+    expect(result).toEqual([
+      { title: 'Alex Ink', videosCount: 5, imageUrl: 'square.webp', imageAvifUrl: 'square.avif' },
+    ]);
+  });
+
+  it('модель без портретов остаётся без картинки', () => {
+    const result = cleanSuggestModels([{ title: 'Alex Rim', videosCount: 1 }] as any);
+
+    expect(result).toEqual([{ title: 'Alex Rim', videosCount: 1 }]);
+  });
+
+  it('только вертикальный портрет — картинки нет', () => {
+    const result = cleanSuggestModels([
+      { title: 'A', videosCount: 2, portraits: { dark: { tall: portraits.dark.tall } } },
+    ] as any);
+
+    expect(result).toEqual([{ title: 'A', videosCount: 2 }]);
+  });
+
+  it('пустой список остаётся null, чтобы не всплыл таб «models»', () => {
+    expect(cleanSuggestModels(null)).toBeNull();
+    expect(cleanSuggestModels(undefined as any)).toBeNull();
+  });
+});

package/runtime/utils/cleaners/__tests__/clean-video-data.test.ts

@@ -13,7 +13,7 @@ describe('cleanVideoData', () => {
       likes: 100,
       id: 'id-1',
       tags: 'tag1',
-      models: 'model1',
+      models: [{ guid: 'm-1', title: 'Model A' }],
       categories: 'cat1',
       actions: { liked: true },
       channel: { name: 'Channel', avatar_url: 'https://img.com/ch.jpg' },
@@ -37,6 +37,51 @@ describe('cleanVideoData', () => {
     expect(result.videoUrl).toBe('/stream');
     expect(result.isDeleted).toBe(false);
     expect(result.thumbNum).toBe(5);
+    expect(result.models).toEqual([{ guid: 'm-1', title: 'Model A' }]);
+  });
+
+  it('модели: квадратный кроп портрета в imageUrl/imageAvifUrl', () => {
+    const raw = {
+      models: [
+        {
+          guid: 'm-1',
+          title: 'Model A',
+          portraits: {
+            dark: {
+              tall: { width: 300, height: 450, webp: 'tall.webp', avif: 'tall.avif' },
+              square: { width: 200, height: 200, webp: 'square.webp', avif: 'square.avif' },
+            },
+          },
+        },
+        { guid: 'm-2', title: 'Model B' },
+      ],
+    };
+    const result = cleanVideoData(raw as any);
+    expect(result.models[0]).toEqual({
+      guid: 'm-1',
+      title: 'Model A',
+      imageUrl: 'square.webp',
+      imageAvifUrl: 'square.avif',
+    });
+    expect(result.models[1]).toEqual({ guid: 'm-2', title: 'Model B' });
+  });
+
+  it('модели: только вертикальный портрет — картинки нет', () => {
+    const raw = {
+      models: [
+        {
+          guid: 'm-1',
+          title: 'Model A',
+          portraits: { dark: { tall: { width: 300, height: 450, webp: 'tall.webp', avif: 'tall.avif' } } },
+        },
+      ],
+    };
+    const result = cleanVideoData(raw as any);
+    expect(result.models[0]).toEqual({ guid: 'm-1', title: 'Model A' });
+  });
+
+  it('моделей нет вовсе', () => {
+    expect(cleanVideoData({} as any).models).toEqual([]);
   });
 
   it('таймлайны: конец периода из бекендного end_duration', () => {

package/runtime/utils/cleaners/clean-suggest-models.ts

@@ -0,0 +1,23 @@
+import type { ISuggestModel, IRawSuggestModel } from '../../../types';
+import { pickPortraitVariant } from '../pick-portrait-variant';
+
+/**
+ * Приводит модели из multi-suggest к готовым ссылкам на портрет: подсказке нужен квадратный
+ * кроп по лицу, вертикальный `tall` в иконку 32px не годится. Пустой список бек отдаёт как
+ * `null` — сохраняем как есть, иначе в поиске появится пустой таб «models».
+ * @param models - модели из ответа multi-suggest, уже приведённого к camelCase
+ * @param theme - тема сайта: ею выбирается вариант портрета
+ */
+export const cleanSuggestModels = (models: IRawSuggestModel[] | null, theme?: string): ISuggestModel[] | null => {
+  if (!Array.isArray(models)) return models ?? null;
+
+  return models.map((model) => {
+    const square = pickPortraitVariant(model.portraits, theme)?.square;
+
+    return {
+      title: model.title,
+      videosCount: model.videosCount,
+      ...(square?.webp ? { imageUrl: square.webp, imageAvifUrl: square.avif } : {}),
+    };
+  });
+};

package/runtime/utils/cleaners/clean-video-data.ts

@@ -1,4 +1,5 @@
 import type { IRawVideoData, IVideoData, ISceneGroup, ITimelineGroup } from '../../../types';
+import { pickPortraitVariant } from '../pick-portrait-variant';
 
 // «locations» → «Locations», «living_room» → «Living room».
 const humanize = (value?: string | null): string => {
@@ -45,8 +46,24 @@ const cleanHotspots = (raw: string[] | null): number[] | null => {
   return values.length ? values : null;
 };
 
+// Моделям видео нужен только квадратный кроп по лицу — он идёт в чипсу под заголовком.
+// Вертикальный `tall` сюда не годится, как и в круглые аватары.
+const cleanVideoModels = (models: IRawVideoData['models'], theme?: string): IVideoData['models'] => {
+  if (!Array.isArray(models)) return [];
+
+  return models.map((model) => {
+    const square = pickPortraitVariant(model.portraits, theme)?.square;
+
+    return {
+      guid: model.guid,
+      title: model.title,
+      ...(square?.webp ? { imageUrl: square.webp, imageAvifUrl: square.avif } : {}),
+    };
+  });
+};
+
 /** Нормализует сырые данные видео к типу IVideoData. */
-export const cleanVideoData = (data: IRawVideoData): IVideoData => ({
+export const cleanVideoData = (data: IRawVideoData, theme?: string): IVideoData => ({
   guid: data.guid || '',
   md5: data.md5 || '',
   duration: data.duration || 0,
@@ -56,7 +73,7 @@ export const cleanVideoData = (data: IRawVideoData): IVideoData => ({
   likes: data.likes || 0,
   id: data.id || '',
   tags: data.tags || [],
-  models: data.models || [],
+  models: cleanVideoModels(data.models, theme),
   categories: data.categories || [],
   actions: data.actions || null,
   channelName: data.channel?.name || '',

package/runtime/utils/video-data-add-model-portraits.ts

@@ -0,0 +1,27 @@
+import type { IRawModelCard, IRawVideoData } from '../../types';
+
+/**
+ * Подмешивает portraits из карточек моделей в каждую модель videoData.models по совпадению guid.
+ * Ответ видео своих портретов не отдаёт — их приносит параллельный запрос
+ * `models/list-by-video-id|url`, а вариант выбирает уже клинер.
+ * @param videoData - сырые данные видео
+ * @param modelsData - массив карточек моделей с portraits
+ */
+export function videoDataAddModelPortraits(videoData: IRawVideoData, modelsData: Array<IRawModelCard>): IRawVideoData {
+  const transformedData = { ...videoData };
+
+  transformedData.models = transformedData.models?.map((model) => {
+    const modelData = modelsData.find((item) => item.guid === model.guid);
+
+    if (modelData?.portraits) {
+      return {
+        ...model,
+        portraits: modelData.portraits,
+      };
+    }
+
+    return model;
+  });
+
+  return transformedData;
+}

package/server/api/search/multi-suggest.get.ts

@@ -1,7 +1,8 @@
-import { getUrlWithProxiedParams, convertSnakeKeysToCamel } from '../../../runtime';
-import type { IMultiSuggest } from '../../../types';
+import { getUrlWithProxiedParams, convertSnakeKeysToCamel, cleanSuggestModels } from '../../../runtime';
+import type { IMultiSuggest, IRawMultiSuggest } from '../../../types';
 
-export default defineEventHandler(async (event) => {
+export default defineEventHandler(async (event): Promise<IMultiSuggest> => {
+  const theme = useRuntimeConfig(event).public.theme;
   const apiUrl = process.env.NUXT_PUBLIC_API_DOMAIN;
   const url = getUrlWithProxiedParams(`${apiUrl}/v2/search/multi-suggest`, event);
 
@@ -10,5 +11,10 @@ export default defineEventHandler(async (event) => {
     headers: getRequestHeaders(event) as HeadersInit,
   });
 
-  return convertSnakeKeysToCamel<IMultiSuggest>(rawData.data);
+  const data = convertSnakeKeysToCamel<IRawMultiSuggest>(rawData.data);
+
+  return {
+    ...data,
+    models: cleanSuggestModels(data?.models, theme),
+  };
 });

package/server/api/videos/get-video-by-id/[id].get.ts

@@ -1,7 +1,8 @@
 import type { IRawVideoData, IVideoData, IRawModelCard } from '../../../../types';
-import { cleanVideoData, videoDataAddModelIcon, getUrlWithProxiedParams } from '../../../../runtime';
+import { cleanVideoData, videoDataAddModelPortraits, getUrlWithProxiedParams } from '../../../../runtime';
 
 export default defineEventHandler(async (event): Promise<IVideoData> => {
+  const theme = useRuntimeConfig(event).public.theme;
   const apiUrl = process.env.NUXT_PUBLIC_API_DOMAIN;
   const id = getRouterParam(event, 'id');
 
@@ -26,5 +27,8 @@ export default defineEventHandler(async (event): Promise<IVideoData> => {
   const videoData = videoRaw.data as IRawVideoData;
   const modelsData = modelsRaw?.data as Record<'items', Array<IRawModelCard>>;
 
-  return cleanVideoData(videoData?.models ? videoDataAddModelIcon(videoData, modelsData?.items || []) : videoData);
+  return cleanVideoData(
+    videoData?.models ? videoDataAddModelPortraits(videoData, modelsData?.items || []) : videoData,
+    theme,
+  );
 });

package/server/api/videos/get-video-by-url/[url].get.ts

@@ -1,7 +1,8 @@
-import { cleanVideoData, videoDataAddModelIcon, getUrlWithProxiedParams } from '../../../../runtime';
+import { cleanVideoData, videoDataAddModelPortraits, getUrlWithProxiedParams } from '../../../../runtime';
 import type { IRawVideoData, IVideoData, IRawModelCard } from '../../../../types';
 
 export default defineEventHandler(async (event): Promise<IVideoData> => {
+  const theme = useRuntimeConfig(event).public.theme;
   const apiUrl = process.env.NUXT_PUBLIC_API_DOMAIN;
   const url = getRouterParam(event, 'url');
 
@@ -25,5 +26,8 @@ export default defineEventHandler(async (event): Promise<IVideoData> => {
   const videoData = videoRaw.data as IRawVideoData;
   const modelsData = modelsRaw?.data as Record<'items', Array<IRawModelCard>>;
 
-  return cleanVideoData(videoData?.models ? videoDataAddModelIcon(videoData, modelsData?.items || []) : videoData);
+  return cleanVideoData(
+    videoData?.models ? videoDataAddModelPortraits(videoData, modelsData?.items || []) : videoData,
+    theme,
+  );
 });

package/types/chips-item.d.ts

@@ -9,5 +9,7 @@ export interface IChipsItem {
   key?: string
   query?: string
   image?: string
+  /** Та же картинка в avif: есть — UiImg рендерит `<picture>`, `image` становится фолбэком. */
+  imageAvif?: string
   imageFit?: ChipsImageFits
 }

package/types/multi-suggest.d.ts

@@ -1,3 +1,5 @@
+import type { IRawPortraits } from './raw/raw-portraits';
+
 interface AboutItem {
   key: string;
   sizeCache: string;
@@ -62,9 +64,19 @@ interface Category {
   videosCount: number;
 }
 
-interface Model {
+/** Модель, как её отдаёт multi-suggest: с портретами, но до выбора варианта. */
+export interface IRawSuggestModel {
   title: string;
   videosCount: number;
+  portraits?: IRawPortraits;
+}
+
+/** Та же модель после `cleanSuggestModels`: квадратный кроп уже выбран. */
+export interface ISuggestModel {
+  title: string;
+  videosCount: number;
+  imageUrl?: string;
+  imageAvifUrl?: string;
 }
 
 interface Stream {
@@ -96,10 +108,16 @@ interface StripcashModel {
   viewersCount: number;
 }
 
+/** Ответ multi-suggest после BFF: модели уже прошли `cleanSuggestModels`. */
 export interface IMultiSuggest {
   awempireModels: AwempireModel[];
   categories: Category[];
-  models: Model[];
+  models: ISuggestModel[] | null;
   searchPhrases: string[];
   stripcashModels: StripcashModel[];
 }
+
+/** Тот же ответ до чистки моделей — с ним работает хендлер. */
+export interface IRawMultiSuggest extends Omit<IMultiSuggest, 'models'> {
+  models: IRawSuggestModel[] | null;
+}

package/types/raw/raw-video-data.d.ts

@@ -1,4 +1,5 @@
 import type { IRawThumbUrls } from './raw-thumbs-urls';
+import type { IRawPortraits } from './raw-portraits';
 import type { ITimelineGroup } from '../video-data';
 
 export interface IRawVideoData {
@@ -21,6 +22,8 @@ export interface IRawVideoData {
   models: {
     guid: string;
     title: string;
+    /** Своего поля у видео нет — портреты подмешивает BFF из карточек `models/list-by-video-*`. */
+    portraits?: IRawPortraits;
   }[];
   categories: {
     icon?: string,

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

@@ -1,11 +1,8 @@
-import type { IRawPortraits } from './raw/raw-portraits';
-
 export interface ISearchTopModelsType {
   videosCount?: number
   name: string
   title: string
-  primaryImageUrl?: string
-  primaryImageAvifUrl?: string
-  /** Приходит из multi-suggest как есть: там общий snake→camel, отдельного клинера нет. */
-  portraits?: IRawPortraits
+  /** Квадратный кроп портрета: и multi-suggest, и `models/top` отдают его уже выбранным. */
+  imageUrl?: string
+  imageAvifUrl?: string
 }

package/types/video-data.d.ts

@@ -49,6 +49,9 @@ export interface IVideoData {
     models: {
         guid: string;
         title: string;
+        /** Квадратный кроп портрета под чипсу модели: его подмешивает BFF, в ответе видео его нет. */
+        imageUrl?: string;
+        imageAvifUrl?: string;
     }[];
     categories: {
         name: string;

package/runtime/utils/__tests__/video-data-add-model-icon.test.ts

@@ -1,32 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { videoDataAddModelIcon } from '../video-data-add-model-icon';
-
-describe('videoDataAddModelIcon', () => {
-  it('добавляет icon к matching модели', () => {
-    const videoData = {
-      models: [
-        { guid: 'm-1', title: 'Model A' },
-        { guid: 'm-2', title: 'Model B' },
-      ],
-    };
-    const modelsData = [
-      { guid: 'm-1', primary_image_url: 'https://img.com/a.jpg' },
-    ];
-    const result = videoDataAddModelIcon(videoData as any, modelsData as any);
-    expect(result.models[0].icon).toBe('https://img.com/a.jpg');
-    expect(result.models[1].icon).toBeUndefined();
-  });
-
-  it('не мутирует исходный объект', () => {
-    const videoData = { models: [{ guid: 'm-1', title: 'A' }] };
-    const modelsData = [{ guid: 'm-1', primary_image_url: 'url' }];
-    const result = videoDataAddModelIcon(videoData as any, modelsData as any);
-    expect(result).not.toBe(videoData);
-  });
-
-  it('пустой массив моделей', () => {
-    const videoData = { models: [{ guid: 'm-1', title: 'A' }] };
-    const result = videoDataAddModelIcon(videoData as any, []);
-    expect(result.models[0].icon).toBeUndefined();
-  });
-});

package/runtime/utils/video-data-add-model-icon.ts

@@ -1,25 +0,0 @@
-import type { IRawModelCard, IRawVideoData } from '../../types';
-
-/**
- * Добавляет поле icon из modelsData в каждую модель videoData.models по совпадению guid.
- * @param videoData - сырые данные видео
- * @param modelsData - массив карточек моделей с primary_image_url
- */
-export function videoDataAddModelIcon(videoData: IRawVideoData, modelsData: Array<IRawModelCard>): IRawVideoData {
-  const transformedData = { ...videoData };
-
-  transformedData.models = transformedData.models?.map((model) => {
-    const modelData = modelsData.find((item) => item.guid === model.guid);
-
-    if (modelData) {
-      return {
-        ...model,
-        icon: modelData.primary_image_url,
-      };
-    }
-
-    return model;
-  });
-
-  return transformedData;
-}