itube-specs 0.0.1039 → 0.0.1040

package/DOCS/CONVENTIONS.md

@@ -16,15 +16,36 @@ namespace; filename must not repeat it.
 - BEM root class = kebab-case of the name: `<CardVideo>` → `.card-video`
 - `pathPrefix: true` mandatory — layers break component exports under `false` (nuxt/nuxt#30099)
 
-**App override:** an app defining the same name outranks the layer and wins auto-import; callers untouched.
-Don't fork a component when a prop expresses the difference.
-
-**Small difference → flag or prop in the layer, not an override.** One or two tweaks (hide a block, another
-link, another spacing), and anything another site may want too: add a prop, an `appConfig` key (default =
-current behaviour, the site sets it in its `config/site.config.ts`) or a feature flag here, plus a
-`SITE_UPDATES.md` entry. No copied page or component in an app slot for that — a fork goes stale with every
-layer release. Override only when the app's version genuinely differs throughout (e.g. a site's ad-aware
-`grid/videos.vue`). Sample: `appConfig.categoriesGrouped` instead of an app copy of `category/nav.vue`.
+## Extending from a site
+
+A site adds its own logic without copying layer code. Take the lowest rung that covers the difference; every
+new extension point ships with a `SITE_UPDATES.md` entry, its default = current behaviour.
+
+| Difference | Tool | Sample |
+|---|---|---|
+| A value: label, link, size, show/hide a block every site has | `appConfig` key (site sets it in `config/site.config.ts`) or a feature flag (env-dependent: ads, sections) | `categoriesGrouped`, `navOverrides`, `videoPage`, `gridWebcams` |
+| "Put something here" | **Component slot**: empty `*-slot.vue` next to its owner, rendered by the owner; the site ships a file at the same path | `view/video-after-related-slot.vue` → `<ViewVideoAfterRelatedSlot :data>`, `grid/videos-end-slot.vue` |
+| Insert **and** change inputs (props, own data) | **Wrapper**: same-name app component renders the layer one (`import Layer… from 'itube-specs/components/…'`) through its props and slots | rare: first check whether the input change is a feature every site may want — then it's a key (grids: `gridWebcams` instead of a wrapper fetching webcams) |
+| Behaviour inside a component (ad hooks, pause screen) | **Site hooks composable**: layer calls `use*SiteHooks()` returning `{}`; the site ships the same-name composable | `usePlayerSiteHooks()` → `IPlayerSiteHooks` |
+| Logic (which spot, how to compute) | Override the **helper** (`utils/*-helper.ts`), not the `.vue` — **extend, don't copy**: `class AdvertsHelper extends LayerAdvertsHelper` (`import { AdvertsHelper as LayerAdvertsHelper } from 'itube-specs/utils/adverts-helper'`), `static override` only what differs | `AdvertsHelper.getPrerollSpotType()`, a site's `PopunderHelper` keeps the layer's UTM part |
+| Markup differs throughout | Override the page; its logic comes from the layer's page composables | `useCategoryPageData()` + `useCategoryPage()` |
+| Nothing above fits | Full copy, header `copy of layer X.Y.Z, diff on update` | — target: none |
+
+Rules that keep the rungs working:
+
+- **Overridable helpers via auto-import only.** A layer file importing `../../utils/adverts-helper` locks out
+  the site's `utils/adverts-helper.ts` — that alone forced a fork of `player/core.vue`.
+- **Extended helpers:** what a subclass may reuse is `protected`, not `private`; return types stay compatible
+  (`Promise<void>`). The layer module of an extended helper is imported only by its site subclass — importing it
+  first elsewhere hits the auto-import cycle (layer helper → site helper → subclass → layer helper) and `extends`
+  sees `undefined`. In tests import the site class first.
+- **Component slots:** suffix `-slot`, file next to the component that renders it, empty in the layer. Its
+  props are a public contract — changing them is a `SITE_UPDATES.md` entry.
+- **Wrapper:** declare only the props it reads, the rest falls through `$attrs`; forward the caller's slots
+  before adding its own. Needed hook missing → add a prop/slot here, don't fork.
+- **Pages:** logic lives in `composables/page/use*Page.ts` — `use*PageData()` (fetches only, async, combinable
+  in `Promise.all`) + `use*Page(pageData, options)` (meta, h1, 404, breadcrumbs; sync, called after the `await`
+  so Nuxt context is intact). The page's `<script>` is the call plus page-only fetches.
 
 ## Markup
 

package/SITE_UPDATES.md

@@ -11,6 +11,71 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1040 — 2026-10-19
+
+- **Сайтам со своими `utils/adverts-helper.ts` / `utils/popunder-helper.ts` (videosection-redesign):** не копировать
+  класс слоя, а наследовать (`class AdvertsHelper extends LayerAdvertsHelper`, импорт слойного по пути
+  `itube-specs/utils/adverts-helper`) и переопределять (`static override`) только своё. Для этого в слое: UTM-часть
+  `PopunderHelper` (`utmParamsKeys`, `saveUtmParams`) стала `protected`, добавлен `getUtmSource()`; `AdvertsHelper`
+  возвращает `Promise<void>` вместо `Promise<undefined>`, а `getAntiAdblockDomain()` делает один запрос на все
+  параллельные вызовы (раньше баннеры, попандер и слайдер на старте запрашивали домен каждый сам). Свою копию
+  `getAntiAdblockDomain` / UTM-методов удалить. Образец — коммит videosection-redesign с этим изменением. Не
+  сделать — копии продолжат работать, но будут отставать от слоя. Остальным — ничего.
+
+- **Сайтам со своими страницами категории, поиска, канала, модели (videosection-redesign):** логика этих страниц
+  теперь в composable слоя (`composables/page/`), страницы слоя — шаблон плюс их вызов. Пара на страницу:
+  `use*PageData()` — запросы (async, можно в `Promise.all` со своими запросами страницы), `use*Page(pageData,
+  options)` — мета, h1 и 404, хлебные крошки, производные значения (синхронная, после `await`). Есть
+  `useCategoryPage*`, `useChannelPage*`, `useModelPage*` и `useSearchPage(relatedSearch)` (у поиска запросы выдачи
+  разные — только логика). Опции меты: `metaSort` — сортировка вместо `?sort`, `metaSecondText` — `{secondText}`.
+  В своей странице оставить разметку и свои блоки, скрипт — на эти composable (образец — коммит
+  videosection-redesign с этим изменением). Не сделать — ничего не сломается, но логика страницы останется копией.
+  Попутно: хлебные крошки категории, канала, модели и h1 теперь реактивны (раньше считались один раз при setup).
+
+- **Всем сайтам:** на страницах видео и плейлиста теперь показывается блок «Recent searches» (поисковые фразы под
+  похожими). Раньше страница всегда передавала туда пустой список: проверка `typeof relatedSearch === 'object'`
+  срабатывала на самом массиве. Делать ничего не надо; если блок на сайте не нужен — сказать, заведём ключ.
+- **Сайтам с форком `components/view/video.vue` (videosection-redesign):** состав страницы видео задаётся
+  `appConfig.videoPage` (через `config/site.config.ts`): `refererPhrases` — фразы, по которым пришли на ролик, над
+  заголовком; `relatedPagination`, `relatedModels` — пагинация похожих и карусель моделей; `webcamsBlock` — блок
+  Live Cams после похожих, `webcamInserts` — сколько моделей из хвоста его списка уходит во врезки похожих. Свои
+  блоки — в точки расширения: `components/view/video-after-player-slot.vue` (под плеером) и
+  `components/view/video-after-related-slot.vue` (после похожих и Live), в слое они пустые, сайт кладёт файлы с теми же
+  именами (компоненты-слоты — всегда с суффиксом `-slot`). После этого удалить форк `view/video.vue` (образец — коммит videosection-redesign с этим изменением).
+  Не сделать — форк продолжит работать, но будет отставать от слоя. Остальным — ничего, по умолчанию страница как
+  была.
+
+- **Сайтам с форками `components/grid/videos.vue` / `components/grid/models.vue` (videosection-redesign):** всё
+  сайтовое в сетках — без форка и без обёртки. `appConfig.gridWebcams` (через `config/site.config.ts`): `videos: {
+  afterRows, inserts }` — блок Live Cams после N-й строки карточек и врезки вебкам-тумб (хвост того же списка) в сетке
+  видео листинга; `models: { afterRows }` — блок в основной сетке моделей. `appConfig.cardTriggerClass` — класс
+  кликабельной части карточек (например, триггер попандера). Свои вставки в конец сеток — компоненты-слоты
+  `components/grid/videos-end-slot.vue` (`items`, `related`) и `components/grid/models-end-slot.vue` (`items`,
+  `footer`), в слое пустые. Новое общее: `GridInsert` (`:after-rows`) — полноширинная вставка после N-й строки
+  карточек при любом числе колонок; `useGridRowAfter` / `placeAfterCardRows` переехали в слой — свой
+  `composables/use-grid-row-after.ts` удалить (иначе перекроет слойный); `useWebcamsShare(reserve)` — один список на
+  блок Live Cams и врезки. После этого удалить форки сеток (образец — коммит videosection-redesign с этим
+  изменением). Не сделать — форки продолжат работать, но будут отставать от слоя. Остальным — ничего, по умолчанию
+  сетки как были.
+- **Сайтам с форком `components/player/core.vue` (videosection-redesign, hdsex-remaster):** всё сайтовое в плеере
+  теперь подключается без копии — композаблом `usePlayerSiteHooks()` (тип `IPlayerSiteHooks`): `rootClass` — класс
+  корня, `pauseScreen: { enabled, component }` — экран паузы (компонент получает `@close`, пересоздаётся на каждой
+  паузе), `onReady()` — на монтировании и на `ready` ядра. Сайт кладёт одноимённый композабл в свой `composables/`.
+  Спот преролла слой берёт из `AdvertsHelper.getPrerollSpotType()` (в слое — Primary), а сам `AdvertsHelper` и
+  `BannerHelper` — через автоимпорт, так что `utils/adverts-helper.ts` / `utils/banner-helper.ts` сайта теперь
+  доходят и до компонентов слоя. После этого удалить форк `player/core.vue` (образец — коммит videosection-redesign
+  с этим изменением). Не сделать — форк продолжит работать, но будет отставать от слоя. Сайтам со своим
+  `utils/adverts-helper.ts` без `getPrerollSpotType()` — добавить его, иначе преролл упадёт на вызове. Остальным —
+  ничего.
+
+- **Сайтам, где меню отличается от слоя (videosection-redesign):** главная навигация (шапка и бургер) теперь из
+  композабла слоя `useNavigationItems()`, правки — в `appConfig` (через `config/site.config.ts`):
+  `navOverrides` — правка пункта слоя по его `title` (`title` — другая подпись, `link` — адрес или адреса по
+  нишам, `featureFlag`), `navExtraItems` — свои пункты (`after` — за каким пунктом слоя встать). После этого
+  удалить проектные оверрайды `components/layout/nav.vue`, `components/layout/burger.vue` и свой композабл пунктов
+  меню (образец — коммит videosection-redesign с этим изменением). Не сделать — оверрайды продолжат работать, но
+  копия `burger.vue` будет отставать от слоя. Остальным сайтам — ничего, по умолчанию меню как было.
+
 ## 0.0.1036 — 2026-10-14
 
 - **Сайтам с `FeatureWebcamsEnabled`:** UI-ключи вебкам-блоков `webcams.*` (заголовки, счётчики онлайна, карточка,

package/components/adv/native-bottom.vue

@@ -12,7 +12,6 @@
 </template>
 
 <script setup lang="ts">
-import { BannerHelper } from '../../utils/banner-helper';
 import { AdBannerType, AdSpotType } from '../../runtime';
 </script>
 

package/components/adv/native-player.vue

@@ -12,7 +12,6 @@
 </template>
 
 <script setup lang="ts">
-import { BannerHelper } from '../../utils/banner-helper';
 import { AdBannerType, AdSpotType } from '../../runtime';
 </script>
 

package/components/adv/ntv.vue

@@ -8,7 +8,6 @@
 
 <script setup lang="ts">
 
-import { BannerHelper } from '../../utils/banner-helper';
 import { AdBannerType, AdSpotType } from '../../runtime';
 </script>
 

package/components/grid/insert.vue

@@ -0,0 +1,31 @@
+<!-- Полноширинная вставка в CSS-сетку карточек (`GridVideos`, `GridModels`): встаёт после N-й строки карточек
+при любом числе колонок (`useGridRowAfter`), пустая места не занимает. Класть прямым потомком сетки — через её слоты. -->
+<template>
+  <div
+    ref="root"
+    class="grid-insert"
+  >
+    <slot/>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  /** После какой строки карточек встать. */
+  afterRows: number
+}>();
+
+const root = ref<HTMLElement | null>(null);
+
+useGridRowAfter(root, () => props.afterRows);
+</script>
+
+<style lang="scss">
+.grid-insert {
+  grid-column: 1 / -1;
+}
+
+.grid-insert:empty {
+  display: none;
+}
+</style>

