itube-specs 0.0.899 → 0.0.902

package/assets/icons/common/clock-filled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><mask id="clock-filled-hands"><rect width="24" height="24" fill="#fff"/><path d="M12 6v6l4 2" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></mask><circle cx="12" cy="12" r="10" fill="currentColor" mask="url(#clock-filled-hands)"/></svg>

package/assets/scss/mixins/_breakpoints.scss

@@ -77,12 +77,13 @@ $brkpnts: (
 }
 
 /**
-  Hover с transition
+  Hover с transition. Условие — наличие наведения у устройства, а не ширина окна: на тач-экране
+  hover «залипает» после тапа и его правда не нужно, а вот узкому окну с мышью он нужен.
   @include hover(background-color) { background-color: red; }
   @include hover(background-color, color) { background-color: red; color: white; }
  */
 @mixin hover($properties...) {
-  @include from-br(sm) {
+  @media (hover: hover) {
     $transitions: ();
 
     @each $prop in $properties {

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

@@ -197,30 +197,26 @@ $video-card-text: $color-white;
 $video-card-text--hover: $color-indigo-400;
 $video-card-dropdown-icon: $color-zinc-500;
 $video-card-dropdown-icon--hover: $color-white;
-$video-card-resolution-bg: $color-green-500;
-$video-card-resolution-text: $mono-black-100;
 $video-card-secondary: $color-zinc-500;
 $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;
-
-// ─── 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-progress-bg: $mono-white-50;
+$video-card-progress-fill: $color-indigo-500;
+$video-card-remaining: $color-indigo-400;
+
+// ─── Video card actions (избранное / смотреть позже на постере) ───
+$video-card-action-bg: $color-zinc-900-70;
+$video-card-action-bg--hover: $color-zinc-800;
+$video-card-action-border: $color-zinc-800-60;
+$video-card-action-icon: $color-zinc-300;
+$video-card-action-active-bg: $color-zinc-800;
+$video-card-action-active-bg--hover: $color-red-600;
+$video-card-action-active-border: $color-zinc-800;
+$video-card-action-active-border--hover: $color-red-600;
+$video-card-action-active-icon: $color-white;
+$video-card-action-active-icon--hover: $color-white;
 
 // ─── Video card dropdown ───
 $video-card-dropdown-border: $color-zinc-800;
@@ -992,18 +988,16 @@ $library-feed-name: $color-white;
 $library-feed-name--hover: $color-indigo-400;
 $library-feed-badge-bg: $color-indigo-600;
 $library-feed-badge-text: $color-white;
+$library-feed-params: $color-zinc-400;
+$library-feed-age: $color-zinc-500;
 $library-feed-meta: $color-zinc-500;
 $library-feed-meta-dot: $color-zinc-600;
 $library-feed-title: $color-zinc-500;
 
 // ─── Page: library ───
 $page-library-toggle-text: $color-zinc-300;
-$page-library-confirm-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;

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

@@ -254,31 +254,27 @@ $video-card-text: $color-gray-900;
 $video-card-text--hover: $color-gray-900;
 $video-card-dropdown-icon: $color-gray-600;
 $video-card-dropdown-icon--hover: $color-gray-900;
-$video-card-resolution-bg: $color-green-500;
-$video-card-resolution-text: $mono-black-100;
 $video-card-secondary: $color-gray-600;
 $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-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-progress-bg: $color-gray-300;
+$video-card-progress-fill: $color-indigo-500;
+$video-card-remaining: $color-indigo-600;
+
+// ─── Video card actions (избранное / смотреть позже на постере) ───
+$video-card-action-bg: $color-white-75;
+$video-card-action-bg--hover: $color-white;
+$video-card-action-border: $color-gray-300-50;
+$video-card-action-icon: $color-gray-700;
+$video-card-action-active-bg: $color-white;
+$video-card-action-active-bg--hover: $color-red-600;
+$video-card-action-active-border: $color-gray-300;
+$video-card-action-active-border--hover: $color-red-600;
+$video-card-action-active-icon: $color-gray-900;
+$video-card-action-active-icon--hover: $color-white;
 
 // ─── Video card dropdown ───
 $video-card-dropdown-border: transparent;
@@ -1020,18 +1016,16 @@ $library-feed-name: $color-gray-900;
 $library-feed-name--hover: $color-indigo-600;
 $library-feed-badge-bg: $color-indigo-600;
 $library-feed-badge-text: $color-white;
+$library-feed-params: $color-gray-600;
+$library-feed-age: $color-gray-500;
 $library-feed-meta: $color-gray-500;
 $library-feed-meta-dot: $color-gray-400;
 $library-feed-title: $color-gray-500;
 
 // ─── Page: library ───
 $page-library-toggle-text: $color-gray-700;
-$page-library-confirm-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;

package/assets/scss/vars/_palette.scss

@@ -5,6 +5,7 @@ $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-70: lab(8.30603% .618205 -2.16572 / 70%); // zinc-900 / 70%
 $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%

package/components/card/category.vue

@@ -85,12 +85,8 @@ const slug = computed(() => {
   padding: 2px;
   border-radius: $radius-xl;
 
-  @include from-br(sm) {
-    transition: box-shadow var(--transition);
-
-    &:is(:hover, :focus-visible) {
-      box-shadow: $card-ring-shadow--hover;
-    }
+  @include hover(box-shadow) {
+    box-shadow: $card-ring-shadow--hover;
   }
 }
 
@@ -117,7 +113,7 @@ const slug = computed(() => {
   text-overflow: ellipsis;
   color: $category-card-title;
 
-  @include from-br(sm) {
+  @media (hover: hover) {
     transition: var(--transition) color;
   }
 }
@@ -132,7 +128,7 @@ const slug = computed(() => {
 }
 
 .card-category:is(:hover, :focus-visible) .card-category__title {
-  @include from-br(sm) {
+  @media (hover: hover) {
     color: $category-card-title--hover;
   }
 }

package/components/card/dropdown/index.vue

@@ -1,4 +1,4 @@
-<!-- Дропдаун-меню видео: добавить в плейлист, смотреть позже, поделиться, пожаловаться -->
+<!-- Дропдаун-меню видео: смотреть позже, избранное, добавить в плейлист, поделиться, пожаловаться -->
 <template>
   <UiDropdown
     ref="dropdownRef"
@@ -28,27 +28,39 @@
     </template>
     <template #items="className">
       <button
+        v-if="showWatchLater"
         :class="className"
         type="button"
-        @click="onAddPlaylist"
+        @click="toggleWatchLater(card.guid)"
       >
         <UiIcon
-          name="star"
+          name="clock"
           size="20"
         />
-        {{ $t('video_submenu.add_to') }}
+        {{ watchLaterLabel }}
       </button>
       <button
-        v-if="showWatchLater"
+        v-if="showFavorites"
         :class="className"
         type="button"
-        @click="emit('watchLater')"
+        @click="toggleFavorite(card.guid)"
       >
         <UiIcon
-          name="time"
+          name="heart-stroke"
           size="20"
         />
-        {{ $t('video_submenu.watch_later') }}
+        {{ favoritesLabel }}
+      </button>
+      <button
+        :class="className"
+        type="button"
+        @click="onAddPlaylist"
+      >
+        <UiIcon
+          name="playlist"
+          size="20"
+        />
+        {{ $t('add_to_playlist') }}
       </button>
       <button
         v-if="showShare"
@@ -97,6 +109,7 @@ import { AuthorizationApiService } from '../../../services/api/authorization.ser
 const props = defineProps<{
   card: IVideoCard
   showWatchLater?: boolean
+  showFavorites?: boolean
   showShare?: boolean
   showReport?: boolean
   showRemove?: boolean
@@ -104,16 +117,41 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: 'watchLater'): void
   (e: 'share'): void
   (e: 'remove'): void
 }>();
 
+const { t } = useI18n();
+
 const { isAuthorized } = useUser(AuthorizationApiService);
 const { openReportPopup } = useReportPopup();
+const { isFavorite, isWatchLater, toggleFavorite, toggleWatchLater } = useVideoCollections();
+
+const favorite = computed(() => isFavorite(props.card.guid));
+const later = computed(() => isWatchLater(props.card.guid));
+
+// Тем же кликом, что переключает коллекцию, меню закрывается. Если менять надпись сразу, она
+// дёргается прямо во время анимации закрытия, поэтому в меню живёт снапшот состояния — он
+// догоняет реальное только к следующему открытию, когда пункт всё равно перерисовывается с нуля.
+const shownFavorite = ref(favorite.value);
+const shownLater = ref(later.value);
+
+const favoritesLabel = computed(() => shownFavorite.value
+  ? t('video_actions.remove_favorites')
+  : t('video_actions.add_favorites'));
+
+const watchLaterLabel = computed(() => shownLater.value
+  ? t('video_actions.remove_watch_later')
+  : t('video_actions.add_watch_later'));
 
 const dropdownRef = ref();
 
+watch(() => dropdownRef.value?.open, (isOpen) => {
+  if (!isOpen) return;
+  shownFavorite.value = favorite.value;
+  shownLater.value = later.value;
+});
+
 function openDropdown() {
   dropdownRef.value?.openDropdown();
 }

package/components/card/dropdown/trigger.vue

@@ -30,6 +30,7 @@ defineOptions({ inheritAttrs: false });
 const props = defineProps<{
   card: IVideoCard
   showWatchLater?: boolean
+  showFavorites?: boolean
   showShare?: boolean
   showReport?: boolean
   showRemove?: boolean

package/components/card/model.vue

@@ -180,7 +180,7 @@ function getValue(item: { title?: string; value?: string }) {
   }
 }
 
-@include from-br(sm) {
+@media (hover: hover) {
   .card-model:is(:hover, :focus-visible) .card-model__info-name {
     color: $model-card-name--hover;
   }

package/components/card/playlist.vue

@@ -109,6 +109,7 @@
         </p>
         <div class="card-playlist__content-wrapper">
           <UiDropdown
+            ref="dropdownRef"
             right
             use-v-if
             class="card-playlist__dropdown"
@@ -132,26 +133,26 @@
             </template>
             <template #items="className">
               <button
-                v-if="card.firstVideoId"
                 :class="className"
                 type="button"
+                @click="emit('share', card)"
               >
                 <UiIcon
-                  name="star"
+                  name="share"
                   size="16"
                 />
-                {{ t('add_to') }}
+                {{ t('share') }}
               </button>
               <button
                 :class="className"
                 type="button"
-                @click="emit('share', card)"
+                @click="onReport"
               >
                 <UiIcon
-                  name="share"
+                  name="flag"
                   size="16"
                 />
-                {{ t('share') }}
+                {{ t('report') }}
               </button>
             </template>
           </UiDropdown>
@@ -187,6 +188,14 @@ const { t } = useI18n();
 
 const { generateLink } = useGenerateLink();
 
+const { openPlaylistReportPopup } = useReportPopup();
+
+const dropdownRef = ref();
+
+function onReport() {
+  openPlaylistReportPopup(props.card, () => dropdownRef.value?.openDropdown());
+}
+
 const userProfileData = computed(() => useState<IProfileData>('profileData').value);
 
 const { isAuthorized } = useUser(AuthorizationApiService);

package/components/card/round.vue

@@ -126,7 +126,7 @@ $badge-inset--mobile: 4px;
 }
 
 .card-round:is(:hover, :focus-visible) .card-round__img {
-  @include from-br(sm) {
+  @media (hover: hover) {
     border-color: $card-round-border--hover;
     box-shadow: $card-ring-shadow--hover;
   }
@@ -158,13 +158,13 @@ $badge-inset--mobile: 4px;
   white-space: nowrap;
   text-overflow: ellipsis;
 
-  @include from-br(sm) {
+  @media (hover: hover) {
     transition: var(--transition) color;
   }
 }
 
 .card-round:is(:hover, :focus-visible) .card-round__title {
-  @include from-br(sm) {
+  @media (hover: hover) {
     color: $card-round-text--hover;
   }
 }

package/components/card/video/actions.vue

@@ -0,0 +1,123 @@
+<!-- Кнопки коллекций поверх постера: избранное (только когда ролик уже в нём) и «смотреть позже» -->
+<template>
+  <div class="card-video-actions">
+    <button
+      v-if="showFavorites && favorite"
+      :aria-label="t('video_actions.remove_aria', { title: card.title, name: t('favorites') })"
+      class="card-video-actions__btn --active"
+      type="button"
+      aria-pressed="true"
+      @click="toggleFavorite(card.guid)"
+    >
+      <UiIcon
+        name="heart"
+        size="18"
+      />
+    </button>
+    <button
+      v-if="showWatchLater"
+      :aria-label="later
+        ? t('video_actions.remove_aria', { title: card.title, name: t('video_submenu.watch_later') })
+        : t('video_actions.add_aria', { title: card.title, name: t('video_submenu.watch_later') })"
+      :aria-pressed="later"
+      :class="['card-video-actions__btn', '--watch-later', { '--active': later }]"
+      type="button"
+      @click="toggleWatchLater(card.guid)"
+    >
+      <UiIcon
+        :name="later ? 'clock-filled' : 'clock'"
+        size="18"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IVideoCard } from '../../../types';
+
+const props = defineProps<{
+  card: IVideoCard
+  showFavorites?: boolean
+  showWatchLater?: boolean
+}>();
+
+const { t } = useI18n();
+
+const { isFavorite, isWatchLater, toggleFavorite, toggleWatchLater } = useVideoCollections();
+
+const favorite = computed(() => isFavorite(props.card.guid));
+const later = computed(() => isWatchLater(props.card.guid));
+</script>
+
+<style lang="scss">
+$action-inset: 8px;
+$action-size: 36px;
+
+.card-video-actions {
+  position: absolute;
+  top: $action-inset;
+  right: $action-inset;
+  left: $action-inset;
+  z-index: $z-index-sub-loader;
+  display: flex;
+  column-gap: $action-inset;
+  pointer-events: none;
+}
+
+.card-video-actions__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $action-size;
+  height: $action-size;
+  border: 1px solid $video-card-action-border;
+  border-radius: $radius-md;
+  background-color: $video-card-action-bg;
+  color: $video-card-action-icon;
+  pointer-events: auto;
+}
+
+.card-video-actions__btn.--watch-later {
+  margin-left: auto;
+}
+
+.card-video-actions__btn.--active {
+  background-color: $video-card-action-active-bg;
+  border-color: $video-card-action-active-border;
+  color: $video-card-action-active-icon;
+  opacity: 1;
+}
+
+/* С мышью неактивные кнопки проявляются по наведению на карточку. На тач-устройствах наведения нет,
+   поэтому там неактивные кнопки не показываем вовсе — только те, что уже в коллекции. */
+@media (hover: hover) {
+  .card-video-actions__btn {
+    opacity: 0;
+    transition:
+      var(--transition) opacity,
+      var(--transition) background-color,
+      var(--transition) border-color,
+      var(--transition) color;
+  }
+
+  .card-video:is(:hover, :focus-within) .card-video-actions__btn {
+    opacity: 1;
+  }
+
+  .card-video-actions__btn:is(:hover, :focus-visible) {
+    background-color: $video-card-action-bg--hover;
+  }
+
+  .card-video-actions__btn.--active:is(:hover, :focus-visible) {
+    background-color: $video-card-action-active-bg--hover;
+    border-color: $video-card-action-active-border--hover;
+    color: $video-card-action-active-icon--hover;
+  }
+}
+
+@media (hover: none) {
+  .card-video-actions__btn:not(.--active) {
+    display: none;
+  }
+}
+</style>