itube-specs 0.0.892 → 0.0.893

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

@@ -204,7 +204,6 @@ $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;
-$card-preview-loader-bg: linear-gradient(to right, $color-indigo-muted, $color-indigo-deep);
 
 // ─── History card ───
 $history-card-bg: $color-zinc-900-40;
@@ -965,11 +964,25 @@ $library-item-badge-text: $color-white;
 $library-item-badge-bordered-border: $color-zinc-600;
 $library-item-badge-bordered-text: $color-zinc-400;
 
+// ─── Library model (блок подписки на модель) ───
+$library-model-bg: $color-zinc-900-40;
+$library-model-border: $color-zinc-800;
+$library-model-avatar-border: $color-zinc-700;
+$library-model-avatar-border--hover: $color-zinc-500;
+$library-model-name: $color-white;
+$library-model-name--hover: $color-indigo-400;
+$library-model-badge-bg: $color-indigo-600;
+$library-model-badge-text: $color-white;
+$library-model-tags: $color-zinc-400;
+$library-model-meta: $color-zinc-500;
+$library-model-meta-dot: $color-zinc-600;
+
 // ─── 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-library-confirm-text: $color-zinc-300;
 
 // ─── Page: history ───
 $page-history-group-title: $color-zinc-300;

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

@@ -261,7 +261,6 @@ $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;
-$card-preview-loader-bg: linear-gradient(to right, $color-indigo-muted, $color-indigo-deep);
 $video-card-dropdown-size--hover: 1.25;
 
 // ─── History card ───
@@ -995,11 +994,25 @@ $library-item-badge-text: $color-white;
 $library-item-badge-bordered-border: $color-gray-300;
 $library-item-badge-bordered-text: $color-gray-600;
 
+// ─── Library model (блок подписки на модель) ───
+$library-model-bg: $color-gray-100;
+$library-model-border: transparent;
+$library-model-avatar-border: $color-gray-300;
+$library-model-avatar-border--hover: $color-indigo-500-50;
+$library-model-name: $color-gray-900;
+$library-model-name--hover: $color-indigo-600;
+$library-model-badge-bg: $color-indigo-600;
+$library-model-badge-text: $color-white;
+$library-model-tags: $color-gray-600;
+$library-model-meta: $color-gray-500;
+$library-model-meta-dot: $color-gray-400;
+
 // ─── 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-library-confirm-text: $color-gray-700;
 
 // ─── Page: history ───
 $page-history-group-title: $color-gray-900;

package/components/card/dropdown/trigger.vue

@@ -1,7 +1,8 @@
 <!-- Кнопка меню карточки: до первого клика в DOM только она, чанк самого меню грузится по требованию -->
 <template>
-  <LazyCardDropdown
-    v-if="isMounted"
+  <component
+    v-if="dropdown"
+    :is="dropdown"
     v-bind="{ ...$attrs, ...props }"
     auto-open
   />
@@ -21,6 +22,7 @@
 </template>
 
 <script setup lang="ts">
+import type { Component } from 'vue';
 import type { IVideoCard } from '../../../types';
 
 defineOptions({ inheritAttrs: false });
