itube-specs 0.0.877 → 0.0.881

package/assets/icons/common/history.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M12 7v5l4 2"></path></svg>

package/assets/icons/common/library.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path><path d="M9 4m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path><path d="M5 8h4"></path><path d="M9 16h4"></path><path d="M13.803 4.56l2.184 -.53c.562 -.135 1.133 .19 1.282 .732l3.695 13.418a1.02 1.02 0 0 1 -.634 1.219l-.133 .041l-2.184 .53c-.562 .135 -1.133 -.19 -1.282 -.732l-3.695 -13.418a1.02 1.02 0 0 1 .634 -1.219l.133 -.041z"></path><path d="M14 9l4 -1"></path><path d="M16 16l3.923 -.98"></path></svg>

package/assets/icons/common/playlist.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 12H3"></path><path d="M16 6H3"></path><path d="M12 18H3"></path><path d="m16 12 5 3-5 3v-6Z"></path></svg>

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/base/_hacks.scss

@@ -15,9 +15,7 @@ select:-webkit-autofill:focus {
   box-shadow: 0 0 0 1000px transparent inset !important;
   -webkit-text-fill-color: var(--input-autofill-text, #{$input-autofill-text}) !important;
   color: var(--input-autofill-text, #{$input-autofill-text}) !important;
-  border: none !important;
   transition: background-color 5000s ease-in-out 0s !important;
-  font-size: inherit !important;
 }
 
 /**

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,23 @@ $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;
 
 // ─── Video card dropdown ───
 $video-card-dropdown-border: $color-zinc-800;
@@ -932,6 +948,16 @@ $page-channels-border: $color-zinc-800;
 // ─── Page: channel ───
 $page-channel-border: $color-zinc-800;
 
+// ─── Page: history ───
+$page-history-group-title: $color-zinc-300;
+$page-history-group-icon: $color-zinc-500;
+$page-history-clear-icon: $color-zinc-400;
+$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,25 @@ $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;
+
 // ─── Video card dropdown ───
 $video-card-dropdown-border: transparent;
 
@@ -962,6 +978,16 @@ $page-channels-border: transparent;
 // ─── Page: channel ───
 $page-channel-border: transparent;
 
+// ─── Page: history ───
+$page-history-group-title: $color-gray-900;
+$page-history-group-icon: $color-gray-500;
+$page-history-clear-icon: $color-gray-400;
+$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

package/components/card/history.vue

@@ -0,0 +1,357 @@
+<!-- Карточка истории просмотров: постер с полосой прогресса, канал и время последнего просмотра -->
+<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="card-history__watched">
+          <UiIcon
+            name="clock"
+            size="12"
+          />
+          {{ 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
+}>();
+
+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 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__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);

package/components/card/{video/preview.vue → preview.vue}

@@ -1,11 +1,11 @@
 <!-- Видео-предпросмотр (автоплей) поверх постера карточки видео + индикатор загрузки -->
 <template>
-  <span class="card-video-preview">
+  <span class="card-preview">
     <video
       ref="videoRef"
       :src="url"
       :class="{'--playing': isPlaying}"
-      class="card-video-preview__video"
+      class="card-preview__video"
       loop
       muted
       autoplay
@@ -19,7 +19,7 @@
     <span
       :class="{'--done': isLoaded}"
       :style="{'--preview-progress': isLoaded ? 1 : progress}"
-      class="card-video-preview__loader"
+      class="card-preview__loader"
     />
   </span>
 </template>
@@ -104,13 +104,13 @@ onBeforeUnmount(stopCreep);
 <style lang="scss">
 $loader-height: 4px;
 
-.card-video-preview {
+.card-preview {
   position: absolute;
   inset: 0;
   z-index: $z-index-plus;
 }
 
-.card-video-preview__video {
+.card-preview__video {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -118,22 +118,22 @@ $loader-height: 4px;
 }
 
 /* Пока автоплей не стартовал, браузер рисует поверх видео нативную кнопку плей — держим элемент невидимым */
-.card-video-preview__video.--playing {
+.card-preview__video.--playing {
   opacity: 1;
 }
 
-.card-video-preview__loader {
+.card-preview__loader {
   position: absolute;
   inset: 0 0 auto;
   height: $loader-height;
-  background: $video-card-preview-loader-bg;
+  background: $card-preview-loader-bg;
   transform: scaleX(var(--preview-progress, 0));
   transform-origin: left center;
   transition: var(--transition) transform, var(--transition) var(--default-transition-duration) opacity;
 }
 
 /* Догрузилось или пошло воспроизведение — полоса доезжает до конца и только потом гаснет */
-.card-video-preview__loader.--done {
+.card-preview__loader.--done {
   opacity: 0;
 }
 </style>

package/components/card/video/index.vue

@@ -27,7 +27,7 @@
         height="270"
         @error="onPosterError"
       />
-      <CardVideoPreview
+      <CardPreview
         v-if="isPreviewShow && card.previewUrl"
         :url="card.previewUrl"
       />

package/components/grid/playlists.vue

@@ -1,4 +1,4 @@
-<!-- Сетка карточек плейлистов, 2-4 колонки -->
+<!-- Сетка карточек плейлистов, 2-4 колонки; попап шаринга — один на список -->
 <template>
   <div class="grid-playlists">
     <CardPlaylist
@@ -7,7 +7,20 @@
       :card="item"
       :top-playlists="topPlaylists"
       :priority="priority && index === 0"
+      @share="onShare"
     />
+
+    <ShareMain
+      v-model="isShareOpen"
+      :url="shareUrl"
+    >
+      <template #card>
+        <CardPlaylistMini
+          v-if="shareCard"
+          :card="shareCard"
+        />
+      </template>
+    </ShareMain>
   </div>
 </template>
 
@@ -19,6 +32,20 @@ defineProps<{
   topPlaylists?: boolean
   priority?: boolean
 }>();
+
+const { generateLink } = useGenerateLink();
+
+const isShareOpen = ref(false);
+const shareCard = ref<IPlaylistCard | null>(null);
+
+const shareUrl = computed(() => shareCard.value
+  ? generateLink(`/playlists/${shareCard.value.id}/${shareCard.value.firstVideoId}`)
+  : '');
+
+function onShare(card: IPlaylistCard) {
+  shareCard.value = card;
+  isShareOpen.value = true;
+}
 </script>
 
 <style lang="scss">