itube-specs 0.0.1046 → 0.0.1049

package/components/info/model.vue

@@ -1,4 +1,4 @@
-<!-- Инфо-блок модели: портрет 3:4, псевдонимы, соцсети, шапка с действиями, рождение, описание, сводка-чипсы; «About» и группы параметров — по «Show more» -->
+<!-- Инфо-блок модели: портрет 3:4, псевдонимы, соцсети, шапка с действиями, рождение, описание, сводка-чипсы; «About» и группы параметров — по «Show more», на десктопе свёрнутые доливают колонку до низа портрета -->
 <template>
   <section class="info-model">
     <div class="info-model__aside">
@@ -122,7 +122,8 @@
 
     <div
       v-if="hasMore"
-      :class="{'--collapsed': !isExpanded, '--about': card.fullDescription}"
+      ref="detailsRef"
+      :class="{'--collapsed': !isExpanded, '--pending': !isMeasured}"
       class="info-model__details"
     >
       <div
@@ -146,7 +147,9 @@
 
     <button
       v-if="hasMore"
+      ref="moreRef"
       :aria-expanded="isExpanded"
+      :class="{'--fit': !hasCut && !isExpanded, '--pending': !isMeasured}"
       class="info-model__more"
       type="button"
       @click="isExpanded = !isExpanded"
@@ -245,6 +248,86 @@ const isExpanded = ref(false);
 
 const hasMore = computed(() => groupedParameters.value.length > 0 || Boolean(props.card.fullDescription));
 
+/** Единицы, которые прячутся только целиком: заголовки, абзацы, плашки. Порядок — документный. */
+const FIT_SELECTOR = 'h3, .info-model__about-text, .info-grid__plain-text, .info-grid__item';
+
+/** Если всё целиком выпирает ниже портрета не больше чем на столько — показываем всё без «Show more». */
+const FIT_TOLERANCE = 64;
+
+const detailsRef = ref<HTMLElement>();
+const moreRef = ref<HTMLElement>();
+const hasCut = ref(true);
+const isMeasured = ref(false);
+
+/** Строка грида под кнопкой (с её отступами): без «Show more» она достаётся деталям. */
+function getMoreRowHeight(box: HTMLElement) {
+  const more = moreRef.value;
+  if (!more || !more.offsetParent) return 0;
+
+  return more.getBoundingClientRect().bottom + Number.parseFloat(getComputedStyle(more).marginBottom)
+    - box.getBoundingClientRect().bottom;
+}
+
+/** До первого замера детали и кнопка на десктопе прозрачны (`--pending`): иначе после гидрации видно, как они перестраиваются. */
+function measureDetails() {
+  fitDetails();
+  isMeasured.value = true;
+}
+
+/**
+ * На десктопе высоту свёрнутых деталей задаёт грид — остаток колонки до низа портрета.
+ * Всё, что не влезло целиком, прячем; заголовок без единой видимой строки под ним — тоже.
+ * Небольшой хвост в пределах допуска не прячем, а вытягиваем блок под него через `min-height`.
+ */
+function fitDetails() {
+  const box = detailsRef.value;
+  if (!box) return;
+
+  const units = Array.from(box.querySelectorAll<HTMLElement>(FIT_SELECTOR));
+  box.style.minHeight = '';
+
+  if (isExpanded.value || !isChipsOverflowWidth()) {
+    units.forEach(el => el.removeAttribute('data-cut'));
+    hasCut.value = true;
+    return;
+  }
+
+  const { top } = box.getBoundingClientRect();
+  const limit = box.clientHeight + 0.5;
+  const bottoms = units.map(el => el.getBoundingClientRect().bottom - 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`;
+    units.forEach(el => el.removeAttribute('data-cut'));
+    hasCut.value = false;
+    return;
+  }
+
+  const visible: boolean[] = [];
+  let isOver = false;
+
+  bottoms.forEach((bottom, index) => {
+    isOver ||= bottom > limit;
+    visible[index] = !isOver;
+  });
+
+  for (let index = units.length - 1; index >= 0; index--) {
+    if (units[index].tagName === 'H3' && !(visible[index + 1] && units[index + 1].tagName !== 'H3')) {
+      visible[index] = false;
+    }
+  }
+
+  units.forEach((el, index) => el.toggleAttribute('data-cut', !visible[index]));
+  hasCut.value = visible.includes(false);
+}
+
+useChipsOverflow(detailsRef, measureDetails);
+
+watch([isExpanded, () => props.card], () => nextTick(measureDetails));
+
 const isShareOpen = ref(false);
 
 const { isAuthorized } = useUser(AuthorizationApiService);
@@ -308,15 +391,14 @@ const shareModelCard = computed<IModelCard>(() => ({
 
   @include from-br(sm) {
     grid-template-columns: 240px minmax(0, 1fr);
-    grid-template-rows: auto auto auto auto auto auto 1fr;
+    grid-template-rows: auto auto auto auto 1fr auto;
     grid-template-areas:
       'aside header'
       'aside born'
       'aside description'
       'aside summary'
       'aside details'
-      'aside more'
-      'aside .';
+      'aside more';
   }
 }
 
@@ -537,20 +619,30 @@ 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 {
   @include to-br(sm) {
     display: none;
   }
-}
 
-.info-model__details.--collapsed:not(.--about) {
-  display: none;
+  @include from-br(sm) {
+    align-content: start;
+    overflow: clip;
+    contain: size;
+  }
 }
 
-.info-model__details.--collapsed .info-model__parameters {
-  display: none;
+.info-model__details [data-cut] {
+  visibility: hidden;
 }
 
 .info-model__about-title {
@@ -587,11 +679,17 @@ 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;
   }
 }
 
+.info-model__more.--fit {
+  @include from-br(sm) {
+    display: none;
+  }
+}
+
 .info-model__more-icon {
   transition: var(--transition) transform;
 }

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.1046",
+  "version": "0.0.1049",
   "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;
+}