InfiniTime icon indicating copy to clipboard operation
InfiniTime copied to clipboard

(small) Music App Redesign

Open tituscmd opened this issue 8 months ago • 15 comments

Heyo! This PR is a small redesign of the Music app.

I changed the title to be above the artist, as done in most if not all music apps. I also made the artist text a bit darker than the title to differentiate them a little more. I also changed the buttons to be gray (bgAlt). I think judging from the rest of the UI, the aqua buttons are outdated. I'm more than open to debate on that, tho—please share your opinion! :)

~~But there's one thing I don't know how to fix. As seen in the first image, the "Waiting for track information.." or rather "track information.. Waiting for" is also messed up. I couldn't find any reference of that text in the code, maybe someone can tell me where to switch those as well.~~

image music_app_redesign_2

(First iteration) music_app_redesign_1

tituscmd avatar May 11 '25 23:05 tituscmd

Build size and comparison to main:

Section Size Difference
text 378996B -116B
data 944B 0B
bss 22536B 0B

Run in InfiniEmu

github-actions[bot] avatar May 11 '25 23:05 github-actions[bot]

Here's another pic of it on-device image

tituscmd avatar May 12 '25 06:05 tituscmd

Not tested on device but looks good and I like it. Thank you for the contribution :)

Thank you! I'm glad you like it :) Do you have any idea how to fix the template text lines being flipped?

tituscmd avatar May 12 '25 14:05 tituscmd

It's defined in src/components/ble/MusicService.h in lines 74-76.

minacode avatar May 12 '25 14:05 minacode

Looks good!

Wouldn't mind seeing the template strings changed to just say "Not Playing" (by setting the bottom string).

At the bare minimum "This is a very long getTrack name" should be replaced, as you can see it flash when the app is opened.

liamcharger avatar May 12 '25 15:05 liamcharger

Wouldn't mind seeing the template strings changed to just say "Not Playing" (by setting the bottom string).

00f51e01-bf0d-45bb-8281-4051fe13582c This is the updated default screen now.

tituscmd avatar May 12 '25 17:05 tituscmd

I've changed the way to toggle between the track and volume buttons from swiping to double tapping the screen. It also gives a little vibration when the buttons have switched.

I like this more than the swiping. What do y'all think?

tituscmd avatar May 12 '25 17:05 tituscmd

I would rather stick to the same patterns as everywhere else to make the controls as intuitive as possible. Everything you have to discover and remember about the UI is something that people will miss or forget. Why don't we use swipe with the page indicator on the right?

minacode avatar May 13 '25 08:05 minacode

I feel like it doesn't make sense that swiping an entire page uses the same "mechanic" as toggling through 2 button states.

tituscmd avatar May 13 '25 09:05 tituscmd

From my perspective we can break this down to two questions:

  1. How can we make people realize that there are more, but currently hidden, features?
  2. What would we expect people to do to get there?

I would solve the first a visual hint. Because otherwise you would have to read the manual and remember it.

My answer to the second question is that people try the thing that is most intuitive first. Which is in our case, what they are already doing all the time: swiping. I don't think that double tapping is intuitive at all and would suspect any non-techie to never find out about that feature.

minacode avatar May 13 '25 14:05 minacode

But for the scope of this PR it's probably best if you only swap the two labels and leave out the new toggle. I am open to discuss this on another PR. In the meantime we can hopefully merge this one sooner.

minacode avatar May 13 '25 14:05 minacode

I would rather stick to the same patterns as everywhere else to make the controls as intuitive as possible. Everything you have to discover and remember about the UI is something that people will miss or forget. Why don't we use swipe with the page indicator on the right?

#1875 adds a page indicator

SteveAmor avatar May 13 '25 19:05 SteveAmor

But for the scope of this PR it's probably best if you only swap the two labels and leave out the new toggle. I am open to discuss this on another PR. In the meantime we can hopefully merge this one sooner.

I've done this and reverted back to the original way of switching the labels. I think this PR should be all good now

tituscmd avatar May 14 '25 16:05 tituscmd

Had a quick look with InfiniEmu, the buttons seem darker compared to other bgAlt buttons. Could the shade of grey be made the same?

mark9064 avatar Jun 02 '25 18:06 mark9064

Had a quick look with InfiniEmu, the buttons seem darker compared to other bgAlt buttons. Could the shade of grey be made the same?

Yep! Looks like this now, I like it: image

tituscmd avatar Jun 06 '25 22:06 tituscmd

Thank you, for your contribution, @tituscmd! :)

minacode avatar Jun 29 '25 15:06 minacode

Thank you, for your contribution, @tituscmd! :)

You're welcome! Glad I could contribute :)

tituscmd avatar Jun 29 '25 15:06 tituscmd