itube-specs 0.0.984 → 0.0.987

package/components/card/model-mini.vue

@@ -52,16 +52,18 @@ const props = defineProps<{
   card: IModelCard
 }>();
 
-const fallbackImage = '/img/model-placeholder.webp';
+const fallbackImage = '/img/model-placeholder-square.webp';
+const fallbackAvifImage = '/img/model-placeholder-square.avif';
 const imageError = ref(false);
 
 /** Аватар 48px круглый — нужен квадратный кроп, вертикальный портрет сюда не годится. */
-const currentImage = computed(() => {
-  if (imageError.value) return fallbackImage;
-  return props.card.primaryImageSmallUrl || fallbackImage;
-});
+const isFallback = computed(() => imageError.value || !props.card.primaryImageSmallUrl);
 
-const currentAvifSrc = computed(() => (imageError.value ? undefined : props.card.primaryImageSmallAvifUrl));
+const currentImage = computed(() => (isFallback.value ? fallbackImage : props.card.primaryImageSmallUrl));
+
+const currentAvifSrc = computed(() => (
+  isFallback.value ? fallbackAvifImage : props.card.primaryImageSmallAvifUrl
+));
 </script>
 
 <style lang="scss">

package/components/card/model.vue

@@ -98,16 +98,16 @@ const { t } = useI18n();
  */
 const SIZES = 'auto, (max-width: 449px) 50vw, (max-width: 1385px) 215px, 250px';
 
-const fallbackImage = '/img/model-placeholder.webp';
+const fallbackImage = '/img/model-placeholder-portrait.webp';
+const fallbackAvifImage = '/img/model-placeholder-portrait.avif';
 const imageError = ref(false);
 
-const currentImage = computed(() => {
-  if (imageError.value) return fallbackImage;
-  return props.card.primaryImageUrl || fallbackImage;
-});
+const isFallback = computed(() => imageError.value || !props.card.primaryImageUrl);
+
+const currentImage = computed(() => (isFallback.value ? fallbackImage : props.card.primaryImageUrl));
 
