itube-specs 0.0.1047 → 0.0.1050

package/components/info/model.vue

@@ -1,7 +1,10 @@
 <!-- Инфо-блок модели: портрет 3:4, псевдонимы, соцсети, шапка с действиями, рождение, описание, сводка-чипсы; «About» и группы параметров — по «Show more», на десктопе свёрнутые доливают колонку до низа портрета -->
 <template>
   <section class="info-model">
-    <div class="info-model__aside">
+    <div
+      ref="asideRef"
+      class="info-model__aside"
+    >
       <UiImg
         :src="currentImage"
         :avif-src="currentAvifSrc"
@@ -123,7 +126,7 @@
     <div
       v-if="hasMore"
       ref="detailsRef"
-      :class="{'--collapsed': !isExpanded}"
+      :class="{'--collapsed': !isExpanded, '--pending': !isMeasured}"
       class="info-model__details"
     >
       <div
@@ -149,7 +152,7 @@
       v-if="hasMore"
       ref="moreRef"
       :aria-expanded="isExpanded"
-      :class="{'--fit': !hasCut && !isExpanded}"
+      :class="{'--fit': !hasCut && !isExpanded, '--pending': !isMeasured}"
       class="info-model__more"
       type="button"
       @click="isExpanded = !isExpanded"
@@ -251,54 +254,88 @@ const hasMore = computed(() => groupedParameters.value.length > 0 || Boolean(pro
 /** Единицы, которые прячутся только целиком: заголовки, абзацы, плашки. Порядок — документный. */
 const FIT_SELECTOR = 'h3, .info-model__about-text, .info-grid__plain-text, .info-grid__item';
 
-/** Если всё целиком выпирает ниже портрета не больше чем на столько — показываем всё без «Show more». */
-const FIT_TOLERANCE = 64;
+/** Меньше строк «About» не показываем: одна строка с многоточием читается как поломка. */
+const ABOUT_MIN_LINES = 2;
 
+const asideRef = ref<HTMLElement>();
 const detailsRef = ref<HTMLElement>();
 const moreRef = ref<HTMLElement>();
 const hasCut = ref(true);
+const isMeasured = ref(false);
+
+/** Строка грида под кнопкой (с её отступами). Запоминается, пока кнопка видна, — спрятанную не измерить. */
+let moreRowHeight = 0;
 
-/** Строка грида под кнопкой (с её отступами): без «Show more» она достаётся деталям. */
-function getMoreRowHeight(box: HTMLElement) {
+function getMoreRowHeight() {
   const more = moreRef.value;
-  if (!more || !more.offsetParent) return 0;
 
-  return more.getBoundingClientRect().bottom + Number.parseFloat(getComputedStyle(more).marginBottom)
-    - box.getBoundingClientRect().bottom;
+  if (more?.offsetParent) {
+    const { marginTop, marginBottom } = getComputedStyle(more);
+    moreRowHeight = more.offsetHeight + Number.parseFloat(marginTop) + Number.parseFloat(marginBottom);
+  }
+
+  return moreRowHeight;
+}
+
+function getBottoms(units: HTMLElement[], top: number) {
+  return units.map(el => el.getBoundingClientRect().bottom - top);
+}
+
+/** До первого замера детали и кнопка на десктопе прозрачны (`--pending`): иначе после гидрации видно, как они перестраиваются. */
+function measureDetails() {
+  fitDetails();
+  isMeasured.value = true;
 }
 
 /**
- * На десктопе высоту свёрнутых деталей задаёт грид — остаток колонки до низа портрета.
- * Всё, что не влезло целиком, прячем; заголовок без единой видимой строки под ним — тоже.
- * Небольшой хвост в пределах допуска не прячем, а вытягиваем блок под него через `min-height`.
+ * На десктопе свёрнутые детали доливают колонку до низа портрета. Место — от верха блока до низа
+ * `aside` за вычетом строки кнопки; «About» обрезается по числу влезающих строк, из остального
+ * прячем всё, что не влезло целиком, и заголовок без единой видимой строки под ним.
+ * Высота блока = видимый контент, остаток уходит в пустую строку грида под кнопкой — она идёт сразу
+ * за контентом. Ниже портрета блок не вытягивается никогда: секция не растёт после гидрации.
  */
-function measureDetails() {
+function fitDetails() {
   const box = detailsRef.value;
   if (!box) return;
 
   const units = Array.from(box.querySelectorAll<HTMLElement>(FIT_SELECTOR));
-  box.style.minHeight = '';
+  const about = box.querySelector<HTMLElement>('.info-model__about-text');
+  box.style.height = '';
+  about?.style.removeProperty('--line-clamp');
 
-  if (isExpanded.value || !isChipsOverflowWidth()) {
+  if (isExpanded.value || !isChipsOverflowWidth() || !asideRef.value) {
     units.forEach(el => el.removeAttribute('data-cut'));
     hasCut.value = true;
     return;
   }
 
+  about?.style.setProperty('--line-clamp', '999');
+
   const { top } = box.getBoundingClientRect();
-  const limit = box.clientHeight + 0.5;
-  const bottoms = units.map(el => el.getBoundingClientRect().bottom - top);
+  const space = asideRef.value.getBoundingClientRect().bottom - top;
+  const moreRow = getMoreRowHeight();
+  let bottoms = getBottoms(units, top);
   const contentHeight = Math.max(0, ...bottoms);
 
-  const fullLimit = limit + getMoreRowHeight(box);
-
-  if (contentHeight <= fullLimit + FIT_TOLERANCE) {
-    if (contentHeight > fullLimit) box.style.minHeight = `${Math.ceil(contentHeight)}px`;
+  if (contentHeight <= space + 0.5) {
+    box.style.height = `${Math.ceil(contentHeight)}px`;
     units.forEach(el => el.removeAttribute('data-cut'));
     hasCut.value = false;
     return;
   }
 
+  const limit = space - moreRow + 0.5;
+
+  if (about) {
+    const lineHeight = Number.parseFloat(getComputedStyle(about).lineHeight);
+    const rect = about.getBoundingClientRect();
+    const fullLines = Math.round(rect.height / lineHeight);
+    const lines = Math.min(fullLines, Math.floor((limit - (rect.top - top)) / lineHeight));
+
+    about.style.setProperty('--line-clamp', String(Math.max(lines, ABOUT_MIN_LINES)));
+    bottoms = getBottoms(units, top);
+  }
+
   const visible: boolean[] = [];
   let isOver = false;
 
@@ -315,6 +352,9 @@ function measureDetails() {
 
   units.forEach((el, index) => el.toggleAttribute('data-cut', !visible[index]));
   hasCut.value = visible.includes(false);
+
+  const visibleHeight = Math.max(0, ...bottoms.filter((_, index) => visible[index]));
+  box.style.height = `${Math.ceil(visibleHeight)}px`;
 }
 
 useChipsOverflow(detailsRef, measureDetails);
@@ -384,14 +424,15 @@ const shareModelCard = computed<IModelCard>(() => ({
 
   @include from-br(sm) {
     grid-template-columns: 240px minmax(0, 1fr);
-    grid-template-rows: auto auto auto auto 1fr auto;
+    grid-template-rows: auto auto auto auto auto auto 1fr;
     grid-template-areas:
       'aside header'
       'aside born'
       'aside description'
       'aside summary'
       'aside details'
-      'aside more';
+      'aside more'
+      'aside .';
   }
 }
 
@@ -612,6 +653,14 @@ const shareModelCard = computed<IModelCard>(() => ({
   grid-area: details;
   row-gap: 20px;
   margin-top: 20px;
+  transition: var(--transition) opacity;
+}
+
+.info-model__details.--pending,
+.info-model__more.--pending {
+  @include from-br(sm) {
+    opacity: 0;
+  }
 }
 
 .info-model__details.--collapsed {
@@ -664,7 +713,7 @@ const shareModelCard = computed<IModelCard>(() => ({
   margin-bottom: -6px;
   color: $info-model-more-text;
 
-  @include hover(color) {
+  @include hover(color, opacity) {
     color: $info-model-more-text--hover;
   }
 }

package/composables/page/use-channel-page.ts

@@ -1,5 +1,6 @@
 import type { MaybeRefOrGetter, Ref } from 'vue';
 import { convertString } from '../../runtime';
+import type { Language } from '../../runtime';
 import { sortItemsDefault } from '../../lib';
 import { ChannelsApiService } from '../../services/api/channels.service';
 import { VideosApiService } from '../../services/api/videos.service';
@@ -11,6 +12,9 @@ import type { IBreadcrumbItem, IChipsItem, IPopularTags } from '../../types';
  * запрашивает после. Разметку страница держит свою, логику — `useChannelPage()`.
  */
 export async function useChannelPageData() {
+  const lang = useLang() as Language;
+  const redirectLegacySlug = useLegacySlugRedirect('channel', name => ChannelsApiService.getChannelsByName(lang, name).then(Boolean));
+
   const [
     { data: cardInfo, status },
     { data: videosData, status: videosStatus },
@@ -21,6 +25,8 @@ export async function useChannelPageData() {
     useFetchPopularTagsByChannelName(VideosApiService.popularTagsByChannelName),
   ]);
 
+  if (!cardInfo.value) await redirectLegacySlug();
+
   return { cardInfo, status, videosData, videosStatus, channelTagsData };
 }
 

package/composables/page/use-model-page.ts

@@ -1,5 +1,6 @@
 import type { MaybeRefOrGetter, Ref } from 'vue';
 import { convertString } from '../../runtime';
+import type { Language } from '../../runtime';
 import { sortItemsDefault } from '../../lib';
 import { ModelsApiService } from '../../services/api/models.service';
 import { VideosApiService } from '../../services/api/videos.service';
@@ -10,6 +11,9 @@ import type { IBreadcrumbItem } from '../../types';
  * с запросами одной страницы (похожие модели, теги, каналы). Разметку страница держит свою, логику — `useModelPage()`.
  */
 export async function useModelPageData() {
+  const lang = useLang() as Language;
+  const redirectLegacySlug = useLegacySlugRedirect('slug', name => ModelsApiService.getModelsByName(lang, name).then(Boolean));
+
   const [
     { data, status },
     { data: cardInfo },
@@ -18,6 +22,8 @@ export async function useModelPageData() {
     useFetchModelByName(ModelsApiService.getModelsByName),
   ]);
 
+  if (!cardInfo.value) await redirectLegacySlug();
+
   return { data, status, cardInfo };
 }
 

package/composables/use-legacy-slug-redirect.ts

@@ -0,0 +1,29 @@
+import { legacySlugCandidate } from '../runtime';
+
+/**
+ * Старые адреса с литеральным дефисом в имени (`/tag/anal-sex-free`, `/channels/bi-empire`): слаг редизайна читает
+ * дефис как пробел, и сущность «anal sex free» не находится. Создаётся до запросов страницы (нужен контекст Nuxt),
+ * возвращённая функция зовётся, когда основной запрос ничего не вернул: проверяет имя как в URL и, если сущность
+ * есть, уводит 301 на каноничный слаг (`anal_sex_free`).
+ */
+export function useLegacySlugRedirect(param: string, exists: (name: string) => Promise<boolean>) {
+  const route = useRoute();
+  const router = useRouter();
+  const nuxtApp = useNuxtApp();
+  const { generateLink } = useGenerateLink();
+  const raw = String(route.params[param] || '');
+  const slug = legacySlugCandidate(raw);
+
+  return async () => {
+    if (!slug) return;
+
+    // после await страницы контекста Nuxt нет — и запрос, и редирект запускаем в нём явно
+    const found = await nuxtApp.runWithContext(() => exists(raw)).catch(() => false);
+    if (!found) return;
+
+    // по имени роут резолвится без префикса ниши — его добавляет generateLink
+    const path = router.resolve({ name: String(route.name), params: { ...route.params, [param]: slug } }).path;
+
+    await nuxtApp.runWithContext(() => navigateTo({ path: generateLink(path), query: route.query }, { redirectCode: 301, replace: true }));
+  };
+}

package/package.json

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

package/pages/tag/[tag].vue

@@ -22,6 +22,7 @@
 <script setup lang="ts">
 import type { IBreadcrumbItem } from '../../types';
 import { convertString } from '../../runtime';
+import type { Language } from '../../runtime';
 import { VideosApiService } from '../../services/api/videos.service';
 import { ModelsApiService } from '../../services/api/models.service';
 import { sortItemsDefault } from '../../lib';
@@ -29,6 +30,9 @@ import { sortItemsDefault } from '../../lib';
 const { t } = useI18n();
 
 const pageName = useGetPureRouteName();
+const lang = useLang() as Language;
+const redirectLegacySlug = useLegacySlugRedirect('tag', name => VideosApiService.getListByNicheAndTag({ page: 1, 'per-page': 1 }, {}, name, lang, '-popularity')
+  .then(result => !!result?.items?.length));
 
 const [
   { data, status },
@@ -40,6 +44,8 @@ const [
   useRouteQueryCategories(),
 ]);
 
+if (!data.value?.items?.length) await redirectLegacySlug();
+
 useNoindexThinListing(() => data.value?.items?.length);
 
 const route = useRoute();

package/runtime/index.ts

@@ -12,6 +12,7 @@ export * from './constants/webcams';
 export * from './utils/aside-model-videos';
 export * from './utils/build-srcset';
 export * from './utils/pick-portrait-variant';
+export * from './utils/legacy-slug';
 export * from './utils/model-placeholder';
 export * from './utils/format-date';
 export * from './utils/format-time';

package/runtime/utils/__tests__/legacy-slug.test.ts

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest';
+import { legacySlugCandidate } from '../legacy-slug';
+
+describe('legacySlugCandidate', () => {
+  it('literal hyphen in the name → underscore slug', () => {
+    expect(legacySlugCandidate('anal-sex-free')).toBe('anal_sex_free');
+    expect(legacySlugCandidate('Bi-Empire')).toBe('bi_empire');
+  });
+
+  it('already canonical → null', () => {
+    expect(legacySlugCandidate('teen')).toBeNull();
+    expect(legacySlugCandidate('anal_sex_free')).toBeNull();
+    expect(legacySlugCandidate('')).toBeNull();
+  });
+});

package/runtime/utils/legacy-slug.ts

@@ -0,0 +1,14 @@
+import { convertString } from './converters/convert-string';
+
+/**
+ * Canonical slug for a legacy address whose name keeps a literal hyphen (`/tag/anal-sex-free`, `/channels/bi-empire`):
+ * the redesign reads `-` as a space, so the entity is looked up as "anal sex free" and missed. Returns the slug the
+ * same name gets from `toSlug` (`anal_sex_free`), or `null` when the address is already canonical.
+ */
+export function legacySlugCandidate(raw: string): string | null {
+  if (!raw.includes('-')) return null;
+
+  const slug = convertString().toSlug(raw);
+
+  return slug === raw ? null : slug;
+}