Temporary track info and Volume Control fixes

src/renderer/app/cover/index.tsx

@@ -115,10 +115,9 @@ export const Cover: FunctionComponent<Props> = ({ settings, message, onVisualiza
           setCurrentSongId(state.id);
           console.log(`New song '${songTitle}' by '${artist}.`);
           await refreshTrackLiked();
-        }
-
-        if (!isAlwaysShowTrackInfo && showTrackInfoTemporarilyInSeconds) {
+        } else if (!isAlwaysShowTrackInfo && showTrackInfoTemporarilyInSeconds) {
           setShouldShowTrackInfo(true);
+          console.log('Showing track info temporarily.');
 
           const timer = setTimeout(() => {
             if (!document.getElementById('visible-ui')?.matches(':hover')) {
@@ -143,12 +142,12 @@ export const Cover: FunctionComponent<Props> = ({ settings, message, onVisualiza
   ]);
 
   useEffect(() => {
-    return () => {
-      if (trackInfoTimer) {
-        clearTimeout(trackInfoTimer);
-      }
-    };
-  }, [trackInfoTimer]);
+    if (!state.isPlaying && trackInfoTimer) {
+      clearTimeout(trackInfoTimer);
+      setTrackInfoTimer(null);
+      setShouldShowTrackInfo(false);
+    }
+  }, [state.isPlaying, trackInfoTimer]);
 
   const keepAlive = useCallback(async (): Promise<void> => {
     if (state.isPlaying || state.userProfile?.accountType !== AccountType.Premium) {
@@ -166,6 +165,11 @@ export const Cover: FunctionComponent<Props> = ({ settings, message, onVisualiza
     }
   }, [state.isPlaying, state.progress, state.userProfile?.accountType]);
 
+  const [localVolume, setLocalVolume] = useState(state.volume);
+  useEffect(() => {
+    setLocalVolume(state.volume);
+  }, [state.volume]);
+
   const changeVolume = useCallback(
     (newVolume: number) => {
       try {
@@ -191,27 +195,41 @@ export const Cover: FunctionComponent<Props> = ({ settings, message, onVisualiza
 
   const onMouseWheel = useCallback(
     async ({ deltaY }: WheelEvent): Promise<void> => {
-      const direction = Math.sign(deltaY);
-      const newVolume = clamp(state.volume - direction * volumeIncrement, 0, 100);
+      const direction = Math.sign(-deltaY);
+      console.log(`Mouse wheel direction: ${direction}`);
+      const newVolume = clamp(localVolume + volumeIncrement * direction, 0, 100);
+      setLocalVolume(newVolume);
       try {
-        // TODO use a state variable to buffer the volume change
-        if (newVolume !== state.volume) {
-          changeVolume(newVolume);
-        }
+        changeVolume(newVolume);
       } catch (error) {
         throw new Error(`Update volume error: ${error}`);
       }
     },
-    [changeVolume, state.volume, volumeIncrement]
+    [localVolume, volumeIncrement, changeVolume]
   );
 
+  const ondblClick = useCallback((): void => {
+    console.log('Double clicked');
+    // Add functionality here
+    // Tried opening spotify app but couldn't get it to work
+  }, []);
+
   useEffect(() => {
-    document.getElementById('visible-ui').addEventListener('mousewheel', onMouseWheel);
+    const el = document.getElementById('visible-ui');
+    el.addEventListener('mousewheel', onMouseWheel);
     return () => {
-      document.getElementById('visible-ui').removeEventListener('mousewheel', onMouseWheel);
+      el.removeEventListener('mousewheel', onMouseWheel);
     };
   }, [onMouseWheel]);
 
+  useEffect(() => {
+    const el = document.getElementById('visible-ui');
+    el.addEventListener('dblclick', ondblClick);
+    return () => {
+      el.removeEventListener('dblclick', ondblClick);
+    };
+  }, [ondblClick]);
+
   useEffect(() => {
     const listeningToIntervalId = setInterval(handlePlaybackChanged, trackInfoRefreshTimeInSeconds * ONE_SECOND_IN_MS);
 

src/renderer/windows/settings/window-settings.tsx

@@ -52,7 +52,7 @@ export const WindowSettings: FunctionComponent = () => {
             <Slider
               type="range"
               min={0}
-              max={10}
+              max={15}
               step={1}
               defaultValue={DEFAULT_SETTINGS.showTrackInfoTemporarilyInSeconds}
               {...register('showTrackInfoTemporarilyInSeconds', { required: true, valueAsNumber: true })}