itube-specs 0.0.954 → 0.0.955

package/components/webcam/counters.vue

@@ -32,7 +32,7 @@
         height="14"
         loading="lazy"
       >
-      {{ t('webcams.language_online', { lang: languageCode.toUpperCase(), count: $n(languageCount) }) }}
+      {{ t('webcams.language_online', { lang: languageName, count: $n(languageCount) }) }}
     </span>
   </div>
 </template>
@@ -40,6 +40,7 @@
 <script setup lang="ts">
 import type { IWebcamCounts } from '../../types';
 import { LANG_TO_FLAG } from '../../utils/webcams/lang-to-flag';
+import { isoCodeToLanguageName } from '../../utils/iso-code-to-language-name';
 
 const props = defineProps<{
   counts: IWebcamCounts
@@ -51,6 +52,8 @@ const total = computed(() => props.counts.total || 0);
 const languageCode = computed(() => locale.value.slice(0, 2).toLowerCase());
 const languageFlag = computed(() => LANG_TO_FLAG[languageCode.value] || languageCode.value);
 const languageCount = computed(() => props.counts.byLanguages?.[languageCode.value] || 0);
+// язык называем по-человечески («English speaking»), а не кодом («EN speaking») — как в фильтрах
+const languageName = computed(() => isoCodeToLanguageName(languageCode.value, locale.value));
 </script>
 
 <style lang="scss">

package/composables/fetch/use-fetch-videos.ts

@@ -7,12 +7,22 @@ import { useRoute } from 'vue-router';
 export const useFetchVideos = async (
     apiMethod: (...args: any[]) => Promise<PaginatedResponse<IVideoCard>>,
     // defaultOrder всегда непустой: в запрос уходит либо выбранная сортировка, либо дефолтная
-    { sortItems = sortItemsDefault, defaultOrder = '-country_order' }: { sortItems?: INavLinkItem[], defaultOrder?: string } = {}
+    { sortItems = sortItemsDefault, defaultOrder = '-country_order', perPage: perPageOption }: {
+        sortItems?: INavLinkItem[],
+        defaultOrder?: string,
+        /**
+         * Сколько роликов просить у API. По умолчанию 48 на десктопе и 12 на мобиле —
+         * ровно ячейки сетки. Переопределяют там, где часть ячеек занимает не видео
+         * (врезки вебкам-тумб): тогда роликов просят меньше на число врезок, и сетка
+         * остаётся кратной колонкам, без неполной строки.
+         */
+        perPage?: { mobile?: number, desktop?: number },
+    } = {}
 ) => {
     const route = useRoute();
 
     const mobile = !!useState<boolean>('isMobile').value;
-    const perPage = mobile ? 12 : 48;
+    const perPage = (mobile ? perPageOption?.mobile : perPageOption?.desktop) ?? (mobile ? 12 : 48);
     const lang = useLang() as Language;
     const filters = computed(() => useGetVideosFilterRequest(route, selectDurationItems, selectAddedItems));
     const key = AsyncData.Videos;

package/package.json

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

package/utils/__tests__/iso-code-to-language-name.test.ts

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { isoCodeToLanguageName } from '../iso-code-to-language-name';
+
+describe('isoCodeToLanguageName', () => {
+  it('отдаёт название языка на своей локали, с заглавной', () => {
+    expect(isoCodeToLanguageName('en', 'en')).toBe('English');
+    expect(isoCodeToLanguageName('en', 'ru')).toBe('Английский');
+    expect(isoCodeToLanguageName('ru', 'ru')).toBe('Русский');
+    expect(isoCodeToLanguageName('de', 'de')).toBe('Deutsch');
+  });
+
+  it('регистр и пробелы в коде не мешают', () => {
+    expect(isoCodeToLanguageName(' EN ', 'en')).toBe('English');
+  });
+
+  it('нераспознанный код возвращает кодом, пустой — пустым', () => {
+    expect(isoCodeToLanguageName('zz', 'en')).toBe('ZZ');
+    expect(isoCodeToLanguageName('', 'en')).toBe('');
+  });
+});

package/utils/iso-code-to-language-name.ts

@@ -0,0 +1,27 @@
+/**
+ * ISO 639-1 → название языка на текущей локали средствами ICU: `en` → «English» /
+ * «английский», `zh` → «Chinese». Тот же словарь, что у браузеров и ОС, своей таблицы
+ * держать не надо.
+ *
+ * Первая буква приводится к верхнему регистру: у ru/it/es ICU отдаёт название со строчной
+ * («русский»), а подпись — начало фразы («Русский — 5 470 онлайн»).
+ *
+ * Нераспознанный код возвращается кодом в верхнем регистре: подпись вида «EN speaking»
+ * лучше пустой, а по возвращённому значению проверять существование языка нельзя.
+ */
+export const isoCodeToLanguageName = (isoCode: string, locale: string): string => {
+  const code = (isoCode || '').trim().toLowerCase();
+  if (!code) return '';
+
+  const fallback = code.toUpperCase();
+
+  try {
+    const name = new Intl.DisplayNames([locale], { type: 'language' }).of(code);
+    // ICU на неизвестном коде возвращает сам код
+    if (!name || name.toLowerCase() === code) return fallback;
+
+    return name.charAt(0).toLocaleUpperCase(locale) + name.slice(1);
+  } catch {
+    return fallback;
+  }
+};