itube-specs 0.0.1058 → 0.0.1060

package/SITE_UPDATES.md

@@ -11,6 +11,33 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1060 — 2026-11-02
+
+- **Сайтам со своими `assets/scss/vars` (hdsex-remaster и др.), срочно:** с 0.0.1059 (лоадер, `0d412182`) без новых
+  токенов сборка падает на `Undefined variable`. В `_vars.scss`: `$blur-loading: 4px;` и
+  `$blur-loading-spill: $blur-loading * 3;`. В теме: `$loading-bg` (тёмная — `transparent`, светлая —
+  `$color-white-75`) и `$video-preview-loading-bg: transparent;`. Образец — hdsex-remaster.
+
+- **Всем — к сведению:** в строке чипсов над плеером — только топ-категории ролика (`categories[].isTop`, ставит BFF
+  видео по закешированному `/v1/categories/top`, к бекенду — раз в 10 минут на домен/язык/нишу). Нетоповые остаются в
+  блоке под описанием и не возвращаются в строку тегом. Топ-список не пришёл — как раньше, все категории. Делать ничего
+  не надо.
+
+## 0.0.1059 — 2026-10-30
+
+- **Всем, срочно к сведению:** с 0.0.1056 блок Live Cams и врезки вебкамов пропали из сеток видео на страницах, которые
+  не передают `webcamsQuery` (канал, поиск, листинги на `ViewVideos` без запроса): проп был `{…} | false`, и Vue приводил
+  отсутствующий булев проп к `false` = «без вебкамов». Починено. Сайтам, где сетке передавали `:webcams-query="false"`,
+  — заменить на `no-webcams` (новый булев проп `GridVideos` / `ViewVideos`), иначе вебкамы там снова появятся.
+
+- **Всем — к сведению:** `GridInsert` / `useGridRowAfter` умеют `afterCards` — после строки с N-й карточкой (без дыр,
+  вебкам-тумбы с `data-grid-extra` не в счёт; карточек меньше — за последней строкой); пересчёт и на перестановку
+  соседних вставок (раньше реклама могла сдвинуть блок, а он не замечал). Новые ключи: `gridWebcams.videos.afterCards`,
+  `gridWebcams.models.afterCards` (важнее `afterRows`), `videoPage.webcamsInRelatedAfter` — блок Live Cams внутри
+  сетки похожих. Дефолты — как было, делать ничего не надо; videosection-redesign ставит 14 / 10 / 14.
+- **Всем — к сведению:** у `WebcamMain` проп `fullRows` (по умолчанию `true` — только полные строки, как было);
+  `false` — все модели, последняя строка может быть неполной.
+
 ## 0.0.1058 — 2026-10-30
 
 - **Всем — к сведению:** новый ключ `appConfig.channelTagsSource` (по умолчанию `'popular'` — как было, популярные теги

package/app.config.ts

@@ -61,8 +61,9 @@ export default defineAppConfig({
    *  карточек и сколько врезок вебкам-тумб (хвост того же списка) в сетке видео листинга (не похожие, не плейлист,
    *  не когда страница передала врезки сама); `models` — в основной сетке моделей (`priority`, не футер). */
   gridWebcams: {
-    videos: null as { afterRows: number, inserts: number } | null,
-    models: null as { afterRows: number } | null,
+    /** `afterCards` — после строки с N-й карточкой (карточек меньше — в конец сетки); задан — важнее `afterRows`. */
+    videos: null as { afterRows: number, afterCards?: number, inserts: number } | null,
+    models: null as { afterRows: number, afterCards?: number } | null,
     /** Раскладка videosection.com (`WEBCAMS_LEGACY_LAYOUT`): список 42 на страницу, блок — модели 0–11, врезки в сетку
      *  видео — 21–24 после ¼, ½, ¾ сетки и за 4 карточки до конца (`inserts` из `videos` не используется), мини-блок
      *  после сетки видео и моделей — 25–36. `false` — раскладка слоя: блок 12 + врезки из хвоста на случайных местах. */
@@ -86,6 +87,9 @@ export default defineAppConfig({
     relatedModels: true,
     /** Блок Live Cams после похожих (при `FeatureWebcamsEnabled`); врезки в похожие берут хвост того же списка. */
     webcamsBlock: false,
+    /** Блок Live Cams внутри сетки похожих — после строки с N-й карточкой (похожих меньше — в конце сетки);
+     *  `null` — после секции похожих. */
+    webcamsInRelatedAfter: null as number | null,
     /** Сколько моделей из хвоста списка уходит во врезки похожих, когда блок Live Cams включён. */
     webcamInserts: 8,
     /** С 1024px прятать чипсы моделей над плеером, у которых есть блок в боковой колонке (не дублировать ссылку). */

package/components/grid/insert.vue

@@ -1,5 +1,6 @@
 <!-- Полноширинная вставка в CSS-сетку карточек (`GridVideos`, `GridModels`): встаёт после N-й строки карточек
-при любом числе колонок (`useGridRowAfter`), пустая места не занимает. Класть прямым потомком сетки — через её слоты. -->
+(`afterRows`) или после строки с N-й карточкой (`afterCards`, карточек меньше — в конец) при любом числе колонок
+(`useGridRowAfter`), пустая места не занимает. Класть прямым потомком сетки — через её слоты. -->
 <template>
   <div
     ref="root"
@@ -12,12 +13,14 @@
 <script setup lang="ts">
 const props = defineProps<{
   /** После какой строки карточек встать. */
-  afterRows: number
+  afterRows?: number
+  /** После строки, в которой лежит N-я карточка (без дыр перед блоком); задан — важнее `afterRows`. */
+  afterCards?: number
 }>();
 
 const root = ref<HTMLElement | null>(null);
 
-useGridRowAfter(root, () => props.afterRows);
+useGridRowAfter(root, () => (props.afterCards ? { cards: props.afterCards } : { rows: props.afterRows ?? 0 }));
 </script>
 
 <style lang="scss">

package/components/grid/models.vue

@@ -17,6 +17,7 @@
     <GridInsert
       v-if="webcams"
       :after-rows="webcams.afterRows"
+      :after-cards="webcams.afterCards"
     >
       <LazyWebcamMain
         :list="legacy ? WEBCAMS_LEGACY_LAYOUT.list : undefined"

package/components/grid/videos.vue

@@ -21,6 +21,7 @@
         v-if="cell.webcam"
         :model="cell.webcam"
         class="grid-videos__webcam"
+        data-grid-extra
         @click="onInsertClick(cell)"
         @poster="element => onInsertView(cell, element)"
       />
@@ -44,6 +45,7 @@
     <GridInsert
       v-if="webcams"
       :after-rows="webcams.afterRows"
+      :after-cards="webcams.afterCards"
     >
       <LazyWebcamMain
         v-if="legacyList"
@@ -64,6 +66,7 @@
         v-if="cell.webcam"
         :model="cell.webcam"
         class="grid-videos__webcam"
+        data-grid-extra
         @click="onInsertClick(cell)"
         @poster="element => onInsertView(cell, element)"
       />
@@ -90,6 +93,7 @@
         v-if="cell.webcam"
         :model="cell.webcam"
         class="grid-videos__webcam"
+        data-grid-extra
         @click="onInsertClick(cell)"
         @poster="element => onInsertView(cell, element)"
       />
@@ -159,9 +163,11 @@ const props = defineProps<{
   insertSeed?: string
   /**
    * Выборка вебкамов листинга при `gridWebcams.legacy`: категория провайдера, `random` и размер списка (по умолчанию
-   * `WEBCAMS_LEGACY_LAYOUT.list`, случайные). `false` — без блока и врезок (в любой раскладке).
+   * `WEBCAMS_LEGACY_LAYOUT.list`, случайные). Только объект: булев тип в пропе Vue приводит отсутствующий проп к `false`.
    */
-  webcamsQuery?: { category?: string, random?: boolean, list?: number } | false
+  webcamsQuery?: { category?: string, random?: boolean, list?: number }
+  /** Без блока Live Cams и врезок (в любой раскладке). */
+  noWebcams?: boolean
 }>();
 
 /** Клики и показы врезанных тумб уходят наружу — статистику отправляет сайт. */
@@ -189,16 +195,16 @@ const cardTriggerClass = appConfig.cardTriggerClass || undefined;
 const legacy = !!appConfig.gridWebcams?.legacy;
 
 /** Блок Live Cams и свои врезки — у листингов (похожие и плейлист без них, страница видео передаёт врезки сама). */
-const webcams = !props.inserts && !props.related && !props.playlist && props.webcamsQuery !== false
+const webcams = !props.inserts && !props.related && !props.playlist && !props.noWebcams
   ? appConfig.gridWebcams?.videos
   : null;
 
 /** Общий список страницы в раскладке videosection.com (`gridWebcams.legacy`): блок, врезки и мини-блок режут его по индексам. */
 const legacyList = webcams && legacy
   ? {
-      list: (props.webcamsQuery && props.webcamsQuery.list) || WEBCAMS_LEGACY_LAYOUT.list,
-      category: (props.webcamsQuery && props.webcamsQuery.category) || undefined,
-      random: props.webcamsQuery ? props.webcamsQuery.random !== false : true,
+      list: props.webcamsQuery?.list || WEBCAMS_LEGACY_LAYOUT.list,
+      category: props.webcamsQuery?.category || undefined,
+      random: props.webcamsQuery?.random !== false,
     }
   : null;
 

package/components/view/video.vue

@@ -81,6 +81,20 @@
         <template #grid-end>
           <AdvNativeBottom v-if="featureFlags.AdsNativeEnabled"/>
         </template>
+
+        <GridInsert
+          v-if="videoPage.webcamsBlock && videoPage.webcamsInRelatedAfter"
+          :after-cards="videoPage.webcamsInRelatedAfter"
+        >
+          <WebcamMain
+            v-if="legacyWebcams"
+            v-bind="legacyWebcams"
+          />
+          <WebcamMain
+            v-else
+            :reserve-tail="videoPage.webcamInserts"
+          />
+        </GridInsert>
       </LazyGridVideos>
     </section>
 
@@ -102,16 +116,18 @@
       hydrate-on-visible
     />
 
-    <WebcamMain
-      v-if="videoPage.webcamsBlock && legacyWebcams"
-      v-bind="legacyWebcams"
-      class="_mt-24"
-    />
-    <WebcamMain
-      v-else-if="videoPage.webcamsBlock"
-      :reserve-tail="videoPage.webcamInserts"
-      class="_mt-24"
-    />
+    <template v-if="videoPage.webcamsBlock && !videoPage.webcamsInRelatedAfter">
+      <WebcamMain
+        v-if="legacyWebcams"
+        v-bind="legacyWebcams"
+        class="_mt-24"
+      />
+      <WebcamMain
+        v-else
+        :reserve-tail="videoPage.webcamInserts"
+        class="_mt-24"
+      />
+    </template>
 
     <ViewVideoAfterRelatedSlot :data="data"/>
 
@@ -218,6 +234,11 @@ const categoriesChips = computed((): IChipsItem[] => props.data.categories && pr
   prefix: 'categories',
 })));
 
+// Над плеером — только топ-категории (`isTop` ставит BFF); без пометки (топ-список не пришёл) — все.
+// Теги, совпавшие с нетоповой категорией, всё равно отсекаются по полному списку ниже.
+const topCategoriesChips = computed((): IChipsItem[] => (categoriesChips.value ?? [])
+  .filter((_, index) => props.data.categories[index]?.isTop !== false));
+
 const categoriesTitles = computed<string[]>(() => props.data.categories && props.data.categories?.map(item => item.title?.replace(/\s+/g, '').toLowerCase() ?? ''));
 
 const withoutCategoryTitles = (chips: IChipsItem[]) => (categoriesTitles.value?.length
@@ -242,9 +263,9 @@ const topChips = computed(() => {
       prefix: 'search',
     } as IChipsItem));
   } else if (tagGroupChips.value.length) {
-    return [...categoriesChips.value || [], ...withoutCategoryTitles(tagGroupChips.value)];
+    return [...topCategoriesChips.value, ...withoutCategoryTitles(tagGroupChips.value)];
   } else if (categoriesChips.value || filterTagChips.value) {
-    return [...categoriesChips.value || [], ...filterTagChips.value || []];
+    return [...topCategoriesChips.value, ...filterTagChips.value || []];
   }
   return null;
 });

