Feat(#697 | #639): Voice chat ui improvements

[Melonendk]

Summary

Improvements to voice chat UI. With updated padding for voice grid. Updated Voice cards with color, text and controls. Pins and general visibility improvements.

Closes #697
Closes #639

Additional Context

When i read issue #639 i wanted to do it quickly but ended up doing more. - So that's why a new issue with bigger changes.

Read Issue #697 for more detailed changes.

Example of changes (Pictures Updated) (Click me)

Control is smaller and deafen has been added. with a split between voice controls and.

Voice grid updated now to give space in the bottom control bar and removed background for pinned cards.
Added colors so card as well.

[diogomartino]

Overall it looks pretty good but I have some requests:

Card gradients

There are some cases where having colors like that in the cards is too distracting, specially when a user is with the webcam on. If he has like a red background, he will be in the center of the card and around him all red. It looks terrible. I think the how bad it can look in the worst case outmatches how good it can look in the best case so for this reason I would just remove this feature and leave as it was before.

Pinned card spacing

When a card is pinned there's an empty space below the cards that shouldn't be there. In this specific layout we need to use as much space to display the stream and user cards as possible, having dead space there that's only used to show the controls when the mouse is near makes no sense.

I'm not a discord user but your designs looked familiar so I went to check it out and it's really close to discord, and to my surprise in theirs it also has that dead space. I understand that it's there to not block users cards but having more space to render the stream is much more important than that. So this needs to be removed.

Also I see that now the control bar starts showing as soon as you hover the whole channel area. This should be kept as it was before. The control bar should only be displayed when the mouse is close enough to the center bottom.

Haven't looked at the code yet, this is just pure functional feedback.

[Melonendk]

Cool =)

There are some cases where having colors like that in the cards is too distracting, specially when a user is with the webcam on. If he has like a red background, he will be in the center of the card and around him all red. It looks terrible. I think the how bad it can look in the worst case outmatches how good it can look in the best case so for this reason I would just remove this feature and leave as it was before.

Gaps for when using the webcam can easily be fixed. So there is no colors in general - it was already prominent before with the default colors.

Ideas:

• Make so when users are using their camera the card background is black with the border still there.. Should be an easy and quick change.
• Instead of a linear gradient make it an radial gradient or solid? Still with brightness down so it doesn't blind.
• Make an option available for users that can turn off card colors (typically accessibility) that are saved on device/browser storage.

When a card is pinned there's an empty space below the cards that shouldn't be there. In this specific layout we need to use as much space to display the stream and user cards as possible, having dead space there that's only used to show the controls when the mouse is near makes no sense.
Also I see that now the control bar starts showing as soon as you hover the whole channel area. This should be kept as it was before. The control bar should only be displayed when the mouse is close enough to the center bottom.

Before the control bar was genuine annoying in the terms when you had a card pinned the others ones would disappear under it. Which made it so users would have to 1-2 extra clicks to pin another user. The dead space can be animated to be minimal and when hover around the bottom as well, to show the control bar. So we still remove the mouse listener as its unnecessary head, and doesn't benefit once it will be on mobile. While this change can be modified to easily work.
But as a UX standpoint its would be more easier for the user when mouse is in the channel, to quicker find the controls bar than knowingly trying to figure out where it would be besides the left sidebar.

I'm not a discord user but your designs looked familiar so I went to check it out and it's really close to discord, and to my surprise in theirs it also has that dead space. I understand that it's there to not block users cards but having more space to render the stream is much more important than that. So this needs to be removed.

There isn't much changed in terms of the design discord also had empty space in top unless full-screen as we would expect. Its basically build on the ratio of 16:9 as the cards is as well.
But back to a thing i can do. I can build button to hide the users so even in pinned mode. You will get even more space. like how i even made the control smaller as it was quite big before as well.

Haven't looked at the code yet, this is just pure functional feedback.

Let me know if anything. And ill see what i can do.

[crabstorage]

Would something like these work? The control bar still has reserved space, but also maximizes the stream area. The control bar could either push user cards to the sides when it appears, or the cards could always leave room for it to appear.

Making the active speaker outline in the color of the user avatar (or a selectable hex value) rather than a full gradient card still allows for some user customization, while drastically cutting down on how 'loud' the cards are visually. It's also just as easy to intuit what's going on as the default green active speaker outline.

In this example, users A and C are both speaking.

I have always used the sidebar controls rather than control bar so I'm not very informed on how users want it to behave.

[diogomartino]

@Melonendk

You can go ahead and try to fix the gap issue, that will at least make it less ugly.
You can also try linear vs gradient and see what fits better into it.
The option will be needed yes, but I'm still not sure if that would be off by default or not. It can be placed near the "Display user banners" for now, on the top right.

Before the control bar was genuine annoying in the terms when you had a card pinned the others ones would disappear under it.

