I recently found this great extension and decided to make some tweaks to it better suit my personal use, i.e. showing what’s playing on a small iPhone SE next to my hifi setup, and occasionally skip tracks or pause & play when I don’t want to reach out to the actual Roon app on my iPad.
Really love the work Mike had done originally, but I thought the visual details could use a few tweaks here & there at least to my designer eyes – and the scrolling of longer texts I found to be a major visual distraction which I wanted to get rid of. While I was doing these tweaks I also noticed newer versions of Safari had some issues in sizing the icons correctly (several comments about them in this thread as well).
So, I forked the code to a repo of my own on Github and just today published a dot-update of v1.2.13.1 there. It contains the following changes:
Additional setting:
- you can now toggle scrolling of longer titles and names on and off in the settings, defaults to scrolling still as earlier versions
Visual tweaks:
- changed the typeface to Lato so it’s same as what Roon uses in their apps
- changed the SVG icons to use rounded variants of the Material Icons to go visually better with the smoother shape of the Lato typeface
- highlight color changed to Roon purple (or actually slightly brighter for better visibility)
- tweaks to the visual hierarchy between the elements in #containerMusicInfo
- tweaks to the album image style
Bug fixes:
- SVG icons size now much better even on newer Safari versions which had bad issues with earlier code
End result: something that I myself enjoy using a bit better than the original. Note that most of the visual optimizations have been done with my own use case in mind, i.e. the very small iPhone SE screen size.
NOTE: All the updates above are done just to make this more usable to myself. I’ve shared these in case someone else finds these usable, but I make no guarantees on them working on every possible setup out there. Also I have no interest in starting doing any other fixes or updates to the code.
If you feel that this is something that suits your fancy as well, you can install the code from this URL:
https://github.com/miemo/roon-web-controller (same exact installation procedures as with the original otherwise)
Some screenshots on various sized screens and pointer to the new setting (you might need scroll down the settings popup on a smaller screen!)
