<template>
  <div class='playerBox'>

    <div id="dplayer" ref="videoRef"></div>

  </div>
</template>

<script setup>

import Dplayer from 'dplayer';
import {onMounted, onUnmounted, ref} from "vue";

const Isvisible = ref(false)
const highlight = ref("")
const videoRef = ref(null);

onMounted (() =>{
  Isvisible.value = true
  let seek_time = 0
  highlight.value = JSON.parse(sessionStorage.getItem("highlights"))

  if (highlight.value instanceof Array) {
    seek_time = highlight.value[0].time
  }


  videoRef.value = new Dplayer({
    container: videoRef.value,
    video: {
      url: sessionStorage.getItem("video_url"),
    },
    theme: '#b7daff',  // 风格颜色，例如播放条，音量条的颜色
    loop: false,  // 是否自动循环
    lang: 'zh-cn',  // 语言，'en', 'zh-cn', 'zh-tw'
    // screenshot: true,  // 是否允许截图（按钮），点击可以自动将截图下载到本地
    hotkey: true,  // 是否支持热键，调节音量，播放，暂停等
    preload: 'auto',  // 自动预加载
    volume: 1,  // 初始化音量
    autoplay: true,
    highlight: highlight.value
  })
  videoRef.value.seek(seek_time)
},)

onUnmounted(() => {
   Isvisible.value = false;
   sessionStorage.removeItem("video_url");
   sessionStorage.removeItem("highlights");
})

</script>


<style scoped>
#dplayer {
  width: 100%;
  height: 100%;
  margin: 10px auto;

}

:deep(.dplayer-controller .dplayer-icons .dplayer-label){
    padding-right: 50px
}

.playerBox {
  width: 100%;
  height: 80%;
  margin: 10px auto;
  text-align: right;
  overflow: hidden;
}

.nav a {
  margin: 100px auto;
  font: normal 20px/100px '微软雅黑';
}
</style>
