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.
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: https://github.com/jrenton/Volumio-WebUI.
You can update yours by:
cd /var/www
git remote set-url origin --delete https://github.com/volumio/Volumio-WebUI.git
git remote set-url origin --add https://github.com/jrenton/Volumio-WebUI.git
git pull
sudo service php5-fpm restart
Hi,
Before testing, I suggest to backup www folder
I think that the command is
sudo git remote set-url origin --delete https://github.com/volumio/Volumio-WebUI.git
[/code] delete instead of remove
it retruns
[code]
sudo git remote set-url origin --remove https://github.com/volumio/Volumio-WebUI.git
[/code]
and then
[code]
sudo git pull
[/code]
but it retruns
[code]sudo git pull
Updating 8ecfcc1..fd5a8a4
error: Your local changes to the following files would be overwritten by merge:
js/volumio.api.js
Please, commit your changes or stash them before you can merge.
Aborting
sudo git pull
sudo git remote set-url origin --add https://github.com/jrenton/Volumio-WebUI.git
sudo git remote set-url origin --delete https://github.com/volumio/Volumio-WebUI.git
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
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 ?
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
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.
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.
I’ll have to add that tonight. Thanks for checking it out!
