<template>
  <b-col cols="6" class="m-auto">
    <div class="vumeter" :class="{'notPlaying': !status}">
      <b-progress :max="100" class="meter">
        <b-progress-bar :value="_left"></b-progress-bar>
      </b-progress>
      <b-progress :max="100" class="meter">
        <b-progress-bar :value="_right"></b-progress-bar>
      </b-progress>
    </div>
  </b-col>
</template>

<script>
export default {
  name: "VuMeter",

  props: {
    left: {
      type: Number,
      required: true,
      default() {
        return 0;
      }
    },
    right: {
      type: Number,
      required: true,
      default() {
        return 0;
      }
    },

    status: {
      type: Boolean,
      required: false,
      default() {
        return true;
      }
    }
  },

  computed:{
    _left(){
      return Math.floor((this.left / 32768) * 100)
    },

    _right(){
      return Math.floor((this.right / 32768) * 100)
    }
  }
};
</script>

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

.vumeter {
  margin-top: 30px;
  margin-bottom: 30px;
  transition: all .5s ease-in-out;

  &.notPlaying{
    opacity: 0;
  }

  .meter {
    margin-top:10px;

    .progress-bar {
      background-color: darken($smg, 5);
    }
  }
}
</style>


