itube-specs 0.0.850 → 0.0.852

package/components/card/video/preview.vue

@@ -29,21 +29,53 @@ defineProps<{
   url: string
 }>();
 
+/** Стартовая ширина полосы: видна сразу по ховеру/касанию, не дожидаясь первого скачанного куска файла. */
+const MIN_PROGRESS = 0.05;
+/** Докуда полоса подползает сама, пока нет данных о реальной загрузке. */
+const CREEP_LIMIT = 0.45;
+const CREEP_INTERVAL = 150;
+const CREEP_STEP = 0.18;
+
 const videoRef = ref<HTMLVideoElement | null>(null);
 const isPlaying = ref(false);
 const isLoaded = ref(false);
-const progress = ref(0);
+const progress = ref(MIN_PROGRESS);
+
+let creepTimer: ReturnType<typeof setInterval> | null = null;
+
+function stopCreep() {
+  if (creepTimer) clearInterval(creepTimer);
+  creepTimer = null;
+}
+
+/** Имитация ожидания: пока идёт коннект к CDN и реального прогресса нет, полоса замедляясь подползает к CREEP_LIMIT. */
+function startCreep() {
+  creepTimer = setInterval(() => {
+    const next = progress.value + (CREEP_LIMIT - progress.value) * CREEP_STEP;
+
+    if (CREEP_LIMIT - next < CREEP_STEP / 100) {
+      stopCreep();
+      return;
+    }
+
+    progress.value = next;
+  }, CREEP_INTERVAL);
+}
 
 /** Доля скачанного файла превью: правый край последнего буферизованного отрезка к общей длительности. */
 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;
+  const loaded = video.buffered.end(video.buffered.length - 1) / video.duration;
+  if (loaded > 0) stopCreep();
+
+  progress.value = Math.max(loaded, progress.value);
+  if (loaded >= 1) isLoaded.value = true;
 }
 
 function onPlaying() {
+  stopCreep();
   isPlaying.value = true;
   isLoaded.value = true;
 }
@@ -55,6 +87,8 @@ function onWaiting() {
 }
 
 onMounted(() => {
+  startCreep();
+
   const video = videoRef.value;
   if (!video) return;
 
@@ -63,6 +97,8 @@ onMounted(() => {
     isPlaying.value = false;
   });
 });
+
+onBeforeUnmount(stopCreep);
 </script>
 
 <style lang="scss">

package/components/grid/videos.vue

@@ -37,9 +37,9 @@
       :top-chips="topChips"
       :playlist-id="playlistId"
       :playlist="playlist"
+      :hydrate-on-visible="HYDRATE_MARGIN"
       class="grid-videos__card"
       loading="lazy"
-      hydrate-on-visible
     />
     <slot name="grid-end"/>
   </div>
@@ -49,6 +49,8 @@
 import type { IVideoCard } from '../../types';
 
 const IDLE_COUNT = 4;
+/** Запас гидрации до появления карточки на экране: без него обработчики превью не успевают появиться к тапу. */
+const HYDRATE_MARGIN = { rootMargin: '300px' };
 
 const props = defineProps<{
   items: Array<IVideoCard>

package/components/ui/pagination.vue

@@ -176,7 +176,7 @@ function linkTo(value: string | number) {
 }
 
 watch(() => route.query['page'], () => {
-  document.documentElement.querySelector('#anchor')?.scrollIntoView({ behavior: 'smooth' });
+  document.documentElement.querySelector('#anchor')?.scrollIntoView({ behavior: 'instant' });
 });
 
 // canonical/hreflang выпускает app.vue — отсюда уходит только факт, который знает лишь пагинация

package/composables/use-video-preview.ts

@@ -1,12 +1,32 @@
 let isTouchUsed = false;
-let isOutsideTouchWatched = false;
+let isResetWatched = false;
 
 /** Хранит id карточки с активным превью: играет только одно, запуск нового гасит предыдущее. */
 export const useVideoPreview = () => {
   const activePreviewId = useState<string | null>('active-video-preview', () => null);
+  const router = useRouter();
+
+  const stopPreview = () => {
+    activePreviewId.value = null;
+  };
+
+  /**
+   * Ставится один раз при первом превью. Гасит его на любом касании страницы (слушатель на capture-фазе,
+   * поэтому тап по другой карточке сначала гасит текущее превью, а потом запускает своё) и на старте любого перехода —
+   * чтобы при уходе на страницу видео превью с индикатором не доживало до смены роута.
+   */
+  const watchPreviewReset = () => {
+    if (isResetWatched) return;
+    isResetWatched = true;
+
+    document.addEventListener('touchstart', stopPreview, { capture: true, passive: true });
+    router.beforeEach(stopPreview);
+  };
 
   const startPreviewByHover = (id: string) => {
     if (isTouchUsed) return;
+
+    watchPreviewReset();
     activePreviewId.value = id;
   };
 
@@ -16,23 +36,11 @@ export const useVideoPreview = () => {
     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();
+
+    watchPreviewReset();
     activePreviewId.value = id;
   };
 

package/package.json

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