Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Tray icon voice detection, customization and notification badge #517

Open
wants to merge 86 commits into
base: main
Choose a base branch
from

Conversation

PolisanTheEasyNick
Copy link
Contributor

@PolisanTheEasyNick PolisanTheEasyNick commented Apr 18, 2024

epic pr🚀 cooking explodin
Resolves #294, partially resolves #667

  • Show icons depending on current voice state
  • Add ability to change colors
  • Auto change fill color with override function depending on white/black theme
  • Create UI for manually choosing custom icons
  • Create functional to choose custom icons
  • Add ability to choose from .svg file
  • Add reset buttons
  • Resize to 16x16 for MacOS devices
  • Improve logic for handling situations when user-defined icon can't be loaded
  • Add ability to choose which icons to override
  • Accent color support for Linux
  • Show notification badge at top of icon
  • Create own svg for badge icon and follow user-picked color

Any ideas about improving PR structure are welcome ^^


Voice Detection Icons

image image image image

Ability to set custom color:
image


Custom Tray Icons

image


Notification Badge on top of Tray Icon

image
image
And with some random screenshot as tray icon xddd
image
Follows tray custom colors:
image

Implemented on plain Electron canvas, without using any new dependencies.

Special thanks to @MrGarlic1 and @Covkie

@EtereosDawn
Copy link

EtereosDawn commented Apr 19, 2024

It's a great feature, but I wanted to say that maybe the colors could be different. I barely see the icon in gnome where the bar is completely black. If you could choose a palette that benefits everyone that would be great. It seems very hidden indeed. for me tray icons vesktop always seem of low quality when compared with other Apps. These two are the last ones that look really bad in gnome. I believe it's just a palette choice like the white of the other tray icons

image

image

the color palette doesn't have to be white, just some color that benefits from black.

image

@PolisanTheEasyNick
Copy link
Contributor Author

Thank you for feedback! I'm not using any black colors, I believe that it was just small border width. Also, I increased whole icon size. Can you please pull and retest?
What state is on your last screenshot? If it is muted or deafened that means that icons too small, and we need to redraw them completely, because I just took discord's original icons and changed colors to Vesktop ones. They are 24x24 pixels, so maybe they have not resized to proper size in Gnome system.

@EtereosDawn
Copy link

Thank you for feedback! I'm not using any black colors, I believe that it was just small border width. Also, I increased whole icon size. Can you please pull and retest? What state is on your last screenshot? If it is muted or deafened that means that icons too small, and we need to redraw them completely, because I just took discord's original icons and changed colors to Vesktop ones. They are 24x24 pixels, so maybe they have not resized to proper size in Gnome system.

I can confirm that it looks much better! Well, maybe the edges of the circle could be a little smoother but I believe that the pixels are due to my monitor. That's great :) thanks for accepting the feedbeck.

image

src/main/mainWindow.ts Outdated Show resolved Hide resolved
src/main/mainWindow.ts Outdated Show resolved Hide resolved
@Covkie
Copy link
Collaborator

Covkie commented Apr 24, 2024

Might it be best to fold #261 into this PR?

@D3SOX
Copy link
Contributor

D3SOX commented Apr 24, 2024

Why is it pink. I think this should either copy stock Discord or make it customizable. I would prefer the latter then I could select my accent color.
Not sure if it's feasible when it must be a PNG

@PolisanTheEasyNick
Copy link
Contributor Author

PolisanTheEasyNick commented Apr 26, 2024

Added ability to change colors. For now, I want to find a way how to disable icon color chooser in settings when tray icon is disabled instead of hiding the whole setting and (maybe) add ability to propose to user his system accent color.
Edit: also I want to slightly refactor code for not reapplying same color to svg on each state change but instead apply them once on color change, somewhere store pngs of needed color and just use them. Done

@alchzh
Copy link

alchzh commented Aug 6, 2024

Might it be best to fold #261 into this PR?

I just found out about this PR, looks great though I haven't tested it yet. This only shows a notification dot not a number, right? if there's interest in getting numbers in the tray icons like I have it in that PR i'm happy to work on top of your PR @PolisanTheEasyNick (it's an important feature for me)

@PolisanTheEasyNick
Copy link
Contributor Author

Might it be best to fold #261 into this PR?

