55625874c5
Add a pulsing halo behind the stop button that scales with the microphone input level, giving real-time feedback that recording is active and the mic is picking up sound. - use-dictation: meter the captured MediaStream via AudioContext + AnalyserNode (analyser only, never connected to destination), compute a smoothed RMS audioLevel (0..1) in a requestAnimationFrame loop, and tear the meter down on every recording-end path (stop/cancel/auto-stop/ unmount); meter failure is non-fatal to recording - mic-button: render a translucent red halo whose scale follows audioLevel; honor prefers-reduced-motion with a static halo - stop(): recover and release resources when no live recorder remains - fix unhandled rejection from AudioContext.resume()
23 lines
541 B
CSS
23 lines
541 B
CSS
.recordingWrap {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Translucent red halo that sits behind the stop button and scales with the
|
|
live microphone level (scale set inline from audioLevel). */
|
|
.pulse {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
background-color: var(--mantine-color-red-5);
|
|
opacity: 0.35;
|
|
transform-origin: center;
|
|
transform: scale(1);
|
|
transition: transform 90ms linear;
|
|
pointer-events: none;
|
|
will-change: transform;
|
|
z-index: 0;
|
|
}
|