feat(call): mic level meter on the mute button (#146)

While unmuted, the microphone button (call view and the bottom call bar)
shows three small green bars in the icon's corner driven by the fork's
io.lotus.mic_level (element-call v0.25.0-lotus.16), so you can see the mic is
actually picking you up. Nothing is drawn while muted or silent; the button's
label is unchanged (the bars are decorative).

Your own name no longer appears in the "… is speaking" line: that is now for
everyone else, and your voice is on the meter. Avatar speaking rings still
include you, and the "You're muted" talking-while-muted notice is unchanged.

Verified in a local call with a fake-tone mic: data-mic-level cycles 3/2/1
with the tone on both buttons, disappears on mute and returns on unmute; the
status line reads "bob is speaking..." only.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
This commit is contained in:
Lotus CI
2026-09-25 12:09:34 -04:00
co-authored by Claude Opus 5.5
parent 75d55e861b
commit 3449338b3e
7 changed files with 123 additions and 11 deletions
+45
View File
@@ -0,0 +1,45 @@
import React from 'react';
import { color } from 'folds';
type MicLevelBarsProps = {
/** 0–3; nothing is drawn at 0. */
level: number;
};
const HEIGHTS = [3, 5, 7];
/**
* [Gitea #146] Three small bars in the corner of the mic button showing your
* own input level while unmuted, so you can see the mic is actually picking
* you up. Decorative: the button's label already says whether it's on.
*/
export function MicLevelBars({ level }: MicLevelBarsProps) {
if (level <= 0) return null;
return (
<span
aria-hidden
data-mic-level={level}
style={{
position: 'absolute',
right: 1,
bottom: 1,
display: 'flex',
alignItems: 'flex-end',
gap: 1,
pointerEvents: 'none',
}}
>
{HEIGHTS.map((h, i) => (
<span
key={h}
style={{
width: 2,
height: h,
borderRadius: 1,
background: i < level ? color.Success.Main : 'transparent',
}}
/>
))}
</span>
);
}