itube-specs 0.0.1052 → 0.0.1054

package/SITE_UPDATES.md

@@ -11,6 +11,36 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1054 — 2026-10-28
+
+- **Сайтам со своей темой (hdsex-remaster):** в `_theme.scss` добавить токены тегов в раскрытом описании видео —
+  `$video-info-tags-title: $color-zinc-500; $video-info-tag-text: $color-zinc-300; $video-info-tag-text--hover:
+  $color-white; $video-info-tag-bg: $color-zinc-800; $video-info-tag-bg--hover: $color-zinc-700;` (светлая тема слоя —
+  серая шкала). Не сделать — сборка упадёт на неизвестном токене.
+- **Всем — к сведению:** описание видео (`PlayerInterface`) по новому макету: в раскрытом виде под текстом — группы
+  (`IVideoData.tagGroups`), кнопка раскрытия стоит в нижней строке блока (свёрнуто — на второй строке описания,
+  раскрыто — на последней строке групп). Ручка видео переходит на v2: в `tags` — узлы `IVideoTagGroup`
+  (`type: 'tag' | 'category' | 'search'`, `items: IVideoTagGroupItem[]`), ссылка элемента строится по типу узла
+  (`convertTagGroupItemToChips`); строка над плеером — склейка элементов всех групп. Пока бекенд v2 не готов, BFF ходит
+  в v1 и отдаёт одну статичную заглушку групп из категорий сайта (и lorem-описание, если своего нет) —
+  `server/utils/video-tag-groups-mock.ts`, уберём, когда группы начнут приходить. Делать ничего не надо.
+- **Всем — к сведению:** кружок канала на тумбе видео и в листинге каналов — 44px (было 32). Делать ничего не надо.
+
+## 0.0.1053 — 2026-10-26
+
+- **Всем — к сведению:** нативка в конце сеток листингов и похожих (`AdvNativeBottom` в `view/video`, `view/videos`,
+  `view/model-videos`, страницах категории, канала, поиска) больше не ленивая. Контейнер приезжает в серверной
+  разметке, и сеть заполняет его до гидрации, а ленивая гидрация пересобирала уже заполненный iframe — креатив
+  терялся, слот оставался пустым (найдено на hdsex-remaster). Делать ничего не надо.
+- **Сайтам со своими сортировками на страницах на page-composables:** у `useCategoryPage`, `useChannelPage`,
+  `useModelPage` новая опция `sortOptions` (по умолчанию `sortItemsDefault`) — по ней ключи меты и проверка `?sort`.
+  Без неё свои значения `?sort` такой страницы — 404. Образец — коммит hdsex-remaster с этим изменением.
+- **Сайтам с частотным капом преролла (hdsex-remaster):** в `usePlayerSiteHooks()` новый хук `onAdStart()` — старт
+  рекламы в плеере (например, поставить куку капа). Остальным — ничего.
+- **Сайтам с боковой колонкой моделей у плеера (hdsex-remaster):** `appConfig.videoPage.hideAsideModelChips: true` —
+  с 1024px не дублировать чипсой над плеером модель, у которой есть блок в колонке. По умолчанию `false`, ничего не
+  меняется.
+
 ## 0.0.1052 — 2026-10-22
 
 - **Всем — к сведению:** мусорные адреса листингов теперь 404. `?page` не натуральное число (`0`, `-1`, `abc`, `01`) —

package/app.config.ts

