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>
|
|||
|
|
);
|
|||
|
|
}
|