kenku-fm icon indicating copy to clipboard operation
kenku-fm copied to clipboard

[Question] API enhancement

Open lazybobcat opened this issue 2 years ago • 1 comments

Hello,

First, I would like to thank the team because Kenku is already useful is I can't wait for more features to come.

I took note that you don't wish new features to be submitted but I would like to enhance the HTTP API for my own purposes. In order to control Kenku from my tablet, I would like to be able to have the list of playlists and the list of soundboards through the API. I would also need to display all the tracks in these. That way i could display the playlist, select one, display the songs, play one and the same goes for soundboards. And no I don't want to bother copying the tracks UUIDs on my tablet, I have so much it would be very tedious.

I'm not familiar with Electron and React but I am with general web development. I found how to add API routes but I don't understand how I could fetch the playlists and soundboards, can you point me in the right direction?

Thank you very much, Have a nice day

lazybobcat avatar Mar 31 '22 13:03 lazybobcat

Electron is split into three different script types: main, preload and renderer. The main context allows for access to the full node apis, the renderer is a sandboxed web renderer and the preload script allows you to bridge between the other two.

Our remote control api is in the main context because it uses node to start a HTTP server. Our app data (like saved playlists) is stored in the renderer context with a redux store. Since all communication between the main context and renderer must go through the preload script to get access to the playlist data from the http API we need to make two hops:

Main -> Preload -> Renderer

Then to get data back we need to go in reverse

Renderer -> Preload -> Main

We have an example of this at /src/main/remote/routes/playlist/playback.ts specifically with the GET / route. We use view.send("PLAYER_REMOTE_PLAYLIST_PLAYBACK_REQUEST"); to send a request for data to the preload script. We then use our waitForPlaybackReply function to setup a listener to wait for the response from the preload script.

Then in /main/src/player/preload.ts we create a bridge for the PLAYER_REMOTE_SOUNDBOARD_PLAYBACK_REQUEST ipc message so that we can listen to it on the renderer.

In the renderer at /src/player/features/playlists/PlaylistRemote.tsx we use window.player.on("PLAYER_REMOTE_PLAYLIST_PLAYBACK_REQUEST", () => {} to create a listener for this request. We then do some processing to organize the data and send it back to the preload script with window.player.playlistPlaybackReply

Back in /main/src/player/preload.ts we pass this data back to the main context with the playlistPlaybackReply function.

The main context should now have this data and can reply to the HTTP request.

It's a bit of a mess around, but it's a requirement for security purposes.

Saying this though, I think the option for a route in the remote API to get access to all the saved playlists and soundboard is a good idea and is something I could see us implementing in the future.

mitchemmc avatar Apr 01 '22 00:04 mitchemmc