Support for .lrc lyric files

[maarcuss]

Wondering if it's possible we could get support for .lrc files that would view lyrics to songs in the app

[leinelissen]

Hey, great suggestion! Does Jellyfin support importing .lrc files? And if they do, do they already support playing them back?

[maarcuss]

No, I don’t think so, I guess it would have to be supported there first? Another solution could be Fintunes downloading lyrics from something like Musixmatch.

[leinelissen]

Apparently support for this has been merged in https://github.com/jellyfin/jellyfin/pull/8381. It's got an endpoint that can request the lyrics files, so that should help immensely with integrating. Let me see what I can do.

[vijayvcm]

Hi @leinelissen Any update on this one?

[leinelissen]

Hey @vijayvcm, this is not a priority at this moment. If anyone wants to take a look, I can give some pointers.

[akrv7591]

Hi @leinelissen I want to work on it. If there is no ongoing development.

[leinelissen]

Hi @akrv7591, there is none at the moment, so that would be awesome. You can start by getting the project running. My implementation hunches are the following:

• You'll need to get your lyrics into Jellyfin to begin with
• We'll need to pull in the lyrics somewhere. The regular /Items call does have a HasLyrics property, but I'm not sure it sends over the lyrics when they are available. See here: https://github.com/leinelissen/jellyfin-audio-player/blob/a97611c0ad267c798c45fe31282417a597cfc0e7/src/utility/JellyfinApi/track.ts#L75-L81 If they're not, we'll need to pull them in separately using a separate API. In any case, it would be good to merge the data under the AlbumTrack type, and store it under the music.tracks entity in Redux, potentially with a new action, see: https://github.com/leinelissen/jellyfin-audio-player/blob/a97611c0ad267c798c45fe31282417a597cfc0e7/src/store/music/types.ts#L48-L69
• Once the data is in, you'll need to build an interface for displaying the lyrics. I think it would be nice to have a separate view for this in the Player modal, here: https://github.com/leinelissen/jellyfin-audio-player/blob/a97611c0ad267c798c45fe31282417a597cfc0e7/src/screens/modals/Player/index.tsx#L17-L25 Let's add a button next to the Sleep Timer displaying "Lyrics" if they are available. When clicking it, there would be a separate scrollable view containing all the lyrics, with the current lyric highlighted in orange and potentially some of the simple media controls at the bottom.
• For styling, take a look at other components. If you re-use the <Text /> component (src/components/Typography.tsx) and the useDefaultStyles() hook, you'll get dark mode automatically.

Just try things out and let me know if you run into things. Don't bother getting things perfect the first time around, I might loop in with some design feedback. We can iterate until everything fits together.

[akrv7591]

Thank a lot for great detailed pointers. I will let you know when I finish prototype.

[akrv7591]

It seems /Items is not sending lyrics. I have searched Jellyfin api with no success

[leinelissen]

Right! From what I can see on my end, /Items is sending the HasLyrics property. So if it is set to true you can use the GetLyrics operation to retrieve them, and then merge it manually with the track data.

[akrv7591]

First prototype is ready youtube video showing how it works I've used react-native-lyric library to render music lyrics. For now when lyrics screen is mounted it will check if Track has HasLyrics property then fetches lyrics from jellyfin api endpoint(/Audio/:audioId/Lyrics). It is just prototype now. I did not used state management yet. Should we store lyrics to cache? @leinelissen Can you share some ideas

[leinelissen]

Right, congrats on getting so far along already! This is starting to shape up nicely. Couple remarks from my end:

• Yes, the lyrics will need to be in the cache so we can display them with downloaded tracks. There are multiple calls where tracks are received, most notably retrieveAllTracks(), retrieveAlbumTracks() and retrievePlaylistTracks(). I think it would be cleanest to wrap these with a check for HasLyrics, and if they do have lyrics, retrieve them from the API and merge them with the AlbumTrack object under the Lyrics key. Then, the lyrics will automatically appear in the cache.
• react-native-lyric looks like a decent start, but I'm a bit hesitant on adding poorly maintained dependencies. I think it's easiest to implement it ourselves, and that should give us some flexibility in terms of how the lyrics are displayed.
• As for lyric display, I think it would be nice to left-align all the lyrics, and prepend them with the timestamp when they start. Even more, it could be helpful to add some kind of loading bar until a next lyric starts.
• Lastly, I think it might be nice to show the lyrics on top of the album art when they are available, so we can hint the existence of them to the user.

Lastly, feel free to already create a pull request, so I can take a look at the code. I can help out with some of the design details if you get the brunt of the implementation down.

[akrv7591]

• Injecting lyrics to AlbumTrack sounds great and it should be pretty easy
• I have several issues react-native-lyric library myself. I was considering creating my own component.
• As for design I am bad at it I am mainly backend developer so we are definitely going to fix components together lol.
• After implementing custom lyrics renderer component I will make pull request with implementation above mentioned issues.

Should I make pull request as a whole Lyrics implementation or smaller commits?

[leinelissen]

Make a pull request for the whole thing, we can update it gradually.

[akrv7591]

I have made pull request