itube-specs 0.0.927 → 0.0.929

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

@@ -224,6 +224,15 @@ $video-card-action-active-icon--hover: $color-white;
 $video-card-dropdown-border: $color-zinc-800;
 $video-card-dropdown-size--hover: 1;
 
+// ─── Video card tags (ряд плашек моделей и поповер «ещё») ───
+$video-card-tags-more-bg: $color-zinc-800-80;
+$video-card-tags-more-bg--hover: $color-zinc-700;
+$video-card-tags-more-text: $color-zinc-300;
+$video-card-tags-more-text--hover: $color-white;
+$video-card-tags-popover-bg: $color-zinc-900;
+$video-card-tags-popover-border: $color-zinc-800;
+$video-card-tags-popover-shadow: 0 10px 15px -3px #{$mono-black-25}, 0 4px 6px -4px #{$mono-black-25};
+
 // ─── Video info ───
 $video-info-item-text: $color-zinc-500-70;
 $video-info-handler-text: $color-zinc-400;

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

@@ -281,6 +281,15 @@ $video-card-action-active-icon--hover: $color-white;
 // ─── Video card dropdown ───
 $video-card-dropdown-border: transparent;
 
+// ─── Video card tags (ряд плашек моделей и поповер «ещё») ───
+$video-card-tags-more-bg: $color-gray-300;
+$video-card-tags-more-bg--hover: $color-gray-400;
+$video-card-tags-more-text: $color-gray-700;
+$video-card-tags-more-text--hover: $color-gray-900;
+$video-card-tags-popover-bg: $color-white;
+$video-card-tags-popover-border: $color-gray-300;
+$video-card-tags-popover-shadow: 0 10px 15px -3px #{$mono-black-25}, 0 4px 6px -4px #{$mono-black-25};
+
 // ─── Video info ───
 $video-info-item-text: $color-gray-400;
 $video-info-handler-text: $color-gray-400;

package/components/card/video/index.vue

@@ -8,6 +8,7 @@
       {'--no-channel': isChannelPage},
       {'--progress': hasProgress},
       {'--favorite': isFavoriteCard},
+      {'--tags-open': isTagsOpen},
     ]"
     class="card-video"
   >
@@ -131,11 +132,15 @@
       </p>
       <div
         v-if="!mini && !compact && !history && cardTags && cardTags.length > 0"
+        ref="tagsRef"
         class="card-video__tags"
       >
-        <div class="card-video__tags-wrapper">
+        <div
+          class="card-video__tags-wrapper"
+          @click="isTagsOpen = false"
+        >
           <UiChips
-            v-for="(item, index) in cardTags?.slice(0, 4)"
+            v-for="(item, index) in cardTags"
             micro
             :key="`${card.guid}-tag-${index}`"
             :item="item"
@@ -143,6 +148,14 @@
             is-link
           />
         </div>
+        <button
+          v-if="hasMoreTags"
+          :aria-label="t('show_all_models')"
+          :aria-expanded="isTagsOpen"
+          class="card-video__tags-more"
+          type="button"
+          @click="isTagsOpen = !isTagsOpen"
+        >+</button>
       </div>
       <CardDropdownTrigger
         :card="card"
@@ -161,9 +174,13 @@
 
 <script setup lang="ts">
 import type { IVideoCard } from '../../../types';
+import { onClickOutside } from '@vueuse/core';
 import { convertString, getDuration } from '../../../runtime';
 import { CSS_BREAKPOINTS } from '../../../config/css-breakpoints';
 
+/** Потолок плашек в разметке: ряд скроллится, но неограниченный список раздувает DOM всей сетки */
+const TAGS_LIMIT = 8;
+
 const featureFlags = useRuntimeConfig().public.featureFlags;
 
 const props = defineProps<{
@@ -280,7 +297,16 @@ const cardTags = computed(() => {
       searchRank(a) - searchRank(b) || a.localeCompare(b)
   );
 
-  return sortModels?.map(item => convertString().toChips(item, 'models'));
+  return sortModels.slice(0, TAGS_LIMIT).map(item => convertString().toChips(item, 'models'));
+});
+
+const tagsRef = ref();
+const isTagsOpen = ref(false);
+
+const hasMoreTags = computed(() => cardTags.value.length > 1);
+
+onClickOutside(tagsRef, () => {
+  isTagsOpen.value = false;
 });
 </script>
 
