<template>
  <b-row class="justify-content-center">
      <b-col lg="7" xs="12" sm="12">
        <div class="stream-wrapper" v-if="isActive">
          <h6 class="stream-url">{{streaming.url}}</h6>
          <b-progress :value="1" :max="1" height="10px" class="song-progressBar" animated></b-progress>
          <div class="song-duration">
            <span class="position">{{position | toDuration}}</span>
          </div>

          <vu-meter :left="vumeter.left" :right="vumeter.right" :status="isActive"></vu-meter>
        </div>

        <b-alert variant="info" :show="!isActive">
          <i class="fa fa-info-circle"></i>
          Stream is disabled.
        </b-alert>
      </b-col>
  </b-row>
</template>

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

export default {
  name: "Stream",

  computed: {
    ...mapState("streaming", ["streaming", "position", "vumeter", "isActive"])
  },

  methods: {
    ...mapActions("streaming", ["getStatus"])
  },

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

  watch: {
    isActive(value, oldValue) {
      if (value) {
        app.Toasted("Stream", "Stream is playing.", "success");
      } else {
        app.Toasted("Stream", "Stream is stoped.", "info");
      }
    }
  }
};
</script>

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

.song-duration {
  float: right;

  span {
    font-size: 12px;
    display: inline-block;
  }
}
</style>