itube-specs 0.0.848 → 0.0.850

package/components/card/video/index.vue

@@ -11,10 +11,9 @@
     <NuxtLink
       :to="link"
       class="card-video__poster-wrapper"
-      @mouseenter.passive="playVideo"
-      @touchmove.passive="playVideo"
-      @mouseleave.passive="stopVideo"
-      @touchend.passive="stopVideo"
+      @mouseenter.passive="startPreviewByHover(previewId)"
+      @mouseleave.passive="stopPreviewByHover(previewId)"
+      @touchstart.passive="startPreviewByTouch(previewId)"
     >
       <UiImg
         :src="currentPoster"
@@ -163,17 +162,12 @@ const { generateLink } = useGenerateLink();
 const pageName = useGetPureRouteName();
 const isChannelPage = computed(() => pageName === 'channels-channel');
 
-const isPreviewShow = ref(false);
+const previewId = useId();
+const { activePreviewId, startPreviewByHover, stopPreviewByHover, startPreviewByTouch } = useVideoPreview();
 
-const dropdownMounted = ref(false);
-
-function playVideo() {
-  isPreviewShow.value = true;
-}
+const isPreviewShow = computed(() => activePreviewId.value === previewId);
 
-function stopVideo() {
-  isPreviewShow.value = false;
-}
+const dropdownMounted = ref(false);
 
 const posterError = ref(false);
 const avatarError = ref(false);

package/components/card/video/preview.vue

@@ -1,28 +1,103 @@
-<!-- Видео-предпросмотр (автоплей) поверх постера карточки видео -->
+<!-- Видео-предпросмотр (автоплей) поверх постера карточки видео + индикатор загрузки -->
 <template>
-  <video
-    :src="url"
-    class="card-video-preview"
-    loop
-    muted
-    autoplay
-    playsinline
-  />
+  <span class="card-video-preview">
+    <video
+      ref="videoRef"
+      :src="url"
+      :class="{'--playing': isPlaying}"
+      class="card-video-preview__video"
+      loop
+      muted
+      autoplay
+      playsinline
+      @loadedmetadata="updateProgress"
+      @progress="updateProgress"
+      @playing="onPlaying"
+      @waiting="onWaiting"
+      @pause="isPlaying = false"
+    />
+    <span
+      :class="{'--done': isLoaded}"
+      :style="{'--preview-progress': isLoaded ? 1 : progress}"
+      class="card-video-preview__loader"
+    />
+  </span>
 </template>
 
 <script setup lang="ts">
 defineProps<{
   url: string
 }>();
+
+const videoRef = ref<HTMLVideoElement | null>(null);
+const isPlaying = ref(false);
+const isLoaded = ref(false);
+const progress = ref(0);
+
+/** Доля скачанного файла превью: правый край последнего буферизованного отрезка к общей длительности. */
+function updateProgress() {
+  const video = videoRef.value;
+  if (!video || !video.buffered.length || !Number.isFinite(video.duration)) return;
+
+  progress.value = video.buffered.end(video.buffered.length - 1) / video.duration;
+  if (progress.value >= 1) isLoaded.value = true;
+}
+
+function onPlaying() {
+  isPlaying.value = true;
+  isLoaded.value = true;
+}
+
+/** Буферизация на середине: возвращаем постер и полосу, она продолжит с реально скачанного места. */
+function onWaiting() {
+  isPlaying.value = false;
+  isLoaded.value = false;
+}
+
+onMounted(() => {
+  const video = videoRef.value;
+  if (!video) return;
+
+  video.muted = true;
+  video.play().catch(() => {
+    isPlaying.value = false;
+  });
+});
 </script>
 
 <style lang="scss">
+$loader-height: 4px;
+
 .card-video-preview {
   position: absolute;
   inset: 0;
+  z-index: $z-index-plus;
+}
+
+.card-video-preview__video {
   width: 100%;
   height: 100%;
-  z-index: $z-index-plus;
   object-fit: cover;
+  opacity: 0;
+}
+
+/* Пока автоплей не стартовал, браузер рисует поверх видео нативную кнопку плей — держим элемент невидимым */
+.card-video-preview__video.--playing {
+  opacity: 1;
+}
+
+.card-video-preview__loader {
+  position: absolute;
+  inset: 0 0 auto;
+  height: $loader-height;
+  background: $video-card-preview-loader-bg;
+  transform: scaleX(var(--preview-progress, 0));
+  transform-origin: left center;
+  transition: var(--transition) transform, var(--transition) var(--default-transition-duration) opacity;
+}
+
+/* Догрузилось или пошло воспроизведение — полоса доезжает до конца и только потом гаснет */
+.card-video-preview__loader.--done {
+  opacity: 0;
 }
 </style>

package/composables/use-noindex.ts

