repod/src/components/Player/Volume.vue

<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>