package/components/grid/models-end-slot.vue

@@ -0,0 +1,16 @@
+<!-- Точка расширения сетки моделей — в конце сетки, прямым потомком CSS-сетки (полноширинные вставки ставить через
+`GridInsert` или своим `grid-column: 1 / -1`). В слое пустая; сайт кладёт свой `components/grid/models-end-slot.vue`
+(реклама и т.п.) — он подменяет этот. -->
+<template>
+  <template v-if="false"/>
+</template>
+
+<script setup lang="ts">
+import type { IModelCard } from '../../types';
+
+defineProps<{
+  items: IModelCard[]
+  /** Сетка в футере страницы. */
+  footer?: boolean
+}>();
+</script>

package/components/grid/models.vue

@@ -1,4 +1,5 @@
-<!-- Сетка карточек моделей с ленивой гидрацией (первые 6 eager) -->
+<!-- Сетка карточек моделей с ленивой гидрацией (первые 6 eager). Блок Live Cams — по `appConfig.gridWebcams.models`;
+слот — полноширинные вставки (`GridInsert`); в конце — `GridModelsEndSlot` (пустой; сайт кладёт свой). -->
 <template>
   <div
     :class="{'--footer': footer}"
@@ -10,19 +11,37 @@
       :card="item"
       :loading="index > 5 ? 'lazy' : 'eager'"
       :priority="priority && index === 0"