@@ -35,11 +37,13 @@ const props = defineProps<{
 
 const { t } = useI18n();
 
-const isMounted = ref(false);
+// Не LazyCardDropdown: async-обёртка на первом рендере отдаёт коммент-заглушку вместо элемента,
+// колонка грида схлопывается и текст карточки успевает дёрнуться. Кладём уже загруженный компонент —
+// подмена кнопки на меню происходит одним патчем.
+const dropdown = shallowRef<Component | null>(null);
 
 async function mountDropdown() {
-  await import('./index.vue');
-  isMounted.value = true;
+  dropdown.value = (await import('./index.vue')).default;
 }
 </script>
 

package/components/card/history.vue

@@ -20,7 +20,7 @@
         height="270"
         @error="posterError = true"
       />
-      <CardPreview
+      <UiVideoPreview
         v-if="isPreviewShow && card.previewUrl"
         :url="card.previewUrl"
       />
@@ -179,6 +179,7 @@ const videoCard = computed<IVideoCard>(() => ({
 <style lang="scss">
 $inset-label: 8px;
 $progress-height: 4px;
+$dropdown-column: 18px;
 
 .card-history {
   @include video-card;
@@ -249,7 +250,7 @@ $progress-height: 4px;
 .card-history__wrapper {
   display: grid;
   column-gap: 8px;
-  grid-template-columns: 32px 1fr auto;
+  grid-template-columns: 32px 1fr $dropdown-column;
   align-items: start;
   padding: 12px;
   color: $history-card-secondary;
@@ -343,7 +344,7 @@ $progress-height: 4px;
   }
 
   .card-history__wrapper {
-    grid-template-columns: 1fr auto;
+    grid-template-columns: 1fr $dropdown-column;
   }
 
   .card-history__title,

package/components/card/video/index.vue

@@ -3,6 +3,7 @@
   <div
     :class="[
       {'--mini': mini},
+      {'--compact': compact},
       {'--avatar': card.channelAvatar},
       {'--no-channel': isChannelPage},
     ]"
@@ -27,7 +28,7 @@
         height="270"
         @error="onPosterError"
       />
-      <CardPreview
+      <UiVideoPreview
         v-if="isPreviewShow && card.previewUrl"
         :url="card.previewUrl"
       />
@@ -81,7 +82,7 @@
       >{{ card.title }}
       </NuxtLink>
       <component
-        v-if="!mini && card.channelName"
+        v-if="!mini && !compact && card.channelName"
         :is="component"
         :to="channelLink"
         class="card-video__channel-wrapper"
@@ -96,7 +97,7 @@
         </span>
       </component>
       <div
-        v-if="!mini && cardTags && cardTags.length > 0"
+        v-if="!mini && !compact && cardTags && cardTags.length > 0"
         class="card-video__tags"
       >
         <div class="card-video__tags-wrapper">
@@ -130,6 +131,8 @@ const featureFlags = useRuntimeConfig().public.featureFlags;
 const props = defineProps<{
   card: IVideoCard
   mini?: boolean
+  /** Аватар канала и тайтл, но без названия канала и тегов — лента подписок */
+  compact?: boolean
   loading?: 'eager' | 'lazy'
   topChips?: string[]
   playlistId?: string
@@ -202,6 +205,10 @@ const cardTags = computed(() => {
 $inset-label: 8px;
 $layout-breakpoint: 250px;
 
+// Колонка под меню карточки фиксирована, а не auto: иначе ширина зависит от того, отрисовано меню
+// или нет, и в момент подмены кнопки заголовок дёргается
+$dropdown-column: 18px;
+
 .card-video {
   @include video-card;
 
@@ -276,7 +283,7 @@ $layout-breakpoint: 250px;
 
 .card-video__wrapper {
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: 1fr $dropdown-column;
   align-items: start;
   align-content: center;
   color: $video-card-secondary;
@@ -287,13 +294,13 @@ $layout-breakpoint: 250px;
 
   @include from-cq($layout-breakpoint) {
     column-gap: 8px;
-    grid-template-columns: 32px 1fr auto;
+    grid-template-columns: 32px 1fr $dropdown-column;
   }
 }
 
 .--avatar .card-video__wrapper {
   column-gap: 8px;
-  grid-template-columns: 32px 1fr auto;
+  grid-template-columns: 32px 1fr $dropdown-column;
 }
 
 .--avatar .card-video__title {
@@ -321,7 +328,7 @@ $layout-breakpoint: 250px;
   }
 
   .--no-channel .card-video__wrapper {
-    grid-template-columns: 1fr auto;
+    grid-template-columns: 1fr $dropdown-column;
   }
 
   .--no-channel .card-video__title {
@@ -339,7 +346,13 @@ $layout-breakpoint: 250px;
 }
 
 .--mini .card-video__wrapper {
-  grid-template-columns: 1fr auto;
+  grid-template-columns: 1fr $dropdown-column;
+}
+
+/* Без строки канала и тегов вторая строка грида не нужна — иначе аватар и «троеточие» растягиваются. */
+.--compact .card-video__logo-wrapper,
+.--compact .card-video__dropdown {
+  grid-row: 1;
 }
 
 .--mini .card-video__dropdown {

package/components/library/model.vue

@@ -0,0 +1,307 @@
+<!-- Блок подписки на модель: шапка с аватаром, тегами и счётчиками + лента последних роликов -->
+<template>
+  <article class="library-model">
+    <header class="library-model__header">
+      <NuxtLink
+        :to="link"
+        :title="model.title"
+        class="library-model__avatar-link"
+      >
+        <UiImg
+          :src="currentImage"
+          :alt="model.title"
+          :loading="priority ? 'eager' : 'lazy'"
+          :priority="priority"
+          class="library-model__avatar"
+          width="96"
+          height="96"
+          sizes="96px"
+          @error="imageError = true"
+        />
+      </NuxtLink>
+
+      <div class="library-model__info">
+        <div class="library-model__heading">
+          <NuxtLink
+            :to="link"
+            class="library-model__name"
+          >
+            {{ model.title }}
+            <img
+              v-if="model.country"
+              :alt="model.country.title"
+              :title="`${t('birthplace_country')}: ${model.country.title}`"
+              :src="`/icons/flags/${model.country.name}.svg`"
+              class="library-model__flag"
+              width="20"
+              height="14"
+            >
+          </NuxtLink>
+
+          <span
+            v-if="model.newCount"
+            class="library-model__badge"
+          >{{ t('library.new_count', { count: model.newCount }) }}</span>
+        </div>
+
+        <p
+          v-if="model.tags.length"
+          class="library-model__tags"
+        >{{ model.tags.join(' · ') }}</p>
+
+        <p class="library-model__meta">
+          <span class="library-model__meta-item">
+            <UiIcon
+              name="video-camera"
+              size="14"
+            />
+            <span class="library-model__meta-videos">{{ $n(model.videosCount, 'compact') }}</span>
+            {{ model.age }} {{ t('yo') }}
+          </span>
+
+          <span class="library-model__meta-item">
+            <UiIcon
+              name="date"
+              size="14"
+            />
+            {{ t('library.updated_at', { date: formatDate(model.lastVideoAddedAt) }) }}
+          </span>
+        </p>
+      </div>
+
+      <div class="library-model__actions _from-sm">
+        <UiBtn
+          :theme="following ? 'secondary' : 'primary'"
+          class="library-model__follow"
+          @click="emit('toggle-follow', model)"
+        >
+          <UiIcon
+            :name="following ? 'check' : 'plus'"
+            size="16"
+          />
+          {{ following ? t('library.following_state') : t('follow') }}
+        </UiBtn>
+
+        <UiLink
+          :to="link"
+          theme="secondary"
+        >
+          {{ t('plural.videos', model.videosCount) }}
+          <UiIcon
+            name="arrow-right"
+            size="16"
+          />
+        </UiLink>
+      </div>
+    </header>
+
+    <div class="library-model__grid">
+      <CardVideo
+        v-for="(video, index) in model.videos"
+        :key="video.guid"
+        :card="video"
+        :loading="priority && index < 3 ? 'eager' : 'lazy'"
+        :priority="priority && index < 3"
+        compact
+      />
+    </div>
+
+    <UiLink
+      :to="link"
+      theme="secondary"
+      class="library-model__all _to-sm"
+      wide
+    >
+      {{ t('plural.videos', model.videosCount) }}
+      <UiIcon
+        name="arrow-right"
+        size="16"
+      />
+    </UiLink>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { convertString, formatDate } from '../../runtime';
+import type { LibraryModelStub } from '../../stubs/library-models';
+
+const props = defineProps<{
+  model: LibraryModelStub
+  following?: boolean
+  priority?: boolean
+}>();
+
+const emit = defineEmits<{
+  (eventName: 'toggle-follow', model: LibraryModelStub): void,
+}>();
+
+const { t } = useI18n();
+const { generateLink } = useGenerateLink();
+
+const link = computed(() => generateLink(`/models/${convertString().toSlug(props.model.title)}`));
+
+const fallbackImage = '/img/model-placeholder.webp';
+const imageError = ref(false);
+
+const currentImage = computed(() => imageError.value ? fallbackImage : props.model.primaryImageUrl);
+</script>
+
+<style lang="scss">
+.library-model {
+  padding: 16px;
+  background-color: $library-model-bg;
+  border: 1px solid $library-model-border;
+  border-radius: $radius-xl;
+
+  @include from-br(sm) {
+    padding: 20px;
+  }
+}
+
+.library-model__header {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 16px;
+  row-gap: 12px;
+  align-items: start;
+  margin-bottom: 20px;
+
+  @include from-br(sm) {
+    grid-template-columns: auto 1fr auto;
+  }
+}
+
+.library-model__avatar {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  object-position: center 30%;
+  border-radius: $radius-full;
+  border: 2px solid $library-model-avatar-border;
+
+  @include from-br(sm) {
+    width: 96px;
+    height: 96px;
+    transition: var(--transition) border-color;
+  }
+}
+
+@include from-br(sm) {
+  .library-model__avatar-link:is(:hover, :focus-visible) .library-model__avatar {
+    border-color: $library-model-avatar-border--hover;
+  }
+}
+
+.library-model__info {
+  min-width: 0;
+}
+
+.library-model__heading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 10px;
+  row-gap: 6px;
+}
+
+.library-model__name {
+  @include font-lg;
+
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+  font-weight: 700;
+  text-transform: capitalize;
+  color: $library-model-name;
+
+  @include from-br(sm) {
+    transition: var(--transition) color;
+  }
+
+  @include hover(color) {
+    color: $library-model-name--hover;
+  }
+}
+
+.library-model__flag {
+  flex-shrink: 0;
+  border-radius: 2px;
+}
+
+.library-model__badge {
+  @include font-3xs;
+
+  flex-shrink: 0;
+  font-weight: 600;
+  white-space: nowrap;
+  padding-block: 4px;
+  padding-inline: 10px;
+  color: $library-model-badge-text;
+  background-color: $library-model-badge-bg;
+  border-radius: $radius-full;
+}
+
+.library-model__tags {
+  @include font-sm;
+
+  margin-top: 4px;
+  color: $library-model-tags;
+}
+
+.library-model__meta {
+  @include font-sm;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 16px;
+  row-gap: 4px;
+  margin-top: 2px;
+  color: $library-model-meta;
+}
+
+.library-model__meta-item {
+  display: flex;
+  align-items: center;
+  column-gap: 6px;
+}
+
+.library-model__meta-videos::after {
+  content: '·';
+  margin-inline-start: 6px;
+  color: $library-model-meta-dot;
+}
+
+.library-model__actions {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+
+.library-model__follow {
+  min-width: 124px;
+}
+
+.library-model__grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(2, 1fr);
+
+  @include from-br(xm) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @include from-br(sm) {
+    gap: 24px 16px;
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  @include from-br(md) {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+.library-model__all {
+  margin-top: 16px;
+}
+</style>

package/components/ui/video-preview.vue

@@ -0,0 +1,62 @@
+<!-- Видео-предпросмотр (автоплей) поверх постера + индикатор загрузки -->
+<template>
+  <span
+    :class="{'_loading': !isPlaying}"
+    class="ui-video-preview"
+  >
+    <video
+      ref="videoRef"
+      :src="url"
+      :class="{'--playing': isPlaying}"
+      class="ui-video-preview__video"
+      loop
+      muted
+      autoplay
+      playsinline
+      @playing="isPlaying = true"
+      @waiting="isPlaying = false"
+      @pause="isPlaying = false"
+    />
+  </span>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  url: string
+}>();
+
+const videoRef = ref<HTMLVideoElement | null>(null);
+const isPlaying = ref(false);
+
+onMounted(() => {
+  const video = videoRef.value;
+  if (!video) return;
+
+  video.muted = true;
+  video.play().catch(() => {
+    isPlaying.value = false;
+  });
+});
+</script>
+
+<style lang="scss">
+.ui-video-preview {
+  --size: 40px;
+
+  position: absolute;
+  inset: 0;
+  z-index: $z-index-plus;
+}
+
+.ui-video-preview__video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+}
+
+/* Пока автоплей не стартовал, браузер рисует поверх видео нативную кнопку плей — держим элемент невидимым */
+.ui-video-preview__video.--playing {
+  opacity: 1;
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.892",
+  "version": "0.0.893",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {