Skip to content

feat(BBBAvatar): add avatar component - #81

Merged
Arthurk12 merged 1 commit into
bigbluebutton:developfrom
Arthurk12:issue/75
Sep 19, 2026
Merged

Arthurk12 merged 1 commit into
bigbluebutton:developfrom
Arthurk12:issue/75

Conversation

@Arthurk12

Copy link
Copy Markdown
Member

What does this PR do?

The library has no reusable component for rendering a user avatar. Every BBB surface that needs one — e.g. bbb-plugin-pick-random-user's user-avatar — reimplements the same image/initials/color logic locally, causing duplicated code and visual inconsistency across plugins and apps.

image

Add BBBAvatar (src/components/Avatar), using bbb-plugin-pick-random-user's user-avatar as the reference implementation, extended to mirror BBB's own conventions rather than inventing new ones:

  • Renders the avatar image, falling back to initials on a colored background when no image is given or it fails to load.
  • The fallback color is hashed deterministically from the user's name into the same 16-color palette akka-bbb-apps' ColorPicker assigns server-side, so the fallback lands on colors real BBB users get.
  • small/medium/large size variants (medium default).
  • isModerator renders the rounded-square shape BBB uses for moderators, independent of color.
  • isYou applies BBB's own "you" color (colorUserYou, added to the shared palette) in place of the fallback, overridden by an explicit color prop.
  • isTalking shows a pulsing ring in the avatar's own color, mirroring BBB's talking indicator (ported to use CSS's native color-to-transparent interpolation instead of manual alpha-string concatenation, so it works with both hex colors and CSS custom properties).
  • A Tippy tooltip shows the full name on hover; disableTooltip opts out.

Closes Issue(s)

Closes #75

The library has no reusable component for rendering a user avatar.
Every BBB surface that needs one — e.g. bbb-plugin-pick-random-user's
user-avatar — reimplements the same image/initials/color logic
locally, causing duplicated code and visual inconsistency across
plugins and apps.

Add BBBAvatar (src/components/Avatar), using bbb-plugin-pick-random-user's
user-avatar as the reference implementation, extended to mirror BBB's
own conventions rather than inventing new ones:

- Renders the avatar image, falling back to initials on a colored
  background when no image is given or it fails to load.
- The fallback color is hashed deterministically from the user's name
  into the same 16-color palette akka-bbb-apps' ColorPicker assigns
  server-side, so the fallback lands on colors real BBB users get.
- small/medium/large size variants (medium default).
- isModerator renders the rounded-square shape BBB uses for
  moderators, independent of color.
- isYou applies BBB's own "you" color (colorUserYou, added to the
  shared palette) in place of the fallback, overridden by an explicit
  color prop.
- isTalking shows a pulsing ring in the avatar's own color, mirroring
  BBB's talking indicator (ported to use CSS's native color-to-transparent
  interpolation instead of manual alpha-string concatenation, so it
  works with both hex colors and CSS custom properties).
- A Tippy tooltip shows the full name on hover; disableTooltip opts out.
@Arthurk12
Arthurk12 merged commit 673ed00 into bigbluebutton:develop Sep 19, 2026
2 checks passed
@Arthurk12
Arthurk12 deleted the issue/75 branch September 19, 2026 13:10
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