itube-specs 0.0.1070 → 0.0.1071

package/SITE_UPDATES.md

@@ -11,6 +11,22 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1071 — 2026-11-03
+
+- **Сайтам со своей темой в `assets/scss/vars/_theme.scss` (hd-sex-new), срочно:** без новых токенов сборка падает
+  на `Undefined variable`. Добавить `$layout-age-banner-bg`, `$layout-age-banner-title`, `$layout-age-banner-text`,
+  `$layout-age-banner-btn-bg`, `$layout-age-banner-btn-bg--hover`, `$layout-age-banner-btn-text`, `$ui-img-gate-bg`,
+  `$ui-img-gate-text` — значения по аналогии с `themes/dark|light/_theme.scss` слоя.
+- **Сайтам с `FeatureAgeVerificationEnabled` — к сведению:** верификация больше не редиректит на agerify при заходе,
+  а тестовый `NL` в списке стран заменён на `GB`.
+  Пока она не пройдена, превью (видео, категории, каналы, плейлисты, вебкамы, FapHouse, аватары каналов и
+  пользователей, картинки в чипсах, логотипы спонсоров, картинка в шапке категории/канала) показываются
+  заглушкой «18+» (не закрыты только портреты моделей), ховер-превью не играют, под шапкой липкая плашка с кнопкой
+  верификации (`LayoutAgeBanner`). Свой `UiImg` со взрослым превью — ставить проп `adult`. Плеер при этом заблокирован (сплошной фон без постера, текст и
+  кнопка верификации, без рекламы) — нужен `itube-modern-player` ≥ 0.16.0 (`npm i itube-modern-player@^0.16.0`), на
+  старом плеер гейт не покажет и ролик будет играть. Новая группа общих ключей `age_gate` (пока только en-US).
+  Сайтам без флага делать ничего не надо.
+
 ## 0.0.1068 — 2026-11-03
 
 - **Всем — решить флаг:** верификация возраста (редирект на agerify, пока не пройдена) снова работает, за флагом

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

@@ -33,6 +33,14 @@ $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;
+$ui-img-gate-bg: $color-zinc-800;
+$ui-img-gate-text: $color-zinc-500;
 
 // ─── Page footer links (mixin) ───
 $page-footer-links-border: $color-zinc-800;

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

@@ -44,6 +44,14 @@ $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;
+$ui-img-gate-bg: $color-gray-200;
+$ui-img-gate-text: $color-gray-500;
 
 // ─── Page footer links (mixin) ───
 $page-footer-links-border: transparent;

package/components/adv/faphouse/index.vue

@@ -39,6 +39,7 @@
             <UiImg
               :src="item.imageUrl"
               :alt="item.title"
+              adult
               class="adv-faphouse__img"
               width="335"
               height="188"
@@ -46,7 +47,7 @@
               loading="lazy"
             />
             <video
-              v-if="previewIndex === index && item.previewUrl"
+              v-if="previewIndex === index && item.previewUrl && !isAgeGated"
               :src="item.previewUrl"
               class="adv-faphouse__video"
               muted
