Show lyrics on cover like Firefox

[ccloli]

Is it possible to give an option to show lyrics on the main window's album cover on Chrome (just like Firefox)? As I noticed that Spotify removes the PIP button today, so I cannot see the lyrics for now.

Not sure if it's a bug on Spotify side or just as intended, but having the option would be great so that I don't need to popup a window to see the lyrics.

[ccloli]

Well, I noticed it's intended that the PIP button was gone, since I see your latest changes are to add the PIP feature back. I'll build it from my side to see if it works.

[ccloli]

I've tried the latest code, the PIP feature and lyrics are back, thanks for your work and looking for the new release. 👍

Whether to add the option to show lyrics on the main window or not is up to you, maybe I'm just feeling a bit anxious that the PIP and lyrics are gone. 😂

BTW for the latest code, the cover in PIP is also blurred if no lyric is matched, maybe it's better to show the original image for this case.

[ccloli]

the cover in PIP is also blurred if no lyric is matched

I find that it's due to the cover image is resized to 64x64, so you use a blur filter to make it nicer, or it'll be looks like a mosaic image. Here is a tip, if you want to get the original image, you can modify the resized cover image URL by replacing 00004851 with 0000b273, it should give you the 640x640 image.

cover.addEventListener('load', () => {
  ctx.drawImage(cover, -blur * 2, -blur * 2, WIDTH + 4 * blur, HEIGHT + 4 * blur);

  const largeUrl = cover.src.replace('00004851', '0000b273');
  const img = new Image();
  img.addEventListener('load', () => {
    ctx.filter = `blur(0px)`;
    ctx.drawImage(img, 0, 0, WIDTH, HEIGHT);
  });
  img.src = largeUrl;
});

[mantou132]

Displaying lyrics in the PIP window is the main function of this plugin. If the Firefox PiP API is available, the behavior in Firefox will also match Chrome, so this change will not be considered for the time being.

Thank you for providing the method to get the large cover image.

[ccloli]

A more stable way to get larger cover image is getting it from the request https://api.spotify.com/v1/tracks, the API gives 64px, 300px, and 640px images, but it may be difficult to get them since the data should be saved in its scope.

[derkanadier]

@mantou132 thanks for the prompt update! are you planning to push it to the Chrome Web Store as well?

[mantou132]

@ccloli Yes, the extension can only see data at the UI level.

In addition, the logic should be kept simple and independent. replacing URL seems to be a feasible compromise, and when the loading fails, the blur cover will also be displayed.

@derkanadier I have submitted v0.0.21, pending review.

[mantou132]

https://github.com/mantou132/Spotify-Lyrics/commit/91552d11901a59767be28f359366854bd48afdbd

Options page added, allow lyrics to be displayed like Firefox