itube-specs 0.0.949 → 0.0.951

package/components/card/webcam/index.vue

@@ -9,15 +9,9 @@
 на тег. Из нового: цель стримера и превью стрима появляются по ховеру, а на
 тач-устройствах превью включается удержанием тумбы, а уход из кадра его гасит. -->
 <template>
-  <article
-    class="card-webcam"
-    @mouseenter="onEnter"
-    @mouseleave="onLeave"
-    @touchstart.passive="onTouchStart"
-    @touchmove.passive="onTouchMove"
-    @touchend="onTouchEnd"
-    @touchcancel="onTouchEnd"
-  >
+  <article class="card-webcam">
+    <!-- Превью и цель включает сам постер, а не вся карточка: иначе ховер по имени,
+    стране или тегу под тумбой запускал трансляцию, хотя курсор не на кадре. -->
     <a
       ref="posterRef"
       :href="model.url"
@@ -25,6 +19,12 @@
       target="_blank"
       rel="nofollow noopener sponsored"
       @click="onClick"
+      @mouseenter="onEnter"
+      @mouseleave="onLeave"
+      @touchstart.passive="onTouchStart"
+      @touchmove.passive="onTouchMove"
+      @touchend="onTouchEnd"
+      @touchcancel="onTouchEnd"
     >
       <UiImg
         :src="poster"
@@ -174,6 +174,7 @@
 <script setup lang="ts">
 import type { IWebcamModel } from '../../../types';
 import { isoCodeToCountryName } from '../../../utils/iso-code-to-country-name';
