Feature/audio detection#201
Conversation
There was a problem hiding this comment.
Pull request overview
Adds an audio-trigger feature that listens to the microphone and starts the timer when a sound above a “silence” threshold is detected (e.g., a button click), with a new mic button in the timer footer UI.
Changes:
- Introduces a
useAudiohook to start/stop mic capture and detect loud transients. - Adds a microphone toggle button to
TimerDisplayand corresponding styles. - Wires audio detection into
Appto start the phase runner when a sound is detected.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 8 comments.
| File | Description |
|---|---|
src/hooks/useAudio.ts |
New hook implementing mic capture + threshold detection and start/stop lifecycle. |
src/App.tsx |
Integrates useAudio to start the timer on detection and adds UI toggle handler. |
src/components/TimerDisplay.tsx |
Adds mic button + props to reflect listening/detected state. |
src/App.css |
Adds styling for footer control group and mic button states. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import {useCallback, useEffect, useRef, useState} from 'react'; | ||
|
|
||
| const THRESHOLD = 60; | ||
| const SILENCE_CENTER = 128; | ||
|
|
||
| interface UseAudioOptions { | ||
| onDetect?: () => void; | ||
| threshold?: number; | ||
| } | ||
|
|
||
| export const useAudio = (options?: UseAudioOptions) => { | ||
| const [isDetected, setIsDetected] = useState(false); | ||
| const [isListening, setIsListening] = useState(false); |
There was a problem hiding this comment.
Is this important for you ? @DasAmpharos
If so, I'll change it.
There was a problem hiding this comment.
I would like to keep the code style consistent. Please update when you get a chance
|
Thanks @Lucas-Rosenzweig for the pull request! Please see the review comments made by copilot and make changes accordingly |
|
Hello , i miss clicked when i selected the repo to put the pr on x) so it was a first draft so i didn't even re read my code. I'm gonna check that and make the change |
f0cf0f5 to
311b1d3
Compare
DasAmpharos
left a comment
There was a problem hiding this comment.
Please fix the merge conflicts as well
| setIsListening(false); | ||
| }, []); | ||
|
|
||
| const startListening = async () => { |
There was a problem hiding this comment.
Please wrap this in useCallback
| onDetectRef.current = options?.onDetect; | ||
| }, [options?.onDetect]); | ||
|
|
||
| function calculateMaxDeviation(dataArray: Uint8Array) { |
There was a problem hiding this comment.
Please move this out of the hook body. Since this is a pure function with no dependency on hook state, refs or props, defining it in the body will result in this function being re-created every render.
| @@ -0,0 +1,126 @@ | |||
| import {useCallback, useEffect, useRef, useState} from 'react'; | |||
|
|
|||
| const THRESHOLD = 60; | |||
There was a problem hiding this comment.
Please make THRESHOLD configurable via settings rather than hard-coding the value so users can tune the detection sensitivity
Adds a microphone button next to the settings gear in the timer footer. When active, the app listens for audio above a silence threshold and automatically starts the timer on the first detected sound (e.g. the click of a GBA power button). Listening stops automatically once the timer starts or when the user manually deactivates it. Co-authored-by: Lucas-Rosenzweig <38187137+Lucas-Rosenzweig@users.noreply.github.com> Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
311b1d3 to
c354035
Compare
🚀 Preview deploymenthttps://dasampharos.github.io/EonTimer-dev/pr-201/ Updated on every push to this PR. |
Hello , this pr add a feature to start the time when a sound higher than "silence" is detected for exemple the "click" of the gba power button.
It add a button next to the settings one to start listening