@@ -288,6 +314,7 @@ const cardTags = computed(() => {
 $inset-label: 8px;
 $layout-breakpoint: 250px;
 $progress-height: 4px;
+$tags-fade: 40px;
 
 // Колонка под меню карточки фиксирована, а не auto: иначе ширина зависит от того, отрисовано меню
 // или нет, и в момент подмены кнопки заголовок дёргается
@@ -590,10 +617,36 @@ $dropdown-column: 18px;
   aspect-ratio: 16/9;
 }
 
+@property --card-video-tags-fade {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0;
+}
+
+/* Затемнение гаснет на последних 15% прокрутки — доехал до конца, подсказывать больше нечего */
+@keyframes card-video-tags-fade {
+  0%,
+  85% {
+    --card-video-tags-fade: #{$tags-fade};
+  }
+
+  100% {
+    --card-video-tags-fade: 0px;
+  }
+}
+
+@keyframes card-video-tags-more {
+  0%,
+  100% {
+    visibility: visible;
+  }
+}
+
 .card-video__tags {
-  align-items: center;
-  gap: 8px;
+  position: relative;
   grid-column: 1;
+  min-height: var(--chips-height-micro);
+  timeline-scope: --card-video-tags;
 
   @include from-cq($layout-breakpoint) {
     grid-column: 2;
@@ -602,11 +655,87 @@ $dropdown-column: 18px;
 }
 
 .card-video__tags-wrapper {
-  max-height: calc( var(--chips-height-micro) * 2 + 8px);
-  overflow: hidden;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  align-items: center;
   gap: 8px;
+  min-width: 0;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.card-video__tags-more {
+  @include font-xs;
+
+  position: absolute;
+  inset-block: 0;
+  right: 0;
+  z-index: $z-index-dropdown;
+  display: grid;
+  place-content: center;
+  padding-inline: 8px;
+  visibility: hidden;
+  color: $video-card-tags-more-text;
+  background-color: $video-card-tags-more-bg;
+  border-radius: $radius-6;
+
+  @include hover(background-color, color) {
+    background-color: $video-card-tags-more-bg--hover;
+    color: $video-card-tags-more-text--hover;
+  }
+
+  @include to-br(sm) {
+    display: none;
+  }
+}
+
+/* Влезли плашки в ряд или нет, решает сам браузер: у непрокручиваемого контейнера scroll-таймлайн
+   неактивен, анимации не применяются — ни затемнения, ни кнопки. Без замеров и без JS, то есть
+   ещё до гидрации. Где scroll() не поддержан — ряд просто обрезается по краю. */
+@supports (animation-timeline: scroll()) {
+  .card-video__tags-wrapper {
+    scroll-timeline: --card-video-tags inline;
+    animation: card-video-tags-fade linear both;
+    animation-timeline: --card-video-tags;
+    mask-image: linear-gradient(to right, currentcolor calc(100% - var(--card-video-tags-fade)), transparent);
+  }
+
+  .card-video__tags-more {
+    animation: card-video-tags-more linear both;
+    animation-timeline: --card-video-tags;
+  }
+}
+
+/* Раскрытый список — тот же DOM: ряд перестаёт быть скроллом и разворачивается поповером поверх */
+.--tags-open .card-video__tags-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $z-index-dropdown;
+  flex-wrap: wrap;
+  width: max-content;
+  max-width: 100%;
+  padding: 8px $tags-fade 8px 8px;
+  overflow: visible;
+  background-color: $video-card-tags-popover-bg;
+  border: 1px solid $video-card-tags-popover-border;
+  border-radius: $radius-md;
+  box-shadow: $video-card-tags-popover-shadow;
+  mask-image: none;
+}
+
+.--tags-open .card-video__tags-more {
+  visibility: visible;
+}
+
+/* Карточка — свой контекст наложения из-за container-type, поповер иначе уйдёт под соседнюю */
+.card-video.--tags-open {
+  z-index: $z-index-dropdown;
 }
 
 .card-video__user {

package/components/player/core.vue

@@ -191,7 +191,12 @@ const currentSource = computed<VideoSource>(() => {
     thumbnails: props.data.vttUrl,
     // Главы: плеер сам рисует кнопку сцен, подписи и превью из VTT.
     // ITimestamp.duration — момент старта главы (секунды).
-    chapters: props.data.actions?.map((ts) => ({ start: ts.duration, title: ts.title })),
+    // `end_duration` бекенд отдаёт не всегда — без него плеер досчитывает конец сам
+    chapters: props.data.actions?.map((ts) => ({
+      start: ts.duration,
+      ...(Number(ts.end_duration) > ts.duration ? { end: Number(ts.end_duration) } : {}),
+      title: ts.title,
+    })),
     // timelines_groups → sceneGroups и hotspots → heatmap (маппинг выше).
     sceneGroups: sceneGroups.value,
     heatmap: heatmap.value,

package/package.json

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

package/runtime/utils/cleaners/__tests__/clean-video-data.test.ts

@@ -39,6 +39,71 @@ describe('cleanVideoData', () => {
     expect(result.thumbNum).toBe(5);
   });
 
+  it('таймлайны: конец периода из бекендного end_duration', () => {
+    // форма как на бою: у первой сцены группы `locations` старта нет вовсе — это ноль
+    const raw = {
+      timelines_groups: [
+        {
+          name: 'actions',
+          title: 'Scenes',
+          actions: [
+            { title: 'oral', duration: 75, end_duration: 140 },
+            { title: 'anal', duration: 264, end_duration: 464 },
+          ],
+        },
+        {
+          name: 'locations',
+          title: 'locations',
+          actions: [
+            { title: 'bedroom', end_duration: 200 },
+            { title: 'living_room', duration: 200, end_duration: 479 },
+          ],
+        },
+      ],
+    };
+
+    expect(cleanVideoData(raw as any).timelinesGroups).toEqual([
+      {
+        id: 'actions',
+        title: 'Scenes',
+        scenes: [
+          { start: 75, end: 140, title: 'Oral' },
+          { start: 264, end: 464, title: 'Anal' },
+        ],
+      },
+      {
+        id: 'locations',
+        title: 'Locations',
+        scenes: [
+          { start: 0, end: 200, title: 'Bedroom' },
+          { start: 200, end: 479, title: 'Living room' },
+        ],
+      },
+    ]);
+  });
+
+  it('таймлайны: битый или отсутствующий конец периода не пробрасываем', () => {
+    const raw = {
+      timelines_groups: [
+        {
+          name: 'actions',
+          title: 'Scenes',
+          actions: [
+            { title: 'oral', duration: 75 },
+            { title: 'anal', duration: 264, end_duration: 100 },
+            { title: 'kiss', duration: 300, end_duration: 300 },
+          ],
+        },
+      ],
+    };
+
+    expect(cleanVideoData(raw as any).timelinesGroups?.[0].scenes).toEqual([
+      { start: 75, title: 'Oral' },
+      { start: 264, title: 'Anal' },
+      { start: 300, title: 'Kiss' },
+    ]);
+  });
+
   it('пустые данные → дефолты', () => {
     const result = cleanVideoData({} as any);
     expect(result.guid).toBe('');

package/runtime/utils/cleaners/clean-video-data.ts

@@ -6,7 +6,11 @@ const humanize = (value?: string | null): string => {
   return text ? text.charAt(0).toUpperCase() + text.slice(1) : text;
 };
 
-// timelines_groups ({ name, actions:[{ duration?, title }] }) → sceneGroups ({ id, title, scenes:[{ start, title }] }).
+// timelines_groups ({ name, actions:[{ duration?, end_duration?, title }] }) →
+// sceneGroups ({ id, title, scenes:[{ start, end?, title }] }). `end` — бекендный конец
+// периода: из него плеер строит «0:00 – 1:54» в меню тайм-кодов (опция
+// `controls.sceneTimes`), а без него досчитывает конец по старту следующей сцены.
+// Мусор не пропускаем: конец раньше старта плееру не нужен.
 const cleanTimelineGroups = (raw: ITimelineGroup[] | null): ISceneGroup[] | null => {
   if (!Array.isArray(raw)) return null;
 
@@ -17,10 +21,16 @@ const cleanTimelineGroups = (raw: ITimelineGroup[] | null): ISceneGroup[] | null
       title: humanize(group.title),
       scenes: group.actions
         .filter((action) => action?.title)
-        .map((action) => ({
-          start: Number(action.duration) || 0,
-          title: humanize(action.title),
-        })),
+        .map((action) => {
+          const start = Number(action.duration) || 0;
+          const end = Number(action.end_duration) || 0;
+
+          return {
+            start,
+            ...(end > start ? { end } : {}),
+            title: humanize(action.title),
+          };
+        }),
     }))
     .filter((group) => group.scenes.length > 0);
 

package/types/video-data.d.ts

@@ -2,12 +2,16 @@ import type { IThumbUrls } from '~/types/thumbs-urls';
 
 export interface ITimestamp {
   duration: number;
+  /** Конец периода в секундах — бекендное `end_duration`, если он его отдал. */
+  end_duration?: number;
   title: string;
 }
 
 // Сырые группы таймлайна, как приходят с бека.
 export interface ITimelineGroupAction {
   duration?: number;
+  /** Конец периода в секундах. Бекенд отдаёт его не у каждой сцены. */
+  end_duration?: number;
   title: string;
 }
 
@@ -20,6 +24,8 @@ export interface ITimelineGroup {
 // Очищенная форма: id (сырое имя, для иконок), человекочитаемый title, сцены со start.
 export interface ISceneGroupScene {
   start: number;
+  /** Конец сцены: плеер строит из него период «0:00 – 1:54» в меню тайм-кодов. */
+  end?: number;
   title: string;
 }