I was trying to stay away from browser specific extensions because I figured most folks were able to run current browsers. If need be, I can add them in.
Since the opacity and blur are missing, it is very likely that you are missing out on the drop shadows on the overlays, the overlay buttons, and the cover image…
Wow, awesome work @Mike_Plugge! 
I’m in the process of migrating to Roon after many years of using iTunes+BitPerfect. The one thing I really missed from iTunes is its mini player. I had been scrounging around the internet trying to find some solution to this and was seriously considering trying to roll my own when I found your extension. and now with the combo of it and Fluid, I have a nice little Roon mini player that sits in my Mac’s menu bar out of the way when I don’t need it and right there when I do. The only thing missing that would make it perfect for me is queue viewing/management. I hope they add that to the API soon. 
Thanks Jason!
I too would love to see play queue management - fingers crossed that it shows up in the API.
The biggest problem with the API for me is that the ID for an “item” changes with every API call. Especially with playlist management and everything that has to do with “browsing”, that’s a really big problem! That’s why at every step you have to repeat all previous steps in the code and work your way down step by step. Very inconvenient and slows down in the operation. One user is still working, but as soon as 2 or more people use the API, there are problems with it!
The problem has been called here in the forum often and unfortunately nothing has happened so far 
If every “item” had its fixed ID, then you could use the API much easier and faster!
I hope that will change someday 
Kind regards,
Chris
@Mike_Plugge Unfortunately, I ran into a sort of serious but easily fixable problem after I installed your extension. It broke my “npm -g upgrade” when I try to update my other installed node packages. I submitted a tiny pull request on your GitHub repo to fix it.
Does the API generate events when the track changes? I’ve been trying to figure out how to use node-notifier to show notifications on track changes like a lot of music apps do, but I know next to nothing about node and the Roon API and if this would even be possible now.
I think I goofed up the merge request. But I have just pushed the change you recommended to master.
Thanks for the tip on that!
Specifically on track changes? No.
The way I do it (see line 134-144 for line1 - which is typically the track name) is I have a global object named “state”. As the data comes in from the Roon API, the “state” object gets updated with a named pair. Line1 in the “state” object gets compared to what the Roon API is sending. If it is the same, nothing happens. If it is different, the text on the page is updated and the “state” object updates.
You could easily have that if statement do more things for you.
I use the 3 line version of the Roon now playing:
https://roonlabs.github.io/node-roon-api/Zone.html
The problem is that for local music and Tidal music in the collection, the track name is line1. But for internet radio stations, line1 is the station name.
So having triggers for more than just text on a track change may have to look at something else or a combination of things.
I hadn’t thought about doing notifications on track changes because the primary target was a Raspberry Pi with this app running full screen. So the notifications would not be needed. I don’t use them on the desktop because I find them to be distracting. If enough people would like them, I could probably look into adding them though.
@florib and @CrystalGipsy
I have just pushed some updates to the dev branch to address issues that you two have noted.
@CrystalGipsy - I believe the Firefox rendering bugs are addressed by adding widths to the buttons that were showing weird. But I am testing with Firefox 57 - the newest release at this time.
@florib - I have added the browser specific CSS for opacity, blur, and drop shadow to allow them to work with Chromium 52, the version you mentioned comes with DietPi.
Can you two test things out a let me know what you see?
You can get the “dev” branch by running:
git clone -b dev https://github.com/pluggemi/roon-web-controller.git roon-web-controller-dev
This will create a new directory for the dev version. Note that since the main version and the dev version listen on the same port, you will have to stop one to run the other.
If you are not using git, you can download the zip file from here:
https://github.com/pluggemi/roon-web-controller/archive/dev.zip
The standard install instructions should work.
I have a few other minor things I will be working on over the next few days for what is shaping up to be the 1.2.1 release.
Just upgraded my system to a newer version and I’m not able to test it anymore. I also tried to install an older version of Chromium on my main system, but no chance. I’m very sorry.
I’ll try to install an older system on a SD-Card to test your changes, but please be patient. Maybe at the weekend.
No worries. If need be I can test it too. I have a few Pis laying around and I hadn’t checked out DietPi yet anyway…
Roon Web Controller v1.2.1 is now available.
New Features:
Upgrade Notes
The package dependencies have been updated to the latest versions. It is recommended to perform an update.
On the Node.js server:
git pull
npm install
npm update
node .
See the CHANGELOG.md for complete list of changes
HI @Mike_Plugge. Sorry for taking so long to get back to this, but I managed to get HTML5 notifications working on track changes and added a button to turn them on and off in the theme chooser. Unfortunately, Chrome is the only browser that seems to support images in the notification for album art (at least on Mac) and Fluid doesn’t seem to support notifications at all even though it has an option to allow them. 
So my workaround so far is to leave Chrome running the web controller in the background in addition to having Fluid running it for a mini player. It’s kinda convoluted, but it works.
If you’d like to integrate the notifications into your project, I’d be happy to submit a pull request. Otherwise, I can post a link to my fork for anyone interested in having notifications.
I am checking this out now.
On my desktop (Linux, KDE with libnotify), the notifications work correctly with Chromium (opensource upstream for the Chrome browser) and with Firefox. Both have the album art as well.
Interestingly, the Firefox notifications use the native libnotify notifications so they fit with the rest of the desktop. And they auto close after a few seconds. Chromium however uses its own format which has its own theme. It auto closes as well, but it is a longer time out. Not a deal breaker - it is just interesting!
Chromium:
Firefox:
It does not work with a QT5 Webengine widget (based on Chromium code), but this is normal since notification permission is denied by default with qtwebengine.
Go ahead a send a pull request. I will add this functionality in.
Once I pull it in, I will tweak a few things. I will likely change the “Theme” select button to a “Settings” button to open a settings overlay. And will probably tweak the wording of the Notify button a bit.
But thanks! This is good stuff!
Pull request made. Feel free to tweak anything you want or need to. Javascript and web programming in general is not my forte.
I have already fixed this in my dev branch - pending a git push right now - but as an FYI, cookie settings are strings, not booleans. Things like this make web programming a series of work arounds to address limitations! Gotta love it…
So the cookie “showNotifications=false” actually matches as true because the “showNotifications” is defined - even though it says “false”:
else if(settings.showNotifications){
document.getElementById("notificationsButton").value = "Notify ON";
}
It is easy enough to fix with code like this:
let showNotifications = readCookie('settings[\'showNotifications\']');
if (showNotifications === "true"){
settings.showNotifications = true;
} else {
settings.showNotifications = false;
}
Like I said, this is already updated in my dev branch, just passing this on to you as an FYI.
I have done the tweaks to integrate your notifications better with the app. The notifications themselves are the same, but I have changed the theme button to a settings button and have have reworked the settings overlay. I am especially proud of the nifty toggle switch for notifications!
I also worked it so that if notifications were off before, and they have been toggled on, your notification code is immediately triggered.
Can you check out my “dev” branch and let me know what you think?
Thanks!
There is one more thing I want to add before I tag it and release it. But it should be in master soon.
Thanks again @jcharr1