itube-specs 0.0.953 → 0.0.955

package/components/card/webcam/index.vue

@@ -115,6 +115,13 @@
         v-if="model.age"
         class="card-webcam__age"
       >{{ t('webcams.years_old', { age: model.age }) }}</span>
+
+      <!-- Страна — в строке имени справа (в макете на узких экранах её нет вовсе). -->
+      <a
+        v-if="model.country"
+        :href="`${nichePath}/webcams?filter_country=${model.country}`"
+        class="card-webcam__country"
+      >{{ countryName }}</a>
     </div>
 
     <!-- На узких экранах ховера нет, поэтому цель стримера с прогрессом живёт под
@@ -136,27 +143,6 @@
       </span>
     </div>
 
-    <div
-      v-if="model.viewers || model.country"
-      class="card-webcam__meta"
-    >
-      <span
-        v-if="model.viewers"
-        class="card-webcam__viewers"
-      >
-        <UiIcon
-          name="eye"
-          size="14"
-        />{{ $n(model.viewers) }}
-      </span>
-
-      <a
-        v-if="model.country"
-        :href="`${nichePath}/webcams?filter_country=${model.country}`"
-        class="card-webcam__country _truncate"
-      >{{ countryName }}</a>
-    </div>
-
     <ul
       v-if="visibleTags.length"
       class="card-webcam__tags"
@@ -484,8 +470,8 @@ onBeforeUnmount(() => {
   opacity: 1;
 }
 
-// одна плашка на постере: признак новой модели и зрители онлайн (на узких экранах
-// меты под карточкой нет, поэтому зрители показываются здесь)
+// одна плашка на постере: зрители онлайн и, у новых моделей, признак новизны перед
+// ними (в макете это один пилюль на все разрешения)
 .card-webcam__badge {
   @include font-4xs;
 
@@ -499,8 +485,6 @@ onBeforeUnmount(() => {
   padding: 2px 6px;
   font-weight: 600;
   line-height: 1;
-  text-transform: uppercase;
-  letter-spacing: .025em;
   color: $card-webcam-badge-text;
   text-shadow: 0 1px 2px $card-webcam-badge-shadow;
 
@@ -510,21 +494,16 @@ onBeforeUnmount(() => {
   border-radius: $radius-small;
 }
 
+// капс с трекингом — только у признака новизны: цифры зрителей в макете набраны обычным
+.card-webcam__badge-new {
+  text-transform: uppercase;
+  letter-spacing: .025em;
+}
+
 .card-webcam__badge-viewers {
   display: flex;
   align-items: center;
   gap: 4px;
-
-  @include from-br(xm) {
-    display: none;
-  }
-}
-
-// на десктопе плашка нужна только под признак новой модели
-.card-webcam__badge:not(:has(.card-webcam__badge-new)) {
-  @include from-br(xm) {
-    display: none;
-  }
 }
 
 .card-webcam__online {
@@ -651,43 +630,32 @@ onBeforeUnmount(() => {
 }
 
 .card-webcam__age {
-  @include font-sm;
-
-  flex-shrink: 0;
-  color: $card-webcam-meta-text;
-}
-
-// на узких экранах мету не показываем: зрители уехали в плашку на постере, а
-// место под карточкой занимает цель стримера
-.card-webcam__meta {
   @include font-xs;
 
-  display: none;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  margin-top: 8px;
+  flex-shrink: 0;
   color: $card-webcam-meta-text;
-
-  @include from-br(xm) {
-    display: flex;
-  }
-}
-
-.card-webcam__viewers {
-  display: flex;
-  align-items: center;
-  gap: 4px;
 }
 
+// обрезка своя, а не утилитой `_truncate`: та ставит `display` через !important и
+// строку не спрятать на мобиле
 .card-webcam__country {
-  --line-clamp: 1;
+  @include font-xs;
 
+  flex-shrink: 0;
   margin-left: auto;
+  overflow: hidden;
+  color: $card-webcam-meta-text;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
   &:is(:hover, :focus) {
     color: $card-webcam-meta-text--hover;
   }
+
+  // на узких экранах строку имени занимают флаги, имя и возраст
+  @include to-br(xm) {
+    display: none;
+  }
 }
 
 // селектор с родителем не случайно: ресет обнуляет отступы у `ul[class]`, и

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