+import { preloadHls } from '../../../utils/webcams/preload-hls';
 
 const props = withDefaults(defineProps<{
   model: IWebcamModel
@@ -249,10 +250,10 @@ function tagTitle(tag: string): string {
 
 /**
  * Превью — живой HLS-поток модели (`.m3u8`), а не файл: нативно его понимает
- * только Safari, остальным нужен hls.js. Библиотека грузится динамически и
- * только при первом превью — она весит больше, чем весь блок, и на большинстве
- * показов не нужна вовсе. Поток отпускаем сразу после ухода курсора: тумб на
- * странице много, и держать открытыми несколько трансляций незачем.
+ * только Safari, остальным нужен hls.js. Библиотеку тянем не с бандлом, а по
+ * появлению тумб на экране (`preloadOnVisible` ниже) — к моменту ховера она уже в
+ * пути. Поток отпускаем сразу после ухода курсора: тумб на странице много, и
+ * держать открытыми несколько трансляций незачем.
  *
  * Воспроизведение запускаем руками, как это делал боевой движок: атрибута
  * `autoplay` для потока, подключённого через MSE, недостаточно.
@@ -270,7 +271,7 @@ async function startPreview() {
   const video = videoRef.value;
   if (!video || !isPreviewActive.value) return;
 
-  const { default: Hls } = await import('hls.js');
+  const { default: Hls } = await preloadHls();
   if (!isPreviewActive.value) return;
 
   // порядок важен: Chrome на `canPlayType('…mpegurl')` отвечает «maybe», но HLS
@@ -372,9 +373,31 @@ watch(isPreviewActive, (active) => {
 });
 
 let observer: IntersectionObserver | null = null;
+let preloadObserver: IntersectionObserver | null = null;
+
+/**
+ * hls.js не нужен, пока тумбы не доехали до экрана: на длинной странице секция
+ * вебкамов может остаться непрочитанной. Первая попавшая в кадр тумба запускает
+ * общую загрузку с запасом в 300px — в разделе вебкамов сетка видна сразу, там это
+ * срабатывает на первом же кадре.
+ */
+function preloadOnVisible(element: HTMLElement) {
+  preloadObserver = new IntersectionObserver((entries) => {
+    if (!entries.some(entry => entry.isIntersecting)) return;
+
+    preloadHls();
+    preloadObserver?.disconnect();
+    preloadObserver = null;
+  }, { rootMargin: '300px' });
+
+  preloadObserver.observe(element);
+}
 
 onMounted(() => {
-  if (posterRef.value) emit('poster', posterRef.value);
+  if (posterRef.value) {
+    emit('poster', posterRef.value);
+    preloadOnVisible(posterRef.value);
+  }
 
   if (!props.touchPreview || !posterRef.value) return;
 
@@ -390,6 +413,7 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   observer?.disconnect();
+  preloadObserver?.disconnect();
   observer = null;
   previewSlot.release(previewId.value);
   stopPreview();

package/components/card/webcam/languages.vue

@@ -1,5 +1,9 @@
 <!-- Языки вебкам-модели: флаги-ссылки на фильтр раздела вебкамов.
 
+Ссылка идёт в НАШ query-параметр фильтра (`filter_language`), а не в провайдерский
+`mf_*`: состояние фильтров раздела живёт в общих `filter_*`, и по `mf_language`
+раздел открывался вообще без фильтра.
+
 Логика повторяет боевой движок: первым идёт язык пользователя, если модель на нём
 говорит. Флагов показываем не больше двух — у иных моделей языков с десяток.
 
@@ -15,7 +19,7 @@
     <a
       v-for="item in items"
       :key="`lang-${item.lang}`"
-      :href="`${nichePath}/webcams?mf_language=${item.lang}`"
+      :href="`${nichePath}/webcams?${WEBCAM_FILTER_QUERY_PREFIX}language=${item.lang}`"
       :aria-label="item.lang"
       class="card-webcam-languages__link"
     >
@@ -42,6 +46,7 @@
 
 <script setup lang="ts">
 import { LANG_TO_FLAG } from '../../../utils/webcams/lang-to-flag';
+import { WEBCAM_FILTER_QUERY_PREFIX } from '../../../utils/webcams/facets';
 
 const props = withDefaults(defineProps<{
   /** Языки модели (ISO-коды) */

package/components/filter/model.vue

@@ -211,7 +211,7 @@ function onChipsClick(item: IFilterChipItem) {
   } else {
     delete query[`${item.value}`];
   }
-  router.replace({ query });
+  router.replace({ path: route.path, query });
 }
 
 function onPendingChipsClick(item: IFilterChipItem) {
@@ -227,7 +227,7 @@ function onClearAllClick() {
     .forEach(key => delete query[key]);
   delete query['page'];
 
-  router.replace({ query });
+  router.replace({ path: route.path, query });
 }
 </script>
 

package/components/filter/page.vue

@@ -106,7 +106,7 @@ watch(units, () => {
     delete query[`filter_${field}_from`];
     delete query[`filter_${field}_to`];
   }
-  router.replace({ query });
+  router.replace({ path: route.path, query });
 });
 
 const unitItems = computed(() => [
@@ -140,7 +140,7 @@ function updateFilter(name: string, val: any) {
     query[ `filter_${name}` ] = val;
   }
 
-  router.replace({ query });
+  router.replace({ path: route.path, query });
 }
 
 function isActiveSelect(name: string) {

package/components/filter/selects.vue

@@ -180,7 +180,7 @@ function onChange(name: string) {
 
   if (isReset) selectValues.value[name] = getSelectValue(name, query);
 
-  router.replace({ query });
+  router.replace({ path: route.path, query });
 }
 
 // Активный слайдер

package/components/filter/slider.vue

@@ -61,7 +61,7 @@ function commitQuery(newQuery: LocationQuery) {
   if (props.query !== undefined) {
     emit('update:query', newQuery);
   } else {
-    router.replace({ query: newQuery });
+    router.replace({ path: route.path, query: newQuery });
   }
 }
 

package/components/filter/videos-chips.vue

@@ -26,19 +26,13 @@ const props = defineProps<{
   scheme: IFilterScheme[]
 }>();
 
-const quickFilterScheme = useAppConfig().quickVideoFilters || [];
-
 const findGroup = (name: string) => props.scheme.find(item => item.name.toLowerCase() === name.toLowerCase());
 
 /**
- * Название группы для подписи чипсы. Сначала короткий заголовок из конфига сайта — тот же,
- * что стоит на кнопке в строке главных фильтров, иначе название группы с бека. Схема грузится
- * лениво, и до неё остаётся только ключ из query.
+ * Название группы для подписи чипсы — как его отдал бек. Схема грузится лениво,
+ * и до неё остаётся только ключ из query.
  */
 function groupLabel(name: string) {
-  const quick = quickFilterScheme.find(item => item.name.toLowerCase() === name.toLowerCase());
-  if (quick?.titleKey) return t(quick.titleKey);
-
   return findGroup(name)?.title || convertString().toCapitalize(name);
 }
 
@@ -113,7 +107,7 @@ function onChipsClick(item: IFilterChipItem) {
 
   removeChipFromQuery(query, item);
 
-  router.replace({ query });
+  router.replace({ path: route.path, query });
 }
 
 /** «Сбросить всё»: снимает фильтры, сортировку не трогает. */
@@ -123,6 +117,6 @@ function onClearAllClick() {
   chipsItems.value.forEach(item => removeChipFromQuery(query, item));
   delete query['page'];
 
-  router.replace({ query });
+  router.replace({ path: route.path, query });
 }
 </script>

package/components/profile/setup.vue

@@ -130,6 +130,7 @@
 <script setup lang="ts">
 import type { ICountry, IGender, IProfileData, ISelectItem } from '../../types';
 import { compressImage, convertDateToTimestamp, validateEmail } from '../../runtime';
+import { isoCodeToCountryName } from '../../utils/iso-code-to-country-name';
 import { AuthorizationApiService } from '../../services/api/authorization.service';
 import { DictionariesApiService } from '../../services/api/dictionaries.service';
 
@@ -224,10 +225,20 @@ const [
   useFetchDictionariesGenders(DictionariesApiService.getGenders),
 ]);
 
-const countriesItems = computed<ISelectItem[] | undefined>(() => countriesData.value?.countries.map(item => ({
-  title: item.title,
-  value: item.title,
-})));
+// Список стран приходит с API только по-английски — подписываем его ICU-словарём и
+// пересортировываем коллатором, как в layout/language.vue. `value` остаётся английским
+// title: по нему findCountry() ищет страну и им же инициализируется поле из профиля.
+const countriesItems = computed<ISelectItem[] | undefined>(() => {
+  const collator = new Intl.Collator(locale.value);
+
+  return countriesData.value?.countries
+    .map((item) => {
+      const code = (item.isoCodes?.[0] || '').toUpperCase();
+      const name = isoCodeToCountryName(code, locale.value);
+      return { title: name === code ? item.title : name, value: item.title };
+    })
+    .sort((a, b) => collator.compare(a.title, b.title));
+});
 
 const gendersItems = computed<ISelectItem[] | undefined>(() => gendersData.value?.genders.map(item => ({
   title: item.title,

package/components/view/videos.vue

@@ -164,22 +164,6 @@ const modelsRoundCards = computed(() =>
     grid-column: 2;
     grid-row: 1;
   }
-
-  @include to-br(sm) {
-    flex-wrap: nowrap;
-    max-width: 100vw;
-    margin-inline: calc(-1 * var(--container-padding-inline));
-    padding-inline: var(--container-padding-inline);
-    overflow: auto;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-}
-
-.view-videos__quick .filter-selects__wrapper {
-  flex-shrink: 0;
 }
 
 // до чипсов воздуха больше, чем между сортировкой и фильтрами

package/components/view/webcams.vue

@@ -157,11 +157,24 @@ const items = computed(() => props.data?.items || []);
 const allPages = computed(() => props.data?.allPages || 0);
 const filterCount = computed(() => countWebcamFilters(route.query));
 
+const currentFacets = computed(() => normalizeWebcamFacets(props.data?.filters, props.data?.total));
+
+/**
+ * Последние непустые фасеты держим у себя: при нулевом результате провайдер
+ * `filters` не присылает, и строка фильтров с чипсами исчезала бы вместе с выдачей —
+ * поправить условия было бы нечем, оставался бы только полный сброс.
+ */
+const lastFacets = ref<IModelFilter[]>([]);
+
+watchEffect(() => {
+  if (currentFacets.value.length) lastFacets.value = currentFacets.value;
+});
+
 /**
  * Фасеты провайдера → фильтры слоя. Подписи фильтров переводим по имени (провайдер
  * отдаёт их только по-английски), варианты оставляем как есть — их у него сотни.
  */
-const filters = computed<IModelFilter[]>(() => normalizeWebcamFacets(props.data?.filters, props.data?.total).map(filter => ({
+const filters = computed<IModelFilter[]>(() => (currentFacets.value.length ? currentFacets.value : lastFacets.value).map(filter => ({
   ...filter,
   title: translate(`webcams.filters.${filter.name}`, filter.title),
   options: filter.options.map(option => (option.name === WEBCAM_FILTER_ANY ? { ...option, title: t('all') } : option)),

package/i18n/locales/en-US.json

@@ -76,8 +76,6 @@
     "tatoos": "Tattoos",
     "orientation": "Orientation"
   },
-  "quick_filter_nationality": "Nationality",
-  "quick_filter_participants": "Participants",
   "language_and_region": "Language & Region",
   "all_models": "All models",
   "user_playlists": "User playlists",

package/package.json

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

package/pages/user/profile.vue

@@ -64,8 +64,9 @@
 </template>
 
 <script setup lang="ts">
-import type { IProfileData } from '../../types';
+import type { ICountry, IProfileData } from '../../types';
 import { convertDateToTimestamp } from '../../runtime';
+import { isoCodeToCountryName } from '../../utils/iso-code-to-country-name';
 
 interface IDataItem {
   title: string
@@ -86,11 +87,24 @@ const memberSince = computed(() => {
   return new Intl.DateTimeFormat(locale.value, { month: 'long', year: 'numeric' }).format(date);
 });
 
+// Страна с API приходит объектом словаря (тип профиля знает её как строку) — подписываем её
+// тем же ICU-словарём, что селектор в шапке и форму профиля. Строку отдаём как есть: имени
+// без ISO-кода не перевести.
+const countryName = computed(() => {
+  const country = data.value.country as unknown as ICountry | string | null;
+  if (!country) return '';
+  if (typeof country === 'string') return country;
+
+  const code = (country.isoCodes?.[0] || '').toUpperCase();
+  const name = isoCodeToCountryName(code, locale.value);
+  return name === code ? country.title : name;
+});
+
 const items = computed<Array<IDataItem>>(() => {
   return [
     {
       title: t('profile.country'),
-      text: data.value.country?.title ?? '',
+      text: countryName.value,
       icon: 'geo'
     },
     {

package/types/quick-filter.d.ts

@@ -12,11 +12,9 @@ export interface IQuickFilterGroup {
   categories: IQuickFilterCategory[]
 }
 
-/** Описание квик-фильтра каталога видео: имя группы категорий и, если название
- *  группы с бека не подходит для короткой кнопки, свой i18n-ключ заголовка. */
+/** Описание квик-фильтра каталога видео: имя группы категорий с бека. */
 export interface IQuickFilterScheme {
   name: string
-  titleKey?: string
   /** Убрать кнопку из строки на узких экранах (до `sm`) — фильтр остаётся в попапе. */
   hideOnMobile?: boolean
 }

package/utils/filter-selects/__tests__/to-quick-filters.test.ts

@@ -45,10 +45,10 @@ describe('toQuickFilters', () => {
     });
   });
 
-  it('заголовок берёт из titleKey, когда название группы не подходит', () => {
-    const [filter] = toQuickFilters(groups, [{ name: 'PPL Involved', titleKey: 'participants' }], translate);
+  it('заголовок берёт с бека, а не из схемы', () => {
+    const [filter] = toQuickFilters(groups, [{ name: 'PPL Involved' }], translate);
 
-    expect(filter?.title).toBe('t:participants');
+    expect(filter?.title).toBe('PPL Involved');
   });
 
   it('разворачивает hideOnMobile схемы в showOnMobile по каждому фильтру', () => {

package/utils/filter-selects/to-quick-filters.ts

@@ -13,7 +13,7 @@ import type { IModelFilter, IQuickFilterGroup, IQuickFilterScheme } from '../../
  *
  * @param groups - группы категорий с бека
  * @param scheme - какие группы показывать и в каком порядке
- * @param translate - `t` из `useI18n` для заголовков из `titleKey` и опции «all»
+ * @param translate - `t` из `useI18n` для опции «all»
  */
 export function toQuickFilters(
   groups: IQuickFilterGroup[],
@@ -28,7 +28,7 @@ export function toQuickFilters(
       return {
         kind: 'select',
         name: group.name.toLowerCase(),
-        title: item.titleKey ? translate(item.titleKey) : group.title,
+        title: group.title,
         icon: '',
         show_on_form: true,
         group: { name: 'quick', title: 'quick', description: '', order: 0 },

package/utils/webcams/preload-hls.ts

@@ -0,0 +1,16 @@
+/**
+ * Один общий импорт hls.js на страницу.
+ *
+ * Библиотека весит больше, чем весь вебкам-блок, и на большинстве показов не нужна
+ * вовсе, поэтому её не тянут ни с бандлом страницы, ни при монтировании тумб —
+ * только когда тумбы реально появились на экране (см. `CardWebcam`). Промис
+ * кешируется: сколько бы тумб ни попало в кадр, запрос уйдёт один, а превью по
+ * ховеру дождётся уже начатой загрузки вместо своей.
+ */
+let hlsModule: Promise<typeof import('hls.js')> | null = null;
+
+export function preloadHls() {
+  if (!hlsModule) hlsModule = import('hls.js');
+
+  return hlsModule;
+}