itube-specs 0.0.1018 → 0.0.1021

package/components/player/channel.vue

@@ -73,9 +73,9 @@ function onSubscribeClick() {
 .player-channel {
   display: flex;
   align-items: center;
-  column-gap: 8px;
+  column-gap: 14px;
   height: var(--chips-height);
-  padding-right: 8px;
+  padding-right: 14px;
   background-color: $video-channel-bg;
   border-radius: $radius;
   overflow: hidden;
@@ -95,7 +95,7 @@ function onSubscribeClick() {
 }
 
 .player-channel__initials {
-  @include font-3xs;
+  @include font-4xs;
 
   display: flex;
   align-items: center;
@@ -109,19 +109,22 @@ function onSubscribeClick() {
 }
 
 .player-channel__name {
-  @include font-sm;
+  @include font-2xs;
 
   color: $video-channel-name;
-  transition: color var(--transition);
   white-space: nowrap;
 
-  &:hover {
+  @include from-br(sm) {
+    @include font-sm;
+  }
+
+  @include hover(color) {
     color: $video-channel-name--hover;
   }
 }
 
 .player-channel__subscribe {
-  @include font-xs;
+  @include font-2xs;
 
   flex-shrink: 0;
   color: $video-channel-subscribe-text;
@@ -132,15 +135,23 @@ function onSubscribeClick() {
   background-color: $video-channel-subscribe-bg;
   border-radius: $radius-md;
 
+  @include from-br(sm) {
+    @include font-sm;
+  }
+
   @include hover(background-color) {
     background-color: $video-channel-subscribe-bg--hover;
   }
 }
 
 .player-channel__count {
-  @include font-xs;
+  @include font-2xs;
 
   color: $video-channel-count;
   white-space: nowrap;
+
+  @include from-br(sm) {
+    @include font-sm;
+  }
 }
 </style>

package/components/player/interface.vue

@@ -188,6 +188,7 @@ function onAddPlaylistClick() {
 
   @include from-br(sm) {
     display: flex;
+    margin-left: -6px;
   }
 }
 
@@ -224,8 +225,8 @@ function onAddPlaylistClick() {
     align-items: center;
     row-gap: 0;
     column-gap: 6px;
-    padding: 6px 12px;
-    font-weight: 500;
+    padding: 8px 12px;
+    border-radius: $radius-md;
     white-space: nowrap;
     background-color: var(--button-bg, #{$video-interface-button-bg});
     color: var(--button-text, #{$video-interface-button-text});
@@ -272,26 +273,29 @@ function onAddPlaylistClick() {
 
 .player-interface__description {
   display: grid;
-  grid-template-columns: 1fr 20px;
-  align-items: center;
-  column-gap: 8px;
+  grid-template-columns: 1fr auto;
+  align-items: end;
+  column-gap: 12px;
 }
 
 .player-interface__description-handler {
-  height: 1lh;
+  @include font-sm;
+
+  display: flex;
+  align-items: center;
+  height: 1.625em;
+  padding-left: 6px;
   color: $video-info-handler-text;
   cursor: pointer;
+
+  @include hover(color) {
+    color: $video-info-handler-text--hover;
+  }
 }
 
 .player-interface__description-icon {
+  margin-right: -4px;
   transition: var(--transition) transform;
-
-  @include from-br(sm) {
-    $size: 16px;
-
-    width: $size;
-    height: $size;
-  }
 }
 
 .player-interface__description-text {

package/components/player/like.vue

@@ -149,8 +149,8 @@ const likePercent = computed(() => getReactionPercents(resultLikes.value, result
   @include from-br(sm) {
     flex-direction: row;
     row-gap: 0;
-    column-gap: 6px;
-    padding: 6px;
+    column-gap: 12px;
+    padding: 6px 0 6px 6px;
     border-radius: $radius-small;
     color: $like-icon;
   }

package/components/player/tags.vue

@@ -0,0 +1,224 @@
+<!-- Строка над плеером: канал и модели (слот), категории и теги ролика. Видно столько чипсов, сколько
+влезло в строку вместе с кнопкой «More +N»; остальные остаются в разметке (их читает краулер), но скрыты
+до раскрытия. На мобиле строка листается вбок, видны первые MOBILE_VISIBLE чипсов. -->
+<template>
+  <div
+    ref="rowRef"
+    :class="{'--open': isOpen}"
+    class="player-tags"
+  >
+    <slot name="prepend" />
+    <UiChips
+      v-for="(item, index) in items"
+      :key="`${index}-${item.title}`"
+      :item="item"
+      :class="{
+        '--tag': item.prefix === 'tag',
+        '--hidden': !isOpen && index >= visibleCount,
+      }"
+      class="player-tags__chip"
+      is-link
+    />
+    <button
+      v-show="hiddenCount > 0 || isOpen"
+      ref="moreRef"
+      :aria-expanded="isOpen"
+      class="player-tags__more"
+      type="button"
+      @click="isOpen = !isOpen"
+    >
+      {{ moreLabel }}
+      <UiIcon
+        class="player-tags__more-icon"
+        name="chevron-down"
+        size="12"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IChipsItem } from '../../types';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
+
+const props = defineProps<{
+  items: IChipsItem[]
+}>();
+
+/** Сколько чипсов видно на мобиле до раскрытия — строка там листается, «влезло» не считается. */
+const MOBILE_VISIBLE = 4;
+
+const { t } = useI18n();
+
+const rowRef = ref<HTMLElement>();
+const moreRef = ref<HTMLElement>();
+const isOpen = ref(false);
+// До замера на клиенте видны все — разметка сервера и первого рендера клиента совпадает
+const visibleCount = ref(props.items.length);
+
+const hiddenCount = computed(() => Math.max(props.items.length - visibleCount.value, 0));
+
+const upperFirst = (text: string) => text.charAt(0).toUpperCase() + text.slice(1);
+const moreLabel = computed(() => upperFirst(isOpen.value ? t('show_less') : `${t('more')} +${hiddenCount.value}`));
+
+/** Ширины чипсов меряются один раз, пока все видны: скрытые `display: none` ширины не имеют. */
+let chipWidths: number[] = [];
+
+function measureChips() {
+  const row = rowRef.value;
+  if (!row) return;
+
+  chipWidths = Array.from(row.querySelectorAll<HTMLElement>(':scope > .player-tags__chip')).map(chip => chip.offsetWidth);
+}
+
+function layout() {
+  const row = rowRef.value;
+  if (!row || isOpen.value) return;
+
+  if (window.innerWidth < CSS_BREAKPOINTS.sm) {
+    visibleCount.value = Math.min(MOBILE_VISIBLE, props.items.length);
+    return;
+  }
+
+  const gap = parseFloat(getComputedStyle(row).columnGap) || 0;
+  const prependWidth = (Array.from(row.children) as HTMLElement[])
+    .filter(child => !child.classList.contains('player-tags__chip') && child !== moreRef.value && child.offsetWidth > 0)
+    .reduce((sum, child) => sum + child.offsetWidth + gap, 0);
+  const available = row.clientWidth - prependWidth;
+  const total = chipWidths.reduce((sum, width) => sum + width + gap, 0) - gap;
+
+  if (total <= available) {
+    visibleCount.value = props.items.length;
+    return;
+  }
+
+  // ponytail: ширина кнопки — по тексту «More +88»; при другом числе цифр расхождение в пару px
+  const moreWidth = moreRef.value?.offsetWidth || 0;
+  let used = 0;
+  let count = 0;
+
+  for (const width of chipWidths) {
+    if (used + width + gap + moreWidth > available) break;
+    used += width + gap;
+    count++;
+  }
+
+  visibleCount.value = count;
+}
+
+async function remeasure() {
+  isOpen.value = false;
+  visibleCount.value = props.items.length;
+  await nextTick();
+  measureChips();
+  layout();
+  // кнопка показалась только сейчас — с её реальной шириной раскладка может сдвинуться на чипсу
+  await nextTick();
+  layout();
+}
+
+watch(() => props.items, remeasure);
+
+let resizeObserver: ResizeObserver | null = null;
+
+onMounted(() => {
+  remeasure();
+  resizeObserver = new ResizeObserver(() => layout());
+  if (rowRef.value) resizeObserver.observe(rowRef.value);
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+});
+</script>
+
+<style lang="scss">
+.player-tags {
+  --chips-height: 36px;
+
+  /* строка не растягивает предков своей шириной: на мобиле она листается, а не раздвигает страницу */
+  contain: inline-size;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-inline: calc(-1 * var(--container-padding-inline));
+  padding-inline: var(--container-padding-inline);
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  @include from-br(sm) {
+    flex-wrap: wrap;
+    margin-inline: 0;
+    padding-inline: 0;
+    overflow: visible;
+  }
+}
+
+.player-tags::-webkit-scrollbar {
+  display: none;
+}
+
+/* До замера на клиенте строка — одна линия, без мигания второго ряда */
+.player-tags:not(.--open) {
+  @include from-br(sm) {
+    max-height: var(--chips-height);
+    overflow: hidden;
+  }
+}
+
+.player-tags .ui-chips {
+  @include font-2xs;
+
+  flex-shrink: 0;
+  border: 1px solid transparent;
+  border-radius: $radius;
+  background-color: $player-tags-chip-bg;
+
+  @include from-br(sm) {
+    @include font-sm;
+  }
+}
+
+.player-tags .ui-chips.--tag {
+  background-color: $player-tags-tag-bg;
+}
+
+.player-tags__chip.--hidden {
+  display: none;
+}
+
+.player-tags__more {
+  @include font-2xs;
+
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  column-gap: 4px;
+  padding: 6px 4px;
+  color: $player-tags-more-text;
+  white-space: nowrap;
+
+  @include from-br(sm) {
+    @include font-sm;
+  }
+
+  @include hover(color) {
+    color: $player-tags-more-text--hover;
+  }
+}
+
+.player-tags__more-icon {
+  width: 14px;
+  height: 14px;
+  transition: var(--transition) transform;
+
+  @include from-br(sm) {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.player-tags.--open .player-tags__more-icon {
+  transform: rotate(180deg);
+}
+</style>

package/components/view/model-videos.vue

@@ -93,12 +93,6 @@
       class="view-model-videos__other-models"
       hydrate-on-visible
     />
-
-    <LazyUiFullDescr
-      v-if="isFirstPage && cardInfo?.fullDescription && !isFilteredPage"
-      :text="cardInfo.fullDescription"
-      hydrate-on-visible
-    />
   </div>
 </template>
 
@@ -243,7 +237,7 @@ const infoVideosCount = computed(() => (props.dataOther && props.dataOther.items
 
 <style lang="scss">
 .view-model-videos__info {
-  margin-bottom: 24px;
+  margin-bottom: 32px;
 }
 
 .view-model-videos__top-chips {

package/components/view/video.vue

@@ -6,7 +6,7 @@
         <span class="_truncate">{{ data.title }}</span>
       </h1>
       <div class="view-video__header-wrapper">
-        <UiExpandRow
+        <PlayerTags
           v-if="topChips && topChips.length > 0"
           :items="topChips"
           class="view-video__header-categories"
@@ -27,7 +27,7 @@
               />
             </template>
           </template>
-        </UiExpandRow>
+        </PlayerTags>
       </div>
     </header>
 

package/components/view/webcams.vue

@@ -404,8 +404,7 @@ watch(() => JSON.stringify(toWebcamFilterPayload(route.query)), () => {
   margin-top: 0;
 }
 
-.grid-webcams.view-webcams__grid {
-  // ресет обнуляет отступы у `ul[class]`, одиночный класс его не перебивает
+.view-webcams__grid {
   margin-bottom: 40px;
 }
 </style>

package/i18n/locales/en-US.json

@@ -1,4 +1,5 @@
 {
+  "model_about": "About",
   "top_models": "Top models",
   "playlists_empty": {
     "title": "No playlists yet",

package/package.json

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

package/utils/info-grid/__tests__/model-filter-link.test.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+import { modelFilterLink } from '../model-filter-link';
+
+describe('modelFilterLink', () => {
+  it('builds a single filter for a select', () => {
+    expect(modelFilterLink({ name: 'hair_color', kind: 'select' }, 'brown')).toBe('/models?filter_hair_color=brown');
+  });
+
+  it('puts a range value into both _from and _to', () => {
+    expect(modelFilterLink({ name: 'age', kind: 'range' }, '27')).toBe('/models?filter_age_from=27&filter_age_to=27');
+  });
+
+  it('lowercases and joins words with +', () => {
+    expect(modelFilterLink({ name: 'interested_in', kind: 'radio' }, 'Guys  And Girls')).toBe('/models?filter_interested_in=guys+and+girls');
+  });
+});

package/utils/info-grid/model-filter-link.ts

@@ -0,0 +1,17 @@
+import type { IGroupedParameterItem } from '../../types';
+
+/**
+ * Ссылка на каталог моделей, отфильтрованный по значению параметра. У диапазона
+ * значение уходит сразу в `_from` и `_to`.
+ * @param item - параметр: `name` — ключ фильтра, `kind` — тип
+ * @param value - `name` значения параметра
+ */
+export function modelFilterLink(item: Pick<IGroupedParameterItem, 'name' | 'kind'>, value: string) {
+  const formattedValue = value.toLowerCase().replace(/\s+/g, '+');
+
+  if (item.kind === 'range') {
+    return `/models?filter_${item.name}_from=${formattedValue}&filter_${item.name}_to=${formattedValue}`;
+  }
+
+  return `/models?filter_${item.name}=${formattedValue}`;
+}