itube-specs 0.0.1029 → 0.0.1034

package/SITE_UPDATES.md

@@ -11,6 +11,24 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1033 — 2026-10-14
+
+- **Сайтам со своей темой (hdsex-remaster):** в `_theme.scss` добавить `$switcher-icon--live: $color-emerald-400;` и
+  поменять `$switcher-icon--active` на `$color-white-70`. Иконка «в эфире» в переключателе разделов теперь зелёная
+  всегда (опция с `live: true`), а активная иконка — белая, как в макете страницы моделей. Не сделать — сборка упадёт
+  на неизвестном токене. Образец — коммит hdsex-remaster.
+- **Сайтам с `FeatureWebcamsEnabled`:** ничего делать не надо — на странице моделей (`ViewModels`) заголовок встаёт
+  наверх с переключателем «Видео / Вебкам», как на странице вебкамов. Сайтам с форком `pages/models/index.vue` или
+  `components/view/models.vue` — сверить с апстримом.
+
+## 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):** новая вторая навигация —

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

@@ -414,8 +414,6 @@ $niche-switch-text--checked: $color-white;
 $footer-language-bg: $color-zinc-800-50;
 $footer-language-bg--hover: $color-zinc-700;
 $footer-language-text: $color-zinc-400;
-$footer-language-badge-bg: $color-zinc-800;
-$footer-language-badge-text: $color-zinc-200;
 $footer-language-menu-bg: $color-night;
 $footer-language-menu-border: $color-zinc-800;
 $footer-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
@@ -1190,7 +1188,8 @@ $switcher-text--hover: $color-white;
 $switcher-text--active: $color-white;
 $switcher-bg--active: $color-indigo-600;
 $switcher-icon: $color-zinc-500;
-$switcher-icon--active: $color-emerald-400;
+$switcher-icon--active: $color-white-70;
+$switcher-icon--live: $color-emerald-400;
 $switcher-subtitle: $color-zinc-600;
 $switcher-subtitle--active: $color-white-60;
 

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

@@ -470,8 +470,6 @@ $niche-switch-text--checked: $color-white;
 $footer-language-bg: $color-slate-750;
 $footer-language-bg--hover: $color-slate-700;
 $footer-language-text: $color-white;
-$footer-language-badge-bg: $color-slate-850;
-$footer-language-badge-text: $color-white;
 $footer-language-menu-bg: $color-slate-850;
 $footer-language-menu-border: $color-white-10;
 $footer-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
@@ -1041,8 +1039,8 @@ $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: плашка «Реклама» поверх креатива ───
@@ -1217,7 +1215,8 @@ $switcher-text--hover: $color-gray-950;
 $switcher-text--active: $color-white;
 $switcher-bg--active: $color-indigo-600;
 $switcher-icon: $color-gray-500;
-$switcher-icon--active: $color-emerald-400;
+$switcher-icon--active: $color-white-70;
+$switcher-icon--live: $color-emerald-400;
 $switcher-subtitle: $color-gray-500;
 $switcher-subtitle--active: $color-white-60;
 

package/components/card/video/index.vue

@@ -24,8 +24,8 @@
         :urls="card.thumbUrls"
         :loading="loading"
         :priority="priority"
-        :sizes="`(max-width: ${CSS_BREAKPOINTS.lg}px) 180px, 480px`"
         :alt="card.title"
+        sizes="auto, (min-width: 1440px) 25vw, (min-width: 900px) 33vw, (min-width: 370px) 50vw, 100vw"
         class="card-video__poster"
         width="480"
         height="270"
@@ -137,7 +137,6 @@
 <script setup lang="ts">
 import type { IVideoCard } from '../../../types';
 import { convertString, getDuration } from '../../../runtime';
-import { CSS_BREAKPOINTS } from '../../../config/css-breakpoints';
 
 const featureFlags = useRuntimeConfig().public.featureFlags;
 

package/components/layout/footer-language.vue

