itube-specs 0.0.950 → 0.0.952

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"
@@ -74,7 +74,7 @@
 
       <span
         v-if="model.goal"
-        :class="{'--visible': isPreviewActive}"
+        :class="{'--visible': isGoalVisible}"
         class="card-webcam__goal"
       >
         <span class="card-webcam__goal-text _truncate">
@@ -100,12 +100,15 @@
         :niche-path="nichePath"
       />
 
+      <!-- Ховер по имени показывает только цель: превью — дело постера. -->
       <a
         :href="model.url"
         class="card-webcam__name _truncate"
         target="_blank"
         rel="nofollow noopener sponsored"
         @click="onClick"
+        @mouseenter="onNameEnter"
+        @mouseleave="onNameLeave"
       >{{ model.name }}</a>
 
       <span
@@ -174,6 +177,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 +253,10 @@ function tagTitle(tag: string): string {
 
 /**
  * Превью — живой HLS-поток модели (`.m3u8`), а не файл: нативно его понимает
- * только Safari, остальным нужен hls.js. Библиотека грузится динамически и
- * только при первом превью — она весит больше, чем весь блок, и на большинстве
- * показов не нужна вовсе. Поток отпускаем сразу после ухода курсора: тумб на
- * странице много, и держать открытыми несколько трансляций незачем.
+ * только Safari, остальным нужен hls.js. Библиотеку тянем не с бандлом, а по
+ * появлению тумб на экране (`preloadOnVisible` ниже) — к моменту ховера она уже в
+ * пути. Поток отпускаем сразу после ухода курсора: тумб на странице много, и
+ * держать открытыми несколько трансляций незачем.
  *
  * Воспроизведение запускаем руками, как это делал боевой движок: атрибута
  * `autoplay` для потока, подключённого через MSE, недостаточно.
@@ -270,7 +274,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
@@ -314,6 +318,24 @@ function onLeave() {
   previewSlot.release(previewId.value);
 }
 
+/**
+ * Цель стримера появляется в двух случаях: при превью (ховер по постеру) и просто
+ * при ховере по имени модели — там поток не нужен, а прочитать цель хочется.
+ */
+const isNameHovered = ref(false);
+
+const isGoalVisible = computed(() => isPreviewActive.value || isNameHovered.value);
+
+function onNameEnter() {
+  if (props.touchPreview) return;
+
+  isNameHovered.value = true;
+}
+
+function onNameLeave() {
+  isNameHovered.value = false;
+}
+
 /**
  * Тач: превью включает удержание тумбы — короткий тап должен открывать модель, а
  * не запускать поток. Движение пальцем считаем скроллом и удержание отменяем.
@@ -372,9 +394,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 +434,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

@@ -118,6 +118,14 @@ const props = defineProps<{
   /** Где живёт состояние: свой query-параметр `filter_<name>` (модели, вебкамы) или общая
    *  строка `categories=<группа>_<значение>` (каталог видео, синхронно с попапом фильтра). */
   mode?: 'param' | 'categories'
+  /**
+   * Своя подпись ВЫБРАННОГО значения на кнопке селекта. Без пропса — обычное поведение
+   * (название выбранной опции). Строка — шаблон с `{value}` (например `{value} speaking`),
+   * функция получает фильтр и выбранную опцию и может вернуть пусто — тогда подпись
+   * стандартная. Нужна там, где выбранное значение читается фразой: в разделе вебкамов
+   * язык на кнопке и в чипсе выглядит как «Russian speaking».
+   */
+  selectedLabel?: string | ((filter: IModelFilter, option: IModelFilterOptions) => string | undefined)
 }>();
 
 const route = useRoute();
@@ -180,7 +188,7 @@ function onChange(name: string) {
 
   if (isReset) selectValues.value[name] = getSelectValue(name, query);
 
-  router.replace({ query });
+  router.replace({ path: route.path, query });
 }
 
 // Активный слайдер
@@ -300,7 +308,18 @@ function getSelectLabel(item: IModelFilter) {
   const current = readQueryValue(item.name, route.query);
   if (!current) return item.title;
   const opt = item.options.find(o => o.name === current);
-  return opt ? capitalize(opt.title) : item.title;
+  if (!opt) return item.title;
+
+  return overrideSelectedLabel(item, opt) || capitalize(opt.title);
+}
+
+/** Подпись выбранного значения из пропса `selectedLabel`; пусто — берётся стандартная. */
+function overrideSelectedLabel(item: IModelFilter, option: IModelFilterOptions) {
+  if (!props.selectedLabel) return '';
+
+  if (typeof props.selectedLabel === 'function') return props.selectedLabel(item, option) || '';
+
+  return props.selectedLabel.replace('{value}', capitalize(option.title));
 }
 
 // Количество бек считает не для всех опций (у синтетической «all» его нет) — скобки без числа не рисуем

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/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

