Add Music Player UI for Mobile Devices

[anshg1214]

This PR adds a Music Player UI for Mobile Devices

[MonkeyDo]

Looks awesome already! Much, much better UI on mobile, and I think the desktop version is also going to be jealous :P

Early feedback based on this:

• I added a padding-bottom of the height of the brainzplayer bar (@brainzplayer-height + @progress-bar-height variables), otherwise the bottom buttons are all hidden behind it:
  
• You can't really read the track duration text; you might need a tool to decide which color is most readable, and we have tinycolor2 installed. You can generate complementary colors for example, and use this utility to automatically choose one with default to black/white if it's not readable: https://github.com/bgrins/TinyColor?tab=readme-ov-file#mostreadable I was just looking at that for LB-1102, LB-1610, LB-945: Revamp Top Entity stats pages #2937
• I think the top header might be a bit too tall; it looks quite roomy, and (it's hard to see) the cover art is cropped at the bottom, suggesting there is not enough space available (because of the bottom padding I added)
• Regarding the sizing of everything I would recommend the following:
  • Have a padding all around the player of 1em that will serve to align all the elements inside left and right
  • Remove the padding from .cover-art-scroll-wrapper and add the following to make sure the cover art stays at max dimensions: flex-shrink: 0; aspect-ratio: 1;
  • Remove horizontal padding for the other elements
  • Don't constrain the height of the .info and .header classes. Basically, we set a full size for the cover art and let the rest automatically take up the available space
• I think the cover-art-wrapper class doesn't need to be flexbox (or maybe you do for swiping??).
• The feedback icons stroke looks too thick next to the rest of the UI. stroke-width: 20px; (or maybe 1em) (down from 50px) should work:
  
• Finally, for .player-buttons you can remove the padding and the font-size, and set margin-top: auto; margin-bottom: auto; to automatically center it vertically in the available space. Each button inside can have the class .btn-icon added to have a larger button target for my fat fingers :P

The result is this, with flexbox highlighted for convenience

[MonkeyDo]

One thing I forgot is that we now have a volume control button to fit in.
The button bar was getting busy and losing its symmetry, not looking great.
So I reorganized extra buttons as a secondary button bar (moving the like/dislike buttons there), and tweaked everything a bit to fit nicely.
What do you think?

And with the volume bar open (slides in from offscreen to the right)

[MonkeyDo]

Aaaand finally a bit more cleanup/reorganization on the bottom player bar, because I wasn't fully satisfied.
For example, moved the "..." more actions menu button to the top-right of the new player UI.
Before playing anything, clean look, centered:

After pressing play:

[MonkeyDo]

As far as I am concerned this is ready and looking fire! 🔥

Currently deployed to test.listenbrainz.org, but who knows how long, so there are screenshots at the bottom of this page to look at.

Would love to hear @Aerozol's opinion on all this, but I think we could already open up to beta testing and community feedback.

[MonkeyDo]

Mmm, spoke too soon, the progress bar in the desktop view doesn't seem to update, so I need to fix that.

[RustyNova016]

Here's a few points that I noticed:

• the bottom left still remains the Listenbrainz logo instead the cover art on yt player
• the icon to open the player doesn't fit. It looks like it opens the album instead
• the YouTube preview remains floating, and awkward. Idk what's possible, but since the cover art is set to be the thumbnail, why not instead setting it to be the yt preview?
• if we can't, can we have the original cover art instead? We don't need a repeat of the thumbnail
• The ends of the progress bar should be totally round. LB's style is big and bubbly shapes, and having sqircles doesn't fit.
• the middle part of the player should be centered between the cover art and the bottom icons. On my device it's pretty noticeable
  
• When changing the music, the player doesn't change information all at once, making the background, title, and time desync for a second
• When the title scrolls, it jitters.
• when changing music, the scrollbar disappear, making the css jitter
• Managed to make the title disappear. No idea how :/
  
• having the original title of the track would be great. If the matching provide the wrong video, it would be great to know what it is supposed to play

It's pretty great nonetheless! I'm just a perfectionist

[Aerozol]

Looks great!! Love the simplicity! I don't listen to music much from my phone, and only have YouTube/the default connected, so FYI this have not done any "deep" testing :)

• The button to make the player full screen (the disc) is not obvious to me. I think an "up chevron", or a "full screen" icon might be clearer.
• If I full screen the player, I think the LB player bar at the bottom should be hidden. I don't see that it has any buttons that aren't also in the full screen mode. I know we need to show the YouTube logo, we can put it into the corner of the "cover art square" instead.
• Could we make full screen appear if you swipe up from the player bar, and hide it by swiping down again?
• Had the same thought as Rusty Nova - when the full screen player is activated, could we lock the YouTube player to the "cover art square"? Should keep everybody happy.
• (maybe not for another ticket but while I'm here...) Could we swipe things out of the queue, instead of having to go through the menu each time

These notes are visual but I think would make a big difference:

• It would be cool to add a slight gradient to the bottom, from our secondary huesound colour? I think it would make everything really pop - and avoid having the occasional gross colour hanging out on its own.
• @MonkeyDo, if you had fun with the blob-ules on the home page, and they are not CPU-heavy, we could even have some of them subtly blobbling about in the bg? Happy to do a mockup if you want to see what I mean :) (I was thinking about integrating them into entity pages as well)
• I think bringing some secondary, slightly duller, colours into the player UI could help soften it and add some hierarchy. Maybe the huesound colour but with a 5-10% tint for some elements?

[MonkeyDo]

Thank you @RustyNova016 and @Aerozol for the good feedback!
I am going to try to address as many of these as I can, but for some I fear we would need a complete rewrite of the player, which would be for another day.
I will make tickets for the remaining improvements that I can't fix in this PR.

[MonkeyDo]

Feedback I could not address directly:

• When changing the music, the player doesn't change information all at once

  • I don't think there's much we can do about this I'm afraid

• When the title scrolls, it jitters

  • I haven't seen that happen, but nonetheless I tweaked the animation timings, hopefully that solves the issue you were seeing

• when changing music, the scrollbar disappear, making the css jitter

  • I think this issue is resolved—the progress bar no longer disappears between songs—but maybe I misidentified it

• Managed to make the title disappear. No idea how :/

  • No idea either :D One way or another, I assume it is not the result of changes in this PR

• having the original title of the track would be great

  • Not sure about this one. I do understand the reasoning, but I think in the overwhelming majority of cases it will just duplicate info on screen, while we are trying to keep everything as tidy and uncluttered as possible. However,showing the play queue

• swipe up from the player bar to show fullscreen, and hide it by swiping down again

  • This is definitely doable, but I think ansh had some plans regarding swipe/touch actions, so I want to wait until we have a better overall plan for what happens for which actions, and how we will implement them.
  • In the meantime, I also made the cover art thumbnail in the bottom player bar expand the full player, just like the expand icon.

• lock the YouTube player to the "cover art square"

  • It's the obvious way to handle this for the youtube player, showing the video instead of the thumbnail. Unfortunately, the video iframe is not in the same component as the mobile UI, so this would require a pretty consequential rewrite

• "from our secondary huesound colour"

  • Soooo, we are not using that information. Prior to yesterday we were just using the average color of the loaded cover art image. I improved this by using the Vibrant library which does smarter detection of popping colors in images, and use that to create a gradient. It is much better than the 'average color' approach we use in huesound IMHO

• we could even have some blob-ules subtly blobbling about in the bg

  • This could be pretty cool! However the animation consumes extra resources, and making the screen more busy might not be ideal. I propose to make this experiment in a separate PR for testing.

• bringing some secondary, slightly duller, colours into the player UI

  • as mentioned we don't use huesound. However the vibrant library does detect a couple of "muted" colours for each image, so we could potentially use those. I am currently using for the text and icons the colours selected by the library as most readable (white or black) for each colour of the background gradient. If we take another approach we need to ensure readability. This can be very difficult to make it work for every image IMO
  • I added duller colours detected in the image as the colours for the progress bar and the buttons at the bottom, and sometimes the rest of the text if it is readable. Works an absolute treat!

  Feedback for other components:

• Could we swipe things out of the queue, instead of having to go through the menu each time

  • I also very much want this, or a little garbage can icon or something I can use as a shortcut

[RustyNova016]

If you need me to retest the jitter and progress bar disappearing, just put the build on test server I'll retry.

[MonkeyDo]

If you need me to retest the jitter and progress bar disappearing, just put the build on test server I'll retry.

Yes please! I just redeployed on test with latest changes.