+      :class="cardTriggerClass"
       class="grid-models__item"
     />
+    <GridInsert
+      v-if="webcams"
+      :after-rows="webcams.afterRows"
+    >
+      <LazyWebcamMain hydrate-on-visible/>
+    </GridInsert>
+    <slot/>
+    <GridModelsEndSlot
+      :items="items"
+      :footer="footer"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import type { IModelCard } from '../../types';
 
-defineProps<{
+const props = defineProps<{
   items: IModelCard[]
   footer?: boolean
   priority?: boolean
 }>();
+
+const appConfig = useAppConfig();
+const cardTriggerClass = appConfig.cardTriggerClass || undefined;
+
+/** Блок Live Cams — только в основной сетке страницы (`priority`), не в футере и не в сетках по буквам. */
+const webcams = !props.footer && props.priority ? appConfig.gridWebcams?.models : null;
 </script>
 
 <style lang="scss">

package/components/grid/videos-end-slot.vue

@@ -0,0 +1,16 @@
+<!-- Точка расширения сетки видео — в конце сетки, прямым потомком CSS-сетки (полноширинные вставки ставить через
+`GridInsert` или своим `grid-column: 1 / -1`). В слое пустая; сайт кладёт свой `components/grid/videos-end-slot.vue`
+(реклама в листингах и т.п.) — он подменяет этот. -->
+<template>
+  <template v-if="false"/>
+</template>
+
+<script setup lang="ts">
+import type { IVideoCard } from '../../types';
+
+defineProps<{
+  items: IVideoCard[]
+  /** Сетка похожих на странице видео. */
+  related?: boolean
+}>();
+</script>

package/components/grid/videos.vue

@@ -3,7 +3,8 @@
 Врезки: если передать `inserts` (вебкам-тумбы), сетка расставит их между
 карточками — позиции считает `webcamInsertPositions` по правилам боевого движка.
 Тумба занимает обычную ячейку сетки и попадает в тот же уровень гидрации, что и
-карточка на её месте. -->
+карточка на её месте. Без `inserts` в листинге врезки и блок Live Cams ставит сама по `appConfig.gridWebcams.videos`.
+В конце сетки — `GridVideosEndSlot` (пустой; сайт кладёт свой: реклама и т.п.). -->
 <template>
   <div
     :class="[
@@ -32,10 +33,20 @@
         :top-chips="topChips"
         :playlist-id="playlistId"
         :playlist="playlist"
+        :link-class="cardTriggerClass"
         class="grid-videos__card"
       />
     </template>
     <slot/>
+    <GridInsert
+      v-if="webcams"
+      :after-rows="webcams.afterRows"
+    >
+      <LazyWebcamMain
+        :reserve-tail="webcams.inserts"
+        hydrate-on-visible
+      />
+    </GridInsert>
     <template
       v-for="cell in idleCells"
       :key="`idle-${cell.key}`"
@@ -53,6 +64,7 @@
         :top-chips="topChips"
         :playlist-id="playlistId"
         :playlist="playlist"
+        :link-class="cardTriggerClass"
         class="grid-videos__card"
         loading="lazy"
         hydrate-on-idle
@@ -76,11 +88,16 @@
         :playlist-id="playlistId"
         :playlist="playlist"
         :hydrate-on-visible="HYDRATE_MARGIN"
+        :link-class="cardTriggerClass"
         class="grid-videos__card"
         loading="lazy"
       />
     </template>
     <slot name="grid-end"/>
+    <GridVideosEndSlot
+      :items="items"
+      :related="related"
+    />
   </div>
 </template>
 
@@ -132,15 +149,23 @@ function onInsertView(cell: IGridCell, element: HTMLElement) {
   if (cell.webcam) emit('model-view', { model: cell.webcam, index: cell.insertIndex, element });
 }
 
+const appConfig = useAppConfig();
+const cardTriggerClass = appConfig.cardTriggerClass || undefined;
+
+/** Блок Live Cams и свои врезки — у листингов (похожие и плейлист без них, страница видео передаёт врезки сама). */
+const webcams = !props.inserts && !props.related && !props.playlist ? appConfig.gridWebcams?.videos : null;
+const ownInserts = webcams ? await useWebcamsShare(webcams.inserts) : null;
+const inserts = computed(() => props.inserts || ownInserts?.value || []);
+
 const isMobile = useState<boolean>('isMobile');
 const eagerCount = computed(() => isMobile.value ? 4 : 12);
 
 const cells = computed<IGridCell[]>(() => {
-  const inserts = props.inserts || [];
+  const models = inserts.value;
   const positions = webcamInsertPositions(
     props.insertSeed || props.items[0]?.guid || '',
     props.items.length,
-    inserts.length,
+    models.length,
   );
 
   const result: IGridCell[] = [];
@@ -148,7 +173,7 @@ const cells = computed<IGridCell[]>(() => {
 
   props.items.forEach((video, index) => {
     if (positions[inserted] === index) {
-      const model = inserts[inserted];
+      const model = models[inserted];
 
       result.push({
         key: `webcam-${model.id || model.username}`,

package/components/layout/burger.vue

@@ -89,13 +89,11 @@ import type { IProfileData } from '../../types';
 import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 import { AuthorizationApiService } from '../../services/api/authorization.service';
 
-import { getNavigationItems } from '../../lib';
-
 const { t } = useI18n();
 const { generateLink } = useGenerateLink();
-const navigationItems = getNavigationItems();
-const topItems = navigationItems.filter(item => item.top);
-const restItems = navigationItems.filter(item => !item.top);
+const navigationItems = useNavigationItems();
+const topItems = computed(() => navigationItems.value.filter(item => item.top));
+const restItems = computed(() => navigationItems.value.filter(item => !item.top));
 
 const openedChilds = ref<string | null>(null);
 

package/components/layout/nav.vue

@@ -53,14 +53,13 @@
 </template>
 
 <script setup lang="ts">
-import { getNavigationItems } from '../../lib';
 import type { INavigationItems } from '../../types';
 
 defineProps<{
   items?: INavigationItems[];
 }>();
 
-const navigationItems = getNavigationItems();
+const navigationItems = useNavigationItems();
 
 const { generateLink } = useGenerateLink();
 const route = useRoute();

package/components/player/core.vue

@@ -9,6 +9,7 @@
     :source="source"
     :options="options"
     :ad-config="loadAdConfig"
+    :class="siteHooks.rootClass"
     class="player-core"
     lazy
     load-on="placeholder"
@@ -16,7 +17,20 @@
     @advancerequest="onAdvanceRequest"
     @sourcechange="onSourceChange"
     @menurequest="onMenuRequest"
-  />
+    @pause="onPause"
+    @ready="siteHooks.onReady?.()"
+  >
+    <template
+      v-if="siteHooks.pauseScreen"
+      #pauseScreen="{ close }"
+    >
+      <component
+        :is="siteHooks.pauseScreen.component"
+        :key="`pause-screen-${pauseCount}`"
+        @close="close"
+      />
+    </template>
+  </ITubePlayer>
 
   <!-- Внешнее меню плеера в нашем ui-popup (только мобила — menus: 'external-mobile'). -->
   <PlayerMenu
@@ -29,8 +43,7 @@
 import { ITubePlayer } from 'itube-modern-player/vue';
 
 import type { Player, PlayerOptions, VideoSource, LocaleCode, AdsOptions, PreviewMetaItem, SceneGroup, MenuRequestPayload } from 'itube-modern-player';
-import { AdvertsHelper } from '../../utils/adverts-helper';
-import { AdSpotType, ThumbSize  } from '../../runtime';
+import { ThumbSize } from '../../runtime';
 import type { IVideoData, IVideoCard } from '../../types';
 import playIcon from '../../assets/icons/player/play.svg?raw';
 import fullscreenIcon from '../../assets/icons/player/fullscreen.svg?raw';
@@ -65,6 +78,18 @@ const emit = defineEmits<{
 
 const { t, n, locale } = useI18n();
 
+const siteHooks = usePlayerSiteHooks();
+const isPauseScreen = computed(() => !!siteHooks.pauseScreen?.enabled.value);
+
+// Каждая пауза — новый экран: счётчик в `key` пересоздаёт его содержимое.
+const pauseCount = ref(0);
+
+function onPause() {
+  if (isPauseScreen.value) pauseCount.value += 1;
+}
+
+onMounted(() => siteHooks.onReady?.());
+
 const playerRef = ref<InstanceType<typeof ITubePlayer> & { player: Player | null }>();
 
 // Внешнее меню (menus: 'external-mobile'): по нажатию меню-кнопки плеер эмитит модель,
@@ -286,7 +311,7 @@ const options = computed<Omit<PlayerOptions, 'source'>>(() => ({
   playlist: {
     externalAdvance: true,
   },
-  pauseScreen: false,
+  pauseScreen: isPauseScreen.value,
   language: playerLanguage.value,
   // Десктоп — нативные попапы плеера; мобила (≤767px) — эмитит menurequest, рисуем сами.
   menus: 'external-mobile',
@@ -313,7 +338,7 @@ const options = computed<Omit<PlayerOptions, 'source'>>(() => ({
 // с готовым adConfig — нам не нужно синхронизировать VAST-запрос с инициализацией.
 async function loadAdConfig(): Promise<AdsOptions | undefined> {
   try {
-    const vastTag = await AdvertsHelper.getPrerollVastLink(AdSpotType.Primary);
+    const vastTag = await AdvertsHelper.getPrerollVastLink(AdvertsHelper.getPrerollSpotType());
     if (vastTag && vastTag.trim() !== '') {
       return { adList: [{ roll: 'preRoll', vastTag }], skipDelay: 5 };
     }

package/components/view/video-after-player-slot.vue

@@ -0,0 +1,13 @@
+<!-- Точка расширения страницы видео — сразу под плеером. В слое пустая; сайт кладёт свой
+`components/view/video-after-player-slot.vue` (реклама, партнёрские блоки) — он подменяет этот. -->
+<template>
+  <template v-if="false"/>
+</template>
+
+<script setup lang="ts">
+import type { IVideoData } from '../../types';
+
+defineProps<{
+  data: IVideoData
+}>();
+</script>

package/components/view/video-after-related-slot.vue

@@ -0,0 +1,13 @@
+<!-- Точка расширения страницы видео — после похожих (и блока Live Cams, если он включён), перед поисковыми
+фразами. В слое пустая; сайт кладёт свой `components/view/video-after-related-slot.vue` — он подменяет этот. -->
+<template>
+  <template v-if="false"/>
+</template>
+
+<script setup lang="ts">
+import type { IVideoData } from '../../types';
+
+defineProps<{
+  data: IVideoData
+}>();
+</script>

package/components/view/video.vue

@@ -1,6 +1,12 @@
 <!-- Страница одного видео: плеер, заголовок с моделями/тегами, похожие -->
 <template>
   <div class="view-video _page _container">
+    <UiExpandRow
+      v-if="refererChips.length"
+      :items="refererChips"
+      class="_mb-16"
+    />
+
     <header class="view-video__header">
       <h1 class="view-video__title">
         <span class="_truncate">{{ data.title }}</span>
@@ -43,6 +49,8 @@
       <slot/>
     </PlayerMain>
 
+    <ViewVideoAfterPlayerSlot :data="data"/>
+
     <section
       v-if="related"
       :class="{'_loading': status === 'pending'}"
@@ -77,7 +85,7 @@
     </section>
 
     <LazyUiPagination
-      v-if="total"
+      v-if="total && videoPage.relatedPagination"
       arrow-icon
       :key="`pagination-${total}`"
       :total="total"
@@ -87,13 +95,21 @@
     />
 
     <LazySectionSwiperCards
-      v-if="models"
+      v-if="models && videoPage.relatedModels"
       :items="modelsRoundCards"
       :title="$t('related_models')"
       class="view-video__popular-models"
       hydrate-on-visible
     />
 
+    <WebcamMain
+      v-if="videoPage.webcamsBlock"
+      :reserve-tail="videoPage.webcamInserts"
+      class="_mt-24"
+    />
+
+    <ViewVideoAfterRelatedSlot :data="data"/>
+
     <section
       v-if="recentSearches && recentSearches.length > 0"
       class="view-video__referer"
@@ -111,6 +127,7 @@
 <script setup lang="ts">
 import type { IChipsItem, IModelCard, IStripcashModel, IVideoCard, IVideoData, PaginatedResponse } from '../../types';
 import { convertModelToRoundCard } from '../../runtime';
+import { VideosApiService } from '../../services/api/videos.service';
 import type { AsyncDataRequestStatus } from '#app';
 
 const featureFlags = useRuntimeConfig().public.featureFlags;
@@ -136,10 +153,22 @@ const props = defineProps<{
 
 const { t } = useI18n();
 
+const videoPage = useAppConfig().videoPage;
+
 // врезки вебкам-тумб в сетку похожих — там же, где они стоят на боевом движке.
-// Запрос клиентский: сетка ниже первого экрана, и рендер страницы видео не должен
-// ждать провайдера. Без флага `FeatureWebcamsEnabled` запроса нет вовсе
-const { items: webcamInserts } = await useFetchWebcams({ clientOnly: true });
+// Без блока Live Cams запрос клиентский: сетка ниже первого экрана, и рендер страницы видео не должен
+// ждать провайдера. С блоком список один на двоих (`useWebcamsShare`).
+// Без флага `FeatureWebcamsEnabled` запроса нет вовсе
+const webcamInserts = 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 modelsRoundCards = computed(() =>
     props.models?.map(convertModelToRoundCard) || []