Newer
Older
<span :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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<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">
<input
type="range"
step="0.05"
min="0"
max="1"
v-model="sliderVolume" />
</div>
</span>
</template>
<script>
import { mapState, mapGetters, mapActions } from "vuex"
export default {
data () {
return {
expanded: false,
timeout: null,
}
},
computed: {
sliderVolume: {
get () {
return this.$store.state.player.volume
},
set (v) {
this.$store.commit("player/volume", v)
}
},
labels () {
return {
unmute: this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Unmute"),
mute: this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Mute"),
}
}
},
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>