-/** На заглушке ладдер сбрасываем — иначе браузер продолжит тянуть битые кандидаты. */
-const currentAvifSrc = computed(() => (imageError.value ? undefined : props.card.primaryImageAvifUrl));
+/** На заглушке подменяем и avif-ветку — иначе браузер продолжит тянуть битый кандидат. */
+const currentAvifSrc = computed(() => (isFallback.value ? fallbackAvifImage : props.card.primaryImageAvifUrl));
 
 function onImageError() {
   imageError.value = true;

package/components/card/round.vue

@@ -49,6 +49,8 @@ const props = withDefaults(defineProps<{
   loading?: 'eager' | 'lazy'
   priority?: boolean
   placeholderAvatar?: string
+  /** Та же заглушка в avif. У канальной (svg) пары нет — тогда проп не передают. */
+  placeholderAvatarAvif?: string
   /** Только аватар и название — без счётчика роликов (страница подписок) */
   withoutCount?: boolean
 }>(), {
@@ -64,12 +66,15 @@ const SIZES = `auto, (max-width: ${CSS_BREAKPOINTS.sm - 1}px) 80px, 96px`;
 const fallbackImage = props.placeholderAvatar;
 const imageError = ref(false);
 
-const currentImage = computed(() => {
-  if (imageError.value) return fallbackImage || '';
-  return props.card.primaryImageUrl || fallbackImage || '';
-});
+const isFallback = computed(() => imageError.value || !props.card.primaryImageUrl);
+
+const currentImage = computed(() => (
+  (isFallback.value ? fallbackImage : props.card.primaryImageUrl) || ''
+));
 
-const currentAvifSrc = computed(() => (imageError.value ? undefined : props.card.primaryImageAvifUrl));
+const currentAvifSrc = computed(() => (
+  isFallback.value ? props.placeholderAvatarAvif : props.card.primaryImageAvifUrl
+));
 
 function onImageError() {
   imageError.value = true;

package/components/card/video/index.vue

@@ -5,7 +5,6 @@
       {'--mini': mini},
       {'--compact': compact},
       {'--avatar': card.channelAvatar},
-      {'--no-channel': isChannelPage},
       {'--progress': hasProgress},
       {'--favorite': isFavoriteCard},
       {'--tags-open': isTagsOpen},
@@ -95,30 +94,10 @@
         class="card-video__title _truncate"
       >{{ card.title }}
       </NuxtLink>
-      <component
-        v-if="!mini && !compact && !history && card.channelName"
-        :is="component"
-        :to="channelLink"
-        class="card-video__channel-wrapper"
-      >
-        <span
-          :data-nosnippet="!card.channelName || null"
-          class="card-video__channel-title"
-        >
-          <template v-if="card.channelName">
-            {{ card.channelName }}
-          </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"
@@ -189,9 +168,6 @@ const component = computed(() => props.card.channelName ? NuxtLinkComponent : 'd
 
 const { generateLink } = useGenerateLink();
 
-const pageName = useGetPureRouteName();
-const isChannelPage = computed(() => pageName === 'channels-channel');
-
 const previewId = useId();
 const { activePreviewId, startPreviewByHover, stopPreviewByHover, startPreviewByTouch } = useVideoPreview();
 
@@ -383,7 +359,6 @@ $dropdown-column: 18px;
   grid-column: 2;
 }
 
-.--avatar .card-video__channel-wrapper,
 .--avatar .card-video__meta {
   grid-column: 2;
 }
@@ -398,25 +373,26 @@ $dropdown-column: 18px;
   grid-column: 2 / -1;
 }
 
+/* Кружок канала — только на десктопе: на мобиле карточка отдаёт всю ширину заголовку */
 @include to-br(sm) {
-  .--no-channel .card-video__logo-wrapper,
-  .--no-channel .card-video__channel-wrapper {
+  .card-video .card-video__logo-wrapper {
     display: none;
   }
 
-  .--no-channel .card-video__wrapper {
+  .card-video .card-video__wrapper {
     grid-template-columns: minmax(0, 1fr) $dropdown-column;
   }
 
-  .--no-channel .card-video__title {
+  .card-video .card-video__title,
+  .card-video .card-video__meta {
     grid-column: 1;
   }
 
-  .--no-channel .card-video__tags {
+  .card-video .card-video__tags {
     grid-column: 1 / -1;
   }
 
-  .--no-channel .card-video__dropdown {
+  .card-video .card-video__dropdown {
     grid-column: 2;
     grid-row: 1;
   }
@@ -426,7 +402,7 @@ $dropdown-column: 18px;
   grid-template-columns: minmax(0, 1fr) $dropdown-column;
 }
 
-/* Без строки канала и тегов вторая строка грида не нужна — иначе аватар и «троеточие» растягиваются. */
+/* Без тегов вторая строка грида не нужна — иначе кружок и «троеточие» растягиваются. */
 .--compact .card-video__logo-wrapper,
 .--compact .card-video__dropdown {
   grid-row: 1;
@@ -455,23 +431,7 @@ $dropdown-column: 18px;
   }
 }
 
-.card-video__channel-wrapper {
-  @include font-xs;
-
-  font-weight: 400;
-  display: grid;
-  grid-row: 2;
-  grid-template-columns: auto 1fr;
-  align-items: center;
-  column-gap: 4px;
-  margin-top: 6px;
-
-  @include to-cq($layout-breakpoint) {
-    grid-column: 1;
-  }
-}
-
-/* Мета-строка истории: «канал · когда смотрели / сколько осталось» на месте строки канала */
+/* Мета-строка истории: когда смотрели / сколько осталось */
 .card-video__meta {
   @include font-xs;
 
@@ -488,19 +448,6 @@ $dropdown-column: 18px;
   }
 }
 
-/* На узкой карточке (две колонки на телефоне) «канал · время» в строку не встают, а нешрикуемое
-   время задаёт колонке min-content и разносит грид — оставляем только время просмотра */
-@include to-cq($layout-breakpoint) {
-  .card-video__meta .card-video__channel-title {
-    display: none;
-  }
-}
-
-.card-video__meta .card-video__channel-title + .card-video__watched::before {
-  content: '·';
-  margin-inline: 6px;
-}
-
 .card-video__watched {
   display: flex;
   align-items: center;
@@ -519,29 +466,24 @@ $dropdown-column: 18px;
   border-radius: 50%;
 }
 
+/* Кружок раскидан на обе строки: его 36px набираются заголовком плюс плашками, иначе под
+   однострочным заголовком остаётся пустой хвост высотой в остаток кружка */
 .card-video__logo-wrapper {
   grid-row: 1/3;
   grid-column: 1;
 }
 
-.card-video__logo-wrapper[href],
-.card-video__channel-wrapper[href] {
+/* У видео без моделей плашек нет вовсе — второй строки тоже, кружку спан не по чему набирать */
+.card-video__wrapper:not(:has(.card-video__tags, .card-video__meta)) .card-video__logo-wrapper {
+  grid-row: 1;
+}
+
+.card-video__logo-wrapper[href] {
   @include hover(opacity) {
     opacity: 0.9;
   }
 }
 
-.card-video__channel-title {
-  @include font-xs;
-
-  font-weight: 400;
-  color: $video-card-secondary;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  max-width: 100%;
-}
-
 .card-video.--mini {
   row-gap: 8px;
 }
@@ -561,13 +503,15 @@ $dropdown-column: 18px;
   z-index: $z-index-dropdown;
 }
 
-/* Ряд плашек лежит ниже «троеточия» — колонка под меню в этом ряду свободна, отдаём её плашкам */
+/* Ряд плашек лежит ниже «троеточия» — колонка под меню в этом ряду свободна, отдаём её плашкам.
+   Строка задана явно: на авторазмещении плашки уезжали в третью строку, оставляя пустую вторую */
 .card-video__tags {
+  grid-row: 2;
   grid-column: 1 / -1;
 
   @include from-cq($layout-breakpoint) {
     grid-column: 2 / -1;
-    margin-top: 10px;
+    margin-top: 6px;
   }
 }
 

package/components/info/main.vue

@@ -204,20 +204,25 @@ function onFollowClick() {
 }
 
 const placeholders: Record<string, string> = {
-  model: '/img/model-placeholder.webp',
+  model: '/img/model-placeholder-square.webp',
   channel: '/img/logo-placeholder.svg',
 };
-const placeholder = computed(() => placeholders[ props.type || 'channel' ]);
+/** У канала заглушка — svg, avif-пары у неё нет. */
+const avifPlaceholders: Record<string, string | undefined> = {
+  model: '/img/model-placeholder-square.avif',
+};
+const placeholderType = computed(() => props.type || 'channel');
+const placeholder = computed(() => placeholders[ placeholderType.value ]);
 const imageError = ref(false);
-const currentImage = computed(() => {
-  if (imageError.value) return placeholder.value;
-  return props.card.img || placeholder.value;
-});
+const isFallback = computed(() => imageError.value || !props.card.img);
+const currentImage = computed(() => (isFallback.value ? placeholder.value : props.card.img));
 
 /** `.info-main__img` — 80px до sm, 96px дальше. `auto` впереди — см. `UiImg`. */
 const IMG_SIZES = `auto, (max-width: ${CSS_BREAKPOINTS.sm - 1}px) 80px, 96px`;
 
-const currentAvifSrc = computed(() => (imageError.value ? undefined : props.card.imgAvifUrl));
+const currentAvifSrc = computed(() => (
+  isFallback.value ? avifPlaceholders[ placeholderType.value ] : props.card.imgAvifUrl
+));
 
 function getParameter(name: string) {
   return props.card.parameters?.find(p => p.name === name)?.values?.[ 0 ]?.name;
@@ -296,6 +301,7 @@ const socialItems = computed<ILinkItem[]>(() => {
 
 .info-main.--model .info-main__content {
   padding: 16px;
+  grid-template-columns: auto 1fr;
 
   @include from-br(sm) {
     padding: 20px;

package/components/search/item.vue

@@ -46,8 +46,8 @@ const icon = computed(() => {
   const square = pickPortraitVariant(props.item?.portraits)?.square;
 
   return {
-    webp: square?.webp || '/img/model-placeholder.webp',
-    avif: square?.avif,
+    webp: square?.webp || '/img/model-placeholder-square.webp',
+    avif: square?.webp ? square.avif : '/img/model-placeholder-square.avif',
   };
 });
 

package/components/section/swiper-cards.vue

@@ -38,6 +38,7 @@
           <CardRound
             :card="item"
             :placeholder-avatar="placeholderAvatar"
+            :placeholder-avatar-avif="placeholderAvatarAvif"
             :without-count="withoutCount"
             class="section-swiper-cards__card"
           />
@@ -79,6 +80,8 @@ withDefaults(defineProps<{
   /** Вариант заголовка — см. `UiSectionTitle` */
   variant?: 'page' | 'section'
   placeholderAvatar?: string
+  /** Та же заглушка в avif — см. `CardRound` */
+  placeholderAvatarAvif?: string
   /** Карточки только с аватаром и названием, без счётчика роликов */
   withoutCount?: boolean
 }>(), {

package/components/view/model-videos.vue

@@ -92,7 +92,8 @@
       v-if="similarModels && similarModels.length > 0"
       :items="modelsRoundCards"
       :title="$t('similar_models')"
-      placeholder-avatar="/img/model-placeholder.webp"
+      placeholder-avatar="/img/model-placeholder-square.webp"
+      placeholder-avatar-avif="/img/model-placeholder-square.avif"
       class="view-model-videos__other-models"
       hydrate-on-visible
     />

package/components/view/models.vue

@@ -6,7 +6,8 @@
         v-if="topCards.length >= MINIMUM_TOP_THUMBS"
         :items="topCards"
         class="view-models__popular"
-        placeholder-avatar="/img/model-placeholder.webp"
+        placeholder-avatar="/img/model-placeholder-square.webp"
+        placeholder-avatar-avif="/img/model-placeholder-square.avif"
         only-grid
       />
 

package/components/view/video.vue

@@ -91,7 +91,8 @@
       :items="modelsRoundCards"
       :title="$t('related_models')"
       class="view-video__popular-models"
-      placeholder-avatar="/img/model-placeholder.webp"
+      placeholder-avatar="/img/model-placeholder-square.webp"
+      placeholder-avatar-avif="/img/model-placeholder-square.avif"
       hydrate-on-visible
     />
 

package/components/view/videos.vue

@@ -49,7 +49,8 @@
         :all-link-text="$t('show_all_models')"
         :header-link-text-short="$t('all_models')"
         class="view-videos__popular-models"
-        placeholder-avatar="/img/model-placeholder.webp"
+        placeholder-avatar="/img/model-placeholder-square.webp"
+        placeholder-avatar-avif="/img/model-placeholder-square.avif"
         hydrate-on-visible
       />
     </GridVideos>

package/package.json

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

package/pages/categories/[slug].vue

@@ -55,7 +55,8 @@
           :items="modelsRoundCards"
           :title="$t('category_top_models_title', {name: title})"
           class="category__models"
-          placeholder-avatar="/img/model-placeholder.webp"
+          placeholder-avatar="/img/model-placeholder-square.webp"
+          placeholder-avatar-avif="/img/model-placeholder-square.avif"
         />
       </template>
     </GridVideos>

package/pages/channels/[channel].vue

@@ -52,7 +52,8 @@
           :items="modelsRoundCards"
           :title="t('channels_popular_models')"
           class="channel__videos-models"
-          placeholder-avatar="/img/model-placeholder.webp"
+          placeholder-avatar="/img/model-placeholder-square.webp"
+          placeholder-avatar-avif="/img/model-placeholder-square.avif"
           hydrate-on-visible
         />
       </template>

package/pages/following.vue

@@ -18,7 +18,8 @@
       all-link="/library/models"
       icon="user"
       variant="section"
-      placeholder-avatar="/img/model-placeholder.webp"
+      placeholder-avatar="/img/model-placeholder-square.webp"
+      placeholder-avatar-avif="/img/model-placeholder-square.avif"
       class="following__section"
       without-count
     />

package/pages/search/[slug]/index.vue

@@ -49,7 +49,8 @@
           <template #default="item">
             <CardRound
               :card="item"
-              placeholder-avatar="/img/model-placeholder.webp"
+              placeholder-avatar="/img/model-placeholder-square.webp"
+              placeholder-avatar-avif="/img/model-placeholder-square.avif"
             />
           </template>
           <template