itube-specs 0.0.938 → 0.0.940

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/filter/selects.vue

@@ -360,7 +360,9 @@ function getOptionLabel(option: IModelFilterOptions) {
   text-transform: none;
 }
 
-.filter-selects__select-button.--active-select {
+// .ui-btn в селекторе не для красоты: без него специфичность равна .ui-btn.--secondary,
+// который правит те же свойства, и кто победит — решает порядок блоков в бандле
+.ui-btn.filter-selects__select-button.--active-select {
   padding: 6px 14px;
   border: 1px solid $filters-main-select-border--active;
   color: $filters-main-select-text--active;

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/view/webcams.vue

@@ -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/package.json

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

package/types/filter-chip-item.d.ts

@@ -9,4 +9,8 @@ export interface IFilterChipItem {
   value?: string | string[] | number
   /** Тип фильтра, к которому относится чипса. */
   key?: string
+  /** Код страны для флага (`/icons/flags/<код>.svg`) — у языковой чипсы вебкамов.
+   *  У такой чипсы подпись собрана переводом («Russian speaking»), поэтому
+   *  капитализация слов к ней не применяется. */
+  flag?: string
 }

package/utils/ui-pagination/__tests__/get-pagination-link.test.ts

@@ -7,9 +7,14 @@ describe('getPaginationLink', () => {
     expect(result).toEqual({ path: '/videos', query: { sort: 'new' } });
   });
 
-  it('для прочих страниц сохраняет query и проставляет номер (без path)', () => {
+  it('для прочих страниц сохраняет query и проставляет номер', () => {
     const result = getPaginationLink(5, 'page', '/videos', { sort: 'new' });
-    expect(result).toEqual({ query: { sort: 'new', page: 5 } });
+    expect(result).toEqual({ path: '/videos', query: { sort: 'new', page: 5 } });
+  });
+
+  it('путь есть у любой страницы: относительную локацию роутер разрешал бы сам', () => {
+    const result = getPaginationLink(3, 'page', '/gay/webcams', { filter_language: 'ru' });
+    expect(result).toEqual({ path: '/gay/webcams', query: { filter_language: 'ru', page: 3 } });
   });
 
   it('зажимает значение < 1 к первой странице', () => {
@@ -19,6 +24,6 @@ describe('getPaginationLink', () => {
 
   it('перезаписывает существующий префикс', () => {
     const result = getPaginationLink(7, 'page', '/videos', { page: '2', q: 'x' });
-    expect(result).toEqual({ query: { page: 7, q: 'x' } });
+    expect(result).toEqual({ path: '/videos', query: { page: 7, q: 'x' } });
   });
 });

package/utils/ui-pagination/get-pagination-link.ts

@@ -3,10 +3,17 @@ type QueryRecord = Record<string, QueryParam>;
 
 /**
  * Строит объект ссылки для страницы пагинации: для первой страницы убирает параметр `prefix`
- * из query (и отдаёт path), для остальных — проставляет номер. Значение < 1 зажимается к 1.
+ * из query, для остальных — проставляет номер. Значение < 1 зажимается к 1.
+ *
+ * Путь проставляем ВСЕГДА, даже когда он равен текущему. Локация без `path` — относительная,
+ * и её разрешает роутер: у нишевых разделов (они живут на алиасах записей) так пропадал
+ * префикс ниши, а `href` у ссылки вообще собирается из результата `resolve` — то есть любой
+ * промах разрешения уезжает в разметку. Клик мышью при этом работает (навигация идёт по
+ * объекту), а «открыть в новой вкладке» — уже по `href`, и открывалось не то.
+ *
  * @param value - номер страницы
  * @param prefix - имя query-параметра страницы (напр. `page`)
- * @param path - текущий путь (используется только для первой страницы)
+ * @param path - текущий путь
  * @param query - текущий query
  */
 export function getPaginationLink(
@@ -14,7 +21,7 @@ export function getPaginationLink(
   prefix: string,
   path: string,
   query: QueryRecord,
-): { path?: string; query: QueryRecord } {
+): { path: string; query: QueryRecord } {
   const safeValue = Math.max(1, Number(value));
 
   if (safeValue === 1) {
@@ -26,6 +33,7 @@ export function getPaginationLink(
   }
 
   return {
+    path,
     query: {
       ...query,
       [prefix]: safeValue,