itube-specs 0.0.1027 → 0.0.1029

package/SITE_UPDATES.md

@@ -11,6 +11,13 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1029 — 2026-10-13
+
+- **Сайтам с рекламными ссылками над контентом на мобиле (videosection-redesign):** новая вторая навигация —
+  `LayoutSecondNav` в `layouts/default.vue` (до 1024px, на всех страницах основного лэйаута). Пункты задаёт сайт в
+  `appConfig.secondNav`: `{ title, link, icon?, dot?, featureFlag? }`, `link` — строка или адреса по нишам. Пример —
+  `config/second-nav.config.ts` videosection-redesign. Остальным сайтам ничего не делать: без `secondNav` блока нет.
+
 ## 0.0.1023 — 2026-10-08
 
 - **Всем сайтам:** в `package.json` заменить скрипт `spec` на `"spec": "sh node_modules/itube-specs/scripts/spec.sh"`

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

@@ -450,8 +450,6 @@ $header-language-trigger: $color-zinc-400;
 $header-language-trigger--hover: $color-white;
 $header-language-trigger-bg: transparent;
 $header-language-trigger-bg--hover: transparent;
-$header-language-badge-bg: $color-zinc-800;
-$header-language-badge-text: $color-zinc-200;
 $header-language-menu-bg: $color-night;
 $header-language-menu-border: $color-zinc-800;
 $header-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
@@ -1010,11 +1008,35 @@ $auth-register-link: $color-indigo-400;
 $auth-register-link--hover: $color-indigo-300;
 $auth-register-login: $color-zinc-500;
 
+// ─── Layout: second nav (рекламные ссылки над контентом на мобиле) ───
+$layout-second-nav-link-bg: $color-indigo-600;
+$layout-second-nav-link-text: $color-white;
+$layout-second-nav-dot-bg: $color-green-400;
+
 // ─── Native card ───
 $native-card-bg: $color-black;
 $native-card-primary: $color-zinc-400;
 $native-card-secondary: $color-zinc-500;
 
+// ─── Adv: плашка «Реклама» поверх креатива ───
+$adv-label-text: $color-white;
+$adv-label-bg: $color-black-50;
+
+// ─── Adv: партнёрская карусель FapHouse ───
+$faphouse-item-text: $video-card-text;
+$faphouse-item-text--hover: $video-card-text--hover;
+$faphouse-poster-bg: $native-card-bg;
+$faphouse-ad-text: $color-white;
+$faphouse-ad-bg: $color-indigo-600;
+$faphouse-duration-text: $color-white;
+$faphouse-duration-bg: $color-black-75;
+$faphouse-promo-bg-from: $color-amber-400;
+$faphouse-promo-bg-to: $color-amber-500;
+$faphouse-promo-text: $color-black;
+$faphouse-promo-shadow--hover: 0 10px 15px -3px #{$color-black-25};
+$faphouse-promo-action-text: $color-white;
+$faphouse-promo-action-bg: $color-red-700;
+
 // ─── Page: grouped categories ───
 $grouped-highlight-border: $color-zinc-800;
 $grouped-category-icon: $color-zinc-500;

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

@@ -506,8 +506,6 @@ $header-language-trigger: $color-white;
 $header-language-trigger--hover: $color-white;
 $header-language-trigger-bg: $color-slate-750;
 $header-language-trigger-bg--hover: $color-slate-700;
-$header-language-badge-bg: $color-slate-850;
-$header-language-badge-text: $color-white;
 $header-language-menu-bg: $color-slate-850;
 $header-language-menu-border: $color-white-10;
 $header-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
@@ -1037,11 +1035,35 @@ $auth-register-link: $color-indigo-soft;
 $auth-register-link--hover: $color-indigo-blue;
 $auth-register-login: $color-gray-400;
 
+// ─── Layout: second nav (рекламные ссылки над контентом на мобиле) ───
+$layout-second-nav-link-bg: $color-indigo-600;
+$layout-second-nav-link-text: $color-white;
+$layout-second-nav-dot-bg: $color-green-400;
+
 // ─── Native card ───
 $native-card-bg: $color-slate-800;
 $native-card-primary: $color-gray-400;
 $native-card-secondary: $color-gray-500;
 
