Skip to content

feat: show avatar tiles for participants without a camera#34

Open
JoVictorNunes wants to merge 1 commit into
bigbluebutton:v0.0.xfrom
JoVictorNunes:add-avatars
Open

feat: show avatar tiles for participants without a camera#34
JoVictorNunes wants to merge 1 commit into
bigbluebutton:v0.0.xfrom
JoVictorNunes:add-avatars

Conversation

@JoVictorNunes

Copy link
Copy Markdown
Contributor

What does this PR do?

Adds avatar tiles to the Picture-in-Picture view for participants without an active camera, complementing the webcams already shown. This way every participant in the meeting stays visible in PiP, even those not sharing video.

Captura de tela de 2026-06-15 09-11-58

Changes

  • New USERS_SUBSCRIPTION (queries.ts): fetches users with isSharingCamera = false, ordered by name (limited to 10), including avatar, color, and talking state (voice.talking).
  • New useUsers hook (hooks.ts): exposes the subscription via useCustomSubscription.
  • New AvatarItem component (avatar-item.tsx): renders the user's avatar image or, when missing, a circle with the name initial and the user's color. Uses a ResizeObserver to hide the name when the tile gets narrow (< 140px).
  • Grid integration (component.tsx): new AvatarMedia type in the GridMedia union; avatars are appended to the webcams (tiles = [...webcams, ...avatars]) across all scenarios (screenshare, slide, slide loading, and default).
  • Styles (stylesheet.ts): .pip-avatar-item and .pip-avatar-circle classes, an avatar-pulse animation, and a blue border to indicate the talking user. Container background adjusted from #000 to #111.

How to test

  1. Join a BigBlueButton session with the plugin enabled.
  2. Have at least one participant without a camera turned on.
  3. Open Picture-in-Picture and confirm the participant shows up as an avatar tile (image or initial with the user's color).
  4. Verify the tile pulses / gains a blue border when the user is talking.
  5. Shrink the tile width and confirm the name gets hidden.

Closes Issue(s)

Closes none

Motivation

  • Users cannot know who is talking when the people talking are not sharing camera.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant