<template> <div class="root"> <VolumeHighIcon v-if="volume > 0.7" class="pointer" :size="30" @click="mute" /> <VolumeLowIcon v-if="volume > 0 && volume <= 0.3" class="pointer" :size="30" @click="mute" /> <VolumeMediumIcon v-if="volume > 0.3 && volume <= 0.7" class="pointer" :size="30" @click="mute" /> <VolumeMuteIcon v-if="volume === 0" class="pointer" :size="30" @click="setVolume(volumeMuted)" /> <input class="volume" max="1" min="0" step="0.1" type="range" :value="volume" @change="(event) => setVolume(event.target.value)" /> </div> </template> <script> import { mapActions, mapState } from 'pinia' 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' import { usePlayer } from '../../store/player.js' export default { name: 'Volume', components: { VolumeHighIcon, VolumeLowIcon, VolumeMediumIcon, VolumeMuteIcon, }, data: () => ({ volumeMuted: 0, }), computed: { ...mapState(usePlayer, ['volume']), }, methods: { ...mapActions(usePlayer, ['setVolume']), mute() { this.volumeMuted = this.volume this.setVolume(0) }, }, } </script> <style scoped> .pointer { cursor: pointer; } .root { align-items: center; display: flex; gap: 5px; justify-content: flex-end; } .volume { transform: rotate(270deg); width: 4rem; } </style>