+// ─── Adv: плашка «Реклама» поверх креатива ───
+$adv-label-text: $color-white;
+$adv-label-bg: $color-black-50;
+
+// ─── Adv: партнёрская карусель FapHouse ───
+$faphouse-item-text: $video-card-text;
+$faphouse-item-text--hover: $color-indigo-600;
+$faphouse-poster-bg: $color-gray-200;
+$faphouse-ad-text: $color-white;
+$faphouse-ad-bg: $color-indigo-600;
+$faphouse-duration-text: $color-white;
+$faphouse-duration-bg: $color-black-75;
+$faphouse-promo-bg-from: $color-amber-400;
+$faphouse-promo-bg-to: $color-amber-500;
+$faphouse-promo-text: $color-black;
+$faphouse-promo-shadow--hover: 0 10px 15px -3px #{$color-black-15};
+$faphouse-promo-action-text: $color-white;
+$faphouse-promo-action-bg: $color-red-700;
+
 // ─── Page: grouped categories ───
 $grouped-highlight-border: transparent;
 $grouped-category-icon: $color-gray-500;

package/components/filter/main.vue

@@ -9,7 +9,7 @@
     />
 
     <transition>
-      <LazyFilterPopup
+      <FilterPopup
         v-if="filterOpen"
         v-model="filterOpen"
         :title="$t('filter')"
@@ -37,7 +37,7 @@
             </UiBtn>
           </div>
         </template>
-      </LazyFilterPopup>
+      </FilterPopup>
     </transition>
   </div>
 </template>

package/components/info/model.vue

@@ -17,7 +17,7 @@
         v-if="akaNames.length"
         class="info-model__also"
       >
-        <span class="info-model__also-title">{{ t('also_known_as') }}</span>
+        <span class="info-model__also-title">{{ akaTitle }}</span>
         <template
           v-for="name in akaNames"
           :key="name"
@@ -206,6 +206,15 @@ const currentAvifSrc = computed(() => (isFallback.value ? placeholder.value.avif
 
 const akaNames = computed(() => props.card.akaNames.split(', ').filter(Boolean));
 
+const akaTitle = computed(() => {
+  const gender = (props.card.gender || '').toLowerCase();
+
+  if (gender === 'male' || /trans ?man/.test(gender)) return t('also_known_as_male');
+  if (gender === 'female' || /trans|shemale/.test(gender)) return t('also_known_as_female');
+
+  return t('also_known_as');
+});
+
 const socialItems = computed<ILinkItem[]>(() => (
   Object.entries(props.card.social || {}).map(([key, value]) => ({
     name: value || '',
@@ -342,8 +351,13 @@ const shareModelCard = computed<IModelCard>(() => ({
 }
 
 .info-model__also-name {
-  color: $info-model-also;
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
+  vertical-align: top;
+  color: $info-model-also;
 }
 
 .info-model__also-name:not(:last-of-type)::after {

package/components/layout/header.vue

@@ -287,9 +287,6 @@ function closeLanguage() {
 
 .layout-header__language-badge {
   @include locale-badge;
-
-  background-color: $header-language-badge-bg;
-  color: $header-language-badge-text;
 }
 
 .layout-header__language-angle {

package/components/layout/second-nav.vue

@@ -0,0 +1,80 @@
+<!-- Вторая навигация: ряд рекламных ссылок над контентом, только на мобиле (до бургера), на всех страницах
+основного лэйаута. Пункты — `appConfig.secondNav` сайта; пусто — блока нет. -->
+<template>
+  <nav
+    v-if="items.length"
+    class="layout-second-nav"
+  >
+    <a
+      v-for="item in items"
+      :key="item.title"
+      :href="item.href"
+      :class="{'--dot': item.dot}"
+      class="layout-second-nav__link"
+      target="_blank"
+      rel="nofollow noopener sponsored"
+    >
+      {{ t(`navigation.${item.title}`) }}
+      <UiIcon
+        v-if="item.icon"
+        :name="item.icon"
+        size="14"
+      />
+    </a>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import type { ISecondNavItem } from '../../types';
+
+const { t } = useI18n();
+const { featureFlags } = useRuntimeConfig().public;
+const secondNav = (useAppConfig().secondNav || []) as ISecondNavItem[];
+const nicheState = useState<string>('niche');
+const defaultNiche = NicheHelper.getSiteDefaultNiche();
+
+const items = computed(() => {
+  const niche = nicheState.value || defaultNiche;
+
+  return secondNav
+    .filter(item => !item.featureFlag || featureFlags[item.featureFlag])
+    .map(item => ({ ...item, href: typeof item.link === 'string' ? item.link : item.link[niche] }))
+    .filter(item => !!item.href);
+});
+</script>
+
+<style lang="scss">
+.layout-second-nav {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  padding: 8px var(--container-padding-inline);
+}
+
+.layout-second-nav__link {
+  @include font-sm;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  color: $layout-second-nav-link-text;
+  background-color: $layout-second-nav-link-bg;
+  border-radius: $radius-md;
+}
+
+.layout-second-nav__link.--dot::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 10px;
+  height: 10px;
+  background-color: $layout-second-nav-dot-bg;
+  border-radius: $radius-full;
+  transform: translate(40%, -40%);
+}
+</style>

package/i18n/locales/de-DE.json

@@ -510,5 +510,7 @@
     "last_updated": "Zuletzt aktualisiert",
     "longest": "Längste",
     "longest_short": "Längste"
-  }
+  },
+  "also_known_as_male": "Auch bekannt als:",
+  "also_known_as_female": "Auch bekannt als:"
 }

package/i18n/locales/en-US.json

@@ -1,4 +1,6 @@
 {
+  "also_known_as_male": "Also known as:",
+  "also_known_as_female": "Also known as:",
   "model_about": "About",
   "top_models": "Top models",
   "playlists_empty": {

package/i18n/locales/es-ES.json

@@ -510,5 +510,7 @@
     "last_updated": "Última actualización",
     "longest": "Más largo",
     "longest_short": "Largos"
-  }
+  },
+  "also_known_as_male": "También conocido como:",
+  "also_known_as_female": "También conocida como:"
 }

package/i18n/locales/fr-FR.json

@@ -510,5 +510,7 @@
     "last_updated": "Dernière mise à jour",
     "longest": "Les plus longues",
     "longest_short": "Longues"
-  }
+  },
+  "also_known_as_male": "Également connu sous le nom de :",
+  "also_known_as_female": "Également connue sous le nom de :"
 }

package/i18n/locales/it-IT.json

@@ -510,5 +510,7 @@
     "last_updated": "Ultimo aggiornamento",
     "longest": "Più lungo",
     "longest_short": "Lunghi"
-  }
+  },
+  "also_known_as_male": "Conosciuto anche come:",
+  "also_known_as_female": "Conosciuta anche come:"
 }

package/i18n/locales/ja-JP.json

@@ -510,5 +510,7 @@
     "last_updated": "最終更新",
     "longest": "最長",
     "longest_short": "最長"
-  }
+  },
+  "also_known_as_male": "別名：",
+  "also_known_as_female": "別名："
 }

