82 lines
1.5 KiB
Vue
82 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<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
|
|
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>
|
|
div {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 5px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
input {
|
|
transform: rotate(270deg);
|
|
width: 4rem;
|
|
}
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|