itube-specs 0.0.885 → 0.0.889

package/assets/icons/common/clock.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12m11-4a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586z" clip-rule="evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6v6l4 2"/><circle cx="12" cy="12" r="10"/></svg>

package/assets/icons/common/heart-stroke.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="m18.271 13.77 1.813-1.813a4.121 4.121 0 1 0-5.828-5.829l-1.722 1.696zM3.946 12.403c-1.65-1.712-1.65-4.487 0-6.198a4.116 4.116 0 0 1 5.973 0l7.832 8.128-3.583 3.719a3.29 3.29 0 0 1-4.778 0z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart w-5 h-5" aria-hidden="true"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path></svg>

package/components/card/{video/dropdown.vue → dropdown/index.vue}

@@ -10,7 +10,7 @@
       <slot name="trigger">
         <button
           :aria-label="$t('open_menu')"
-          class="card-video-dropdown__trigger"
+          class="card-dropdown__trigger"
           type="button"
         >
           <UiIcon
@@ -23,7 +23,7 @@
     <template #header>
       <CardVideoMini
         :card="card"
-        class="card-video-dropdown__preview _to-md"
+        class="card-dropdown__preview _to-md"
       />
     </template>
     <template #items="className">
@@ -139,7 +139,7 @@ defineExpose({ openDropdown });
 </script>
 
 <style lang="scss">
