itube-specs 0.0.899 → 0.0.902

package/components/card/history.vue

@@ -1,359 +0,0 @@
-<!-- Карточка истории просмотров: постер с полосой прогресса, канал и время последнего просмотра -->
-<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"
-      />
-      <UiVideoPreview
-        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>
-
-      <CardDropdownTrigger
-        :card="videoCard"
-        class="card-history__dropdown"
-        show-remove
-        show-share
-        @share="emit('share', videoCard)"
-        @remove="emit('remove', card)"
-      />
-    </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,
-}));
-
-</script>
-
-<style lang="scss">
-$inset-label: 8px;
-$progress-height: 4px;
-$dropdown-column: 18px;
-
-.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;
-}
-
-/* Превью кроет постер целиком ($z-index-plus) — полоса прогресса должна остаться поверх него */
-.card-history__progress {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $z-index-loader;
-  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 $dropdown-column;
-  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 $dropdown-column;
-  }
-
-  .card-history__title,
-  .card-history__meta {
-    grid-column: 1;
-  }
-
-  .card-history__dropdown {
-    grid-column: 2;
-  }
-}
-</style>