Add lyrics player to the webinterface

[X-Ryl669]

To fix #1655 last remarks.

This runs linting without issue.
I've implemented scenario 3, which is: the lyric button (in the bottom bar) isn't visible until one song with lyrics is found. Then it appears and can be clicked to display the lyrics pane. It won't go away from then.

[X-Ryl669]

@ejurgensen Any update on this? This should have fixed your remarks.

[ejurgensen]

I haven't gotten around to it yet. @hacketiwack also needs to look at it. Could you (again) share a test file with lyrics?

[X-Ryl669]

Sure: https://file.io/fSboMYVyo4bu
There's an archive with 4 files, one without lyrics, one with non synchronized lyrics and 2 with synchronized lyrics.

[hacketiwack]

I made two comments here.
@X-Ryl669 can you take these comments into account. Thanks

[X-Ryl669]

I've reverted the changes to the bottom navbar and moved the lyrics button to the volume pane on this PR so there shouldn't be any show stopper now. This should fit all your requirements.

In the other PR, I'm discussing about the bottom navbar issue (that's linked with the volume slider discussion somehow). Please continue the navbar improvement on the other thread. I'll probably make some new PR with navbar rework (including my proposed change so we can iterate to improve on the design).

[X-Ryl669]

It looks like this now:

And the queue mode is business as usual:

[ejurgensen]

Great idea about where to place the button @hacketiwack, I agree it's much more at home there.

@X-Ryl669 the download link seems to be no longer working. Can you send it to me at [email protected]?

[ejurgensen]

Thanks for the file, I've tested it now, and it looks good. Two things though:

1. The width of the box feels a bit random. Very wide on pc/landscape, but with the album cover sticking out on phone/portrait. See below.
2. There is a small bug with the green highlighting if the lyrics line is wrapped. Can also be seen from the below.

[X-Ryl669]

The width of the box feels a bit random. Very wide on pc/landscape, but with the album cover sticking out on phone/portrait. See below.

