Improve webplayer UX

[hinnerkoetting]

Information and controls for the webplayer page was moved from server rendering to AJAX requests.
API endpoints were added to request status informations and send commands.
The Webpage can now be controlled without full page reloads so that it feels more responsive.

Also the number of calls to mopidy was reduced so that the page loads faster and mopidy
stability is improved.

[MiczFlor]

Hi @hinnerkoetting this line makes me wonder if and how the ajax version should handle the interface language - which can be switched.

[hinnerkoetting]

@MiczFlor I "solved" it by printing all localisations in the index.php, so that they can be accessed by javascript.
I guess it is not a perfect solution but should be good enough for now in my opinion.

[MiczFlor]

Hi @hinnerkoetting
gee, this is a lot of code :) thanks for the effort. Tackling the API was way overdue. I merged this to the develop branch. If you find the time, give it a test, I will do the same, soon. Currently work has me in a knot. And my code review is "reading only".

[hinnerkoetting]

I really like this project, so I am happy that I could contribute some code.
I will probably test my changes again over the next couple of days. Thanks for merging it.

[MiczFlor]

Hi @hinnerkoetting
thanks for your warm words. Currently it's shortly after 7am, I am sitting in the Regio Bahn to Spandau with my laptop on my lap, looking at your work :) because I am so glad ajax is coming :)

if I switch from master to develop, the playlist disappears in the web UI. Thing is: on my linux machine, obviously, I am not running the webserver as root and there are many other changes which make it difficult to really test Phoniebox stuff on my laptop.
Could you possibly try a blank install with the install script and then switch to develop and see what's missing?
From what I sense in my commute, there is something missing to fill this part

            <div id="loadPlaylist">
                <table style="width: 100%; border-collapse: collapse; border-top: 1px solid #444;" id="playlistTable">
                </table>
            </div>

with the matching HTML.
Thanks again for making a start with this, I hope to be able to help pushing it over the finish line, merging to master.

[MiczFlor]

Hi @hinnerkoetting
another thing, I ran into: when clicking on the multiple play button in the web app, I get a "file not found". The reason being this line:

<a href='playPlaylist("PODCASTS", "true");' class='btn-panel-big btn-panel-col' title='Play (sub)folders'><i class='mdi mdi-animation-play-outline'></i></a>

where the href tries to open the URL - in my Firefox on apache2, but I assume it would do the same on the Pi.

The matching code in the Wep App UI is:

        <div class='panel-heading' id='headingIDPODCASTS'>
            <h4>
              <a href='playPlaylist("PODCASTS", "true");' class='btn-panel-big btn-panel-col' title='Play (sub)folders'><i class='mdi mdi-animation-play-outline'></i></a>
				  <span class='mb-0 playlist_headline' data-toggle='collapse' data-target='#collapseIDPODCASTS' aria-expanded='true' aria-controls='collapseIDPODCASTS' style='cursor:pointer;' title='Show contents'><i class='mdi mdi-folder-outline mdi-36px'></i> PODCASTS
              <i class='mdi mdi-arrow-down-drop-circle-outline'></i>             <span class='badge' title='Show folders'><i class='mdi mdi-folder-multiple'></i> 6</span>            <span class='badge' title='Show files'><i class='mdi mdi-library-music'></i> 0</span>
              </span>
            </h4>
        </div><!-- ./ .panel-heading -->

[hinnerkoetting]

@MiczFlor: I will check it probably tomorrow evening. The second case seems to be that I forgot to change <a href='playPlaylist... to <a onclick='playPlaylist...

I am not sure what causes the first issue, the playlist should be filled in updatePlaylistData() in htdocs/inc.loadedPlaylist.php.
Could you please check if there is a javascript error or an error on the network tab? I would guess that there is a missing value in your playlist that I forgot to check it for null.

[ctietze]

Hi @MiczFlor , Hi @hinnerkoetting ,
thanks so far for the whole jukebox and the webplayer UX update!

I`m just building up a box and thought, I can help a little bit...
During testing of the current develop branch I just ran into the same issues as you described in the comments of #623 and #624

I already fixed some of them, but there are still some open issues

• Podcasts has no cover displayed
• Podcast playlist time shows "NaN"
• Cannot play Playlist w/ subfolders

I pushed my first changes to an own branch [1], as it is still "work in progress".

Best regards
Clemens

[1] https://github.com/ctietze/RPi-Jukebox-RFID/commit/7bfa17e0e2285fa004b628ef604bc28704da989d

[MiczFlor]

Hi @ctietze
thanks for the input. Did I miss a pull request? Or did you currently push only to your fork?
Create a pull request, please - and I hope that @hinnerkoetting will join the bug squashing team :)

[ctietze]

Hi @MiczFlor,
yeah I thought I could fix the " Playlist w/ subfolders / playlist recursive" issue before the PR, but I wasn`t able to fix it yesterday. I created the PR and will check back on the playlist recursive thing on the weekend! Except for one of you two was faster ;)

Best regards
Clemens

[hinnerkoetting]

Sure, I will also have a look. Can you tell me which podcast you were listening to? That will probably make it easier to reproduce.