From 5c28a9b88ad1f2b90e0a60a8f769ad6f40b0ed85 Mon Sep 17 00:00:00 2001
From: Kasper Seweryn <github@wvffle.net>
Date: Mon, 6 Mar 2023 22:48:48 +0100
Subject: [PATCH] fix(volume-slider): fix scrolling

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2346>
---
 front/src/components/audio/VolumeControl.vue | 5 +++++
 front/src/composables/audio/player.ts        | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/front/src/components/audio/VolumeControl.vue b/front/src/components/audio/VolumeControl.vue
index c4e0adf59..04e9d8ae9 100644
--- a/front/src/components/audio/VolumeControl.vue
+++ b/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"
diff --git a/front/src/composables/audio/player.ts b/front/src/composables/audio/player.ts
index 57772cde3..71564fb96 100644
--- a/front/src/composables/audio/player.ts
+++ b/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 = () => {