<!-- Видео-предпросмотр (автоплей) поверх постера + индикатор загрузки -->
<template>
  <span
    :class="{'_loading': !isPlaying}"
    class="ui-video-preview"
  >
    <video
      ref="videoRef"
      :src="url"
      :class="{'--playing': isPlaying}"
      class="ui-video-preview__video"
      loop
      muted
      autoplay
      playsinline
      @playing="isPlaying = true"
      @waiting="isPlaying = false"
      @pause="isPlaying = false"
    />
  </span>
</template>

<script setup lang="ts">
defineProps<{
  url: string
}>();

const videoRef = ref<HTMLVideoElement | null>(null);
const isPlaying = ref(false);

onMounted(() => {
  const video = videoRef.value;
  if (!video) return;

  video.muted = true;
  video.play().catch(() => {
    isPlaying.value = false;
  });
});
</script>

<style lang="scss">
.ui-video-preview {
  --size: 40px;

  position: absolute;
  inset: 0;
  z-index: $z-index-plus;
}

.ui-video-preview__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

/* Пока автоплей не стартовал, браузер рисует поверх видео нативную кнопку плей — держим элемент невидимым */
.ui-video-preview__video.--playing {
  opacity: 1;
}
</style>
