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:
co-authored by
Claude Opus 5.5
parent
75d55e861b
commit
3449338b3e
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user