<script>
import { provide, reactive, watch } from 'vue'
import { Options, Vue } from "vue-class-component";
import AudioFrame from "./components/frames/AudioFrame";
import VideoFrame from "./components/frames/VideoFrame";
import Controllor from "./components/Controllor";
import StatusBar from "./components/StatusBar";

@Options({
  components: {
    AudioFrame,
    VideoFrame,
    Controllor,
    StatusBar,
  },
})

class App extends Vue {
  constructor(props) {
    super(props);

    this.mediaCtrl = reactive({
      type: 'video',
      autoplay: true,
      seek: 0,
      loop: false,
      mute: false,
      volume: 0,
      playbackRate: 1,

      playTrigger: 0,
      loadTrigger: 0,
    })
    this.mediaTime = reactive({
      currentTime: 0,
      duration: 0,
    })
    this.mediaStatus = reactive({
      playState: '',
      playbackRate: '',
      objectFit: '',
      volume: '',
      playing: false,
    })
    this.videoCtrl = reactive({
      layout: {},
      objectFit: null,
      visibility: 'visible',
    })

    const updateCaption = () => {
      this.caption = (this.mediaCtrl.type == 'audio' ? App.Caption.audioInfo : App.Caption.videoInfo);
    };
    watch(() => this.mediaCtrl.type, updateCaption);
    updateCaption();

    provide('mediaCtrl', this.mediaCtrl)
    provide('mediaTime', this.mediaTime)
    provide('mediaStatus', this.mediaStatus)
    provide('videoCtrl', this.videoCtrl)
  }

  static Caption = {
    videoInfo: "名称: Video\n"
            + "功能描述:\n"
            + "1. 播放 / 暂停\n"
            + "2. 前进 / 后退\n"
            + "3. 时间 / 时长\n"
            + "4. 循环 / 静音 / 倍速\n"
            + "5. ObjectFit调整\n",
    audioInfo: "名称: Audio\n"
            + "功能描述:\n"
            + "1. 播放 / 暂停\n"
            + "2. 前进 / 后退\n"
            + "3. 时间 / 时长 / 倍速\n"
            + "4. 循环 / 静音\n"
  }
}

export default App;
</script>

<template>
<div
    :style="{
      top: 0, left: 0,
      width: 1280, height: 720,
      backgroundColor: 'rgb(222,211,140,0.5)'
    }"
>

  <AudioFrame v-if="mediaCtrl.type == 'audio'"/>
  <VideoFrame v-else />

  <!-- :key="mediaCtrl.type" => JsView bug，当mediaCtrl.type属性变化时，为了保证显示在VideoFrame前面 -->
  <div class="caption" :key="mediaCtrl.type">
    {{ caption }}
  </div>
  <Controllor class="controllor"/>
  <StatusBar class="statusbar"/>
</div>
</template>

<style scoped>
.caption {
  text-align: left;
  font-size: 24;
  line-height: 30;
  color: #FFFFFF;
  left: 40;
  top: 20;
  width: 300;
  height: 210;
  background-color: rgba(27,38,151,0.6);
}

.controllor {
  left: 40;
  top: 540;
}

.statusbar {
  left: 40;
  top: 650;
}

</style>