I've specified variable/proportional width margin for the pane of around 10% of the viewport's width (so it's not linked to the album covert art size). If you try on your computer's browser and resize it, you'll see how it behave.

Another possibility is to have fixed width margin (fixed size in pixels) but it'll be very large for computer's landscape mode

I liked the 0 pixel margin too, in that case the lyrics pane touches the border of the screen like this:

If you prefer the latter, let me know, it's very easy to change.

There is a small bug with the green highlighting if the lyrics line is wrapped. Can also be seen from the below.

Right. That's because I'm using CSS here to overlay the green background. The lyric's sentence is a single box that's not cut in multiple box when the text is wrapped (so the single box contains both lines and the background overlay applies on both).
I don't know where the text is going to wrap depending on the screen width.

I don't really have a solution here, only workarounds:

1. Prevent the text from wrapping (this implies having an horizontal scrollbar). Would be like this:
   
2. Split the sentence in words and add an additional animation loop for each word in the sentence (it'll consume more resources since animation will be done by JS and not CSS anymore)
3. Ignore the effect completely and draw the whole sentence in green for the whole duration (this is what amazon music is doing for example).
4. Ignore the bug since it only appears when a line has to be wrapped, so on small screens (or maybe degrade to WA 3 on mobile?).

[hacketiwack]

Thanks for all the modifications. I'm just have a comment/question regarding the colour of the highlighted lyrics.
Could we use one of the standard Bulma colours?

[hacketiwack]

A few more comments:

1. Regarding the width of the lyrics overlay, I would suggest to have it the same size as the audio progress bar.
2. Make the lyrics overlay less strict by removing the 1 pixel border.
3. Have rounded corners for the lyrics overlay so that it matches with the rest of the interface.

And overall, it is a cool feature. Thanks!

[X-Ryl669]

Bulma color, no problem but which one?

[hacketiwack]

I think I would use the $info, but maybe we could stick with some more greenish colour: $primary or $success.

[X-Ryl669]

Here it is, mobile view:

Desktop view:

I'm not fan of the desktop view, it's way too narrow for the lyrics.

In that case, the complete width solution, like this looks better IMHO:

And with top and bottom borders (using Bulma's light color), so the pane is visually distinctive:

There's a bug in the screenshots above, the lyrics pane has a background blur but that's not captured by Firefox's screenshot tool. I've used another tool for the last preview.

[X-Ryl669]

And here's my last attempts:
Instead of making a (conceptual) floating pane, I'm integrating it to the existing interface, redirecting the pane's shadow inside, like this:

With only the top shadow (so the bottom of the pane merges with the slider background):

That's voting time! What is your preference?

[hacketiwack]

Thanks a lot for the proposals. 👍🏻
I must say that I like the last option and or the option named "Desktop View". ☺️

[X-Ryl669]

I'd also vote for the last option. @ejurgensen What do you think?

[X-Ryl669]

I've implemented all suggestions and the last option above. I've also changed the current lyric animation so it fixes the bug with text wrapping. Now I'm splitting the current lyric in words and animate on the words.

This is still using CSS for animation (and not javascript), but the DOM is a bit more complex. I've replaced the background "color wave" we had before to a text color gradient since the timing for words is completely approximate, it gives this:

Please give it a shot to check it works for you. Thanks!

[ejurgensen]

Nice work @X-Ryl669, I think this looks much better. The gradient fill of the text is cool. I agree with @hacketiwack about which proposals look best.

There is still something that irks me about this top part:

The text appears to use the background album art box as horizontal margin, but not vertical. That seems inconsistent, and gives the text above and below the box the appearance of "sticking out" - at least to me.

I would say it's a small thing. @hacketiwack if you are ok with the current solution you are welcome to merge it.

[X-Ryl669]

The text appears to use the background album art box as horizontal margin, but not vertical. That seems inconsistent, and gives the text above and below the box the appearance of "sticking out" - at least to me.

I'm sorry I don't understand your last remark. In the last iteration, the lyrics panes starts just below the top navbar (the "navbar shadow is inside the lyrics pane). So the text can scroll and will be clipped/hidden by the top navbar. It is centered on the screen, just as the album art. If you had very long sentences, they would spread much larger than the album art. Similarly, the bottom of the pane is just above the time slider, see the first screenshot of my last comment. I've just removed the bottom "shadow gradient" in the last iteration/screenshot.

The album art is just "noise" here (it's blurred for consistency, but the background could be opaque), I'm not using the album art as clipping rules anymore.

With longer lyrics, it will look like this:

(I've increased the font size to show the effect).

[hacketiwack]

@ejurgensen, I will merge the PR once the last comment is clarified.

[ejurgensen]

The album art is just "noise" here (it's blurred for consistency, but the background could be opaque), I'm not using the album art as clipping rules anymore.

Yes, I understand that is the implementation, but my comment was just about how it looks. I think that to an average user it will appear as if the text is fitted inside the artwork box horizontally, but not vertically, which might seem peculiar? I didn't notice that long sentences would be also be outside, probably because most of the lyric sentences weren't very long.

[hacketiwack]

I just retested right now with the latest version and it seems there is a little glitch in Safari.
See below.

[X-Ryl669]

Ok, I'll fix it.

[hacketiwack]

Instead of having the shadow coming from the top navigation bar, can we imagine to have the text to fade out on the top and fade in at the bottom?

Something like this. The example shows only the fade in from the bottom though. But the idea would be to have it for the top as well.

What do you think?

[X-Ryl669]

I'll have a look to try to reproduce. I think I need to rework the layout as I've written initially, instead of having a div in the flex's container, I'll move it out of the container in a position: fixed so I don't have to fix the top margin with negative value to work against the container's margin. I'll also probably have to add a second layer inside the pane to support for the "fading" effect.

[X-Ryl669]

It doesn't look very well from both side:

A mix of both (darker on top, lighter on the bottom) looks like a lot better IMHO:

[hacketiwack]

That was fast ☺️ Thanks. It looks good to me.
However, I think there is a last small "bug". When a song has been played, the text stays in the empty queue.

[X-Ryl669]

Ok, I can't make it work on Webkit, with this rule (the album art + slider and so on are flex element where the height is deduced from the album art picture's aspect ratio). So I can't compute their size from outside the container, and then, it's not possible to figure out where to set the bottom limit.

Instead, I'm back to the initial implementation where the lyrics pane is inside the container and I'm just supersizing it a bit on top but not on bottom. So there's a white overlay on top too like this:

This should work everywhere. Please confirm that it does on Safari (I don't have it here).

When a song has been played, the text stays in the empty queue.

What do you mean?

[hacketiwack]

Good for me regarding the layout. That's great.

Regarding the text remaining when the queue is finished, it happens on Safari.
See this video:
Text not disappearing on Safari

[hacketiwack]

OK. I tested again with the latest version and everything works fine.
I will merge the PR.

[X-Ryl669]

Argg... I've made some changes at the same moment you've merged it. Ok, I'm ready for a new PR then.
I've found a cosmetic bug (when you scroll to the top, the first lyric is shaded it's almost unreadable) and a behavior bug (when you click pause, the current lyric animation doesn't stop or end immediately).

Désolé, mauvaise manie de pousser en force...

[hacketiwack]

No worries. I was a bit too fast. 😁
Let's do another PR that I can test and merge.

[ejurgensen]

Wow, fantastic work on this, and the fading top and bottom is a great solution.

I just tried it now with the Linkin Park track, and sorry to be difficult, but I think there is still a small issue when the track starts (both in Firefox and Safari):

1. The first line is in the top, faded area. Wouldn't it be better if it started in the middle?
2. When playback starts, the first line starts out green, then it goes back to just first word green, then slowly the rest become green, but then it restarts (I assume when the actual singing is starting - not sure, I'm actually testing without sound). Seems like a bug?

[hacketiwack]

@ejurgensen yes, you're right it would be great if the first line could start from the middle and the last line stop in the middle.

[X-Ryl669]

For point #2, it's solved in #1683.
For point #1, I've limited the fading in #1683. But it's still on top: it's a bit hard to do to have it in the middle, because I'm using the scroll position (javascript's scrollTo) and this doesn't want to move the first or last item to the center.

I need to think a bit more about a workaround, maybe adding a fake huge "blank" line for the first and last line that's half the container size. Ideally, I don't want to add many useless/cosmetic DOM element and it makes the logic more complex for scrolling.

If I can come up with a solution, I'll open a new PR.

[ejurgensen]

Point 2 is also present after #1683. To reproduce, start Linkin Park, enable the lyrics pane, and click rewind so the track starts over.