@@ -1,13 +1,29 @@
+/** Минимум элементов в листинге, при котором страницу ещё имеет смысл индексировать. */
+export const MIN_INDEXABLE_ITEMS = 5;
+
 /**
 * Помечает страницу как noindex для поисковиков (ссылки при этом проходятся — follow).
-* Для приватных/служебных страниц и результатов внутреннего поиска.
+* Для приватных/служебных страниц, результатов внутреннего поиска и «тонких» листингов.
+* Условие реактивное: пока оно false, тег не выпускается и hreflang-кластер остаётся.
+*/
+export function useNoindex(when: MaybeRefOrGetter<boolean> = true) {
+  const isNoindex = computed(() => toValue(when));
+
+  useHead(() => ({
+    meta: isNoindex.value
+      ? [{ name: 'robots', content: 'noindex, follow' }]
+      : [],
+  }));
+
+  useSetSeoOverride(() => ({ noindex: isNoindex.value }));
+}
+
+/**
+* Закрывает от индексации «тонкий» листинг — страницу, где основных элементов
+* (роликов, а на листинге моделей — моделей) меньше порога. Считается по фактически
+* выданным на этом URL элементам, поэтому хвост пагинации и пустые выборки
+* по фильтрам тоже уходят в noindex.
 */
-export function useNoindex() {
-  useHead({
-    meta: [
-      { name: 'robots', content: 'noindex, follow' },
-    ],
-  });
-
-  useSetSeoOverride(() => ({ noindex: true }));
+export function useNoindexThinListing(count: MaybeRefOrGetter<number | undefined>) {
+  useNoindex(() => (toValue(count) ?? 0) < MIN_INDEXABLE_ITEMS);
 }

package/composables/use-video-preview.ts

@@ -0,0 +1,45 @@
+let isTouchUsed = false;
+let isOutsideTouchWatched = false;
+
+/** Хранит id карточки с активным превью: играет только одно, запуск нового гасит предыдущее. */
+export const useVideoPreview = () => {
+  const activePreviewId = useState<string | null>('active-video-preview', () => null);
+
+  const startPreviewByHover = (id: string) => {
+    if (isTouchUsed) return;
+    activePreviewId.value = id;
+  };
+
+  /** На тач-устройствах превью живёт до запуска следующего, поэтому гасим только по уходу мыши. */
+  const stopPreviewByHover = (id: string) => {
+    if (isTouchUsed) return;
+    if (activePreviewId.value === id) activePreviewId.value = null;
+  };
+
+  /**
+   * Гасит превью на любом касании страницы. Слушатель на capture-фазе, поэтому срабатывает раньше обработчика
+   * карточки: тап по другой карточке сначала гасит текущее превью, а потом запускает своё, тап по пустому месту — только гасит.
+   */
+  const watchOutsideTouch = () => {
+    if (isOutsideTouchWatched) return;
+    isOutsideTouchWatched = true;
+
+    document.addEventListener('touchstart', () => {
+      activePreviewId.value = null;
+    }, { capture: true, passive: true });
+  };
+
+  /** Тач-устройства дублируют тап синтетическими mouse-событиями — с первого касания ховерный путь глушим. */
+  const startPreviewByTouch = (id: string) => {
+    isTouchUsed = true;
+    watchOutsideTouch();
+    activePreviewId.value = id;
+  };
+
+  return {
+    activePreviewId,
+    startPreviewByHover,
+    stopPreviewByHover,
+    startPreviewByTouch,
+  };
+};

package/package.json

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

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

@@ -127,8 +127,6 @@ const featureFlags = useRuntimeConfig().public.featureFlags;
 
 const slug = useSlug();
 
-useNoindex();
-
 const [
   { data: modelsData },
   { data: categoriesData },
@@ -140,6 +138,8 @@ const [
   useFetchVideosSearchByNiche(VideosApiService.getSearchByNiche),
   useFetchRelatedSearch(SearchApiService.getPhrases),
 ]);
+
+useNoindexThinListing(() => videosData.value?.items?.length);
 const { t } = useI18n();
 const { generateLink } = useGenerateLink();
 

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

@@ -26,8 +26,6 @@ import { sortModels } from '../../../lib';
 
 const slug = useSlug();
 
-useNoindex();
-
 const { t } = useI18n();
 const pagePureName = useGetPureRouteName();
 
@@ -37,6 +35,8 @@ const [
   useFetchModelsByPhrases(ModelsApiService.getModelsSearchFiltered(slug.value)),
 ]);
 
+useNoindexThinListing(() => modelsData.value?.items?.length);
+
 const metaTitle = computed(() => convertString().toCapitalize(slug.value));
 
 const { meta, h1 } = useMeta(t, pagePureName, useAppConfig().brandName, sortModels, metaTitle);

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

@@ -28,8 +28,6 @@ import { sortItemsDefault } from '../../../lib';
 
 const slug = useSlug();
 
-useNoindex();
-
 const { t } = useI18n();
 
 const [
@@ -38,6 +36,8 @@ const [
   useFetchVideos(VideosApiService.getSearchByNicheFiltered(slug.value)),
 ]);
 
+useNoindexThinListing(() => videosData.value?.items?.length);
+
 const pagePureName = useGetPureRouteName();
 const metaTitle = computed(() => convertString().toCapitalize(slug.value));
 

package/pages/tag/[tag].vue

@@ -42,6 +42,8 @@ const [
   useFetchModelsByTag(ModelsApiService.getListByTag, 100),
 ]);
 
+useNoindexThinListing(() => data.value?.items?.length);
+
 const route = useRoute();
 const slug = computed(() => String(route.params[ 'tag' ]));