itube-specs 0.0.1055 → 0.0.1057

package/SITE_UPDATES.md

@@ -11,6 +11,49 @@
 коммиты до бампа); `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`) теперь

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,14 +17,53 @@ export default defineAppConfig({
   /** Есть ли у сайта сгруппированный вид категорий (`/categories` — группы, `/categories/all` — A–Z).
    *  `false` — `/categories` сам список A–Z: `CategoryNav` без табов Grouped / A-Z, «All» ведёт на `/categories`. */
   categoriesGrouped: true,
-  /** Сколько связанных поисковых фраз (по убыванию веса) показывать на странице категории, `null` — все, что пришли. */
-  categoryRelatedSearchLimit: null as number | null,
+  /** Порядок выдачи без `?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`), узнаются и без карты;
@@ -33,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

@@ -1,14 +1,16 @@
 @use 'vars' as *;
 
-// Состояние загрузки блока: заблюренная подложка со спиннером поверх содержимого (::before/::after).
+// Состояние загрузки блока: заблюренная и приглушённая подложка со спиннером поверх содержимого (::before/::after).
+// Цвета — var(--loading-bg / --loading-icon, токен темы): тёмная подложка (surface overlay) или блок перекрывают их сами.
 ._loading {
   position: relative;
 
   &::before {
     position: absolute;
-    inset: 0;
+    inset: -$blur-loading-spill;
     z-index: $z-index-loader;
-    backdrop-filter: blur(4px);
+    background-color: var(--loading-bg, #{$loading-bg});
+    backdrop-filter: blur($blur-loading);
     content: '';
   }
 
@@ -21,7 +23,7 @@
     display: block;
     width: var(--size, 64px);
     height: var(--size, 64px);
-    background-color: $loading-icon;
+    background-color: var(--loading-icon, #{$loading-icon});
     content: '';
     mask-position: center;
     mask-size: contain;

package/assets/scss/mixins/_surface.scss

@@ -55,7 +55,9 @@ $surface-roles: (
   accent: (--select-count-bg--active,),
   accent-text: (--select-count-text--active,),
   accent-bg-subtle: (--select-bg--active,),
-  accent-border: (--select-border--active,)
+  accent-border: (--select-border--active,),
+  loading-bg: (--loading-bg,),
+  loading-icon: (--loading-icon,)
 );
 
 @mixin surface($name) {

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

@@ -18,6 +18,8 @@ $link-text: $color-white;
 
 // ─── Loading ───
 $loading-icon: $color-white;
+$loading-bg: transparent;
+$video-preview-loading-bg: transparent;
 
 // ─── Cards (shared) ───
 $card-ring-shadow--hover: none;

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

@@ -29,6 +29,8 @@ $link-text: $color-indigo-600;
 
 // ─── Loading ───
 $loading-icon: $color-indigo-600;
+$loading-bg: $color-white-75;
+$video-preview-loading-bg: transparent; // поверх постера не отбеливаем — иначе карточка вспыхивает на ховере
 
 // ─── Cards (shared) ───
 $card-ring-shadow--hover: 0 0 0 2px $main-bg, 0 0 0 3px $color-gray-400;
@@ -140,6 +142,8 @@ $surfaces: (
     accent-text: $color-white,
     accent-bg-subtle: color-mix(in oklch, #{$color-indigo-500} 10%, transparent),
     accent-border: $color-indigo-500,
+    loading-bg: $mono-black-50,
+    loading-icon: $color-white,
   ),
 );
 

package/assets/scss/vars/_vars.scss

@@ -14,3 +14,8 @@ $radius-full: 9999px;
 // ─── Blur ───
 $blur-sm: 8px;
 $blur-md: 12px;
+$blur-loading: 4px;
+
+// Запас подложки лоадера за край блока: backdrop-filter тянет крайние пиксели до границы области,
+// и без запаса скругления крайних карточек под блюром выглядят прямыми.
+$blur-loading-spill: $blur-loading * 3;

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/ui/video-preview.vue

@@ -42,6 +42,7 @@ onMounted(() => {
 <style lang="scss">
 .ui-video-preview {
   --size: 40px;
+  --loading-bg: #{$video-preview-loading-bg};
 
   position: absolute;
   inset: 0;

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) || []
@@ -205,16 +226,13 @@ const withoutCategoryTitles = (chips: IChipsItem[]) => (categoriesTitles.value?.
 
 const filterTagChips = computed(() => withoutCategoryTitles(tagChips.value));
 
-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 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) {

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;

package/components/webcam/main.vue

@@ -15,7 +15,7 @@
     v-if="isEnabled && visibleItems.length"
     class="webcam-main"
   >
-    <WebcamHeader :counts="counts"/>
+    <WebcamHeader :counts="hideCounts ? NO_COUNTS : counts"/>
 
     <GridWebcams
       :items="visibleItems"
@@ -42,10 +42,27 @@ const props = withDefaults(defineProps<{
    * По умолчанию 0 — блок ведёт себя как раньше.
    */
   reserveTail?: number
+  /**
+   * Размер общего списка страницы (раскладка videosection.com, `gridWebcams.legacy`): блок просит у провайдера `list` моделей и берёт из них
+   * `limit` начиная с `offset`. Задан — `reserveTail` не нужен; ключ запроса тот же, что у врезок и других блоков с
+   * теми же `list` / `category` / `random` / `id`, поэтому запрос один.
+   */
+  list?: number
+  offset?: number
+  /** `use_random` провайдера (по умолчанию да). */
+  random?: boolean
+  /** Id ролика — провайдер подбирает моделей под ролик. */
+  id?: string
+  /** Без счётчиков онлайна в шапке (мини-блок videosection.com). */
+  hideCounts?: boolean
 }>(), {
   reserveTail: 0,
+  offset: 0,
+  random: true,
 });
 
+const NO_COUNTS = { total: 0, byLanguages: {} };
+
 /**
  * Клики и показы тумб блок отдаёт наружу: индексы он знает, а вот куда их
  * отправлять — дело сайта (у статистики свой контекст страницы и устройства).
@@ -60,14 +77,16 @@ const webcamsConfig = computed(() => (useRuntimeConfig().public.webcamsConfig ||
 const blockLimit = computed(() => props.limit || webcamsConfig.value.limit || WEBCAMS_DEFAULTS.limit);
 
 const { items, counts, isEnabled } = await useFetchWebcams({
-  limit: blockLimit.value + props.reserveTail,
+  limit: props.list || blockLimit.value + props.reserveTail,
   category: props.category,
+  random: props.random,
+  id: props.id,
   // тумбы блока висят на странице долго — перепроверяем, кто ещё в эфире
   keepAlive: true,
 });
 
 /** Хвост списка отдан странице (врезки в сетку) — блок берёт только свою голову. */
-const blockItems = computed(() => items.value.slice(0, blockLimit.value));
+const blockItems = computed(() => items.value.slice(props.offset, props.offset + blockLimit.value));
 
 /**
  * Колонок в сетке столько же, сколько в основном гриде сайта на этом