Alright, we can try to keep it as is with the gap there. I'm not a big fan but I can see why it's there. Let's see what the feedback about it is when it hits prod, we can always fix it afterwards.

Also since we are keeping the gap there, I don't have a problem with the controls being shown all the time when the user is hovering all the channel area.

@crabstorage I think that layout is worse tbh. When there 4 users like in your screenshot it might work, but as soon as there are many more or an odd number it will fall apart. The voice activity colors matching the banner color might be a good touch but probably confusing. Is the color from the banner? From the role color? From somewhere else? At first glance a user won't understand from where that's coming from.

[Melonendk]

@diogomartino

The option will be needed yes, but I'm still not sure if that would be off by default or not. It can be placed near the "Display user banners" for now, on the top right.

Well i would say both, but on a good note start with it being off by default. Then let the users decide in settings and or can be put in the welcome dialog.

Pictures

Radial

Radial bottom

Radial bottom thicker

You can also try linear vs gradient and see what fits better into it.

Well isnt it basically the same? Or do i get confused by your wording.
Anyway i have attached examples of different displays. Also have a look here (Docs for gradients) might give some inspirations or ideas of whats possible. If you would like some user select-able gradients / colors i recommend looking here at ui-gradients as the options is great.

---

Update: Should also be pushed to the branch as well as merged latest develop in to check for breaks.

So here are my changes everything can be seen on the reference in the bottom:

• Changed control bar padding from 6-3 gave it more space in general in the bottom.
• Made it so when user when not hovering it hides and gives the user full screen space. same as in pinned mode.
• Changed so when there is a camera on the background will be full black. For that user, both for banner and for gradient to be.
• Added option for use of portal in popover and tootips. - Default is true
• Fixed an issue with tooltips / popovers would glitch the hover effects. ^Related to portal.
• Added an hide participant button on the pinned card in the center.

Dont mind the colors of the gif. Its just to show functionality.

[EmoticonOrden]

(Unnecessary comment) @Melonendk, last comment looks great, i wanna see this in next release, if that suits @diogomartino 😄

[dchester]

For user card colors, if we do gradients like this from the banner color, I worry that we could end up with some very ugly avatar+color combos, whether on purpose or by accident from the user's point of view.

Instead, what if we take a color from the avatar, and then "mute" it a bit so we avoid having any electric neon colors? This seems to be what Discord does, more or less. We can do this all with just CSS background-image and filter.

Card colors are derived from avatar images

In the example below, we take a pixel from the bottom of the avatar, one third from the left, then run filter: saturate(0.7) brightness(1.25) brightness(0.5) -- which does the "muting" effect:

// card-gradient.tsx

import { cn } from '@/lib/utils';

type TCardGradientProps = {
  avatarUrl?: string | null;
};

const CardGradient = ({ avatarUrl }: TCardGradientProps) => (
  <div
    className={cn(
      'absolute inset-0 pointer-events-none',
      avatarUrl
        ? 'bg-[33%_bottom] bg-[length:200000vw] bg-no-repeat'
        : 'bg-black brightness-70'
    )}
    style={avatarUrl ? { backgroundImage: `url("${avatarUrl}")`, filter: 'saturate(0.7) brightness(1.25) brightness(0.5)' } : undefined}
  />
);

export { CardGradient };

If we want to do something like this, we could tweak the filter to do better with black, and we could do a subtle gradient if we want instead of totally flat. But either way, an approach like this should make the "worst case" much less aesthetically objectionable.

[Melonendk]

@dchester

My plan was to do a way to get the color from the avatar - and then use that. But i would have done it for a future PR as it would change some settings as i would rather have it collect the color on upload and then store it. Or when ever the user edits their profile there will come options from the profile picture.

I worry that we could end up with some very ugly avatar+color combos, whether on purpose or by accident from the user's point of view.

Well people will find ways to do such thing anyway, and you cant stop that. Only way would to remove banners and avatars completely, which would drive users away since it wont allow a bit of personality. (I don't know how to word it but i hope it makes sense. I'ts only positive thinking!)

bg-[length:200000vw]

Your solution is nice "hack" / alternative way for it, but what you basically asking the browser to zoom a ton.... and imagine that have to render for multiple people. Not how i would have done it. But still clever way :P

You could easy make use of canvas rendering context for 2D to extract colors from positions that are build in, but only would do so when user uploads a new avatar.

But i would take that and put it another feature request since it would involve more user settings, storage etc.
We could simply also keep the current card gradient (as in prod) as its quickly to default back to.

const CardGradient = () => (
  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
);

Then after this one depending on what decision open a new issue accordingly.

[dchester]

you basically asking the browser to zoom a ton.... and imagine that have to render for multiple people

No, just asking the browser to do a tiny bit of math to get one pixel value from an image it has already rendered. The performance impact is negligible.