-.card-video-dropdown__trigger {
+.card-dropdown__trigger {
   position: relative;
 
   &::after {
@@ -147,7 +147,7 @@ defineExpose({ openDropdown });
   }
 }
 
-.card-video-dropdown__preview {
+.card-dropdown__preview {
   padding: 16px 32px 16px 16px;
   border-bottom: 1px solid $video-card-dropdown-border;
 }

package/components/card/dropdown/trigger.vue

@@ -0,0 +1,54 @@
+<!-- Кнопка меню карточки: до первого клика в DOM только она, чанк самого меню грузится по требованию -->
+<template>
+  <LazyCardDropdown
+    v-if="isMounted"
+    v-bind="{ ...$attrs, ...props }"
+    auto-open
+  />
+  <button
+    v-else
+    v-bind="{ onClick: $attrs.onClick }"
+    :aria-label="t('open_menu')"
+    :class="[$attrs.class, 'card-dropdown__trigger']"
+    type="button"
+    @click="mountDropdown"
+  >
+    <UiIcon
+      name="dots-vertical"
+      size="18"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+import type { IVideoCard } from '../../../types';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<{
+  card: IVideoCard
+  showWatchLater?: boolean
+  showShare?: boolean
+  showReport?: boolean
+  showRemove?: boolean
+}>();
+
+const { t } = useI18n();
+
+const isMounted = ref(false);
+
+async function mountDropdown() {
+  await import('./index.vue');
+  isMounted.value = true;
+}
+</script>
+
+<style lang="scss">
+.card-dropdown__trigger {
+  position: relative;
+
+  &::after {
+    @include area-point;
+  }
+}
+</style>

package/components/card/history.vue

@@ -94,28 +94,14 @@
         </span>
       </p>
 
-      <LazyCardVideoDropdown
-        v-if="dropdownMounted"
+      <CardDropdownTrigger
         :card="videoCard"
         class="card-history__dropdown"
         show-remove
         show-share
-        auto-open
         @share="emit('share', videoCard)"
         @remove="emit('remove', card)"
       />
-      <button
-        v-else
-        :aria-label="t('open_menu')"
-        class="card-history__dropdown card-video-dropdown__trigger"
-        type="button"
-        @click="dropdownMounted = true"
-      >
-        <UiIcon
-          name="dots-vertical"
-          size="18"
-        />
-      </button>
     </div>
   </div>
 </template>
@@ -188,7 +174,6 @@ const videoCard = computed<IVideoCard>(() => ({
   thumbUrls: props.card.thumbUrls,
 }));
 
-const dropdownMounted = ref(false);
 </script>
 
 <style lang="scss">

package/components/card/video/index.vue

@@ -110,26 +110,12 @@
           />
         </div>
       </div>
-      <LazyCardVideoDropdown
-        v-if="dropdownMounted"
+      <CardDropdownTrigger
         :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>
@@ -167,8 +153,6 @@ const { activePreviewId, startPreviewByHover, stopPreviewByHover, startPreviewBy
 
 const isPreviewShow = computed(() => activePreviewId.value === previewId);
 
-const dropdownMounted = ref(false);
-
 const posterError = ref(false);
 const avatarError = ref(false);
 
@@ -266,13 +250,13 @@ $layout-breakpoint: 250px;
   }
 }
 
-.card-video-dropdown__trigger > .ui-icon {
+.card-dropdown__trigger > .ui-icon {
   @include from-br(sm) {
     transition: var(--transition) transform;
   }
 }
 
-.card-video-dropdown__trigger:is(:hover, :focus-visible) > .ui-icon {
+.card-dropdown__trigger:is(:hover, :focus-visible) > .ui-icon {
   @include from-br(sm) {
     transform: scale($video-card-dropdown-size--hover);
   }

package/components/player/playlist.vue

@@ -104,7 +104,7 @@
             class="player-playlist__card-mini"
             link
           />
-          <CardVideoDropdown
+          <CardDropdownTrigger
             :top="topDropdownIndex === index"
             :card="item"
             :show-remove="isOwner"
@@ -426,7 +426,8 @@ function onFollowClick() {
 }
 
 .player-playlist__card:is(:hover, :focus-visible) .player-playlist__card-dropdown,
-.player-playlist__card-dropdown.--open .player-playlist__card-dropdown {
+.player-playlist__card-dropdown.--open,
+.player-playlist__card-dropdown:focus-within {
   @include from-br(sm) {
     opacity: 1;
   }

package/components/section/nav-links.vue

@@ -4,7 +4,7 @@
     <UiLink
       v-for="(item, index) in items"
       :key="`sort-item-${index}`"
-      :to="item.query ? linkTo(item, index) : generateLink(item.value)"
+      :to="item.key ? linkTo(item, index) : generateLink(item.value)"
       :active="isActive(item, index)"
       :size="size"
       :theme="theme"
@@ -59,7 +59,7 @@ function isActive(item: INavLinkItem, index: number) {
     return true;
   }
 
-  if (item.key && item.query) {
+  if (item.key) {
     return route.query[item.key?.toLowerCase() || ''] === String(item.value)?.toLowerCase();
   }
 

package/components/view/videos.vue

@@ -30,6 +30,7 @@
         icon="video-camera"
       />
       <LazySectionToolbar
+        :sort-items="sortItems"
         class="view-videos__options"
         hydrate-on-idle
       />
@@ -89,6 +90,7 @@
 import type {
   IChipsItem,
   IModelCard,
+  INavLinkItem,
   IVideoCard,
   PaginatedResponse
 } from '../../types';
@@ -106,6 +108,7 @@ const props = defineProps<{
   dataModels: PaginatedResponse<IModelCard> | null
   topRandomCategories: IChipsItem[] | null
   flagImg?: string
+  sortItems?: INavLinkItem[]
 }>();
 
 const { t } = useI18n();

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

@@ -1,11 +1,13 @@
 import { selectDurationItems, sortItemsDefault, selectAddedItems } from '../../lib';
 import type { Language } from '../../runtime';
 import { AsyncData, getSelectedQuery } from '../../runtime';
-import type { IVideoCard, PaginatedResponse } from '../../types';
+import type { INavLinkItem, IVideoCard, PaginatedResponse } from '../../types';
 import { useRoute } from 'vue-router';
 
 export const useFetchVideos = async (
-    apiMethod: (...args: any[]) => Promise<PaginatedResponse<IVideoCard>>
+    apiMethod: (...args: any[]) => Promise<PaginatedResponse<IVideoCard>>,
+    // defaultOrder: null — сортировка не уходит в запрос, пока её не выбрали явно (выдача поиска)
+    { sortItems = sortItemsDefault, defaultOrder = '-country_order' }: { sortItems?: INavLinkItem[], defaultOrder?: string | null } = {}
 ) => {
     const route = useRoute();
 
@@ -30,7 +32,7 @@ export const useFetchVideos = async (
                 ['per-page']: perPage,
             },
             filters.value,
-            getSelectedQuery(route, sortItemsDefault) || '-country_order'
+            getSelectedQuery(route, sortItems) || defaultOrder || undefined
         )(),
         {
             watch: [

package/composables/use-meta.ts

@@ -31,8 +31,9 @@ export function useMeta(t: (key: string, params?: Record<string, unknown>) => st
   const sortType = computed(() => {
     const values = sortOptions?.map(item => item.value);
     const queryValue = String(route?.query?.['sort']);
-    const DEFAULT_VALUE = 'trending';
-    return queryValue && values?.includes(queryValue) ? queryValue : DEFAULT_VALUE;
+    // Дефолт — первая кнопка набора: у выдачи поиска это relevant, у остальных listing'ов trending
+    const defaultValue = sortOptions?.[0]?.value || 'trending';
+    return queryValue && values?.includes(queryValue) ? queryValue : defaultValue;
   });
 
   function getPath(key: string) {

package/lib/index.ts

@@ -11,6 +11,7 @@ export * from './scheme/sort-channels';
 export * from './scheme/sort-models';
 export * from './scheme/sort-playlists';
 export * from './scheme/sort-items-default';
+export * from './scheme/sort-items-search';
 export * from './scheme/history-periods';
 export * from './scheme/categories-navigation';
 export * from './scheme/navigation-items';

package/lib/scheme/sort-items-search.ts

@@ -0,0 +1,22 @@
+import type { INavLinkItem } from '../../types';
+
+/** Сортировки выдачи поиска: релевантность (без order — порядок отдаёт бэкенд) + те же new/longest. */
+export const sortItemsSearch: Array<INavLinkItem> = [
+  {
+    title: 'sort.relevant',
+    value: 'relevant',
+    key: 'sort',
+  },
+  {
+    title: 'sort.new',
+    value: 'new-videos',
+    key: 'sort',
+    query: '-created',
+  },
+  {
+    title: 'sort.longest',
+    value: 'longest',
+    key: 'sort',
+    query: '-duration',
+  },
+];

package/package.json

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

package/pages/library.vue

@@ -176,7 +176,7 @@ const newTotal = computed(() => libraryStub.newModels + libraryStub.newChannels
 const collections = computed<LibraryLink[]>(() => [
   {
     to: generateLink('/favorites'),
-    icon: 'heart',
+    icon: 'heart-stroke',
     title: t('favorites'),
     subtitle: t('plural.videos', libraryStub.favorites),
   },
@@ -206,7 +206,7 @@ const collections = computed<LibraryLink[]>(() => [
 const following = computed<LibraryLink[]>(() => [
   {
     to: generateLink('/models'),
-    icon: 'user-group',
+    icon: 'user',
     title: t('models'),
     subtitle: t('plural.models', libraryStub.models),
     badge: t('library.new_count', { count: libraryStub.newModels }),

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

@@ -17,34 +17,19 @@
       class="search__result"
     >
       <div
-        v-if="videosData && videosData.items?.length"
+        v-if="categoriesData && Object.keys(categoriesData)?.length"
         class="search__result-section"
       >
         <UiSectionTitle
-          :title="$t('videos')"
-          :count="videosData.total"
-          icon="video-camera"
+          :title="$t('categories')"
+          :count="Object.keys(categoriesData).length"
+          icon="grid"
           title-tag="h2"
         />
-        <GridVideos
-          :items="videosData.items.slice(0, MAXIMUM_VIDEOS)"
+        <GridCategories
+          :categories="categoriesData"
           priority
-        >
-          <template #grid-end>
-            <LazyAdvNativeBottom
-              v-if="featureFlags.AdsNativeEnabled"
-              hydrate-on-visible
-            />
-            <NuxtLink
-              v-if="videosData.items.length > MAXIMUM_VIDEOS || videosData.total > MAXIMUM_VIDEOS"
-              :to="generateLink(`/search/${slug}/videos`)"
-              class="search__show-all"
-            >
-              <span class="search__show-all-number">+{{ videosData.total - MAXIMUM_VIDEOS }}</span>
-              {{ $t('show_more_videos') }}
-            </NuxtLink>
-          </template>
-        </GridVideos>
+        />
       </div>
 
       <div
@@ -83,19 +68,34 @@
       </div>
 
       <div
-        v-if="categoriesData && Object.keys(categoriesData)?.length"
+        v-if="videosData && videosData.items?.length"
         class="search__result-section"
       >
         <UiSectionTitle
-          :title="$t('categories')"
-          :count="Object.keys(categoriesData).length"
-          icon="grid"
+          :title="$t('videos')"
+          :count="videosData.total"
+          icon="video-camera"
           title-tag="h2"
         />
-        <GridCategories
-          :categories="categoriesData"
+        <GridVideos
+          :items="videosData.items.slice(0, MAXIMUM_VIDEOS)"
           priority
-        />
+        >
+          <template #grid-end>
+            <LazyAdvNativeBottom
+              v-if="featureFlags.AdsNativeEnabled"
+              hydrate-on-visible
+            />
+            <NuxtLink
+              v-if="videosData.items.length > MAXIMUM_VIDEOS || videosData.total > MAXIMUM_VIDEOS"
+              :to="generateLink(`/search/${slug}/videos`)"
+              class="search__show-all"
+            >
+              <span class="search__show-all-number">+{{ videosData.total - MAXIMUM_VIDEOS }}</span>
+              {{ $t('show_more_videos') }}
+            </NuxtLink>
+          </template>
+        </GridVideos>
       </div>
     </div>
     <UiEmptyState
@@ -139,10 +139,21 @@ const [
   useFetchRelatedSearch(SearchApiService.getPhrases),
 ]);
 
-useNoindexThinListing(() => videosData.value?.items?.length);
 const { t } = useI18n();
 const { generateLink } = useGenerateLink();
 
+const hasVideosResults = Boolean(videosData.value?.items?.length);
+const hasModelsResults = Boolean(modelsData.value?.items?.length);
+const hasCategoriesResults = Boolean(categoriesData.value && Object.keys(categoriesData.value).length);
+
+if (hasModelsResults && !hasVideosResults && !hasCategoriesResults) {
+  await navigateTo(generateLink(`/search/${slug.value}/models`), { redirectCode: 302, replace: true });
+} else if (hasVideosResults && !hasModelsResults && !hasCategoriesResults) {
+  await navigateTo(generateLink(`/search/${slug.value}/videos`), { redirectCode: 302, replace: true });
+}
+
+useNoindexThinListing(() => videosData.value?.items?.length);
+
 const MAXIMUM_VIDEOS = 23;
 const MAXIMUM_MODELS = 15;
 

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

@@ -11,6 +11,7 @@
       :title="h1"
       :data-models="null"
       :top-random-categories="null"
+      :sort-items="sortItemsSearch"
       hide-categories
     />
     <div
@@ -24,7 +25,7 @@
 import type { IBreadcrumbItem } from '../../../types';
 import { convertString } from '../../../runtime';
 import { VideosApiService } from '../../../services/api/videos.service';
-import { sortItemsDefault } from '../../../lib';
+import { sortItemsSearch } from '../../../lib';
 
 const slug = useSlug();
 
@@ -33,7 +34,7 @@ const { t } = useI18n();
 const [
   { data: videosData, status: videosStatus },
 ] = await Promise.all([
-  useFetchVideos(VideosApiService.getSearchByNicheFiltered(slug.value)),
+  useFetchVideos(VideosApiService.getSearchByNicheFiltered(slug.value), { sortItems: sortItemsSearch, defaultOrder: null }),
 ]);
 
 useNoindexThinListing(() => videosData.value?.items?.length);
@@ -41,7 +42,7 @@ useNoindexThinListing(() => videosData.value?.items?.length);
 const pagePureName = useGetPureRouteName();
 const metaTitle = computed(() => convertString().toCapitalize(slug.value));
 
-const { meta, h1 } = useMeta(t, pagePureName, useAppConfig().brandName, sortItemsDefault, metaTitle);
+const { meta, h1 } = useMeta(t, pagePureName, useAppConfig().brandName, sortItemsSearch, metaTitle);
 
 watchEffect(() => {
   if (slug) {

package/runtime/utils/__tests__/get-selected-query.test.ts

@@ -17,6 +17,15 @@ describe('getSelectedQuery', () => {
     expect(getSelectedQuery(route as any, items as any)).toBeUndefined();
   });
 
+  it('элемент найден, но без query → undefined (сортировка не уходит в запрос)', () => {
+    const route = { query: { sort: 'relevant' } };
+    const items = [
+      { value: 'relevant', key: 'sort' },
+      { value: 'newest', key: 'sort', query: '-created' },
+    ];
+    expect(getSelectedQuery(route as any, items as any)).toBeUndefined();
+  });
+
   it('пустой items → undefined', () => {
     const route = { query: { sort: 'popular' } };
     expect(getSelectedQuery(route as any, [])).toBeUndefined();

package/services/api/videos.service.ts

@@ -59,7 +59,7 @@ export class VideosApiService {
       lang: Language,
       pagination: RequestPagination,
       videosFilter: IRequestVideoFilter,
-      order: string,
+      order?: string,
       niche = NicheHelper.getSiteDefaultNiche(),
     ): Promise<PaginatedResponse<IVideoCard>> => {
       return await ApiHelper.fetch(
@@ -74,7 +74,7 @@ export class VideosApiService {
           },
           params: {
             ...pagination,
-            order,
+            ...(order ? { order } : {}),
           },
           body: {
             query: phrase,