package/components/view/videos.vue

@@ -31,6 +31,7 @@
       v-if="data && data.items && data.items?.length > 0"
       :items="data.items"
       :webcams-query="webcamsQuery"
+      :no-webcams="noWebcams"
       :class="{'_loading': status === 'pending'}"
       class="view-videos__grid"
       id="anchor"
@@ -118,7 +119,9 @@ const props = defineProps<{
   /** Чипсы поисковых фраз во второй строке грида, как на странице категории. */
   relatedSearch?: IChipsItem[]
   /** Выборка вебкамов сетки (`GridVideos`). */
-  webcamsQuery?: { category?: string, random?: boolean, list?: number } | false
+  webcamsQuery?: { category?: string, random?: boolean, list?: number }
+  /** Сетка без вебкамов (`GridVideos`). */
+  noWebcams?: boolean
 }>();
 
 const route = useRoute();

package/components/webcam/main.vue

@@ -55,10 +55,13 @@ const props = withDefaults(defineProps<{
   id?: string
   /** Без счётчиков онлайна в шапке (мини-блок videosection.com). */
   hideCounts?: boolean
+  /** Только полные строки (по умолчанию); `false` — все модели, последняя строка может быть неполной. */
+  fullRows?: boolean
 }>(), {
   reserveTail: 0,
   offset: 0,
   random: true,
+  fullRows: true,
 });
 
 const NO_COUNTS = { total: 0, byLanguages: {} };
