feat(webcam): avatar loading

[frankemax]

What does this PR do?

Add a new avatar component to video list item
Change the design of the components, following the new video list idea suggested here #13844 (comment)
Add icons related to the state of the user: presenter / dialIn

Closes Issue(s)

Closes #12481

Points to review

• I'm not really used to using styled components. If there is a better way to define the styles, feel free to suggest changes.
• Several places on the site use avatar component. As his styles have been changed, it would be good to take a look to see if didn't break anything.
• It will be nice to test out different image sizes and formats (GIFs) in the user avatar.

Screenshots

Presenter / dial In / moderator / client

When a user joins in a meeting, he will see this during of other users webcam loading:

loadingInAction2.mp4

Extended loading

loading.mp4

Talking indicator

TalkingIndicator.mp4

Squeezed

Reconnecting animation

Peek.2022-05-05.15-21.mp4

Avatar emoji status

Peek.2022-05-05.16-50.mp4

[prlanzarin]

cc @ramonlsouza feel free to assign yourself as a reviewer if you deem appropriate

[prlanzarin]

Several places on the site use avatar component. As his styles have been changed, it would be good to take a look to see if didn't break anything.

@frankemax maybe you should extend the user-list avatar styles in a decoupled style sheet in video-list-etc? I think that may be feasible (and recommendable) from a very brief vertical glance since most of the changes done in the user-list styles are conditional to a isVideoContainer boolean.

[frankemax]

@prlanzarin now it's ready for re-review

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
11 Code Smells

No Coverage information
2.5% Duplication

[prlanzarin]

This seems good as a first version.

A few pending things (which I discussed with @frankemax) that, IMO, should be addressed in subsequent PRs/patches:

• There can be a tiny gap between the talking indicator frame and the video container corner due to the new border radius
• The user name position was moved to the lower left side as a suggestion of mine to 1) make things easier 2) make the connecting vs connected views have consistent UI element positions. This probably warrants an (N)ACK from @tylercopeland once it lands on some testing server and he gets to use it.
• Avatar user icons (presenter/dial in) do not disappear when the container elements are hidden due to constrained width. They should.
• Review the camera container background color. I found the new one a bit confusing since it's very similar to the client's main background color. But that's my view, so cc @tylercopeland

[tylercopeland]

@prlanzarin

• Updating the location of the name is fine by me. I like how it's visually the same as the video experience. So creating consistency between those two experience is a great idea.
• In terms of a background colour, we can explore something darker. I can provide a colour code for this items.

[prlanzarin]

@tylercopeland

Thanks.

In terms of a background colour, we can explore something darker. I can provide a colour code for this items.

Cool. As a suggestion: one of our designers suggested #3B4A5C a while ago when we were exploring a better background color for webcam letter-boxing. Maybe it fits this scenario as well?

[NarsimaChilkuri]

@frankemax Hi this implementation is working fine, but how to modify this in a way that this avatar placeholder will be previewed everytime user disables his/her webcam

[frankemax]

@NarsimaChilkuri
I'm not sure which is the best way. I know there is an issue for this: #13844

And designs here: #13844 (comment)

I believe that just changing the HTML5 you can reach a satisfactory result, but you would have to rethink the layout context logic and cameras grid in a way that resembles the proposed designs.

Starting with these points #13844 (comment) would be a good start...

[narsimachilkuri45]

@frankemax can you give me an overview what changes are required to establish the satisfactory result which i need

[narsimachilkuri45]

@frankemax i need to show placeholder of webcam connecting only if you stop video webcam

[frankemax]

@narsimachilkuri45 #13844 (comment)
Planned 2.7

BUT, if you want to try on your own, I'm doing this for the mobile-sdk right now, maybe this PR will inspire you:
mconf/bbb-mobile-sdk#167

[narsimachilkuri45]

@frankemax it is for mobile sdk right, if possible can you guide me for the changes in bigbluebutton-html5 for web version, so i can implement it over there