itube-specs 0.0.991 → 0.0.992

package/components/card/webcam/index.vue

@@ -121,7 +121,7 @@
       <!-- Страна — в строке имени справа (в макете на узких экранах её нет вовсе). -->
       <a
         v-if="model.country"
-        :href="`${nichePath}/webcams?${WEBCAM_FILTER_QUERY_PREFIX}country=${model.country}`"
+        :href="`${nichePath}${webcamsPath}?${WEBCAM_FILTER_QUERY_PREFIX}country=${model.country}`"
         class="card-webcam__country"
       >{{ countryName }}</a>
     </div>
@@ -154,7 +154,7 @@
         :key="`tag-${tag}`"
       >
         <a
-          :href="`${nichePath}/webcams/${tag}`"
+          :href="`${nichePath}${webcamsPath}/${tag}`"
           class="card-webcam__tag"
         >{{ tagTitle(tag) }}</a>
       </li>
@@ -228,9 +228,11 @@ const ageFilterUrl = computed(() => {
 
   const prefix = WEBCAM_FILTER_QUERY_PREFIX;
 
-  return `${nichePath.value}/webcams?${prefix}age_from=${age - 1}&${prefix}age_to=${age + 1}`;
+  return `${nichePath.value}${webcamsPath.value}?${prefix}age_from=${age - 1}&${prefix}age_to=${age + 1}`;
 });
 
