feat(BBBAvatar): add avatar component - #81
Merged
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.
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:
Closes Issue(s)
Closes #75