itube-specs 0.0.849 → 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-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.849",
+  "version": "0.0.850",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {