itube-specs 0.0.954 → 0.0.956

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/components/webcam/main.vue

@@ -29,12 +29,22 @@
 import type { IStripcashModel, IWebcamsConfig } from '../../types';
 import { WEBCAMS_DEFAULTS } from '../../runtime';
 
-const props = defineProps<{
-  /** Сколько моделей просить у провайдера; по умолчанию — из конфига сайта. */
+const props = withDefaults(defineProps<{
+  /** Сколько тумб показывает сам блок; по умолчанию — из конфига сайта. */
   limit?: number
   /** Категория/тег провайдера — для тематических блоков. */
   category?: string
-}>();
+  /**
+   * Сколько моделей из ХВОСТА списка забирает страница — например под врезки в
+   * сетку видео. Блок просит у провайдера `limit + reserveTail` и показывает
+   * только свою голову, поэтому одни и те же модели не повторяются дважды на
+   * странице (правило старого движка: список приходит один и делится на части).
+   * По умолчанию 0 — блок ведёт себя как раньше.
+   */
+  reserveTail?: number
+}>(), {
+  reserveTail: 0,
+});
 
 /**
  * Клики и показы тумб блок отдаёт наружу: индексы он знает, а вот куда их
@@ -47,11 +57,16 @@ const emit = defineEmits<{
 
 const webcamsConfig = computed(() => (useRuntimeConfig().public.webcamsConfig || {}) as IWebcamsConfig);
 
+const blockLimit = computed(() => props.limit || webcamsConfig.value.limit || WEBCAMS_DEFAULTS.limit);
+
 const { items, counts, isEnabled } = await useFetchWebcams({
-  limit: props.limit || webcamsConfig.value.limit || WEBCAMS_DEFAULTS.limit,
+  limit: blockLimit.value + props.reserveTail,
   category: props.category,
 });
 
+/** Хвост списка отдан странице (врезки в сетку) — блок берёт только свою голову. */
+const blockItems = computed(() => items.value.slice(0, blockLimit.value));
+
 /**
  * Колонок в сетке столько же, сколько в основном гриде сайта на этом
  * брейкпоинте. На сервере ширины нет, поэтому там 0 — «пока не знаем».
@@ -67,9 +82,9 @@ const columns = ref(0);
  */
 const visibleItems = computed<IStripcashModel[]>(() => {
   const cols = columns.value;
-  if (!cols) return items.value;
+  if (!cols) return blockItems.value;
 
-  return items.value.slice(0, Math.floor(items.value.length / cols) * cols);
+  return blockItems.value.slice(0, Math.floor(blockItems.value.length / cols) * cols);
 });
 
 // те же пороги, что у основного грида (`grid-videos`): xs → 3 колонки, md → 4

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.956",
   "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;
+  }
+};