itube-specs 0.0.951 → 0.0.952

package/components/card/webcam/index.vue

@@ -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
@@ -315,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;
+}
+
 /**
  * Тач: превью включает удержание тумбы — короткий тап должен открывать модель, а
  * не запускать поток. Движение пальцем считаем скроллом и удержание отменяем.

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();
@@ -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/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<{
@@ -181,6 +182,18 @@ const filters = computed<IModelFilter[]>(() => (currentFacets.value.length ? cur
   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/package.json

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

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 },