diff --git a/docs/version-history.md b/docs/version-history.md index 02fb07fb..38119e11 100644 --- 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 index b7b83a7f..454c7955 100644 --- 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 index b0593419..8c8da348 100644 --- 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 index d2b21b48..a0008700 100644 --- 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 index 820709aa..adb3039b 100644 --- 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" /> + { + soundVolumeUpdate(newValue / 100); + }} + /> ); };