<script>
import { inject } from 'vue'
import { Options, Vue } from "vue-class-component";

@Options({
})
class StatusBar extends Vue {
  constructor(props) {
    super(props);

    this.mediaCtrl = inject('mediaCtrl');
    this.mediaTime = inject('mediaTime');
    this.mediaStatus = inject('mediaStatus');
    this.videoCtrl = inject('videoCtrl');
  }
}

export default StatusBar;
</script>

<template>
<div>
  <div class="text progress">
    {{ 'progress:' + Math.ceil(mediaTime.currentTime) + '/' + Math.ceil(mediaTime.duration) }}
  </div>
  <div class="text mute">
    {{ mediaCtrl.mute ? 'muted' : '-' }}
  </div>
  <div class="text volume">
    {{ 'volume:' + mediaStatus.volume }}
  </div>
  <div class="text rate">
    {{ mediaStatus.playbackRate }}
  </div>
  <div class="text visibility" :key="videoCtrl.visibility">
    {{ videoCtrl.visibility }}
  </div>
  <div class="text loop">
    {{ mediaCtrl.loop ? 'looping' : '-' }}
  </div>
  <div class="text objectFit" :key="mediaStatus.objectFit">
    {{ mediaStatus.objectFit }}
  </div>
  <div class="text status">
    {{ 'status: ' + mediaStatus.playState }}
  </div>
</div>
</template>

<style scoped>
.text {
  color: #FF0000;
  font-size: 24;
  width: 158;
  height: 40;
}

.progress {
  left: 0;
  width: 300;
}

.mute {
  left: 173; /* (158+15)*1 */
  text-align: center;
}

.volume {
  left: 346; /* (158+15)*2 */
  text-align: center;
}

.rate {
  left: 519; /* (158+15)*3 */
  text-align: center;
}

.visibility {
  left: 692; /* (158+15)*4 */
  text-align: center;
}

.loop {
  left: 865; /* (158+15)*5 */
  text-align: center;
}

.objectFit {
  left: 1020; /* (158+15)*6-x */
  width: 190;
  text-align: center;
}

.status {
  left: 0;
  top: 30;
  width: 800;
}

</style>
