itube-specs 0.0.1054 → 0.0.1056

package/SITE_UPDATES.md

@@ -11,6 +11,64 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1056 — 2026-10-30
+
+- **Всем — к сведению:** починена `/search/{q}/models` — метод получал аргументы не в том порядке (фраза уходила в
+  `order`), поэтому всегда приходила первая страница без сортировки. Теперь `useFetchModelsSearch`: страница и `?sort`
+  (по умолчанию `rank`) работают. Делать ничего не надо.
+
+- **Всем — к сведению:** плеер плейлиста отдаёт 404 на удалённый ролик (`isDeleted`) и на ролик без файла (пустой
+  `md5`) — раньше рисовал его как живой. Делать ничего не надо.
+
+- **Всем — к сведению:** убраны запросы, ответ на которые не выводился. Страница видео: топ-модели запрашиваются только
+  при `videoPage.relatedModels` и больше не держат рендер страницы (раньше упавшая ручка топ-моделей = нет страницы
+  ролика), модели боковой колонки на мобиле не запрашиваются. Плеер плейлиста — без групп категорий. `/models/letter/*`
+  — без топ-моделей (карусель строится из выдачи). Страница модели и её `tag`/`channel` — без похожих моделей; проп
+  `dataModels` у `ViewModelVideos` удалён. Делать ничего не надо (своих страниц модели с `ViewModelVideos` у сайтов нет).
+
+- **Всем — к сведению:** раскладка вебкамов как на videosection.com — `appConfig.gridWebcams.legacy` (по умолчанию `false`,
+  всё как было). Включённая: один список 42 на страницу (`WEBCAMS_LEGACY_LAYOUT`), блок Live Cams — модели 0–11,
+  врезки в сетку видео — 21–24 после ¼, ½, ¾ сетки и за 4 карточки до конца (`webcamQuarterPositions`), мини-блок
+  после сетки видео и моделей — 25–36; на страницах по буквам моделей — без вебкамов. Новое без флага:
+  `useFetchWebcams({ random, id })`; у `WebcamMain` — `list` / `offset` / `random` / `id` / `hideCounts`; у `GridVideos`
+  и `ViewVideos` — `webcamsQuery` (`false` — без вебкамов; категория/random/размер списка — только в legacy); у
+  `GridModels` — `withWebcams`. Делать ничего не надо; образец — videosection-redesign.
+
+- **Всем — к сведению:** новый ключ `appConfig.defaultOrders` (`category`, `tag`, `model`, `channel`, `playlists`) —
+  порядок выдачи без `?sort`; дефолт `null` = как было (`-popularity`, у плейлистов `-views`), `''` — `order` не
+  передаётся (дефолт API). Плюс `CategoriesApiService.getTop` + `useFetchTopCategories` — топ-категории в порядке API
+  (`/bff/categories/get-top`), для сайтов, которым не нужен `top-random`. Делать ничего не надо; образец —
+  videosection-redesign (`config/site.config.ts`, главная `pages/index.vue`).
+
+- **Сайтам с `categoryRelatedSearchLimit` (из 0.0.1055):** ключ заменён на `appConfig.relatedSearches.categoryLimit` —
+  перенести значение; старый ключ больше не читается (без переноса на категории снова все фразы).
+- **Всем — к сведению:** новый ключ `appConfig.relatedSearches` и `appConfig.videoPage.refererPhrasesPrefix`, все
+  дефолты = прежнее поведение, делать ничего не надо. Чтобы чипсы фраз совпадали с videosection.com:
+  `relatedSearches.shuffle` — топ-N вперемешку; `categoryLimit` — сколько фраз на категории; `queryLimit` — поиск
+  берёт фразы, похожие на запрос (`/video/related-searches`, новый BFF `/bff/search/related-searches`), и тег
+  получает такой же блок (проп `relatedSearch` у `ViewVideos`); `tagLimit` — свой лимит тега; `trendingLimit` —
+  сколько общих фраз под видео; `refererLimit` — сколько фраз перехода над видео (`playlistRefererLimit` — на плеере плейлиста); `mobile` — те же лимиты на мобиле
+  (`0` — блока нет; хелпер `useRelatedSearchLimit`);
+  `refererPhrasesPrefix: 'tag'` — фразы перехода над видео ведут на `/tag/…`. Образец — videosection-redesign
+  (`config/site.config.ts`). Сайтам со своей страницей поиска: чтобы она слушалась `queryLimit`, фразы брать через
+  `useSearchRelatedPhrases()` вместо `useFetchRelatedSearch(SearchApiService.getPhrases)` и отдавать в
+  `useSearchPage()` (образец — `pages/search/[slug]/index.vue` videosection-redesign); без этого всё как было.
+
+## 0.0.1055 — 2026-10-30
+
+- **Всем — к сведению:** related searches на странице категории (`useCategoryPage().relatedSearch`) теперь
+  отсортированы по убыванию `score` (раньше — в порядке ответа API). Новый ключ `appConfig.categoryRelatedSearchLimit`
+  (по умолчанию `null` — все пришедшие фразы, как было): число — показывать только топ-N по весу. Делать ничего не
+  надо; videosection-redesign ставит `20`, как на боевом videosection.
+
+- **Всем — к сведению:** группы под плеером читаются из поля `entities` ответа видео v2 (бекенд: разделы категорий,
+  затем теги и поисковые фразы); `tags` снова только `string[]`. У узлов `tag`/`search` бекенд отдаёт в `title` сам
+  тип — заголовок берётся из переводов (новый ключ `tags`, и `related_searches`). BFF обеих ручек видео (по id и по
+  url) ходит в `GET /v2/video/url/{url}` — бекенд сам разбирает id или слаг; заглушка групп удалена. Временное демо (`server/utils/video-demo-mock.ts`): без описания — lorem, без разделов
+  категорий в `entities` — категории ролика одной группой «Categories»; уберём, когда данные появятся.
+  **Нужен бекенд с этой ручкой** (itube-gw `9d57077`): на API без неё страница видео отдаёт 500. Сайтам со своими локалями (hdsex `hi-IN`) — добавить `tags` и
+  `related_searches`, иначе заголовок будет на английском.
+
 ## 0.0.1054 — 2026-10-28
 
 - **Сайтам со своей темой (hdsex-remaster):** в `_theme.scss` добавить токены тегов в раскрытом описании видео —

