<template>
  <div ref="container" @dblclick="fullscreenSwich" style="width: 100%; height: 100%; background-color: #000000; margin: 0 auto">
    <div class="buttons-box" id="buttonsBox">
      <div class="buttons-box-left">
        <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
        <i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause"></i>
        <i class="iconfont icon-stop jessibuca-btn" @click="destroy"></i>
        <i v-if="isNotMute" class="iconfont icon-audio-high jessibuca-btn" @click="mute"></i>
        <i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="cancelMute"></i>
      </div>
      <div class="buttons-box-right">
        <span class="jessibuca-btn">{{ kBps }} kb/s</span>
        <span class="jessibuca-btn">{{ performance }}</span>
        <i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="screenshot" style="font-size: 1rem !important"></i>
        <i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i>
        <i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i>
        <i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onUnmounted } from 'vue';
import { onMounted } from 'vue';
const props = defineProps<{
  videoUrl: string;
}>();

const container = ref();
let playing = ref(false);
let isNotMute = ref(false);
let fullscreen = ref(false);
let loaded = ref(false);
let performance = ref('');
let kBps = ref(0);
let btnDom: HTMLElement | null = null;
//初始化jessibucaPlayer
let jessibucaPlayer: Window['Jessibuca'];
// const publicPath = import.meta.env.VITE_PUBLIC_PATH;
const initJessibuca = () => {
  jessibucaPlayer = new window.Jessibuca({
    container: container.value,
    autoWasm: true,
    background: '',
    controlAutoHide: false,
    debug: false,
    decoder: `/static/jessibuca/decoder.js`,
    forceNoOffscreen: true,
    hasAudio: true,
    hasVideo: true,
    heartTimeout: 5,
    heartTimeoutReplay: true,
    heartTimeoutReplayTimes: 3,
    hiddenAutoPause: false,
    hotKey: false,
    isFlv: false,
    isFullResize: false,
    isNotMute: isNotMute.value,
    isResize: false,
    keepScreenOn: false,
    loadingText: '请稍等, 视频加载中......',
    loadingTimeout: 10,
    loadingTimeoutReplay: true,
    loadingTimeoutReplayTimes: 3,
    openWebglAlignment: false,
    operateBtns: {
      fullscreen: false,
      screenshot: false,
      play: false,
      audio: false,
      record: false,
    },
    recordType: 'webm',
    rotate: 0,
    showBandwidth: false,
    supportDblclickFullscreen: false,
    timeout: 10,
    useMSE: location.hostname !== 'localhost' && location.protocol !== 'https:',
    useOffscreen: false,
    useWCS: location.hostname === 'localhost' || location.protocol === 'https',
    useWebFullScreen: false,
    videoBuffer: 0,
    wasmDecodeAudioSyncVideo: true,
    wasmDecodeErrorReplay: true,
    wcsUseVideoRender: true,
  });
  jessibucaPlayer.on('load', function () {
    console.log('on load init');
  });

  jessibucaPlayer.on('log', function (msg) {
    console.log('on log', msg);
  });
  jessibucaPlayer.on('record', function (msg) {
    console.log('on record:', msg);
  });
  jessibucaPlayer.on('pause', function () {
    playing.value = false;
  });
  jessibucaPlayer.on('play', function () {
    playing.value = true;
  });
  jessibucaPlayer.on('fullscreen', function (msg) {
    console.log('on fullscreen', msg);
    fullscreen.value = msg;
  });

  jessibucaPlayer.on('mute', function (msg) {
    console.log('on mute', msg);
    isNotMute.value = !msg;
  });
  jessibucaPlayer.on('audioInfo', function (msg) {
    console.log('audioInfo', msg);
  });

  jessibucaPlayer.on('bps', function (bps) {});
  let _ts = 0;
  jessibucaPlayer.on('timeUpdate', function (ts) {
    _ts = ts;
  });

  jessibucaPlayer.on('videoInfo', function (info) {});

  jessibucaPlayer.on('error', function (error) {});

  jessibucaPlayer.on('timeout', function () {});

  jessibucaPlayer.on('start', function () {});

  jessibucaPlayer.on('performance', function (_performance) {
    let show = '卡顿';
    if (_performance === 2) {
      show = '非常流畅';
    } else if (_performance === 1) {
      show = '流畅';
    }
    performance.value = show;
  });
  jessibucaPlayer.on('buffer', function (buffer) {});

  jessibucaPlayer.on('stats', function (stats) {});

  jessibucaPlayer.on('kBps', function (_kBps) {
    kBps.value = Math.round(_kBps);
  });

  // 显示时间戳 PTS
  jessibucaPlayer.on('videoFrame', function () {});

  //
  jessibucaPlayer.on('metadata', function () {});
};
/**点击播放 */
const playBtnClick = () => {
  console.log(props.videoUrl);
  if (jessibucaPlayer) {
    destroy();
  }
  initJessibuca();
  jessibucaPlayer.on('play', () => {
    playing.value = true;
    loaded.value = true;
    // quieting = jessibucaPlayer.quieting
  });
  if (jessibucaPlayer.hasLoaded()) {
    jessibucaPlayer.play(props.videoUrl);
  } else {
    jessibucaPlayer.on('load', () => {
      jessibucaPlayer.play(props.videoUrl);
    });
  }
};
/**暂停播放 */
const pause = () => {
  console.log(jessibucaPlayer);
  jessibucaPlayer && jessibucaPlayer.pause();
  playing.value = false;
  performance.value = '';
};
/**截屏 */
const screenshot = () => {
  jessibucaPlayer && jessibucaPlayer.screenshot();
};
/**静音 */
const mute = () => {
  jessibucaPlayer && jessibucaPlayer.mute();
};
/**取消静音 */
const cancelMute = () => {
  jessibucaPlayer && jessibucaPlayer.cancelMute();
};
/**全屏 */
const fullscreenSwich = () => {
  let isFull = isFullscreen();
  jessibucaPlayer.setFullscreen(!isFull);
  fullscreen.value = !isFull;
};

