itube-specs 0.0.939 → 0.0.941

package/README.md

@@ -183,9 +183,11 @@ ad-конфиг), теперь читается из `runtimeConfig.public` (з
 
 - **Слой:** компоненты, composables, API-сервисы, доменные утилиты, runtime-константы/хелперы, типы,
   `lib/` (продуктовые данные), `config/` (темы, брейкпоинты), middleware (`auth`/`normalize`/`age`), SSR-плагины
-  (`country`/`mobile`/`services`/`sentry`/`adv`), BFF-хендлеры `server/api/**` — всё site-agnostic.
+  (`country`/`mobile`/`services`/`sentry`/`adv`), BFF-хендлеры `server/api/**`, общие i18n-ключи
+  (`i18n/locales/` — навигация, сортировки, UI-обвязка) — всё site-agnostic.
 - **Приложение:** только per-site — **значения** config (флаги/реклама/локали) через `runtimeConfig.public`
-  (слой держит пустые контейнеры-заглушки), i18n-локали, `public/` и **выбор темы** (`theme:` в
+  (слой держит пустые контейнеры-заглушки), свои i18n-ключи (SEO/ниша) и оверрайды общих,
+  `public/` и **выбор темы** (`theme:` в
   `config/site.config.ts`). Своего SCSS у приложения нет: `assets/scss/` — пустой слот-оверрайд.
   `server/` целиком в слое, включая locale-кластер.
 

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

@@ -713,6 +713,7 @@ $filter-chips-bg--hover: $color-zinc-800-60;
 $filter-chips-close: $color-zinc-500;
 $filter-chips-close--hover: $color-white;
 $filter-chips-label: $color-zinc-500;
+$filter-chips-flag-border: $color-white-20;
 $filter-chips-row-clear-text: $color-zinc-500;
 $filter-chips-row-clear-text--hover: $color-white;
 

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

@@ -762,6 +762,7 @@ $filter-chips-bg--hover: $color-gray-300;
 $filter-chips-close: $color-gray-500;
 $filter-chips-close--hover: $color-gray-950;
 $filter-chips-label: $color-gray-500;
+$filter-chips-flag-border: $color-gray-300;
 $filter-chips-row-clear-text: $color-gray-500;
 $filter-chips-row-clear-text--hover: $color-gray-950;
 

package/components/filter/chips.vue

@@ -1,10 +1,25 @@
-<!-- Чипса выбранного фильтра: приглушённое название фильтра, значение и сброс по клику -->
+<!-- Чипса выбранного фильтра: приглушённое название фильтра, значение и сброс по клику.
+
+У языковой чипсы вебкамов вместо названия фильтра идёт флаг страны языка, а подпись
+уже собрана переводом («Russian speaking») — поэтому у неё гасится капитализация слов.
+Файла флага для языка может не быть (Китай, Корея) — тогда чипса остаётся без него. -->
 <template>
   <button
+    :class="{'--exact-case': item.flag}"
     class="filter-chips"
     type="button"
     @click="emit('click')"
   >
+    <img
+      v-if="item.flag && !isFlagBroken"
+      :src="`/icons/flags/${item.flag}.svg`"
+      :alt="item.flag"
+      class="filter-chips__flag"
+      width="16"
+      height="16"
+      loading="lazy"
+      @error="isFlagBroken = true"
+    >
     <span class="filter-chips__text">
       <span
         v-if="item.label && !withoutLabel"
@@ -31,6 +46,8 @@ defineProps<{
 const emit = defineEmits<{
   (eventName: 'click'): void
 }>();
+
+const isFlagBroken = ref(false);
 </script>
 
 <style lang="scss">
@@ -58,6 +75,21 @@ const emit = defineEmits<{
   }
 }
 
+.filter-chips.--exact-case {
+  text-transform: none;
+}
+
+// «бабл» как у флагов в тумбе модели, только мельче: круг со срезанным левым нижним углом
+.filter-chips__flag {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  object-fit: cover;
+  border: 1px solid $filter-chips-flag-border;
+  border-radius: 50%;
+  border-end-start-radius: 0;
+}
+
 // подпись и значение читаются одной фразой, поэтому не отдельный флекс-элемент
 .filter-chips__label {
   padding-right: 4px;

package/components/filter/model.vue

@@ -78,7 +78,7 @@ const props = defineProps<{
 
 const model = defineModel<boolean>();
 
-const { t, locale } = useI18n();
+const { t, te, locale } = useI18n();
 const route = useRoute();
 const router = useRouter();
 
@@ -108,8 +108,12 @@ const pendingRouteLike = reactive({
   },
 });
 
-const { chipsItems } = useFilterChipsItems(filters, route, t, locale);
-const { chipsItems: pendingChipsItems } = useFilterChipsItems(filters, pendingRouteLike, t, locale);
+/** Пустая строка вместо имени ключа: у сайта перевода может не быть, и тогда
+ *  подпись чипсы соберётся без него (см. `useFilterChipsItems`). */
+const translate = (key: string, params?: Record<string, unknown>) => (te(key) ? t(key, params || {}) : '');
+
+const { chipsItems } = useFilterChipsItems(filters, route, translate, locale);
+const { chipsItems: pendingChipsItems } = useFilterChipsItems(filters, pendingRouteLike, translate, locale);
 
 const quickFilters = computed(() =>
   filters.value

package/components/section/nav-links.vue

@@ -41,12 +41,16 @@ function linkTo(item: INavLinkItem, index: number) {
     return { path: route.path, query: query };
   }
 
-  if (!item.key) return { query: { ...route.query } };
+  // путь всегда явный: локацию без него роутер разрешает сам и у нишевых разделов
+  // (они живут на алиасах записей) терял префикс — а из `resolve` собирается `href`,
+  // так что промах уезжал в разметку ссылки
+  if (!item.key) return { path: route.path, query: { ...route.query } };
 
   const oldQuery = { ...route.query };
   delete oldQuery['page'];
 
   return {
+    path: route.path,
     query: {
       ...oldQuery,
       [item.key]: item.value

package/components/ui/pagination.vue

@@ -1,3 +1,12 @@
+<!-- Пагинация: номера страниц, «Предыдущая»/«Следующая» и путь с текущим query.
+
+Через `Lazy…` подключать МОЖНО, но только с `hydrate-on-idle`, не с
+`hydrate-on-visible`. Пагинация стоит внизу страницы, а фильтры и сортировка
+меняют query из первого экрана: пока компонент не гидрирован, в DOM висит
+разметка от серверного рендера, и гидрация её атрибуты не переписывает. Клик
+мышью после этого работает (навигация идёт по объекту `to`), а «открыть в новой
+вкладке» уходило по устаревшему `href` — без выбранных фильтров и сортировки.
+Ключ `:key` от числа страниц спасал только когда их количество менялось. -->
 <template>
   <nav
     v-if="length > 1"

package/components/view/model-videos.vue

@@ -58,7 +58,7 @@
       :key="`pagination-${data.allPages}`"
       :total="data.allPages"
       class="view-model-videos__pagination _pagination"
-      hydrate-on-visible
+      hydrate-on-idle
     />
 
     <div

package/components/view/models.vue

@@ -108,7 +108,7 @@
       :key="`pagination-${data.allPages}`"
       :total="data.allPages"
       class="view-models__pagination _pagination"
-      hydrate-on-visible
+      hydrate-on-idle
     />
   </div>
 </template>

package/components/view/video.vue

@@ -83,7 +83,7 @@
       :total="total"
       :limit="10"
       class="view-video__pagination _pagination"
-      hydrate-on-visible
+      hydrate-on-idle
     />
 
     <LazySectionSwiperCards

package/components/view/videos.vue

@@ -66,7 +66,7 @@
       :key="`pagination-${data.allPages}`"
       :total="data.allPages"
       class="view-videos__pagination _pagination"
-      hydrate-on-visible
+      hydrate-on-idle
     />
 
     <SectionCategoriesIsland

package/components/view/webcams.vue

@@ -108,7 +108,7 @@ query-параметрах `filter_*`. Формат провайдера при
       :total="allPages"
       arrow-icon
       class="_pagination"
-      hydrate-on-visible
+      hydrate-on-idle
     />
   </div>
 </template>
@@ -213,10 +213,10 @@ const sections = computed<ISwitcherItem[]>(() => [
 ]);
 
 /**
- * Вход в раздел: если интерфейс не английский, сразу показываем моделей, которые
- * говорят на языке пользователя. Только при первом заходе за сессию — иначе
- * снятый пользователем фильтр возвращался бы сам, — и только если такой язык у
- * провайдера в выдаче есть (иначе получили бы пустую страницу).
+ * Вход в раздел: сразу показываем моделей, которые говорят на языке пользователя.
+ * Только при первом заходе за сессию — иначе снятый пользователем фильтр
+ * возвращался бы сам, — и только если такой язык у провайдера в выдаче есть
+ * (иначе получили бы пустую страницу).
  */
 const isLanguageFilterApplied = useState('webcams-language-filter', () => false);
 
@@ -225,12 +225,12 @@ onMounted(() => {
   isLanguageFilterApplied.value = true;
 
   const code = locale.value.slice(0, 2).toLowerCase();
-  if (code === 'en' || filterCount.value > 0) return;
+  if (filterCount.value > 0) return;
 
   const languageFilter = filters.value.find(item => item.name === 'language');
   if (!languageFilter?.options.some(option => option.name === code)) return;
 
-  router.replace({ query: { ...route.query, filter_language: code } });
+  router.replace({ path: route.path, query: { ...route.query, filter_language: code } });
 });
 
 function translate(key: string, fallback: string) {

package/composables/__tests__/use-model-filter-chips.test.ts

@@ -36,6 +36,42 @@ describe('useFilterChipsItems', () => {
     expect(chipsItems.value[0].value).toEqual(['filter_hair_color']);
   });
 
+  it('языковая чипса: флаг страны языка и подпись переводом, без названия фильтра', () => {
+    const filters = ref([{
+      name: 'language',
+      title: 'Language',
+      options: [
+        { name: 'es', title: 'Spanish' },
+        { name: 'ru', title: 'Russian' },
+      ],
+    }]);
+    const route = { query: { filter_language: 'es' } };
+    const translate = (key: string, params?: Record<string, unknown>) => `${params?.lang} speaking (${key})`;
+    const { chipsItems } = useFilterChipsItems(filters, route, translate, ref('en'));
+
+    expect(chipsItems.value[0]).toEqual({
+      title: 'Spanish speaking (webcams.speaking)',
+      flag: 'es',
+      value: ['filter_language'],
+    });
+  });
+
+  it('языковая чипса: язык без своей страны берёт флаг по мапе, без перевода — только язык', () => {
+    const filters = ref([{
+      name: 'language',
+      title: 'Language',
+      options: [{ name: 'ja', title: 'Japanese' }],
+    }]);
+    const route = { query: { filter_language: 'ja' } };
+    const { chipsItems } = useFilterChipsItems(filters, route, () => '', ref('en'));
+
+    expect(chipsItems.value[0]).toEqual({
+      title: 'Japanese',
+      flag: 'jp',
+      value: ['filter_language'],
+    });
+  });
+
   it('группирует from/to фильтры', () => {
     const filters = ref([{
       name: 'age',

package/composables/fetch/use-fetch-playlists-by-id.ts

@@ -1,5 +1,6 @@
 import { useRoute } from 'vue-router';
-import { AsyncData, type Language } from '../../runtime';
+import { AsyncData  } from '../../runtime';
+import type { Language } from '../../runtime';
 import type { IPlaylistData } from '../../types';
 
 export const useFetchPlaylistsById = async (apiMethod: (...args: any[]) => Promise<IPlaylistData>) => {

package/composables/fetch/use-fetch-playlists-get-videos-by-id.ts

@@ -1,4 +1,5 @@
-import { AsyncData, type Language } from '../../runtime';
+import { AsyncData  } from '../../runtime';
+import type { Language } from '../../runtime';
 import type { IVideoCard, PaginatedResponse } from '../../types';
 import { useRoute } from 'vue-router';
 

package/composables/use-filter-pending.ts

@@ -64,8 +64,10 @@ export function useFilterPending(options: {
     options.open.value = false;
     const query = options.encode(values.value, route.query);
 
-    if (options.navigate === 'replace') router.replace({ query });
-    else router.push({ query });
+    // путь явно: локация без него разрешается роутером, и у нишевых разделов
+    // (алиасы записей) префикс ниши пропадал
+    if (options.navigate === 'replace') router.replace({ path: route.path, query });
+    else router.push({ path: route.path, query });
   }
 
   return { values, count, isFiltered, set, remove, replace, reset, apply };

package/composables/use-model-filter-chips.ts

@@ -2,12 +2,16 @@ import type { IFilterChipItem, IModelFilter, IModelFilterOptions } from '../type
 import type { LocationQuery } from '#vue-router';
 import { getMonth } from '../runtime';
 import { buildChipParts } from '../utils/filter-chips/build-chip-parts';
+import { LANG_TO_FLAG } from '../utils/webcams/lang-to-flag';
 import type { Ref } from 'vue';
 
+/** Единственный фильтр-язык у нас в вебкамах: у моделей такого поля нет. */
+const LANGUAGE_FILTER = 'language';
+
 export function useFilterChipsItems(
   filters: Ref<IModelFilter[]>,
   route: { query: LocationQuery },
-  t: (key: string) => string,
+  t: (key: string, params?: Record<string, unknown>) => string,
   locale: Ref<string>
 ) {
   const chipsItems = computed<IFilterChipItem[]>(() => {
@@ -83,6 +87,22 @@ export function useFilterChipsItems(
     const getValueText = (items: string[]) =>
       [...new Set(items.map(getValue).filter(v => v !== undefined && v !== null && v !== ''))].join(' - ');
 
+    /**
+     * Язык — не просто значение фильтра, а свойство модели: в облаке он читается
+     * как «Russian speaking» и с флагом страны языка, без приглушённой подписи
+     * фильтра (по макету раздела вебкамов). Флаг лежит файлом по коду СТРАНЫ, а
+     * фильтр приходит языком — переводим по мапе; нет файла — чипса просто без
+     * флага. Если у сайта ключа перевода ещё нет, остаётся название языка.
+     */
+    const buildLanguageChip = (valueText: string) => {
+      const code = String(route.query[`filter_${LANGUAGE_FILTER}`] || '').toLowerCase();
+
+      return {
+        title: t('webcams.speaking', { lang: valueText }) || valueText,
+        flag: LANG_TO_FLAG[code] || code,
+      };
+    };
+
     return groups
       .map(item => {
         const filter = findFilter(item);
@@ -90,7 +110,9 @@ export function useFilterChipsItems(
         const valueText = getValueText(item);
         if (!valueText) return null;
         return {
-          ...buildChipParts(filter.title, valueText),
+          ...(filter.name === LANGUAGE_FILTER
+            ? buildLanguageChip(valueText)
+            : buildChipParts(filter.title, valueText)),
           value: item.map(
             sub => `filter_${sub.replace(/ /g, '_')}`
           ),

package/i18n/locales/de-DE.json

@@ -0,0 +1,34 @@
+{
+  "navigation": {
+    "main": "Hauptmenü",
+    "videos": "Videos",
+    "categories": "Kategorien",
+    "top_categories": "Top-Kategorien",
+    "channels": "Kanäle",
+    "live_sex": "Live-Sex",
+    "history": "Verlauf",
+    "models": "Models",
+    "moments": "Momente",
+    "playlists": "Playlists",
+    "network": "Netzwerk",
+    "profile": "Profil",
+    "settings": "Einstellungen",
+    "my_playlists": "Meine Playlists",
+    "back_to_main_page": "Zur Hauptseite zurück",
+    "watch_later": "Später ansehen"
+  },
+  "sort": {
+    "network": "Netzwerk",
+    "popular": "Beliebt",
+    "trending": "Angesagt",
+    "new_videos": "Neue Videos",
+    "new": "Neu",
+    "new_short": "Neu",
+    "recommended": "Empfohlen",
+    "az": "A-Z",
+    "most_videos": "Meiste Videos",
+    "last_updated": "Zuletzt aktualisiert",
+    "longest": "Längste",
+    "longest_short": "Längste"
+  }
+}

package/i18n/locales/en-US.json

@@ -0,0 +1,38 @@
+{
+  "navigation": {
+    "main": "Main",
+    "videos": "Videos",
+    "categories": "Categories",
+    "top_categories": "Top categories",
+    "channels": "Channels",
+    "live_sex": "Live Sex",
+    "webcams": "Webcams",
+    "history": "History",
+    "models": "Models",
+    "moments": "Moments",
+    "playlists": "Playlists",
+    "network": "Network",
+    "profile": "Profile",
+    "settings": "Settings",
+    "my_playlists": "My playlists",
+    "library": "Library",
+    "back_to_main_page": "Back to Main page",
+    "watch_later": "Watch Later"
+  },
+  "sort": {
+    "recent": "Recent",
+    "relevant": "Relevant",
+    "network": "Network",
+    "popular": "Popular",
+    "trending": "Trending",
+    "new_videos": "New videos",
+    "new": "New",
+    "new_short": "New",
+    "recommended": "Recommended",
+    "az": "A-Z",
+    "most_videos": "Most videos",
+    "last_updated": "Last updated",
+    "longest": "Longest",
+    "longest_short": "Longest"
+  }
+}

package/i18n/locales/es-ES.json

@@ -0,0 +1,34 @@
+{
+  "navigation": {
+    "main": "Principal",
+    "videos": "Vídeos",
+    "categories": "Categorías",
+    "top_categories": "Categorías principales",
+    "channels": "Canales",
+    "models": "Modelos",
+    "moments": "Momentos",
+    "playlists": "Listas de reproducción",
+    "network": "Red",
+    "profile": "Perfil",
+    "settings": "Configuraciones",
+    "my_playlists": "Mis listas de reproducción",
+    "back_to_main_page": "Volver a la página principal",
+    "history": "Historial",
+    "live_sex": "Sexo en vivo",
+    "watch_later": "Ver después"
+  },
+  "sort": {
+    "network": "Red",
+    "popular": "Popular",
+    "trending": "Tendencia",
+    "new_videos": "Vídeos nuevos",
+    "new": "Nuevo",
+    "new_short": "Nuevo",
+    "recommended": "Recomendado",
+    "az": "A-Z",
+    "most_videos": "Más videos",
+    "last_updated": "Última actualización",
+    "longest": "Más largo",
+    "longest_short": "Largos"
+  }
+}

package/i18n/locales/fr-FR.json

@@ -0,0 +1,34 @@
+{
+  "navigation": {
+    "main": "Principal",
+    "videos": "Vidéos",
+    "categories": "Catégories",
+    "top_categories": "Catégories principales",
+    "channels": "Chaînes",
+    "models": "Modèles",
+    "moments": "Moments",
+    "playlists": "Listes de lecture",
+    "network": "Réseau",
+    "profile": "Profil",
+    "settings": "Paramètres",
+    "my_playlists": "Mes listes de lecture",
+    "back_to_main_page": "Retour à la page principale",
+    "history": "Historique",
+    "live_sex": "Sexe en direct",
+    "watch_later": "Regarder plus tard"
+  },
+  "sort": {
+    "network": "Réseau",
+    "popular": "Populaire",
+    "trending": "Tendance",
+    "new_videos": "Nouvelles vidéos",
+    "new": "Nouveau",
+    "new_short": "Nouveau",
+    "recommended": "Recommandé",
+    "az": "A-Z",
+    "most_videos": "Plus de vidéos",
+    "last_updated": "Dernière mise à jour",
+    "longest": "Les plus longues",
+    "longest_short": "Longues"
+  }
+}

package/i18n/locales/it-IT.json

@@ -0,0 +1,34 @@
+{
+  "navigation": {
+    "main": "Principale",
+    "videos": "Video",
+    "categories": "Categorie",
+    "top_categories": "Categorie principali",
+    "channels": "Canali",
+    "models": "Modelli",
+    "moments": "Momenti",
+    "playlists": "Playlist",
+    "network": "Rete",
+    "profile": "Profilo",
+    "settings": "Impostazioni",
+    "my_playlists": "Le mie playlist",
+    "back_to_main_page": "Torna alla pagina principale",
+    "history": "Cronologia",
+    "live_sex": "Sesso dal vivo",
+    "watch_later": "Guarda dopo"
+  },
+  "sort": {
+    "network": "Rete",
+    "popular": "Popolare",
+    "trending": "Tendenza",
+    "new_videos": "Nuovi video",
+    "new": "Nuovo",
+    "new_short": "Nuovo",
+    "recommended": "Raccomandato",
+    "az": "A-Z",
+    "most_videos": "Più video",
+    "last_updated": "Ultimo aggiornamento",
+    "longest": "Più lungo",
+    "longest_short": "Lunghi"
+  }
+}

package/i18n/locales/ja-JP.json

@@ -0,0 +1,34 @@
+{
+  "navigation": {
+    "main": "メイン",
+    "videos": "ビデオ",
+    "top_categories": "トップカテゴリ",
+    "categories": "カテゴリ",
+    "channels": "チャンネル",
+    "models": "モデル",
+    "moments": "瞬間",
+    "playlists": "プレイリスト",
+    "network": "ネットワーク",
+    "profile": "プロフィール",
+    "settings": "設定",
+    "my_playlists": "マイプレイリスト",
+    "back_to_main_page": "メインページに戻る",
+    "history": "履歴",
+    "live_sex": "ライブ",
+    "watch_later": "後で見る"
+  },
+  "sort": {
+    "network": "ネットワーク",
+    "popular": "人気",
+    "trending": "トレンド",
+    "new_videos": "新着ビデオ",
+    "new": "新しい",
+    "new_short": "新しい",
+    "recommended": "おすすめ",
+    "az": "A-Z",
+    "most_videos": "ビデオ数最多",
+    "last_updated": "最終更新",
+    "longest": "最長",
+    "longest_short": "最長"
+  }
+}

package/i18n/locales/ko-KR.json

@@ -0,0 +1,34 @@
+{
+  "navigation": {
+    "main": "메인",
+    "videos": "비디오",
+    "categories": "카테고리",
+    "top_categories": "상위 카테고리",
+    "channels": "채널",
+    "models": "모델",
+    "moments": "순간",
+    "playlists": "재생목록",
+    "network": "네트워크",
+    "profile": "프로필",
+    "settings": "설정",
+    "my_playlists": "내 재생목록",
+    "back_to_main_page": "메인 페이지로 돌아가기",
+    "history": "기록",
+    "live_sex": "라이브",
+    "watch_later": "나중에 보기"
+  },
+  "sort": {
+    "network": "네트워크",
+    "popular": "인기",
+    "trending": "트렌드",
+    "new_videos": "신규 비디오",
+    "new": "새로운",
+    "new_short": "새로운",
+    "recommended": "추천",
+    "az": "A-Z",
+    "most_videos": "동영상 수 최다",
+    "last_updated": "마지막 업데이트",
+    "longest": "가장 긴",
+    "longest_short": "가장 긴"
+  }
+}

package/i18n/locales/ru-RU.json

@@ -0,0 +1,34 @@
+{
+  "navigation": {
+    "main": "Главная",
+    "videos": "Видео",
+    "categories": "Категории",
+    "top_categories": "Топ категории",
+    "channels": "Каналы",
+    "live_sex": "Прямой эфир",
+    "history": "История",
+    "models": "Модели",
+    "moments": "Моменты",
+    "playlists": "Плейлисты",
+    "network": "Сеть",
+    "profile": "Профиль",
+    "settings": "Настройки",
+    "my_playlists": "Мои плейлисты",
+    "back_to_main_page": "Вернуться на главную",
+    "watch_later": "Смотреть позже"
+  },
+  "sort": {
+    "network": "Сеть",
+    "popular": "Популярное",
+    "trending": "В тренде",
+    "new_videos": "Новые видео",
+    "new": "Новое",
+    "new_short": "Новые",
+    "recommended": "Рекомендуемые",
+    "az": "A-Z",
+    "most_videos": "Больше видео",
+    "last_updated": "Последние",
+    "longest": "Самые длинные",
+    "longest_short": "Длинные"
+  }
+}