@@ -103,7 +106,7 @@ const columns = ref(0);
  */
 const visibleItems = computed<IStripcashModel[]>(() => {
   const cols = columns.value;
-  if (!cols) return blockItems.value;
+  if (!cols || !props.fullRows) return blockItems.value;
 
   return blockItems.value.slice(0, Math.floor(blockItems.value.length / cols) * cols);
 });

package/composables/use-grid-row-after.ts

@@ -1,35 +1,61 @@
 import { useDebounceFn } from '@vueuse/core';
 
+/** Где встать: после N строк карточек или после строки, в которой лежит N-я карточка. */
+export type GridInsertPlace = { rows: number } | { cards: number };
+
 /**
  * Ставит полноширинный блок CSS-сетки после N-й строки карточек — при любом числе колонок.
  *
  * Считаем по карточкам, а не по строкам сетки: в сетку попадают и полноширинные врезки (карусель
  * моделей, блок вебкамов, реклама), они занимают строку целиком. Карточку отличаем геометрически —
- * шириной в одну колонку. Карточек до нужной строки не хватает — блок остаётся на своём месте в DOM.
+ * шириной в одну колонку; скрытые (`display: none`) не считаем.
+ *
+ * `{ cards: N }` — после строки с N-й карточкой (без дыр в строке перед блоком; врезки с `data-grid-extra` не в счёт);
+ * карточек меньше — сразу за строкой последней. `{ rows: N }` — карточек до нужной строки не хватает — блок остаётся
+ * на своём месте в DOM.
  */
