itube-specs 0.0.892 → 0.0.895

package/components/card/preview.vue

@@ -1,139 +0,0 @@
-<!-- Видео-предпросмотр (автоплей) поверх постера карточки видео + индикатор загрузки -->
-<template>
-  <span class="card-preview">
-    <video
-      ref="videoRef"
-      :src="url"
-      :class="{'--playing': isPlaying}"
-      class="card-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-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-preview {
-  position: absolute;
-  inset: 0;
-  z-index: $z-index-plus;
-}
-
-.card-preview__video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  opacity: 0;
-}
-
-/* Пока автоплей не стартовал, браузер рисует поверх видео нативную кнопку плей — держим элемент невидимым */
-.card-preview__video.--playing {
-  opacity: 1;
-}
-
-.card-preview__loader {
-  position: absolute;
-  inset: 0 0 auto;
-  height: $loader-height;
-  background: $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-preview__loader.--done {
-  opacity: 0;
-}
-</style>