itube-specs 0.0.919 → 0.0.921

package/components/webcam/stripcash-card.vue

@@ -66,8 +66,8 @@ const normalized = computed<IWebcamModel>(() => {
     viewers: item.viewers_count,
     age: item.age,
     country: item.country,
-    languages: item.languages,
-    flags: item.flags,
+    languages: item.languages || [],
+    flags: item.flags || [],
     tags: visibleTags(item.tags),
     isNew: item.isNew ?? item.is_new ?? isNewModel(item.tags),
     goal: item.goalMessage ? { message: item.goalMessage, percent } : undefined,

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

@@ -0,0 +1,20 @@
+import type { Language } from '../../runtime';
+import { ModelsApiService } from '../../services/api/models.service';
+
+/**
+ * Сколько всего моделей в нише — например подпись у пункта «Видео» в
+ * переключателе разделов на странице вебкамов. Счётчик меняется медленно,
+ * поэтому ручка кэшируется на бекенде (заголовок `X-Cache-Time`).
+ */
+export const useFetchModelsCount = async () => {
+  const lang = useLang() as Language;
+  const niche = NicheHelper.getSiteDefaultNiche();
+
+  const { data } = await useAsyncData(
+    `models-count-${niche}-${lang}`,
+    () => ModelsApiService.getCount(lang),
+    { default: () => ({ total: 0 }) },
+  );
+
+  return computed(() => data.value?.total || 0);
+};

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

@@ -0,0 +1,45 @@
+import type { MaybeRefOrGetter } from 'vue';
+import type { Language } from '../../runtime';
+import type { IWebcamModelsResponse } from '../../types';
+import { WebcamsApiService } from '../../services/api/webcams.service';
+import { toWebcamFilterPayload } from '../../utils/webcams/to-filter-payload';
+import { WEBCAM_NEW_TAG } from '../../lib';
+
+/**
+ * Страница вебкам-моделей: выдача провайдера + фасеты фильтров одним запросом.
+ *
+ * Состояние фильтров живёт в query-параметрах `filter_*` (общая конвенция сайта),
+ * страница — в `page`. Сортировки у провайдера нет: `?sort=new` превращается в
+ * его тег `new`, а тег из пути (`/webcams/{tag}`) старше сортировки.
+ *
+ * @param tag - тег из пути раздела, если он есть
+ */
+export const useFetchWebcamModels = async (tag: MaybeRefOrGetter<string>) => {
+  const route = useRoute();
+  const lang = useLang() as Language;
+  const mobile = !!useState<boolean>('isMobile').value;
+  const perPage = mobile ? 12 : 48;
+
+  const requestTag = computed(() => toValue(tag) || (route.query.sort === WEBCAM_NEW_TAG ? WEBCAM_NEW_TAG : ''));
+  const filters = computed(() => toWebcamFilterPayload(route.query));
+
+  const { data, status, refresh } = await useAsyncData<IWebcamModelsResponse>(
+    'webcam-models',
+    () => useApiFetcher<IWebcamModelsResponse>(
+      'webcam-models',
+      WebcamsApiService.getModelsWithFacets,
+      lang,
+      {
+        page: Number(route.query.page) || 1,
+        'per-page': perPage,
+      },
+      requestTag.value,
+      filters.value,
+    )(),
+    {
+      watch: [() => JSON.stringify(route.query), requestTag],
+    },
+  );
+
+  return { data, status, refresh };
+};

package/lib/index.ts

@@ -9,6 +9,7 @@ export * from './scheme/select-duration-items';
 export * from './scheme/select-added-items';
 export * from './scheme/sort-channels';
 export * from './scheme/sort-models';
+export * from './scheme/sort-webcams';
 export * from './scheme/sort-playlists';
 export * from './scheme/sort-collections';
 export * from './scheme/sort-items-default';

package/lib/scheme/sort-webcams.ts

@@ -0,0 +1,22 @@
+import type { INavLinkItem } from '../../types';
+
+/**
+ * Вебкамы: провайдер сортировку не поддерживает (`order` он игнорирует), выдача
+ * всегда идёт по популярности. Поэтому «новые» — это не сортировка, а его тег
+ * `new`: им же помечена плашка «новая модель» на тумбе.
+ */
+export const sortWebcams: Array<INavLinkItem> = [
+  {
+    title: 'sort.popular',
+    value: 'popular',
+    key: 'sort',
+  },
+  {
+    title: 'sort.new',
+    value: 'new',
+    key: 'sort',
+  },
+];
+
+/** Тег провайдера, которым отбираются новые модели (сортировка `?sort=new`). */
+export const WEBCAM_NEW_TAG = 'new';

package/package.json

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

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

@@ -0,0 +1,75 @@
+<!-- Раздел вебкам-моделей. Сайт может переопределить страницу, чтобы подключить
+свою статистику к событиям `model-click` / `model-view` у `ViewWebcams`. -->
+<template>
+  <div>
+    <UiBreadcrumbs
+      :items="breadcrumbs"
+      class="_breadcrumbs _container"
+    />
+
+    <ViewWebcams
+      :data="data"
+      :status="status"
+      :h1="h1"
+      :tag="tag"
+      :models-total="modelsTotal"
+    />
+
+    <SectionSeoText
+      :text="t('webcams_footer_text')"
+      class="webcams__seo _container"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IBreadcrumbItem } from '../../types';
+import { sortWebcams } from '../../lib';
+
+const { t } = useI18n();
+const route = useRoute();
+
+/** Тег — сегмент пути (`/webcams/{tag}`), как на боевом движке. */
+const tag = computed(() => String(route.params.tag || ''));
+
+/** Теги провайдера приходят слагами (`cheap-privates`) — показываем словами. */
+const tagTitle = computed(() => tag.value.replace(/[-_]+/g, ' '));
+
+const [{ data, status }, modelsTotal] = await Promise.all([
+  useFetchWebcamModels(tag),
+  // счётчик для пункта «Видео» в переключателе разделов
+  useFetchModelsCount(),
+]);
+
+const { meta, h1 } = useMeta({
+  t,
+  pageKey: 'webcams',
+  brandName: useAppConfig().brandName,
+  sortOptions: sortWebcams,
+  text: () => tagTitle.value,
+  // у страницы тега свой заголовок: без тега шаблон с подстановкой оставлял
+  // висячее двоеточие
+  h1Key: () => (tag.value ? 'h1_tag' : 'h1'),
+});
+
+watchEffect(() => {
+  useHead(meta.value);
+});
+
+// пути тут без ниши и локали: их подставляет сам UiBreadcrumbs (generateLink)
+const breadcrumbs = computed<IBreadcrumbItem[]>(() => [
+  {
+    name: t('navigation.main'),
+    to: '/',
+  },
+  ...(tag.value
+    ? [{ name: t('navigation.webcams'), to: '/webcams' }, { name: tagTitle.value }]
+    : [{ name: t('navigation.webcams') }]),
+]);
+</script>
+
+<style lang="scss">
+.webcams__seo {
+  margin-bottom: 24px;
+}
+</style>

package/server/api/models/count.get.ts

@@ -0,0 +1,18 @@
+import { getUrlWithProxiedParams } from '../../../runtime';
+
+/**
+ * Количество моделей в нише — для счётчиков в интерфейсе (например у пункта
+ * «Видео» в переключателе разделов на странице вебкамов).
+ *
+ * Тонкий прокси к `GET /v2/models/count`: ниша и язык приезжают заголовками от
+ * клиента и форвардятся дальше вместе с остальными. Ответ кэшируем на час —
+ * счётчик меняется медленно, а показывается на каждой странице раздела.
+ */
+export default defineEventHandler(async (event): Promise<{ total: number }> => {
+  const apiUrl = process.env.NUXT_PUBLIC_API_DOMAIN;
+  const url = getUrlWithProxiedParams(`${apiUrl}/v2/models/count`, event);
+
+  const data = await cachedApiFetch<{ total?: number }>(url, event, 3600).catch(() => null);
+
+  return { total: data?.total || 0 };
+});

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

@@ -0,0 +1,41 @@
+/**
+ * Листинг вебкам-моделей с фасетами — источник данных раздела `/webcams`.
+ *
+ * Тонкий прокси к POST `/v2/stripcash/online-models-filter`: тело (выбранные
+ * фильтры) уходит как есть, ответ разворачивается в плоскую форму слоя
+ * (`items` / `total` / `allPages` / `currentPage` / `filters`).
+ *
+ * Ручка отвечает 400 без непустого `tag`, а «любой тег» понимает как пробел —
+ * поэтому при отсутствии тега подставляем пробел. Ниша и язык приезжают
+ * заголовками `X-Niche` / `X-Language` от клиента (без них выдача пустая) и
+ * форвардятся дальше вместе с остальными заголовками запроса.
+ */
+export default defineEventHandler(async (event) => {
+  const apiUrl = process.env.NUXT_PUBLIC_API_DOMAIN;
+  const query = getQuery(event);
+
+  const url = new URL(`${apiUrl}/v2/stripcash/online-models-filter`);
+  url.search = new URLSearchParams({
+    page: String(query.page || 1),
+    'per-page': String(query['per-page'] || 48),
+    tag: String(query.tag || ' '),
+  }).toString();
+
+  const body = await readBody(event);
+
+  const rawData = await apiFetch(url.toString(), {
+    method: 'POST',
+    headers: event.node.req.headers as HeadersInit,
+    body: JSON.stringify(body),
+  });
+
+  const data = rawData?.data || {};
+
+  return {
+    items: data.items || [],
+    filters: data.filters || [],
+    total: data.total || 0,
+    allPages: data.all_pages || 0,
+    currentPage: data.current_page || 1,
+  };
+});

package/services/api/models.service.ts

@@ -285,6 +285,26 @@ export class ModelsApiService {
     );
   }
 