+const webcamsPath = useWebcamsPath();
+
 const nichePath = computed(() => {
   const niche = NicheHelper.getSiteDefaultNiche();
 

package/components/card/webcam/languages.vue

@@ -19,7 +19,7 @@
     <a
       v-for="item in items"
       :key="`lang-${item.lang}`"
-      :href="`${nichePath}/webcams?${WEBCAM_FILTER_QUERY_PREFIX}language=${item.lang}`"
+      :href="`${nichePath}${webcamsPath}?${WEBCAM_FILTER_QUERY_PREFIX}language=${item.lang}`"
       :aria-label="item.lang"
       class="card-webcam-languages__link"
     >
@@ -92,6 +92,8 @@ const names = computed(() => {
 
   return (props.languages || []).map(lang => display.of(lang) || lang.toUpperCase()).join(', ');
 });
+
+const webcamsPath = useWebcamsPath();
 </script>
 
 <style lang="scss">

package/components/player/aside-videos.vue

@@ -18,18 +18,18 @@
   >
     <div class="player-aside-videos__inner">
       <PlayerAsideModels
-        v-for="item in models || []"
+        v-for="item in shownModels"
         :key="`aside-model-${item.slug}`"
         :title="item.title"
         :slug="item.slug"
         :info="item.info"
-        :videos="item.videos?.items"
+        :videos="item.videos"
         class="player-aside-videos__model"
       />
 
       <AdvNtv v-if="featureFlags.AdsNTVEnabled" />
 
-      <template v-if="!models?.length && !featureFlags.AdsNTVEnabled">
+      <template v-if="!shownModels.length && !featureFlags.AdsNTVEnabled">
         <CardVideo
           v-for="item in asideVideos?.items?.slice(0, 2)"
           :key="`aside-video-${item.guid}`"
@@ -47,7 +47,7 @@ import type { AsyncDataRequestStatus } from '#app';
 
 const featureFlags = useRuntimeConfig().public.featureFlags;
 
-defineProps<{
+const props = defineProps<{
   asideVideos?: PaginatedResponse<IVideoCard> | null
   status?: AsyncDataRequestStatus
   /** Модели ролика с их карточками и роликами (useFetchAsideModels). */
@@ -55,9 +55,15 @@ defineProps<{
     title: string
     slug: string
     info: ICardInfo | null
-    videos: PaginatedResponse<IVideoCard> | null
+    videos: IVideoCard[]
   }>
 }>();
+
+/**
+ * Блок получает только та модель, чьих роликов хватает на полную строку сетки —
+ * список уже подрезан в `useFetchAsideModels`. Остальные уходят чипсами над плеером.
+ */
+const shownModels = computed(() => (props.models || []).filter(model => model.videos.length));
 </script>
 
 <style lang="scss">

package/components/view/webcams.vue

@@ -22,6 +22,7 @@ query-параметрах `filter_*`. Формат провайдера при
           :items="sections"
           :model-value="'webcams'"
           class="view-webcams__sections"
+          @update:model-value="resetSection"
         />
       </div>
 
@@ -238,6 +239,20 @@ const sections = computed<ISwitcherItem[]>(() => [
   },
 ]);
 
+/**
+ * Клик по уже активному разделу — это «показать раздел целиком»: снимаем фильтры и
+ * страницу пагинации, всё это живёт в query. Тег остаётся: он часть пути, а не фильтр.
+ * Query пуст — раздел и так целиком, и клик ничего не делает.
+ *
+ * Навигация именно `path` + `query`, а не `{ query }`: у location без пути роутер
+ * берёт текущий адрес вместе с параметрами и на нишевых страницах терял бы префикс.
+ */
+function resetSection() {
+  if (!Object.keys(route.query).length) return;
+
+  router.replace({ path: route.path, query: {} });
+}
+
 /**
  * Вход в раздел: сразу показываем моделей, которые говорят на языке пользователя.
  * Только при первом заходе за сессию — иначе снятый пользователем фильтр

package/components/webcam/header.vue

@@ -61,7 +61,9 @@ const promoLink = computed(() => {
   return links[niche.value] || links['straight'] || '';
 });
 const isPromoBlocked = ref(false);
-const promoHref = computed(() => (isPromoBlocked.value ? `${nichePath.value}/webcams` : promoLink.value));
+const webcamsPath = useWebcamsPath();
+
+const promoHref = computed(() => (isPromoBlocked.value ? `${nichePath.value}${webcamsPath.value}` : promoLink.value));
 
 const promoRef = ref<HTMLElement | null>(null);
 

package/composables/fetch/use-fetch-aside-models.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue';
 import type { Language } from '../../runtime';
-import { AsyncData, convertString } from '../../runtime';
+import { AsyncData, asideModelVideos, convertString } from '../../runtime';
 import { ModelsApiService } from '../../services/api/models.service';
 import { VideosApiService } from '../../services/api/videos.service';
 import type { ICardInfo, IVideoCard, PaginatedResponse } from '../../types';
@@ -15,6 +15,13 @@ export const ASIDE_MODELS_LIMIT = 3;
 /** Сколько роликов модели показывать — в макете сетка 2×2. */
 export const ASIDE_MODEL_VIDEOS = 4;
 
+/**
+ * Слаги моделей, у которых блок в колонке есть. Кому роликов не хватило, тот
+ * остаётся чипсой над плеером на всех ширинах — берут этот список те, кто чипсы
+ * рисует.
+ */
+export const useAsideModelSlugs = () => useState<string[]>('aside-model-slugs', () => []);
+
 /** Порядок роликов модели — тот же, что на её странице по умолчанию. */
 const ORDER = '-popularity';
 
@@ -23,7 +30,8 @@ export interface IAsideModel {
   /** Слаг для ссылки на страницу модели. */
   slug: string
   info: Ref<ICardInfo | null>
-  videos: Ref<PaginatedResponse<IVideoCard> | null>
+  /** Ролики модели, уже подрезанные под сетку 2×2 (`asideModelVideos`). */
+  videos: Ref<IVideoCard[]>
 }
 
 /**
@@ -41,8 +49,9 @@ export const useFetchAsideModels = async (
   limit = ASIDE_MODELS_LIMIT,
 ): Promise<IAsideModel[]> => {
   const lang = useLang() as Language;
+  const shown = useAsideModelSlugs();
 
-  return await Promise.all(titles.slice(0, limit).map(async (title) => {
+  const models = await Promise.all(titles.slice(0, limit).map(async (title) => {
     const slug = convertString().toSlug(title);
     const name = convertString().fromSlug(slug);
     const infoKey = `data-${AsyncData.ModelsByName}-aside-${slug}-${lang}`;
@@ -67,6 +76,15 @@ export const useFetchAsideModels = async (
       ),
     ]);
 
-    return { title, slug, info, videos };
+    // Список режем здесь, а не в разметке: решение про нечётный хвост общее для
+    // блока и для чипсов, и принимать его дважды в разных местах — расходиться.
+    return { title, slug, info, videos: computed(() => asideModelVideos(videos.value?.items, ASIDE_MODEL_VIDEOS)) };
   }));
+
+  // Кому роликов хватило — тот в колонке; остальные остаются чипсами над плеером.
+  watchEffect(() => {
+    shown.value = models.filter(model => model.videos.value.length).map(model => model.slug);
+  });
+
+  return models;
 };

package/composables/use-webcams-path.ts

@@ -0,0 +1,14 @@
+import { WEBCAMS_DEFAULTS } from '../runtime';
+import type { IWebcamsConfig } from '../types';
+
+/**
+ * Адрес раздела вебкамов без нишевого префикса. Сайт задаёт его в
+ * `webcamsConfig.path` — раздел может жить на своём URL (например `/live-sex`),
+ * и все ссылки на фильтры, теги и промо обязаны вести туда же, иначе каждая
+ * уходит через редирект.
+ */
+export function useWebcamsPath() {
+  const config = useRuntimeConfig().public.webcamsConfig as IWebcamsConfig | undefined;
+
+  return computed(() => config?.path || WEBCAMS_DEFAULTS.path);
+}

package/package.json

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

package/pages/webcams/[[tag]].vue

@@ -29,6 +29,8 @@ import { sortWebcams } from '../../lib';
 const { t } = useI18n();
 const route = useRoute();
 
+const webcamsPath = useWebcamsPath();
+
 /** Тег — сегмент пути (`/webcams/{tag}`), как на боевом движке. */
 const tag = computed(() => String(route.params.tag || ''));
 
@@ -63,7 +65,7 @@ const breadcrumbs = computed<IBreadcrumbItem[]>(() => [
     to: '/',
   },
   ...(tag.value
-    ? [{ name: t('navigation.webcams'), to: '/webcams' }, { name: tagTitle.value }]
+    ? [{ name: t('navigation.webcams'), to: webcamsPath.value }, { name: tagTitle.value }]
     : [{ name: t('navigation.webcams') }]),
 ]);
 </script>

package/runtime/constants/webcams.ts

@@ -6,6 +6,12 @@
 export const WEBCAMS_DEFAULTS = {
   /** Ключ адаптера провайдера (см. `utils/webcams/adapters.ts`). */
   provider: 'stripcash',
+  /**
+   * Адрес раздела без нишевого префикса. Сайт может держать его на своём URL
+   * (`/live-sex`), и тогда ссылки на фильтры, теги и промо должны вести туда же.
+   * Сам роут переименовывает сайт у себя в `pages:extend`.
+   */
+  path: '/webcams',
   /**
    * Сколько моделей просить. 12 не случайно: сетка повторяет основной грид
    * (2 / 3 / 4 колонки по брейкпоинтам), и 12 делится на каждое из них без

package/runtime/index.ts

@@ -9,6 +9,7 @@ export * from './constants/report-forms-subjects';
 export * from './constants/playlist-step';
 export * from './constants/thumb-size';
 export * from './constants/webcams';
+export * from './utils/aside-model-videos';
 export * from './utils/build-srcset';
 export * from './utils/pick-portrait-variant';
 export * from './utils/format-date';

package/runtime/utils/__tests__/aside-model-videos.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { asideModelVideos } from '../aside-model-videos';
+
+const list = (n: number) => Array.from({ length: n }, (_, i) => i);
+
+describe('asideModelVideos', () => {
+  it('чётное число показываем как есть', () => {
+    expect(asideModelVideos(list(4))).toEqual([0, 1, 2, 3]);
+    expect(asideModelVideos(list(2))).toEqual([0, 1]);
+  });
+
+  it('нечётное режем до чётного — иначе в сетке 2×2 дырка', () => {
+    expect(asideModelVideos(list(3))).toEqual([0, 1]);
+    expect(asideModelVideos(list(5))).toEqual([0, 1, 2, 3]);
+  });
+
+  it('меньше двух — блока нет, модель уйдёт чипсой', () => {
+    expect(asideModelVideos(list(1))).toEqual([]);
+    expect(asideModelVideos([])).toEqual([]);
+    expect(asideModelVideos(undefined)).toEqual([]);
+  });
+
+  it('потолок не превышаем', () => {
+    expect(asideModelVideos(list(9))).toHaveLength(4);
+    expect(asideModelVideos(list(9), 2)).toHaveLength(2);
+  });
+});

package/runtime/utils/__tests__/pick-portrait-variant.test.ts

@@ -18,6 +18,27 @@ describe('pickPortraitVariant', () => {
     expect(pickPortraitVariant({ light: { tall: { ...tall, webp: 'light' } } })?.tall?.webp).toBe('light');
   });
 
+  it('задвоенный слэш в пути схлопывается — иначе CDN отвечает 301 на каждую тумбу', () => {
+    const portraits = {
+      dark: {
+        tall: { width: 640, height: 960, webp: 'https://nli02.joystorage.com//7/e/0/a.webp', avif: 'https://nli02.joystorage.com//7/e/0/a.avif' },
+        square: { width: 256, height: 256, webp: 'https://nli01.joystorage.com//f/0/5/b.webp', avif: '' },
+      },
+    };
+    const result = pickPortraitVariant(portraits);
+
+    expect(result?.tall?.webp).toBe('https://nli02.joystorage.com/7/e/0/a.webp');
+    expect(result?.tall?.avif).toBe('https://nli02.joystorage.com/7/e/0/a.avif');
+    expect(result?.square?.webp).toBe('https://nli01.joystorage.com/f/0/5/b.webp');
+    expect(result?.square?.avif).toBe('');
+  });
+
+  it('нормальную ссылку не трогаем — протокольные слэши на месте', () => {
+    const portraits = { dark: { tall: { ...tall, webp: 'https://cache1.itube.dev/0/1/2/a.webp' } } };
+
+    expect(pickPortraitVariant(portraits)?.tall?.webp).toBe('https://cache1.itube.dev/0/1/2/a.webp');
+  });
+
   it('пусто → undefined', () => {
     expect(pickPortraitVariant()).toBeUndefined();
     expect(pickPortraitVariant({})).toBeUndefined();

package/runtime/utils/aside-model-videos.ts

@@ -0,0 +1,16 @@
+/**
+ * Сколько роликов модели показать в боковой колонке плеера.
+ *
+ * Сетка там в две колонки, поэтому нечётный хвост оставлял бы дырку: при трёх
+ * роликах показываем два. Если даже на одну строку не набирается (меньше двух),
+ * блока у модели нет вовсе — она уходит чипсой над плеером.
+ *
+ * @param videos - ролики модели, как их вернула ручка
+ * @param limit - потолок выдачи блока (в макете 2×2)
+ */
+export const asideModelVideos = <T>(videos: T[] | undefined, limit = 4): T[] => {
+  const count = Math.min(videos?.length || 0, limit);
+  const even = count - (count % 2);
+
+  return even < 2 ? [] : (videos as T[]).slice(0, even);
+};

package/runtime/utils/pick-portrait-variant.ts

@@ -1,4 +1,18 @@
-import type { IRawPortraits, IRawPortraitVariant } from '../../types';
+import type { IRawPortraits, IRawPortraitFile, IRawPortraitVariant } from '../../types';
+
+/**
+ * Схлопывает задвоенный слэш в пути. Прод-сборщик ссылок на портреты клеит хост со
+ * слэшем на конце с путём со слэшем в начале и отдаёт `https://host//a/b/c.avif`.
+ * CDN такой адрес принимает, но отвечает 301 на нормальный — то есть каждая тумба
+ * стоит лишнего похода, а на части узлов этот поход срывается в 502.
+ */
+const normalizeUrl = (url?: string): string => (url || '').replace(/([^:])\/{2,}/g, '$1/');
+
+const normalizeFile = (file?: IRawPortraitFile): IRawPortraitFile | undefined => (file && {
+  ...file,
+  webp: normalizeUrl(file.webp),
+  avif: normalizeUrl(file.avif),
+});
 
 /**
  * Выбирает вариант портрета из карты, которую отдаёт API. Ключ — фон съёмки.
@@ -11,8 +25,8 @@ import type { IRawPortraits, IRawPortraitVariant } from '../../types';
 export const pickPortraitVariant = (portraits?: IRawPortraits, preferred?: string): IRawPortraitVariant | undefined => {
   if (!portraits) return undefined;
 
-  if (preferred && portraits[preferred]) return portraits[preferred];
-  if (portraits['dark']) return portraits['dark'];
+  const variant = (preferred && portraits[preferred]) || portraits['dark'] || Object.values(portraits)[0];
+  if (!variant) return undefined;
 
-  return Object.values(portraits)[0];
+  return { tall: normalizeFile(variant.tall), square: normalizeFile(variant.square) };
 };

package/types/webcams-config.d.ts

@@ -5,6 +5,8 @@
  */
 export interface IWebcamsConfig {
   provider?: string;
+  /** Адрес раздела без нишевого префикса; по умолчанию `/webcams`. */
+  path?: string;
   limit?: number;
   previewQuality?: string[];
   /** Период перепроверки онлайна показанных моделей, мс; 0 — не проверять. */