itube-specs 0.0.849 → 0.0.851

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,139 @@
-<!-- Видео-предпросмотр (автоплей) поверх постера карточки видео -->
+<!-- Видео-предпросмотр (автоплей) поверх постера карточки видео + индикатор загрузки -->
 <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 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(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;
+
+  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;
+}
+
+/** Буферизация на середине: возвращаем постер и полосу, она продолжит с реально скачанного места. */
+function onWaiting() {
+  isPlaying.value = false;
+  isLoaded.value = false;
+}
+
+onMounted(() => {
+  startCreep();
+
+  const video = videoRef.value;
+  if (!video) return;
+
+  video.muted = true;
+  video.play().catch(() => {
+    isPlaying.value = false;
+  });
+});
+
+onBeforeUnmount(stopCreep);
 </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-video-preview.ts

@@ -0,0 +1,53 @@
+let isTouchUsed = 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;
+  };
+
+  /** На тач-устройствах превью живёт до запуска следующего, поэтому гасим только по уходу мыши. */
+  const stopPreviewByHover = (id: string) => {
+    if (isTouchUsed) return;
+    if (activePreviewId.value === id) activePreviewId.value = null;
+  };
+
+  /** Тач-устройства дублируют тап синтетическими mouse-событиями — с первого касания ховерный путь глушим. */
+  const startPreviewByTouch = (id: string) => {
+    isTouchUsed = true;
+
+    watchPreviewReset();
+    activePreviewId.value = id;
+  };
+
+  return {
+    activePreviewId,
+    startPreviewByHover,
+    stopPreviewByHover,
+    startPreviewByTouch,
+  };
+};

package/package.json

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