itube-specs 0.0.898 → 0.0.902

package/components/card/video/index.vue

@@ -6,6 +6,8 @@
       {'--compact': compact},
       {'--avatar': card.channelAvatar},
       {'--no-channel': isChannelPage},
+      {'--progress': hasProgress},
+      {'--favorite': isFavoriteCard},
     ]"
     class="card-video"
   >
@@ -38,20 +40,31 @@
         class="card-video__new"
         theme="primary-gradient"
       />
-      <UiLabel
-        v-if="card.quality && parseInt(card.quality) >= 1080"
-        :text="card.quality"
-        class="card-video__resolution"
-        theme="yellow"
-      />
       <UiLabel
         v-if="card.duration"
         :text="duration"
         class="card-video__duration"
         theme="black"
       />
+      <span
+        v-if="hasProgress"
+        :style="{ '--card-video-progress': `${progress}%` }"
+        :aria-label="t('watched_percent', { percent: progress })"
+        :aria-valuenow="progress"
+        class="card-video__progress"
+        role="progressbar"
+        aria-valuemin="0"
+        aria-valuemax="100"
+      />
     </NuxtLink>
 
+    <CardVideoActions
+      v-if="showActions"
+      :card="card"
+      :show-favorites="canFavorite"
+      :show-watch-later="canWatchLater"
+    />
+
     <div class="card-video__wrapper">
       <component
         v-if="!mini"
@@ -82,7 +95,7 @@
       >{{ card.title }}
       </NuxtLink>
       <component
-        v-if="!mini && !compact && card.channelName"
+        v-if="!mini && !compact && !history && card.channelName"
         :is="component"
         :to="channelLink"
         class="card-video__channel-wrapper"
@@ -96,8 +109,28 @@
           </template>
         </span>
       </component>
+      <p
+        v-if="history"
+        class="card-video__meta"
+      >
+        <NuxtLink
+          v-if="card.channelName"
+          :to="channelLink"
+          class="card-video__channel-title"
+        >{{ card.channelName }}</NuxtLink>
+        <span
+          :class="{'--remaining': remaining}"
+          class="card-video__watched"
+        >
+          <UiIcon
+            name="clock"
+            size="12"
+          />
+          {{ remaining ? remainingText : watchedAgo }}
+        </span>
+      </p>
       <div
-        v-if="!mini && !compact && cardTags && cardTags.length > 0"
+        v-if="!mini && !compact && !history && cardTags && cardTags.length > 0"
         class="card-video__tags"
       >
         <div class="card-video__tags-wrapper">
@@ -113,9 +146,14 @@
       </div>
       <CardDropdownTrigger
         :card="card"
-        :show-watch-later="featureFlags.FeatureWatchLaterEnabled"
+        :show-watch-later="canWatchLater"
+        :show-favorites="canFavorite"
+        :show-report="!history"
+        :show-remove="history"
+        :show-share="history"
         class="card-video__dropdown"
-        show-report
+        @share="emit('share', card)"
+        @remove="emit('remove', card)"
       />
     </div>
   </div>
@@ -138,9 +176,18 @@ const props = defineProps<{
   playlistId?: string
   priority?: boolean
   playlist?: boolean
+  /** Тип «история»: мета-строка со временем просмотра вместо канала и тегов, меню с удалением и шарингом */
+  history?: boolean
+  /** Развилка мета-строки истории: вместо «когда смотрели» — сколько осталось до конца («Продолжить просмотр») */
+  remaining?: boolean
 }>();
 
-const { t } = useI18n();
+const emit = defineEmits<{
+  (e: 'remove', card: IVideoCard): void
+  (e: 'share', card: IVideoCard): void
+}>();
+
+const { t, locale } = useI18n();
 
 const NuxtLinkComponent = resolveComponent('NuxtLink');
 
@@ -184,6 +231,27 @@ const duration = computed(() => {
   return getDuration(props.card.duration);
 });
 
