itube-specs 0.0.1053 → 0.0.1055

package/SITE_UPDATES.md

@@ -11,6 +11,36 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 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` добавить токены тегов в раскрытом описании видео —
+  `$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`,

package/app.config.ts

@@ -14,6 +14,8 @@ 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,
   /** Блок Live Cams в сетках листингов (при `FeatureWebcamsEnabled`), `null` — нет. `videos` — после какой строки
    *  карточек и сколько врезок вебкам-тумб (хвост того же списка) в сетке видео листинга (не похожие, не плейлист,
    *  не когда страница передала врезки сама); `models` — в основной сетке моделей (`priority`, не футер). */

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;
 
@@ -241,6 +244,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

@@ -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;
 
@@ -297,6 +300,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/interface.vue

@@ -64,19 +64,45 @@
       </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"
+          >
+            <!-- у узлов тегов и поисков бекенд кладёт в 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"
+                :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 +126,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 +140,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 +301,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 +336,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/video.vue

@@ -126,7 +126,7 @@
 
 <script setup lang="ts">
 import type { IChipsItem, IModelCard, IStripcashModel, IVideoCard, IVideoData, PaginatedResponse } from '../../types';
-import { convertModelToRoundCard, convertString } from '../../runtime';
+import { convertModelToRoundCard, convertString, convertTagGroupItemToChips } from '../../runtime';
 import { VideosApiService } from '../../services/api/videos.service';
 import type { AsyncDataRequestStatus } from '#app';
 
@@ -181,11 +181,13 @@ 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: теги и поиски из групп (без повторов). Категории — из `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()]);
 
 const categoriesChips = computed((): IChipsItem[] => props.data.categories && props.data.categories?.map((item) => ({
   title: item.title,
@@ -197,13 +199,11 @@ 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 filterTagChips = computed(() => withoutCategoryTitles(tagChips.value));
 
 const recentSearches = computed(() => {
   if (props.recent && typeof props.recent === 'object' && Object.keys(props.recent).length === 0) {
@@ -223,6 +223,8 @@ const topChips = computed(() => {
       title: item,
       prefix: 'search',
     } as IChipsItem));
+  } else if (tagGroupChips.value.length) {
+    return [...categoriesChips.value || [], ...withoutCategoryTitles(tagGroupChips.value)];
   } else if (categoriesChips.value || filterTagChips.value) {
     return [...categoriesChips.value || [], ...filterTagChips.value || []];
   }

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

@@ -27,7 +27,7 @@ export async function useCategoryPageData() {
 
 /**
  * Логика страницы категории поверх `useCategoryPageData()`: мета и 404, хлебные крошки, номер страницы,
- * карточка инфо и чипсы связанных фраз. Синхронная — вызывать в setup после `await useCategoryPageData()`.
+ * карточка инфо и чипсы связанных фраз (по убыванию `score`, не больше `appConfig.categoryRelatedSearchLimit`). Синхронная — вызывать в setup после `await useCategoryPageData()`.
  *
  * Мета по умолчанию — из API (`metaTitle` / `metaDescription`, без них — название), h1 — `header` или название.
  * `metaKeys: true` — мета и h1 через `useMeta` по ключам `meta.<page>.<sort>.*` (`{text}` — название, с анти-дублем
@@ -87,14 +87,20 @@ export function useCategoryPage(
     miniCardTitle: categoryInfo.value?.title,
   } as ICardInfo));
 
+  const relatedSearchLimit = useAppConfig().categoryRelatedSearchLimit;
+
   const relatedSearch = computed<IChipsItem[]>(() => {
     if (DISALLOWED_SLUGS.some(item => slug.value.includes(item))) return [];
 
-    return relatedData.value?.items?.map(item => ({
+    const items = [...(relatedData.value?.items || [])]
+      .sort((a, b) => Number(b.score) - Number(a.score))
+      .slice(0, relatedSearchLimit ?? undefined);
+
+    return items.map(item => ({
       title: item.query,
       value: item.query,
       prefix: 'search',
-    })) || [];
+    }));
   });
 
   const relatedCategories = computed(() => categoryInfo.value?.related);

package/i18n/locales/de-DE.json

@@ -128,6 +128,7 @@
   "show_all_models": "Alle anzeigen",
   "all_categories": "Alphabetisch A-Z",
   "related_searches": "Ähnliche Suchen",
+  "tags": "Tags",
   "related_models": "Ähnliche Models",
   "other_names": "Andere Namen",
   "popular_models": "Beliebte Models",

package/i18n/locales/en-US.json

@@ -207,6 +207,7 @@
   "show_all_models": "Show all",
   "all_categories": "Alphabetical A-Z",
   "related_searches": "Related searches",
+  "tags": "Tags",
   "related_models": "Related models",
   "other_names": "Other names",
   "popular_models": "Popular models",

package/i18n/locales/es-ES.json

@@ -128,6 +128,7 @@
   "show_all_models": "Ver todos",
   "all_categories": "Alfabético A-Z",
   "related_searches": "Búsquedas relacionadas",
+  "tags": "Etiquetas",
   "related_models": "Modelos relacionados",
   "other_names": "Otros nombres",
   "popular_models": "Modelos populares",

package/i18n/locales/fr-FR.json

@@ -128,6 +128,7 @@
   "show_all_models": "Voir tout",
   "all_categories": "Alphabétique A-Z",
   "related_searches": "Recherches associées",
+  "tags": "Tags",
   "related_models": "Modèles associés",
   "other_names": "Autres noms",
   "popular_models": "Modèles populaires",

package/i18n/locales/it-IT.json

@@ -128,6 +128,7 @@
   "show_all_models": "Vedi tutti",
   "all_categories": "Alfabetico A-Z",
   "related_searches": "Ricerche correlate",
+  "tags": "Tag",
   "related_models": "Modelli correlati",
   "other_names": "Altri nomi",
   "popular_models": "Modelli popolari",

package/i18n/locales/ja-JP.json

@@ -128,6 +128,7 @@
   "show_all_models": "すべて見る",
   "all_categories": "アルファベット A-Z",
   "related_searches": "関連検索",
+  "tags": "タグ",
   "related_models": "関連モデル",
   "other_names": "他の名前",
   "popular_models": "人気モデル",

package/i18n/locales/ko-KR.json

@@ -128,6 +128,7 @@
   "show_all_models": "전체 보기",
   "all_categories": "알파벳 A-Z",
   "related_searches": "관련 검색",
+  "tags": "태그",
   "related_models": "관련 모델",
   "other_names": "다른 이름",
   "popular_models": "인기 모델",

package/i18n/locales/ru-RU.json

@@ -149,6 +149,7 @@
   "show_all_models": "Показать все",
   "all_categories": "По алфавиту А-Я",
   "related_searches": "Похожие запросы",
+  "tags": "Теги",
   "related_models": "Похожие модели",
   "other_names": "Другие имена",
   "popular_models": "Популярные модели",

package/i18n/locales/zh-CN.json

@@ -128,6 +128,7 @@
   "show_all_models": "查看全部",
   "all_categories": "字母 A-Z",
   "related_searches": "相关搜索",
+  "tags": "标签",
   "related_models": "相关模特",
   "other_names": "其他名称",
   "popular_models": "热门模特",

package/package.json

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

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,30 @@ describe('cleanVideoData', () => {
     expect(result.dislikes).toBe(0);
   });
 });
+
+const raw = (entities: unknown) => ({ tags: ['anal'], entities } as unknown as IRawVideoData);
+
+describe('cleanVideoData — группы под плеером', () => {
+  it('v1: групп нет, теги — как пришли', () => {
+    const data = cleanVideoData(raw(undefined));
+    expect(data.tags).toEqual(['anal']);
+    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: 'tag', title: 'tag', order: 0, items: [
+        { name: 'rimming', title: 'rimming', order: 2 },
+        { name: 'anal', title: 'anal', order: 1 },
+        { name: 'doggy', title: 'doggy', order: 3 },
+      ] },
+    ]));
+
+    expect(data.tagGroups.map(group => group.name)).toEqual(['tag', 'positions']);
+    expect(data.tagGroups[0].items.map(item => item.name)).toEqual(['anal', 'rimming', 'doggy']);
+    expect(data.tags).toEqual(['anal']);
+  });
+});

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,24 @@ 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 отдаёт группы в `entities`. Группы сортируются по `order` (и элементы внутри, если он задан);
+// пустые и неизвестного типа (ссылку не построить) отбрасываются.
+const cleanTagGroups = (raw: IRawVideoData['entities']): IVideoTagGroup[] => (Array.isArray(raw) ? raw : [])
+  .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);
+
 /** Нормализует сырые данные видео к типу IVideoData. */
 export const cleanVideoData = (data: IRawVideoData, theme?: string): IVideoData => ({
   guid: data.guid || '',
@@ -75,6 +93,7 @@ export const cleanVideoData = (data: IRawVideoData, theme?: string): IVideoData
   likes: data.likes || 0,
   id: data.id || '',
   tags: data.tags || [],
+  tagGroups: cleanTagGroups(data.entities),
   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,7 +13,8 @@ export default defineEventHandler(async (event): Promise<IVideoData> => {
     'user-agent': requestHeaders[ 'user-agent' ] ?? '',
   };
 
-  const videoUrl = getUrlWithProxiedParams(`${apiUrl}/v1/video/id/${id}`, event);
+  // v2 ищет ролик по `url` — это id или слаг, бекенд разбирает сам; группы под плеером — в `entities`
+  const videoUrl = getUrlWithProxiedParams(`${apiUrl}/v2/video/url/${id}`, event);
   const modelsUrl = getUrlWithProxiedParams(`${apiUrl}/v2/models/list-by-video-id/${id}`, event);
 
   const [videoRaw, modelsRaw] = await Promise.all([
@@ -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 = withDemoFallbacks(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,7 +12,7 @@ export default defineEventHandler(async (event): Promise<IVideoData> => {
     ...requestHeaders,
     'user-agent': requestHeaders[ 'user-agent' ] ?? '',
   };
-  const videoUrl = getUrlWithProxiedParams(`${apiUrl}/v1/video/url/${url}`, event);
+  const videoUrl = getUrlWithProxiedParams(`${apiUrl}/v2/video/url/${url}`, event);
   const modelsUrl = getUrlWithProxiedParams(`${apiUrl}/v2/models/list-by-video-url/${url}`, event);
 
   const [videoRaw, modelsRaw] = await Promise.all([
@@ -23,7 +23,7 @@ export default defineEventHandler(async (event): Promise<IVideoData> => {
     apiFetch(modelsUrl, { method: 'GET', headers: clientHeaders }).catch(() => null),
   ]);
 
-  const videoData = videoRaw.data as IRawVideoData;
+  const videoData = withDemoFallbacks(videoRaw.data as IRawVideoData);
   const modelsData = modelsRaw?.data as Record<'items', Array<IRawModelCard>>;
 
   return cleanVideoData(

package/server/utils/video-demo-mock.ts

@@ -0,0 +1,26 @@
+import type { IRawVideoData } from '../../types';
+
+// заглушка нарочно 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: демо блока под плеером, пока у роликов нет описаний и в админке не заведены разделы категорий — без описания
+ * подставляется lorem, без разделов категории ролика идут одной группой «Categories». Удалить, когда данные появятся.
+ */
+export function withDemoFallbacks(video: IRawVideoData): IRawVideoData {
+  if (!video) return video;
+
+  const entities = video.entities ?? [];
+  const hasSections = entities.some(group => group.type === 'category');
+  const categories = (video.categories ?? []).map(({ name, title, icon }) => ({ name, title, icon }));
+
+  return {
+    ...video,
+    description: video.description || MOCK_DESCRIPTION,
+    entities: hasSections || !categories.length
+      ? entities
+      : [{ type: 'category' as const, name: 'categories', title: 'Categories', order: -1, items: categories }, ...entities],
+  };
+}

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;
@@ -19,6 +19,8 @@ export interface IRawVideoData {
   popularity: number;         // unused
   id: string;
   tags: string[];
+  /** Только v2: категории по разделам, затем теги и поисковые фразы (`tag`/`search` — с `title`, равным типу). */
+  entities?: 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;
@@ -46,6 +67,8 @@ export interface IVideoData {
     dislikes: number;
     id: string;
     tags: string[];
+    /** Группы под плеером (раскрытое описание); у ответа v1 групп нет — пусто. */
+    tagGroups: IVideoTagGroup[];
     models: {
         guid: string;
         title: string;