I just found out about this PR, looks great though I haven't tested it yet. This only shows a notification dot not a number, right? if there's interest in getting numbers in the tray icons like I have it in that PR i'm happy to work on top of your PR @PolisanTheEasyNick (it's an important feature for me)

I can add that easily (even already did once at c725352 and removed at 8bbe16b), but problem was that numbers on badge in tray icon is very small and not readable, so there was a decision in ds chat to show only notification dot.
Also, this PR is already quite massive and badge logic on Linux is quite overwhelming, so probably the best approach here will be to rework the whole notification badge settings and with this add support of enabling/disabling badge numbers in tray icon :)

thororen1234 added a commit to Equicord/Equibop that referenced this pull request Aug 8, 2024
@zoobporsor
Copy link

Where is the option to change the taskbar and tray icon? I cant find it

@PolisanTheEasyNick
Copy link
Contributor Author

Where is the option to change the taskbar and tray icon? I cant find it

Vesktop Settings -> Tray
image
If you still can't find try retoggle "Enable Tray Icon" option. If still can't find then make sure you're using tray-icon branch

@prochy-exe
Copy link

prochy-exe commented Aug 27, 2024

I tried running this on windows and it works just fine, the only problem is that the icon is not customizable but the notification dot shows up, and the icon changes while in call. The only problem is that it looks a bit strange? I'm not sure if this is visible on the screenshot

image

image

If you need some specific logs or anything else please let me know. Thanks!

@PolisanTheEasyNick
Copy link
Contributor Author

PolisanTheEasyNick commented Aug 27, 2024

I tried running this on windows and it works just fine, the only problem is that the icon is not customizable

Try retoggle "Enable tray icon" setting

The only problem is that it looks a bit strange? I'm not sure if this is visible on the screenshot

It is strange indeed. Looks like some problem with icon sizes on Windows :c
Probably some custom icons will look better

@zoobporsor
Copy link

Where is the option to change the taskbar and tray icon? I cant find it

Vesktop Settings -> Tray image If you still can't find try retoggle "Enable Tray Icon" option. If still can't find then make sure you're using tray-icon branch

Ok but this doesnt exist in the main .app image? I need to download some special pre-release build? Its not out yet officially?

@PolisanTheEasyNick
Copy link
Contributor Author

Ok but this doesnt exist in the main .app image?

No, it will be at .app when this PR would be merged and new Vesktop release released

I need to download some special pre-release build? Its not out yet officially?

You can clone tray-icon branch from my fork and start Vesktop from console

@prochy-exe
Copy link

Where is the option to change the taskbar and tray icon? I cant find it

Vesktop Settings -> Tray image If you still can't find try retoggle "Enable Tray Icon" option. If still can't find then make sure you're using tray-icon branch

Ok but this doesnt exist in the main .app image? I need to download some special pre-release build? Its not out yet officially?

i made this repo so if you trust me enough you can get it from here, if you are not on mac that is https://github.com/prochy-exe/custom-vesktop-builds

@BreadYogurt
Copy link

Using SVG files doesn't seem to scale properly for me, here's the results from trying to use the discord tray icons included in the Papirus icon set.
Screenshot_20240903_093546

@PolisanTheEasyNick
Copy link
Contributor Author

Can you please send .svg file you're trying to set? I'll try to test and fix ASAP

@BreadYogurt
Copy link

Here it is.
discord-tray

@PolisanTheEasyNick
Copy link
Contributor Author

You can try to pull. Looks like fixed for me :)
I hope nothing explodes.

@BreadYogurt
Copy link

Yep, that fixed it, and more importantly, nothing exploded!

@fluffynuts
Copy link

This all looks really good - will it come to the binary releases sometime soon? I'm looking forward to this - it's the biggest thing I'm missing when moving from discord to vesktop, because I disable the noise and pop-outs of notifications, so having the tray icon with a red dot is pretty-much how I know to go check what's going on

Also not a fan of the VC tray icon - it's, imo, not clearly identifiable enough (easy to scan) - an artifact, probably, of an icon which works ok at larger sizes and becomes trash when compressed. Icons are hard. I rarely make a good one.

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.

User customizable assets [Feature Request] Restore Discord "Audio Detected" tray icon?
10 participants