feat: improve extra media indicators

[mtdvlpr]

Proposed Changes

A clear and concise description of the changes in this pull request.

If applicable, list the changes in a list:

Related to #[issue/discussion nr. here]

[mtdvlpr]

[ux-git]

Looks nice.

@sircharlo what do you think? Does it even make sense to mark the imported song with a different icon?

[mtdvlpr]

@ux-git, same issue with the monitored indicator. If a song is extracted from a watched jwl playlist file, which badge do we show? I feel like we're over-engineering this a bit. Should we just either show the extra media / monitored icon OR the song icon when both apply?

[sircharlo]

Instead of mixing multiple icons, we can have a separate icon for the added songs. Same visual point, different inner icon. For me, even the standard note icon is fine for custom songs, but this method covers this slight inconsistency.

Also, I wouldn't enlarge the icon to keep all of them the same size, which is especially important for weekend meetings where users can easily see all of the icons on one page. I made the icons slightly bigger within the container to if you find the icon a bit too small.

I love this idea.

[sircharlo]

Looks nice.

@sircharlo what do you think? Does it even make sense to mark the imported song with a different icon?

Yeah, looks great. I personally feel it's very useful to the end user to indicate what is manually / watcher imported vs. automatic.

[sircharlo]

What about having a left and right area in the folder icon? Left could show if folder is watched or not, right could show song. Just a thought.

That way, we'd have a few possibilities:

• Watched folder, normal media
• Watched folder, song
• Manually added, normal media
• Manually added, song

[mtdvlpr]

Okay, so we have the following options:

Type	Icon
Song	music note
Paragraph	paragraph icon
Extra media	user inside folder
Watched media	star inside folder
Extra song	music note inside folder
Watched song	?
Extra paragraph (when user edited tag)	?
Watched paragraph (when user edited tag)	?

[sircharlo]

For a monitored folder, what about something like this, but with an eye or a lightning bolt instead of a cog:

Type	Glyph	Parent Icon
Song	Music note
Paragraph	Paragraph icon
Extra media	User? Multimedia? Video? Picture?	Folder
Extra song	Music note	Folder
Extra paragraph (when user edited tag)	Paragraph icon	Folder
Watched media	User? Multimedia? Video? Picture?	Folder with star? Folder with eye? Folder with lightning bolt?
Watched song	Music note	Folder with star? Folder with eye? Folder with lightning bolt?
Watched paragraph (when user edited tag)	Paragraph icon	Folder with star? Folder with eye? Folder with lightning bolt?

[ux-git]

Well, now it really looks like an overengineering 😅 So many icons may reduce the intuitiveness level.

I tried to split the synced vs imported media by adding some kind of stroke to the badge itself if order to keep only the media type inside of the badge. But I don't really like how it looks like right now. The lighter one is fine, but the song border is hard to see.

[mtdvlpr]

For the watched folder, I think an eye icon would fit best.

[ux-git]

Do we even need to show the watched folder media? What is a user case where having the custom media indicator won't be enough?

[ux-git]

Maybe simply either custom media OR watched folder media would work?

Then:
• normal icons for labels for synced media
• watched folder for all media in the watched folder
• custom media folder for all media added manually

I'm not sure that such small details like 'a song icon inside of a watched folder' adds anything to the UX.

[mtdvlpr]

Maybe simply either custom media OR watched folder media would work?

Then:
• normal icons for labels for synced media
• watched folder for all media in the watched folder
• custom media folder for all media added manually

I'm not sure that such small details like 'a song icon inside of a watched folder' adds anything to the UX.

I agree. I think having a unique icon for each edge case is overkill.

[ux-git]

@mtdvlpr would those two icons cover all the main custom categories/cases?

[mtdvlpr]

[ux-git]

Hmm, the two folder icons are too hard to distinguish, I'm already imagine seeing no difference on 720p display 😄. What do you think about using this Add media icon? Then there will be some logical connection:

[sircharlo]

Hmm, the two folder icons are easy to confuse. What do you think about using this Add media icon? Then there will be some logical connection:

You mean use the Add Media icon for non-watched added media?

[ux-git]

Plus, the eye in the watched folder icon has been significantly enlarged now, already in Figma

[ux-git]

You mean use the Add Media icon for non-watched added media?

Yes

[sircharlo]

Like this?

[mtdvlpr]

How should I get the correct svg code for the icons? I've been right clicking them and then copy as svg. Is there a better way?

[ux-git]

Depending on the workflow: either click on the parent container, and then copy as SVG, or select multiple and click + on the right side Export panel, or use a plugins, I'm pretty sure there's one that shows the code.

[ux-git]

Like this?

Looks better to me. Your thoughts guys?

[sircharlo]

How should I get the correct svg code for the icons? I've been right clicking them and then copy as svg. Is there a better way?

Click on icon in UI Kit > Export > SVG
Then, to show up correctly, the evenodd has to be removed (if present) using a tool like this one.

[sircharlo]

Like this?

Looks better to me. Your thoughts guys?

Sounds good!
Are we happy with the repeat indicator being on the right?

[ux-git]

Are we happy with the repeat indicator being on the right?

I think so. Playback indicator near the playback controls. Would it make sense to make it clickable to turn it off? Or is it tricky considering that it must be turned only through the More menu?

[sircharlo]

Are we happy with the repeat indicator being on the right?

I think so. Playback indicator near the playback controls. Would it make sense to make it clickable to turn it off? Or is it tricky considering that it must be turned only through the More menu?

Again, I'm torn 😃
Right now, the indicator is only visible when loop mode is on.

Option 1: Clickable Toggle

• Pros: Quickly turns loop mode off.
• Cons: Users may disable it accidentally and be unsure how to turn it back on.

Option 2: Context Menu Option

• Pros: Maintains consistency with user actions.
• Cons: Slower to disable loop mode when needed.

[sircharlo]

(I'm leaning towards option 2 personally.)

[ux-git]

I'm leaning towards option 2 personally.

Me too. If user 1. found this option, 2. and he needs it – then they're advanced enough users.

[sircharlo]

LGTM!