itube-specs 0.0.1073 → 0.0.1075

package/SITE_UPDATES.md

@@ -11,6 +11,36 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1075 — 2026-11-06
+
+- **Сайтам со своей темой в `assets/scss/vars/_theme.scss` (hdsex-remaster), срочно:** без нового токена сборка
+  падает на `Undefined variable`. Добавить `$layout-age-popup-text` (тёмная — `$color-zinc-400`, светлая —
+  `$color-gray-600`), `$ui-img-gate-badge-text: $color-white;`, `$ui-img-gate-badge-bg: $color-black-42;`,
+  `$ui-img-gate-badge-border: $mono-white-90;`. Шесть `$layout-age-banner-*` и `$ui-img-gate-text` больше не
+  нужны — удалить.
+- **Сайтам с `FeatureAgeVerificationEnabled` — к сведению:** заглушка превью — размытая абстрактная картинка слоя
+  (`public/img/age-gate.webp`, без реального кадра) со значком «18+» в кружке; в аватарах меньше 40px — без значка.
+- **Сайтам с `FeatureAgeVerificationEnabled` — к сведению:** плашка под шапкой (`LayoutAgeBanner`) заменена попапом
+  `LayoutAgePopup` — предупреждение о верификации в регионе, кнопки «Verify age» и «Close»; после закрытия
+  показывается снова на следующей странице. Заглушки превью и блокировка плеера — как были. Тексты `age_gate.title`
+  и `age_gate.text` переписаны под попап.
+
+## 0.0.1074 — 2026-11-05
+
+- **Сайтам со своей темой в `assets/scss/vars/_theme.scss` (hdsex-remaster), срочно:** без новых токенов сборка
+  падает на `Undefined variable`. Добавить `$player-scenes-text`, `$player-scenes-text--current`, `$player-scenes-bg`,
+  `$player-scenes-bg--hover`, `$player-scenes-bg--current`, `$player-scenes-border`, `$player-scenes-border--current`,
+  `$player-scenes-time`, `$player-scenes-time-bg`, `$player-scenes-time-bg--current`,
+  `$player-scenes-time-border--current`, `$player-scenes-mask` — значения из `themes/dark/_theme.scss` слоя.
+- **Всем — к сведению:** под плеером ряд сцен ролика (`PlayerScenes`, макет v0-dark-eta /video/2): «тайм-код |
+  название», текущая подсвечена, клик перематывает (до загрузки плеера — стартует его и перематывает). Сцены — первый
+  тип из `timelines_groups` (дальше — выбранный в плеере), без групп — `actions`. Нет сцен у ролика — ряда нет. Новый
+  общий ключ `scenes`. Делать ничего не надо.
+- **Всем — к сведению:** категории в строке чипсов над плеером теперь берутся из группы `top_categories` ответа
+  видео v2 (`IVideoData.topCategories`) как есть, без сверки с `categories`; в блок под роликом эта группа не
+  попадает. Пометка `categories[].isTop`, `videoDataMarkTopCategories` и запрос BFF к `/v1/categories/top` убраны.
+  Ролик без `top_categories` — категорий над плеером нет. Делать ничего не надо, если сайт не читал `isTop` сам.
+
 ## 0.0.1073 — 2026-11-03
 
 - **Всем — к сведению:** гость больше не видит заглушку «Sign in to upload» на `/upload`: клик по Upload (шапка,

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

@@ -33,14 +33,11 @@ $layout-header-border: $color-zinc-800-30;
 $layout-nav-border: $color-zinc-800-50;
 $layout-skip-link-bg: $color-zinc-800-60;
 $layout-skip-link-text: $color-white;
-$layout-age-banner-bg: $color-emerald-600;
-$layout-age-banner-title: $color-white;
-$layout-age-banner-text: $color-white-90;
-$layout-age-banner-btn-bg: $color-white;
-$layout-age-banner-btn-bg--hover: $color-white-90;
-$layout-age-banner-btn-text: $color-green-900;
+$layout-age-popup-text: $color-zinc-400;
 $ui-img-gate-bg: $color-zinc-800;
-$ui-img-gate-text: $color-zinc-500;
+$ui-img-gate-badge-text: $color-white;
+$ui-img-gate-badge-bg: $color-black-42;
+$ui-img-gate-badge-border: $mono-white-90;
 
 // ─── Page footer links (mixin) ───
 $page-footer-links-border: $color-zinc-800;
@@ -783,6 +780,20 @@ $player-menu-option-bg--hover: $mono-white-5;        // hover:bg-white/5
 $player-menu-toggle-bg--active: $color-indigo-500;   // switch on: bg-indigo-500
 $player-center-label-shadow: $color-black-50;   // мета в центре бара поверх видео
 
+// ─── Player scenes (сцены под плеером) ───
+$player-scenes-text: $color-zinc-300;
+$player-scenes-text--current: $color-white;
+$player-scenes-bg: transparent;
+$player-scenes-bg--hover: $color-zinc-800;
+$player-scenes-bg--current: $color-zinc-800;
+$player-scenes-border: $color-zinc-800;
+$player-scenes-border--current: $color-zinc-500;
+$player-scenes-time: $color-zinc-400;
+$player-scenes-time-bg: $color-zinc-900;
+$player-scenes-time-bg--current: $color-zinc-700;
+$player-scenes-time-border--current: $color-zinc-600;
+$player-scenes-mask: $color-black;               // непрозрачная часть маски затухания ленты
+
 // accordion (scene types)
 $player-menu-acc-border: $color-zinc-800-60;         // border-zinc-800/60
 $player-menu-acc-head-text: $color-zinc-200;         // text-zinc-200

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

@@ -44,14 +44,11 @@ $layout-header-border: transparent;
 $layout-nav-border: $color-slate-750;
 $layout-skip-link-bg: $color-slate-750;
 $layout-skip-link-text: $color-white;
-$layout-age-banner-bg: $color-emerald-600;
-$layout-age-banner-title: $color-white;
-$layout-age-banner-text: $color-white-90;
-$layout-age-banner-btn-bg: $color-white;
-$layout-age-banner-btn-bg--hover: $color-white-90;
-$layout-age-banner-btn-text: $color-green-900;
+$layout-age-popup-text: $color-gray-600;
 $ui-img-gate-bg: $color-gray-200;
-$ui-img-gate-text: $color-gray-500;
+$ui-img-gate-badge-text: $color-white;
+$ui-img-gate-badge-bg: $color-black-42;
+$ui-img-gate-badge-border: $mono-white-90;
 
 // ─── Page footer links (mixin) ───
 $page-footer-links-border: transparent;
@@ -835,6 +832,20 @@ $player-menu-option-bg--hover: $mono-white-5;        // hover:bg-white/5
 $player-menu-toggle-bg--active: $color-indigo-500;   // switch on: bg-indigo-500
 $player-center-label-shadow: $color-black-50;   // мета в центре бара поверх видео
 
+// ─── Player scenes (сцены под плеером) ───
+$player-scenes-text: $color-gray-700;
+$player-scenes-text--current: $color-gray-900;
+$player-scenes-bg: transparent;
+$player-scenes-bg--hover: $color-gray-100;
+$player-scenes-bg--current: $color-gray-200;
+$player-scenes-border: $color-gray-200;
+$player-scenes-border--current: $color-gray-400;
+$player-scenes-time: $color-gray-500;
+$player-scenes-time-bg: $color-gray-100;
+$player-scenes-time-bg--current: $color-gray-300;
+$player-scenes-time-border--current: $color-gray-400;
+$player-scenes-mask: $color-black;               // непрозрачная часть маски затухания ленты
+
 // accordion (scene types)
 $player-menu-acc-border: $color-slate-700;         // border-zinc-800/60
 $player-menu-acc-head-text: $color-gray-200;         // text-zinc-200

package/components/layout/age-popup.vue

@@ -0,0 +1,81 @@
+<!-- Попап на каждой странице, пока возрастная верификация требуется и не пройдена (useAgeGate) -->
+<template>
+  <transition mode="out-in">
+    <UiPopup
+      v-if="isOpen"
+      v-model="isOpen"
+      sheet
+    >
+      <template #title>{{ t('age_gate.title') }}</template>
+
+      <p class="layout-age-popup__text">{{ t('age_gate.text') }}</p>
+
+      <template #footer>
+        <div class="layout-age-popup__buttons">
+          <UiBtn
+            wide
+            size="l"
+            theme="secondary"
+            @click="isOpen = false"
+          >{{ t('close') }}</UiBtn>
+          <UiBtn
+            :disabled="isPending"
+            wide
+            size="l"
+            theme="primary"
+            @click="onVerify"
+          >{{ t('age_gate.button') }}</UiBtn>
+        </div>
+      </template>
+    </UiPopup>
+  </transition>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n();
+const route = useRoute();
+const { startVerification } = useAgeGate();
+
+const isOpen = ref(true);
+const isPending = ref(false);
+
+watch(() => route.path, () => {
+  isOpen.value = true;
+});
+
+const onVerify = async () => {
+  isPending.value = true;
+  try {
+    await startVerification(route.fullPath);
+  } finally {
+    isPending.value = false;
+  }
+};
+</script>
+
+<style lang="scss">
+.layout-age-popup__text {
+  @include font-sm;
+
+  max-width: 400px;
+  padding-inline: 8px;
+  padding-block: 8px;
+  color: $layout-age-popup-text;
+
+  @include from-br(sm) {
+    @include font-base;
+
+    padding-inline: 16px;
+    padding-block: 16px;
+  }
+}
+
+.layout-age-popup__buttons {
+  display: grid;
+  gap: 8px;
+
+  @include from-br(sm) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+</style>

package/components/player/core.vue

@@ -18,8 +18,10 @@
     @advancerequest="onAdvanceRequest"
     @sourcechange="onSourceChange"
     @menurequest="onMenuRequest"
+    @chapterchange="onChapterChange"
+    @scenetypechange="onSceneTypeChange"
     @pause="onPause"
-    @ready="siteHooks.onReady?.()"
+    @ready="onReady"
     @blockedclick="startVerification(route.fullPath)"
   >
     <template
@@ -34,6 +36,13 @@
     </template>
   </ITubePlayer>
 
+  <PlayerScenes
+    :scenes="scenes"
+    :current="currentSceneStart"
+    class="player-core__scenes"
+    @select="onSceneSelect"
+  />
+
   <!-- Внешнее меню плеера в нашем ui-popup (только мобила — menus: 'external-mobile'). -->
   <PlayerMenu
     v-model:open="menuOpen"
@@ -44,7 +53,7 @@
 <script setup lang="ts">
 import { ITubePlayer } from 'itube-modern-player/vue';
 
-import type { Player, PlayerOptions, VideoSource, LocaleCode, AdsOptions, PreviewMetaItem, SceneGroup, MenuRequestPayload } from 'itube-modern-player';
+import type { Player, PlayerOptions, VideoSource, LocaleCode, AdsOptions, PreviewMetaItem, SceneGroup, MenuRequestPayload, Chapter } from 'itube-modern-player';
 import { ThumbSize } from '../../runtime';
 import type { IVideoData, IVideoCard } from '../../types';
 import playIcon from '../../assets/icons/player/play.svg?raw';
@@ -107,6 +116,57 @@ function onMenuRequest(request: MenuRequestPayload): void {
   menuOpen.value = true;
 }
 
+// Сцены под плеером (PlayerScenes): до загрузки ядра — первый тип сцен, как в заглушке плеера (или главы), дальше
+// активный тип и текущая сцена приходят событиями. Клик до загрузки стартует плеер через кнопку play заглушки и
+// перематывает на ready.
+const initialScenes = (): Chapter[] =>
+  currentSource.value.sceneGroups?.[0]?.scenes
+  ?? (Array.isArray(currentSource.value.chapters) ? currentSource.value.chapters : []);
+
+const scenes = shallowRef<Chapter[]>([]);
+const currentSceneStart = ref<number | null>(null);
+let pendingSeek: number | null = null;
+
+function onChapterChange({ chapter }: { chapter: Chapter | null }): void {
+  currentSceneStart.value = chapter?.start ?? null;
+}
+
+function onSceneTypeChange({ group }: { group: SceneGroup | null }): void {
+  scenes.value = group?.scenes ?? initialScenes();
+}
+
+// На ready у HLS ещё нет метаданных и перемотка теряется — ждём первый timeupdate с известной длительностью.
+function onReady(): void {
+  siteHooks.onReady?.();
+  const player = playerRef.value?.player;
+  if (pendingSeek === null || !player) return;
+
+  const stop = player.on('timeupdate', ({ duration }) => {
+    if (!(duration > 0) || pendingSeek === null) return;
+
+    player.seek(pendingSeek);
+    pendingSeek = null;
+    stop();
+  });
+}
+
+function onSceneSelect(start: number): void {
+  if (isAgeGated.value) {
+    startVerification(route.fullPath);
+    return;
+  }
+
+  const player = playerRef.value?.player;
+  if (player) {
+    player.seek(start);
+    player.play();
+    return;
+  }
+
+  pendingSeek = start;
+  (playerRef.value?.$el as HTMLElement | undefined)?.querySelector<HTMLElement>('.imp-ph-play, .imp-ph-btn--play')?.click();
+}
+
 // Плеер эмитит advancerequest 'ended' только при включённом тумблере Autoplay, а на
 // кнопку next — 'next'. Значит play после свапа нужен ТОЛЬКО когда переход инициировали
 // мы (next / автопереход), а не когда source пересобрался по другой причине (сменилось
@@ -278,8 +338,11 @@ const buildSource = (): VideoSource | VideoSource[] =>
 // следующего (префетч) дёргала бы player.load() и перезапускала текущий ролик + ломала
 // автоплей (лишние sourcechange). Один переход = один reload.
 const source = shallowRef<VideoSource | VideoSource[]>(buildSource());
+scenes.value = initialScenes();
 watch(() => props.data.videoUrl, () => {
   source.value = buildSource();
+  scenes.value = initialScenes();
+  currentSceneStart.value = null;
 });
 
 /**
@@ -370,6 +433,10 @@ async function loadAdConfig(): Promise<AdsOptions | undefined> {
   }
 }
 
+.player-core__scenes {
+  margin-top: 12px;
+}
+
 // Мета ролика в центре бара: по макету белая с тенью и средней жирностью,
 // у плеера по умолчанию — приглушённая и без тени.
 .player-core .imp-controls__chapter {

package/components/player/scenes.vue

@@ -0,0 +1,138 @@
+<!-- Сцены ролика под плеером (внешний контрол, как PlayerMenu): «тайм-код | название», текущая подсвечена.
+     Данные и перемотку держит PlayerCore — сцены активного типа и текущую сцену он берёт из событий плеера.
+     До 960px — одна строка с прокруткой и затуханием у правого края, шире — перенос строк. -->
+<template>
+  <nav
+    v-if="scenes.length"
+    :aria-label="t('scenes')"
+    class="player-scenes"
+  >
+    <ol class="player-scenes__list">
+      <li
+        v-for="scene in scenes"
+        :key="scene.start"
+        class="player-scenes__item"
+      >
+        <button
+          :class="{ '--current': scene.start === current }"
+          :aria-current="scene.start === current || undefined"
+          :aria-label="`${scene.title}, ${formatSceneTime(scene.start)}`"
+          class="player-scenes__btn"
+          type="button"
+          @click="emit('select', scene.start)"
+        >
+          <span class="player-scenes__time">{{ formatSceneTime(scene.start) }}</span>
+          <span class="player-scenes__title">{{ scene.title }}</span>
+        </button>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import type { Chapter } from 'itube-modern-player';
+
+defineProps<{
+  scenes: Chapter[]
+  /** `start` текущей сцены, `null` — ни одна не идёт. */
+  current: number | null
+}>();
+
+const emit = defineEmits<{
+  (eventName: 'select', start: number): void
+}>();
+
+const { t } = useI18n();
+
+/** Как в контрол-баре плеера: минуты без ведущего нуля — `0:55`, `1:02:03`. */
+function formatSceneTime(seconds: number): string {
+  const total = Math.max(0, Math.floor(seconds));
+  const h = Math.floor(total / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  const s = String(total % 60).padStart(2, '0');
+
+  return h ? `${h}:${String(m).padStart(2, '0')}:${s}` : `${m}:${s}`;
+}
+</script>
+
+<style lang="scss">
+.player-scenes__list {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 8px;
+  overflow-x: auto;
+  margin-inline: calc(-1 * var(--container-padding-inline));
+  padding-inline: var(--container-padding-inline) 40px;
+  scrollbar-width: none;
+  mask-image: linear-gradient(to right, $player-scenes-mask calc(100% - 40px), transparent);
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @include from-br(sm) {
+    flex-wrap: wrap;
+    overflow-x: visible;
+    margin-inline: 0;
+    padding-inline: 0;
+    mask-image: none;
+  }
+}
+
+.player-scenes__item {
+  flex-shrink: 0;
+}
+
+.player-scenes__btn {
+  @include font-xs;
+
+  display: flex;
+  align-items: center;
+  height: 36px;
+  overflow: hidden;
+  white-space: nowrap;
+  color: $player-scenes-text;
+  background-color: $player-scenes-bg;
+  border: 1px solid $player-scenes-border;
+  border-radius: $radius-md;
+
+  @include hover(background-color, color) {
+    color: $player-scenes-text--current;
+    background-color: $player-scenes-bg--hover;
+  }
+
+  @include from-br(sm) {
+    @include font-sm;
+  }
+
+  &.--current {
+    color: $player-scenes-text--current;
+    background-color: $player-scenes-bg--current;
+    border-color: $player-scenes-border--current;
+  }
+}
+
+.player-scenes__time {
+  @include font-xs;
+
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-inline: 10px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: $player-scenes-time;
+  background-color: $player-scenes-time-bg;
+  border-right: 1px solid $player-scenes-border;
+}
+
+.player-scenes__btn.--current .player-scenes__time {
+  color: $player-scenes-text--current;
+  background-color: $player-scenes-time-bg--current;
+  border-right-color: $player-scenes-time-border--current;
+}
+
+.player-scenes__title {
+  padding-inline: 12px;
+}
+</style>

package/components/ui/img.vue

@@ -125,29 +125,53 @@ const emit = defineEmits<{
 .ui-img-gate {
   container-type: inline-size;
   background-color: $ui-img-gate-bg;
+  background-image: url('/img/age-gate.webp');
+  background-position: center;
+  background-size: cover;
 }
 
 .ui-img-gate__label {
-  @include font-lg;
+  @include font-base;
 
   position: absolute;
-  inset: 0;
+  top: 50%;
+  left: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 700;
-  color: $ui-img-gate-text;
+  width: 56px;
+  height: 56px;
+  font-weight: 800;
+  letter-spacing: var(--tracking-tight);
+  color: $ui-img-gate-badge-text;
+  background-color: $ui-img-gate-badge-bg;
+  border: 2px solid $ui-img-gate-badge-border;
+  border-radius: $radius-full;
+  transform: translate(-50%, -50%);
 }
 
-@include to-cq(160px) {
+@include to-cq(240px) {
   .ui-img-gate__label {
     @include font-xs;
+
+    width: 40px;
+    height: 40px;
   }
 }
 
-@include to-cq(56px) {
+@include to-cq(96px) {
   .ui-img-gate__label {
     @include font-4xs;
+
+    width: 26px;
+    height: 26px;
+    border-width: 1px;
+  }
+}
+
+@include to-cq(40px) {
+  .ui-img-gate__label {
+    display: none;
   }
 }
 </style>

package/components/view/video.vue

@@ -239,10 +239,15 @@ const categoriesChips = computed((): IChipsItem[] => props.data.categories && pr
   prefix: 'categories',
 })));
 
-// Над плеером — только топ-категории (`isTop` ставит BFF); без пометки (топ-список не пришёл) — все.
-// Теги, совпавшие с нетоповой категорией, всё равно отсекаются по полному списку ниже.
-const topCategoriesChips = computed((): IChipsItem[] => (categoriesChips.value ?? [])
-  .filter((_, index) => props.data.categories[index]?.isTop !== false));
+// Над плеером — категории из группы `top_categories`, как прислал бекенд.
+// Теги, совпавшие с любой категорией ролика, всё равно отсекаются по полному списку ниже.
+const topCategoriesChips = computed((): IChipsItem[] => (props.data.topCategories ?? []).map(item => ({
+  title: item.title,
+  value: item.name,
+  image: item.icon ? `/icons/flags/${item.icon}.svg` : undefined,
+  imageFit: 'contain',
+  prefix: 'categories',
+})));
 
 const categoriesTitles = computed<string[]>(() => props.data.categories && props.data.categories?.map(item => item.title?.replace(/\s+/g, '').toLowerCase() ?? ''));
 

package/i18n/locales/de-DE.json

@@ -1,4 +1,5 @@
 {
+  "scenes": "Szenen",
   "faphouse": {
     "promo_text": "❤️ Schau und lade VOLLE Videos in HD & 4K 🔥",
     "promo_action": "ZUGANG ERHALTEN"

package/i18n/locales/en-US.json

@@ -1,9 +1,10 @@
 {
+  "scenes": "Scenes",
   "register_to_upload": "Please sign up or log in to upload your videos",
   "age_gate": {
     "thumb": "18+",
-    "title": "Laws in your region require age verification to view 18+ content",
-    "text": "Takes a minute, and we keep no personal data",
+    "title": "Age verification required",
+    "text": "Laws in your country or region require you to confirm you are 18+ to view adult content. It takes a minute, and we keep no personal data.",
     "button": "Verify age",
     "player_text": "Confirm your age to watch this video"
   },

package/i18n/locales/es-ES.json

@@ -1,4 +1,5 @@
 {
+  "scenes": "Escenas",
   "faphouse": {
     "promo_text": "❤️ Mira y descarga vídeos COMPLETOS en HD y 4K 🔥",
     "promo_action": "OBTENER ACCESO"

package/i18n/locales/fr-FR.json

@@ -1,4 +1,5 @@
 {
+  "scenes": "Scènes",
   "faphouse": {
     "promo_text": "❤️ Regardez et téléchargez des vidéos COMPLÈTES en HD et 4K 🔥",
     "promo_action": "OBTENIR L’ACCÈS"

package/i18n/locales/it-IT.json

@@ -1,4 +1,5 @@
 {
+  "scenes": "Scene",
   "faphouse": {
     "promo_text": "❤️ Guarda e scarica video COMPLETI in HD e 4K 🔥",
     "promo_action": "OTTIENI ACCESSO"

package/i18n/locales/ja-JP.json

@@ -1,4 +1,5 @@
 {
+  "scenes": "シーン",
   "faphouse": {
     "promo_text": "❤️ 動画のフル版をHD・4K画質で視聴・ダウンロード 🔥",
     "promo_action": "アクセスする"

package/i18n/locales/ko-KR.json

@@ -1,4 +1,5 @@
 {
+  "scenes": "장면",
   "faphouse": {
     "promo_text": "❤️ 영상 전체를 HD·4K 화질로 감상하고 다운로드 🔥",
     "promo_action": "액세스 받기"

package/i18n/locales/ru-RU.json

@@ -1,4 +1,5 @@
 {
+  "scenes": "Сцены",
   "faphouse": {
     "promo_text": "❤️ Смотрите и скачивайте ПОЛНЫЕ видео в качестве HD и 4K 🔥",
     "promo_action": "ПОЛУЧИТЬ ДОСТУП"

package/i18n/locales/zh-CN.json

@@ -1,4 +1,5 @@
 {
+  "scenes": "场景",
   "faphouse": {
     "promo_text": "❤️ 观看并下载完整视频，支持 HD 和 4K 🔥",
     "promo_action": "获取访问权限"

package/layouts/default.vue

@@ -12,7 +12,9 @@
 
       <LayoutSecondNav class="_to-sd"/>
 
-      <LayoutAgeBanner/>
+      <ClientOnly>
+        <LazyLayoutAgePopup v-if="isAgeGated"/>
+      </ClientOnly>
 
       <main
         id="main"
@@ -60,5 +62,7 @@ const { snackbarText, isSnackBarInPopup } = useSnackbar();
 
 const { isAuthorized } = useUser(AuthorizationApiService);
 
+const { isAgeGated } = useAgeGate();
+
 const htmlAttrs = computed(() => head.value.htmlAttrs);
 </script>

package/package.json

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

package/runtime/index.ts

@@ -47,7 +47,6 @@ export * from './utils/cleaners/clean-video-card';
 export * from './utils/cleaners/clean-model-info';
 export * from './utils/cleaners/clean-suggest-models';
 export * from './utils/video-data-add-model-portraits';
-export * from './utils/video-data-mark-top-categories';
 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';

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

@@ -197,4 +197,21 @@ describe('cleanVideoData — группы под плеером', () => {
     expect(data.tagGroups[0].items.map(item => item.name)).toEqual(['anal', 'rimming', 'doggy']);
     expect(data.tags).toEqual(['anal']);
   });
+
+  it('v2: top_categories — в topCategories по order, в группы под плеером не попадает', () => {
+    const data = cleanVideoData(raw([
+      { type: 'category', name: 'actions', title: 'Actions', order: 1, items: [{ name: 'anal', title: 'Anal' }] },
+      { type: 'top_categories', name: 'top_categories', title: 'top_categories', order: 2, items: [
+        { name: 'hunk', title: 'Hunk', order: 2, icon: '' },
+        { name: 'business man', title: 'Businessman', order: 1, icon: '' },
+      ] },
+    ]));
+
+    expect(data.topCategories.map(item => item.name)).toEqual(['business man', 'hunk']);
+    expect(data.tagGroups.map(group => group.name)).toEqual(['actions']);
+  });
+
+  it('без top_categories — строка над плеером без категорий', () => {
+    expect(cleanVideoData(raw(undefined)).topCategories).toEqual([]);
+  });
 });

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

@@ -1,4 +1,4 @@
-import type { IRawVideoData, IVideoData, ISceneGroup, ITimelineGroup, IVideoTagGroup } from '../../../types';
+import type { IRawVideoData, IVideoData, ISceneGroup, ITimelineGroup, IVideoTagGroup, IVideoTagGroupItem } from '../../../types';
 import { pickPortraitVariant } from '../pick-portrait-variant';
 import { modelGender } from '../model-placeholder';
 
@@ -82,6 +82,12 @@ const cleanTagGroups = (raw: IRawVideoData['entities']): IVideoTagGroup[] => (Ar
   .filter(group => group.items.length > 0)
   .sort(byOrder);
 
+// Строка над плеером: элементы группы `top_categories` как есть, без сверки с `categories`.
+const cleanTopCategories = (raw: IRawVideoData['entities']): IVideoTagGroupItem[] => ((Array.isArray(raw) ? raw : [])
+  .find(group => group?.type === 'top_categories')?.items ?? [])
+  .filter(item => item?.title && item.name)
+  .sort(byOrder);
+
 /** Нормализует сырые данные видео к типу IVideoData. */
 export const cleanVideoData = (data: IRawVideoData, theme?: string): IVideoData => ({
   guid: data.guid || '',
@@ -96,6 +102,7 @@ export const cleanVideoData = (data: IRawVideoData, theme?: string): IVideoData
   tagGroups: cleanTagGroups(data.entities),
   models: cleanVideoModels(data.models, theme),
   categories: data.categories || [],
+  topCategories: cleanTopCategories(data.entities),
   actions: data.actions || null,
   channelName: data.channel?.name || '',
   channelAvatar: data.channel?.avatar_url || '',

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

@@ -1,6 +1,6 @@
 import type { IChipsItem, IVideoTagGroupItem, VideoTagGroupType } from '../../../types';
 
-const PREFIX: Record<VideoTagGroupType, string> = { tag: 'tag', category: 'categories', search: 'search' };
+const PREFIX: Record<VideoTagGroupType, string> = { tag: 'tag', category: 'categories', search: 'search', top_categories: 'categories' };
 
 /** Элемент группы под плеером (контракт видео v2) → чипса: ссылка по типу группы и машинному `name`, показ по `title`. */
 export function convertTagGroupItemToChips(type: VideoTagGroupType, item: IVideoTagGroupItem): IChipsItem {

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

@@ -1,5 +1,5 @@
 import type { IRawVideoData, IVideoData, IRawModelCard } from '../../../../types';
-import { cleanVideoData, videoDataAddModelPortraits, videoDataMarkTopCategories, getUrlWithProxiedParams } from '../../../../runtime';
+import { cleanVideoData, videoDataAddModelPortraits, getUrlWithProxiedParams } from '../../../../runtime';
 
 export default defineEventHandler(async (event): Promise<IVideoData> => {
   const theme = useRuntimeConfig(event).public.theme;
@@ -17,16 +17,15 @@ export default defineEventHandler(async (event): Promise<IVideoData> => {
   const videoUrl = getUrlWithProxiedParams(`${apiUrl}/v2/video/url/${id}`, event);
   const modelsUrl = getUrlWithProxiedParams(`${apiUrl}/v2/models/list-by-video-id/${id}`, event);
 
-  const [videoRaw, modelsRaw, topCategoryNames] = await Promise.all([
+  const [videoRaw, modelsRaw] = await Promise.all([
     apiFetch(videoUrl, {
       method: 'GET',
       headers: clientHeaders,
     }),
     apiFetch(modelsUrl, { method: 'GET', headers: clientHeaders }).catch(() => null),
-    getTopCategoryNames(event),
   ]);
 
-  const videoData = videoDataMarkTopCategories(withDemoFallbacks(videoRaw.data as IRawVideoData), topCategoryNames);
+  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

@@ -1,4 +1,4 @@
-import { cleanVideoData, videoDataAddModelPortraits, videoDataMarkTopCategories, getUrlWithProxiedParams } from '../../../../runtime';
+import { cleanVideoData, videoDataAddModelPortraits, getUrlWithProxiedParams } from '../../../../runtime';
 import type { IRawVideoData, IVideoData, IRawModelCard } from '../../../../types';
 
 export default defineEventHandler(async (event): Promise<IVideoData> => {
@@ -15,16 +15,15 @@ export default defineEventHandler(async (event): Promise<IVideoData> => {
   const videoUrl = getUrlWithProxiedParams(`${apiUrl}/v2/video/url/${url}`, event);
   const modelsUrl = getUrlWithProxiedParams(`${apiUrl}/v2/models/list-by-video-url/${url}`, event);
 
-  const [videoRaw, modelsRaw, topCategoryNames] = await Promise.all([
+  const [videoRaw, modelsRaw] = await Promise.all([
     apiFetch(videoUrl, {
       method: 'GET',
       headers: clientHeaders,
     }),
     apiFetch(modelsUrl, { method: 'GET', headers: clientHeaders }).catch(() => null),
-    getTopCategoryNames(event),
   ]);
 
-  const videoData = videoDataMarkTopCategories(withDemoFallbacks(videoRaw.data as IRawVideoData), topCategoryNames);
+  const videoData = withDemoFallbacks(videoRaw.data as IRawVideoData);
   const modelsData = modelsRaw?.data as Record<'items', Array<IRawModelCard>>;
 
   return cleanVideoData(

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

@@ -37,8 +37,6 @@ export interface IRawVideoData {
     state?: string,
     title: string,
     unknownFields?: string,
-    /** Не из API: ставит BFF по топ-списку категорий. */
-    isTop?: boolean
   }[];
   actions: null;
   primary_thumb_rank: number; // unused

package/types/video-data.d.ts

@@ -30,7 +30,8 @@ export interface ISceneGroupScene {
 }
 
 /** Тип узла группы (контракт ручки видео v2): по нему строится ссылка элементов — тег, категория или поиск. */
-export type VideoTagGroupType = 'tag' | 'category' | 'search';
+/** `top_categories` — не группа под плеером, а список категорий для строки над плеером (`IVideoData.topCategories`). */
+export type VideoTagGroupType = 'tag' | 'category' | 'search' | 'top_categories';
 
 /** Элемент группы (контракт ручки видео v2). `name` — машинное название (ссылка), `title` — для показа. */
 export interface IVideoTagGroupItem {
@@ -82,9 +83,9 @@ export interface IVideoData {
         name: string;
         title: string;
         icon?: string;
-        /** Топ-категория — попадает в строку над плеером (BFF, по кешу `/v1/categories/top`). */
-        isTop?: boolean;
     }[];
+    /** Категории строки над плеером — из группы `top_categories` ответа v2, как прислал бекенд. */
+    topCategories: IVideoTagGroupItem[];
     actions: null;
     channelName: string;
     channelAvatar: string;

package/components/layout/age-banner.vue

@@ -1,108 +0,0 @@
-<!-- Плашка под шапкой, пока возрастная верификация требуется и не пройдена (useAgeGate) -->
-<template>
-  <section
-    v-if="isAgeGated"
-    class="layout-age-banner"
-  >
-    <div class="layout-age-banner__inner _container">
-      <p class="layout-age-banner__content">
-        <strong class="layout-age-banner__title">{{ t('age_gate.title') }}</strong>
-        <span class="layout-age-banner__text">{{ t('age_gate.text') }}</span>
-      </p>
-      <UiBtn
-        :disabled="isPending"
-        :title="t('age_gate.button')"
-        theme="primary"
-        size="l"
-        class="layout-age-banner__btn"
-        @click="onVerify"
-      >{{ t('age_gate.button') }}</UiBtn>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-const { t } = useI18n();
-const route = useRoute();
-const { isAgeGated, startVerification } = useAgeGate();
-
-const isPending = ref(false);
-
-const onVerify = async () => {
-  isPending.value = true;
-  try {
-    await startVerification(route.fullPath);
-  } finally {
-    isPending.value = false;
-  }
-};
-</script>
-
-<style lang="scss">
-.layout-age-banner {
-  position: sticky;
-  top: var(--header-height);
-  z-index: calc(#{$z-index-header} - 2);
-  padding-block: 10px;
-  background-color: $layout-age-banner-bg;
-
-  @include from-br($brkpnt-burger) {
-    $layout-nav-height: 59px;
-
-    top: calc(var(--header-height) + #{$layout-nav-height});
-    padding-block: 12px;
-  }
-}
-
-.layout-age-banner__inner {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  text-align: center;
-
-  @include from-br(sm) {
-    flex-direction: row;
-    justify-content: space-between;
-    gap: 32px;
-    text-align: left;
-  }
-}
-
-.layout-age-banner__content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.layout-age-banner__title {
-  @include font-base;
-
-  font-weight: 700;
-  color: $layout-age-banner-title;
-
-  @include from-br(sm) {
-    @include font-lg;
-  }
-}
-
-.layout-age-banner__text {
-  @include font-sm;
-
-  color: $layout-age-banner-text;
-
-  @include from-br(sm) {
-    @include font-base;
-  }
-}
-
-.layout-age-banner__btn {
-  --button-bg: #{$layout-age-banner-btn-bg};
-  --button-bg--hover: #{$layout-age-banner-btn-bg--hover};
-  --button-text: #{$layout-age-banner-btn-text};
-  --button-border: transparent;
-
-  flex-shrink: 0;
-  font-weight: 700;
-}
-</style>

package/runtime/utils/__tests__/video-data-mark-top-categories.test.ts

@@ -1,19 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import type { IRawVideoData } from '../../../types';
-import { videoDataMarkTopCategories } from '../video-data-mark-top-categories';
-
-const video = {
-  categories: [{ name: 'cartoon', title: 'Cartoon' }, { name: '3d', title: '3D' }, { name: 'Masturbation', title: 'Masturbation' }],
-} as IRawVideoData;
-
-describe('videoDataMarkTopCategories', () => {
-  it('marks categories from the top list, ignoring case and edge spaces', () => {
-    const result = videoDataMarkTopCategories(video, ['cartoon', 'masturbation ']);
-
-    expect(result.categories.map(category => category.isTop)).toEqual([true, false, true]);
-  });
-
-  it('leaves the video untouched without the top list', () => {
-    expect(videoDataMarkTopCategories(video, null)).toBe(video);
-  });
-});

package/runtime/utils/video-data-mark-top-categories.ts

@@ -1,21 +0,0 @@
-import type { IRawVideoData } from '../../types';
-
-const normalize = (name: string) => name.trim().toLowerCase();
-
-/**
- * Помечает категории ролика `isTop` по списку топ-категорий: в строку над плеером идут только топовые.
- * Списка нет (ручка упала) — ролик без пометок, строка покажет все категории, как раньше.
- * Имена сравниваются без регистра и краевых пробелов: в API встречается `masturbation `.
- * @param videoData - сырые данные видео
- * @param topNames - имена топ-категорий
- */
-export function videoDataMarkTopCategories(videoData: IRawVideoData, topNames: string[] | null): IRawVideoData {
-  if (!videoData?.categories?.length || !topNames) return videoData;
-
-  const top = new Set(topNames.map(normalize));
-
-  return {
-    ...videoData,
-    categories: videoData.categories.map(category => ({ ...category, isTop: top.has(normalize(category.name)) })),
-  };
-}

package/server/utils/top-category-names.ts

@@ -1,14 +0,0 @@
-import type { H3Event } from 'h3';
-import type { IRawCategoryCard } from '../../types';
-
-/**
- * Имена топ-категорий из кеша BFF (`cachedApiFetch`, 10 минут на домен + язык + нишу): к бекенду ходим
- * раз в TTL, а не на каждый ролик. Ошибка ручки — `null`, ролик от этого не падает.
- */
-export async function getTopCategoryNames(event: H3Event): Promise<string[] | null> {
-  const url = `${process.env.NUXT_PUBLIC_API_DOMAIN}/v1/categories/top`;
-
-  return cachedApiFetch<Array<IRawCategoryCard>>(url, event)
-    .then(categories => (Array.isArray(categories) ? categories.map(category => category.name) : null))
-    .catch(() => null);
-}