<template>
<b-row class="justify-content-center">
    <b-col lg="7" sm="12" xs="12">

      <b-row>
        <b-col cols="12">
            <div class="song-name">
              <span>
                {{currentSong.originalName}}
              </span>
              <span class="file-name">
                {{currentSong.fileName}}
              </span>
            </div>
            <b-progress :value="progressBar.value" :max="progressBar.max" height="10px" class="song-progressBar" animated></b-progress>
            <span class="song-counter">{{currentSongIndex}} / {{songCount}}</span>
            <div class="song-duration">
              <span class="position">{{position | toDuration}}</span>
              <span class="duration">{{duration | toDuration}}</span>
            </div>
        </b-col>
      </b-row>

      <b-row>
        <vu-meter :left="vumeter.left" :right="vumeter.right" 
        :status="playerState"
        ></vu-meter>
      </b-row>
    </b-col>
</b-row>
</template>

<script>
import { mapGetters, mapActions, mapState, mapMutations } from "vuex";

export default {
  name: "Announces",

  mounted() {
    this.getStatus();
  },

  computed: {
    ...mapState("announces", [
      "currentSong",
      "position",
      "duration",
      "currentSongIndex",
      "songCount",
      "playerState",
      "playListFinished",
      "progressBar",
      "vumeter"
    ])
  },

  methods: {
    ...mapActions("announces", ["getStatus"])
  }
};
</script>

<style scoped lang="scss">
@import "../styles/sass/variables";

.song-progressBar {
  margin: 20px 0px 20px 0px;
}

.song-counter {
  float: left;
  font-size: 12px;
}

.song-duration {
  float: right;

  span {
    font-size: 12px;
    display: inline-block;

    &:first-child:after {
      content: "-";
      margin-left: 5px;
      float: right;
    }
  }
}
</style>