@@ -53,6 +53,7 @@ query-параметрах `filter_*`. Формат провайдера при
           <FilterSelects
             v-if="filters.length"
             :filters="filters"
+            :selected-label="selectedFilterLabel"
           />
         </div>
       </div>
@@ -114,11 +115,11 @@ query-параметрах `filter_*`. Формат провайдера при
 </template>
 
 <script setup lang="ts">
-import type { IModelCard, IModelFilter, ISwitcherItem, IStripcashModel, IWebcamModelsResponse, PaginatedResponse } from '../../types';
+import type { IModelCard, IModelFilter, IModelFilterOptions, ISwitcherItem, IStripcashModel, IWebcamModelsResponse, PaginatedResponse } from '../../types';
 import { countWebcamFilters } from '../../utils/webcams/count-filters';
 import { normalizeWebcamFacets } from '../../utils/webcams/normalize-facets';
 import { toWebcamFilterPayload } from '../../utils/webcams/to-filter-payload';
-import { WEBCAM_FILTER_ANY } from '../../utils/webcams/facets';
+import { WEBCAM_FILTER_ANY, WEBCAM_LANGUAGE_FACET } from '../../utils/webcams/facets';
 import { sortWebcams } from '../../lib';
 
 const props = defineProps<{
@@ -157,17 +158,42 @@ 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)),
   group: { ...filter.group, title: translate(`webcams.filter_groups.${filter.group.name}`, filter.group.name) },
 })));
 
+/**
+ * Выбранный язык на кнопке селекта читается фразой — «Russian speaking», как в макете
+ * и как в чипсе облака фильтров. Остальные фильтры стандартные: у них значение и так
+ * самодостаточное («Украина», «18-24»). Ключа у сайта может не быть — тогда останется
+ * просто название языка.
+ */
+function selectedFilterLabel(filter: IModelFilter, option: IModelFilterOptions) {
+  if (filter.name !== WEBCAM_LANGUAGE_FACET || !te('webcams.speaking')) return '';
+
+  return t('webcams.speaking', { lang: option.title });
+}
+
 /** Модалка фильтра слоя ждёт ответ листинга — ей нужны только фасеты. */
 const filterData = computed(() => ({ filters: filters.value }) as unknown as PaginatedResponse<IModelCard>);
 

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

@@ -3,11 +3,9 @@ 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 { WEBCAM_LANGUAGE_FACET } from '../utils/webcams/facets';
 import type { Ref } from 'vue';
 
-/** Единственный фильтр-язык у нас в вебкамах: у моделей такого поля нет. */
-const LANGUAGE_FILTER = 'language';
-
 export function useFilterChipsItems(
   filters: Ref<IModelFilter[]>,
   route: { query: LocationQuery },
@@ -95,7 +93,7 @@ export function useFilterChipsItems(
      * флага. Если у сайта ключа перевода ещё нет, остаётся название языка.
      */
     const buildLanguageChip = (valueText: string) => {
-      const code = String(route.query[`filter_${LANGUAGE_FILTER}`] || '').toLowerCase();
+      const code = String(route.query[`filter_${WEBCAM_LANGUAGE_FACET}`] || '').toLowerCase();
 
       return {
         title: t('webcams.speaking', { lang: valueText }) || valueText,
@@ -110,7 +108,7 @@ export function useFilterChipsItems(
         const valueText = getValueText(item);
         if (!valueText) return null;
         return {
-          ...(filter.name === LANGUAGE_FILTER
+          ...(filter.name === WEBCAM_LANGUAGE_FACET
             ? buildLanguageChip(valueText)
             : buildChipParts(filter.title, valueText)),
           value: item.map(

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.950",
+  "version": "0.0.952",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {

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/facets.ts

@@ -24,6 +24,9 @@ export const WEBCAM_QUICK_FACETS = ['age', 'language', 'country', 'specifics'];
 /** Значение селекта «любой» — слой по нему удаляет параметр из query. */
 export const WEBCAM_FILTER_ANY = 'all';
 
+/** Имя языкового фасета: у него подпись выбранного значения читается фразой («Russian speaking»). */
+export const WEBCAM_LANGUAGE_FACET = 'language';
+
 /** Группы фильтров: строка фильтров и всё остальное. */
 export const WEBCAM_FILTER_GROUPS = {
   quick: { name: 'quick', 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;
+}