Allow users to change volume of clicking sound. Fixes #82

AceCentre · Nov 9, 2022 · b5785a0 · b5785a0
1 parent c0f8460
commit b5785a0
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 8 deletions.
diff --git a/docs/version-history.md b/docs/version-history.md
@@ -4,6 +4,10 @@ description: Find out about the latest changes to EyeCommander here
 
 # Version History
 
+### 1.4.1
+
+- [Allow users to change volume of clicking sound.](https://github.com/AceCentre/EyeCommander/issues/82)
+
 ### 1.4.0
 
 - Fix bug that prevented users from mapping the keyboard emulator to spacebar

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "eyecommander",
   "productName": "EyeCommander",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Detect blinks and convert them to switch output",
   "main": ".webpack/main",
   "scripts": {

diff --git a/src/react-app/lib/store-consts.js b/src/react-app/lib/store-consts.js
@@ -5,6 +5,7 @@ export const CHANGE_THRESHOLD_KEY = "CHANGE_THRESHOLD_KEY";
 export const THROTTLE_TIME_KEY = "THROTTLE_TIME_KEY";
 export const REVERSE_CAMERA = "REVERSE_CAMERA";
 export const PLAY_SOUND = "PLAY_SOUND";
+export const SOUND_VOLUME = "SOUND_VOLUME";
 export const OUTPUT_TYPE_NAME = "OUTPUT_TYPE_NAME";
 export const BLINK_MODE = "BLINK_MODE";
 export const CHANGE_THRESHOLD_SPEED_KEY = "CHANGE_THRESHOLD_SPEED_KEY";

diff --git a/src/react-app/main-screen.jsx b/src/react-app/main-screen.jsx
@@ -11,7 +11,7 @@ import { useBlinkAction } from "./hooks/use-blink-action";
 import { useOpenSettings } from "./hooks/use-open-settings";
 import { useReload } from "./hooks/use-reload";
 import { useStoreValue } from "./hooks/use-store";
-import { PLAY_SOUND } from "./lib/store-consts";
+import { PLAY_SOUND, SOUND_VOLUME } from "./lib/store-consts";
 import PauseIcon from "@mui/icons-material/Pause";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 
@@ -29,22 +29,37 @@ export const MainScreen = () => {
     reload: reloadPlaySound,
     loading: loadingPlaySound,
   } = useStoreValue(PLAY_SOUND, true);
+  const {
+    value: soundVolume,
+    reload: reloadSoundVolume,
+    loading: loadingSoundVolume,
+  } = useStoreValue(SOUND_VOLUME, 0.5);
+
   const [paused, setPaused] = useState(false);
-  const reloadTrigger = useReload([reloadPlaySound]);
-  const [play] = useSound("./public/notif.mp3");
+  const reloadTrigger = useReload([reloadPlaySound, reloadSoundVolume]);
+  const [play] = useSound("./public/notif.mp3", { volume: soundVolume || 0.5 });
   const [isFaceInFrame, setIsFaceInFrame] = useState(true);
   const sendBlinkToBackend = useBlinkAction();
   const openSettings = useOpenSettings();
 
   const onBlink = useCallback(() => {
-    if (playSound && !loadingPlaySound) {
+    if (playSound && !loadingPlaySound && !loadingSoundVolume) {
+      console.log({ soundVolume });
       play();
     }
 
     if (!paused) {
       sendBlinkToBackend();
     }
-  }, [play, playSound, reloadTrigger, paused, loadingPlaySound]);
+  }, [
+    play,
+    playSound,
+    soundVolume,
+    reloadTrigger,
+    paused,
+    loadingPlaySound,
+    loadingSoundVolume,
+  ]);
 
   if (reloadTrigger % 2 !== 0) {
     return null;

diff --git a/src/react-app/settings-page.jsx b/src/react-app/settings-page.jsx
@@ -22,7 +22,12 @@ import LogoutIcon from "@mui/icons-material/Logout";
 import VolumeUpIcon from "@mui/icons-material/VolumeUp";
 import StorageIcon from "@mui/icons-material/Storage";
 import { useStoreValue } from "./hooks/use-store";
-import { BLINK_MODE, PLAY_SOUND, REVERSE_CAMERA } from "./lib/store-consts";
+import {
+  BLINK_MODE,
+  PLAY_SOUND,
+  REVERSE_CAMERA,
+  SOUND_VOLUME,
+} from "./lib/store-consts";
 import { useWebcamSelector } from "./hooks/use-webcam-selector";
 import { useSaveAndClose } from "./hooks/use-save-and-close";
 import {
@@ -36,6 +41,7 @@ import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import InfoIcon from "@mui/icons-material/Info";
 import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
 import KeyboardIcon from "@mui/icons-material/Keyboard";
+import { SliderWithValue } from "./slider-with-value.jsx";
 
 const SCREENS = {
   CAMERA: "camera",
@@ -356,8 +362,13 @@ const SoundSettings = () => {
     loading: playSoundLoading,
     update: playSoundUpdate,
   } = useStoreValue(PLAY_SOUND, true);
+  const {
+    value: soundVolume,
+    loading: soundVolumeLoading,
+    update: soundVolumeUpdate,
+  } = useStoreValue(SOUND_VOLUME, 0.5);
 
-  if (playSoundLoading) return null;
+  if (playSoundLoading || soundVolumeLoading) return null;
 
   return (
     <>
@@ -373,6 +384,16 @@ const SoundSettings = () => {
         }
         label="Play sound on blink"
       />
+      <SliderWithValue
+        min={0}
+        max={100}
+        defaultValue={soundVolume * 100}
+        label="Volume"
+        tooltip="The volume of the sound played when you blink"
+        onChange={(newValue) => {
+          soundVolumeUpdate(newValue / 100);
+        }}
+      />
     </>
   );
 };