imnyang/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Display call member speaking status on bottom bar (#2742)

Browse source 
* add mutation observer hok

* add hook to read speaking member by observing iframe content

* display speaking member name in call status bar and improve layout

* fix shrining
This commit is contained in:
Ajay Bura 2026-03-08 22:00:35 +11:00 • committed by GitHub
commit 55e8306576
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 229 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/app/features/call-status/CallControl.tsx
View file

@ -20,12 +20,12 @@ function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
{(anchorRef) => (
<IconButton
ref={anchorRef}
variant={enabled ? 'Background' : 'Warning'}
variant={enabled ? 'Surface' : 'Warning'}
fill="Soft"
radii="300"
size="300"
onClick={() => onToggle()}
outlined={!enabled}
outlined
>
<Icon size="100" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
</IconButton>
@ -51,12 +51,12 @@ function SoundButton({ enabled, onToggle }: SoundButtonProps) {
{(anchorRef) => (
<IconButton
ref={anchorRef}
variant={enabled ? 'Background' : 'Warning'}
variant={enabled ? 'Surface' : 'Warning'}
fill="Soft"
radii="300"
size="300"
onClick={() => onToggle()}
outlined={!enabled}
outlined
>
<Icon
size="100"
@ -86,12 +86,12 @@ function VideoButton({ enabled, onToggle }: VideoButtonProps) {
{(anchorRef) => (
<IconButton
ref={anchorRef}
variant={enabled ? 'Success' : 'Background'}
variant={enabled ? 'Success' : 'Surface'}
fill="Soft"
radii="300"
size="300"
onClick={() => onToggle()}
outlined={enabled}
outlined
>
<Icon
size="100"
@ -119,12 +119,12 @@ function ScreenShareButton() {
{(anchorRef) => (
<IconButton
ref={anchorRef}
variant={enabled ? 'Success' : 'Background'}
variant={enabled ? 'Success' : 'Surface'}
fill="Soft"
radii="300"
size="300"
onClick={() => setEnabled(!enabled)}
outlined={enabled}
outlined
>
<Icon size="100" src={Icons.ScreenShare} filled={enabled} />
</IconButton>
@ -144,9 +144,6 @@ export function CallControl({ callEmbed }: { callEmbed: CallEmbed }) {
onToggle={() => callEmbed.control.toggleMicrophone()}
/>
<SoundButton enabled={sound} onToggle={() => callEmbed.control.toggleSound()} />
</Box>
<StatusDivider />
<Box alignItems="Inherit" gap="200">
<VideoButton enabled={video} onToggle={() => callEmbed.control.toggleVideo()} />
{false && <ScreenShareButton />}
</Box>