@@ -89,9 +89,6 @@ function handler() {
 
 .layout-footer-language__badge {
   @include locale-badge;
-
-  background-color: $footer-language-badge-bg;
-  color: $footer-language-badge-text;
 }
 
 .layout-footer-language__angle {

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/components/ui/pagination.vue

@@ -197,7 +197,7 @@ useSetSeoOverride(() => ({ alonePage: props.total === 1, totalPages: length.valu
 <style lang="scss">
 .ui-pagination {
   display: grid;
-  margin: auto auto 0;
+  margin-inline: auto;
   gap: 12px;
   width: 100%;
   align-items: center;

package/components/ui/switcher.vue

@@ -13,7 +13,7 @@
       v-for="item in items"
       :is="item.to ? NuxtLink : 'button'"
       :key="item.name"
-      :class="{'--active': item.name === modelValue}"
+      :class="{'--active': item.name === modelValue, '--live': item.live}"
       :to="item.to"
       :type="item.to ? undefined : 'button'"
       class="ui-switcher__item"
@@ -104,6 +104,10 @@ const emit = defineEmits<{
   color: $switcher-icon--active;
 }
 
+.ui-switcher__item.--live .ui-switcher__icon {
+  color: $switcher-icon--live;
+}
+
 .ui-switcher__subtitle {
   color: $switcher-subtitle;
 }

package/components/view/models.vue

@@ -1,7 +1,21 @@
-<!-- Страница списка моделей: топ-аватары, фильтры, сортировка, пагинация -->
+<!-- Страница списка моделей: топ-аватары, фильтры, сортировка, пагинация.
+С вебкамами (`FeatureWebcamsEnabled`) заголовок встаёт наверх вместе с переключателем
+разделов «Видео / Вебкам», как на странице вебкамов. -->
 <template>
   <div class="view-models _page _container">
     <header class="view-models__header">
+      <div
+        v-if="isWebcamsEnabled"
+        class="view-models__intro"
+      >
+        <h1 class="view-models__heading _title">{{ h1 }}</h1>
+
+        <UiSwitcher
+          :items="sections"
+          :model-value="'videos'"
+        />
+      </div>
+
       <SectionSwiperCards
         v-if="topCards.length >= MINIMUM_TOP_THUMBS"
         :items="topCards"
@@ -10,6 +24,7 @@
       />
 
       <UiSectionTitle
+        v-if="!isWebcamsEnabled"
         :count="data?.total"
         :title="h1"
         class="view-models__title"
@@ -117,6 +132,7 @@ import { sortModels, alphabetItems } from '../../lib';
 import type {
   IModelCard,
   IModelFilter,
+  ISwitcherItem,
   PaginatedResponse,
 } from '../../types';
 import { convertStringArrayToChips, convertModelToRoundCard } from '../../runtime';
@@ -132,7 +148,35 @@ const props = defineProps<{
   letter?: string,
 }>();
 
-const { t } = useI18n();
+const { t, n } = useI18n();
+const { generateLink } = useGenerateLink();
+const webcamsPath = useWebcamsPath();
+
+const isWebcamsEnabled = !!useRuntimeConfig().public.featureFlags.FeatureWebcamsEnabled;
+
+// онлайн — тем же ключом фетча, что у блока «Live Cams» (второго запроса нет); всего моделей — той же ручкой,
+// что на странице вебкамов, чтобы счётчик в переключателе на обеих страницах совпадал. Без флага запросов нет.
+const [{ counts: webcamCounts }, modelsTotal] = await Promise.all([
+  useFetchWebcams(),
+  isWebcamsEnabled ? useFetchModelsCount() : computed(() => 0),
+]);
+
+const sections = computed<ISwitcherItem[]>(() => [
+  {
+    name: 'videos',
+    title: t('webcams.sections.videos'),
+    icon: 'user-group',
+    subtitle: modelsTotal.value ? n(modelsTotal.value) : '',
+  },
+  {
+    name: 'webcams',
+    title: t('webcams.sections.webcams'),
+    icon: 'webcam',
+    live: true,
+    subtitle: webcamCounts.value.total ? t('webcams.online_short', { count: n(webcamCounts.value.total, 'compact') }) : '',
+    to: generateLink(webcamsPath.value),
+  },
+]);
 
 const MINIMUM_TOP_VIDEOS_COUNT = 30;
 const MINIMUM_TOP_THUMBS = 3;
@@ -206,6 +250,19 @@ const topCards = computed(() => {
   }
 }
 
+.view-models__intro {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 20px;
+  row-gap: 16px;
+  margin-bottom: 16px;
+}
+
+.view-models__heading {
+  margin-bottom: 0;
+}
+
 .view-models__pagination {
   margin-top: 32px;
 }

package/components/view/webcams.vue

@@ -235,6 +235,7 @@ const sections = computed<ISwitcherItem[]>(() => [
     name: 'webcams',
     title: t('webcams.sections.webcams'),
     icon: 'webcam',
+    live: true,
     subtitle: props.data?.total ? t('webcams.online_short', { count: n(props.data.total, 'compact') }) : '',
   },
 ]);

package/package.json

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

package/runtime/utils/__tests__/normalize-url.test.ts

@@ -55,6 +55,16 @@ describe('normalizeUrl', () => {
     expect(result.path).toBe('/big-tits-videos');
   });
 
+  it('+ и %2B → дефисы, без двойного кодирования', () => {
+    expect(normalizeUrl({ path: '/categories/anal%2Bfisting', query: {} }).path).toBe('/categories/anal-fisting');
+    expect(normalizeUrl({ path: '/search/a%2Fb', query: {} }).path).toBe('/search/a%2Fb');
+  });
+
+  it('пагинация старого движка ?p=N → ?page=N', () => {
+    expect(normalizeUrl({ path: '/categories/anal', query: { p: '2' } }).query).toEqual({ page: '2' });
+    expect(normalizeUrl({ path: '/categories/anal', query: { p: '1' } }).query).toEqual({});
+  });
+
   it('убирает двойные дефисы', () => {
     const result = normalizeUrl({ path: '/big--tits', query: {} });
     expect(result.path).toBe('/big-tits');

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/runtime/utils/normalize-url.ts

@@ -3,6 +3,12 @@ export function normalizeUrl(to: { path: string; query: Record<string, any> }) {
   let path = to.path;
   let query = { ...to.query };
 
+  // 0) Пагинация старого движка: `?p=N` → `?page=N` (ссылки и индекс старых сайтов)
+  if (query.p !== undefined && query.page === undefined) {
+    const { p, ...rest } = query;
+    query = { ...rest, page: p };
+  }
+
   // 1) Удаляем page=1
   if (query.page === '1') {
     const { page, ...rest } = query;
@@ -48,6 +54,7 @@ export function normalizeUrl(to: { path: string; query: Record<string, any> }) {
   // 3) Заменяем пробелы и %20 на дефисы
   path = path
     .replace(/%20/gi, '-')  // encoded
+    .replace(/%2b/gi, '-')  // `+` — decodeURI его не раскодирует
     .replace(/ /g, '-')      // raw
     .replace(/\+/g, '-');     // some browsers encode spaces as +
 
@@ -62,7 +69,8 @@ export function normalizeUrl(to: { path: string; query: Record<string, any> }) {
   // 6) Кодируем обратно — стабильная RFC-форма (uppercase hex), совпадающая
   //    с тем, что отдаёт vue-router в to.path, поэтому редирект не зациклится.
   try {
-    path = encodeURI(path);
+    // уцелевшие после decodeURI %XX (`%2F`, `%3F`…) не кодируем второй раз в `%252F`
+    path = encodeURI(path).replace(/%25([0-9a-f]{2})/gi, (_, hex) => `%${hex.toUpperCase()}`);
   } catch {
     // no-op
   }

package/types/switcher-item.d.ts

@@ -8,6 +8,8 @@ export interface ISwitcherItem {
   icon?: string;
   /** Второстепенная подпись: количество, «30 online» и подобное. */
   subtitle?: string;
+  /** Иконка «в эфире» (вебкамы): акцентная всегда, а не только у активной опции. */
+  live?: boolean;
   /** Адрес перехода: с ним опция рисуется ссылкой, а не кнопкой выбора. */
   to?: 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>>;
 }