package/app.config.ts

@@ -1,5 +1,8 @@
 import type { INavExtraItem, INavItemOverride, IQuickFilterScheme, ISecondNavItem } from './types';
 
+type RelatedSearchLimitKey = 'categoryLimit' | 'queryLimit' | 'tagLimit' | 'trendingLimit' | 'refererLimit'
+  | 'playlistRefererLimit';
+
 export default defineAppConfig({
   // Дефолты, чтобы слой собирался/тестировался standalone.
   // Проект deep-merge'ит свои per-site значения поверх.
@@ -14,12 +17,53 @@ export default defineAppConfig({
   /** Есть ли у сайта сгруппированный вид категорий (`/categories` — группы, `/categories/all` — A–Z).
    *  `false` — `/categories` сам список A–Z: `CategoryNav` без табов Grouped / A-Z, «All» ведёт на `/categories`. */
   categoriesGrouped: true,
+  /** Порядок выдачи без `?sort` (значение `order` API). `null` — дефолт слоя, `''` — `order` не передавать (дефолт
+   *  API). Вкладки сортировок не меняет. */
+  defaultOrders: {
+    /** Видео категории, дефолт слоя `-popularity`. */
+    category: null as string | null,
+    /** Видео тега, дефолт слоя `-popularity`. */
+    tag: null as string | null,
+    /** Видео модели, дефолт слоя `-popularity`. */
+    model: null as string | null,
+    /** Видео канала, дефолт слоя `-popularity`. */
+    channel: null as string | null,
+    /** Список плейлистов, дефолт слоя `-views`. */
+    playlists: null as string | null,
+  },
+  /** Чипсы поисковых фраз в листингах и на видео (`useRelatedPhrases`). Фразы с весом сначала режутся до топа
+   *  по `score`, без веса (общие фразы) — как пришли. */
+  relatedSearches: {
+    /** Показывать вперемешку (новый порядок на каждый серверный рендер, как на videosection.com); `false` — фразы
+     *  с весом по убыванию `score`, без веса — как пришли. */
+    shuffle: false,
+    /** Сколько фраз на странице категории, `null` — все. */
+    categoryLimit: null as number | null,
+    /** Сколько фраз, похожих на запрос (`/video/related-searches`), на страницах поиска и тега. `null` — поиск
+     *  показывает общие фразы (`/search/phrases`), у тега блока нет. */
+    queryLimit: null as number | null,
+    /** Сколько фраз на теге, `null` — как `queryLimit` (блок у тега есть, только когда `queryLimit` задан). */
+    tagLimit: null as number | null,
+    /** Сколько общих фраз в блоке под видео, `null` — все пришедшие. */
+    trendingLimit: null as number | null,
+    /** Сколько фраз перехода над видео (`videoPage.refererPhrases`), `null` — все пришедшие. */
+    refererLimit: null as number | null,
+    /** Сколько фраз перехода на плеере плейлиста, `null` — как `refererLimit`. */
+    playlistRefererLimit: null as number | null,
+    /** Те же лимиты на мобиле (`isMobile`): ключа нет — как на десктопе, `0` — блока нет. Источник фраз поиска и
+     *  наличие блока у тега решает десктопный `queryLimit`. */
+    mobile: {} as Partial<Record<RelatedSearchLimitKey, number | null>>,
+  },
   /** Блок Live Cams в сетках листингов (при `FeatureWebcamsEnabled`), `null` — нет. `videos` — после какой строки
    *  карточек и сколько врезок вебкам-тумб (хвост того же списка) в сетке видео листинга (не похожие, не плейлист,
    *  не когда страница передала врезки сама); `models` — в основной сетке моделей (`priority`, не футер). */
   gridWebcams: {
     videos: null as { afterRows: number, inserts: number } | null,
     models: null as { afterRows: number } | null,
+    /** Раскладка videosection.com (`WEBCAMS_LEGACY_LAYOUT`): список 42 на страницу, блок — модели 0–11, врезки в сетку
+     *  видео — 21–24 после ¼, ½, ¾ сетки и за 4 карточки до конца (`inserts` из `videos` не используется), мини-блок
+     *  после сетки видео и моделей — 25–36. `false` — раскладка слоя: блок 12 + врезки из хвоста на случайных местах. */
+    legacy: false,
   },
   /** Старые значения `?sort` → ключ API сортировки редизайна (`''` — аналога нет, 301 на страницу без сортировки).
    *  Значения, совпадающие с ключом API сортировки страницы (`-created`, `rank`), узнаются и без карты;
@@ -31,6 +75,8 @@ export default defineAppConfig({
   videoPage: {
     /** Фразы, по которым пришли на ролик, — строкой над заголовком. */
     refererPhrases: false,
+    /** Куда ведут фразы перехода: `search` — `/search/<фраза>`, `tag` — `/tag/<фраза>`. */
+    refererPhrasesPrefix: 'search' as 'search' | 'tag',
     /** Пагинация похожих. */
     relatedPagination: true,
     /** Карусель моделей под похожими. */

package/assets/scss/base/_loading.scss

@@ -21,6 +21,18 @@
     display: block;
     width: var(--size, 64px);
     height: var(--size, 64px);
-    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><radialGradient id="a12" cx=".66" fx=".66" cy=".3125" fy=".3125" gradientTransform="scale(1.5)"><stop offset="0" stop-color="%23FFFFFF"></stop><stop offset=".3" stop-color="%23FFFFFF" stop-opacity=".9"></stop><stop offset=".6" stop-color="%23FFFFFF" stop-opacity=".6"></stop><stop offset=".8" stop-color="%23FFFFFF" stop-opacity=".3"></stop><stop offset="1" stop-color="%23FFFFFF" stop-opacity="0"></stop></radialGradient><circle transform-origin="center" fill="none" stroke="url(%23a12)" stroke-width="15" stroke-linecap="round" stroke-dasharray="200 1000" stroke-dashoffset="0" cx="100" cy="100" r="70"><animateTransform type="rotate" attributeName="transform" calcMode="spline" dur="2" values="360;0" keyTimes="0;1" keySplines="0 0 1 1" repeatCount="indefinite"></animateTransform></circle><circle transform-origin="center" fill="none" opacity=".2" stroke="%23FFFFFF" stroke-width="15" stroke-linecap="round" cx="100" cy="100" r="70"></circle></svg>');
+    background-color: $loading-icon;
+    content: '';
+    mask-position: center;
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><radialGradient id="a12" cx=".66" fx=".66" cy=".3125" fy=".3125" gradientTransform="scale(1.5)"><stop offset="0" stop-color="%23FFFFFF"></stop><stop offset=".3" stop-color="%23FFFFFF" stop-opacity=".9"></stop><stop offset=".6" stop-color="%23FFFFFF" stop-opacity=".6"></stop><stop offset=".8" stop-color="%23FFFFFF" stop-opacity=".3"></stop><stop offset="1" stop-color="%23FFFFFF" stop-opacity="0"></stop></radialGradient><circle transform-origin="center" fill="none" stroke="url(%23a12)" stroke-width="15" stroke-linecap="round" stroke-dasharray="200 1000" stroke-dashoffset="0" cx="100" cy="100" r="70"></circle><circle transform-origin="center" fill="none" opacity=".2" stroke="%23FFFFFF" stroke-width="15" stroke-linecap="round" cx="100" cy="100" r="70"></circle></svg>');
+    animation: loading-spin 2s linear infinite;
+  }
+}
+
+@keyframes loading-spin {
+  to {
+    transform: translate(-50%, -50%) rotate(-360deg);
   }
 }

package/assets/scss/themes/dark/_theme.scss

@@ -16,6 +16,9 @@ $main-bg: $color-black;
 // ─── Link ───
 $link-text: $color-white;
 
+// ─── Loading ───
+$loading-icon: $color-white;
+
 // ─── Cards (shared) ───
 $card-ring-shadow--hover: none;
 

package/assets/scss/themes/light/_theme.scss

@@ -27,6 +27,9 @@ $main-bg: $color-white;
 // ─── Link ───
 $link-text: $color-indigo-600;
 
+// ─── Loading ───
+$loading-icon: $color-indigo-600;
+
 // ─── Cards (shared) ───
 $card-ring-shadow--hover: 0 0 0 2px $main-bg, 0 0 0 3px $color-gray-400;
 

package/components/grid/models.vue

@@ -18,30 +18,48 @@
       v-if="webcams"
       :after-rows="webcams.afterRows"
     >
-      <LazyWebcamMain hydrate-on-visible/>
+      <LazyWebcamMain
+        :list="legacy ? WEBCAMS_LEGACY_LAYOUT.list : undefined"
+        hydrate-on-visible
+      />
     </GridInsert>
     <slot/>
     <GridModelsEndSlot
       :items="items"
       :footer="footer"
     />
+    <LazyWebcamMain
+      v-if="webcams && legacy"
+      :list="WEBCAMS_LEGACY_LAYOUT.list"
+      :offset="WEBCAMS_LEGACY_LAYOUT.mini[0]"
+      :limit="WEBCAMS_LEGACY_LAYOUT.mini[1]"
+      class="grid-models__webcams-mini"
+      hide-counts
+      hydrate-on-visible
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import type { IModelCard } from '../../types';
+import { WEBCAMS_LEGACY_LAYOUT } from '../../runtime';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   items: IModelCard[]
   footer?: boolean
   priority?: boolean
-}>();
+  /** `false` — без блока Live Cams даже в основной сетке. */
+  withWebcams?: boolean
+}>(), {
+  withWebcams: true,
+});
 
 const appConfig = useAppConfig();
 const cardTriggerClass = appConfig.cardTriggerClass || undefined;
