itube-specs 0.0.956 → 0.0.957

package/components/card/webcam/index.vue

@@ -111,15 +111,17 @@
         @mouseleave="onNameLeave"
       >{{ model.name }}</a>
 
-      <span
+      <!-- Возраст ведёт в фильтр ±1 год — правило боевого движка (`mf_age_from/to`). -->
+      <a
         v-if="model.age"
+        :href="ageFilterUrl"
         class="card-webcam__age"
-      >{{ t('webcams.years_old', { age: model.age }) }}</span>
+      >{{ t('webcams.years_old', { age: model.age }) }}</a>
 
       <!-- Страна — в строке имени справа (в макете на узких экранах её нет вовсе). -->
       <a
         v-if="model.country"
-        :href="`${nichePath}/webcams?filter_country=${model.country}`"
+        :href="`${nichePath}/webcams?${WEBCAM_FILTER_QUERY_PREFIX}country=${model.country}`"
         class="card-webcam__country"
       >{{ countryName }}</a>
     </div>
@@ -163,6 +165,7 @@
 <script setup lang="ts">
 import type { IWebcamModel } from '../../../types';
 import { isoCodeToCountryName } from '../../../utils/iso-code-to-country-name';
+import { WEBCAM_FILTER_QUERY_PREFIX } from '../../../utils/webcams/facets';
 import { preloadHls } from '../../../utils/webcams/preload-hls';
 
 const props = withDefaults(defineProps<{
@@ -214,6 +217,20 @@ const isPreviewActive = previewSlot.isActive(previewId.value);
 const isPreviewReady = ref(false);
 
 /** Ниша в пути: у straight префикса нет, у остальных — `/gay`, `/shemale`. */
+/**
+ * Возраст в тумбе — ссылка на раздел с фильтром возраста ±1 год: так делал боевой
+ * движок (`mf_age_from = age - 1`, `mf_age_to = age + 1`), и наш range-фильтр читает
+ * ровно эти границы из `filter_age_from` / `filter_age_to`.
+ */
+const ageFilterUrl = computed(() => {
+  const age = Number(props.model.age) || 0;
+  if (!age) return '';
+
+  const prefix = WEBCAM_FILTER_QUERY_PREFIX;
+
+  return `${nichePath.value}/webcams?${prefix}age_from=${age - 1}&${prefix}age_to=${age + 1}`;
+});
+
 const nichePath = computed(() => {
   const niche = NicheHelper.getSiteDefaultNiche();
 
@@ -621,7 +638,7 @@ onBeforeUnmount(() => {
 
   --line-clamp: 1;
 
-  font-weight: 600;
+  font-weight: 400;
   color: $card-webcam-name-text;
 
   &:is(:hover, :focus) {
@@ -634,6 +651,10 @@ onBeforeUnmount(() => {
 
   flex-shrink: 0;
   color: $card-webcam-meta-text;
+
+  &:is(:hover, :focus) {
+    color: $card-webcam-meta-text--hover;
+  }
 }
 
 // обрезка своя, а не утилитой `_truncate`: та ставит `display` через !important и

package/components/webcam/main.vue

@@ -62,6 +62,8 @@ const blockLimit = computed(() => props.limit || webcamsConfig.value.limit || WE
 const { items, counts, isEnabled } = await useFetchWebcams({
   limit: blockLimit.value + props.reserveTail,
   category: props.category,
+  // тумбы блока висят на странице долго — перепроверяем, кто ещё в эфире
+  keepAlive: true,
 });
 
 /** Хвост списка отдан странице (врезки в сетку) — блок берёт только свою голову. */

package/composables/fetch/use-fetch-webcams.ts

@@ -11,24 +11,46 @@ import { WEBCAMS_DEFAULTS } from '../../runtime';
  *
  * Под флагом `FeatureWebcamsEnabled`: при выключенном флаге запроса нет вовсе.
  */
-export const useFetchWebcams = async (options: { limit?: number, category?: string, clientOnly?: boolean } = {}) => {
+export const useFetchWebcams = async (options: {
+  limit?: number,
+  category?: string,
+  clientOnly?: boolean,
+  /**
+   * Перепроверять на клиенте, что показанные модели ещё в эфире, и подставлять
+   * замену вместо ушедших (см. `useWebcamAlive`). Просят те места, где тумбы
+   * висят долго — блок «Live Cams» и врезки в сетку.
+   */
+  keepAlive?: boolean,
+} = {}) => {
   const config = useRuntimeConfig().public.webcamsConfig as IWebcamsConfig | undefined;
-  const { limit = config?.limit || WEBCAMS_DEFAULTS.limit, category, clientOnly } = options;
+  const { limit = config?.limit || WEBCAMS_DEFAULTS.limit, category, clientOnly, keepAlive } = options;
   const isEnabled = !!useRuntimeConfig().public.featureFlags.FeatureWebcamsEnabled;
   const { locale } = useI18n();
   const niche = NicheHelper.getSiteDefaultNiche();
 
-  const items = ref<IStripcashModel[]>([]);
+  /** Ключ фетча: он же адрес общего списка моделей для проверки живости. */
+  const cacheKey = `webcams-${limit}-${category || 'all'}-${niche}-${locale.value}`;
+
+  /**
+   * Список — ОБЩЕЕ состояние по ключу фетча, а не локальный ref: у одного ответа два
+   * потребителя (блок «Live Cams» и врезки в сетку), и подмена ушедшей в офлайн
+   * модели должна быть видна обоим. Патчит его `useWebcamAlive`.
+   */
+  const items = useState<IStripcashModel[]>(`${cacheKey}:items`, () => []);
   const counts = ref<IWebcamCounts>({ total: 0, byLanguages: {} });
 
   if (!isEnabled) {
     return { items, counts, isEnabled };
   }
 
+  // Арминг проверки живости — ДО `await`: после него Nuxt теряет контекст
+  // компонента, и `onMounted` / `useState` внутри уже не работают.
+  if (keepAlive) useWebcamAlive(cacheKey);
+
   const nuxtApp = useNuxtApp();
 
   const { data } = await useFetch<{ items: IStripcashModel[] } & IWebcamCounts>('/bff/webcams/block', {
-    key: `webcams-${limit}-${category || 'all'}-${niche}-${locale.value}`,
+    key: cacheKey,
     // выдача провайдера рандомная, поэтому повторный запрос на клиенте дал бы
     // ДРУГИЕ модели и рассинхрон с разметкой сервера (ссылки от одной модели,
     // подписи от другой) — берём то, что уже приехало в payload

package/composables/use-webcam-alive.ts

@@ -0,0 +1,86 @@
+import type { IStripcashModel, IWebcamsConfig } from '../types';
+import { WEBCAMS_DEFAULTS } from '../runtime';
+import { applyWebcamReplacements } from '../utils/webcams/apply-replacements';
+import type { WebcamAliveStatus, WebcamReplacement } from '../utils/webcams/apply-replacements';
+
+type AliveResponse = { statuses: WebcamAliveStatus[], replacements: WebcamReplacement[] };
+
+/**
+ * Держит показанные вебкам-тумбы живыми: раз в `aliveInterval` спрашивает у BFF,
+ * кто из моделей ещё в эфире, и подставляет замену вместо ушедших.
+ *
+ * Патчим ОБЩЕЕ состояние списка (`<ключ фетча>:items`), которое отдаёт
+ * `useFetchWebcams`: у него два потребителя — блок «Live Cams» и врезки в сетку, —
+ * поэтому замена появляется сразу в обоих местах и одна модель не встаёт дважды.
+ *
+ * Опрашиваем только при видимой вкладке: в фоне это бессмысленный трафик, а при
+ * возврате на вкладку проверяем сразу, потому что за время «сна» модели могли уйти.
+ *
+ * Проверку арминг ставит ОДИН раз на страницу (`useState`-флаг): список общий, а
+ * потребителей у него два — блок и врезки.
+ *
+ * На вход идёт КЛЮЧ фетча, а не его результат: композабл вызывается до `await` в
+ * `useFetchWebcams`, иначе `onMounted`/`useState` уже вне контекста компонента
+ * (после await Nuxt его теряет) и компонент на клиенте падает — тумбы исчезали.
+ */
+export function useWebcamAlive(cacheKey: string) {
+  if (import.meta.server) return;
+
+  const armed = useState<boolean>('webcams-alive-armed', () => false);
+  if (armed.value) return;
+
+  const config = (useRuntimeConfig().public.webcamsConfig || {}) as IWebcamsConfig;
+  const interval = config.aliveInterval ?? WEBCAMS_DEFAULTS.aliveInterval;
+  if (!interval) return;
+
+  armed.value = true;
+
+  const { locale } = useI18n();
+  const niche = NicheHelper.getSiteDefaultNiche();
+  /** Тот же общий список, что отдаёт `useFetchWebcams` (ключ фетча + `:items`). */
+  const models = useState<IStripcashModel[]>(`${cacheKey}:items`, () => []);
+
+  let timer: ReturnType<typeof setInterval> | null = null;
+  let checking = false;
+
+  async function check() {
+    if (checking || document.visibilityState !== 'visible') return;
+
+    const usernames = models.value.map(model => model.username).filter(Boolean);
+    if (!usernames.length) return;
+
+    checking = true;
+
+    try {
+      const response = await $fetch<AliveResponse>('/bff/webcams/alive', {
+        method: 'POST',
+        query: { niche, lang: locale.value },
+        body: { usernames },
+      });
+
+      const next = applyWebcamReplacements(models.value, response?.statuses || [], response?.replacements || []);
+      // ссылку меняем только когда список действительно другой: иначе лишний
+      // ререндер сетки на каждой проверке
+      if (next !== models.value) models.value = next;
+    } catch {
+      // ручка не ответила — на следующей проверке попробуем снова
+    } finally {
+      checking = false;
+    }
+  }
+
+  function onVisible() {
+    if (document.visibilityState === 'visible') check();
+  }
+
+  onMounted(() => {
+    timer = setInterval(check, interval);
+    document.addEventListener('visibilitychange', onVisible);
+  });
+
+  onScopeDispose(() => {
+    if (timer) clearInterval(timer);
+    document.removeEventListener('visibilitychange', onVisible);
+    armed.value = false;
+  });
+}

package/package.json

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

package/runtime/constants/webcams.ts

@@ -14,4 +14,11 @@ export const WEBCAMS_DEFAULTS = {
   limit: 12,
   /** Порядок предпочтения качества превью стрима: лёгкое — первым. */
   previewQuality: ['240p', '480p'],
+  /**
+   * Как часто перепроверять, что показанные модели ещё в эфире (мс). 90 секунд —
+   * компромисс: реже — на странице подолгу висят ушедшие, чаще — лишние запросы
+   * без пользы (стрим редко обрывается через минуту после начала).
+   * 0 отключает проверку.
+   */
+  aliveInterval: 90_000,
 } as const;

package/server/api/webcams/alive.post.ts

@@ -0,0 +1,48 @@
+import type { IStripcashModel } from '../../../types';
+
+type AliveResponse = {
+  statuses: Array<{ username: string, isOnline: boolean }>;
+  replacements: Array<{ username: string, model: IStripcashModel }>;
+};
+
+/**
+ * Проверка «модель ещё в эфире» и замена для ушедших — тонкий прокси к
+ * POST `/v2/stripcash/online-models-replace?replace=true`.
+ *
+ * Зачем ручка вообще: у провайдера нет ни статуса отдельной модели, ни фильтра по
+ * логину, а судить по исчезновению из выдачи нельзя — список это выборка из тысяч
+ * моделей онлайн. Бекенд сделал одну ручку, которая и статусы отдаёт, и сразу
+ * подбирает замену (в перспективе — похожую по фильтрам).
+ *
+ * Ниша и язык обязательны заголовками, как и у остальных ручек провайдера; клиент
+ * передаёт их query-параметрами. Кеша здесь нет намеренно: смысл вызова — свежесть
+ * статуса, а список логинов у каждого посетителя свой.
+ */
+export default defineEventHandler(async (event): Promise<AliveResponse> => {
+  const apiUrl = process.env.NUXT_PUBLIC_API_DOMAIN;
+  const query = getQuery(event);
+  const body = await readBody<{ usernames?: string[] }>(event);
+  const usernames = (body?.usernames || []).filter(Boolean);
+
+  if (!usernames.length) return { statuses: [], replacements: [] };
+
+  event.node.req.headers['x-niche'] = String(query.niche || '');
+  event.node.req.headers['x-language'] = String(query.lang || event.node.req.headers['x-language'] || 'en');
+
+  const rawData = await apiFetch(`${apiUrl}/v2/stripcash/online-models-replace?replace=true`, {
+    method: 'POST',
+    headers: event.node.req.headers as HeadersInit,
+    body: JSON.stringify({ usernames }),
+  });
+
+  const data = rawData?.data || {};
+
+  return {
+    // приводим к нашему camelCase, чтобы наружу не текла форма провайдера
+    statuses: (data.items || []).map((item: { username: string, is_online: boolean }) => ({
+      username: item.username,
+      isOnline: item.is_online !== false,
+    })),
+    replacements: (data.replacements || []).filter((item: { model?: IStripcashModel }) => item?.model),
+  };
+});

package/server/utils/__tests__/cached-fetch.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { buildCacheKey } from '../cached-fetch';
+
+/**
+ * Ручки контента разводят выдачу заголовками, а не URL: пока в ключе кеша был
+ * только язык, ответ первой пришедшей ниши отдавался всем остальным.
+ */
+describe('buildCacheKey', () => {
+  const url = 'https://api.example.com/v2/models/top?limit=6';
+
+  it('ниша попадает в ключ', () => {
+    const straight = buildCacheKey(url, { 'x-niche': 'straight', 'x-language': 'en' });
+    const gay = buildCacheKey(url, { 'x-niche': 'gay', 'x-language': 'en' });
+
+    expect(straight).not.toBe(gay);
+  });
+
+  it('язык и домен тоже разводят кеш', () => {
+    const base = { 'x-niche': 'gay', 'x-language': 'en', 'x-domain': 'a.example' };
+
+    expect(buildCacheKey(url, base)).not.toBe(buildCacheKey(url, { ...base, 'x-language': 'ru' }));
+    expect(buildCacheKey(url, base)).not.toBe(buildCacheKey(url, { ...base, 'x-domain': 'b.example' }));
+  });
+
+  it('одинаковый срез даёт одинаковый ключ, язык по умолчанию en', () => {
+    const withLang = buildCacheKey(url, { 'x-language': 'en', 'x-niche': 'gay' });
+    const withoutLang = buildCacheKey(url, { 'x-niche': 'gay' });
+
+    expect(withoutLang).toBe(withLang);
+  });
+
+  it('массив в заголовке берётся первым значением', () => {
+    expect(buildCacheKey(url, { 'x-niche': ['gay', 'straight'] })).toBe(buildCacheKey(url, { 'x-niche': 'gay' }));
+  });
+});

package/server/utils/cached-fetch.ts

@@ -6,17 +6,32 @@ interface CacheEntry<T> {
   expiresAt: number;
 }
 
-// Хранилище закэшированных ответов (ключ — URL + язык, значение — данные + время истечения)
+// Хранилище закэшированных ответов (ключ — URL + срез запроса, значение — данные + время истечения)
 const cache = new Map<string, CacheEntry<unknown>>();
 // Хранилище текущих незавершённых запросов для дедупликации параллельных вызовов
 const inflight = new Map<string, Promise<unknown>>();
 
 /**
- * Формирует ключ кэша с учётом языка из заголовка X-Language.
+ * Ключ кэша: URL плюс ВСЁ, от чего зависит ответ, но чего в URL нет.
+ *
+ * Ручки контента разводят выдачу заголовками: `X-Niche` (ниша), `X-Language`
+ * (язык), `X-Domain` (сайт). Пока в ключе был только язык, первый ответ занимал
+ * слот на весь TTL и отдавался остальным нишам: после переключения ниши
+ * категории, топ моделей и прочие кешируемые списки оставались straight'овыми.
+ * Домен важен по той же причине: один процесс обслуживает несколько хостов.
  */
+export function buildCacheKey(url: string, headers: Record<string, unknown>): string {
+  const value = (name: string) => {
+    const raw = headers[name];
+
+    return String(Array.isArray(raw) ? raw[0] : raw ?? '');
+  };
+
+  return [value('x-domain'), value('x-language') || 'en', value('x-niche'), url].join('::');
+}
+
 function getCacheKey(url: string, event: H3Event): string {
-  const lang = event.node.req.headers['x-language'] || 'en';
-  return `${lang}::${url}`;
+  return buildCacheKey(url, event.node.req.headers as Record<string, unknown>);
 }
 
 /**

package/types/webcams-config.d.ts

@@ -7,6 +7,8 @@ export interface IWebcamsConfig {
   provider?: string;
   limit?: number;
   previewQuality?: string[];
+  /** Период перепроверки онлайна показанных моделей, мс; 0 — не проверять. */
+  aliveInterval?: number;
   /** Шаблон ссылки на модель по нишам; `{username}` подставляется. */
   modelLinks?: Record<string, string>;
   /** Промо-ссылка партнёрки по нишам — та же, что в шапке сайта. */

package/utils/__tests__/apply-replacements.test.ts

@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest';
+import type { IStripcashModel } from '../../types';
+import { applyWebcamReplacements } from '../webcams/apply-replacements';
+
+const model = (username: string) => ({ username } as IStripcashModel);
+
+describe('applyWebcamReplacements', () => {
+  it('меняет только ушедших в офлайн, порядок и длина сохраняются', () => {
+    const result = applyWebcamReplacements(
+      [model('a'), model('b'), model('c')],
+      [{ username: 'a', isOnline: true }, { username: 'b', isOnline: false }, { username: 'c', isOnline: true }],
+      [{ username: 'b', model: model('new') }],
+    );
+
+    expect(result.map(item => item.username)).toEqual(['a', 'new', 'c']);
+  });
+
+  it('без офлайна возвращает тот же массив', () => {
+    const models = [model('a'), model('b')];
+    const result = applyWebcamReplacements(models, [{ username: 'a', isOnline: true }], []);
+
+    expect(result).toBe(models);
+  });
+
+  it('офлайн без замены остаётся на месте — дырки не делаем', () => {
+    const result = applyWebcamReplacements(
+      [model('a'), model('b')],
+      [{ username: 'b', isOnline: false }],
+      [],
+    );
+
+    expect(result.map(item => item.username)).toEqual(['a', 'b']);
+  });
+
+  it('замену, которая уже на странице, не подставляет', () => {
+    const result = applyWebcamReplacements(
+      [model('a'), model('b')],
+      [{ username: 'b', isOnline: false }],
+      [{ username: 'b', model: model('a') }],
+    );
+
+    expect(result.map(item => item.username)).toEqual(['a', 'b']);
+  });
+
+  it('две замены подряд не дублируют друг друга', () => {
+    const result = applyWebcamReplacements(
+      [model('a'), model('b'), model('c')],
+      [{ username: 'a', isOnline: false }, { username: 'b', isOnline: false }],
+      [{ username: 'a', model: model('x') }, { username: 'b', model: model('x') }],
+    );
+
+    expect(result.map(item => item.username)).toEqual(['x', 'b', 'c']);
+  });
+});

package/utils/webcams/apply-replacements.ts

@@ -0,0 +1,50 @@
+import type { IStripcashModel } from '../../types';
+
+/** Статус одной модели из ручки проверки онлайна (наша форма, camelCase). */
+export type WebcamAliveStatus = { username: string, isOnline: boolean };
+
+/** Замена для ушедшей в офлайн модели. */
+export type WebcamReplacement = { username: string, model: IStripcashModel };
+
+/**
+ * Собирает новый список моделей: ушедшие в офлайн заменяются на присланных
+ * провайдером, остальные остаются на своих местах.
+ *
+ * Правила:
+ * - порядок и длина списка сохраняются: тумбы не переставляются, дырок не появляется;
+ * - если замены для офлайн-модели не пришло, модель остаётся — пустая ячейка хуже
+ *   подмороженной тумбы, а на следующей проверке замена, скорее всего, будет;
+ * - замена, которая уже есть на странице, не применяется: иначе одна и та же модель
+ *   встанет дважды (у блока и врезок список общий);
+ * - неизвестные статусы игнорируются, поэтому неполный ответ ручки безопасен.
+ */
+export function applyWebcamReplacements(
+  models: IStripcashModel[],
+  statuses: WebcamAliveStatus[],
+  replacements: WebcamReplacement[],
+): IStripcashModel[] {
+  const offline = new Set(
+    statuses.filter(status => status && status.isOnline === false).map(status => status.username),
+  );
+
+  if (!offline.size) return models;
+
+  const byUsername = new Map(
+    replacements.filter(item => item?.username && item.model?.username).map(item => [item.username, item.model]),
+  );
+
+  /** Кто уже на странице: и оставшиеся, и уже подставленные замены. */
+  const present = new Set(models.map(model => model.username));
+
+  return models.map((model) => {
+    if (!offline.has(model.username)) return model;
+
+    const replacement = byUsername.get(model.username);
+    if (!replacement || present.has(replacement.username)) return model;
+
+    present.delete(model.username);
+    present.add(replacement.username);
+
+    return replacement;
+  });
+}