<script setup lang="ts">
import router from "@/router/router.js";
import { useRoute } from "vue-router";
import YlHlsPlayer from "@/components/yl-hls-player.vue";
import { useRequest } from "vue-request";
import { myRequest } from "@/requests/request.ts";
const route = useRoute();
const { data: videoCheck, loading } = useRequest(() =>
  myRequest(`/api_file/file/download-video-check/${route.query.file}`),
);
</script>

<template>
  <el-button link @click="router.push(`/file`)" class="back"
    ><el-icon><i class="bi-arrow-left-circle" /></el-icon
    ><span> 返回</span></el-button
  >
  <div v-loading="loading" class="video">
    <YlHlsPlayer
      v-if="videoCheck.data.video && videoCheck.data.m3u8"
      :src="`/api/file/download-video/${route.query.file}`"
    />
    <video controls v-else style="height: 100%; width: 100%">
      <source :src="`/api/file/download/${route.query.file}`" />
    </video>
  </div>
</template>

<style scoped>
.back {
  margin: 5px 0;
}
.video {
  width: 100%;
  height: calc(100vh - 140px);
}
</style>