@@ -84,6 +85,8 @@ const { items } = isEnabled.value ? await useFetchFaphouse() : { items: computed
 const isMobile = useState<boolean>('isMobile');
 const previewIndex = ref(-1);
 
+const { isAgeGated } = useAgeGate();
+
 const onPreviewShow = (index: number) => {
   if (isMobile.value) return;
 

package/components/card/category.vue

@@ -11,6 +11,7 @@
         :src="currentImage"
         :loading="priority ? 'eager' : 'lazy'"
         :priority="priority"
+        adult
         class="card-category__img"
         sizes="320px"
         width="320"

package/components/card/channel.vue

@@ -12,6 +12,7 @@
         :alt="card.name"
         :loading="priority ? 'eager' : 'lazy'"
         :priority="priority"
+        adult
         class="card-channel__img"
         width="480"
         height="270"

package/components/card/collections-more.vue

@@ -16,6 +16,7 @@
         :width="ThumbSize.Small.split('x')[0]"
         :height="ThumbSize.Small.split('x')[1]"
         alt=""
+        adult
         class="card-collections-more__thumb"
       />
     </span>

package/components/card/playlist-mini.vue

@@ -13,6 +13,7 @@
         :key="`playlist-mini-image-${index}`"
         :src="getCurrentImage(index)"
         :alt="card.name"
+        adult
         class="card-playlist-mini__img"
         width="320"
         height="180"

package/components/card/playlist.vue

@@ -20,6 +20,7 @@
         :alt="card.name"
         :loading="priority ? 'eager' : 'lazy'"
         :priority="priority"
+        adult
         class="card-playlist__img"
         @error="onImageError(index)"
       />
@@ -83,6 +84,7 @@
           v-if="avatar"
           :src="avatar"
           :alt="card.username"
+          adult
           class="card-collections-more__count _from-xs"
           width="36"
           height="36"

package/components/card/video/index.vue

@@ -26,6 +26,7 @@
         :priority="priority"
         :alt="card.title"
         sizes="auto, (min-width: 1440px) 25vw, (min-width: 900px) 33vw, (min-width: 370px) 50vw, 100vw"
+        adult
         class="card-video__poster"
         width="480"
         height="270"
@@ -78,6 +79,7 @@
           :loading="loading"
           :src="currentAvatar"
           :alt="card.channelName"
+          adult
           class="card-video__channel-logo"
           width="44"
           height="44"
@@ -174,7 +176,9 @@ const { generateLink } = useGenerateLink();
 const previewId = useId();
 const { activePreviewId, startPreviewByHover, stopPreviewByHover, startPreviewByTouch } = useVideoPreview();
 
-const isPreviewShow = computed(() => activePreviewId.value === previewId);
+const { isAgeGated } = useAgeGate();
+
+const isPreviewShow = computed(() => activePreviewId.value === previewId && !isAgeGated.value);
 
 const posterError = ref(false);
 const avatarError = ref(false);

package/components/card/video/mini.vue

@@ -9,6 +9,7 @@
     <UiImg
       :src="currentPoster"
       :alt="card.title"
+      adult
       class="card-video-mini__img"
       sizes="140px"
       width="1600"

package/components/card/webcam/index.vue

@@ -29,6 +29,7 @@
       <UiImg
         :src="poster"
         :alt="model.name"
+        adult
         class="card-webcam__img"
         width="335"
         height="188"
@@ -38,7 +39,7 @@
       />
 
       <video
-        v-if="isPreviewActive && model.previewUrl"
+        v-if="isPreviewActive && model.previewUrl && !isAgeGated"
         ref="videoRef"
         :class="{'--ready': isPreviewReady}"
         class="card-webcam__video"
@@ -216,6 +217,8 @@ const isPreviewActive = previewSlot.isActive(previewId.value);
 // видео прозрачным, чтобы поверх постера не висел чёрный прямоугольник
 const isPreviewReady = ref(false);
 
+const { isAgeGated } = useAgeGate();
+
 /** Ниша в пути: у straight префикса нет, у остальных — `/gay`, `/shemale`. */
 /**
  * Возраст в тумбе — ссылка на раздел с фильтром возраста ±1 год: так делал боевой

package/components/info/main.vue

@@ -13,6 +13,7 @@
         :avif-src="currentAvifSrc"
         :alt="title"
         :sizes="IMG_SIZES"
+        adult
         class="info-main__img"
         width="80"
         height="80"

package/components/layout/age-banner.vue

@@ -0,0 +1,108 @@
+<!-- Плашка под шапкой, пока возрастная верификация требуется и не пройдена (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/components/library/feed.vue

@@ -17,6 +17,7 @@
           :alt="item.title"
           :loading="priority ? 'eager' : 'lazy'"
           :priority="priority"
+          adult
           class="library-feed__avatar"
           width="64"
           height="64"

package/components/library/item.vue

@@ -27,6 +27,7 @@
             v-if="avatar.avatarUrl && !failedAvatars.includes(index)"
             :src="avatar.avatarUrl"
             :alt="avatar.title"
+            adult
             class="library-item__photo"
             width="40"
             height="40"

package/components/library/upload-card.vue

@@ -11,6 +11,7 @@
         :urls="upload.thumbUrls"
         :alt="name"
         sizes="auto, (min-width: 1440px) 25vw, (min-width: 900px) 33vw, (min-width: 370px) 50vw, 100vw"
+        adult
         class="library-upload-card__image"
         width="480"
         height="270"

package/components/player/channel.vue

@@ -9,6 +9,7 @@
         v-if="avatar"
         :src="avatar"
         :alt="$t('channel_logo')"
+        adult
         class="player-channel__avatar"
         sizes="36px"
         width="36"

package/components/player/core.vue

@@ -20,6 +20,7 @@
     @menurequest="onMenuRequest"
     @pause="onPause"
     @ready="siteHooks.onReady?.()"
+    @blockedclick="startVerification(route.fullPath)"
   >
     <template
       v-if="siteHooks.pauseScreen"
@@ -79,6 +80,9 @@ const emit = defineEmits<{
 
 const { t, n, locale } = useI18n();
 
+const route = useRoute();
+const { isAgeGated, startVerification } = useAgeGate();
+
 const siteHooks = usePlayerSiteHooks();
 const isPauseScreen = computed(() => !!siteHooks.pauseScreen?.enabled.value);
 
@@ -206,7 +210,7 @@ const currentSource = computed<VideoSource>(() => {
     type: 'application/x-mpegurl',
     title: props.data.title,
     description: props.data.description,
-    poster: src
+    poster: src && !isAgeGated.value
         ? {
           src,
           fallback,
@@ -217,7 +221,7 @@ const currentSource = computed<VideoSource>(() => {
           alt: props.data.title,
         }
         : undefined,
-    thumbnails: props.data.vttUrl,
+    thumbnails: isAgeGated.value ? undefined : props.data.vttUrl,
     // Главы: плеер сам рисует кнопку сцен, подписи и превью из VTT.
     // ITimestamp.duration — момент старта главы (секунды).
     // `end_duration` бекенд отдаёт не всегда — без него плеер досчитывает конец сам
@@ -251,7 +255,7 @@ function nextPreviewMeta(card: IVideoCard): PreviewMetaItem[] {
 // externalAdvance плеер его не грузит (реальный стрим придёт по ?view из main.vue).
 const nextSource = computed<VideoSource | null>(() => {
   const card = props.nextVideo;
-  if (!card) return null;
+  if (!card || isAgeGated.value) return null;
 
   const poster = card.thumbUrls?.webp?.[ThumbSize.Big] || card.thumbUrls?.webp?.[ThumbSize.Medium];
 
@@ -333,11 +337,13 @@ const options = computed<Omit<PlayerOptions, 'source'>>(() => ({
   labels: { sceneTypes: t('jump_to') },
   // Запоминаем громкость/mute в localStorage.
   persist: { key: PLAYER_PERSIST_KEY },
+  blocked: isAgeGated.value ? { text: t('age_gate.player_text'), button: t('age_gate.button') } : undefined,
 }));
 
 // Async-фабрика: обёртка вызывает её параллельно загрузке ядра и конструирует плеер
 // с готовым adConfig — нам не нужно синхронизировать VAST-запрос с инициализацией.
 async function loadAdConfig(): Promise<AdsOptions | undefined> {
+  if (isAgeGated.value) return undefined;
   try {
     const vastTag = await AdvertsHelper.getPrerollVastLink(AdvertsHelper.getPrerollSpotType());
     if (vastTag && vastTag.trim() !== '') {
@@ -353,6 +359,7 @@ async function loadAdConfig(): Promise<AdsOptions | undefined> {
 <style lang="scss">
 .player-core {
   position: relative;
+  isolation: isolate;
   aspect-ratio: 16/9;
   overflow: hidden;
   width: 100%;

package/components/player/follow.vue

@@ -7,6 +7,7 @@
     <UiImg
       :src="card.avatarUrl || '/img/logo-placeholder.svg'"
       :alt="$t('channel_logo')"
+      adult
       class="player-follow__img"
       sizes="48px"
       width="48"

package/components/player/sponsored.vue

@@ -5,6 +5,7 @@
       v-if="card.logo"
       :src="card.logo"
       :alt="card.title"
+      adult
       class="player-sponsored__logo"
       sizes="56px"
       width="56"

package/components/ui/avatar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ui-avatar">
     <img
-      v-if="src || data.avatar"
+      v-if="(src || data.avatar) && !isAgeGated"
       :src="avatar"
       :width="size"
       :height="size"
@@ -11,7 +11,7 @@
       v-else
       :style="{ width: size + 'px', height: size + 'px' }"
       class="ui-avatar__placeholder"
-    >{{ avatar }}</span>
+    >{{ isAgeGated ? initial : avatar }}</span>
   </div>
 </template>
 
@@ -30,6 +30,10 @@ const props = withDefaults(defineProps<{
 const data = computed(() => useState<IProfileData>('profileData').value);
 
 const avatar = computed(() => props.src || (data.value && (data.value.avatar || data.value.username.charAt(0))));
+
+const initial = computed(() => data.value?.username?.charAt(0) || '');
+
+const { isAgeGated } = useAgeGate();
 </script>
 
 <style lang="scss">

package/components/ui/chips.vue

@@ -29,6 +29,7 @@
       :class="`--${imageFit}`"
       :width="imageBox.width"
       :height="imageBox.height"
+      adult
       class="ui-chips__img"
       sizes="auto, 24px"
     />

package/components/ui/img.vue

@@ -2,8 +2,16 @@
   <!-- `<picture>` только когда есть avif: обёртка сдвигает картинку на уровень ниже, а
   `card/playlist.vue` и `playlist-mini.vue` целятся в свои UiImg через `:first-child`/`:nth-child(2)`
   — внутри `<picture>` каждая из них стала бы первым ребёнком, и раскладка поехала бы. -->
+  <span
+    v-if="adult && isAgeGated"
+    v-bind="attrs"
+    :style="{ aspectRatio: `${width} / ${height}`, '--ui-img-gate-width': `${width}px` }"
+    class="ui-img-gate"
+  >
+    <span class="ui-img-gate__label">{{ $t('age_gate.thumb') }}</span>
+  </span>
   <picture
-    v-if="avifSrcset"
+    v-else-if="avifSrcset"
     class="ui-img"
   >
     <source
@@ -41,6 +49,8 @@ const props = withDefaults(defineProps<{
   loading?: 'lazy' | 'eager',
   fit?: 'cover' | 'contain' | 'fill' | 'inside' | 'outside',
   priority?: boolean,
+  /** Взрослое превью: при возрастном гейте вместо картинки — заглушка. Портреты моделей и аватары — без него. */
+  adult?: boolean,
 }>(), {
   loading: 'lazy',
   fit: 'cover',
@@ -48,6 +58,8 @@ const props = withDefaults(defineProps<{
 
 const attrs = useAttrs();
 
+const { isAgeGated } = useAgeGate();
+
 /**
  * `sizes="auto"` точнее любого авторского списка, но молодой: Chrome 126, Firefox 150
  * (апрель 2026), Safari 27 (сентябрь 2026). Где не поддержан — деградирует в `100vw`,
@@ -102,4 +114,40 @@ const emit = defineEmits<{
 .ui-img source {
   display: none;
 }
+
+:where(.ui-img-gate) {
+  position: relative;
+  display: block;
+  width: var(--ui-img-gate-width);
+  max-width: 100%;
+}
+
+.ui-img-gate {
+  container-type: inline-size;
+  background-color: $ui-img-gate-bg;
+}
+
+.ui-img-gate__label {
+  @include font-lg;
+
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  color: $ui-img-gate-text;
+}
+
+@include to-cq(160px) {
+  .ui-img-gate__label {
+    @include font-xs;
+  }
+}
+
+@include to-cq(56px) {
+  .ui-img-gate__label {
+    @include font-4xs;
+  }
+}
 </style>

package/composables/use-age-gate.ts

@@ -0,0 +1,16 @@
+/**
+ * Возрастной гейт: верификация в регионе посетителя требуется и ещё не пройдена. Состояние
+ * ставит middleware/age.global.ts на сервере; пока оно включено, взрослые превью заменяются
+ * заглушкой, плеер заблокирован, под шапкой плашка. `startVerification` уводит на agerify и
+ * возвращает на текущую страницу.
+ */
+export const useAgeGate = () => {
+  const isAgeGated = useState<boolean>('age-gate', () => false);
+
+  const startVerification = async (backPath: string) => {
+    const { url } = await $fetch<{ url: string }>('/bff/age/url', { query: { back: backPath } });
+    if (url) window.location.href = url;
+  };
+
+  return { isAgeGated, startVerification };
+};

package/i18n/locales/en-US.json

@@ -1,4 +1,11 @@
 {
+  "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",
+    "button": "Verify age",
+    "player_text": "Confirm your age to watch this video"
+  },
   "faphouse": {
     "promo_text": "❤️ Watch and download FULL videos in HD & 4K quality 🔥",
     "promo_action": "GET ACCESS"

package/layouts/default.vue

@@ -12,6 +12,8 @@
 
       <LayoutSecondNav class="_to-sd"/>
 
+      <LayoutAgeBanner/>
+
       <main
         id="main"
         class="main"

package/middleware/age.global.ts

@@ -1,8 +1,8 @@
-import { isGeoMatch, getAgeValidationUrl, isAgeVerified } from '../runtime';
+import { isGeoMatch, isAgeVerified } from '../runtime';
+import { useAgeGate } from '../composables/use-age-gate';
 
-export default defineNuxtRouteMiddleware(async (to) => {
+export default defineNuxtRouteMiddleware(async () => {
   if (!import.meta.server) return;
-  if (to.path.startsWith('/bff/age/verify')) return;
 
   const config = useRuntimeConfig();
   if (!config.public.featureFlags?.FeatureAgeVerificationEnabled) return;
@@ -10,12 +10,10 @@ export default defineNuxtRouteMiddleware(async (to) => {
   const event = useRequestEvent();
   if (!(await isGeoMatch(event, config))) return;
 
-  const verified = await isAgeVerified(event, config);
-
-  if (!verified) {
-    const { url } = await getAgeValidationUrl(event, to.path, config);
-    if (url) {
-      return navigateTo(url, { external: true });
-    }
+  const { isAgeGated } = useAgeGate();
+  try {
+    isAgeGated.value = !(await isAgeVerified(event, config));
+  } catch {
+    isAgeGated.value = true;
   }
 });

package/package.json

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

package/runtime/utils/server/age.ts

@@ -4,7 +4,7 @@ import { getClientHeaders } from './get-client-headers';
 /** Возвращает true если пользователь находится в регионе где требуется верификация возраста. */
 export async function isGeoMatch(event, _config) {
   const AGE_VERIFY_REGIONS: string[] = [];
-  const AGE_VERIFY_COUNTRIES = ['NL'];
+  const AGE_VERIFY_COUNTRIES = ['GB'];
 
   const headers = getClientHeaders(event);
   const countryCode = headers[ 'countryCode' ];

package/server/api/age/url.get.ts

@@ -0,0 +1,11 @@
+import { getQuery } from 'h3';
+import { getAgeValidationUrl } from '../../../runtime';
+
+export default defineEventHandler(async (event) => {
+  const back = String(getQuery(event).back || '/');
+  const backPath = back.startsWith('/') && !back.startsWith('//') ? back : '/';
+
+  const { url } = await getAgeValidationUrl(event, backPath, useRuntimeConfig(event));
+
+  return { url };
+});