itube-specs 0.0.878 → 0.0.884

package/assets/icons/common/trash-bin.svg

@@ -1 +1 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>

package/assets/scss/mixins/_button.scss

@@ -13,7 +13,6 @@ $button-variants: (
     'border': $button-primary-border,
     'border--hover': $button-primary-border,
     'border--active': $button-primary-border,
-    'icon': $button-primary-text,
   ),
   secondary: (
     'bg': $button-secondary-bg,
@@ -24,7 +23,6 @@ $button-variants: (
     'border': $button-secondary-border,
     'border--hover': $button-secondary-border,
     'border--active': $button-secondary-border--active,
-    'icon': $button-secondary-icon,
   ),
   muted: (
     'bg': $button-muted-bg,
@@ -35,7 +33,6 @@ $button-variants: (
     'border': $button-muted-border,
     'border--hover': $button-muted-border--hover,
     'border--active': $button-muted-border,
-    'icon': $button-muted-text,
   ),
   warning: (
     'bg': $button-warning-bg,
@@ -46,7 +43,6 @@ $button-variants: (
     'border': $button-warning-border,
     'border--hover': $button-warning-border,
     'border--active': $button-warning-border,
-    'icon': $button-warning-text,
   ),
 );
 

package/assets/scss/mixins/_surface.scss

@@ -32,8 +32,8 @@
 // А вот опечатка в @include surface(...) иначе прошла бы молча, отсюда список.
 $surface-names: (overlay,);
 $surface-roles: (
-  text: (--video-mini-card-title, --radio-text, --checkbox-text),
-  text-muted: (--video-mini-card-channel, --video-mini-card-duration),
+  text: (--video-mini-card-title, --radio-text, --checkbox-text, --page-history-confirm-text),
+  text-muted: (--video-mini-card-channel, --video-mini-card-duration, --page-history-confirm-muted),
   control-bg: (--input-bg, --select-bg),
   control-compact-bg: (--input-s-bg,),
   control-bg--disabled: (--input-bg--disabled,),

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

@@ -204,7 +204,24 @@ $video-card-mini-title: $color-zinc-300;
 $video-card-mini-weight: 400;
 $video-card-user-text: $color-zinc-400;
 $video-card-user-bg: $color-zinc-700;
-$video-card-preview-loader-bg: linear-gradient(to right, $color-indigo-muted, $color-indigo-deep);
+$card-preview-loader-bg: linear-gradient(to right, $color-indigo-muted, $color-indigo-deep);
+
+// ─── History card ───
+$history-card-bg: $color-zinc-900-40;
+$history-card-wrapper-bg: $color-zinc-900-60;
+$history-card-border: $color-zinc-800;
+$history-card-border--hover: $color-zinc-700;
+$history-card-poster-border: $color-zinc-700-50;
+$history-card-title: $color-white;
+$history-card-title--hover: $color-indigo-400;
+$history-card-secondary: $color-zinc-500;
+$history-card-user-text: $color-zinc-400;
+$history-card-user-bg: $color-zinc-700;
+$history-card-dropdown-icon: $color-zinc-500;
+$history-card-dropdown-icon--hover: $color-white;
+$history-card-progress-bg: $mono-white-50;
+$history-card-progress-fill: $color-indigo-500;
+$history-card-remaining: $color-indigo-400;
 
 // ─── Video card dropdown ───
 $video-card-dropdown-border: $color-zinc-800;
@@ -453,7 +470,6 @@ $button-secondary-text: $color-zinc-400;
 $button-secondary-text--active: $color-white;
 $button-secondary-border: $color-zinc-700-50;
 $button-secondary-border--active: $color-indigo-500;
-$button-secondary-icon: $color-indigo-600;
 $button-muted-bg: $color-zinc-800;
 $button-muted-text: $color-zinc-300;
 $button-muted-bg--hover: $color-zinc-700;
@@ -707,7 +723,6 @@ $filters-main-slider-border: $color-zinc-800;
 $filters-main-select-border--active: $color-indigo-500-50;
 $filters-main-select-bg--active: $color-indigo-600-20;
 $filters-main-select-text--active: $color-indigo-300;
-$filters-main-select-icon: $color-zinc-400;
 $filters-main-slider-content-bg: $color-zinc-900;
 $filters-main-bg--hover: $color-zinc-700-70;
 
@@ -932,6 +947,39 @@ $page-channels-border: $color-zinc-800;
 // ─── Page: channel ───
 $page-channel-border: $color-zinc-800;
 
+// ─── Library item (карточка-ссылка) ───
+$library-item-bg: $color-zinc-900-40;
+$library-item-bg--hover: $color-zinc-900;
+$library-item-border: $color-zinc-800;
+$library-item-border--hover: $color-indigo-500-50;
+$library-item-icon: $color-indigo-400;
+$library-item-icon-bg: $color-indigo-500-10;
+$library-item-icon-bg--hover: $color-indigo-500-20;
+$library-item-icon-border: $color-indigo-500-20;
+$library-item-icon-border--hover: $color-indigo-500-40;
+$library-item-title: $color-white;
+$library-item-title--hover: $color-indigo-400;
+$library-item-subtitle: $color-zinc-500;
+$library-item-badge-bg: $color-indigo-600-90;
+$library-item-badge-text: $color-white;
+$library-item-badge-bordered-border: $color-zinc-600;
+$library-item-badge-bordered-text: $color-zinc-400;
+
+// ─── Page: library ───
+$page-library-heading: $color-white;
+$page-library-heading-icon: $color-white;
+$page-library-heading-icon-bg: $mono-white-10;
+$page-library-toggle-text: $color-zinc-300;
+
+// ─── Page: history ───
+$page-history-group-title: $color-zinc-300;
+$page-history-group-icon: $color-zinc-500;
+$page-history-group-count: $color-zinc-500;
+$page-history-confirm-text: $color-zinc-300;
+$page-history-confirm-muted: $color-zinc-500;
+$page-history-confirm-link: $color-indigo-400;
+$page-history-confirm-link--hover: $color-indigo-300;
+
 // ─── Document ───
 $document-header-border: $color-zinc-700;
 $document-section-bg: $color-night;

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

@@ -261,9 +261,26 @@ $video-card-mini-title: $color-gray-900;
 $video-card-mini-weight: 500;
 $video-card-user-text: $color-gray-700;
 $video-card-user-bg: $color-gray-300;
-$video-card-preview-loader-bg: linear-gradient(to right, $color-indigo-muted, $color-indigo-deep);
+$card-preview-loader-bg: linear-gradient(to right, $color-indigo-muted, $color-indigo-deep);
 $video-card-dropdown-size--hover: 1.25;
 
+// ─── History card ───
+$history-card-bg: $color-gray-100;
+$history-card-wrapper-bg: $color-gray-100;
+$history-card-border: transparent;
+$history-card-border--hover: transparent;
+$history-card-poster-border: transparent;
+$history-card-title: $color-gray-900;
+$history-card-title--hover: $color-gray-900;
+$history-card-secondary: $color-gray-600;
+$history-card-user-text: $color-gray-700;
+$history-card-user-bg: $color-gray-300;
+$history-card-dropdown-icon: $color-gray-600;
+$history-card-dropdown-icon--hover: $color-gray-900;
+$history-card-progress-bg: $color-gray-300;
+$history-card-progress-fill: $color-indigo-500;
+$history-card-remaining: $color-indigo-600;
+
 // ─── Video card dropdown ───
 $video-card-dropdown-border: transparent;
 
@@ -510,7 +527,6 @@ $button-secondary-text: $color-gray-700;
 $button-secondary-text--active: $color-white;
 $button-secondary-border: transparent;
 $button-secondary-border--active: $color-indigo-soft;
-$button-secondary-icon: $color-gray-700;
 $button-muted-bg: transparent;
 $button-muted-text: $color-gray-300;
 $button-muted-bg--hover: $color-slate-750;
@@ -737,7 +753,6 @@ $filters-main-slider-border: transparent;
 $filters-main-select-border--active: $color-indigo-500-50;
 $filters-main-select-bg--active: $color-gray-300;
 $filters-main-select-text--active: $color-gray-700;
-$filters-main-select-icon: $color-gray-700;
 $filters-main-slider-content-bg: $color-slate-800;
 $filters-main-bg--hover: $button-secondary-bg--hover;
 
@@ -962,6 +977,39 @@ $page-channels-border: transparent;
 // ─── Page: channel ───
 $page-channel-border: transparent;
 
+// ─── Library item (карточка-ссылка) ───
+$library-item-bg: $color-gray-100;
+$library-item-bg--hover: $color-gray-200;
+$library-item-border: transparent;
+$library-item-border--hover: $color-indigo-500-50;
+$library-item-icon: $color-indigo-600;
+$library-item-icon-bg: $color-indigo-500-10;
+$library-item-icon-bg--hover: $color-indigo-500-20;
+$library-item-icon-border: transparent;
+$library-item-icon-border--hover: transparent;
+$library-item-title: $color-gray-900;
+$library-item-title--hover: $color-indigo-600;
+$library-item-subtitle: $color-gray-500;
+$library-item-badge-bg: $color-indigo-600;
+$library-item-badge-text: $color-white;
+$library-item-badge-bordered-border: $color-gray-300;
+$library-item-badge-bordered-text: $color-gray-600;
+
+// ─── Page: library ───
+$page-library-heading: $color-gray-900;
+$page-library-heading-icon: $color-gray-900;
+$page-library-heading-icon-bg: $color-gray-200;
+$page-library-toggle-text: $color-gray-700;
+
+// ─── Page: history ───
+$page-history-group-title: $color-gray-900;
+$page-history-group-icon: $color-gray-500;
+$page-history-group-count: $color-gray-500;
+$page-history-confirm-text: $color-gray-900;
+$page-history-confirm-muted: $color-gray-500;
+$page-history-confirm-link: $color-indigo-400;
+$page-history-confirm-link--hover: $color-indigo-300;
+
 // ─── Document ───
 $document-header-border: $color-gray-300;
 $document-section-bg: $color-gray-200;

package/assets/scss/vars/_palette.scss

@@ -5,7 +5,9 @@ $color-zinc-950-0: lab(2.51107% .242703 -.886115 / 0%); // zinc-950 / 0%
 $color-zinc-950-75: lab(2.51107% .242703 -.886115 / 75%); // zinc-950 / 75%
 $color-zinc-950-90: lab(2.51107% .242703 -.886115 / 90%); // zinc-950 / 90%
 $color-zinc-900: lab(8.30603% .618205 -2.16572); // #18181b
+$color-zinc-900-60: lab(8.30603% .618205 -2.16572 / 60%); // zinc-900 / 60%
 $color-zinc-900-50: lab(8.30603% .618205 -2.16572 / 50%); // #18181b
+$color-zinc-900-40: lab(8.30603% .618205 -2.16572 / 40%); // zinc-900 / 40%
 $color-zinc-900-95: lab(8.30603% .618205 -2.16572 / 95%); // #18181b
 $color-zinc-900-98: lab(8.30603% .618205 -2.16572 / 98%); // #18181b
 $color-zinc-850: lab(11.9084% 1.043 -2.7081); // #1f1f23
@@ -50,9 +52,12 @@ $color-indigo-300: lab(74.0235% 8.54138 -41.6075); // #a4b3ff
 $color-indigo-400: lab(59.866% 22.4834 -64.4485); // #7d87ff
 $color-indigo-500: lab(48.295% 38.3129 -81.9673); // #625fff
 $color-indigo-500-10: lab(48.295% 38.3129 -81.9673 / 10%);
+$color-indigo-500-20: lab(48.295% 38.3129 -81.9673 / 20%);
+$color-indigo-500-40: lab(48.295% 38.3129 -81.9673 / 40%);
 $color-indigo-500-50: lab(48.295% 38.3129 -81.9673 / 50%);
 $color-indigo-600: lab(38.4009% 52.6132 -92.3857); // #4f39f6
 $color-indigo-600-20: lab(38.4009% 52.6132 -92.3857 / 20%);
+$color-indigo-600-90: lab(38.4009% 52.6132 -92.3857 / 90%);
 $color-indigo-700: lab(32.4486% 49.2217 -84.6695); // #432dd7
 $color-indigo-800: lab(26.6645% 37.9804 -68.6402); // #372aac
 $color-indigo-900: lab(23.3911% 24.6978 -50.4718); // #312c85

package/components/card/history.vue

@@ -0,0 +1,371 @@
+<!-- Карточка истории просмотров: постер с полосой прогресса, канал и время последнего просмотра -->
+<template>
+  <div class="card-history">
+    <NuxtLink
+      :to="link"
+      class="card-history__poster-wrapper"
+      @mouseenter.passive="startPreviewByHover(previewId)"
+      @mouseleave.passive="stopPreviewByHover(previewId)"
+      @touchstart.passive="startPreviewByTouch(previewId)"
+    >
+      <UiImg
+        :src="currentPoster"
+        :urls="card.thumbUrls"
+        :loading="loading"
+        :priority="priority"
+        :sizes="`(max-width: ${CSS_BREAKPOINTS.lg}px) 180px, 480px`"
+        :alt="card.title"
+        class="card-history__poster"
+        width="480"
+        height="270"
+        @error="posterError = true"
+      />
+      <CardPreview
+        v-if="isPreviewShow && card.previewUrl"
+        :url="card.previewUrl"
+      />
+      <UiLabel
+        v-if="card.quality"
+        :text="`${card.quality}p`"
+        class="card-history__resolution"
+        theme="yellow"
+      />
+      <UiLabel
+        v-if="card.duration"
+        :text="duration"
+        class="card-history__duration"
+        theme="black"
+      />
+      <span
+        :style="{ '--card-history-progress': `${progress}%` }"
+        :aria-label="t('watched_percent', { percent: progress })"
+        :aria-valuenow="progress"
+        class="card-history__progress"
+        role="progressbar"
+        aria-valuemin="0"
+        aria-valuemax="100"
+      />
+    </NuxtLink>
+
+    <div class="card-history__wrapper">
+      <component
+        :is="channelComponent"
+        :to="channelLink"
+        class="card-history__logo-wrapper"
+      >
+        <UiImg
+          v-if="card.channelAvatar"
+          :src="card.channelAvatar"
+          :alt="card.channelName"
+          :loading="loading"
+          class="card-history__channel-logo"
+          width="32"
+          height="32"
+          sizes="32px"
+        />
+        <span
+          v-else
+          class="card-history__user"
+        >U</span>
+      </component>
+
+      <NuxtLink
+        :to="link"
+        :title="card.title"
+        class="card-history__title _truncate"
+      >{{ card.title }}
+      </NuxtLink>
+
+      <p class="card-history__meta">
+        <NuxtLink
+          v-if="card.channelName"
+          :to="channelLink"
+          class="card-history__channel _truncate"
+        >{{ card.channelName }}</NuxtLink>
+        <span
+          :class="{'--remaining': remaining}"
+          class="card-history__watched"
+        >
+          <UiIcon
+            name="clock"
+            size="12"
+          />
+          {{ remaining ? remainingText : watchedAgo }}
+        </span>
+      </p>
+
+      <LazyCardVideoDropdown
+        v-if="dropdownMounted"
+        :card="videoCard"
+        class="card-history__dropdown"
+        show-remove
+        show-share
+        auto-open
+        @share="emit('share', videoCard)"
+        @remove="emit('remove', card)"
+      />
+      <button
+        v-else
+        :aria-label="t('open_menu')"
+        class="card-history__dropdown card-video-dropdown__trigger"
+        type="button"
+        @click="dropdownMounted = true"
+      >
+        <UiIcon
+          name="dots-vertical"
+          size="18"
+        />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HistoryStubCard } from '../../stubs/history';
+import type { IVideoCard } from '../../types';
+import { convertString, getDuration } from '../../runtime';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
+
+const props = defineProps<{
+  card: HistoryStubCard
+  loading?: 'eager' | 'lazy'
+  priority?: boolean
+  /** Развилка мета-строки: вместо «когда смотрели» — сколько осталось до конца («Продолжить просмотр») */
+  remaining?: boolean
+}>();
+
+const emit = defineEmits<{
+  (e: 'remove', card: HistoryStubCard): void
+  (e: 'share', card: IVideoCard): void
+}>();
+
+const { t, locale } = useI18n();
+
+const { generateLink } = useGenerateLink();
+
+const NuxtLinkComponent = resolveComponent('NuxtLink');
+
+const channelComponent = computed(() => props.card.channelName ? NuxtLinkComponent : 'span');
+
+const posterError = ref(false);
+
+const currentPoster = computed(() => {
+  if (posterError.value || !props.card.thumbUrls) return '/img/placeholder.webp';
+  return undefined;
+});
+
+const previewId = useId();
+const { activePreviewId, startPreviewByHover, stopPreviewByHover, startPreviewByTouch } = useVideoPreview();
+
+const isPreviewShow = computed(() => activePreviewId.value === previewId);
+
+const duration = computed(() => getDuration(props.card.duration));
+
+const progress = computed(() => Math.min(100, Math.max(0, Math.round(props.card.progress))));
+
+const watchedAgo = computed(() => useFormatTimeAgo(props.card.watchedAt, locale.value, true));
+
+const remainingText = computed(() => {
+  const left = Math.ceil((props.card.duration * (100 - progress.value)) / 100 / 60);
+  return t('minutes_left', { count: Math.max(left, 1) });
+});
+
+const link = computed(() => generateLink(`/videos/${props.card.id}`));
+
+const channelLink = computed(() => props.card.channelName
+  ? generateLink(`/channels/${convertString().toSlug(props.card.channelName)}`)
+  : undefined);
+
+/** Дропдаун и репорт работают с обычной карточкой видео — переиспользуем её контракт. */
+const videoCard = computed<IVideoCard>(() => ({
+  guid: props.card.guid,
+  id: props.card.id,
+  title: props.card.title,
+  duration: props.card.duration,
+  quality: props.card.quality,
+  channelName: props.card.channelName,
+  channelAvatar: props.card.channelAvatar,
+  thumbUrls: props.card.thumbUrls,
+}));
+
+const dropdownMounted = ref(false);
+</script>
+
+<style lang="scss">
+$inset-label: 8px;
+$progress-height: 4px;
+
+.card-history {
+  @include video-card;
+
+  row-gap: 0;
+  background-color: $history-card-bg;
+  border: 1px solid $history-card-border;
+  border-radius: $radius-xl;
+
+  @include to-br(xs) {
+    touch-action: manipulation;
+  }
+
+  @include hover(border-color, box-shadow) {
+    border-color: $history-card-border--hover;
+    box-shadow: $card-ring-shadow--hover;
+  }
+}
+
+.card-history__poster-wrapper {
+  @include video-card-poster;
+
+  border-radius: calc($radius-xl - 1px) calc($radius-xl - 1px) 0 0;
+  border-bottom: 1px solid $history-card-poster-border;
+}
+
+.card-history__poster {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  aspect-ratio: 16/9;
+}
+
+.card-history__duration,
+.card-history__resolution {
+  position: absolute;
+}
+
+.card-history__resolution {
+  top: $inset-label;
+  right: $inset-label;
+}
+
+.card-history__duration {
+  bottom: $inset-label + $progress-height;
+  left: $inset-label;
+}
+
+.card-history__progress {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: $progress-height;
+  background-color: $history-card-progress-bg;
+
+  &::after {
+    content: '';
+    display: block;
+    width: var(--card-history-progress, 0%);
+    height: 100%;
+    background-color: $history-card-progress-fill;
+  }
+}
+
+.card-history__wrapper {
+  display: grid;
+  column-gap: 8px;
+  grid-template-columns: 32px 1fr auto;
+  align-items: start;
+  padding: 12px;
+  color: $history-card-secondary;
+  background-color: $history-card-wrapper-bg;
+  border-radius: 0 0 calc($radius-xl - 1px) calc($radius-xl - 1px);
+}
+
+.card-history__logo-wrapper {
+  grid-row: 1/3;
+  grid-column: 1;
+}
+
+.card-history__channel-logo {
+  border-radius: $radius-full;
+}
+
+.card-history__user {
+  @include font-xs;
+
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-content: center;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: $history-card-user-text;
+  background-color: $history-card-user-bg;
+  border-radius: $radius-full;
+}
+
+.card-history__title {
+  @include font-sm;
+
+  --line-clamp: 2;
+
+  grid-row: 1;
+  grid-column: 2;
+  color: $history-card-title;
+
+  @include hover(color) {
+    color: $history-card-title--hover;
+  }
+}
+
+.card-history__meta {
+  @include font-xs;
+
+  display: flex;
+  align-items: center;
+  grid-row: 2;
+  grid-column: 2;
+  margin-top: 6px;
+  font-weight: 400;
+  color: $history-card-secondary;
+}
+
+.card-history__channel {
+  color: $history-card-secondary;
+}
+
+.card-history__channel + .card-history__watched::before {
+  content: '·';
+  margin-inline: 6px;
+}
+
+.card-history__watched {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  flex-shrink: 0;
+}
+
+.card-history__watched.--remaining {
+  color: $history-card-remaining;
+}
+
+.card-history__dropdown {
+  grid-row: 1/3;
+  grid-column: 3;
+  align-self: start;
+  color: $history-card-dropdown-icon;
+
+  @include hover(color) {
+    color: $history-card-dropdown-icon--hover;
+  }
+}
+
+@include to-br(xs) {
+  .card-history__logo-wrapper {
+    display: none;
+  }
+
+  .card-history__wrapper {
+    grid-template-columns: 1fr auto;
+  }
+
+  .card-history__title,
+  .card-history__meta {
+    grid-column: 1;
+  }
+
+  .card-history__dropdown {
+    grid-column: 2;
+  }
+}
+</style>

package/components/card/playlist.vue

@@ -141,7 +141,7 @@
               <button
                 :class="className"
                 type="button"
-                @click="isShareOpen = true"
+                @click="emit('share', card)"
               >
                 <UiIcon
                   name="share"
@@ -160,15 +160,6 @@
         {{ card.searchTags.join(' · ')}}
       </p>
     </div>
-
-    <ShareMain
-      v-model="isShareOpen"
-      :url="link"
-    >
-      <template #card>
-        <CardPlaylistMini :card="card" />
-      </template>
-    </ShareMain>
   </div>
 </template>
 
@@ -184,12 +175,14 @@ const props = defineProps<{
   priority?: boolean
 }>();
 
+const emit = defineEmits<{
+  (e: 'share', card: IPlaylistCard): void
+}>();
+
 const { t } = useI18n();
 
 const { generateLink } = useGenerateLink();
 
-const isShareOpen = ref(false);
-
 const userProfileData = computed(() => useState<IProfileData>('profileData').value);
 
 const { isAuthorized } = useUser(AuthorizationApiService);