+const { isFavorite } = useVideoCollections();
+
+const isFavoriteCard = computed(() => isFavorite(props.card.guid));
+
+const canFavorite = computed(() => featureFlags.FeatureFavoritesEnabled);
+const canWatchLater = computed(() => !props.history && featureFlags.FeatureWatchLaterEnabled);
+const showActions = computed(() => !props.mini && (canFavorite.value || canWatchLater.value));
+
+const hasProgress = computed(() => props.card.progress !== undefined);
+
+const progress = computed(() => Math.min(100, Math.max(0, Math.round(props.card.progress ?? 0))));
+
+const watchedAgo = computed(() => props.card.watchedAt === undefined
+  ? ''
+  : 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 rootPath = computed(() => props.playlistId ? `playlists/${props.playlistId}` : 'videos');
 
 const link = computed(() => generateLink(`/${rootPath.value}/${props.card[ featureFlags.FetchByUrlEnabled ? 'url' : 'id' ]}`));
@@ -219,6 +287,7 @@ const cardTags = computed(() => {
 <style lang="scss">
 $inset-label: 8px;
 $layout-breakpoint: 250px;
+$progress-height: 4px;
 
 // Колонка под меню карточки фиксирована, а не auto: иначе ширина зависит от того, отрисовано меню
 // или нет, и в момент подмены кнопки заголовок дёргается
@@ -227,6 +296,7 @@ $dropdown-column: 18px;
 .card-video {
   @include video-card;
 
+  position: relative;
   container-type: inline-size;
 
   @include to-br(xs) {
@@ -246,7 +316,6 @@ $dropdown-column: 18px;
 }
 
 .card-video__duration,
-.card-video__resolution,
 .card-video__new {
   position: absolute;
 }
@@ -256,6 +325,11 @@ $dropdown-column: 18px;
   left: $inset-label;
 }
 
+/* Кнопка избранного занимает левый верхний угол постера — плашка «новое» встаёт правее неё */
+.--favorite .card-video__new {
+  left: $inset-label * 2 + 36px;
+}
+
 .card-video__dropdown {
   grid-column: 2;
   grid-row: 1;
@@ -273,29 +347,45 @@ $dropdown-column: 18px;
 }
 
 .card-dropdown__trigger > .ui-icon {
-  @include from-br(sm) {
+  @media (hover: hover) {
     transition: var(--transition) transform;
   }
 }
 
 .card-dropdown__trigger:is(:hover, :focus-visible) > .ui-icon {
-  @include from-br(sm) {
+  @media (hover: hover) {
     transform: scale($video-card-dropdown-size--hover);
   }
 }
 
-.card-video__resolution {
-  top: $inset-label;
-  right: $inset-label;
-  background: $video-card-resolution-bg;
-  color: $video-card-resolution-text;
-}
-
 .card-video__duration {
   bottom: $inset-label;
   left: $inset-label;
 }
 
+.--progress .card-video__duration {
+  bottom: $inset-label + $progress-height;
+}
+
+/* Превью кроет постер целиком ($z-index-plus) — полоса прогресса должна остаться поверх него */
+.card-video__progress {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $z-index-loader;
+  height: $progress-height;
+  background-color: $video-card-progress-bg;
+
+  &::after {
+    content: '';
+    display: block;
+    width: var(--card-video-progress, 0%);
+    height: 100%;
+    background-color: $video-card-progress-fill;
+  }
+}
+
 .card-video__wrapper {
   display: grid;
   grid-template-columns: 1fr $dropdown-column;
@@ -322,7 +412,8 @@ $dropdown-column: 18px;
   grid-column: 2;
 }
 
-.--avatar .card-video__channel-wrapper {
+.--avatar .card-video__channel-wrapper,
+.--avatar .card-video__meta {
   grid-column: 2;
 }
 
@@ -386,13 +477,13 @@ $dropdown-column: 18px;
     grid-column: 1;
   }
 
-  @include from-br(xs) {
+  @media (hover: hover) {
     transition: var(--transition) color;
   }
 }
 
 .card-video:is(:hover, :focus-visible) .card-video__title {
-  @include from-br(xs) {
+  @media (hover: hover) {
     color: $video-card-text--hover;
   }
 }
@@ -413,6 +504,38 @@ $dropdown-column: 18px;
   }
 }
 
+/* Мета-строка истории: «канал · когда смотрели / сколько осталось» на месте строки канала */
+.card-video__meta {
+  @include font-xs;
+
+  display: flex;
+  align-items: center;
+  grid-row: 2;
+  margin: 6px 0 0;
+  font-weight: 400;
+  color: $video-card-secondary;
+
+  @include to-cq($layout-breakpoint) {
+    grid-column: 1;
+  }
+}
+
+.card-video__meta .card-video__channel-title + .card-video__watched::before {
+  content: '·';
+  margin-inline: 6px;
+}
+
+.card-video__watched {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  flex-shrink: 0;
+}
+
+.card-video__watched.--remaining {
+  color: $video-card-remaining;
+}
+
 .card-video__channel-logo {
   border-radius: 50%;
 }
@@ -425,12 +548,8 @@ $dropdown-column: 18px;
 .card-video__logo-wrapper[href],
 .card-video__channel-wrapper[href],
 .card-video__title {
-  @include from-br(xs) {
-    transition: var(--transition) opacity;
-
-    &:is(:hover, :focus-visible) {
-      opacity: 0.9;
-    }
+  @include hover(opacity) {
+    opacity: 0.9;
   }
 }
 

package/components/filter/selects.vue

@@ -347,7 +347,7 @@ function getSelectLabel(item: IModelFilter) {
 }
 
 .filter-selects__wrapper:is(:hover, :focus-visible) .filter-selects__select-button:not(.--active-select) {
-  @include from-br(sm) {
+  @media (hover: hover) {
     background: $filters-main-bg--hover;
   }
 }

package/components/info/grid.vue

@@ -168,7 +168,7 @@ function isWarning(value: string) {
 }
 
 .info-grid__item.--link:is(:hover, :focus-visible) .info-grid__item-value {
-  @include from-br(sm) {
+  @media (hover: hover) {
     background-color: $info-grid-item-value-link-bg--hover;
   }
 }

package/components/layout/header-user.vue

@@ -240,7 +240,7 @@ function openChilds() {
     width: 100%;
     text-transform: capitalize;
 
-    &:is(:hover, :focus-visible) {
+    @include hover(background-color) {
       background-color: $header-user-item-bg--hover;
     }
   }

package/components/library/feed.vue

@@ -1,8 +1,12 @@
 <!-- Блок подписки (модель / канал / категория): шапка с аватаром, тегами и счётчиками + лента роликов -->
 <template>
   <article class="library-feed">
-    <header class="library-feed__header">
+    <header
+      :class="{ '--without-avatar': withoutAvatar }"
+      class="library-feed__header"
+    >
       <NuxtLink
+        v-if="!withoutAvatar"
         :to="item.to"
         :title="item.title"
         class="library-feed__avatar-link"
@@ -14,9 +18,9 @@
           :loading="priority ? 'eager' : 'lazy'"
           :priority="priority"
           class="library-feed__avatar"
-          width="96"
-          height="96"
-          sizes="96px"
+          width="64"
+          height="64"
+          sizes="64px"
           @error="avatarError = true"
         />
         <span
@@ -45,7 +49,7 @@
 
           <span
             v-if="item.newCount"
-            class="library-feed__badge"
+            class="library-feed__badge _from-sm"
           >{{ t('library.new_count', { count: item.newCount }) }}</span>
         </div>
 
@@ -57,10 +61,19 @@
           micro
         />
 
+        <p
+          v-if="parametersText || ageText"
+          class="library-feed__params"
+        >{{ parametersText }}<span
+          v-if="ageText"
+          class="library-feed__age"
+        >{{ ageText }}</span></p>
+
         <p class="library-feed__meta">
           <span
             v-for="(entry, index) in item.meta"
             :key="`meta-${index}`"
+            :class="{ '_from-sm': entry.desktopOnly }"
             class="library-feed__meta-item"
           >
             <UiIcon
@@ -137,6 +150,8 @@ const props = defineProps<{
   item: ILibraryFeedItem
   following?: boolean
   priority?: boolean
+  /** У категорий аватарки нет вообще — колонка не рисуется, инициалы не подставляются */
+  withoutAvatar?: boolean
 }>();
 
 const emit = defineEmits<{
@@ -158,6 +173,14 @@ const initials = computed(() => props.item.title
   .toUpperCase());
 
 const videosText = computed(() => t('plural.videos', props.item.videosCount));
+
+const parametersText = computed(() => (props.item.parameters ?? []).filter(Boolean).join(' · '));
+
+/** Возраст идёт хвостом той же строки, поэтому разделитель печатается только когда параметры есть. */
+const ageText = computed(() => {
+  if (!props.item.age) return '';
+  return parametersText.value ? ` · ${props.item.age}` : props.item.age;
+});
 </script>
 
 <style lang="scss">
@@ -165,13 +188,11 @@ const videosText = computed(() => t('plural.videos', props.item.videosCount));
   /* Растушёвка «ещё» у тегов уходит в фон карточки, а не страницы */
   --expand-row-fade-end: #{$library-feed-fade};
 
-  padding: 16px;
-  background-color: $library-feed-bg;
-  border: 1px solid $library-feed-border;
-  border-radius: $radius-xl;
-
   @include from-br(sm) {
     padding: 20px;
+    border: 1px solid $library-feed-border;
+    background-color: $library-feed-bg;
+    border-radius: $radius-xl;
   }
 }
 
@@ -180,7 +201,7 @@ const videosText = computed(() => t('plural.videos', props.item.videosCount));
   grid-template-columns: auto minmax(0, 1fr);
   column-gap: 16px;
   row-gap: 12px;
-  align-items: start;
+  align-items: center;
   margin-bottom: 20px;
 
   @include from-br(sm) {
@@ -188,24 +209,32 @@ const videosText = computed(() => t('plural.videos', props.item.videosCount));
   }
 }
 
+.library-feed__header.--without-avatar {
+  grid-template-columns: minmax(0, 1fr);
+
+  @include from-br(sm) {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+}
+
 .library-feed__avatar {
-  width: 80px;
-  height: 80px;
+  width: 64px;
+  height: 64px;
   object-fit: cover;
   object-position: center 30%;
   border-radius: $radius-full;
-  border: 2px solid $library-feed-avatar-border;
 
-  @include from-br(sm) {
-    width: 96px;
-    height: 96px;
-    transition: var(--transition) border-color;
+  /* Кольцо рисуем тенью, а не бордером: при border-box рамка съедала бы 4px картинки */
+  box-shadow: 0 0 0 2px $library-feed-avatar-border;
+
+  @media (hover: hover) {
+    transition: var(--transition) box-shadow;
   }
 }
 
-@include from-br(sm) {
+@media (hover: hover) {
   .library-feed__avatar-link:is(:hover, :focus-visible) .library-feed__avatar {
-    border-color: $library-feed-avatar-border--hover;
+    box-shadow: 0 0 0 2px $library-feed-avatar-border--hover;
   }
 }
 
@@ -270,7 +299,18 @@ const videosText = computed(() => t('plural.videos', props.item.videosCount));
 }
 
 .library-feed__tags {
-  margin-top: 8px;
+  margin-top: 4px;
+}
+
+.library-feed__params {
+  @include font-sm;
+
+  margin-top: 4px;
+  color: $library-feed-params;
+}
+
+.library-feed__age {
+  color: $library-feed-age;
 }
 
 .library-feed__meta {
@@ -281,7 +321,7 @@ const videosText = computed(() => t('plural.videos', props.item.videosCount));
   align-items: center;
   column-gap: 8px;
   row-gap: 4px;
-  margin-top: 8px;
+  margin-top: 2px;
   color: $library-feed-meta;
 }
 
@@ -291,9 +331,10 @@ const videosText = computed(() => t('plural.videos', props.item.videosCount));
   column-gap: 6px;
 }
 
-.library-feed__meta-item:not(:last-child)::after {
+/* Разделитель слева, а не справа: скрытый на мобиле счётчик не оставляет висячей точки */
+.library-feed__meta-item:not(:first-child)::before {
   content: '·';
-  margin-inline-start: 2px;
+  margin-inline-end: 2px;
   color: $library-feed-meta-dot;
 }
 

package/components/library/follows.vue

@@ -1,4 +1,4 @@
-<!-- Список подписок «Библиотеки»: сортировка, блоки лент, подтверждение отписки -->
+<!-- Список подписок «Библиотеки»: сортировка, блоки лент -->
 <template>
   <div class="library-follows">
     <UiSectionTitle
@@ -27,6 +27,7 @@
         :item="item"
         :following="isFollowing(item)"
         :priority="index === 0"
+        :without-avatar="withoutAvatar"
         @toggle-follow="onToggleFollow"
       />
     </div>
@@ -35,15 +36,6 @@
       v-else
       without-reset
     />
-
-    <UiConfirm
-      v-model="isUnfollowOpen"
-      :title="t('library.unfollow_title', { name: pendingUnfollow?.title })"
-      :confirm-text="t('library.unfollow_confirm')"
-      @confirm="onUnfollowConfirm"
-    >
-      <p class="library-follows__confirm">{{ t('library.unfollow_text') }}</p>
-    </UiConfirm>
   </div>
 </template>
 
@@ -61,6 +53,8 @@ const props = defineProps<{
   items: ILibraryFeedItem[]
   title: string
   icon: string
+  /** Список без аватарок — у категорий их нет (и инициалы вместо них тоже не рисуем) */
+  withoutAvatar?: boolean
 }>();
 
 const { t } = useI18n();
@@ -90,31 +84,10 @@ function isFollowing(item: ILibraryFeedItem) {
   return !unfollowed.value.includes(item.guid);
 }
 
-/** Сущность, для которой открыт попап отписки. */
-const pendingUnfollow = ref<ILibraryFeedItem | null>(null);
-
-const isUnfollowOpen = computed({
-  get: () => pendingUnfollow.value !== null,
-  set: value => {
-    if (!value) pendingUnfollow.value = null;
-  },
-});
-
-/** Подписка — сразу, отписка — только через подтверждение: она сносит ленту обновлений. */
 function onToggleFollow(item: ILibraryFeedItem) {
-  if (isFollowing(item)) {
-    pendingUnfollow.value = item;
-    return;
-  }
-
-  unfollowed.value = unfollowed.value.filter(guid => guid !== item.guid);
-}
-
-function onUnfollowConfirm() {
-  if (!pendingUnfollow.value) return;
-
-  unfollowed.value = [...unfollowed.value, pendingUnfollow.value.guid];
-  pendingUnfollow.value = null;
+  unfollowed.value = isFollowing(item)
+    ? [...unfollowed.value, item.guid]
+    : unfollowed.value.filter(guid => guid !== item.guid);
 }
 </script>
 
@@ -128,20 +101,11 @@ function onUnfollowConfirm() {
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
-  margin-bottom: 24px;
+  margin-bottom: 32px;
 }
 
 .library-follows__list {
   display: grid;
   row-gap: 24px;
 }
-
-.library-follows__confirm {
-  @include font-sm;
-
-  max-width: 400px;
-  margin: 0 auto;
-  text-align: center;
-  color: $page-library-confirm-text;
-}
 </style>

package/components/library/item.vue

@@ -86,12 +86,12 @@ withDefaults(defineProps<{
   border: 1px solid $library-item-icon-border;
   border-radius: $radius-xl;
 
-  @include from-br(sm) {
+  @media (hover: hover) {
     transition: var(--transition) background-color, var(--transition) border-color;
   }
 }
 
-@include from-br(sm) {
+@media (hover: hover) {
   .library-item:is(:hover, :focus-visible) .library-item__icon {
     background-color: $library-item-icon-bg--hover;
     border-color: $library-item-icon-border--hover;
@@ -117,12 +117,12 @@ withDefaults(defineProps<{
   font-weight: 600;
   color: $library-item-title;
 
-  @include from-br(sm) {
+  @media (hover: hover) {
     transition: var(--transition) color;
   }
 }
 
-@include from-br(sm) {
+@media (hover: hover) {
   .library-item:is(:hover, :focus-visible) .library-item__title {
     color: $library-item-title--hover;
   }

package/components/player/like.vue

@@ -176,7 +176,7 @@ const dislikePercent = computed(() => percents.value.dislikePercent);
 }
 
 .player-like__control:is(:hover, :focus-visible) {
-  @include from-br(sm) {
+  @media (hover: hover) {
     color: $like-text--hover;
   }
 }

package/components/player/playlist.vue

@@ -414,7 +414,7 @@ function onFollowClick() {
   align-self: center;
   margin-left: auto;
 
-  @include from-br(sm) {
+  @media (hover: hover) {
     opacity: 0;
     transition: var(--transition) opacity;
     color: $video-playlist-card-dropdown-text;
@@ -428,7 +428,7 @@ function onFollowClick() {
 .player-playlist__card:is(:hover, :focus-visible) .player-playlist__card-dropdown,
 .player-playlist__card-dropdown.--open,
 .player-playlist__card-dropdown:focus-within {
-  @include from-br(sm) {
+  @media (hover: hover) {
     opacity: 1;
   }
 }