feat(synced-lyrics): multiple lyric sources

[ArjixWasTaken]

Sneak Peek:

synced-lyrics.mp4

🚧 TODO 🚧:

• restructure the code to support multiple providers
• • per provider lyrics
• • per provider error messages
• • per provider loading indicator
• • per provider retry button
• providers
• • LRCLib
• • Megalobiz
• • Genius (??)
• • Musixmatch (??)
• • YT Music (??)
• Customizable provider priority
• Semi-permanent lyric caching (localStorage??)
• Allow setting an offset to correct the timings of the lyrics (??)
• Allow enabling/disabling providers (looking at you megalobiz)

may add more to this list at a later date

[ArjixWasTaken]

as seen here, I have saved all the icon names as string unions, so it is easy to discover/use an icon

[Rairof]

#2383 (comment)
I'd personally like those lyric sources either be kept hidden in the plugin settings or somewhere outside of the lyrics place to not break the immersion rather then just being over the lyrics like that. Just my opinion.

[ArjixWasTaken]

The lyrics picker is not sticky, when you scroll down it will not be in view...

What is ur argument?

PS: I plan to add keyboard shortcuts for switching between lyric sources, that way you don't have to scroll back to the top in order to change sources.

[Rairof]

#2383 (comment)
I had no intentions of establishing any arguments. I just thought having a simple clean lyrics animation space like on Spotify is the way to go.
Example-

[ArjixWasTaken]

@Rairof

What do you think of this?
I decided to make it sticky, and hide it when scrolling down.

sticky-lyrics-picker.mp4

[Rairof]

#2383 (comment)
Great!
It's nice that now it's sticky. Would it be too much trouble to make them pill shaped toggles similar to the "Song/video" toggles on left side that automatically fades away (hidden) after few secs and can be visible again upon hovering over the area?

[ArjixWasTaken]

#2383 (comment)
Great!
It's nice that now it's sticky. Would it be too much trouble to make them pill shaped toggles similar to the "Song/video" toggles on left side that automatically fades away (hidden) after few secs and can be visible again upon hovering over the area?

I am not sure I understand your suggestion, can you visualize it in any way?

[Rairof]

#2383 (comment)
Sure.
I also got 2 more suggestions if you don't mind me stating them.

[ArjixWasTaken]

Ooh, now I understand!
I am not really a fan of using pills like that.

Pills either mean a toggle between two states, like a switch, or a filter, like multiple-select.

Having pills used in the same fashion as tabs feels weird to me.

What are your other two suggestions?

[Rairof]

#2383 (comment)
Alright I understand but can you look at making them hoverable (i.e it auto hides and the blank space is covered up until you hover over the area it's supposed to be in with your mouse then it pops up) instead of sticky as I think that would be better visually?
Suggestions-

1. It would be better to just have YT music source as default for lyrics, just makes more sense.
2. Auto switching sources each time lyrics aren't available or couldn't be fetched for any song without user having to manually retry or switch sources.

[ArjixWasTaken]

Ur 2nd suggestion is already part of the code

[ArjixWasTaken]

Having YouTube music as a lyric provider is possible, but to get synced lyrics I have to interface with the mobile API

Some paranoid people would fear getting banned by YouTube for that.
So I don't think it will be a default, heck, it may be an opt-in provider

---

PS: It was already a TODO in the description of this PR.

[Rairof]

#2383 (comment)
I see. Well that makes sense. That's all, thank you!

[ArjixWasTaken]

I like where this is going (code-wise), thanks for the store suggestion @JellyBrick !

Sadly I am dealing with a new bug, I suspect the automatic subscription to store changes is not working correctly.
Alas, I will try to resolve it, since the store does feel more intuitive and is less messy.

Edit: Looks like I was updating the store the wrong way.

---

PS:
I added a new script in package.json to only have hot-reloading for the renderer process.
It can be invoked by pnpm dev:renderer, making css changes is much more enjoyable now, thanks for that as well!

[ArjixWasTaken]

Progress!!

progress.mp4

---

Around 00:15 it may look like I clicked on the "next" button and it did nothing, in reality I was just hovering over the button to show the hover effect xD

[ArjixWasTaken]

New provider Megalobiz!

[Rairof]

Suggestion- Can you set this section (in the pic below) to auto hide as in fade away or scroll up etc after a certain time (can be configured in settings)?

[ArjixWasTaken]

@Rairof as displayed in my previous videos, it hides away when you scroll down (auto-scroll also affects it)
can you explain why that ain't enough?

[Rairof]

#2383 (comment)
Its not like it's not enough, I just think having a mouse hovering only approach to it instead of it being sticky is a better approach to a more uninterrupted visual experience.

[ArjixWasTaken]

Honestly I suck at CSS, I barely managed to get this far.
If anyone wants to give it a go I'd be thankful, I also wanted to have an appear-on-hover effect.

[janisslsm]

Honestly I suck at CSS, I barely managed to get this far. If anyone wants to give it a go I'd be thankful, I also wanted to have an appear-on-hover effect.

.lyrics-renderer-sticky {
  position: sticky;
  top: var(--top, 0);
  z-index: 100;
  background-color: var(--ytmusic-background);

  transition: top 0.5s ease-in-out;
  opacity: 0;
  transition: opacity 1s;

  &:hover {
    opacity: 1;
  }
}

this achieves a fade-in/fade-out effect on hover/unhover

2024-10-24.20-41-06.mp4

[ArjixWasTaken]

Latest preview:

synced-lyrics.mp4

[ArjixWasTaken]

I don't think I am going to implement musixmatch in this PR, so the current TODO list would be:

• Customizable provider priority
• Semi-permanent lyric caching (localStorage??)
• Allow setting an offset to correct the timings of the lyrics (??)
• Allow enabling/disabling providers (looking at you megalobiz)

Items with (??) are optional.

---

PS:
The current state of this PR is satisfiable enough to be merged as-is, the above TODOs can be in a later PR.
Just saying this to justify why this is not a draft anymore, and in case you want to make a new release with the updated plugin.

[ArjixWasTaken]

I promise I didn't forget this PR, I just had no time lately.

[ArjixWasTaken]

@JellyBrick

Before you make a new release, please give me until the end of this week to tidy up this PR.

[ArjixWasTaken]

I am working on this today, I was busy working on a uni assignment 😔

[Rairof]

@ArjixWasTaken
Woops, might have missed the Ambient mode full screen theming compatibility?

[Rairof]

#2383 (comment)
Works as of 3.7.1 thanks!