Porting UI to React

Hello fellow developers and contributors,
I am a React developer and getting a new PC streamer soon with intention to use Volumio OS on it. However I feel that the UI is quite outdated look wise and also has almost no theming support. I cloned the repo and see it’s using PHP / AngularJS 1.x, which honestly is quite outdated.

I have no intention to learn PHP and feel that just porting the AngularJS to React (just plain JS, no TS) and commonly used libraries in React like TanStack query, hook forms etc. will be a big win. At the same time we can add theming support.

I have made some progress in creating a handful of Skeumorphic UI prototype screens (non functional) in pure HTML / CSS3, no JS yet. If there is some interest in the community in porting the UI. I can share my repo or make it public so we can all start contributing.

5 Likes

This is an awesome idea, yes, please share a repo that you’re working on. I would be happy to help with it!

After looking at the entire code base, and using the Volumio for a few days, I think it makes sense to put all my required features in a Plug-in. I am very close to wrapping up an initial version. Will send you my repo for the plugin.

React + custom CSS based design system with lot of customizations. My main concern is to make it properly responsive, and pixel perfect design, as I am not very good with CSS.

Cool I’m happy to help test it, I mainly use Volumio on a Pi 3 with the 800x480 touchscreen.

So I can help with testing and maybe CSS.

Yes you can create a plugin providing it’s UI
See Third Party User Interface | Volumio Developers Documentation
And all the doc for plugin dev of course!

Yep, already on it :slight_smile:
Coming soon…

I don’t like skeuomorphism at all.

Currently there are 3 themes including skeuomorhic. Planning to add more if possible including flat. The skeuomorhic is quite subtle.

Do you have suggestions?