itube-specs 0.0.869 → 0.0.870

package/components/layout/header.vue

@@ -27,8 +27,8 @@
         @click="showLanguageMenu"
       >
         <img
-          v-if="clientCountryIcon"
-          :src="`/icons/flags/${clientCountryIcon}.svg`"
+          v-if="clientCountryFlag"
+          :src="clientCountryFlag"
           :alt="clientCountryIcon"
           class="layout-header__language-icon"
           width="24"
@@ -96,14 +96,8 @@
 import { AuthSteps } from '../../runtime';
 import { onClickOutside } from '@vueuse/core';
 import { AuthorizationApiService } from '../../services/api/authorization.service';
-import { isoCodeMap } from '../../utils/iso-code-map';
 
-const clientCountryCode = useState<string>('clientCountryCode', () => '');
-const clientCountryIcon = computed(() => {
-  const code = clientCountryCode.value;
-  if (!code) return '';
-  return isoCodeMap[code] || code;
-});
+const { icon: clientCountryIcon, flagSrc: clientCountryFlag } = useClientCountry();
 
 const burgerShow = ref(false);
 const showLanguage = ref(false);

package/components/layout/language.vue

@@ -42,9 +42,9 @@
     >
       <summary class="layout-language__summary">
         <img
-          v-if="clientCountryIcon"
+          v-if="clientCountryFlag"
           :alt="clientCountryName"
-          :src="`/icons/flags/${clientCountryIcon}.svg`"
+          :src="clientCountryFlag"
           class="layout-language__icon"
           width="20"
           height="20"
@@ -109,8 +109,6 @@
 
 <script setup lang="ts">
 import type { ISelectItem } from '../../types';
-import { isoCodeMap } from '../../utils/iso-code-map';
-import { DictionariesApiService } from '../../services/api/dictionaries.service';
 
 const { locale, locales } = useI18n();
 const switchLocalePath = useSwitchLocalePath();
@@ -119,22 +117,14 @@ defineProps<{
   iconSize: string
 }>();
 
-const countriesItems = useState<ISelectItem[]>('countriesItems', () => []);
-const clientCountryCode = useState<string>('clientCountryCode', () => '');
-
-const clientCountryIcon = computed(() => {
-  const code = clientCountryCode.value;
-  if (!code) return '';
-  return isoCodeMap[code] || code;
-});
-
-const clientCountryNameState = useState<string>('clientCountryName', () => '');
-
-const clientCountryName = computed(() => {
-  if (!clientCountryIcon.value) return '';
-  const fromList = countriesItems.value.find(item => item.icon === clientCountryIcon.value)?.value;
-  return fromList || clientCountryNameState.value || '';
-});
+const {
+  icon: clientCountryIcon,
+  name: clientCountryName,
+  flagSrc: clientCountryFlag,
+  countriesItems,
+  setCountry,
+  loadCountries,
+} = useClientCountry();
 
 const isCountryOpen = ref(false);
 const countryValue = ref('');
@@ -144,26 +134,6 @@ const filteredCountries = computed(() => {
   return countriesItems.value.filter(item => item.title.toLowerCase().includes(query));
 });
 
