2023-02-07, 05:11
Ok, lately I have been working on a little personal project - a '2nd screen' for Kodi where I use a tablet which shows a clock and weather, normally, but then switches to a nice 'Now Playing' type view when Kodi is playing some media. It then shows the artwork, the time remaining, and a mini clock and weather info thing.
I've used fairly standard modern approach (Vite for building, AlpineJS for reactivity, Tailwind for styling). I deploy to Github Pages (which serves over https only as per really any modern server thing).
Then, from any browser I can call my app by going to its url, and I pass the local Kodi IP & and a weather location code as parameters - and then my Now Playing display ' just works'.
I decided on a web browser approach (vs. say some sort of electronics approach, Arduino + a screen or whatever) - because I have a bunch of old tablets, phones, etc, as I imagine most people do by now. One could also use a Raspberry Pi...basically, anything that can run a browser. Being a web app, in theory it's 'write once, deploy on any browser supporting platform'.
I'm fairly familiar with using the JSON-RPC from Python - which is easy and works well. I suppose one could investigate the new Python in the browser developments, but nothing there looks ready for prime time yet.
So - to Javascript. Unfortunately, things are a bit more problematic, with modern Javascript and Kodi.
I think that's a fair description of the state of play currently. Am I missing anything, or misunderstanding anything?
Given Kodi basically doesn't currently meaningfully support any security other than basic authentication w. JSON-RPC (e.g. there's nothing for websockets) - is there any reason Kodi couldn't just set a CORS allow anywhere header (if the settings for 'allow control...' are appropriate). That would solve the issues with fetch, at least. And one could push the rest of the debate about CORS and auth down the road, again, I guess.
Alternatively, could Kodi not come with a certificate (or have some mechanism for installing one) - to then enable WSS? Although that seems more complicated...
Apologies if this reads like a rant. I've got my think working well, and I can do the browser workarounds (for now, at least) - but it all feels a bit messy.
I've used fairly standard modern approach (Vite for building, AlpineJS for reactivity, Tailwind for styling). I deploy to Github Pages (which serves over https only as per really any modern server thing).
Then, from any browser I can call my app by going to its url, and I pass the local Kodi IP & and a weather location code as parameters - and then my Now Playing display ' just works'.
I decided on a web browser approach (vs. say some sort of electronics approach, Arduino + a screen or whatever) - because I have a bunch of old tablets, phones, etc, as I imagine most people do by now. One could also use a Raspberry Pi...basically, anything that can run a browser. Being a web app, in theory it's 'write once, deploy on any browser supporting platform'.
I'm fairly familiar with using the JSON-RPC from Python - which is easy and works well. I suppose one could investigate the new Python in the browser developments, but nothing there looks ready for prime time yet.
So - to Javascript. Unfortunately, things are a bit more problematic, with modern Javascript and Kodi.
- Kodi does not set CORS headers (and work on this seems to have halted - https://github.com/xbmc/xbmc/pull/12252) - so the default modern approach (fetch) - can not be used at all. Without faffing about with running a proxy between Kodi and this client (which would basically add the CORS headers, e.g. - https://github.com/Rob--W/cors-anywhere), I don't think there is a workaround if you want to use the default modern approach to fetching remote resources in JS.
- Websockets is an alternative and there are no CORS issues. You also get notifications, which is cool - means you can avoid polling. Seems great...but Kodi does not support wss - secure web sockets - only ws. This forces one to bypass browser security features that block non secure content being sent over a secure connections (workarounds for common browsers here: https://www.damirscorner.com/blog/posts/...tions.html - but e.g. iOS won't let you do this at all, so all Apple devices are out). It then works, but it's far from ideal.
- Using older libraries with modern build approaches and reactive frameworks is...painful/impossible. Apparently there are some older libraries (atomic, good ol'jquery/ajax) - that just seem to ignore CORS (which really makes a mockery of any security CORS might in theory provide...). This is not a Kodi thing, just a general thing about JS - which, from a packaging/lib/versions perspective is a god-awful mess, generally. (Looking at Kodi web interfaces, it seems old libraries are the way those tend to go...I see lots of jquery...)
I think that's a fair description of the state of play currently. Am I missing anything, or misunderstanding anything?
Given Kodi basically doesn't currently meaningfully support any security other than basic authentication w. JSON-RPC (e.g. there's nothing for websockets) - is there any reason Kodi couldn't just set a CORS allow anywhere header (if the settings for 'allow control...' are appropriate). That would solve the issues with fetch, at least. And one could push the rest of the debate about CORS and auth down the road, again, I guess.
Alternatively, could Kodi not come with a certificate (or have some mechanism for installing one) - to then enable WSS? Although that seems more complicated...
Apologies if this reads like a rant. I've got my think working well, and I can do the browser workarounds (for now, at least) - but it all feels a bit messy.