itube-specs 0.0.837 → 0.0.840

package/assets/scss/base/_global.scss

@@ -28,12 +28,16 @@ html {
 
 body {
   font-family: $default-font-family, system-ui, sans-serif;
-  background-color: $body-bg;
   color: $body-text;
+  background-color: $body-bg;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+main {
+  background-color: $main-bg;
+}
+
 a {
   color: $link-text;
   text-decoration: none;

package/components/card/category.vue

@@ -5,38 +5,40 @@
     :to="localePath(`/categories/${convertString().toSlug(slug)}`)"
     class="card-category"
   >
-    <UiImg
-      :alt="card.title"
-      :src="currentImage"
-      :loading="priority ? 'eager' : 'lazy'"
-      :priority="priority"
-      class="card-category__img"
-      sizes="320px"
-      width="320"
-      height="180"
-      @error="onImageError"
-    />
-    <div class="card-category__wrapper">
-      <div class="card-category__wrapper-header">
-        <span class="card-category__title">
-          {{ card.title }}
-          <img
-            v-if="card.icon"
-            :src="`/icons/flags/${card.icon}.svg`"
-            :alt="card.icon"
-            class="card-category__icon"
-            width="17"
-            height="17"
-            loading="lazy"
-          >
-        </span>
-        <span class="card-category__count">
-          <UiIcon
-            name="video-camera"
-            size="14"
-          />
-          {{ $n(card.videosCount, 'compact') }}
-        </span>
+    <div class="card-category__inner">
+      <UiImg
+        :alt="card.title"
+        :src="currentImage"
+        :loading="priority ? 'eager' : 'lazy'"
+        :priority="priority"
+        class="card-category__img"
+        sizes="320px"
+        width="320"
+        height="180"
+        @error="onImageError"
+      />
+      <div class="card-category__wrapper">
+        <div class="card-category__wrapper-header">
+          <span class="card-category__title">
+            {{ card.title }}
+            <img
+              v-if="card.icon"
+              :src="`/icons/flags/${card.icon}.svg`"
+              :alt="card.icon"
+              class="card-category__icon"
+              width="17"
+              height="17"
+              loading="lazy"
+            >
+          </span>
+          <span class="card-category__count">
+            <UiIcon
+              name="video-camera"
+              size="14"
+            />
+            {{ $n(card.videosCount, 'compact') }}
+          </span>
+        </div>
       </div>
     </div>
   </NuxtLink>
@@ -73,6 +75,19 @@ const slug = computed(() => {
 
 <style lang="scss">
 .card-category {
+  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;
+    }
+  }
+}
+
+.card-category__inner {
   border-radius: $radius;
   border: 1px solid $category-card-border;
   background-color: $category-card-bg;
@@ -93,6 +108,7 @@ const slug = computed(() => {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  color: $category-card-title;
 
   @include from-br(sm) {
     transition: var(--transition) color;

package/components/card/channel.vue

@@ -116,8 +116,9 @@ const infoItems = computed<InfoItem[]>(() => [
   border: 1px solid $channel-card-border;
   background-color: $channel-card-bg;
 
-  @include hover(border-color) {
+  @include hover(border-color, box-shadow) {
     border-color: $channel-card-border--hover;
+    box-shadow: $card-ring-shadow--hover;
   }
 }
 

package/components/card/model.vue

@@ -118,9 +118,10 @@ function getValue(item: { title?: string; value?: string }) {
   border: 1px solid $model-card-border;
   display: block;
 
-  @include hover(border-color, background-color) {
+  @include hover(border-color, background-color, box-shadow) {
     border-color: $model-card-border--hover;
     background-color: $model-card-bg--hover;
+    box-shadow: $card-ring-shadow--hover;
   }
 }
 

package/components/card/playlist.vue

@@ -231,8 +231,9 @@ const avatarPlaceholder = computed(() => props.card.username.charAt(0));
   background-color: $playlist-card-bg;
   border: 1px solid $playlist-card-border;
 
-  @include hover(border-color) {
+  @include hover(border-color, box-shadow) {
     border-color: $playlist-card-border--hover;
+    box-shadow: $card-ring-shadow--hover;
   }
 }
 

package/components/card/round.vue

@@ -77,14 +77,14 @@ function onImageError() {
   border: 2px solid $card-round-border;
 
   @include from-br(sm) {
-    transition: var(--transition) border-color;
+    transition: var(--transition) border-color, var(--transition) box-shadow;
   }
 }
 
 .card-round:is(:hover, :focus-visible) .card-round__img {
   @include from-br(sm) {
     border-color: $card-round-border--hover;
-    outline: 1px solid $card-round-outline--hover;
+    box-shadow: $card-ring-shadow--hover;
   }
 }
 

package/components/card/video/dropdown.vue

@@ -100,6 +100,7 @@ const props = defineProps<{
   showShare?: boolean
   showReport?: boolean
   showRemove?: boolean
+  autoOpen?: boolean
 }>();
 
 const emit = defineEmits<{
@@ -117,6 +118,10 @@ function openDropdown() {
   dropdownRef.value?.openDropdown();
 }
 
+onMounted(() => {
+  if (props.autoOpen) openDropdown();
+});
+
 function onAddPlaylist() {
   usePlaylistAdd().openPlaylistAdd(isAuthorized, props.card, openDropdown);
 }
@@ -146,16 +151,4 @@ defineExpose({ openDropdown });
   padding: 16px 32px 16px 16px;
   border-bottom: 1px solid $video-card-dropdown-border;
 }
-
-.card-video-dropdown__trigger > .ui-icon {
-  @include from-br(sm) {
-    transition: var(--transition) transform;
-  }
-}
-
-.card-video-dropdown__trigger:is(:hover, :focus-visible) > .ui-icon {
-  @include from-br(sm) {
-    transform: scale($video-card-dropdown-size--hover);
-  }
-}
 </style>

package/components/card/video/index.vue

@@ -112,11 +112,25 @@
         </div>
       </div>
       <LazyCardVideoDropdown
+        v-if="dropdownMounted"
         :card="card"
         :show-watch-later="featureFlags.FeatureWatchLaterEnabled"
         class="card-video__dropdown"
         show-report
+        auto-open
       />
+      <button
+        v-else
+        :aria-label="t('open_menu')"
+        class="card-video__dropdown card-video-dropdown__trigger"
+        type="button"
+        @click="dropdownMounted = true"
+      >
+        <UiIcon
+          name="dots-vertical"
+          size="18"
+        />
+      </button>
     </div>
   </div>
 </template>
@@ -151,6 +165,8 @@ const isChannelPage = computed(() => pageName === 'channels-channel');
 
 const isPreviewShow = ref(false);
 
+const dropdownMounted = ref(false);
+
 function playVideo() {
   isPreviewShow.value = true;
 }
@@ -252,6 +268,18 @@ $layout-breakpoint: 250px;
   }
 }
 
+.card-video-dropdown__trigger > .ui-icon {
+  @include from-br(sm) {
+    transition: var(--transition) transform;
+  }
+}
+
+.card-video-dropdown__trigger:is(:hover, :focus-visible) > .ui-icon {
+  @include from-br(sm) {
+    transform: scale($video-card-dropdown-size--hover);
+  }
+}
+
 .card-video__resolution {
   top: $inset-label;
   right: $inset-label;
@@ -364,6 +392,7 @@ $layout-breakpoint: 250px;
 
   font-weight: 400;
   display: grid;
+  grid-row: 2;
   grid-template-columns: auto 1fr;
   align-items: center;
   column-gap: 4px;

package/components/filter/btn.vue

@@ -47,12 +47,6 @@ const mobileCount = computed(() => props.count > 9 ? '9+' : props.count);
   }
 }
 
-.filter-btn__reset {
-  @include from-br(sm) {
-    color: $filter-button-reset;
-  }
-}
-
 .filter-btn__count {
   @include font-xs;
 

package/components/ui/pagination.vue

@@ -126,7 +126,6 @@
 </template>
 
 <script setup lang="ts">
-// не забыват проставлять key на компоненте для переинициализации и отслеживания props.total чтобы пересчитывалось правильное сео
 import type { ButtonThemes } from '../../types';
 import { getPaginationNumbers } from '../../utils/ui-pagination/get-pagination-numbers';
 import { getPaginationLink } from '../../utils/ui-pagination/get-pagination-link';
@@ -180,17 +179,8 @@ watch(() => route.query['page'], () => {
   document.documentElement.querySelector('#anchor')?.scrollIntoView({ behavior: 'smooth' });
 });
 
-const i18n = useI18n();
-const localePath = useLocalePath();
-const siteUrl = useAppConfig().siteUrl as string;
-const { canonicalUrl, alternateLinks } = useSeoLinks(siteUrl, props.total === 1, i18n, localePath);
-
-useHead({
-  link: computed(() => [
-    { rel: 'canonical', href: canonicalUrl.value, key: `canonical-${route.path}` },
-    ...alternateLinks.value,
-  ]),
-});
+// canonical/hreflang выпускает app.vue — отсюда уходит только факт, который знает лишь пагинация
+useSetSeoOverride(() => ({ alonePage: props.total === 1 }));
 </script>
 
 <style lang="scss">

package/composables/__tests__/use-seo-links.test.ts

@@ -2,6 +2,7 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { mockNuxtImport } from '@nuxt/test-utils/runtime';
 import { useSeoLinks } from '../use-seo-links';
+import { useSeoOverridesState } from '../use-seo-overrides';
 
 let mockRoute = { path: '/videos', query: {} as Record<string, any> };
 
@@ -12,36 +13,47 @@ const mockI18n = {
   locales: { value: ['en', 'fr', 'de', 'ja', 'zh'] },
 };
 
-const mockLocalePath = (path: string, locale: string) =>
-  locale === 'en' ? path : `/${locale}${path}`;
+const mockLocalePath = (path: string, locale: string) => {
+  const bare = path.replace(/^\/(?:it|fr|es|ja|de|ko|ru|zh)(?=\/|$)/, '');
+  return locale === 'en' ? bare : `/${locale}${bare}`;
+};
 
 describe('useSeoLinks', () => {
   beforeEach(() => {
     mockRoute = { path: '/videos', query: {} };
     mockI18n.locale.value = 'en';
+    useSeoOverridesState().value = null;
   });
 
   it('canonical URL', () => {
-    const { canonicalUrl } = useSeoLinks('https://example.com', false, mockI18n, mockLocalePath);
+    const { canonicalUrl } = useSeoLinks('https://example.com', mockI18n, mockLocalePath);
     expect(canonicalUrl.value).toBe('https://example.com/videos');
   });
 
   it('canonical с query params', () => {
     mockRoute = { path: '/videos', query: { page: '2', sort: 'popular' } };
-    const { canonicalUrl } = useSeoLinks('https://example.com', false, mockI18n, mockLocalePath);
+    const { canonicalUrl } = useSeoLinks('https://example.com', mockI18n, mockLocalePath);
     expect(canonicalUrl.value).toContain('page=2');
     expect(canonicalUrl.value).toContain('sort=popular');
   });
 
   it('исключает sort при alonePage', () => {
     mockRoute = { path: '/videos', query: { page: '2', sort: 'popular' } };
-    const { canonicalUrl } = useSeoLinks('https://example.com', true, mockI18n, mockLocalePath);
+    useSeoOverridesState().value = { path: '/videos', alonePage: true };
+    const { canonicalUrl } = useSeoLinks('https://example.com', mockI18n, mockLocalePath);
     expect(canonicalUrl.value).toContain('page=2');
     expect(canonicalUrl.value).not.toContain('sort');
   });
 
+  it('alonePage с чужого пути не применяется', () => {
+    mockRoute = { path: '/videos', query: { page: '2', sort: 'popular' } };
+    useSeoOverridesState().value = { path: '/models', alonePage: true };
+    const { canonicalUrl } = useSeoLinks('https://example.com', mockI18n, mockLocalePath);
+    expect(canonicalUrl.value).toContain('sort=popular');
+  });
+
   it('alternate links для всех локалей', () => {
-    const { alternateLinks } = useSeoLinks('https://example.com', false, mockI18n, mockLocalePath);
+    const { alternateLinks } = useSeoLinks('https://example.com', mockI18n, mockLocalePath);
     const hreflangs = alternateLinks.value.map(l => l.hreflang);
     expect(hreflangs).toContain('en');
     expect(hreflangs).toContain('fr');
@@ -52,21 +64,70 @@ describe('useSeoLinks', () => {
   });
 
   it('ja маппится в ja-JP', () => {
-    const { alternateLinks } = useSeoLinks('https://example.com', false, mockI18n, mockLocalePath);
+    const { alternateLinks } = useSeoLinks('https://example.com', mockI18n, mockLocalePath);
     const jaLink = alternateLinks.value.find(l => l.hreflang === 'ja-JP');
     expect(jaLink).toBeDefined();
     expect(jaLink!.href).toContain('/ja/videos');
   });
 
   it('x-default указывает на en', () => {
-    const { alternateLinks } = useSeoLinks('https://example.com', false, mockI18n, mockLocalePath);
+    const { alternateLinks } = useSeoLinks('https://example.com', mockI18n, mockLocalePath);
     const xDefault = alternateLinks.value.find(l => l.hreflang === 'x-default');
     expect(xDefault!.href).toBe('https://example.com/videos');
   });
 
+  it('canonicalLocale переводит canonical на указанную локаль', () => {
+    mockRoute = { path: '/ja/videos/some-video', query: {} };
+    mockI18n.locale.value = 'ja';
+    useSeoOverridesState().value = { path: '/ja/videos/some-video', canonicalLocale: 'en' };
+    const { canonicalUrl } = useSeoLinks('https://example.com', mockI18n, mockLocalePath);
+    expect(canonicalUrl.value).toBe('https://example.com/videos/some-video');
+  });
+
+  it('canonicalLocale сохраняет допустимые query params', () => {
+    mockRoute = { path: '/ja/videos/some-video', query: { page: '2', foo: 'bar' } };
+    mockI18n.locale.value = 'ja';
+    useSeoOverridesState().value = { path: '/ja/videos/some-video', canonicalLocale: 'en' };
+    const { canonicalUrl } = useSeoLinks('https://example.com', mockI18n, mockLocalePath);
+    expect(canonicalUrl.value).toContain('/videos/some-video');
+    expect(canonicalUrl.value).not.toContain('/ja/');
+    expect(canonicalUrl.value).toContain('page=2');
+    expect(canonicalUrl.value).not.toContain('foo');
+  });
+
+  it('canonicalLocale убирает hreflang-альтернативы', () => {
+    mockRoute = { path: '/ja/videos/some-video', query: {} };
+    mockI18n.locale.value = 'ja';
+    useSeoOverridesState().value = { path: '/ja/videos/some-video', canonicalLocale: 'en' };
+    const { alternateLinks } = useSeoLinks('https://example.com', mockI18n, mockLocalePath);
+    expect(alternateLinks.value).toEqual([]);
+  });
+
+  it('canonicalLocale игнорируется для чужого пути', () => {
+    mockRoute = { path: '/ja/videos/other-video', query: {} };
+    mockI18n.locale.value = 'ja';
+    useSeoOverridesState().value = { path: '/ja/videos/some-video', canonicalLocale: 'en' };
+    const { canonicalUrl } = useSeoLinks('https://example.com', mockI18n, mockLocalePath);
+    expect(canonicalUrl.value).toBe('https://example.com/ja/videos/other-video');
+  });
+
+  it('canonicalLocale игнорируется, если совпадает с текущей локалью', () => {
+    mockRoute = { path: '/videos/some-video', query: {} };
+    useSeoOverridesState().value = { path: '/videos/some-video', canonicalLocale: 'en' };
+    const { canonicalUrl } = useSeoLinks('https://example.com', mockI18n, mockLocalePath);
+    expect(canonicalUrl.value).toBe('https://example.com/videos/some-video');
+  });
+
+  it('без override canonical остаётся на текущей локали', () => {
+    mockRoute = { path: '/ja/videos/some-video', query: {} };
+    mockI18n.locale.value = 'ja';
+    const { canonicalUrl } = useSeoLinks('https://example.com', mockI18n, mockLocalePath);
+    expect(canonicalUrl.value).toBe('https://example.com/ja/videos/some-video');
+  });
+
   it('игнорирует неразрешённые query params', () => {
     mockRoute = { path: '/videos', query: { page: '1', foo: 'bar', categories: 'teen' } };
-    const { canonicalUrl } = useSeoLinks('https://example.com', false, mockI18n, mockLocalePath);
+    const { canonicalUrl } = useSeoLinks('https://example.com', mockI18n, mockLocalePath);
     expect(canonicalUrl.value).toContain('page=1');
     expect(canonicalUrl.value).toContain('categories=teen');
     expect(canonicalUrl.value).not.toContain('foo');

package/composables/use-seo-links.ts

@@ -7,21 +7,22 @@ type LocalePathMock = (path: string, localeCode: string) => string;
 
 /**
  * Генерирует canonical URL и hreflang alternate-ссылки для всех локалей с сохранением допустимых query-параметров.
+ * Уточнения (единственная страница пагинации, подмена локали canonical) приходят через useSeoOverrides.
  * @param baseDomain - базовый домен (например 'https://example.com')
- * @param alonePage - если true, параметр sort исключается из URL
  * @param i18n - объект i18n с locale и locales
  * @param localePath - функция для генерации пути с локалью
  */
-export const useSeoLinks = (baseDomain: string, alonePage: boolean = false, i18n: I18nMock, localePath: LocalePathMock) => {
+export const useSeoLinks = (baseDomain: string, i18n: I18nMock, localePath: LocalePathMock) => {
     const route = useRoute();
+    const overrides = useSeoOverrides();
 
     const allowedParams: string[] = ['page', 'sort', 'categories'];
     const createUrlWithParams = (path: string) => {
         const url = new URL(`${baseDomain}${path}`);
 
         Object.entries(route.query).forEach(([key, value]) => {
-            // Если alonePage === true, пропускаем sort
-            if (allowedParams.includes(key) && !(alonePage && key === 'sort')) {
+            // на единственной странице sort не участвует в URL
+            if (allowedParams.includes(key) && !(overrides.value.alonePage && key === 'sort')) {
                 if (Array.isArray(value)) {
                     value.forEach(v => url.searchParams.append(key, v));
                 }
@@ -41,9 +42,20 @@ export const useSeoLinks = (baseDomain: string, alonePage: boolean = false, i18n
 
     const mapHreflang = (code: string) => langMap[code] || code;
 
-    const canonicalUrl = computed(() => createUrlWithParams(route.path));
+    const forcedCanonicalLocale = computed(() => {
+        const { canonicalLocale } = overrides.value;
+
+        return canonicalLocale && canonicalLocale !== i18n.locale.value ? canonicalLocale : null;
+    });
+
+    const canonicalUrl = computed(() => createUrlWithParams(
+        forcedCanonicalLocale.value ? localePath(route.path, forcedCanonicalLocale.value) : route.path
+    ));
 
     const alternateLinks = computed(() => {
+        // страница неканонична (нет перевода) — hreflang-кластер объявляет канонический URL, а не эта страница
+        if (forcedCanonicalLocale.value) return [];
+
         const links = [];
         const currentLocaleCode = i18n.locale.value;
 

package/composables/use-seo-overrides.ts

@@ -0,0 +1,44 @@
+type SeoOverrides = {
+    /** локаль, на которую должен вести canonical вместо текущей (у контента нет перевода) */
+    canonicalLocale?: string;
+    /** страница единственная в пагинации — из canonical выкидывается sort */
+    alonePage?: boolean;
+};
+
+type SeoOverridesState = SeoOverrides & {
+    path: string;
+};
+
+/**
+ * Уточнения к SEO-ссылкам, которые знает только страница или конкретный компонент,
+ * а выпускает теги один app.vue. Привязаны к route.path, чтобы значение
+ * не «протекало» на следующую страницу при клиентской навигации.
+ */
+export const useSeoOverridesState = () => useState<SeoOverridesState | null>('seo-overrides', () => null);
+
+/**
+ * Текущие уточнения для активного маршрута.
+ */
+export const useSeoOverrides = () => {
+    const route = useRoute();
+    const state = useSeoOverridesState();
+
+    return computed<SeoOverrides>(() => state.value?.path === route.path ? state.value : {});
+};
+
+/**
+ * Записывает уточнение для текущего маршрута. Значения от разных источников
+ * (страница, пагинация) складываются; при смене маршрута состояние сбрасывается.
+ */
+export const useSetSeoOverride = (overrides: MaybeRefOrGetter<SeoOverrides>) => {
+    const route = useRoute();
+    const state = useSeoOverridesState();
+
+    watchEffect(() => {
+        const patch = toValue(overrides);
+
+        state.value = state.value?.path === route.path
+            ? { ...state.value, ...patch }
+            : { path: route.path, ...patch };
+    });
+};

package/package.json

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

package/pages/categories/all.vue

@@ -7,7 +7,7 @@
     <UiSectionTitle
       :title="h1"
       :count="totalCount"
-      class="_title"
+      class="all__title"
       icon="grid"
     />
 
@@ -97,4 +97,8 @@ const breadcrumbs = [
 .all__popular-models {
   margin-top: 32px;
 }
+
+.all__title {
+  margin-bottom: 16px;
+}
 </style>

package/pages/categories/index.vue

@@ -8,7 +8,7 @@
     <UiSectionTitle
       :title="h1"
       :count="totalCount"
-      class="all__title _title"
+      class="grouped__title"
       icon="grid"
     />
 
@@ -100,6 +100,10 @@ const breadcrumbs = [
   }
 }
 
+.grouped__title {
+  margin-bottom: 16px;
+}
+
 .grouped__popular-models {
   display: flex;
   column-gap: 4px;

package/pages/models/index.vue

@@ -18,7 +18,7 @@
 
     <SectionSeoText
       :text="t('models_footer_text')"
-      class="_container"
+      class="models__seo _container"
       links-link="models_footer_links"
     />
   </div>
@@ -85,3 +85,9 @@ const breadcrumbs = [
   },
 ] as IBreadcrumbItem[];
 </script>
+
+<style lang="scss">
+.models__seo {
+  margin-bottom: 24px;
+}
+</style>

package/pages/videos/[slug].vue

@@ -46,7 +46,16 @@ const [
   useFetchTopModels(ModelsApiService.getTop, 24, AsyncData.TopModelsMore, String(pageName)),
 ]);
 
-const { t } = useI18n();
+const { t, locale } = useI18n();
+
+const defaultLocale = useRuntimeConfig().public.locales.default;
+
+// у видео нет перевода на текущий язык — canonical ведёт на дефолтную локаль
+useSetSeoOverride(() => ({
+  canonicalLocale: videoData.value && !videoData.value.isCanonical && locale.value !== defaultLocale
+    ? defaultLocale
+    : undefined,
+}));
 
 const title = computed(() => videoData.value?.title || '');
 const description = computed(() => videoData.value?.description || '');

package/runtime/utils/cleaners/clean-video-data.ts

@@ -67,4 +67,5 @@ export const cleanVideoData = (data: IRawVideoData): IVideoData => ({
   dislikes: data.dislikes || 0,
   hotspots: cleanHotspots(data.hotspots),
   timelinesGroups: cleanTimelineGroups(data.timelines_groups),
+  isCanonical: data.is_canonical || false,
 });

package/types/raw/raw-video-data.d.ts

@@ -33,7 +33,7 @@ export interface IRawVideoData {
   is_edited: boolean;         // unused
   fake_user_name: string;     // unused
   referer_phrases: null;      // unused
-  is_canonical: boolean;      // unused
+  is_canonical: boolean;
   custom_thumb_md5: string;   // unused
   channel: {
     name: string

package/types/video-data.d.ts

@@ -62,5 +62,6 @@ export interface IVideoData {
     thumbNum: number;
     description: string;
     hotspots: number[] | null,
-    timelinesGroups: ISceneGroup[] | null
+    timelinesGroups: ISceneGroup[] | null,
+    isCanonical: boolean
 }