<template>
  <video
    controls
    disablepictureinpicture
    ref="videoRef"
    class="video-item"
  ></video>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { FLVPlayer } from "@sherry-utils/video-player";

import ItemWrapper from "../wrappers/item-wrapper.vue";

const paused = ref<boolean>(true);
const videoRef = ref<HTMLVideoElement>();
const videoWrapperRef = ref<HTMLDivElement>();

let flvItem: FLVPlayer | null = null;

const startPlayer = () => {
  if (flvItem) {
    flvItem.play();
    paused.value = false;
  }
};

const setVideoEvents = (target: HTMLVideoElement) => {
  target.addEventListener("pause", () => {
    paused.value = true;
  });

  target.addEventListener("error", () => {
    loadVideo();
  });
};

const loadVideoByPath = (path: string) => {
  if (videoRef.value) {
    flvItem = new FLVPlayer(path);
    flvItem.connect(videoRef.value);
    setVideoEvents(videoRef.value);
  }
};

let reloadTime = 0;
const loadVideo = async () => {
  try {
    const path = "你的视频流地址";
    loadVideoByPath(path);
  } catch (error) {
    reloadTime += 1;

    if (reloadTime <= 3) {
      setTimeout(loadVideo, 0.5 * 1000);
    }
  }
};

onMounted(() => {
  loadVideo();
});

onBeforeUnmount(() => {
  flvItem?.close();
});
</script>