VERY cool that you were able to figure out that spaghetti code enough to tweak it to your liking!
For the song info lines - yes you are correct that line1 = track, line2 = artist, and line3 = album, but only when you are playing music from your local library. When you are streaming from an internet radio source, line1 = stream name, line2 usually is the song, line3 usually is the artist, but sometime it is artist/album. It was for that reason that I did not label the lines and I kept the lines in the 1, 2, 3 order. It is up to you if you want to keep your tweaks, but with the new version, I am keeping the 1, 2, 3 order. Although with the new version it will be much easier for you to tweak it, too!
For the clock - even with the original version, I had toyed with putting a clock in the UI. Now that I am using Vue, it would be even easier. The new now playing screen looks very similar to the one you are using, so I could easily put a locale localized formatted clock in one of the corners, with a setting to show it or not. To keep it clean looking, I would use the format “LT” described in the “Localized Formats” table here [1]. I would want to use the localized format because I know there are Roon Web Controller users in France, Japan, and Korea, and the time/date format varies for different regions.
[1] https://momentjs.com/docs/#/displaying/format/
For the play pause on the progress bar - in the new version, this bar is already replaced with a functional track seek control. The UI element is in place now, but I need to do the back end code to actually support the track seek. That is a 2.0.0 feature, so I would not want to duplicate the play/pause behavior on that element.
For the color differences - neat idea! Though in the new version, I am eliminating the use of color to show if something is active or not. I work with a few folks who are color blind and they were not able to tell if (for example) radio was on or off. So with the new version, I am using different icons for on/off, or in the case of loop, loop off, loop all, loop 1.
For the light/dark detection code - that was there to support the “dominant color” theme. Neat use of the code, but I am not planning on having a “dominant color” theme this time - at least not for 2.0.0. If enough folks want it, I might be able to bring it back.
For the weirdness of the no display when switching from library to now playing - that is annoying isn’t it!!! That is one the main drivers for the architecture change with the new version. Vue uses a product called Vuex to store state centrally. When used properly, all of the data goes into the state, then the display elements just display the state. It is a shift in thinking, but once done, it makes creating UIs MUCH simpler. By doing this, I no longer have that weirdness with switching from library to now playing to queue. It just works!
For the progress time - I forgot about that! A year ago I had toyed with having a setting to have that time be either “Current Position” or “Time Left”, but I never implemented it in the old version. I just added it to my todo list for version 2.0.0.
Good stuff! Thanks for the info and I hope you will have just as much fun tweaking the next version!