+  /** Сколько всего моделей в нише — для счётчиков в интерфейсе. */
+  static async getCount(
+    lang: Language,
+    niche? = NicheHelper.getSiteDefaultNiche(),
+  ): Promise<{ total: number }> {
+    return await ApiHelper.fetch(
+      '/models/count',
+      {
+        method: 'GET',
+        headers: {
+          'X-Niche': niche,
+          'X-Language': toHeaderLanguage(lang),
+          'X-Cache-Time': 3600,
+          'Content-Type': 'application/json',
+        },
+      },
+      useRuntimeConfig(),
+    );
+  }
+
   static async getTopChips(
     limit: number,
     max_sampling_limit: number,

package/services/api/webcams.service.ts

@@ -0,0 +1,34 @@
+import type { Language } from '../../runtime';
+import { ApiHelper, toHeaderLanguage } from '../../runtime';
+import type { IWebcamModelsResponse } from '../../types';
+
+/** Сервис вебкам-моделей: листинг раздела `/webcams` с фасетами фильтров. */
+export class WebcamsApiService {
+  static async getModelsWithFacets(
+    lang: Language,
+    pagination: { page: number, 'per-page': number },
+    tag: string,
+    filters: Array<{ name: string, value: string }>,
+    niche? = NicheHelper.getSiteDefaultNiche(),
+  ): Promise<IWebcamModelsResponse> {
+    return await ApiHelper.fetch(
+      '/webcams/list',
+      {
+        method: 'POST',
+        headers: {
+          'X-Niche': niche,
+          'X-Language': toHeaderLanguage(lang),
+          'Content-Type': 'application/json',
+        },
+        params: {
+          ...pagination,
+          tag,
+        },
+        body: {
+          filters,
+        },
+      },
+      useRuntimeConfig(),
+    );
+  }
+}

package/types/index.d.ts

@@ -75,3 +75,6 @@ export * from './webcam-model';
 export * from './webcam-counts';
 export * from './stripcash-model';
 export * from './webcams-config';
+export * from './switcher-item';
+export * from './webcam-facet';
+export * from './webcam-models-response';

package/types/switcher-item.d.ts

@@ -0,0 +1,13 @@
+/** Опция переключателя: значение, подпись и необязательные иконка с подписью-счётчиком. */
+export interface ISwitcherItem {
+  /** Значение опции — оно уходит в `v-model`. */
+  name: string;
+  /** Подпись опции. */
+  title: string;
+  /** Имя иконки (коллекция `custom`), рисуется перед подписью-счётчиком. */
+  icon?: string;
+  /** Второстепенная подпись: количество, «30 online» и подобное. */
+  subtitle?: string;
+  /** Адрес перехода: с ним опция рисуется ссылкой, а не кнопкой выбора. */
+  to?: string;
+}

package/types/webcam-facet.d.ts

@@ -0,0 +1,7 @@
+/** Фасет фильтра в формате провайдера: имя с префиксом `mf_` и его варианты. */
+export interface IWebcamFacet {
+  name?: string;
+  title?: string;
+  kind?: string;
+  options?: Array<{ name: string, title: string, quantity: number }> | null;
+}

package/types/webcam-models-response.d.ts

@@ -0,0 +1,12 @@
+import type { IStripcashModel } from './stripcash-model';
+import type { IWebcamFacet } from './webcam-facet';
+
+/** Ответ листинга вебкам-моделей: страница выдачи и фасеты фильтров. */
+export interface IWebcamModelsResponse {
+  items: IStripcashModel[];
+  /** Фасеты в формате провайдера (префикс `mf_`) — нормализуются на клиенте. */
+  filters: IWebcamFacet[];
+  total: number;
+  allPages: number;
+  currentPage: number;
+}

package/utils/webcams/__tests__/count-filters.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest';
+import { countWebcamFilters } from '../count-filters';
+
+describe('countWebcamFilters', () => {
+  it('считает уникальные фильтры, склеивая границы диапазона', () => {
+    expect(countWebcamFilters({ filter_age_from: '20', filter_age_to: '30', filter_country: 'co', page: '3' })).toBe(2);
+  });
+
+  it('без фильтров — ноль', () => {
+    expect(countWebcamFilters({ sort: 'new' })).toBe(0);
+  });
+});

package/utils/webcams/__tests__/normalize-facets.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest';
+import { normalizeWebcamFacets } from '../normalize-facets';
+import { WEBCAM_FILTER_ANY } from '../facets';
+
+const FACETS = [
+  { name: 'mf_age', title: 'Age', kind: 'range', options: [{ name: '19', title: '', quantity: 0 }, { name: '38', title: '', quantity: 0 }] },
+  { name: 'mf_country', title: 'Country', kind: 'select', options: [{ name: 'co', title: 'Colombia', quantity: 13 }, { name: '', title: '', quantity: 11 }, { name: 'us', title: 'USA', quantity: 2 }] },
+  { name: 'mf_eye_color', title: 'Eye Color', kind: 'select', options: [{ name: 'brown', title: 'Brown', quantity: 10 }] },
+  { name: 'mf_tag', title: 'Tag', kind: 'select', options: [{ name: 'milf', title: 'Milf', quantity: 3 }, { name: 'teen', title: 'Teen', quantity: 5 }] },
+];
+
+describe('normalizeWebcamFacets', () => {
+  it('снимает префикс провайдера и выкидывает технические фасеты', () => {
+    expect(normalizeWebcamFacets(FACETS).map(item => item.name)).toEqual(['age', 'country']);
+  });
+
+  it('отбрасывает опции с пустым значением', () => {
+    const country = normalizeWebcamFacets(FACETS).find(item => item.name === 'country');
+
+    expect(country?.options.map(option => option.name)).toEqual([WEBCAM_FILTER_ANY, 'co', 'us']);
+  });
+
+  it('добавляет селекту вариант «любой» с общим количеством, диапазону — нет', () => {
+    const [age, country] = normalizeWebcamFacets(FACETS, 930);
+
+    expect(age.options.map(option => option.name)).toEqual(['19', '38']);
+    expect(country.options[0]).toEqual({ name: WEBCAM_FILTER_ANY, title: WEBCAM_FILTER_ANY, quantity: 930 });
+  });
+
+  it('скрывает селект с одним вариантом и слипшийся диапазон', () => {
+    const degenerate = [
+      { name: 'mf_eye_color', kind: 'select', options: [{ name: 'brown', title: 'Brown', quantity: 1 }] },
+      { name: 'mf_age', kind: 'range', options: [{ name: '25', title: '', quantity: 0 }, { name: '25', title: '', quantity: 0 }] },
+    ];
+
+    expect(normalizeWebcamFacets(degenerate)).toEqual([]);
+  });
+
+  it('раскладывает фильтры по группам: строка фильтров и модалка', () => {
+    const groups = normalizeWebcamFacets([
+      ...FACETS,
+      { name: 'mf_body_type', title: 'Body Type', kind: 'select', options: [{ name: 'thin', title: 'Thin', quantity: 6 }, { name: 'athletic', title: 'Athletic', quantity: 4 }] },
+    ]).map(item => [item.name, item.group.name]);
+
+    expect(groups).toEqual([['age', 'quick'], ['country', 'quick'], ['body_type', 'appearance']]);
+  });
+
+  it('пустой ответ провайдера не роняет нормализацию', () => {
+    expect(normalizeWebcamFacets(null)).toEqual([]);
+    expect(normalizeWebcamFacets(undefined)).toEqual([]);
+  });
+});

package/utils/webcams/__tests__/to-filter-payload.test.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest';
+import { toWebcamFilterPayload } from '../to-filter-payload';
+
+describe('toWebcamFilterPayload', () => {
+  it('переводит query-фильтры в параметры провайдера', () => {
+    expect(toWebcamFilterPayload({ filter_country: 'co', filter_age_from: '20', page: '2', sort: 'new' }))
+      .toEqual([{ name: 'mf_country', value: 'co' }, { name: 'mf_age_from', value: '20' }]);
+  });
+
+  it('пустые значения не отправляем', () => {
+    expect(toWebcamFilterPayload({ filter_country: '', filter_language: undefined })).toEqual([]);
+  });
+
+  it('из массива значений берёт первое', () => {
+    expect(toWebcamFilterPayload({ filter_language: ['en', 'es'] })).toEqual([{ name: 'mf_language', value: 'en' }]);
+  });
+});

package/utils/webcams/count-filters.ts

@@ -0,0 +1,14 @@
+import { WEBCAM_FILTER_QUERY_PREFIX } from './facets';
+
+/**
+ * Сколько фильтров применено — для счётчика на кнопке «Фильтр». Границы диапазона
+ * (`_from` / `_to`) считаются одним фильтром.
+ * @param query - query текущего роута
+ */
+export function countWebcamFilters(query: Record<string, unknown>): number {
+  const names = Object.keys(query)
+    .filter(key => key.startsWith(WEBCAM_FILTER_QUERY_PREFIX))
+    .map(key => key.replace(/_(from|to)$/, ''));
+
+  return new Set(names).size;
+}

package/utils/webcams/facets.ts

@@ -0,0 +1,31 @@
+/**
+ * Фасетные фильтры вебкам-моделей: имена и группы, по которым фасеты провайдера
+ * приводятся к формату слоя.
+ *
+ * Провайдер (Stripcash) отдаёт фасеты с префиксом `mf_` и без групп, а готовые
+ * фильтр-компоненты слоя (`FilterSelects`, `FilterModel`, `FilterSlider`) работают
+ * с `IModelFilter` и держат состояние в query-параметрах `filter_*`. Поэтому
+ * вебкамы живут на общей конвенции сайта (`?filter_country=co`), а префикс
+ * провайдера приклеивается только в запросе.
+ */
+
+/** Префикс фасетов у провайдера. */
+export const WEBCAM_FACET_PREFIX = 'mf_';
+
+/** Префикс query-параметров фильтров — общий для всего сайта. */
+export const WEBCAM_FILTER_QUERY_PREFIX = 'filter_';
+
+/** Фасеты, которые провайдер отдаёт, а интерфейсу они не нужны. */
+export const WEBCAM_EXCLUDED_FACETS = ['interested_in', 'tag'];
+
+/** Фасеты в строке фильтров; остальные уезжают в модалку «Фильтр». */
+export const WEBCAM_QUICK_FACETS = ['age', 'language', 'country', 'specifics'];
+
+/** Значение селекта «любой» — слой по нему удаляет параметр из query. */
+export const WEBCAM_FILTER_ANY = 'all';
+
+/** Группы фильтров: строка фильтров и всё остальное. */
+export const WEBCAM_FILTER_GROUPS = {
+  quick: { name: 'quick', order: 0 },
+  more: { name: 'appearance', order: 1 },
+};

package/utils/webcams/normalize-facets.ts

@@ -0,0 +1,57 @@
+import type { IModelFilter, IModelFilterOptions, IWebcamFacet } from '../../types';
+import {
+  WEBCAM_EXCLUDED_FACETS,
+  WEBCAM_FACET_PREFIX,
+  WEBCAM_FILTER_ANY,
+  WEBCAM_FILTER_GROUPS,
+  WEBCAM_QUICK_FACETS,
+} from './facets';
+
+/**
+ * Приводит фасеты провайдера к фильтрам слоя.
+ *
+ * Правила скрытия и исключений взяты с боевого движка: технические фасеты не
+ * рисуются, вырожденные контролы (один вариант, слипшийся диапазон) — тоже.
+ *
+ * Селектам добавляем вариант «любой» первым: в разметке слоя первая опция — это
+ * значение «фильтр не выбран», без неё нельзя выбрать то, что стоит первым в
+ * списке. Диапазонам такой вариант не нужен — у них границы.
+ *
+ * @param facets - фасеты из ответа провайдера
+ * @param total - всего моделей в текущей выдаче (подпись у варианта «любой»)
+ */
+export function normalizeWebcamFacets(facets: IWebcamFacet[] | null | undefined, total = 0): IModelFilter[] {
+  return (facets || []).reduce<IModelFilter[]>((result, facet) => {
+    const name = String(facet.name || '').replace(WEBCAM_FACET_PREFIX, '');
+    if (!name || WEBCAM_EXCLUDED_FACETS.includes(name)) return result;
+
+    // пустое значение у провайдера означает «не указано» — как вариант выбора
+    // оно бессмысленно (в старом движке такие опции тоже отбрасывались)
+    const options = (facet.options || []).filter(option => option.name !== '');
+    const isRange = facet.kind === 'range';
+
+    if (isRange && !isRangeUsable(options)) return result;
+    if (!isRange && options.length < 2) return result;
+
+    const group = WEBCAM_QUICK_FACETS.includes(name) ? WEBCAM_FILTER_GROUPS.quick : WEBCAM_FILTER_GROUPS.more;
+
+    result.push({
+      name,
+      title: String(facet.title || name),
+      kind: String(facet.kind || 'select'),
+      options: isRange ? options : [{ name: WEBCAM_FILTER_ANY, title: WEBCAM_FILTER_ANY, quantity: total }, ...options],
+      group: { name: group.name, title: group.name, order: group.order, description: '' },
+      icon: '',
+      show_on_form: true,
+    });
+
+    return result;
+  }, []);
+}
+
+/** Диапазон имеет смысл, только если границы разные. */
+function isRangeUsable(options: IModelFilterOptions[]): boolean {
+  const values = options.map(option => Number(option.name)).filter(value => !isNaN(value));
+
+  return values.length > 1 && Math.min(...values) !== Math.max(...values);
+}

package/utils/webcams/to-filter-payload.ts

@@ -0,0 +1,16 @@
+import { WEBCAM_FACET_PREFIX, WEBCAM_FILTER_QUERY_PREFIX } from './facets';
+
+/**
+ * Собирает тело запроса к провайдеру из query-параметров фильтров:
+ * `?filter_country=co` → `[{ name: 'mf_country', value: 'co' }]`.
+ * @param query - query текущего роута
+ */
+export function toWebcamFilterPayload(query: Record<string, unknown>): Array<{ name: string, value: string }> {
+  return Object.entries(query)
+    .filter(([key]) => key.startsWith(WEBCAM_FILTER_QUERY_PREFIX))
+    .map(([key, value]) => ({
+      name: `${WEBCAM_FACET_PREFIX}${key.slice(WEBCAM_FILTER_QUERY_PREFIX.length)}`,
+      value: String(Array.isArray(value) ? value[0] : value ?? ''),
+    }))
+    .filter(item => item.value !== '');
+}