itube-specs 0.0.962 → 0.0.964

package/components/card/model.vue

@@ -145,8 +145,9 @@ function getValue(item: { title?: string; value?: string }) {
   object-fit: cover;
   object-position: center top;
 
-  @include from-br(sm) {
-    transition: var(--transition) transform;
+  /* Наезд картинки вдвое медленнее остальных переходов карточки — так в макете. */
+  @media (hover: hover) {
+    transition: .3s var(--ease-in-out) transform;
   }
 }
 
@@ -179,7 +180,7 @@ function getValue(item: { title?: string; value?: string }) {
   overflow: hidden;
   text-transform: capitalize;
 
-  @include from-br(sm) {
+  @media (hover: hover) {
     transition: var(--transition) color;
   }
 }

package/composables/fetch/use-fetch-vector-related-videos.ts

@@ -0,0 +1,31 @@
+import type { Language } from '../../runtime';
+import { AsyncData } from '../../runtime';
+import type { IVideoCard, PaginatedResponse } from '../../types';
+
+export const useFetchVectorRelatedVideos = async (
+  apiMethod: (...args: any[]) => Promise<PaginatedResponse<IVideoCard>>
+) => {
+  const lang = useLang() as Language;
+  const mobile = !!useState<boolean>('isMobile').value;
+  const limit = mobile ? 6 : 14;
+  const slug = useSlug();
+  const key = AsyncData.VectorRelatedVideos;
+  const stateKey = computed(() => `data-${key}-${slug.value}-${lang}`);
+
+  const { data, status, error } = await useAsyncData<PaginatedResponse<IVideoCard>>(
+    stateKey.value,
+    () => {
+      if (!slug.value) return Promise.resolve(null as unknown as PaginatedResponse<IVideoCard>);
+
+      return useApiFetcher<PaginatedResponse<IVideoCard>>(
+        stateKey.value,
+        apiMethod,
+        limit,
+        lang,
+        slug.value
+      )();
+    }
+  );
+
+  return { data, status, error };
+};

package/package.json

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

package/pages/videos/[slug].vue

@@ -34,6 +34,10 @@ const featureFlags = useRuntimeConfig().public.featureFlags;
 
 const pageName = useGetPureRouteName();
 
+const fetchRelated = featureFlags.VectorRelatedVideosEnabled
+  ? useFetchVectorRelatedVideos(featureFlags.FetchByUrlEnabled ? VideosApiService.getVectorRelatedVideosByUrl : VideosApiService.getVectorRelatedVideosById)
+  : useFetchRelatedVideos(featureFlags.FetchByUrlEnabled ? VideosApiService.getRelatedVideosByUrl : VideosApiService.getRelatedVideosById);
+
 const [
   { data: videoData, status: statusVideo },
   { data: relatedVideos, status },
@@ -41,7 +45,7 @@ const [
   { data: dataModels },
 ] = await Promise.all([
   useFetchVideo(featureFlags.FetchByUrlEnabled ? VideosApiService.getVideoByUrl : VideosApiService.getVideoById),
-  useFetchRelatedVideos(featureFlags.FetchByUrlEnabled ? VideosApiService.getRelatedVideosByUrl : VideosApiService.getRelatedVideosById),
+  fetchRelated,
   useFetchRelatedSearch(SearchApiService.getPhrases),
   useFetchTopModels(ModelsApiService.getTop, 24, AsyncData.TopModelsMore, String(pageName)),
 ]);

package/runtime/constants/async-data.ts

@@ -12,6 +12,7 @@ export const AsyncData = {
   ModelsByFirstLetter: 'models-by-first-letter',
   ModelsByFirstLetterChips: 'models-by-first-letter-chips',
   RelatedVideos: 'related-videos',
+  VectorRelatedVideos: 'vector-related-videos',
   RefererPhrases: 'referer-phrases-video',
   AsideVideos: 'aside-videos',
   TopModels: 'top-models',

package/server/api/videos/get-vector-related-videos-by-id/[id].get.ts

@@ -0,0 +1,33 @@
+import type { IVideoCard, IRawVideoCard } from '../../../../types';
+import { trackExternalCall } from '../../../utils/metrics';
+import { cleanVideoCard } from '../../../../runtime';
+
+export default defineEventHandler(async (event) => {
+  const apiUrl = process.env.NUXT_PUBLIC_API_DOMAIN;
+
+  const query = getQuery(event);
+  const queryString = new URLSearchParams(query as Record<string, string>).toString();
+  const id = getRouterParam(event, 'id');
+  const url = `${apiUrl}/v1/videos-vectors/${id}/related${queryString ? `?${queryString}` : ''}`;
+
+  const clientHeaders = event.node.req.headers as HeadersInit;
+
+  // similarity service is optional: its outage must not take the whole video page down
+  const rawData = await trackExternalCall('video-vector-related', () =>
+    apiFetch(url, {
+      method: 'GET',
+      headers: clientHeaders,
+    })
+  ).catch(() => null);
+
+  const items: IRawVideoCard[] = rawData?.data?.items || [];
+
+  const cleanedItems: IVideoCard[] = items.map(cleanVideoCard);
+
+  return {
+    currentPage: rawData?.data?.current_page,
+    allPages: rawData?.data?.all_pages,
+    total: rawData?.data?.total,
+    items: cleanedItems,
+  };
+});

package/server/api/videos/get-vector-related-videos-by-url/[url].get.ts

@@ -0,0 +1,31 @@
+import type { IVideoCard, IRawVideoCard } from '../../../../types';
+import { trackExternalCall } from '../../../utils/metrics';
+import { cleanVideoCard, getUrlWithProxiedParams } from '../../../../runtime';
+
+export default defineEventHandler(async (event) => {
+  const apiUrl = process.env.NUXT_PUBLIC_API_DOMAIN;
+
+  const slug = getRouterParam(event, 'url');
+  const url = getUrlWithProxiedParams(`${apiUrl}/v1/videos-vectors/url/${slug}/related`, event);
+
+  const clientHeaders = event.node.req.headers as HeadersInit;
+
+  // similarity service is optional: its outage must not take the whole video page down
+  const rawData = await trackExternalCall('video-vector-related', () =>
+    apiFetch(url, {
+      method: 'GET',
+      headers: clientHeaders,
+    })
+  ).catch(() => null);
+
+  const items: IRawVideoCard[] = rawData?.data?.items || [];
+
+  const cleanedItems: IVideoCard[] = items.map(cleanVideoCard);
+
+  return {
+    currentPage: rawData?.data?.current_page,
+    allPages: rawData?.data?.all_pages,
+    total: rawData?.data?.total,
+    items: cleanedItems,
+  };
+});

package/services/api/videos.service.ts

@@ -189,6 +189,53 @@ export class VideosApiService {
     );
   }
 
+  static async getVectorRelatedVideosById(
+    limit: number,
+    lang: Language,
+    id: string,
+    niche = NicheHelper.getSiteDefaultNiche(),
+  ): Promise<PaginatedResponse<IVideoCard>> {
+    return await ApiHelper.fetch(
+      `/videos/get-vector-related-videos-by-id/${id}`,
+      {
+        method: 'GET',
+        headers: {
+          'X-Niche': niche,
+          'X-Language': toHeaderLanguage(lang),
+          'X-Cache-Time': '259200',
+          'Content-Type': 'application/json',
+        },
+        params: {
+          limit,
+        },
+      },
+    useRuntimeConfig(),
+    );
+  }
+  static async getVectorRelatedVideosByUrl(
+    limit: number,
+    lang: Language,
+    url: string,
+    niche = NicheHelper.getSiteDefaultNiche(),
+  ): Promise<PaginatedResponse<IVideoCard>> {
+    return await ApiHelper.fetch(
+      `/videos/get-vector-related-videos-by-url/${url}`,
+      {
+        method: 'GET',
+        headers: {
+          'X-Niche': niche,
+          'X-Language': toHeaderLanguage(lang),
+          'X-Cache-Time': '259200',
+          'Content-Type': 'application/json',
+        },
+        params: {
+          limit,
+        },
+      },
+    useRuntimeConfig(),
+    );
+  }
+
   static async getVideoById(
     lang: Language,
     id: string,