I made a little demo to compare approaches. If you visit each of the links below and zoom, scroll, resize with the Performance tab open, you can see there is no meaningful difference from one to the other, looking at paint times, render times, gpu usage etc.

images	gradients
https://backgrounds-demo-14c630.gitlab.io/	https://backgrounds-demo-14c630.gitlab.io/?gradient

[diogomartino]

I was travelling so I haven't had the time to look at this.

@Melonendk The UI looks good, but I'm not a fan of that layout shift that happens to show the controls. Tbh I think it would be better to just leave the control bar there all the time and not just on hover. You can add an option to show/hide the controls. If it's off, the controls never show, if it's on, they show all the time. What do you think?

The "show/hide participants" is neat.

@dchester That's a pretty good ideia tbh. Performance shouldn't be a problem if all is cached correctly. In the case where there's no avatar, it falls back to the banner color?

[Melonendk]

I was travelling so I haven't had the time to look at this.

@diogomartino Understandable - Hope it was fun travels tho =)

I'm not a fan of that layout shift that happens to show the controls

I can tweak the transition. right now there like an knack that happens in the end/start dues to the max height. - but at the time i just wanted todo it functional, and later tweak animations if any.

Tbh I think it would be better to just leave the control bar there all the time and not just on hover.
You can add an option to show/hide the controls. If it's off, the controls never show, if it's on, they show all the time. What do you think?

Should'n be a problem to add it as an option, if we dont wast the animations.- Question is more where you would want it ?
User settings in others or as a button in the top where text chat etc are. ? - I can also add a button besides the participants one to show/hide controls?

@dchester Performance shouldn't be a problem if all is cached correctly. In the case where there's no avatar, it falls back to the banner color?

I also want to clarify, i might have worded my response in a wrong way so sorry about that if it was offensive.
But as a standpoint I'd still suggest another approach. Both for readability of the code, maintaining it in the future.
But rasterizing images is not always the best.. even tho there is a cache, there is always the mobiles and not high end devices. - Like currently for the example provided, it would actually depending on the view (mobile / vs different desktop screens), It would change the color. since it technically just rasterize to only being able to show 1 color. in the same spot, that would move depending on the screen.
3g/4g (yaeh i know, 5g exists., Wfifi everywhere.. still.. its optimization and longevity.) on "good" connection would still take some time to load, even if it was cached. - so would taken canvas and used that.

If we want it do have included the colors in this PR may i suggest the following:

• Add an checker for when user uploads their avatar, it will give some options for the user to selects.
• Add a new DB entry OR use the banner color entry to store that color.
• Give the option (simple checkbox) to save an universal color pick instead. (will just work as now, to upload the colors. does no muteing and other things.)
• Makes the background solid for that color when they not showing cam, as cam will have black background as well.
• On selects run the filter to mute the colors to that RGB value. as we would have used the css filters normally. - only applicable if user have not checked the universal color pick instead.

[diogomartino]

@Melonendk Sorry, I have been too busy to handle Sharkord things lately and it will probably keep like this for some time unfortunately.

I'm fine with adding a field in the database, but would you extract the color server side or client side on upload?

[Melonendk]

Sorry, I have been too busy to handle Sharkord things lately and it will probably keep like this for some time unfortunately.

@diogomartino Hey man take care of yourself first! Dont stress and take your time. Feel free to let me know if anything i can do help ease something. Or in general

I'm fine with adding a field in the database.

Cool, I think we might just rename 'bannerColor' to 'profileColor'? Worst case add profileColor in addition to banner, and let the user decide on a color from banner or avatar?

Would you extract the color server side or client side on upload?

As for the upload i can do both, all tho doing it server-side i could install sharp but then i haven't tested bundle size etc yet to ill have to get back on that to check on that. (performance should not be a problem tho its more size so ill have to experiment a little) - Unless its okay with it as it can be useful for other than color extraction. Such as file compression and other things.
Client would be native canvas extraction and the sending the string with the file to be uploaded.

[diogomartino]

@Melonendk bundling sharp is not something I want. I have thought about it in the past for having image optimization but it's not worth the hassle. Client is the way to go here.

I would avoid renaming fields tbh, something like calculatedBannerColor would be better IMO. The choice of bannerColor initially was not great, profileColor would have been better.

[Melonendk]

@diogomartino, nice to know also I har been busy with some events. But I'll be back on it.

I agree with like in terms of database that profile color would have been better. Will make the nameing make sense of course.
So simple question I. Regards of the future. Would we want to keep profilecolor as static or make it into an string/object array of max 2 length to maybe have possible for gradients. Or at least easier in that regards.

My reasoning is that we can easily also just limit to 1 length now. And just later easy update it so gradients would work. In another pr

Until response I will go with single string as usual.

Expect and updated version from me this week.