Lotus CIandClaude Opus 5.5
3449338b3e
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
46 lines
1.0 KiB
TypeScript
46 lines
1.0 KiB
TypeScript
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>
|
||
);
|
||
}
|