VolumeControl.vue 2.23 KB
Newer Older
1
<template>
2
   <button class="circular control button" :class="['component-volume-control', {'expanded': expanded}]" @click.prevent.stop="" @mouseover="handleOver" @mouseleave="handleLeave">
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    <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">
28
      <label for="volume-slider" class="visually-hidden">{{ labels.slider }}</label>
29
      <input
30
        id="volume-slider"
31
        type="range"
32
        step="0.02"
33
34
35
36
        min="0"
        max="1"
        v-model="sliderVolume" />
    </div>
37
  </button>
38
39
40
</template>
<script>
import { mapState, mapGetters, mapActions } from "vuex"
41
import { toLinearVolumeScale, toLogarithmicVolumeScale } from '@/audio/volume'
42
43
44
45
46
47
48
49
50
51
52

export default {
  data () {
    return {
      expanded: false,
      timeout: null,
    }
  },
  computed: {
    sliderVolume: {
      get () {
53
        return toLogarithmicVolumeScale(this.$store.state.player.volume)
54
55
      },
      set (v) {
56
        this.$store.commit("player/volume", toLinearVolumeScale(v))
57
58
59
60
61
62
      }
    },
    labels () {
      return {
        unmute: this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Unmute"),
        mute: this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Mute"),
63
        slider: this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Adjust volume")
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
      }
    }
  },
  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>