@@ -39,6 +39,8 @@ export default defineAppConfig({
     webcamsBlock: false,
     /** Сколько моделей из хвоста списка уходит во врезки похожих, когда блок Live Cams включён. */
     webcamInserts: 8,
+    /** С 1024px прятать чипсы моделей над плеером, у которых есть блок в боковой колонке (не дублировать ссылку). */
+    hideAsideModelChips: false,
     /** Мета ролика как на старых движках: description — до трёх фраз перехода (недостающие — из тегов), без них —
      *  категории, склейка ключами `meta.videos-slug.tags_and` / `tags_tail`; в title доступен `{thirdText}` — название
      *  в Title Case. Выключено — description из описания ролика. */

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

@@ -241,6 +241,11 @@ $video-info-item-text: $color-zinc-500-70;
 $video-info-handler-text: $color-zinc-500;
 $video-info-handler-text--hover: $color-white;
 $video-info-description-text: $color-zinc-400;
+$video-info-tags-title: $color-zinc-500;
+$video-info-tag-text: $color-zinc-300;
+$video-info-tag-text--hover: $color-white;
+$video-info-tag-bg: $color-zinc-800;
+$video-info-tag-bg--hover: $color-zinc-700;
 
 // ─── Video interface ───
 $video-interface-button-bg: $color-zinc-800;

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

@@ -297,6 +297,11 @@ $video-info-item-text: $color-gray-400;
 $video-info-handler-text: $color-gray-400;
 $video-info-handler-text--hover: $color-gray-900;
 $video-info-description-text: $color-gray-700;
+$video-info-tags-title: $color-gray-500;
+$video-info-tag-text: $color-gray-700;
+$video-info-tag-text--hover: $color-gray-950;
+$video-info-tag-bg: $color-gray-100;
+$video-info-tag-bg--hover: $color-gray-200;
 
 // ─── Video interface ───
 $video-interface-button-bg: $color-slate-750;

package/components/card/channel.vue

@@ -30,8 +30,8 @@
         :src="card.avatarUrl"
         :alt="card.name"
         class="card-channel__logo _from-xs"
-        width="32"
-        height="32"
+        width="44"
+        height="44"
       >
       <span
         v-else
@@ -157,7 +157,7 @@ const infoItems = computed<InfoItem[]>(() => [
 .card-channel__logo.--placeholder {
   @include font-sm;
 
-  $size: 32px;
+  $size: 44px;
 
   width: $size;
   height: $size;

package/components/card/video/index.vue

@@ -79,9 +79,9 @@
           :src="currentAvatar"
           :alt="card.channelName"
           class="card-video__channel-logo"
-          width="32"
-          height="32"
-          sizes="32px"
+          width="44"
+          height="44"
+          sizes="44px"
           @error="onAvatarError"
         />
         <span
@@ -349,13 +349,13 @@ $dropdown-column: 18px;
 
   @include from-cq($layout-breakpoint) {
     column-gap: 12px;
-    grid-template-columns: 36px minmax(0, 1fr) $dropdown-column;
+    grid-template-columns: 44px minmax(0, 1fr) $dropdown-column;
   }
 }
 
 .--avatar .card-video__wrapper {
   column-gap: 12px;
-  grid-template-columns: 36px minmax(0, 1fr) $dropdown-column;
+  grid-template-columns: 44px minmax(0, 1fr) $dropdown-column;
 }
 
 .--avatar .card-video__title {
@@ -469,7 +469,7 @@ $dropdown-column: 18px;
   border-radius: 50%;
 }
 
-/* Кружок раскидан на обе строки: его 36px набираются заголовком плюс плашками, иначе под
+/* Кружок раскидан на обе строки: его 44px набираются заголовком плюс плашками, иначе под
    однострочным заголовком остаётся пустой хвост высотой в остаток кружка */
 .card-video__logo-wrapper {
   grid-row: 1/3;
@@ -521,8 +521,8 @@ $dropdown-column: 18px;
 .card-video__user {
   @include font-xs;
 
-  width: 36px;
-  height: 36px;
+  width: 44px;
+  height: 44px;
   display: grid;
   place-content: center;
   font-weight: 700;

package/components/player/core.vue

@@ -14,6 +14,7 @@
     lazy
     load-on="placeholder"
     @ended="emit('end')"
+    @adstart="siteHooks.onAdStart?.()"
     @advancerequest="onAdvanceRequest"
     @sourcechange="onSourceChange"
     @menurequest="onMenuRequest"

package/components/player/interface.vue

@@ -64,19 +64,44 @@
       </div>
     </div>
     <div
+      v-if="data.description"
       :class="{'--show': showDescription}"
       class="player-interface__description"
     >
-      <p
-        v-if="data.description"
-        ref="descriptionTextRef"
-        class="player-interface__description-text _truncate"
-      >{{
-        data.description
-      }}
-      </p>
+      <div class="player-interface__description-body">
+        <p
+          ref="descriptionTextRef"
+          class="player-interface__description-text _truncate"
+        >{{
+          data.description
+        }}
+        </p>
+        <!-- Группы (контракт видео v2) — в раскрытом описании. В свёрнутом они скрыты стилями, но остаются в разметке:
+        ссылки читает краулер. -->
+        <dl
+          v-if="tagGroups.length"
+          class="player-interface__tags"
+        >
+          <div
+            v-for="group in tagGroups"
+            :key="group.name || group.title"
+            class="player-interface__tags-group"
+          >
+            <dt class="player-interface__tags-title">{{ group.title }}</dt>
+            <dd class="player-interface__tags-list">
+              <UiChips
+                v-for="item in group.items"
+                :key="item.name"
+                :item="convertTagGroupItemToChips(group.type, item)"
+                is-link
+                not-capitalize
+              />
+            </dd>
+          </div>
+        </dl>
+      </div>
       <button
-        v-if="data.description && isDescriptionOverflowing"
+        v-if="isDescriptionOverflowing || tagGroups.length"
         :title="descriptionButtonText"
         type="button"
         class="player-interface__description-handler"
@@ -100,6 +125,7 @@
 
 <script setup lang="ts">
 import type { IVideoData } from '../../types';
+import { convertTagGroupItemToChips } from '../../runtime';
 import { AuthorizationApiService } from '../../services/api/authorization.service';
 
 const props = defineProps<{
@@ -113,6 +139,8 @@ const showDescription = ref(false);
 const descriptionTextRef = ref<HTMLParagraphElement>();
 const isDescriptionOverflowing = ref(false);
 
+const tagGroups = computed(() => props.data.tagGroups || []);
+
 const descriptionButtonText = computed(() => showDescription.value ? t('hide_description') : t('show_description'));
 
 function checkDescriptionOverflow() {
@@ -272,15 +300,19 @@ function onAddPlaylistClick() {
 }
 
 .player-interface__description {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: end;
-  column-gap: 12px;
+  @include font-sm;
+
+  position: relative;
 }
 
+/* Кнопка — поверх блока в правом нижнем углу, как в макете: в свёрнутом стоит на второй строке описания (высота —
+   строка текста), в раскрытом — на последней строке тегов (высота — чипса), текст и теги при этом во всю ширину. */
 .player-interface__description-handler {
   @include font-sm;
 
+  position: absolute;
+  right: 0;
+  bottom: 0;
   display: flex;
   align-items: center;
   height: 1.625em;
@@ -303,15 +335,87 @@ function onAddPlaylistClick() {
 
   --line-clamp: 2;
 
+  padding-right: 28px;
   line-height: 1.625;
   color: $video-info-description-text;
 }
 
 .player-interface__description.--show .player-interface__description-text {
   --line-clamp: auto;
+
+  padding-right: 0;
 }
 
 .player-interface__description.--show .player-interface__description-icon  {
   transform: rotate(180deg);
 }
+
+.player-interface__description.--show:has(.player-interface__tags) .player-interface__description-handler {
+  height: 36px;
+}
+
+.player-interface__tags {
+  display: none;
+  margin: 20px 0 0;
+}
+
+.player-interface__description.--show .player-interface__tags {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  @include from-br(sm) {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 8px 24px;
+  }
+}
+
+.player-interface__tags-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  @include from-br(sm) {
+    display: contents;
+  }
+}
+
+.player-interface__tags-title {
+  @include font-sm;
+
+  color: $video-info-tags-title;
+
+  @include from-br(sm) {
+    display: flex;
+    align-items: center;
+    height: 36px;
+  }
+}
+
+.player-interface__tags-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0;
+}
+
+.player-interface__tags .ui-chips {
+  @include font-2xs;
+
+  height: 36px;
+  padding-inline: 12px;
+  color: $video-info-tag-text;
+  background-color: $video-info-tag-bg;
+  border-radius: $radius-md;
+
+  @include from-br(sm) {
+    @include font-sm;
+  }
+
+  @include hover(color, background-color) {
+    color: $video-info-tag-text--hover;
+    background-color: $video-info-tag-bg--hover;
+  }
+}
 </style>

package/components/view/model-videos.vue

@@ -38,10 +38,8 @@
       priority
     >
       <template #grid-end>
-        <LazyAdvNativeBottom
-          v-if="featureFlags.AdsNativeEnabled"
-          hydrate-on-visible
-        />
+        <!-- не ленивая: ленивая гидрация пересобирала заполненный сетью iframe, креатив терялся -->
+        <AdvNativeBottom v-if="featureFlags.AdsNativeEnabled"/>
       </template>
     </GridVideos>
     <div

package/components/view/video.vue

@@ -29,6 +29,7 @@
                 v-for="(model, index) in data.models"
                 :key="index"
                 :item="getModelChips(model)"
+                :class="{'view-video__model-chips': hasAsideBlock(model.title)}"
                 is-link
               />
             </template>
@@ -75,11 +76,10 @@
           />
         </template>
 
+        <!-- Без ленивой гидрации: контейнер приезжает в серверной разметке и сеть заполняет его до гидрации,
+        а ленивая гидрация пересобирала уже заполненный iframe — креатив терялся, слот оставался пустым. -->
         <template #grid-end>
-          <LazyAdvNativeBottom
-            v-if="featureFlags.AdsNativeEnabled"
-            hydrate-on-visible
-          />
+          <AdvNativeBottom v-if="featureFlags.AdsNativeEnabled"/>
         </template>
       </LazyGridVideos>
     </section>
@@ -126,7 +126,7 @@
 
 <script setup lang="ts">
 import type { IChipsItem, IModelCard, IStripcashModel, IVideoCard, IVideoData, PaginatedResponse } from '../../types';
-import { convertModelToRoundCard } from '../../runtime';
+import { convertModelToRoundCard, convertString, convertTagGroupItemToChips } from '../../runtime';
 import { VideosApiService } from '../../services/api/videos.service';
 import type { AsyncDataRequestStatus } from '#app';
 
@@ -181,11 +181,12 @@ const emit = defineEmits<{
   (eventName: 'model-view', payload: { model: IStripcashModel, index: number, element: HTMLElement }): void
 }>();
 
-const tagChips = computed((): IChipsItem[] => props.data.tags?.map((item) => ({
-  title: item,
-  value: item,
-  prefix: 'tag',
-})) ?? []);
+const tagChips = computed((): IChipsItem[] => props.data.tags?.map(item => ({ title: item, value: item, prefix: 'tag' })) ?? []);
+
+// v2: элементы всех групп одной строкой (без повторов) — категории ролика уже в них, отдельные не добавляем
+const tagGroupChips = computed((): IChipsItem[] => [...new Map((props.data.tagGroups ?? [])
+  .flatMap(group => group.items.map(item => convertTagGroupItemToChips(group.type, item)))
+  .map(chip => [`${chip.prefix}/${chip.value}`, chip])).values()]);
 
 const categoriesChips = computed((): IChipsItem[] => props.data.categories && props.data.categories?.map((item) => ({
   title: item.title,
@@ -223,6 +224,8 @@ const topChips = computed(() => {
       title: item,
       prefix: 'search',
     } as IChipsItem));
+  } else if (tagGroupChips.value.length) {
+    return tagGroupChips.value;
   } else if (categoriesChips.value || filterTagChips.value) {
     return [...categoriesChips.value || [], ...filterTagChips.value || []];
   }
@@ -232,6 +235,15 @@ const topChips = computed(() => {
 const topChipsStrings = computed(() => topChips.value?.map(item => item.value));
 
 /** Портрет в чипсе — квадратный кроп по лицу; своего у видео нет, его подмешивает BFF. */
+// `videoPage.hideAsideModelChips`: с 1024px чипса модели не нужна тем, у кого есть блок в боковой колонке плеера
+// (`useFetchAsideModels`). Снимок, а не реактивное чтение: список заполняется эффектом, и реактивный класс
+// пересчитывался бы во время гидрации — разметка расходилась бы с серверной.
+const asideModelSlugs = new Set(videoPage.hideAsideModelChips ? useAsideModelSlugs().value : []);
+
+function hasAsideBlock(title: string): boolean {
+  return asideModelSlugs.has(convertString().toSlug(title));
+}
+
 const placeholderOf = useModelPlaceholder();
 
 function getModelChips(model: IVideoData['models'][number]): IChipsItem {
@@ -283,6 +295,12 @@ function getModelChips(model: IVideoData['models'][number]): IChipsItem {
   margin-top: 32px;
 }
 
+.view-video__model-chips {
+  @include from-br(sd) {
+    display: none;
+  }
+}
+
 .view-video__popular-models {
   margin-top: 32px;
 }

package/components/view/videos.vue

@@ -36,10 +36,8 @@
       priority
     >
       <template #grid-end>
-        <LazyAdvNativeBottom
-          v-if="featureFlags.AdsNativeEnabled"
-          hydrate-on-visible
-        />
+        <!-- не ленивая: ленивая гидрация пересобирала заполненный сетью iframe, креатив терялся -->
+        <AdvNativeBottom v-if="featureFlags.AdsNativeEnabled"/>
       </template>
 
       <LazySectionSwiperCards

package/composables/page/use-category-page.ts

@@ -1,7 +1,7 @@
 import { CategoriesApiService } from '../../services/api/categories.service';
 import { VideosApiService } from '../../services/api/videos.service';
 import { sortItemsDefault } from '../../lib';
-import type { IBreadcrumbItem, ICardInfo, IChipsItem } from '../../types';
+import type { IBreadcrumbItem, ICardInfo, IChipsItem, INavLinkItem } from '../../types';
 
 /** Слаги категорий, у которых не показываем связанные поисковые фразы. */
 const DISALLOWED_SLUGS = ['18', '19'];
@@ -35,7 +35,11 @@ export async function useCategoryPageData() {
  */
 export function useCategoryPage(
   pageData: Awaited<ReturnType<typeof useCategoryPageData>>,
-  options: { metaKeys?: boolean } = {},
+  options: {
+    metaKeys?: boolean
+    /** Сортировки страницы (по умолчанию `sortItemsDefault`): по ним ключи меты и проверка `?sort` (чужой — 404). */
+    sortOptions?: INavLinkItem[]
+  } = {},
 ) {
   const { categoryInfo, data, status, relatedData } = pageData;
   const { t } = useI18n();
@@ -52,14 +56,16 @@ export function useCategoryPage(
   useStatsPage(() => ({ rotatorID: 'category', categories: slug.value ? [slug.value] : [] }));
 
   // с metaKeys `?sort` проверяет useMeta
-  if (!options.metaKeys) useSortGuard(sortItemsDefault);
+  const sortOptions = options.sortOptions || sortItemsDefault;
+
+  if (!options.metaKeys) useSortGuard(sortOptions);
 
   const keysMeta = options.metaKeys
     ? useMeta({
         t,
         pageKey: useGetPureRouteName(),
         brandName: useAppConfig().brandName,
-        sortOptions: sortItemsDefault,
+        sortOptions,
         text: title,
         nicheSafeText: title,
         seo: () => ({

package/composables/page/use-channel-page.ts

@@ -4,7 +4,7 @@ import type { Language } from '../../runtime';
 import { sortItemsDefault } from '../../lib';
 import { ChannelsApiService } from '../../services/api/channels.service';
 import { VideosApiService } from '../../services/api/videos.service';
-import type { IBreadcrumbItem, IChipsItem, IPopularTags } from '../../types';
+import type { IBreadcrumbItem, IChipsItem, IPopularTags, INavLinkItem } from '../../types';
 
 /**
  * Данные страницы канала: карточка канала, видео, популярные теги. Только запросы — их можно запускать в
@@ -37,7 +37,12 @@ export async function useChannelPageData() {
  */
 export function useChannelPage(
   pageData: Awaited<ReturnType<typeof useChannelPageData>>,
-  options: { metaSort?: MaybeRefOrGetter<string>, metaSecondText?: Ref<string> } = {},
+  options: {
+    metaSort?: MaybeRefOrGetter<string>
+    metaSecondText?: Ref<string>
+    /** Сортировки страницы (по умолчанию `sortItemsDefault`): по ним ключи меты и проверка `?sort` (чужой — 404). */
+    sortOptions?: INavLinkItem[]
+  } = {},
 ) {
   const { cardInfo, status, channelTagsData } = pageData;
   const route = useRoute();
@@ -50,7 +55,7 @@ export function useChannelPage(
     t,
     pageKey: useGetPureRouteName(),
     brandName: useAppConfig().brandName,
-    sortOptions: sortItemsDefault,
+    sortOptions: options.sortOptions || sortItemsDefault,
     sort: options.metaSort,
     text: metaTitle,
     secondText: options.metaSecondText,

package/composables/page/use-model-page.ts

@@ -4,7 +4,7 @@ import type { Language } from '../../runtime';
 import { sortItemsDefault } from '../../lib';
 import { ModelsApiService } from '../../services/api/models.service';
 import { VideosApiService } from '../../services/api/videos.service';
-import type { IBreadcrumbItem } from '../../types';
+import type { IBreadcrumbItem, INavLinkItem } from '../../types';
 
 /**
  * Данные страницы модели: видео и карточка модели. Только запросы — их можно запускать в `Promise.all` вместе
@@ -34,7 +34,12 @@ export async function useModelPageData() {
  */
 export function useModelPage(
   pageData: Awaited<ReturnType<typeof useModelPageData>>,
-  options: { metaSort?: MaybeRefOrGetter<string>, metaSecondText?: Ref<string> } = {},
+  options: {
+    metaSort?: MaybeRefOrGetter<string>
+    metaSecondText?: Ref<string>
+    /** Сортировки страницы (по умолчанию `sortItemsDefault`): по ним ключи меты и проверка `?sort` (чужой — 404). */
+    sortOptions?: INavLinkItem[]
+  } = {},
 ) {
   const { status, cardInfo } = pageData;
   const route = useRoute();
@@ -48,7 +53,7 @@ export function useModelPage(
     t,
     pageKey: useGetPureRouteName(),
     brandName: useAppConfig().brandName,
-    sortOptions: sortItemsDefault,
+    sortOptions: options.sortOptions || sortItemsDefault,
     sort: options.metaSort,
     text: metaTitle,
     secondText: options.metaSecondText,

package/package.json

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

package/pages/categories/[slug].vue

@@ -33,10 +33,8 @@
       :class="{'_loading': status === 'pending'}"
     >
       <template #grid-end>
-        <LazyAdvNativeBottom
-          v-if="featureFlags.AdsNativeEnabled"
-          hydrate-on-visible
-        />
+        <!-- не ленивая: ленивая гидрация пересобирала заполненный сетью iframe, креатив терялся -->
+        <AdvNativeBottom v-if="featureFlags.AdsNativeEnabled"/>
       </template>
       <template #default>
         <UiExpandRow

package/pages/channels/[channel].vue

@@ -41,10 +41,8 @@
       priority
     >
       <template #grid-end>
-        <LazyAdvNativeBottom
-          v-if="featureFlags.AdsNativeEnabled"
-          hydrate-on-visible
-        />
+        <!-- не ленивая: ленивая гидрация пересобирала заполненный сетью iframe, креатив терялся -->
+        <AdvNativeBottom v-if="featureFlags.AdsNativeEnabled"/>
       </template>
       <template #default>
         <LazySectionSwiperCards

package/pages/search/[slug]/index.vue

@@ -78,10 +78,8 @@
           priority
         >
           <template #grid-end>
-            <LazyAdvNativeBottom
-              v-if="featureFlags.AdsNativeEnabled"
-              hydrate-on-visible
-            />
+            <!-- не ленивая: ленивая гидрация пересобирала заполненный сетью iframe, креатив терялся -->
+            <AdvNativeBottom v-if="featureFlags.AdsNativeEnabled"/>
             <UiViewAll
               v-if="videosData.items.length > MAXIMUM_VIDEOS || videosData.total > MAXIMUM_VIDEOS"
               :to="`/search/${slug}/videos`"

package/runtime/index.ts

@@ -47,6 +47,7 @@ export * from './utils/cleaners/clean-suggest-models';
 export * from './utils/video-data-add-model-portraits';
 export * from './utils/converters/convert-categories-to-footer';
 export * from './utils/converters/convert-categories-to-chips';
+export * from './utils/converters/convert-tag-group-item-to-chips';
 export * from './utils/converters/convert-model-card-to-chips';
 export * from './utils/converters/group-categories-by-first-letter';
 export * from './utils/converters/group-objects-by-first-letter';

package/runtime/utils/cleaners/__tests__/clean-video-data.test.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { cleanVideoData } from '../clean-video-data';
+import type { IRawVideoData } from '../../../../types';
 
 describe('cleanVideoData', () => {
   it('полные данные', () => {
@@ -170,3 +171,36 @@ describe('cleanVideoData', () => {
     expect(result.dislikes).toBe(0);
   });
 });
+
+const raw = (tags: unknown) => ({ tags } as unknown as IRawVideoData);
+
+describe('cleanVideoData — теги', () => {
+  it('v1: строки остаются плоским списком, групп нет', () => {
+    const data = cleanVideoData(raw(['Anal', 'Big Ass']));
+    expect(data.tags).toEqual(['Anal', 'Big Ass']);
+    expect(data.tagGroups).toEqual([]);
+  });
+
+  it('v2: группы по order, элементы внутри по order, пустые и неизвестного типа выкинуты, плоский список — склейка без повторов', () => {
+    const data = cleanVideoData(raw([
+      { type: 'category', name: 'positions', title: 'Positions', order: 1, items: [{ name: 'doggy', title: 'Doggy style' }] },
+      { type: 'category', name: 'empty', title: 'Empty', order: 2, items: [] },
+      { type: 'unknown', name: 'odd', title: 'Odd', order: 3, items: [{ name: 'odd', title: 'Odd' }] },
+      { type: 'tag', name: 'actions', title: 'Actions', order: 0, items: [
+        { name: 'rimming', title: 'Rimming', order: 2 },
+        { name: 'anal', title: 'Anal', order: 1 },
+        { name: 'doggy', title: 'Doggy style', order: 3 },
+      ] },
+    ]));
+
+    expect(data.tagGroups.map(group => group.name)).toEqual(['actions', 'positions']);
+    expect(data.tagGroups[0].type).toBe('tag');
+    expect(data.tagGroups[0].items.map(item => item.name)).toEqual(['anal', 'rimming', 'doggy']);
+    expect(data.tags).toEqual(['Anal', 'Rimming', 'Doggy style']);
+  });
+
+  it('нет тегов — пусто', () => {
+    expect(cleanVideoData(raw(undefined)).tagGroups).toEqual([]);
+    expect(cleanVideoData(raw(undefined)).tags).toEqual([]);
+  });
+});

package/runtime/utils/cleaners/clean-video-data.ts

@@ -1,4 +1,4 @@
-import type { IRawVideoData, IVideoData, ISceneGroup, ITimelineGroup } from '../../../types';
+import type { IRawVideoData, IVideoData, ISceneGroup, ITimelineGroup, IVideoTagGroup } from '../../../types';
 import { pickPortraitVariant } from '../pick-portrait-variant';
 import { modelGender } from '../model-placeholder';
 
@@ -64,6 +64,31 @@ const cleanVideoModels = (models: IRawVideoData['models'], theme?: string): IVid
   });
 };
 
+const byOrder = <T extends { order?: number }>(a: T, b: T) => (a.order ?? 0) - (b.order ?? 0);
+
+const TAG_GROUP_TYPES = new Set<string>(['tag', 'category', 'search']);
+
+// v2 отдаёт в `tags` группы, v1 — строки. Группы сортируются по `order` (и элементы внутри, если он задан);
+// пустые и неизвестного типа (ссылку не построить) отбрасываются; плоский список — склейка элементов всех групп без повторов.
+const cleanTags = (raw: IRawVideoData['tags']): { tags: string[], tagGroups: IVideoTagGroup[] } => {
+  if (!Array.isArray(raw) || !raw.length) return { tags: [], tagGroups: [] };
+  if (typeof raw[0] === 'string') return { tags: raw as string[], tagGroups: [] };
+
+  const tagGroups = (raw as IVideoTagGroup[])
+    .filter(group => group?.title && TAG_GROUP_TYPES.has(group.type) && Array.isArray(group.items))
+    .map(group => ({
+      type: group.type,
+      name: group.name || '',
+      title: group.title,
+      order: group.order ?? 0,
+      items: group.items.filter(item => item?.title && item.name).sort(byOrder),
+    }))
+    .filter(group => group.items.length > 0)
+    .sort(byOrder);
+
+  return { tags: [...new Set(tagGroups.flatMap(group => group.items.map(item => item.title)))], tagGroups };
+};
+
 /** Нормализует сырые данные видео к типу IVideoData. */
 export const cleanVideoData = (data: IRawVideoData, theme?: string): IVideoData => ({
   guid: data.guid || '',
@@ -74,7 +99,7 @@ export const cleanVideoData = (data: IRawVideoData, theme?: string): IVideoData
   views: data.views || 0,
   likes: data.likes || 0,
   id: data.id || '',
-  tags: data.tags || [],
+  ...cleanTags(data.tags),
   models: cleanVideoModels(data.models, theme),
   categories: data.categories || [],
   actions: data.actions || null,

package/runtime/utils/converters/convert-tag-group-item-to-chips.ts

@@ -0,0 +1,14 @@
+import type { IChipsItem, IVideoTagGroupItem, VideoTagGroupType } from '../../../types';
+
+const PREFIX: Record<VideoTagGroupType, string> = { tag: 'tag', category: 'categories', search: 'search' };
+
+/** Элемент группы под плеером (контракт видео v2) → чипса: ссылка по типу группы и машинному `name`, показ по `title`. */
+export function convertTagGroupItemToChips(type: VideoTagGroupType, item: IVideoTagGroupItem): IChipsItem {
+  return {
+    title: item.title,
+    value: item.name,
+    prefix: PREFIX[type],
+    // как у чипс категорий ролика: имя иконки — флаг, а URL берём как есть
+    ...(item.icon ? { image: item.icon.includes('/') ? item.icon : `/icons/flags/${item.icon}.svg`, imageFit: 'contain' as const } : {}),
+  };
+}

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

@@ -13,6 +13,7 @@ export default defineEventHandler(async (event): Promise<IVideoData> => {
     'user-agent': requestHeaders[ 'user-agent' ] ?? '',
   };
 
+  // ручка видео v2 (`/v2/video/id/…`, теги — группами) ещё не готова: v1 + мок групп (`withMockTagGroups`)
   const videoUrl = getUrlWithProxiedParams(`${apiUrl}/v1/video/id/${id}`, event);
   const modelsUrl = getUrlWithProxiedParams(`${apiUrl}/v2/models/list-by-video-id/${id}`, event);
 
@@ -24,7 +25,7 @@ export default defineEventHandler(async (event): Promise<IVideoData> => {
     apiFetch(modelsUrl, { method: 'GET', headers: clientHeaders }).catch(() => null),
   ]);
 
-  const videoData = videoRaw.data as IRawVideoData;
+  const videoData = withMockTagGroups(videoRaw.data as IRawVideoData);
   const modelsData = modelsRaw?.data as Record<'items', Array<IRawModelCard>>;
 
   return cleanVideoData(

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

@@ -12,6 +12,7 @@ export default defineEventHandler(async (event): Promise<IVideoData> => {
     ...requestHeaders,
     'user-agent': requestHeaders[ 'user-agent' ] ?? '',
   };
+  // ручка видео v2 (`/v2/video/url/…`, теги — группами) ещё не готова: v1 + мок групп (`withMockTagGroups`)
   const videoUrl = getUrlWithProxiedParams(`${apiUrl}/v1/video/url/${url}`, event);
   const modelsUrl = getUrlWithProxiedParams(`${apiUrl}/v2/models/list-by-video-url/${url}`, event);
 
@@ -23,7 +24,7 @@ export default defineEventHandler(async (event): Promise<IVideoData> => {
     apiFetch(modelsUrl, { method: 'GET', headers: clientHeaders }).catch(() => null),
   ]);
 
-  const videoData = videoRaw.data as IRawVideoData;
+  const videoData = withMockTagGroups(videoRaw.data as IRawVideoData);
   const modelsData = modelsRaw?.data as Record<'items', Array<IRawModelCard>>;
 
   return cleanVideoData(

package/server/utils/video-tag-groups-mock.ts

@@ -0,0 +1,33 @@
+import type { IRawVideoData, IVideoTagGroup } from '../../types';
+
+const item = (name: string) => ({ name, title: name.charAt(0).toUpperCase() + name.slice(1) });
+const group = (order: number, name: string, title: string, names: string[], type: IVideoTagGroup['type'] = 'category'): IVideoTagGroup =>
+  ({ type, name, title, order, items: names.map(item) });
+
+/** Статичная заглушка групп (контракт ручки видео v2): настоящие категории, теги и поиски сайта (все три типа узлов),
+ *  категорийных групп и элементов — как в макете. Одна на все ролики — только для отладки вида и поведения; группировать будет бекенд. */
+const MOCK_TAG_GROUPS: IVideoTagGroup[] = [
+  group(0, 'actions', 'Actions', ['blowjob', 'cumshot', 'creampie', 'deep throat', 'handjob', 'fingering', 'squirt']),
+  group(1, 'positions', 'Positions', ['cowgirl', 'missionary', 'face sitting']),
+  group(2, 'body_type', 'Body type', ['big boobs', 'big ass', 'petite', 'big cock']),
+  group(3, 'appearance', 'Appearance', ['blond', 'brunette', 'redhead', 'tattoo']),
+  group(4, 'location', 'Location', ['bedroom']),
+  group(5, 'format', 'Format', ['amateur', 'point of view', 'compilation', 'homemade']),
+  group(6, 'tags', 'Tags', ['moaning', 'loud moaning', 'female orgasm', 'bouncing tits', 'natural big tits'], 'tag'),
+  group(7, 'searches', 'Related searches', ['amateur wife', 'big tits teen', 'homemade blowjob'], 'search'),
+];
+
+// заглушка нарочно lorem — сразу видно, что не настоящее описание
+const MOCK_DESCRIPTION = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et '
+  + 'dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo '
+  + 'consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.';
+
+/**
+ * shortcut: ручка видео v2 ещё не готова — BFF ходит в v1 и отдаёт вместо тегов статичную заглушку групп (и описание,
+ * если его нет: у роликов с группами оно будет всегда). Удалить вместе с переходом на `/v2/video/*`.
+ */
+export function withMockTagGroups(video: IRawVideoData): IRawVideoData {
+  if (!video) return video;
+
+  return { ...video, tags: MOCK_TAG_GROUPS, description: video.description || MOCK_DESCRIPTION };
+}

package/types/player-site-hooks.d.ts

@@ -14,4 +14,6 @@ export interface IPlayerSiteHooks {
   }
   /** Плеер смонтирован (заглушка) и готов (ядро) — вызывается оба раза. */
   onReady?: () => void
+  /** Началась реклама (преролл): например, отметить частотный кап показа. */
+  onAdStart?: () => void
 }

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

@@ -1,6 +1,6 @@
 import type { IRawThumbUrls } from './raw-thumbs-urls';
 import type { IRawPortraits } from './raw-portraits';
-import type { ITimelineGroup } from '../video-data';
+import type { ITimelineGroup, IVideoTagGroup } from '../video-data';
 
 export interface IRawVideoData {
   guid: string;
@@ -18,7 +18,8 @@ export interface IRawVideoData {
   dislikes: number;
   popularity: number;         // unused
   id: string;
-  tags: string[];
+  /** v1 — названия тегов; v2 — группы (`IVideoTagGroup[]`). */
+  tags: string[] | IVideoTagGroup[];
   models: {
     guid: string;
     title: string;

package/types/video-data.d.ts

@@ -29,6 +29,27 @@ export interface ISceneGroupScene {
   title: string;
 }
 
+/** Тип узла группы (контракт ручки видео v2): по нему строится ссылка элементов — тег, категория или поиск. */
+export type VideoTagGroupType = 'tag' | 'category' | 'search';
+
+/** Элемент группы (контракт ручки видео v2). `name` — машинное название (ссылка), `title` — для показа. */
+export interface IVideoTagGroupItem {
+  name: string;
+  title: string;
+  order?: number;
+  /** Имя иконки или URL. */
+  icon?: string;
+}
+
+/** Группа под плеером (контракт ручки видео v2): категории, сгруппированные бекендом, — «Actions», «Positions»… */
+export interface IVideoTagGroup {
+  type: VideoTagGroupType;
+  name: string;
+  title: string;
+  order: number;
+  items: IVideoTagGroupItem[];
+}
+
 export interface ISceneGroup {
   id: string;
   title: string;
@@ -45,7 +66,10 @@ export interface IVideoData {
     likes: number;
     dislikes: number;
     id: string;
+    /** Все теги одним списком: в v2 — склейка элементов всех групп. */
     tags: string[];
+    /** Группы под плеером (раскрытое описание); у ответа v1 групп нет — пусто. */
+    tagGroups: IVideoTagGroup[];
     models: {
         guid: string;
         title: string;