itube-specs 0.0.1018 → 0.0.1020

package/SITE_UPDATES.md

@@ -11,6 +11,21 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1019 — 2026-10-08
+
+- **Сайтам со своей темой** (`assets/scss/vars/_theme.scss` в сайте, как у hdsex-remaster): завести токены
+  строки над плеером и описания — как в `themes/dark/_theme.scss` слоя:
+  `$player-tags-chip-bg`, `$player-tags-tag-bg`, `$player-tags-more-text`, `$player-tags-more-text--hover`,
+  `$video-info-handler-text--hover`. Плюс по макету изменились значения: `$video-channel-bg` → `$color-zinc-800`,
+  `$video-info-handler-text` → `$color-zinc-500`. Не завести — сборка падает на undefined variable. Образец —
+  коммит hdsex-remaster с переходом на эту версию.
+- **Сайтам с форком `components/view/video.vue`:** строку над плеером `<UiExpandRow …>` заменить на
+  `<PlayerTags …>` (те же `items` и слот `prepend`) — новая раскладка по макету: «More +N» после влезших чипсов,
+  теги светлее категорий, на мобиле строка листается. Не заменить — у сайта останется старая строка.
+- **Сайтам с хуком попандера на карточке видео** (`pu-trigger` на `<CardVideo>`): класс перенести в проп
+  `link-class="pu-trigger"` — он ляжет только на ссылки на ролик (превью и тайтл), меню и кнопки карточки
+  перестанут открывать попандер. Остальным — ничего.
+
 ## 0.0.1013 — 2026-10-07
 
 - **Всем сайтам — чистка своих переводов (`i18n/locales/*.json`, во всех локалях):** образец —

package/assets/scss/themes/dark/_theme.scss

@@ -238,7 +238,8 @@ $video-menu-preview-border: $color-zinc-800;
 
 // ─── Video info ───
 $video-info-item-text: $color-zinc-500-70;
-$video-info-handler-text: $color-zinc-400;
+$video-info-handler-text: $color-zinc-500;
+$video-info-handler-text--hover: $color-white;
 $video-info-description-text: $color-zinc-400;
 
 // ─── Video interface ───
@@ -253,7 +254,7 @@ $video-interface-mobile-label: $color-zinc-300;
 $video-interface-mobile-border: $color-zinc-800;
 
 // ─── Video channel ───
-$video-channel-bg: $color-zinc-800-60;
+$video-channel-bg: $color-zinc-800;
 $video-channel-initials-gradient-from: $color-indigo-500;
 $video-channel-initials-gradient-to: $color-purple-600;
 $video-channel-initials-text: $color-white;
@@ -1171,3 +1172,9 @@ $switcher-subtitle--active: $color-white-60;
 $card-webcam-languages-border: $color-white-20;
 $card-webcam-languages-fallback-bg: $color-zinc-800;
 $card-webcam-languages-fallback-icon: $color-zinc-300;
+
+// ─── Player tags (строка над плеером) ───
+$player-tags-chip-bg: $color-zinc-800;
+$player-tags-tag-bg: $color-zinc-800-50;
+$player-tags-more-text: $color-zinc-400;
+$player-tags-more-text--hover: $color-white;

package/assets/scss/themes/light/_theme.scss

@@ -295,6 +295,7 @@ $video-menu-preview-border: transparent;
 // ─── Video info ───
 $video-info-item-text: $color-gray-400;
 $video-info-handler-text: $color-gray-400;
+$video-info-handler-text--hover: $color-gray-900;
 $video-info-description-text: $color-gray-700;
 
 // ─── Video interface ───
@@ -1198,3 +1199,9 @@ $switcher-subtitle--active: $color-white-60;
 $card-webcam-languages-border: $color-gray-300;
 $card-webcam-languages-fallback-bg: $color-gray-200;
 $card-webcam-languages-fallback-icon: $color-gray-600;
+
+// ─── Player tags (строка над плеером) ───
+$player-tags-chip-bg: $color-gray-200;
+$player-tags-tag-bg: $color-gray-100;
+$player-tags-more-text: $color-gray-700;
+$player-tags-more-text--hover: $color-gray-900;

package/components/card/video/index.vue

@@ -13,6 +13,7 @@
   >
     <NuxtLink
       :to="link"
+      :class="linkClass"
       class="card-video__poster-wrapper"
       @mouseenter.passive="startPreviewByHover(previewId)"
       @mouseleave.passive="stopPreviewByHover(previewId)"
@@ -91,6 +92,7 @@
       <NuxtLink
         :to="link"
         :title="card.title"
+        :class="linkClass"
         class="card-video__title _truncate"
       >{{ card.title }}
       </NuxtLink>
@@ -153,6 +155,8 @@ const props = defineProps<{
   history?: boolean
   /** Развилка мета-строки истории: вместо «когда смотрели» — сколько осталось до конца («Продолжить просмотр») */
   remaining?: boolean
+  /** Класс на ссылки на ролик (превью и тайтл) — например хук попандера сайта, чтобы меню и кнопки карточки его не задевали */
+  linkClass?: string
 }>();
 
 const emit = defineEmits<{

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/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/package.json

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