78 lines
1.5 KiB
Vue
78 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<VolumeHighIcon v-if="player.volume > 0.7"
|
|
class="pointer"
|
|
:size="30"
|
|
@click="mute" />
|
|
<VolumeLowIcon v-if="player.volume > 0 && player.volume <= 0.3"
|
|
class="pointer"
|
|
:size="30"
|
|
@click="mute" />
|
|
<VolumeMediumIcon v-if="player.volume > 0.3 && player.volume <= 0.7"
|
|
class="pointer"
|
|
:size="30"
|
|
@click="mute" />
|
|
<VolumeMuteIcon v-if="player.volume === 0"
|
|
class="pointer"
|
|
:size="30"
|
|
@click="$store.dispatch('player/volume', volumeMuted)" />
|
|
<input max="1"
|
|
min="0"
|
|
step="0.1"
|
|
type="range"
|
|
:value="player.volume"
|
|
@change="(event) => $store.dispatch('player/volume', event.target.value)">
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import VolumeHighIcon from 'vue-material-design-icons/VolumeHigh.vue'
|
|
import VolumeLowIcon from 'vue-material-design-icons/VolumeLow.vue'
|
|
import VolumeMediumIcon from 'vue-material-design-icons/VolumeMedium.vue'
|
|
import VolumeMuteIcon from 'vue-material-design-icons/VolumeMute.vue'
|
|
|
|
export default {
|
|
name: 'Volume',
|
|
components: {
|
|
VolumeHighIcon,
|
|
VolumeLowIcon,
|
|
VolumeMediumIcon,
|
|
VolumeMuteIcon,
|
|
},
|
|
data() {
|
|
return {
|
|
volumeMuted: 0,
|
|
}
|
|
},
|
|
computed: {
|
|
player() {
|
|
return this.$store.state.player
|
|
},
|
|
},
|
|
methods: {
|
|
mute() {
|
|
this.volumeMuted = this.player.volume
|
|
this.$store.dispatch('player/volume', 0)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
div {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 5px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
input {
|
|
transform: rotate(270deg);
|
|
width: 4rem;
|
|
}
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|