+const legacy = !!appConfig.gridWebcams?.legacy;
 
 /** Блок Live Cams — только в основной сетке страницы (`priority`), не в футере и не в сетках по буквам. */
-const webcams = !props.footer && props.priority ? appConfig.gridWebcams?.models : null;
+const webcams = !props.footer && props.priority && props.withWebcams ? appConfig.gridWebcams?.models : null;
 </script>
 
 <style lang="scss">
@@ -77,4 +95,10 @@ const webcams = !props.footer && props.priority ? appConfig.gridWebcams?.models
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 }
+
+.grid-models__webcams-mini {
+  grid-column: 1/-1;
+  margin-top: 24px;
+  margin-bottom: 0;
+}
 </style>

package/components/grid/videos.vue

@@ -46,6 +46,12 @@
       :after-rows="webcams.afterRows"
     >
       <LazyWebcamMain
+        v-if="legacyList"
+        v-bind="legacyList"
+        hydrate-on-visible
+      />
+      <LazyWebcamMain
+        v-else
         :reserve-tail="webcams.inserts"
         hydrate-on-visible
       />
@@ -107,12 +113,22 @@
       :items="items"
       :related="related"
     />
+    <LazyWebcamMain
+      v-if="legacyList"
+      v-bind="legacyList"
+      :offset="WEBCAMS_LEGACY_LAYOUT.mini[0]"
+      :limit="WEBCAMS_LEGACY_LAYOUT.mini[1]"
+      class="grid-videos__webcams-mini"
+      hide-counts
+      hydrate-on-visible
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import type { IStripcashModel, IVideoCard } from '../../types';
-import { webcamInsertPositions } from '../../utils/webcams/insert-positions';
+import { WEBCAMS_LEGACY_LAYOUT } from '../../runtime';
+import { webcamInsertPositions, webcamQuarterPositions } from '../../utils/webcams/insert-positions';
 
 /** Ячейка сетки: либо карточка видео, либо врезанная вебкам-тумба. */
 interface IGridCell {
@@ -141,6 +157,11 @@ const props = defineProps<{
   inserts?: IStripcashModel[]
   /** Сид раскладки врезок; по умолчанию — guid первого видео. */
   insertSeed?: string
+  /**
+   * Выборка вебкамов листинга при `gridWebcams.legacy`: категория провайдера, `random` и размер списка (по умолчанию
+   * `WEBCAMS_LEGACY_LAYOUT.list`, случайные). `false` — без блока и врезок (в любой раскладке).
+   */
+  webcamsQuery?: { category?: string, random?: boolean, list?: number } | false
 }>();
 
 /** Клики и показы врезанных тумб уходят наружу — статистику отправляет сайт. */
@@ -165,9 +186,30 @@ function onInsertView(cell: IGridCell, element: HTMLElement) {
 const appConfig = useAppConfig();
 const cardTriggerClass = appConfig.cardTriggerClass || undefined;
 
+const legacy = !!appConfig.gridWebcams?.legacy;
+
 /** Блок Live Cams и свои врезки — у листингов (похожие и плейлист без них, страница видео передаёт врезки сама). */
-const webcams = !props.inserts && !props.related && !props.playlist ? appConfig.gridWebcams?.videos : null;
-const ownInserts = webcams ? await useWebcamsShare(webcams.inserts) : null;
+const webcams = !props.inserts && !props.related && !props.playlist && props.webcamsQuery !== false
+  ? 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,
+    }
+  : null;
+
+const [insertsFrom, insertsCount] = WEBCAMS_LEGACY_LAYOUT.inserts;
+
+const legacyItems = legacyList
+  ? (await useFetchWebcams({ limit: legacyList.list, category: legacyList.category, random: legacyList.random, keepAlive: true })).items
+  : null;
+const ownInserts = legacyItems
+  ? computed(() => legacyItems.value.slice(insertsFrom, insertsFrom + insertsCount))
+  : webcams ? await useWebcamsShare(webcams.inserts) : null;
 const inserts = computed(() => props.inserts || ownInserts?.value || []);
 
 const isMobile = useState<boolean>('isMobile');
@@ -175,17 +217,19 @@ const eagerCount = computed(() => isMobile.value ? 4 : 12);
 
 const cells = computed<IGridCell[]>(() => {
   const models = inserts.value;
-  const positions = webcamInsertPositions(
-    props.insertSeed || props.items[0]?.guid || '',
-    props.items.length,
-    models.length,
-  );
+  const positions = legacy
+    ? webcamQuarterPositions(props.items.length, models.length)
+    : webcamInsertPositions(
+        props.insertSeed || props.items[0]?.guid || '',
+        props.items.length,
+        models.length,
+      );
 
   const result: IGridCell[] = [];
   let inserted = 0;
 
-  props.items.forEach((video, index) => {
-    if (positions[inserted] === index) {
+  const pushInserts = (index: number) => {
+    while (inserted < positions.length && positions[inserted] === index) {
       const model = models[inserted];
 
       result.push({
@@ -196,9 +240,13 @@ const cells = computed<IGridCell[]>(() => {
       });
       inserted++;
     }
+  };
 
+  props.items.forEach((video, index) => {
+    pushInserts(index);
     result.push({ key: `video-${video.guid}`, video, videoIndex: index, insertIndex: -1 });
   });
+  pushInserts(props.items.length);
 
   return result;
 });
@@ -224,6 +272,12 @@ const lazyCells = computed(() => cells.value.slice(eagerCount.value + IDLE_COUNT
   min-width: 0;
 }
 
+.grid-videos__webcams-mini {
+  grid-column: 1/-1;
+  margin-top: 24px;
+  margin-bottom: 0;
+}
+
 .grid-videos.--first-hidden .grid-videos__card.--first-row {
   @include from-br(md) {
     display: none;

package/components/player/interface.vue

@@ -87,7 +87,8 @@
             :key="group.name || group.title"
             class="player-interface__tags-group"
           >
-            <dt class="player-interface__tags-title">{{ group.title }}</dt>
+            <!-- у узлов тегов и поисков бекенд кладёт в title сам тип — заголовок берём из переводов -->
+            <dt class="player-interface__tags-title">{{ group.type === 'category' ? group.title : t(group.type === 'tag' ? 'tags' : 'related_searches') }}</dt>
             <dd class="player-interface__tags-list">
               <UiChips
                 v-for="item in group.items"

package/components/view/model-videos.vue

@@ -120,7 +120,6 @@ const props = defineProps<{
   status: AsyncDataRequestStatus
   statusOther?: AsyncDataRequestStatus
   cardInfo: ICardInfo | null
-  dataModels: PaginatedResponse<IModelCard> | null
   modelTags: IPopularTags[] | null
   modelChannels: PaginatedResponse<IChannelCard> | null
   similarModels?: IModelCard[] | undefined

package/components/view/models.vue

@@ -101,6 +101,7 @@
       <GridModels
         :class="{'_loading': status === 'pending'}"
         :items="data.items"
+        :with-webcams="!(letter && legacyWebcams)"
         class="view-models__grid"
         id="anchor"
         priority
@@ -153,6 +154,8 @@ const { generateLink } = useGenerateLink();
 const webcamsPath = useWebcamsPath();
 
 const isWebcamsEnabled = !!useRuntimeConfig().public.featureFlags.FeatureWebcamsEnabled;
+/** Раскладка videosection.com (`gridWebcams.legacy`): на буквенных страницах Live Cams нет. */
+const legacyWebcams = !!useAppConfig().gridWebcams?.legacy;
 
 // онлайн — тем же ключом фетча, что у блока «Live Cams» (второго запроса нет); всего моделей — той же ручкой,
 // что на странице вебкамов, чтобы счётчик в переключателе на обеих страницах совпадал. Без флага запросов нет.

package/components/view/video.vue

@@ -103,7 +103,12 @@
     />
 
     <WebcamMain
-      v-if="videoPage.webcamsBlock"
+      v-if="videoPage.webcamsBlock && legacyWebcams"
+      v-bind="legacyWebcams"
+      class="_mt-24"
+    />
+    <WebcamMain
+      v-else-if="videoPage.webcamsBlock"
       :reserve-tail="videoPage.webcamInserts"
       class="_mt-24"
     />
@@ -126,7 +131,7 @@
 
 <script setup lang="ts">
 import type { IChipsItem, IModelCard, IStripcashModel, IVideoCard, IVideoData, PaginatedResponse } from '../../types';
-import { convertModelToRoundCard, convertString, convertTagGroupItemToChips } from '../../runtime';
+import { WEBCAMS_LEGACY_LAYOUT, convertModelToRoundCard, convertString, convertTagGroupItemToChips } from '../../runtime';
 import { VideosApiService } from '../../services/api/videos.service';
 import type { AsyncDataRequestStatus } from '#app';
 
@@ -159,16 +164,32 @@ const videoPage = useAppConfig().videoPage;
 // Без блока Live Cams запрос клиентский: сетка ниже первого экрана, и рендер страницы видео не должен
 // ждать провайдера. С блоком список один на двоих (`useWebcamsShare`).
 // Без флага `FeatureWebcamsEnabled` запроса нет вовсе
-const webcamInserts = videoPage.webcamsBlock
-  ? await useWebcamsShare(videoPage.webcamInserts)
-  : (await useFetchWebcams({ clientOnly: true })).items;
+// В раскладке videosection.com (`gridWebcams.legacy`) — общий список из 42: на десктопе ролика модели под ролик (`id`),
+// на мобиле и в плеере плейлиста случайные; блок берёт 0–11, врезки — 21–24.
+const legacyWebcams = useAppConfig().gridWebcams?.legacy
+  ? props.page !== 'playlist' && !useState<boolean>('isMobile').value
+    ? { list: WEBCAMS_LEGACY_LAYOUT.list, id: props.data.id, random: false }
+    : { list: WEBCAMS_LEGACY_LAYOUT.list, random: true }
+  : null;
+
+const legacyWebcamItems = legacyWebcams && videoPage.webcamsBlock
+  ? (await useFetchWebcams({ limit: legacyWebcams.list, id: legacyWebcams.id, random: legacyWebcams.random, keepAlive: true })).items
+  : null;
+
+const webcamInserts = legacyWebcamItems
+  ? computed(() => legacyWebcamItems.value.slice(WEBCAMS_LEGACY_LAYOUT.inserts[0], WEBCAMS_LEGACY_LAYOUT.inserts[0] + WEBCAMS_LEGACY_LAYOUT.inserts[1]))
+  : videoPage.webcamsBlock
+    ? await useWebcamsShare(videoPage.webcamInserts)
+    : (await useFetchWebcams({ clientOnly: true })).items;
 
 const { data: refererPhrases } = videoPage.refererPhrases
   ? await useFetchVideoRefererPhrases(featureFlags.FetchByUrlEnabled ? VideosApiService.refererPhrasesByUrl : VideosApiService.refererPhrasesById)
   : { data: ref<string[] | null>(null) };
 
-const refererChips = computed<IChipsItem[]>(() => (Array.isArray(refererPhrases.value) ? refererPhrases.value : [])
-  .map(item => ({ title: item, value: item, prefix: 'search' })));
+const refererList = useRelatedPhrases(() => (Array.isArray(refererPhrases.value) ? refererPhrases.value : []), useRelatedSearchLimit(props.page === 'playlist' ? 'playlistRefererLimit' : 'refererLimit'));
+
+const refererChips = computed<IChipsItem[]>(() => refererList.value
+  .map(item => ({ title: item, value: item, prefix: videoPage.refererPhrasesPrefix })));
 
 const modelsRoundCards = computed(() =>
     props.models?.map(convertModelToRoundCard) || []
@@ -183,8 +204,9 @@ const emit = defineEmits<{
 
 const tagChips = computed((): IChipsItem[] => props.data.tags?.map(item => ({ title: item, value: item, prefix: 'tag' })) ?? []);
 
-// v2: элементы всех групп одной строкой (без повторов) — категории ролика уже в них, отдельные не добавляем
+// v2: теги и поиски из групп (без повторов). Категории — из `categories`: в группы попадают только те, у кого есть раздел
 const tagGroupChips = computed((): IChipsItem[] => [...new Map((props.data.tagGroups ?? [])
+  .filter(group => group.type !== 'category')
   .flatMap(group => group.items.map(item => convertTagGroupItemToChips(group.type, item)))
   .map(chip => [`${chip.prefix}/${chip.value}`, chip])).values()]);
 
@@ -198,24 +220,19 @@ const categoriesChips = computed((): IChipsItem[] => props.data.categories && pr
 
 const categoriesTitles = computed<string[]>(() => props.data.categories && props.data.categories?.map(item => item.title?.replace(/\s+/g, '').toLowerCase() ?? ''));
 
-const filterTagChips = computed(() => {
-  if (categoriesTitles.value && categoriesTitles.value.length > 0) {
-    return tagChips.value.filter(tagItem => !categoriesTitles.value.includes(tagItem.title.replace(/\s+/g, '').toLowerCase()));
-  } else {
-    return tagChips.value;
-  }
-});
+const withoutCategoryTitles = (chips: IChipsItem[]) => (categoriesTitles.value?.length
+  ? chips.filter(chip => !categoriesTitles.value.includes(chip.title.replace(/\s+/g, '').toLowerCase()))
+  : chips);
 
-const recentSearches = computed(() => {
-  if (props.recent && typeof props.recent === 'object' && Object.keys(props.recent).length === 0) {
-    return [];
-  }
-  return props.recent?.map((item: string) => ({
-    value: item,
-    title: item,
-    prefix: 'search',
-  } as IChipsItem));
-});
+const filterTagChips = computed(() => withoutCategoryTitles(tagChips.value));
+
+const recentList = useRelatedPhrases(() => (Array.isArray(props.recent) ? props.recent : []),useRelatedSearchLimit('trendingLimit'));
+
+const recentSearches = computed(() => recentList.value.map(item => ({
+  value: item,
+  title: item,
+  prefix: 'search',
+} as IChipsItem)));
 
 const topChips = computed(() => {
   if (props.chips && props.chips.length > 0) {
@@ -225,7 +242,7 @@ const topChips = computed(() => {
       prefix: 'search',
     } as IChipsItem));
   } else if (tagGroupChips.value.length) {
-    return tagGroupChips.value;
+    return [...categoriesChips.value || [], ...withoutCategoryTitles(tagGroupChips.value)];
   } else if (categoriesChips.value || filterTagChips.value) {
     return [...categoriesChips.value || [], ...filterTagChips.value || []];
   }

package/components/view/videos.vue

@@ -30,6 +30,7 @@
     <GridVideos
       v-if="data && data.items && data.items?.length > 0"
       :items="data.items"
+      :webcams-query="webcamsQuery"
       :class="{'_loading': status === 'pending'}"
       class="view-videos__grid"
       id="anchor"
@@ -40,6 +41,13 @@
         <AdvNativeBottom v-if="featureFlags.AdsNativeEnabled"/>
       </template>
 
+      <UiExpandRow
+        v-if="relatedSearch && relatedSearch.length > 0"
+        :items="relatedSearch"
+        :pre-text="`${$t('related_searches')}: `"
+        class="view-videos__related-searches"
+      />
+
       <LazySectionSwiperCards
         v-if="dataModels && dataModels?.items && dataModels?.items.length > 0"
         :items="modelsRoundCards"
@@ -78,6 +86,7 @@
 
 <script setup lang="ts">
 import type {
+  IChipsItem,
   IModelCard,
   IModelFilter,
   INavLinkItem,
@@ -106,6 +115,10 @@ const props = defineProps<{
   /** Строка главных фильтров: группы категорий, приведённые `toQuickFilters`. Состояние
    *  живёт в общем `categories`, поэтому строка синхронна попапу фильтра и чипсам. */
   quickFilters?: IModelFilter[]
+  /** Чипсы поисковых фраз во второй строке грида, как на странице категории. */
+  relatedSearch?: IChipsItem[]
+  /** Выборка вебкамов сетки (`GridVideos`). */
+  webcamsQuery?: { category?: string, random?: boolean, list?: number } | false
 }>();
 
 const route = useRoute();
@@ -176,6 +189,12 @@ const modelsRoundCards = computed(() =>
   grid-column: 1 / -1;
 }
 
+.view-videos__related-searches {
+  grid-column: 1/-1;
+  grid-row: 2;
+  margin-block: 8px;
+}
+
 .view-videos__popular-models {
   grid-row: 4;
   grid-column: 1/-1;