-export function placeAfterCardRows(el: HTMLElement | null, rows: number) {
+export function placeAfterCardRows(el: HTMLElement | null, place: number | GridInsertPlace) {
   const grid = el?.parentElement;
   if (!el || !grid) return;
 
   const columns = getComputedStyle(grid).gridTemplateColumns.split(' ').filter(Boolean);
   const columnWidth = Number.parseFloat(columns[0]) || 0;
 
-  const siblings = Array.from(grid.children).filter(item => item !== el) as HTMLElement[];
+  const siblings = (Array.from(grid.children) as HTMLElement[]).filter(item => item !== el && item.offsetWidth > 0);
   const cards = siblings.filter(item => item.offsetWidth <= columnWidth * 1.5);
+  const setRow = (row: string) => {
+    if (el.style.gridRow !== row) el.style.gridRow = row;
+  };
+
+  if (typeof place === 'object' && 'cards' in place) {
+    // N-я карточка выдачи (врезки с `data-grid-extra` — вебкам-тумбы — не в счёт) или последняя, если их меньше;
+    // блок — сразу за её строкой
+    const counted = cards.filter(item => !item.hasAttribute('data-grid-extra'));
+    const anchor = counted[place.cards - 1] || counted.at(-1);
+    const rowsUpToAnchor = anchor
+      ? new Set(siblings.filter(item => item.offsetTop <= anchor.offsetTop).map(item => item.offsetTop)).size
+      : 0;
+
+    setRow(anchor ? String(rowsUpToAnchor + 1) : '');
+
+    return;
+  }
+
+  const target = cards[(typeof place === 'number' ? place : place.rows) * columns.length];
 
-  const target = cards[rows * columns.length];
   if (!target) {
-    el.style.gridRow = '';
+    setRow('');
 
     return;
   }
 
   const rowsAbove = new Set(siblings.filter(item => item.offsetTop < target.offsetTop).map(item => item.offsetTop));
-  el.style.gridRow = String(rowsAbove.size + 1);
+  setRow(String(rowsAbove.size + 1));
 }
 
-/** То же для компонента: пересчёт на resize (меняются колонки) и на доезд карточек (ленивая гидрация). */
-export const useGridRowAfter = (el: Ref<HTMLElement | null>, rows: () => number) => {
+/** То же для компонента: пересчёт на resize (меняются колонки), на доезд карточек (ленивая гидрация) и на перестановку
+ *  соседних вставок. */
+export const useGridRowAfter = (el: Ref<HTMLElement | null>, rows: () => number | GridInsertPlace) => {
   const place = () => placeAfterCardRows(el.value, rows());
 
   onMounted(() => {
@@ -37,11 +63,19 @@ export const useGridRowAfter = (el: Ref<HTMLElement | null>, rows: () => number)
     if (!grid) return;
 
     const replace = useDebounceFn(place, 200);
-    const observer = new MutationObserver(replace);
+    // соседние вставки (реклама, другие блоки) тоже переставляют себя через style — пересчитываемся вслед за ними;
+    // style внутри карточек (превью и пр.) не интересен — только у прямых детей сетки, кроме себя
+    const observer = new MutationObserver((mutations) => {
+      if (mutations.some(item => (item.type === 'childList'
+        ? item.target === grid
+        : item.target.parentElement === grid && item.target !== el.value))) {
+        replace();
+      }
+    });
 
     place();
     window.addEventListener('resize', replace, { passive: true });
-    observer.observe(grid, { childList: true });
+    observer.observe(grid, { childList: true, subtree: true, attributes: true, attributeFilter: ['style'] });
 
     onBeforeUnmount(() => {
       window.removeEventListener('resize', replace);

package/package.json

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

package/runtime/index.ts

@@ -46,6 +46,7 @@ export * from './utils/cleaners/clean-video-card';
 export * from './utils/cleaners/clean-model-info';
 export * from './utils/cleaners/clean-suggest-models';
 export * from './utils/video-data-add-model-portraits';
+export * from './utils/video-data-mark-top-categories';
 export * from './utils/converters/convert-categories-to-footer';
 export * from './utils/converters/convert-categories-to-chips';
 export * from './utils/converters/convert-tag-group-item-to-chips';

package/runtime/utils/__tests__/video-data-mark-top-categories.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+import type { IRawVideoData } from '../../../types';
+import { videoDataMarkTopCategories } from '../video-data-mark-top-categories';
+
+const video = {
+  categories: [{ name: 'cartoon', title: 'Cartoon' }, { name: '3d', title: '3D' }, { name: 'Masturbation', title: 'Masturbation' }],
+} as IRawVideoData;
+
+describe('videoDataMarkTopCategories', () => {
+  it('marks categories from the top list, ignoring case and edge spaces', () => {
+    const result = videoDataMarkTopCategories(video, ['cartoon', 'masturbation ']);
+
+    expect(result.categories.map(category => category.isTop)).toEqual([true, false, true]);
+  });
+
+  it('leaves the video untouched without the top list', () => {
+    expect(videoDataMarkTopCategories(video, null)).toBe(video);
+  });
+});

package/runtime/utils/video-data-mark-top-categories.ts

@@ -0,0 +1,21 @@
+import type { IRawVideoData } from '../../types';
+
+const normalize = (name: string) => name.trim().toLowerCase();
+
+/**
+ * Помечает категории ролика `isTop` по списку топ-категорий: в строку над плеером идут только топовые.
+ * Списка нет (ручка упала) — ролик без пометок, строка покажет все категории, как раньше.
+ * Имена сравниваются без регистра и краевых пробелов: в API встречается `masturbation `.
+ * @param videoData - сырые данные видео
+ * @param topNames - имена топ-категорий
+ */
+export function videoDataMarkTopCategories(videoData: IRawVideoData, topNames: string[] | null): IRawVideoData {
+  if (!videoData?.categories?.length || !topNames) return videoData;
+
+  const top = new Set(topNames.map(normalize));
+
+  return {
+    ...videoData,
+    categories: videoData.categories.map(category => ({ ...category, isTop: top.has(normalize(category.name)) })),
+  };
+}

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

@@ -1,5 +1,5 @@
 import type { IRawVideoData, IVideoData, IRawModelCard } from '../../../../types';
-import { cleanVideoData, videoDataAddModelPortraits, getUrlWithProxiedParams } from '../../../../runtime';
+import { cleanVideoData, videoDataAddModelPortraits, videoDataMarkTopCategories, getUrlWithProxiedParams } from '../../../../runtime';
 
 export default defineEventHandler(async (event): Promise<IVideoData> => {
   const theme = useRuntimeConfig(event).public.theme;
@@ -17,15 +17,16 @@ export default defineEventHandler(async (event): Promise<IVideoData> => {
   const videoUrl = getUrlWithProxiedParams(`${apiUrl}/v2/video/url/${id}`, event);
   const modelsUrl = getUrlWithProxiedParams(`${apiUrl}/v2/models/list-by-video-id/${id}`, event);
 
-  const [videoRaw, modelsRaw] = await Promise.all([
+  const [videoRaw, modelsRaw, topCategoryNames] = await Promise.all([
     apiFetch(videoUrl, {
       method: 'GET',
       headers: clientHeaders,
     }),
     apiFetch(modelsUrl, { method: 'GET', headers: clientHeaders }).catch(() => null),
+    getTopCategoryNames(event),
   ]);
 
-  const videoData = withDemoFallbacks(videoRaw.data as IRawVideoData);
+  const videoData = videoDataMarkTopCategories(withDemoFallbacks(videoRaw.data as IRawVideoData), topCategoryNames);
   const modelsData = modelsRaw?.data as Record<'items', Array<IRawModelCard>>;
 
   return cleanVideoData(

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

@@ -1,4 +1,4 @@
-import { cleanVideoData, videoDataAddModelPortraits, getUrlWithProxiedParams } from '../../../../runtime';
+import { cleanVideoData, videoDataAddModelPortraits, videoDataMarkTopCategories, getUrlWithProxiedParams } from '../../../../runtime';
 import type { IRawVideoData, IVideoData, IRawModelCard } from '../../../../types';
 
 export default defineEventHandler(async (event): Promise<IVideoData> => {
@@ -15,15 +15,16 @@ export default defineEventHandler(async (event): Promise<IVideoData> => {
   const videoUrl = getUrlWithProxiedParams(`${apiUrl}/v2/video/url/${url}`, event);
   const modelsUrl = getUrlWithProxiedParams(`${apiUrl}/v2/models/list-by-video-url/${url}`, event);
 
-  const [videoRaw, modelsRaw] = await Promise.all([
+  const [videoRaw, modelsRaw, topCategoryNames] = await Promise.all([
     apiFetch(videoUrl, {
       method: 'GET',
       headers: clientHeaders,
     }),
     apiFetch(modelsUrl, { method: 'GET', headers: clientHeaders }).catch(() => null),
+    getTopCategoryNames(event),
   ]);
 
-  const videoData = withDemoFallbacks(videoRaw.data as IRawVideoData);
+  const videoData = videoDataMarkTopCategories(withDemoFallbacks(videoRaw.data as IRawVideoData), topCategoryNames);
   const modelsData = modelsRaw?.data as Record<'items', Array<IRawModelCard>>;
 
   return cleanVideoData(

package/server/utils/top-category-names.ts

@@ -0,0 +1,14 @@
+import type { H3Event } from 'h3';
+import type { IRawCategoryCard } from '../../types';
+
+/**
+ * Имена топ-категорий из кеша BFF (`cachedApiFetch`, 10 минут на домен + язык + нишу): к бекенду ходим
+ * раз в TTL, а не на каждый ролик. Ошибка ручки — `null`, ролик от этого не падает.
+ */
+export async function getTopCategoryNames(event: H3Event): Promise<string[] | null> {
+  const url = `${process.env.NUXT_PUBLIC_API_DOMAIN}/v1/categories/top`;
+
+  return cachedApiFetch<Array<IRawCategoryCard>>(url, event)
+    .then(categories => (Array.isArray(categories) ? categories.map(category => category.name) : null))
+    .catch(() => null);
+}

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

@@ -36,7 +36,9 @@ export interface IRawVideoData {
     sizeCache?: string,
     state?: string,
     title: string,
-    unknownFields?: string
+    unknownFields?: string,
+    /** Не из API: ставит BFF по топ-списку категорий. */
+    isTop?: boolean
   }[];
   actions: null;
   primary_thumb_rank: number; // unused

package/types/video-data.d.ts

@@ -82,6 +82,8 @@ export interface IVideoData {
         name: string;
         title: string;
         icon?: string;
+        /** Топ-категория — попадает в строку над плеером (BFF, по кешу `/v1/categories/top`). */
+        isTop?: boolean;
     }[];
     actions: null;
     channelName: string;