Fix MPRIS volume integration (#311)

* Fix MPRIS volume integration

* Move MPRIS volume updates into volume handlers

src/components/player/PlayerBar.tsx

@@ -7,6 +7,7 @@ import { useHistory } from 'react-router-dom';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
 import format from 'format-duration';
 import { useTranslation } from 'react-i18next';
+import { ipcRenderer } from 'electron';
 import {
   PlayerContainer,
   PlayerColumn,
@@ -198,6 +199,11 @@ const PlayerBar = () => {
     setCurrentTime
   );
 
+  // Handle mpris volume change
+  useEffect(() => {
+    setLocalVolume(Number(playQueue.volume.toPrecision(2)));
+  }, [playQueue.volume]);
+
   useEffect(() => {
     // Handle volume slider dragging
     const debounce = setTimeout(() => {
@@ -214,6 +220,8 @@ const PlayerBar = () => {
       setIsDraggingVolume(false);
     }, 100);
 
+    ipcRenderer.send('volume', localVolume);
+
     return () => clearTimeout(debounce);
   }, [dispatch, isDraggingVolume, localVolume, playQueue.currentPlayer, playQueue.fadeDuration]);
 

src/hooks/usePlayerControls.ts

@@ -277,6 +277,7 @@ const usePlayerControls = (
     }
     const vol = Number((e / 100).toFixed(2));
     setLocalVolume(vol);
+    ipcRenderer.send('volume', vol);
   };
 
   const handleVolumeKey = useCallback(
@@ -285,10 +286,12 @@ const usePlayerControls = (
         const vol = Number((playQueue.volume + 0.05 > 1 ? 1 : playQueue.volume + 0.05).toFixed(2));
         setLocalVolume(vol);
         dispatch(setVolume(vol));
+        ipcRenderer.send('volume', vol);
       } else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
         const vol = Number((playQueue.volume - 0.05 < 0 ? 0 : playQueue.volume - 0.05).toFixed(2));
         setLocalVolume(vol);
         dispatch(setVolume(vol));
+        ipcRenderer.send('volume', vol);
       }
     },
     [dispatch, playQueue.volume, setLocalVolume]
@@ -304,11 +307,13 @@ const usePlayerControls = (
         vol = vol < 0 ? 0 : vol;
         setLocalVolume(vol);
         dispatch(setVolume(vol));
+        ipcRenderer.send('volume', vol);
       } else {
         let vol = Number((playQueue.volume + 0.01).toFixed(2));
         vol = vol > 1 ? 1 : vol;
         setLocalVolume(vol);
         dispatch(setVolume(vol));
+        ipcRenderer.send('volume', vol);
       }
     },
     [dispatch, isDraggingVolume, playQueue.volume, setIsDraggingVolume, setLocalVolume]

src/main.dev.js

@@ -192,8 +192,9 @@ if (isLinux()) {
   });
 
   mprisPlayer.on('volume', (event) => {
-    store.dispatch(setVolume(event));
-    settings.setSync('volume', event);
+    const volume = Math.min(1, Math.max(0, event));
+    store.dispatch(setVolume(volume));
+    settings.setSync('volume', volume);
   });
 
   mprisPlayer.on('loopStatus', () => {
@@ -270,6 +271,10 @@ if (isLinux()) {
   ipcMain.on('current-position', (e, arg) => {
     mprisPlayer.getPosition = () => arg * 1e6;
   });
+
+  ipcMain.on('volume', (e, arg) => {
+    mprisPlayer.volume = Number(arg);
+  });
 }
 
 if (isWindows() && isWindows10()) {