itube-specs 0.0.987 → 0.0.988

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-square.webp',
-    avif: square?.webp ? square.avif : '/img/model-placeholder-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/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/video.vue

@@ -204,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/package.json

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

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;
-}