package/i18n/locales/ko-KR.json

@@ -510,5 +510,7 @@
     "last_updated": "마지막 업데이트",
     "longest": "가장 긴",
     "longest_short": "가장 긴"
-  }
+  },
+  "also_known_as_male": "다른 이름:",
+  "also_known_as_female": "다른 이름:"
 }

package/i18n/locales/ru-RU.json

@@ -510,5 +510,7 @@
     "last_updated": "Последние",
     "longest": "Самые длинные",
     "longest_short": "Длинные"
-  }
+  },
+  "also_known_as_male": "Также известен как:",
+  "also_known_as_female": "Также известна как:"
 }

package/i18n/locales/zh-CN.json

@@ -510,5 +510,7 @@
     "last_updated": "最后更新",
     "longest": "最长",
     "longest_short": "最长"
-  }
+  },
+  "also_known_as_male": "又名：",
+  "also_known_as_female": "又名："
 }

package/layouts/default.vue

@@ -10,6 +10,8 @@
         hydrate-on-idle
       />
 
+      <LayoutSecondNav class="_to-sd"/>
+
       <main
         id="main"
         class="main"

package/package.json

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

package/types/index.d.ts

@@ -47,6 +47,7 @@ export * from './model-filter.d.ts';
 export * from './model-filter-payload.d.ts';
 export * from './multi-suggest.d.ts';
 export * from './navigation-items.d.ts';
+export * from './second-nav-item.d.ts';
 export * from './link-item.d.ts';
 export * from './fluid-player.d.ts';
 export * from './chips-item.d.ts';

package/types/second-nav-item.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Пункт второй навигации — ряд рекламных ссылок над контентом на мобиле (`appConfig.secondNav`).
+ * `link` — один адрес или адреса по нишам (`{ straight, gay, shemale }`); нет адреса для ниши — пункт
+ * не показывается. `title` — ключ `navigation.<title>`.
+ */
+export interface ISecondNavItem {
+  title: string
+  link: string | Record<string, string>
+  icon?: string
+  /** Зелёная точка «онлайн» в углу пункта. */
+  dot?: boolean
+  /** Имя фича-флага сайта: флаг выключен — пункта нет. */
+  featureFlag?: string
+}