repod/src/components/Player/Volume.vue
Michel Roux de52f111c5
All checks were successful
repod / xml (push) Successful in 12s
repod / php (push) Successful in 38s
repod / nodejs (push) Successful in 1m8s
repod / release (push) Has been skipped
fix: add title for mute and play button
2024-10-25 16:51:26 +02:00

91 lines
1.7 KiB
Vue

<template>
<div>
<VolumeHighIcon
v-if="volume > 0.7"
class="pointer"
:size="30"
:title="t('repod', 'Mute')"
@click="mute" />
<VolumeLowIcon
v-if="volume > 0 && volume <= 0.3"
class="pointer"
:size="30"
:title="t('repod', 'Mute')"
@click="mute" />
<VolumeMediumIcon
v-if="volume > 0.3 && volume <= 0.7"
class="pointer"
:size="30"
:title="t('repod', 'Mute')"
@click="mute" />
<VolumeMuteIcon
v-if="volume === 0"
class="pointer"
:size="30"
:title="t('repod', 'Unmute')"
@click="setVolume(volumeMuted)" />
<input
max="1"
min="0"
step="0.1"
type="range"
:value="volume"
@change="
(event) =>
setVolume(parseFloat((event.target as HTMLInputElement).value))
" />
</div>
</template>
<script lang="ts">
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 { t } from '@nextcloud/l10n'
import { usePlayer } from '../../store/player.ts'
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)
},
t,
},
}
</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>