Fabrizz / MMM-LiveLyrics

A lyrics module for MM2. It uses Genius data and MMM-OnSpotify to overlay the song lyrics
GNU General Public License v3.0
7 stars 3 forks source link

Adapting scrolling to other input/div #9

Closed Cam9731 closed 10 months ago

Cam9731 commented 10 months ago

Hello,

I've recently been working on adapting your module to be compatible with Plex, which is the main way that I listen to music. I've got most of the functionality working, but I can't find a way to switch between divs for monitoring where in the lyrics I am.

Currently, scrolling is done by monitoring the div stored in the PLAYERPROGRESS variable. I tried conditionally modifying this variable such that when music is playing from plex, it uses my data to determine the percentage, but when music is playing through Spotify, it behaves as it currently does but didn't seem to have any luck. I want the module to work for both Spotify and Plex, and this is the last puzzle piece haha.

I played around a bit with modifying the scroller_bySections() function but didn't have a ton of luck as a lot of it is set in constants that didn't take kindly to modifying.

I already have all the percentage calculations done for Plex, I just need a way to have the module scroll like it does for Spotify.

Thanks for any suggestions you might have (And the great module)!

Fabrizz commented 10 months ago

Do you have this in a repository? So I can take a look at it, I guess that your plex module is sending a NOW PLAYING notification and the module just thinks that its MMM-OnSpotify

What I would do is add to the notification object an entry like

{
    [...]
    player: "MMM-yourPlexModule"
    targetTimeDiv: "divId"
}

And just change MMM-LiveLyrics saved reference to the div.

Im going to comment again, but I think that this module references a data="" param in html, not the content by itself

Fabrizz commented 10 months ago
const max = parseInt(extProgress.getAttribute("max")) ?? 1;
const now = parseInt(extProgress.getAttribute("now")) ?? 1;

This are the two lines that get the timestamps for current/max time. (extProgress is the element), .getAttribute("now") means that it gets the data from an HTML attribute like this:

<div class="..." id="ref" max="TIMESTAMP" now="TIMESTAMP" >1:17/4:23</div>

So your plex module should add a div with max and now attributes if you dont want to rebuild this part again

Cam9731 commented 10 months ago

I figured it out. My initial method of going about this was really stupid (In my defense it was 4am haha) but I ended up conditionally setting the value of an element to have the timestamps of either plex or spotify depending on what I'm listening to at the time.

I'll reply to this thread with my forked repo once I clean this up and push it through in case anyone in the future attempts something similar.

Cam9731 commented 10 months ago

For reference and if anyone attempts something similar:

https://github.com/Cam9731/MMM-PlexNowPlaying https://github.com/Cam9731/MMM-OnSpotify https://github.com/Cam9731/MMM-LiveLyrics

Also @Fabrizz thanks for the quick response, I appreciate it!