itube-specs 0.0.1028 → 0.0.1031

package/SITE_UPDATES.md

@@ -11,6 +11,21 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1030 — 2026-10-13
+
+- **Всем сайтам с плеером:** поднять `itube-modern-player` до `^0.15.0` (`npm install itube-modern-player@^0.15.0`).
+  Слой теперь отдаёт постеру ролика `fallback` — jpeg из `thumbUrls.jpeg` (его сохраняет `cleanVideoData`), и плеер
+  0.15 рисует webp-постер через `<picture>` с jpeg для браузеров без webp. Не поднять — ничего не сломается, поле
+  молча игнорируется, фолбэка просто не будет. Сайтам с форком `components/player/core.vue` (hdsex-remaster,
+  videosection-redesign) — добавить `fallback` в постер, образец — коммит videosection-redesign.
+
+## 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

@@ -1008,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

@@ -1035,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-bg: $color-white;
+$native-card-primary: $color-gray-900;
 $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/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/components/player/core.vue

@@ -172,6 +172,8 @@ const currentSource = computed<VideoSource>(() => {
   const big = props.data.thumbUrls?.webp?.[ThumbSize.Big];
   const medium = props.data.thumbUrls?.webp?.[ThumbSize.Medium];
   const src = big || medium;
+  // jpeg — для браузеров без webp: плеер (0.15+) рисует <picture> с ним в <img>
+  const fallback = props.data.thumbUrls?.jpeg?.[ThumbSize.Big] || props.data.thumbUrls?.jpeg?.[ThumbSize.Medium];
 
   return {
     src: props.data.videoUrl,
@@ -181,6 +183,7 @@ const currentSource = computed<VideoSource>(() => {
     poster: src
         ? {
           src,
+          fallback,
           srcset: big && medium ? `${medium} 480w, ${big} 1280w` : undefined,
           sizes: big && medium ? '100vw' : undefined,
           width: 1280,

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.1028",
+  "version": "0.0.1031",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {

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

@@ -19,7 +19,7 @@ describe('cleanVideoData', () => {
       channel: { name: 'Channel', avatar_url: 'https://img.com/ch.jpg' },
       url: '/video/1',
       preview_url: 'https://img.com/preview.mp4',
-      thumb_urls: { webp: { '320x180': 'small' } },
+      thumb_urls: { webp: { '320x180': 'small' }, jpeg: { '320x180': 'small-jpeg' } },
       vtt_url: '/vtt',
       vtt_sprite_url: '/sprite',
       created: 1700000000,
@@ -32,7 +32,7 @@ describe('cleanVideoData', () => {
     const result = cleanVideoData(raw as any);
     expect(result.guid).toBe('v-1');
     expect(result.channelName).toBe('Channel');
-    expect(result.thumbUrls).toEqual({ webp: { '320x180': 'small' } });
+    expect(result.thumbUrls).toEqual({ webp: { '320x180': 'small' }, jpeg: { '320x180': 'small-jpeg' } });
     expect(result.vttUrl).toBe('/vtt');
     expect(result.videoUrl).toBe('/stream');
     expect(result.isDeleted).toBe(false);
@@ -150,6 +150,11 @@ describe('cleanVideoData', () => {
     ]);
   });
 
+  it('тумбы без jpeg — без ключа jpeg', () => {
+    const result = cleanVideoData({ thumb_urls: { webp: { '320x180': 'small' } } } as any);
+    expect(result.thumbUrls).toEqual({ webp: { '320x180': 'small' } });
+  });
+
   it('пустые данные → дефолты', () => {
     const result = cleanVideoData({} as any);
     expect(result.guid).toBe('');

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

@@ -84,6 +84,7 @@ export const cleanVideoData = (data: IRawVideoData, theme?: string): IVideoData
   previewUrl: data.preview_url || '',
   thumbUrls: data.thumb_urls ? {
     webp: data.thumb_urls.webp,
+    ...(data.thumb_urls.jpeg ? { jpeg: data.thumb_urls.jpeg } : {}),
   } : undefined,
   vttUrl: data.vtt_url || '',
   vttSpriteUrl: data.vtt_sprite_url || '',

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
+}

package/types/thumbs-urls.d.ts

@@ -1,6 +1,7 @@
 import type { ThumbSize } from '../runtime/constants/thumb-size';
 
-/** Очищенные тумбы — только webp */
+/** Очищенные тумбы: webp; jpeg — только у ролика целиком, фолбэк постера плеера. */
 export interface IThumbUrls {
   webp: Partial<Record<ThumbSize, string>>;
+  jpeg?: Partial<Record<ThumbSize, string>>;
 }