-const isCountryLoading = ref(false);
-
-// Список стран не приходит в payload (см. plugins/countries.server.ts) — догружаем
-// его лениво на клиенте при первом открытии селектора.
-async function loadCountries() {
-  if (countriesItems.value.length || isCountryLoading.value) return;
-  isCountryLoading.value = true;
-  try {
-    const data = await DictionariesApiService.getCountries();
-    countriesItems.value = (data?.countries ?? []).map((item) => {
-      const iso = item.isoCodes[0].toLowerCase();
-      return { title: item.title, value: item.title, icon: isoCodeMap[iso] || iso, key: iso };
-    });
-  } catch {
-    // оставляем пустым — следующее открытие попробует снова
-  } finally {
-    isCountryLoading.value = false;
-  }
-}
-
 function onCountryToggle(e: Event) {
   isCountryOpen.value = (e.target as HTMLDetailsElement).open;
   if (isCountryOpen.value) loadCountries();
@@ -191,18 +161,10 @@ function changeLocale(locale: string) {
   window.location.href = switchLocalePath(locale);
 }
 
-const COUNTRY_COOKIE_OPTS = { maxAge: 60 * 60 * 24 * 365, path: '/', secure: true, sameSite: 'lax' as const };
-const countryCookie = useCookie('clientCountryCode', COUNTRY_COOKIE_OPTS);
-const countryNameCookie = useCookie('clientCountryName', COUNTRY_COOKIE_OPTS);
-const countryNameCodeCookie = useCookie('clientCountryNameCode', COUNTRY_COOKIE_OPTS);
-
-function changeCountry(item: ISelectItem) {
-  const code = item.key || '';
-  clientCountryCode.value = code;
-  clientCountryNameState.value = item.value;
-  countryCookie.value = code;
-  countryNameCookie.value = item.value;
-  countryNameCodeCookie.value = code;
+async function changeCountry(item: ISelectItem) {
+  setCountry(item);
+  // куку пишет вотчер useCookie — ждём флаш, иначе навигация может срезать запись
+  await nextTick();
   window.location.href = '/';
 }
 </script>

package/composables/__tests__/use-client-country.test.ts

@@ -0,0 +1,121 @@
+// @vitest-environment nuxt
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useClientCountry } from '../use-client-country';
+
+const getCountries = vi.fn();
+
+vi.mock('../../services/api/dictionaries.service', () => ({
+  DictionariesApiService: { getCountries: () => getCountries() },
+}));
+
+const setCode = (code: string) => useState<string>('clientCountryCode', () => '').value = code;
+const setResolvedName = (name: string) => useState<string>('clientCountryName', () => '').value = name;
+
+describe('useClientCountry', () => {
+  beforeEach(() => {
+    useNuxtApp().payload.state = {};
+    getCountries.mockReset();
+  });
+
+  it('без кода не отдаёт ни флаг, ни имя', () => {
+    const { icon, name, flagSrc } = useClientCountry();
+
+    expect(icon.value).toBe('');
+    expect(name.value).toBe('');
+    expect(flagSrc.value).toBe('');
+  });
+
+  it('строит иконку и путь к флагу из кода', () => {
+    setCode('ad');
+    setResolvedName('Andorra');
+    const { icon, flagSrc } = useClientCountry();
+
+    expect(icon.value).toBe('ad');
+    expect(flagSrc.value).toBe('/icons/flags/ad.svg');
+  });
+
+  it('нормализует код: регистр и пробелы', () => {
+    setCode(' AD ');
+    setResolvedName('Andorra');
+    const { icon, flagSrc } = useClientCountry();
+
+    expect(icon.value).toBe('ad');
+    expect(flagSrc.value).toBe('/icons/flags/ad.svg');
+  });
+
+  it('учитывает страны, где код флага отличается от ISO-кода', () => {
+    setCode('cn');
+    setResolvedName('China');
+    const { icon, flagSrc } = useClientCountry();
+
+    expect(icon.value).toBe('zh');
+    expect(flagSrc.value).toBe('/icons/flags/zh.svg');
+  });
+
+  it('не показывает флаг для служебного кода, которого нет в словаре', () => {
+    // Cloudflare отдаёт XX для неизвестного IP и T1 для Tor — файла такого флага нет
+    setCode('xx');
+    const { icon, name, flagSrc } = useClientCountry();
+
+    expect(icon.value).toBe('xx');
+    expect(name.value).toBe('');
+    expect(flagSrc.value).toBe('');
+  });
+
+  it('имя следует за кодом и не может остаться от другой страны', async () => {
+    setCode('ad');
+    // имя, доставшееся от предыдущей страны — именно этот рассинхрон ловим
+    setResolvedName('USA');
+    getCountries.mockResolvedValue({
+      countries: [
+        { title: 'Andorra', isoCodes: ['AD', 'AND'] },
+        { title: 'USA', isoCodes: ['US', 'USA'] },
+      ],
+    });
+
+    const { name, flagSrc, loadCountries } = useClientCountry();
+    await loadCountries();
+
+    expect(name.value).toBe('Andorra');
+    expect(flagSrc.value).toBe('/icons/flags/ad.svg');
+  });
+
+  it('до загрузки списка берёт имя, отрезолвленное на сервере', () => {
+    setCode('ad');
+    setResolvedName('Andorra');
+    const { name } = useClientCountry();
+
+    expect(name.value).toBe('Andorra');
+  });
+
+  it('выбор страны меняет и код, и имя', () => {
+    setCode('ad');
+    setResolvedName('Andorra');
+    const { code, name, flagSrc, setCountry } = useClientCountry();
+
+    setCountry({ title: 'USA', value: 'USA', icon: 'us', key: 'us' });
+
+    expect(code.value).toBe('us');
+    expect(name.value).toBe('USA');
+    expect(flagSrc.value).toBe('/icons/flags/us.svg');
+  });
+
+  it('не перезапрашивает список, если он уже загружен', async () => {
+    getCountries.mockResolvedValue({ countries: [{ title: 'Andorra', isoCodes: ['AD'] }] });
+    const { loadCountries } = useClientCountry();
+
+    await loadCountries();
+    await loadCountries();
+
+    expect(getCountries).toHaveBeenCalledTimes(1);
+  });
+
+  it('падение запроса оставляет список пустым — следующее открытие попробует снова', async () => {
+    getCountries.mockRejectedValue(new Error('500'));
+    const { countriesItems, loadCountries } = useClientCountry();
+
+    await loadCountries();
+
+    expect(countriesItems.value).toEqual([]);
+  });
+});

package/composables/use-client-country.ts

@@ -0,0 +1,73 @@
+import type { ISelectItem } from '../types';
+import { isoCodeMap } from '../utils/iso-code-map';
+import { DictionariesApiService } from '../services/api/dictionaries.service';
+
+/** Ручной выбор страны переживает перезагрузку год — читает его server/middleware/country.ts */
+const COOKIE_OPTS = { maxAge: 60 * 60 * 24 * 365, path: '/', secure: true, sameSite: 'lax' as const };
+
+/**
+ * Единый источник страны клиента: ISO-код (гео-заголовок прокси или ручной выбор
+ * в селекторе), иконка флага и локализованное имя.
+ *
+ * Имя всегда резолвится ОТ ТЕКУЩЕГО кода — своего кеша у него нет. Раньше имя
+ * лежало в отдельной куке `clientCountryName` рядом с парной `clientCountryNameCode`,
+ * и пара могла разъехаться: заголовок писал одну страну, флаг и селектор показывали
+ * другую (реальный кейс на проде: `clientCountryName=USA` при коде `ad`).
+ */
+export const useClientCountry = () => {
+  const code = useState<string>('clientCountryCode', () => '');
+  const resolvedName = useState<string>('clientCountryName', () => '');
+  const countriesItems = useState<ISelectItem[]>('countriesItems', () => []);
+  const codeCookie = useCookie<string | null>('clientCountryCode', COOKIE_OPTS);
+
+  /** ISO-код → имя файла флага (у части стран код локали отличается от кода страны) */
+  const toIcon = (value: string) => {
+    const iso = value.trim().toLowerCase();
+    return iso ? isoCodeMap[iso] || iso : '';
+  };
+
+  const icon = computed(() => toIcon(code.value));
+
+  // Список стран догружается лениво на клиенте (см. layout/language.vue) — если он
+  // уже есть, имя берём из него: там оно точно совпадает с текущим кодом.
+  const name = computed(() => {
+    if (!icon.value) return '';
+    return countriesItems.value.find(item => item.icon === icon.value)?.title || resolvedName.value;
+  });
+
+  // Флаг только для страны, которую смогли назвать: гео-заголовок умеет отдавать
+  // служебные коды (Cloudflare `XX` для неизвестного IP и `T1` для Tor, MaxMind `AP`),
+  // их нет ни в словаре стран, ни среди файлов флагов — вышла бы битая картинка.
+  const flagSrc = computed(() => (icon.value && name.value ? `/icons/flags/${icon.value}.svg` : ''));
+
+  /** Ручной выбор страны в селекторе: наружу переживает перезагрузку только код. */
+  const setCountry = (item: ISelectItem) => {
+    code.value = item.key || '';
+    resolvedName.value = item.title;
+    codeCookie.value = code.value || null;
+  };
+
+  const isLoading = ref(false);
+
+  /**
+   * Полный список стран в payload не кладётся (см. plugins/countries.server.ts) —
+   * догружаем лениво на клиенте, когда открыли селектор.
+   */
+  const loadCountries = async () => {
+    if (countriesItems.value.length || isLoading.value) return;
+    isLoading.value = true;
+    try {
+      const data = await DictionariesApiService.getCountries();
+      countriesItems.value = (data?.countries ?? []).map((item) => {
+        const iso = item.isoCodes[0].toLowerCase();
+        return { title: item.title, value: item.title, icon: toIcon(iso), key: iso };
+      });
+    } catch {
+      // оставляем пустым — следующее открытие попробует снова
+    } finally {
+      isLoading.value = false;
+    }
+  };
+
+  return { code, icon, name, flagSrc, countriesItems, setCountry, loadCountries };
+};

package/composables/use-meta.ts

@@ -3,6 +3,16 @@ import type { Ref } from 'vue';
 import { useRoute } from 'vue-router';
 import type { IChipsItem } from '../types';
 
+type MetaOptions = {
+  /**
+   * Подменяет i18n-ключ заголовка (по умолчанию 'h1') — вызывается с фактической
+   * сортировкой, потому что варианты заголовка есть не у каждой из них.
+   * Нужен, когда подставляемого текста может не быть и в шаблоне остаётся
+   * висячий предлог (`… Videos in ` без страны).
+   */
+  h1Key?: (sortType: string) => string
+};
+
 /**
 * Генерирует реактивные meta (title, description) и h1 с учётом сортировки, страницы и i18n-ключей.
 * @param t - функция перевода (i18n)
@@ -13,8 +23,9 @@ import type { IChipsItem } from '../types';
 * @param secondText - второй подставляемый текст
 * @param thirdText - третий подставляемый текст
 * @param fourthText - четвёртый подставляемый текст
+* @param options - уточнения (подмена ключа h1)
 */
-export function useMeta(t: (key: string, params?: Record<string, unknown>) => string, page: string, brandName: string, sortOptions?: IChipsItem[], text?: Ref<string>, secondText?: Ref<string>, thirdText?: Ref<string>, fourthText?: Ref<string>) {
+export function useMeta(t: (key: string, params?: Record<string, unknown>) => string, page: string, brandName: string, sortOptions?: IChipsItem[], text?: Ref<string>, secondText?: Ref<string>, thirdText?: Ref<string>, fourthText?: Ref<string>, options?: MetaOptions) {
   const route = useRoute();
 
   const sortType = computed(() => {
@@ -46,7 +57,7 @@ export function useMeta(t: (key: string, params?: Record<string, unknown>) => st
   }
 
   const metaTitle = computed(() => getPath('title'));
-  const h1 = computed(() => getPath('h1'));
+  const h1 = computed(() => getPath(options?.h1Key?.(sortType.value) || 'h1'));
 
   const meta = computed(() => {
     const description = getPath('meta_description');

package/package.json

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

package/pages/index.vue

@@ -21,9 +21,8 @@ import { convertQueryCategories, convertString, AsyncData } from '../runtime';
 import { VideosApiService } from '../services/api/videos.service';
 import { ModelsApiService } from '../services/api/models.service';
 import { CategoriesApiService } from '../services/api/categories.service';
-import { isoCodeMap } from '../utils/iso-code-map';
 import { sortItemsDefault } from '../lib';
-import type { ISelectItem, IChipsItem } from '../types';
+import type { IChipsItem } from '../types';
 
 const { t } = useI18n();
 
@@ -62,28 +61,28 @@ const routeQueryCategories = computed(() => {
   return '';
 });
 
-const clientCountryCode = useState<string>('clientCountryCode', () => '');
-const countriesItems = useState<ISelectItem[]>('countriesItems', () => []);
-const clientCountryNameState = useState<string>('clientCountryName', () => '');
+const clientCountry = useClientCountry();
 
-const countryName = computed(() => {
-  if (route.query['sort']) return '';
-  const code = clientCountryCode.value;
-  if (!code) return '';
-  const icon = isoCodeMap[code] || code;
-  const fromList = countriesItems.value.find(item => item.icon === icon)?.title;
-  return fromList || clientCountryNameState.value || '';
-});
+// Страна в заголовке уместна только на дефолтной сортировке (в остальных шаблонах
+// её нет) — при явной сортировке гасим и подпись, и флаг.
+const isCountryShown = computed(() => !route.query['sort'] && !!clientCountry.name.value);
 
-const { meta, h1 } = useMeta(t, pageName, useAppConfig().brandName, sortItemsDefault, routeQueryCategories, countryName);
+const countryName = computed(() => (isCountryShown.value ? clientCountry.name.value : ''));
 
-const countryFlagImg = computed(() => {
-  if (route.query['sort']) return undefined;
-  const code = clientCountryCode.value;
-  if (!code) return undefined;
-  const icon = isoCodeMap[code] || code;
-  return `/icons/flags/${icon}.svg`;
-});
+const { meta, h1 } = useMeta(
+  t,
+  pageName,
+  useAppConfig().brandName,
+  sortItemsDefault,
+  routeQueryCategories,
+  countryName,
+  undefined,
+  undefined,
+  // Страну не определили — берём заголовок без неё, иначе останется висячий предлог.
+  { h1Key: sortType => (sortType === 'trending' && !countryName.value ? 'h1_no_country' : 'h1') },
+);
+
+const countryFlagImg = computed(() => (isCountryShown.value ? clientCountry.flagSrc.value : undefined));
 
 watchEffect(() => {
   useHead(meta.value);

package/plugins/countries.server.ts

@@ -1,45 +1,32 @@
 // SSR-плагин: по ISO-коду клиента резолвит имя страны в useState('clientCountryName')
 // для гео-заголовка. Полный список стран в payload не кладётся (его лениво догружает
-// селектор языка на клиенте). Результат кэшируется в куку и в память процесса.
-import type { ICountries, ISelectItem } from '../types';
-import { isoCodeMap } from '../utils/iso-code-map';
+// селектор языка на клиенте). Результат кэшируется в память процесса.
+import type { ICountries } from '../types';
 
-const COOKIE_OPTS = { maxAge: 60 * 60 * 24 * 365, path: '/', secure: true, sameSite: 'lax' as const };
+/** Опции легаси-кук — нужны только чтобы их погасить (см. ниже) */
+const LEGACY_COOKIE_OPTS = { path: '/', secure: true, sameSite: 'lax' as const };
 
-type CountriesCache = {
-  items: ISelectItem[];
-  nameByIso: Map<string, string>;
-};
+const cache = new Map<string, Promise<Map<string, string> | null>>();
 
-const cache = new Map<string, Promise<CountriesCache | null>>();
-
-function buildCache(data: ICountries): CountriesCache {
-  const items: ISelectItem[] = [];
+function buildNameByIso(data: ICountries): Map<string, string> {
   const nameByIso = new Map<string, string>();
 
   for (const item of data.countries) {
-    const iso = item.isoCodes[0].toLowerCase();
-    items.push({
-      title: item.title,
-      value: item.title,
-      icon: isoCodeMap[iso] || iso,
-      key: iso,
-    });
     for (const code of item.isoCodes) {
       nameByIso.set(code.toLowerCase(), item.title);
     }
   }
-  return { items, nameByIso };
+  return nameByIso;
 }
 
-function getCountries(language: string, domain: string): Promise<CountriesCache | null> {
+function getNameByIso(language: string, domain: string): Promise<Map<string, string> | null> {
   const key = `${language}|${domain}`;
   let promise = cache.get(key);
   if (!promise) {
     promise = $fetch<ICountries>('/api/dictionaries/countries', {
       headers: { 'x-language': language, 'x-domain': domain },
     })
-      .then(data => (data?.countries?.length ? buildCache(data) : null))
+      .then(data => (data?.countries?.length ? buildNameByIso(data) : null))
       .catch(() => {
         cache.delete(key);
         return null;
@@ -51,34 +38,29 @@ function getCountries(language: string, domain: string): Promise<CountriesCache
 
 export default defineNuxtPlugin(async () => {
   const event = useRequestEvent();
-  const code = (event?.context?.clientCountryCode as string | undefined) || '';
+  const code = ((event?.context?.clientCountryCode as string | undefined) || '').trim().toLowerCase();
 
   const countryName = useState<string>('clientCountryName', () => '');
 
+  // Имя страны больше не кешируется в куках: пара `clientCountryName` +
+  // `clientCountryNameCode` умела разъезжаться с кодом страны (заголовок писал одну
+  // страну, флаг и селектор показывали другую), а выигрыш был только в одном
+  // сетевом запросе на холодный процесс. Старые куки гасим, чтобы не висели год.
+  const legacyName = useCookie<string | null>('clientCountryName', LEGACY_COOKIE_OPTS);
+  const legacyNameCode = useCookie<string | null>('clientCountryNameCode', LEGACY_COOKIE_OPTS);
+  if (legacyName.value) legacyName.value = null;
+  if (legacyNameCode.value) legacyNameCode.value = null;
+
   // Резолвим только имя текущей страны для гео-заголовка. Полный список стран
   // НЕ кладём в useState (не сериализуем в payload) — language.vue догружает
   // его лениво на клиенте при открытии селектора.
   if (!code) return;
 
-  const codeCookie = useCookie<string>('clientCountryNameCode', COOKIE_OPTS);
-  const nameCookie = useCookie<string>('clientCountryName', COOKIE_OPTS);
-
-  // Тёплая кука → имя уже известно, серверный фетч стран не нужен.
-  if (nameCookie.value && codeCookie.value === code) {
-    countryName.value = nameCookie.value;
-    return;
-  }
-
   const language = useRequestHeaders(['x-language'])['x-language'] ?? '';
   const domain = useRuntimeConfig().public.xDomain as string;
 
-  const result = await getCountries(language, domain);
-  if (!result) return;
+  const nameByIso = await getNameByIso(language, domain);
+  if (!nameByIso) return;
 
-  const name = result.nameByIso.get(code.toLowerCase());
-  if (name) {
-    countryName.value = name;
-    nameCookie.value = name;
-    codeCookie.value = code;
-  }
+  countryName.value = nameByIso.get(code) || '';
 });

package/server/middleware/country.ts

@@ -1,10 +1,10 @@
 // Определяет страну клиента и кладёт ISO-код в event.context.clientCountryCode:
-// сначала из cookie `clientCountryCode`, иначе из заголовков прокси (Cloudflare
-// `cf-ipcountry` / `x-country-code` / `x-country`).
+// сначала из cookie `clientCountryCode` (ручной выбор в селекторе), иначе из
+// заголовков прокси (Cloudflare `cf-ipcountry` / `x-country-code` / `x-country`).
 export default defineEventHandler((event) => {
   const cookie = getCookie(event, 'clientCountryCode');
   if (cookie) {
-    event.context.clientCountryCode = cookie;
+    event.context.clientCountryCode = cookie.trim().toLowerCase();
     return;
   }