New UI for Volumio

Hello guys -

Because Christmas is fast-approaching, and Volumio2 doesn’t look ready for primetime, I need to get a Volumio gift that isn’t super crappy (sorry to anyone offended), so I made some improvements to the UI and functionality of Volumio1. Some noteworthy updates:

  • UI inspired by Spotify with tweaks to make buttons more clickable and search upfront
  • Javascript cleanup to include caching of elements (UI more responsive)
  • Consolidated ajax calls to funnel/log through one class
  • Removed most of the html from javascript and used vue.js for rendering data
  • Provided a way in the backend to call any spotify command
  • Added covers from Spotify to show in the background
  • Other stuff?

I am not fully finished with this, as I am mainly focusing on Spotify, and there may be random issues.

Some known issues so far:

  • Going to the next/prev track doesn’t always update UI
  • Sometimes when switching between mpd/spotify the other song doesn’t stop
  • Playlist ability was mostly removed and replaced with spotify queue… will be mixing the two in the near future.

Check out the UI:

Just posting this here as I want to show my progress and also invite anyone here to use here by by pulling my repo here:

You can update yours by:

cd /var/www 
git remote set-url origin --delete
git remote set-url origin --add
git pull
sudo service php5-fpm restart

Well done!
I’ll try asap :stuck_out_tongue:

Well done, that is a good looking ui.

I personally prefer the search button on the browse tab, but that’s just me.

But where did the volume circle go? Is it still scroll down or did you remove it?

Before testing, I suggest to backup www folder :wink:
I think that the command is

sudo git remote set-url origin --delete
[/code] delete instead of remove
it retruns
sudo git remote set-url origin --remove
and then
sudo git pull
but it retruns
[code]sudo git pull
Updating 8ecfcc1..fd5a8a4
error: Your local changes to the following files would be overwritten by merge:
Please, commit your changes or stash them before you can merge.

So I removed www and cloned your repo

sudo git clone www 

and sudo service php5-fpm restart
And reboot ?
But it missing something because there is still the legacy webUI :confused:
So I’m going to restart from zero

Now, I’ve got the new webUI :smiley:
I did in /var/www:

sudo git pull sudo git remote set-url origin --add sudo git remote set-url origin --delete sudo git pull sudo service php5-fpm restart
But, in the playback tab, volume control is a white square with a 66 inside
Browse tab contains no sources :confused:

edit : I found in the log file /var/log/nginx/error.log an error : /var/www/js/volumio.utils.js . And this file does not exist. Don’t know if it is the origin of the previous problem ?

Ah you are right… clearly that didn’t make it into the repo :slight_smile: I’ll have to add that tonight. Thanks for checking it out!

Ok I added that file to the repo. Let me know if you have any more issues :slight_smile:

yep !
Would say bravo !!!
Very nice UI!
Very clean !
Really I like it !
Hope you’ll have a look at volumio2 as it will be possible to create other UI than the base one.
I’m going to test deeply now :wink:

Some details I noticed :
Album art display is nearly perfect on my smartphone, even if it needs to be recenter, but not on my computer. As the image ratio is different from screen and image, only the bottom is displayed.
A small green line appears on the right of the play button.

Just to post 2 screenshots :smiley:
1 from my smartphone (android lollipop)
1 from my laptop (ubuntu)
Capture d’écran_2015-12-11_21-16-22.png

I pulled your last commit.
I saw a work for the display +1 smartphone and computer ok
You have removed “empty playlist” in playlist… How to remove songs in the list ?
It seems than when pressing stop playing, it only pause mpd and that prevent to swap to spotify and vice-versa because it still capture the alsa output. I think you have to better use “stop” or add a stop button.
No phot cover for mpd ( even if it is the name of the commit)

Ah yes I noticed the issues with play/stop… that should be easy to fix. I just put a very basic way of discovering cover photos for mpd. You would need them on your filesystem already. The way it is set up is to search for Folder.jpg in the current folder. Mine are all set up that way, probably from manually doing it before, but I can also pull AlbumArt*.* … would that work for you?

The playlist I need to work on more… I had focused on spotify before to have that as the queue, but I need to revisit combining the two, or only display the queue/playlist depending on what you are currently listening to.

Thankyou socketman!

Just… BRILLIANT!!! Pls let me know when it is in a “publishable” state… this will be the good farewell of Volumio1…

I love the idea of art background… What about working on it for Volumio2??