<template>
  <div class="video">
    <video
      ref="videoRef"
      :src="url"
      webkit-playsinline="true"
      :x5-video-player-fullscreen="true"
      x5-video-orientation="portraint"
      x5-video-player-type="h5-page"
      playsinline="true"
      preload="auto"
      muted
      @playing="playing = true"
      @pause="isPause = true"
      @ended="endedCallback"
      @error="endedCallback"
      @click="preventPause"
    ></video>
    <img v-if="cover && !isPause" class="cover" v-show="!playing" :src="cover" :alt="cover" />
    <div class="play" @click="play" v-show="!playing">
      <Icon icon="pause" color="#fff" size="12" />
    </div>
  </div>
</template>

<script lang="ts" setup>
type Props = {
  url: string
  cover: string
}
withDefaults(defineProps<Props>(), {
  url: '',
  cover: ''
})

const videoRef = ref<HTMLVideoElement>()
const playing = ref(false)
const isPause = ref(false)
const play = () => {
  videoRef.value?.play()
}

const endedCallback = () => {
  playing.value = false
  isPause.value = false
  setTimeout(() => {
    if (!videoRef.value) return
    videoRef.value.currentTime = 0
  }, 200)
}

const pause = () => {
  if (!playing.value) return
  videoRef.value?.pause()
  playing.value = false
  isPause.value = true
}

const preventPause = (event: Event) => {
  event.preventDefault()
  pause()
}
defineExpose({ pause })
</script>

<style lang="less" scoped>
.video {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #000;
  video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cover {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transform: translate3d(0, 0, 0);
  }
  .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 2;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>