fix(volume-slider): fix scrolling

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2346>

front/src/components/audio/VolumeControl.vue

@@ -25,6 +25,10 @@ const handleLeave = () => {
   stop()
   start()
 }
+
+const scroll = (event: WheelEvent) => {
+  volume.value += -Math.sign(event.deltaY) * 0.05
+}
 </script>
 
 <template>
@@ -34,6 +38,7 @@ const handleLeave = () => {
     @click.prevent.stop=""
     @mouseover="handleOver"
     @mouseleave="handleLeave"
+    @wheel.stop.prevent="scroll"
   >
     <span
       v-if="volume === 0"

front/src/composables/audio/player.ts

@@ -7,6 +7,7 @@ import { useQueue, currentIndex, currentTrack } from './queue'
 import { useStore } from '~/store'
 
 import axios from 'axios'
+import { useClamp } from '@vueuse/math'
 
 // Looping
 export enum LoopingMode {
@@ -57,7 +58,7 @@ export const usePlayer = createGlobalState(() => {
   // Volume
   const lastVolume = useStorage('player:last-volume', 0.7)
 
-  const volume: Ref<number> = useStorage('player:volume', 0.7)
+  const volume: Ref<number> = useClamp(useStorage('player:volume', 0.7), 0, 1)
   watch(volume, (gain) => setGain(gain), { immediate: true })
 
   const mute = () => {