my-sea voice: volume-reactive equalizer glow + muted (--priRd/.fa-ban) state — TDD
Phase 5b of the my-sea voice batch. Resolves the Bug-B-vs-item-7 conflict per user call 2026-05-29: a click while connected MUTES (leaving stays on BYE/NVM), and the item-7 "--priRd/.fa-ban disconnected" visual maps onto the MUTED state. Replaces Phase 3's 2x-pulse stand-in with a real Web-Audio equalizer. - voice-mesh.js: an AnalyserNode taps each incoming peer stream (lazy AudioContext); `inputLevel()` returns the loudest current RMS (~0..1) across peers. Analysers torn down per-peer + on call end. - voice-glow.js: the live-mic glow now resolves to — alone → `.voice-pulse` (steady 2s cadence); others connected → `.voice-eq`, whose `--voice-level` CSS var is fed each frame from inputLevel() via a self-stopping rAF loop; muted → `.voice-muted` modifier on either (recolor only). rAF cancelled on destroy. - _burger.scss: `.voice-eq` box-shadow spread+alpha scale with `--voice-level` (no keyframe — audio drives it); `.voice-muted` recolors to --priRd (halo stays --ninUser) + flips the voice sub-btn icon to .fa-ban. Drops the unused `.voice-pulse--fast`. - VoiceGlowSpec: +4 specs (equalizer swap, muted-alone, muted-with-others, unmute clears); VoiceMeshSpec: +1 (inputLevel 0 with no analysers). 438 Jasmine specs green. Live-verify on staging (audio can't be auto-tested): the equalizer reacting to real speech + the muted/unmuted colour swap on a live call. Code architected by Disco DeDisco <discodedisco@outlook.com> Git commit message Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -224,10 +224,34 @@
|
||||
#id_burger_btn.voice-pulse {
|
||||
animation: voice-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
// Doubled cadence once a 2nd party is connected.
|
||||
#id_voice_btn.voice-pulse--fast,
|
||||
#id_burger_btn.voice-pulse--fast {
|
||||
animation: voice-pulse 1s ease-in-out infinite;
|
||||
|
||||
// Equalizer — once a 2nd+ party is connected the halo tracks the loudest
|
||||
// incoming voice. voice-glow.js feeds `--voice-level` (0..1) each frame off
|
||||
// VoiceRoom.inputLevel(); the box-shadow spread + alpha scale with it (no
|
||||
// keyframe — the audio drives it). Falls back to a faint steady halo at level 0.
|
||||
#id_voice_btn.voice-eq,
|
||||
#id_burger_btn.voice-eq {
|
||||
box-shadow:
|
||||
0 0 calc(0.3rem + var(--voice-level, 0) * 1.1rem)
|
||||
calc(0.05rem + var(--voice-level, 0) * 0.45rem)
|
||||
rgba(var(--ninUser), calc(0.3 + var(--voice-level, 0) * 0.6)),
|
||||
0 0 calc(0.6rem + var(--voice-level, 0) * 1.6rem)
|
||||
calc(0.1rem + var(--voice-level, 0) * 0.5rem)
|
||||
rgba(var(--ninUser), calc(0.15 + var(--voice-level, 0) * 0.35));
|
||||
}
|
||||
|
||||
// Muted = the "disconnected from talking" state (item 7): recolor the lot to
|
||||
// --priRd (halo stays --ninUser) + flip the voice sub-btn's icon to .fa-ban.
|
||||
// Composes with .voice-pulse (alone) + .voice-eq (others connected) above —
|
||||
// only the colour changes; the pulse/equalizer halo shape is shared.
|
||||
#id_voice_btn.voice-muted,
|
||||
#id_burger_btn.voice-muted {
|
||||
color: rgba(var(--priRd), 1);
|
||||
border-color: rgba(var(--priRd), 1);
|
||||
}
|
||||
#id_voice_btn.voice-muted {
|
||||
.burger-fan-icon--on { display: none; }
|
||||
.burger-fan-icon--off { display: inline-block; }
|
||||
}
|
||||
|
||||
// Burger hides when bud_panel is open — LANDSCAPE only. In portrait the
|
||||
|
||||
Reference in New Issue
Block a user