Spaces:
Running
Running
| interface AudioControlsProps { | |
| enabled: boolean; | |
| micMuted: boolean; | |
| audioMuted: boolean; | |
| micSupported: boolean; | |
| onMicToggle(): void; | |
| onAudioToggle(): void; | |
| } | |
| function Spectrum({ active }: { active: boolean }) { | |
| return ( | |
| <div className={`spectrum ${active ? 'spectrum--active' : ''}`} aria-hidden="true"> | |
| {Array.from({ length: 18 }, (_, index) => ( | |
| <i key={index} style={{ '--bar': `${25 + ((index * 17) % 70)}%` } as React.CSSProperties} /> | |
| ))} | |
| </div> | |
| ); | |
| } | |
| export function AudioControls({ | |
| enabled, | |
| micMuted, | |
| audioMuted, | |
| micSupported, | |
| onMicToggle, | |
| onAudioToggle, | |
| }: AudioControlsProps) { | |
| return ( | |
| <section className="audio-card" aria-label="Two way audio controls"> | |
| <div className="audio-channel"> | |
| <Spectrum active={enabled && !micMuted && micSupported} /> | |
| <button | |
| type="button" | |
| className={`audio-channel__button ${!micMuted ? 'audio-channel__button--on' : ''}`} | |
| disabled={!enabled || !micSupported} | |
| onClick={onMicToggle} | |
| > | |
| <span aria-hidden="true">{micMuted ? '◌' : '●'}</span> | |
| Mic {micMuted ? 'off' : 'on'} | |
| </button> | |
| <span className="audio-channel__label">Phone → Reachy</span> | |
| </div> | |
| <div className="audio-channel"> | |
| <Spectrum active={enabled && !audioMuted} /> | |
| <button | |
| type="button" | |
| className={`audio-channel__button ${!audioMuted ? 'audio-channel__button--on' : ''}`} | |
| disabled={!enabled} | |
| onClick={onAudioToggle} | |
| > | |
| <span aria-hidden="true">{audioMuted ? '◌' : '●'}</span> | |
| Sound {audioMuted ? 'off' : 'on'} | |
| </button> | |
| <span className="audio-channel__label">Reachy → Phone</span> | |
| </div> | |
| {!micSupported && enabled && ( | |
| <p className="audio-card__notice"> | |
| Reachy did not advertise a return microphone channel. Camera and manual look controls remain available. | |
| </p> | |
| )} | |
| </section> | |
| ); | |
| } | |