const isFullscreen = () => {
  return (
    document.fullscreenElement ||
    //@ts-ignore
    document.msFullscreenElement ||
    //@ts-ignore
    document.mozFullScreenElement ||
    //@ts-ignore
    document.webkitFullscreenElement ||
    false
  );
};

const destroy = () => {
  jessibucaPlayer && jessibucaPlayer.destroy();
  if (document.getElementById('buttonsBox') == null) {
    container.value.appendChild(btnDom);
  }
  //@ts-ignore
  jessibucaPlayer = null;
  playing.value = false;
  performance.value = '';
};
const updatePlayerDomSize = () => {
  let dom = container.value;
  if (!dom) return;
  let width = dom.parentNode.clientWidth;
  let height = (9 / 16) * width;
  const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
  if (height > clientHeight) {
    height = clientHeight;
    width = (16 / 9) * height;
  }
  dom.style.width = width + 'px';
  dom.style.height = height + 'px';
};
/**初始化 */
onMounted(() => {
  updatePlayerDomSize();
  window.onresize = () => {
    updatePlayerDomSize();
  };
  btnDom = document.getElementById('buttonsBox');
  console.log('初始化时的地址为: ' + props.videoUrl);
  playBtnClick();
});
/**销毁播放器 */
onUnmounted(() => {
  if (jessibucaPlayer) jessibucaPlayer.destroy();
  playing.value = false;
  loaded.value = false;
  performance.value = '';
});
</script>
<style scoped lang="less">
.buttons-box {
  width: 100%;
  height: 28px;
  background-color: rgba(43, 51, 63, 0.7);
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  left: 0;
  bottom: 0;
  user-select: none;
  z-index: 10;
}

.jessibuca-btn {
  width: 20px;
  color: rgb(255, 255, 255);
  line-height: 27px;
  margin: 0px 10px;
  padding: 0px 2px;
  cursor: pointer;
  text-align: center;
  font-size: 0.8rem !important;
}

.buttons-box-right {
  position: absolute;
  right: 0;
}
</style>
