itube-specs 0.0.968 → 0.0.970

package/components/card/model-mini.vue

@@ -4,6 +4,7 @@
     <UiImg
       :src="currentImage"
       :image-urls="currentImageUrls"
+      :avif-src="currentAvifSrc"
       :alt="card.title"
       class="card-model-mini__img"
       width="48"
@@ -61,6 +62,7 @@ const currentImage = computed(() => {
 });
 
 const currentImageUrls = computed(() => (imageError.value ? undefined : props.card.primaryImageUrls));
+const currentAvifSrc = computed(() => (imageError.value ? undefined : props.card.primaryImageAvifUrl));
 </script>
 
 <style lang="scss">

package/components/card/model.vue

@@ -9,6 +9,7 @@
       <UiImg
         :src="currentImage"
         :image-urls="currentImageUrls"
+        :avif-src="currentAvifSrc"
         :loading="loading"
         :alt="card.title"
         :priority="priority"
@@ -108,6 +109,7 @@ const currentImage = computed(() => {
 
 /** На заглушке ладдер сбрасываем — иначе браузер продолжит тянуть битые кандидаты. */
 const currentImageUrls = computed(() => (imageError.value ? undefined : props.card.primaryImageUrls));
+const currentAvifSrc = computed(() => (imageError.value ? undefined : props.card.primaryImageAvifUrl));
 
 function onImageError() {
   imageError.value = true;

package/components/card/round.vue

@@ -7,6 +7,7 @@
     <UiImg
       :src="currentImage"
       :image-urls="currentImageUrls"
+      :avif-src="currentAvifSrc"
       :loading="loading"
       :alt="card.title"
       :priority="priority"
@@ -70,6 +71,7 @@ const currentImage = computed(() => {
 });
 
 const currentImageUrls = computed(() => (imageError.value ? undefined : props.card.primaryImageUrls));
+const currentAvifSrc = computed(() => (imageError.value ? undefined : props.card.primaryImageAvifUrl));
 
 function onImageError() {
   imageError.value = true;

package/components/player/aside-videos.vue

@@ -89,8 +89,10 @@ defineProps<{
     inset: 0;
     overflow-y: auto;
 
-    // полоса прокрутки не должна наезжать на карточки
-    padding-right: 4px;
+    /* Контейнер прокрутки обрезает всё, что элементы рисуют ЗА своей границей, —
+       кольцо аватара модели и рамки фокуса. Отступ в 2px даёт им место; справа
+       к нему добавлено расстояние до полосы прокрутки. */
+    padding: 2px 6px 2px 2px;
   }
 }
 </style>

package/components/ui/dropdown.vue

@@ -8,6 +8,7 @@
       {'--center': center},
       {'--open': open},
       {'--separate': separateLastChild},
+      {'--escaped': escaped},
     ]"
     class="ui-dropdown"
     @mouseleave="mouseHandler(false)"
@@ -26,7 +27,10 @@
       <dialog
         v-if="useVIf ? open && $slots.items : true"
         ref="menuRef"
-        :style="!useVIf ? { display: (open && $slots.items) ? '' : 'none' } : {}"
+        :style="[
+          !useVIf ? { display: (open && $slots.items) ? '' : 'none' } : {},
+          escapedStyle,
+        ]"
         :class="{'--open': open}"
         class="ui-dropdown__menu"
         @click="close"
@@ -92,9 +96,75 @@ const { registerOverlay, releaseOverlay } = useOverlayStack();
 const breakpoints = CSS_BREAKPOINTS;
 const { isTablet } = checkDeviceWidth(breakpoints);
 
+/**
+ * Выпадашка внутри прокручиваемого блока (боковая колонка плеера, например)
+ * обрезается его `overflow` — меню уходит под край. Уводить его в `position: fixed`
+ * всегда не стали: у обычных выпадашек координаты считает браузер, и это надёжнее.
+ * Поэтому смотрим, есть ли над нами прокручиваемый предок, и только тогда считаем
+ * координаты сами. `overflow: hidden` не в счёт — там выпадашки и так живут.
+ */
+function hasScrollableAncestor(element: HTMLElement | null): boolean {
+  let node = element?.parentElement || null;
+
+  while (node && node !== document.body) {
+    const { overflowX, overflowY } = getComputedStyle(node);
+
+    if (/auto|scroll/.test(`${overflowX} ${overflowY}`)) return true;
+
+    node = node.parentElement;
+  }
+
+  return false;
+}
+
+/** Меню выведено из потока и позиционируется от экрана. */
+const escaped = ref(false);
+const escapedStyle = ref<Record<string, string>>({});
+
+/** Координаты меню от триггера: вниз, а если не влезает — вверх; прижимаем к экрану. */
+function placeEscaped() {
+  const trigger = dropdownRef.value?.getBoundingClientRect();
+  const menu = menuRef.value;
+  if (!trigger || !menu) return;
+
+  const gap = 4;
+  const edge = 8;
+  const { offsetWidth: width, offsetHeight: height } = menu;
+
+  const below = trigger.bottom + gap;
+  const flip = below + height > window.innerHeight;
+  autoTop.value = flip;
+
+  let left = props.right ? trigger.right - width : trigger.left;
+  if (props.center) left = trigger.left + (trigger.width - width) / 2;
+
+  escapedStyle.value = {
+    top: `${Math.max(edge, flip ? trigger.top - height - gap : below)}px`,
+    left: `${Math.min(Math.max(edge, left), window.innerWidth - width - edge)}px`,
+  };
+}
+
+/** Прокрутка любого предка сдвигает триггер — пересчитываем, пока меню открыто. */
+function onViewportChange() {
+  requestAnimationFrame(placeEscaped);
+}
+
+function bindViewportListeners(bind: boolean) {
+  const method = bind ? 'addEventListener' : 'removeEventListener';
+
+  window[method]('scroll', onViewportChange, true);
+  window[method]('resize', onViewportChange);
+}
+
 function checkPosition() {
   if (!dropdownRef.value || !menuRef.value || isTablet.value) return;
   requestAnimationFrame(() => {
+    if (escaped.value) {
+      placeEscaped();
+
+      return;
+    }
+
     const triggerRect = dropdownRef.value.getBoundingClientRect();
     const menuHeight = menuRef.value.scrollHeight;
     const spaceBelow = window.innerHeight - triggerRect.bottom;
@@ -104,6 +174,12 @@ function checkPosition() {
 
 function openDropdown() {
   open.value = !open.value;
+
+  if (open.value && !isTablet.value) {
+    escaped.value = hasScrollableAncestor(dropdownRef.value);
+    if (escaped.value) bindViewportListeners(true);
+  }
+
   if (open.value) nextTick(() => checkPosition());
 
   if (isTablet.value && open.value) {
@@ -117,6 +193,8 @@ function openDropdown() {
 
 function close() {
   open.value = false;
+  bindViewportListeners(false);
+  escapedStyle.value = {};
 
   if (isTablet.value) {
     nextTick(() => {
@@ -139,6 +217,8 @@ watch(open, (val) => {
 });
 
 onBeforeUnmount(() => {
+  bindViewportListeners(false);
+
   if (open.value && isTablet.value) {
     scrollUnlock();
     releaseOverlay(menuRef.value);
@@ -278,6 +358,17 @@ defineExpose({ openDropdown, open });
   }
 }
 
+/* Меню внутри прокручиваемого блока: позиционируется от экрана, координаты считает
+   скрипт (см. placeEscaped) — браузерные `bottom`/`transform` здесь только мешают. */
+.ui-dropdown.--escaped .ui-dropdown__menu {
+  @include from-br(md) {
+    position: fixed;
+    right: auto;
+    bottom: auto;
+    transform: none;
+  }
+}
+
 .ui-dropdown__menu-items > .ui-dropdown__item {
   @include font-md;
 

package/components/ui/img.vue

@@ -1,14 +1,13 @@
 <template>
-  <!-- `<picture>` только под avif: обёртка сдвигает картинку на уровень ниже, а
+  <!-- `<picture>` только когда есть avif: обёртка сдвигает картинку на уровень ниже, а
   `card/playlist.vue` и `playlist-mini.vue` целятся в свои UiImg через `:first-child`/`:nth-child(2)`
   — внутри `<picture>` каждая из них стала бы первым ребёнком, и раскладка поехала бы. -->
   <picture
-    v-if="avifSrcset"
+    v-if="avifSrc"
     class="ui-img"
   >
     <source
-      :srcset="avifSrcset"
-      :sizes="computedSizes"
+      :srcset="avifSrc"
       type="image/avif"
     >
     <img
@@ -31,11 +30,13 @@ defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<{
   src?: string,
+  /** Тот же кадр в avif. Есть — рендерится `<picture>`, `src` становится фолбэком. */
+  avifSrc?: string,
   width: string | number,
   height: string | number,
   sizes?: string,
   urls?: IThumbUrls,
-  /** Ладдер с avif-веткой (портреты моделей). Старше `urls`. */
+  /** Ладдер по ширине (портреты моделей). Старше `urls`. */
   imageUrls?: IModelImageUrls,
   alt?: string,
   loading?: 'lazy' | 'eager',
@@ -53,10 +54,13 @@ const attrs = useAttrs();
  * (апрель 2026), Safari 27 (сентябрь 2026). Где не поддержан — деградирует в `100vw`,
  * и браузер берёт самый крупный кандидат. Для ладдеров, где это перерасход, вызывающий
  * пишет `sizes` сам, начиная с `auto,` — остаток списка и есть фолбэк под Safari ≤26.
- * Такой `sizes` отдаём как есть.
  */
 const computedSizes = computed(() => {
-  if (props.sizes?.startsWith('auto')) return props.sizes;
+  if (props.sizes?.startsWith('auto')) {
+    // `auto` валиден только при loading=lazy. На eager браузер бракует весь атрибут и
+    // уходит в дефолтные 100vw, то есть тянет самый крупный кандидат: отдаём хвост списка.
+    return props.loading === 'lazy' ? props.sizes : props.sizes.replace(/^auto,\s*/, '');
+  }
   if (props.loading === 'lazy') return 'auto';
   return props.sizes;
 });
@@ -69,8 +73,6 @@ const imgSrc = computed(() => {
 
 const computedSrcset = computed(() => buildSrcset(props.imageUrls?.webp) || buildSrcset(props.urls?.webp));
 
-const avifSrcset = computed(() => buildSrcset(props.imageUrls?.avif));
-
 const imgAttrs = computed(() => ({
   ...attrs,
   src: imgSrc.value,

package/composables/use-test-model-images.ts

@@ -1,27 +1,33 @@
-import type { IModelImageUrls } from '../types';
-import { ModelImageSize } from '../runtime';
-
 export interface ITestModelPortrait {
   primaryImageUrl: string;
   thumbUrl: string;
-  primaryImageUrls?: IModelImageUrls;
+  primaryImageAvifUrl?: string;
 }
 
-const PORTRAIT_COUNT = 25;
+const PORTRAIT_COUNT = 16;
 
 /**
- * Тестовые портреты моделей из `public/img/models/`. Формат переключается query-параметром —
- * для замера веса и сравнения качества на одной и той же странице:
+ * Тестовые портреты моделей из `public/img/models/`. Везде один файл 640w:
+ *
+ * - `?img=png` — исходники;
+ * - `?img=webp` — только webp, без avif-ветки;
+ * - без параметра — avif q63 4:4:4 через `<picture>`, фолбэк webp `-q 85 -m 6 -pass 10 -sharp_yuv`.
  *
- * - `?img=png` — исходники без ладдера, как было до нарезки;
- * - `?img=webp` — ладдер без avif-ветки, чтобы увидеть, сколько даёт именно avif;
- * - без параметра — avif + webp.
+ * Качество ступеней подобрано по равной ошибке в высоких частотах: webp q85 даёт 0.00405,
+ * avif q63 — 0.00399. Вес при этом 645 против 434 KB на 16 картинок, то есть avif легче на
+ * треть при том же качестве. Разрыв держится на всём диапазоне, от точки не зависит.
  *
- * Читается один раз на монтировании страницы, поэтому переключение — перезагрузкой,
- * а не навигацией по query. Для сравнения сети это и нужно: замер делается с чистого захода.
+ * Один файл, а НЕ ступени через srcset. Исходники 640, слот карточки максимум 297 CSS, так
+ * что 640w закрывает любое устройство вплоть до DPR3. Ступень мельче слота при этом заведомо
+ * хуже полного файла: её портит двойной пересчёт (наш ресайз плюс браузерный), а её артефакты
+ * показываются почти 1:1, тогда как 640w в том же слоте ужимается в 2.6 раза и они
+ * размазываются. Проверено на DPR1-мониторе: ладдер мылит, один файл нет. Ступени станут
+ * осмысленны, только если исходники вырастут заметно выше 640.
  *
- * Исходники разнокалиберные: portrait-1..16 — 640×960, portrait-17..25 — 1000×1200. В режиме
- * `png` это видно, нарезка же у всех одинаковая, так что сравнивать с `png` надо с поправкой.
+ * Кроп под 3:4 не делаем — обрезает `object-fit`. Почему именно так, см. `IModelImageUrls`.
+ *
+ * Читается один раз на монтировании, поэтому переключение — перезагрузкой, а не навигацией
+ * по query. Для замера сети это и нужно: он честен только с чистого захода.
  */
 export function useTestModelImages() {
   const format = useRoute().query['img'];
@@ -30,25 +36,17 @@ export function useTestModelImages() {
     const base = `/img/models/portrait-${index + 1}`;
 
     if (format === 'png') {
-      return { primaryImageUrl: `${base}.png`, thumbUrl: `${base}.png`, primaryImageUrls: undefined };
+      return { primaryImageUrl: `${base}.png`, thumbUrl: `${base}.png` };
     }
 
-    const ladder = (extension: string) => ({
-      [ModelImageSize.Small]: `${base}-300.${extension}`,
-      [ModelImageSize.Medium]: `${base}-600.${extension}`,
-    });
-
     return {
-      primaryImageUrl: `${base}-600.webp`,
-      thumbUrl: `${base}-300.webp`,
-      primaryImageUrls: {
-        avif: format === 'webp' ? undefined : ladder('avif'),
-        webp: ladder('webp'),
-      },
+      primaryImageUrl: `${base}-q85.webp`,
+      thumbUrl: `${base}-q85.webp`,
+      primaryImageAvifUrl: format === 'webp' ? undefined : `${base}-q63.avif`,
     };
   });
 
-  const portraitAt = (index: number) => portraits[index % PORTRAIT_COUNT]!;
+  const portraitAt = (index: number) => portraits[index % portraits.length]!;
 
   return { portraits, portraitAt };
 }

package/package.json

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

package/pages/search/[slug]/videos.vue

@@ -51,7 +51,7 @@ const { meta, h1 } = useMeta({
   t,
   pageKey: pagePureName,
   brandName: useAppConfig().brandName,
-  sortOptions: vectorSearch ? [] : sortItemsSearch,
+  sortOptions: vectorSearch ? sortItemsSearch.slice(0, 1) : sortItemsSearch,
   text: metaTitle,
 });
 

package/runtime/index.ts

@@ -8,7 +8,6 @@ export * from './constants/niche';
 export * from './constants/report-forms-subjects';
 export * from './constants/playlist-step';
 export * from './constants/thumb-size';
-export * from './constants/model-image-size';
 export * from './constants/webcams';
 export * from './utils/build-srcset';
 export * from './utils/format-date';

package/runtime/utils/__tests__/build-srcset.test.ts

@@ -2,6 +2,13 @@ import { describe, it, expect } from 'vitest';
 import { buildSrcset } from '../build-srcset';
 
 describe('buildSrcset', () => {
+  it('ключ-ширина без высоты — основная форма для портретов', () => {
+    expect(buildSrcset({
+      300: 'https://img.com/a-300.webp',
+      640: 'https://img.com/a-640.webp',
+    })).toBe('https://img.com/a-300.webp 300w, https://img.com/a-640.webp 640w');
+  });
+
   it('собирает дескрипторы ширины из ключей карты', () => {
     expect(buildSrcset({
       '300x400': 'https://img.com/a-300.webp',

package/runtime/utils/cleaners/__tests__/clean-model-card.test.ts

@@ -26,26 +26,12 @@ describe('cleanModelCard', () => {
     expect(result.country).toEqual({ title: 'United States of America', name: 'us' });
   });
 
-  it('primary_image_urls → ладдер портрета, недостающий размер пустой строкой', () => {
+  it('primary_image_urls → ладдер портрета как есть, ступени произвольные', () => {
     const raw = makeRaw({
-      primary_image_urls: { webp: { '600x800': 'https://img.com/p-600.webp' } },
+      primary_image_urls: { webp: { 300: 'https://img.com/p-300.webp', 640: 'https://img.com/p-640.webp' } },
     });
     expect(cleanModelCard(raw as any).primaryImageUrls).toEqual({
-      avif: undefined,
-      webp: { '300x400': '', '600x800': 'https://img.com/p-600.webp' },
-    });
-  });
-
-  it('avif-ветка попадает в ладдер', () => {
-    const raw = makeRaw({
-      primary_image_urls: {
-        avif: { '300x400': 'https://img.com/p-300.avif', '600x800': 'https://img.com/p-600.avif' },
-        webp: { '300x400': 'https://img.com/p-300.webp', '600x800': 'https://img.com/p-600.webp' },
-      },
-    });
-    expect(cleanModelCard(raw as any).primaryImageUrls?.avif).toEqual({
-      '300x400': 'https://img.com/p-300.avif',
-      '600x800': 'https://img.com/p-600.avif',
+      webp: { 300: 'https://img.com/p-300.webp', 640: 'https://img.com/p-640.webp' },
     });
   });
 

package/runtime/utils/cleaners/clean-model-card.ts

@@ -1,12 +1,7 @@
 import type { IRawModelCard, IModelCard, IModelParameter } from '../../../types';
 import { ThumbSize } from '../../constants/thumb-size';
-import { ModelImageSize } from '../../constants/model-image-size';
 
 const parameterNames = ['guy_type', 'ethnicity'];
-const pickPortraitSizes = (urls?: Partial<Record<ModelImageSize, string>>) => urls && {
-  [ModelImageSize.Small]: urls[ModelImageSize.Small] || '',
-  [ModelImageSize.Medium]: urls[ModelImageSize.Medium] || '',
-};
 const firstValue = (card: IRawModelCard, name: string) => card.parameters?.find(item => item.name === name)?.values?.[0];
 const age = (card: IRawModelCard) => firstValue(card, 'age')?.title;
 
@@ -16,10 +11,7 @@ export const cleanModelCard = (card: IRawModelCard): IModelCard => ({
   videosCount: card.videos_count || 0,
   thumbUrl: card.video_thumb_urls?.webp?.[ThumbSize.Small] || '',
   primaryImageUrl: card.primary_image_url || '',
-  primaryImageUrls: card.primary_image_urls?.webp ? {
-    avif: pickPortraitSizes(card.primary_image_urls.avif),
-    webp: pickPortraitSizes(card.primary_image_urls.webp)!,
-  } : undefined,
+  primaryImageUrls: card.primary_image_urls?.webp ? { webp: card.primary_image_urls.webp } : undefined,
   guid: card.guid || '',
   // Страна лежит в parameters под именем nationality_iso_codes: `name` — код ISO-2 (`us`),
   // он же имя файла флага, `title` — читаемое название. Одноимённое поле верхнего уровня

package/runtime/utils/converters/convert-model-to-round-card.ts

@@ -7,6 +7,7 @@ export function convertModelToRoundCard(model: IModelCard): IRoundCard {
     title: model.title,
     primaryImageUrl: model.primaryImageUrl || model.thumbUrl || '',
     primaryImageUrls: model.primaryImageUrls,
+    primaryImageAvifUrl: model.primaryImageAvifUrl,
     videosCount: model.videosCount,
     link: `/models/${convertString().toSlug(model.title)}`,
   };

package/types/model-card.d.ts

@@ -5,6 +5,8 @@ export interface IModelCard {
   videosCount: number;
   thumbUrl: string;
   primaryImageUrl?: string;
+  /** Тот же портрет в avif. Есть — карточка отдаёт его через `<picture>`, webp фолбэком. */
+  primaryImageAvifUrl?: string;
   /** Ладдер портрета под srcset. Нет — карточка рендерит один `primaryImageUrl`. */
   primaryImageUrls?: IModelImageUrls;
   guid: string;

package/types/model-image-urls.d.ts

@@ -1,7 +1,13 @@
-import type { ModelImageSize } from '../runtime/constants/model-image-size';
-
-/** Очищенный портрет модели, ключ `<ширина>x<высота>`. `avif` необязателен — webp несущий. */
+/**
+ * Ладдер портрета модели. Ключ — ширина в пикселях, высота не фиксирована.
+ *
+ * Портреты НЕ приводятся к 3:4 нарезкой — обрезает `object-fit` в карточке. Предварительный
+ * кроп менял габариты файла, а вместе с ними и цепочку уменьшения в браузере, и картинка
+ * заметно мылила при тех же самых пикселях. Проверено на живой вёрстке.
+ *
+ * Только webp: avif на портретах проигрывал по точности и почти не выигрывал по весу, а
+ * держать ради него `<picture>` в `UiImg` не окупалось.
+ */
 export interface IModelImageUrls {
-  avif?: Partial<Record<ModelImageSize, string>>;
-  webp: Partial<Record<ModelImageSize, string>>;
+  webp: Record<string, string>;
 }

package/types/raw/raw-model-image-urls.d.ts

@@ -1,8 +1,5 @@
-import type { ModelImageSize } from '../../runtime/constants/model-image-size';
-
-/** Raw портрет модели из API — зеркало `video_thumb_urls`, но с портретными размерами */
+/** Raw портрет модели из API. Ключ — ширина в пикселях, см. `IModelImageUrls`. */
 export interface IRawModelImageUrls {
-  jpeg?: Partial<Record<ModelImageSize, string>>;
-  webp?: Partial<Record<ModelImageSize, string>>;
-  avif?: Partial<Record<ModelImageSize, string>>;
+  jpeg?: Record<string, string>;
+  webp?: Record<string, string>;
 }

package/types/round-card.d.ts

@@ -3,6 +3,8 @@ import type { IModelImageUrls } from './model-image-urls';
 export interface IRoundCard {
   title: string
   primaryImageUrl: string
+  /** Тот же портрет в avif. Есть — карточка отдаёт его через `<picture>`, webp фолбэком. */
+  primaryImageAvifUrl?: string
   /** Ладдер портрета под srcset. Нет — карточка рендерит один `primaryImageUrl`. */
   primaryImageUrls?: IModelImageUrls
   videosCount: number

package/runtime/constants/model-image-size.ts

@@ -1,6 +0,0 @@
-export const ModelImageSize = {
-  Small: '300x400',
-  Medium: '600x800',
-} as const;
-
-export type ModelImageSize = typeof ModelImageSize[keyof typeof ModelImageSize];