surfbryce / beautiful-lyrics Goto Github PK

Which theme did you use

Basically right now a lot of performance is subtracted because we have to apply a 40px blur to three (used to be two) images of the cover-art at runtime.

Luckily there is an optimization in chrome (like anything that uses textures) that reuses the image-buffer for the first cover-art that we render - however - we still need to apply blur to all three; there is no optimization built-in that Chromium has for that (since it's impossible to determine when to apply such an optimization).

Originally the idea was to do this on the Backend since we already built it up. The issue is that Cloudflare runs in a V8 runtime instead of a Node Runtime and therefore does not have access to anything that we could use for this.

So the idea has now shifted to doing this all on the Client. What we'll do is;

• Create an OffscreenCanvas based off the loaded Cover-Arts size; which is scaled to create room for the blurs added pixels
• Then clip the Canvas using a circle that is the same width/height as our Image (to replicate the border-radius effect in CSS)
• Then load our image onto the center of the Canvas (which will now be clipped by the circle)
• And finally, apply our blur filter to it

Once all those steps are done we can then extract the data from the canvas and cache it as a png.

This will gain a TON of performance since we no longer need to do these effects on the runtime. We also save on having to deal with a backend and the additional requests/storage needs.

After the latest Spotify update, I can only see the animation on top of the sidecard, but below it is the same as the original Spotify

Occasionally, better lyrics will split a word in two (e
nough)

You can reproduce by making the width of the window just small enough. Song in the screenshot is Where You Are by John Summit

I'm creating this issue as I haven't yet gone over the source code, but I can tell you I'm running a Surface Pro 7+ and computing power shouldn't be the problem. On every other new "line" it fails to scroll correctly to the correct line height. However, it does correct itself within a second.

A service which is responsible for determining the current song, getting song changes, lyrics, and other information.

We first grab the ISRC for the currently playing track using Spotifys API and then send it to the existing backend (finished in #15) to grab the best possible lyrics we can.

We then cache this until the next month.

So basically in steps:

• Check if we have the ISRC cached (permanent cache) for this track
• If we don't then use the Spotify API to grab it
• Once we have the ISRC check if we have any lyrical contents cached (cached until the start of the next month)
• If we don't then send a request to our backend and then cache the lyrics we do have

Apple Music does a really good with its lyrics catalog but sometimes Spotify has synced lyrics where Apple Music does not, so we will use Spotify synced lyrics only IF Spotify has any and Apple Music does not

This is just something that we use a lot over in the Roblox world which is just the simple idea of memory-management when needed.

This is super helpful for cleaning up everything when we don't need it anymore. Having a centralized class for this will make hot-reloading tons easier and make everything super easy to manage.

Depends on the Signal class to be finished first

I don't know why my Spotify interface looks like this. I have tried uninstalling Spotify and updating Spicetify to version 2.18.1. Could this extension be conflicting with the theme I'm using? Currently, I'm using the Bloom theme, and I believe it should match the extension's preview. Is there anyone who can help me resolve this issue? I'm using a Mac device with the latest macOS. I apologize if this issue stems from the theme or something else. I'm quite confused about where to ask for assistance.

1. Header (Back, Next, Profile, and Friends Button)

2. Font Lyrics

3. Card Color (doesn’t transparent)

Also, if you add animated background into Lyrics Plus, I suggested keeping our own config (font, alignment, ...) in Lyrics Plus.

I really like the animated lyrics update but, Somehow the romaji / romaja translation for korean and japan lyrics extension stopped working after updating to the newest version

Would it be possible to replace the albums art in the lyrics sidebar with animated canvas like this:
https://github.com/itsmeow/Spicetify-Canvas

I feel like it fits the style of this plugin with the moving background, same as the mobile app does

When a lyrics line becomes active, the font size will be enlarged. This has the side effect of some lyrics lines that are shown in one line when inactive becoming two lines when being active. I think this makes it less readable.

What I also noticed is that because of the change in height, it sometimes has to correct the scrolling position after the fact, which makes it look not really smooth, kinda clunky in my opinion. This can be seen in the clip above and also here with no line count change:

As I solution for the first problem, I'd suggest an option to disable enlarging the current line font size
For when it's still enabled, it would be nice if the scroller could take the change in font size into account and therefore instantly scroll to the correct position without adjusting after the fact

Hi, I found a bug (or feature) when you sit on the page of the artist and open the lyrics on the full screen, you see that the artist's banner went to the subtitles, I don't know if I explained well but in the screenshot all can be seen:

Can be fixed by moving lyrics-background-container inside under-main-view:

Hi i hope you are doing well i have a problem with beautiful lyrics extension it is not working with me no matter what i do i have spotify spicetify and marketplace up to date and i have reinstalled everything just in case but still not working hope you can help me and thank you

This was an issue found in #2 which caused the user to believe the extension was not working as expected.

However - the issue really was that we did not support this form of lyrics just yet - as I was not aware of them.

The solution as explained in #4 is to move the background to the "under-main-view" container - which I was not aware of. This container is always the size of the said lyrics container ("Classic" or Cinema). This allows us to easily support both container-types without having additional checks for each. Additional CSS stylings also have to be made to allow for the background to be viewed

Hi, installed your extension and after installing it did not notice anything new except blurring in full screen mode. What should i do?
Spotify and Spicetify are the latest version. Installed the extension through Marketplace.

So i installed the extension form market place restarted spotify and i can't see the lyrics on the side. i went throught and enabled all the experimental stuff still .

First of all I have to say I love the idea of the new update, but there's one slight problem...

WTF...

And the transition between every line in the lyrics is SO laggy like the whole Idea of it is to look Beautiful and so far every aspect of it does, but the laggy translations kills it all. like if the usage was this high and it worked smoothly I wouldn't have a problem, I'll just close the lyrics screen when playing a game.

https://github.com/surfbryce/beautiful-lyrics/assets/119785649/5a22972a-1e1f-4b58-8f51-3f7a0a14a937
You can see the line transition lag here AND AND see how LONG it took between songs, It stayed in Starboy for like 4 sec before going to Plain jane, this things kill the whole experience
Sorry for the quality of the video

the gradient shows underneath the solid color at the bottom but its not on top

Title says it all, Hungarian is not an RTL language, however it gets converted, just like on the screenshot.

Just wondering what theme causes the card layout (and slight colour bleeding next to the right of the media player inh the bottom left) or if it's an experimental feature like the right side card

it is displayed from right to left when it is supposed to be from right to left?

I don't have the artist description, transparent lyrics, and hidden lyrics button
how do I get them ?

A version that acts like a spotify theme replacing the background with this cool wave effect I love it so much I WANT MORE

hey i have tried to install the extenstion through marketplace but didnot work although spicetify and spotify up to date and i have tired to download it manually and didnot work either so i dont know where is the problem

This is just a query but I'm wondering if I'm supposed to be able to get the really great dynamic background when working with other extensions, like daksh2k's "Full Screen"? Right now I'm only seeing it in sidebar. (Great extension btw)

If possible, would love if you could customize it to your own liking, like changing the font, or the animation, or the background to maybe the cover art instead of the default background.

I was wondering if it would be possible to replace the lyrics in full-screen mode with beautiful lyrics instead, or if there's a way how to make the cinema mode full-screen.
Thank you!

no sidecard how do i get the sidecard in the gifs?

This actually isn't a Roblox concept and is a general concept that exists in computer programming.

It basically serves as an array where you can push elements as much as you'd like - and you can remove an element at an index without affecting the rest of the elements positions ahead.

We store whatever gaps there are and fill those up - if there are no gaps - we simply just create new slots.

This is super helpful for having the same key-value control that we get with Dictionaries while maintaining the iterative efficiency of arrays.

Is there any possibility to make lyrics in darker colors like black or dark grey for cover arts that are very bright? Some cover arts of albums in my playlist are even pure white, and that makes lyrics invisible until you hover on them (example below).

This is related to #14 as it's required to determine the current timestamp that the currently playing song is at.

It'll be extremely simple. It'll have a Signal for when a new song is played, when a songs playing state changes, and when the song steps in time.

There will be methods that accompany these Signals to allow for static retrieval rather than dynamic.

For determining where the song is we could use the onprogresschange event that is exposed to us. The primary issue however is that it only updates every 0.1s. This is not fast enough for us to use. So we will only use this for determining when the user skips around the song. We will use requestAnimationFrame to step the time ourselves as long as its playing. This will always be accurate since we will stop immediately as we get state updates. Once we skip we'll just reset to that point. We will only start incrementing though once we get our first progress-change.

Nothing really works, the album art is solid and lyrics aren't showing. All options in the FAQ are ticked on.

After the most recent update (v2.4.3) my lyrics suddenly disappeared on both the lyrics+ window and the built-in lyrics window, in Fullscreen it does work tho.

Also every time I startup my Spotify I keep getting the update notification every single time I startup my Spotify (I assume it should only be once)

Is it just me having this issue or is this noticeable for other users too? Already tried reinstalling, reapplying spicetify and even reinstalling lyrics-plus

for some reason, my right sidebar returned to default. it was working when I first installed the extension

full screen is working normally

Add an option to:

• Change the speed of the animation
• Toggle Lyrics Changes(Scrolling and Increasing Font-Size)

After I restart the spot the background was already disappear and just all black background please back the background video the blur background that moving behind those lyricss pleaseee

This is another idea brought over from the Roblox world. It's really simple and provides and effective and useful way of connecting to events.

This depends on the Free-Array class being complete

1. I don't have these two entries in my Experimental features

2. (maybe not related to this project) I enabled the Library X view of the left sidebar, but the effect is not the same as the one on the github page

how can i get the left side cards

simply what the title says, i think you should add a fullscreen option just expanding what is already there. sent an image for reference for what to put in fullscreen.

Not sure if this is a bug or not, but already sung lyrics have this tendency to wiggle around. Doesn't seem to affect all lyrics

The 'r' jumps around here as the word is being sung