<script setup lang="ts">
import AppVideoPlayer from '@/components/base/AppVideoPlayer.vue'
import type { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js'
import { useStorage } from '@vueuse/core'

const options = $ref<VideoJsPlayerOptions>()
const playList = [
  {
    Status: 'Normal',
    StreamType: 'video',
    HDRType: 'other',
    Size: 2989764,
    Definition: 'FD',
    Fps: '25',
    Specification: 'H264.LD',
    ModificationTime: '2022-07-07T09:17:14Z',
    Duration: '52.2251',
    Bitrate: '457.981',
    BitDepth: 8,
    Encrypt: 0,
    PreprocessStatus: 'UnPreprocess',
    Format: 'm3u8',
    NarrowBandType: '0',
    PlayURL: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
    CreationTime: '2022-07-07T09:17:09Z',
    Height: 360,
    Width: 640,
    JobId: '5d679a7ddacd479da554ad825ca6199a'
  },
  {
    Status: 'Normal',
    StreamType: 'video',
    HDRType: 'other',
    Size: 6089320,
    Definition: 'LD',
    Fps: '25',
    Specification: 'H264.SD',
    ModificationTime: '2022-07-07T09:17:14Z',
    Duration: '52.2251',
    Bitrate: '932.78',
    BitDepth: 8,
    Encrypt: 0,
    PreprocessStatus: 'UnPreprocess',
    Format: 'm3u8',
    NarrowBandType: '0',
    PlayURL:
      'https://vod.ezijing.com/cd737c13318749668e2d43ba85834637/c4037699664e457a861ef50f978ad639-a072aad43705bb8db65e0eb0befd0353-ld.m3u8?auth_key=1657933158-c408366eb5e14c239e06854a312258ad-0-1afb40ec08bef7139e9cf1df05289118',
    CreationTime: '2022-07-07T09:17:09Z',
    Height: 540,
    Width: 960,
    JobId: '7e504265b68748d48c5ee719668cff6d'
  },
  {
    Status: 'Normal',
    StreamType: 'video',
    HDRType: 'other',
    Size: 9788972,
    Definition: 'SD',
    Fps: '25',
    Specification: 'H264.SD',
    ModificationTime: '2022-07-07T09:17:16Z',
    Duration: '52.2251',
    Bitrate: '1499.504',
    BitDepth: 8,
    Encrypt: 0,
    PreprocessStatus: 'UnPreprocess',
    Format: 'm3u8',
    NarrowBandType: '0',
    PlayURL:
      'https://vod.ezijing.com/cd737c13318749668e2d43ba85834637/c4037699664e457a861ef50f978ad639-786ec47c6129e95b464fa1a789c60fba-sd.m3u8?auth_key=1657933158-0dd779f01e9f457caf99397d5de6bc6c-0-dc818d66343fdc6510424b1f86bd9e41',
    CreationTime: '2022-07-07T09:17:09Z',
    Height: 720,
    Width: 1280,
    JobId: '0ece5ba795584a9eb1ad77b90859b45a'
  },
  {
    Status: 'Normal',
    StreamType: 'audio',
    Size: 831803,
    Definition: 'SQ',
    Fps: '0',
    Specification: 'Audio',
    ModificationTime: '2022-07-07T09:17:14Z',
    Duration: '51.9576',
    Bitrate: '128.074',
    Encrypt: 0,
    PreprocessStatus: 'UnPreprocess',
    Format: 'mp3',
    NarrowBandType: '0',
    PlayURL:
      'https://vod.ezijing.com/cd737c13318749668e2d43ba85834637/c4037699664e457a861ef50f978ad639-58975598a5cef52ba59f3a18af9c98a8-sq.mp3?auth_key=1657933158-1385695e64154355b775f1cebb924f26-0-fec34e38bbdb9973a4e577b89e123232',
    CreationTime: '2022-07-07T09:17:09Z',
    Height: 0,
    Width: 0,
    JobId: 'ba0bb88b427048cab7d4abe8a112833f'
  }
]
let src = $ref({ src: '//bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8', type: 'application/x-mpegURL' })
// 跳过片头
const isSkip = useStorage('isSkip', false)
// 连续播放
const isAutoPlayNext = useStorage('isAutoPlayNext', false)
// 播放器ready
let isReady = $ref<boolean>(false)
let videoJsPlayer = $ref<VideoJsPlayer | null>()
const onReady = (player: VideoJsPlayer) => {
  videoJsPlayer = player
  isReady = true
  console.log(videoJsPlayer)
  // videoJsPlayer.src('/trailer.mp4')
}
function changeSrc(data: any) {
  console.log(data)
  src = { src: data.PlayURL, type: 'application/x-mpegURL' }
}
</script>

<template>
  <AppVideoPlayer :options="options" :src="src" @ready="onReady"></AppVideoPlayer>
  <!-- 设置 -->
  <teleport to=".vjs-control-bar" v-if="isReady">
    <el-popover trigger="hover" effect="dark" placement="top" :teleported="false">
      <template #reference>
        <button class="vjs-hd-control vjs-control vjs-button" type="button">
          <span class="vjs-icon-hd"></span>
        </button>
      </template>
      <ul>
        <li v-for="(item, index) in playList" :key="index" @click="changeSrc(item)">{{ item.Definition }}</li>
      </ul>
    </el-popover>
    <el-popover trigger="hover" effect="dark" placement="top" :teleported="false">
      <template #reference>
        <button class="vjs-cog-control vjs-control vjs-button" type="button">
          <span class="vjs-icon-cog"></span>
        </button>
      </template>
      <ul>
        <li>始终跳过片头 <el-switch v-model="isSkip"></el-switch></li>
        <li>连续播放 <el-switch v-model="isAutoPlayNext"></el-switch></li>
      </ul>
    </el-popover>
  </teleport>
</template>

<style lang="scss" scoped>
.vjs-icon-hd,
.vjs-icon-cog {
  font-size: 1.8em;
}
</style>
