Skip to content
Snippets Groups Projects
VolumeControl.vue 2.23 KiB
Newer Older
  • Learn to ignore specific revisions
  •    <button class="circular control button" :class="['component-volume-control', {'expanded': expanded}]" @click.prevent.stop="" @mouseover="handleOver" @mouseleave="handleLeave">
    
        <span
          role="button"
          v-if="sliderVolume === 0"
          :title="labels.unmute"
          :aria-label="labels.unmute"
          @click.prevent.stop="unmute">
          <i class="volume off icon"></i>
        </span>
        <span
          role="button"
          v-else-if="sliderVolume < 0.5"
          :title="labels.mute"
          :aria-label="labels.mute"
          @click.prevent.stop="mute">
          <i class="volume down icon"></i>
        </span>
        <span
          role="button"
          v-else
          :title="labels.mute"
          :aria-label="labels.mute"
          @click.prevent.stop="mute">
          <i class="volume up icon"></i>
        </span>
        <div class="popup">
    
          <label for="volume-slider" class="visually-hidden">{{ labels.slider }}</label>
    
            id="volume-slider"
    
            min="0"
            max="1"
            v-model="sliderVolume" />
        </div>
    
    </template>
    <script>
    import { mapState, mapGetters, mapActions } from "vuex"
    
    import { toLinearVolumeScale, toLogarithmicVolumeScale } from '@/audio/volume'
    
    
    export default {
      data () {
        return {
          expanded: false,
          timeout: null,
        }
      },
      computed: {
        sliderVolume: {
          get () {
    
            return toLogarithmicVolumeScale(this.$store.state.player.volume)
    
            this.$store.commit("player/volume", toLinearVolumeScale(v))
    
          }
        },
        labels () {
          return {
            unmute: this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Unmute"),
            mute: this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Mute"),
    
            slider: this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Adjust volume")
    
          }
        }
      },
      methods: {
        ...mapActions({
          mute: "player/mute",
          unmute: "player/unmute",
          toggleMute: "player/toggleMute",
        }),
        handleOver () {
          if (this.timeout) {
            clearTimeout(this.timeout)
          }
          this.expanded = true
        },
        handleLeave () {
          if (this.timeout) {
            clearTimeout(this.timeout)
          }
          this.timeout = setTimeout(() => {this.expanded = false}, 500)
        }
      }
    }
    </script>