Improve webplayer UX #623

hinnerkoetting · 2019-11-09T14:15:06Z

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.

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 · 2019-11-10T15:18:21Z

htdocs/inc.loadControls.php

@@ -0,0 +1,175 @@
+<?php
+include ("lang/lang-en-UK.php");


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

@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 · 2019-11-10T15:20:52Z

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 · 2019-11-10T17:52:45Z

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 · 2019-11-11T06:16:11Z

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 · 2019-11-11T06:22:16Z

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 · 2019-11-11T14:38:54Z

@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.

- Split MPD response key-value pair at the position ": " - All response keys in lower case

- Rework MPD response processing, split key-value pairs at ": " - Change all response keys to lower case for further processing Introduce php-unit as testing framework - Add composer as dependency manager - Add phpunit and php-mock as dependencies - Introduce namespace 'Jukebox' to enable mocking of build-in php functions e.g. "exec", "headers"

- Rework "currentsong" response processing, split key-value pairs at ": " - Change all response keys to lower case for further processing - Change "playlist" command to "playlistinfo" to receive additional track info (pos, time, albumLength) - Add singlequotes to directory shell arguments to support spaces in folders Introduce php-unit as testing framework - Add composer as dependency manager - Add phpunit and php-mock as dependencies - Introduce namespace 'Jukebox' to enable mocking of build-in php functions e.g. "exec", "headers"

- Rework "currentsong" response processing, split key-value pairs at ": " - Change all response keys to lower case for further processing - Change "playlist" command to "playlistinfo" to receive additional track info (pos, time, albumLength) - Add singlequotes to directory shell arguments to support spaces in folders - Remove comma from playlist name if exists, to fix collapsable tracklist Introduce php-unit as testing framework - Add composer as dependency manager - Add phpunit and php-mock as dependencies - Introduce namespace 'Jukebox' to enable mocking of build-in php functions e.g. "exec", "headers"

ctietze · 2019-11-18T21:38:05Z

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] ctietze@7bfa17e

- Rework "currentsong" response processing, split key-value pairs at ": " - Change all response keys to lower case for further processing - Change "playlist" command to "playlistinfo" to receive additional track info (pos, time, albumLength) - Add singlequotes to directory shell arguments to support spaces in folders - Remove comma from playlist name if exists, to fix collapsable tracklist Introduce php-unit as testing framework - Add composer as dependency manager - Add phpunit and php-mock as dependencies - Introduce namespace 'Jukebox' to enable mocking of build-in php functions e.g. "exec", "headers"

MiczFlor · 2019-11-20T16:06:04Z

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 :)

- Rework "currentsong" response processing, split key-value pairs at ": " - Change all response keys to lower case for further processing - Change "playlist" command to "playlistinfo" to receive additional track info (pos, time, albumLength) - Add singlequotes to directory shell arguments to support spaces in folders - Remove comma from playlist name if exists, to fix collapsable tracklist - Remove duplicate ":" from list argument - Hide overalltime for e.g. podcasts Introduce php-unit as testing framework - Add composer as dependency manager - Add phpunit and php-mock as dependencies - Introduce namespace 'Jukebox' to enable mocking of build-in php functions e.g. "exec", "headers"

ctietze · 2019-11-20T16:32:31Z

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 · 2019-11-20T18:54:45Z

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.

Restore missing playlist in webapp #623

MiczFlor reviewed Nov 10, 2019

View reviewed changes

MiczFlor changed the base branch from master to develop November 10, 2019 15:19

MiczFlor merged commit fec5922 into MiczFlor:develop Nov 10, 2019

ctietze added a commit to ctietze/RPi-Jukebox-RFID that referenced this pull request Nov 17, 2019

Fix MPD command response handling MiczFlor#623

9534304

- Split MPD response key-value pair at the position ": " - All response keys in lower case

MiczFlor added a commit that referenced this pull request Nov 22, 2019

Merge pull request #635 from ctietze/bugfix/playlist-not-displayed

89a13bc

Restore missing playlist in webapp #623

MiczFlor mentioned this pull request Nov 24, 2019

Is there a changelog for version 2? Should I upgrade from version 1? #638

Closed

MiczFlor mentioned this pull request Dec 1, 2019

Version 2.0 rc5 release #642

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve webplayer UX #623

Improve webplayer UX #623

hinnerkoetting commented Nov 9, 2019

MiczFlor Nov 10, 2019

hinnerkoetting Nov 10, 2019

MiczFlor commented Nov 10, 2019

hinnerkoetting commented Nov 10, 2019

MiczFlor commented Nov 11, 2019

MiczFlor commented Nov 11, 2019

hinnerkoetting commented Nov 11, 2019 •

edited

Loading

ctietze commented Nov 18, 2019

MiczFlor commented Nov 20, 2019

ctietze commented Nov 20, 2019

hinnerkoetting commented Nov 20, 2019

Improve webplayer UX #623

Improve webplayer UX #623

Conversation

hinnerkoetting commented Nov 9, 2019

MiczFlor Nov 10, 2019

Choose a reason for hiding this comment

hinnerkoetting Nov 10, 2019

Choose a reason for hiding this comment

MiczFlor commented Nov 10, 2019

hinnerkoetting commented Nov 10, 2019

MiczFlor commented Nov 11, 2019

MiczFlor commented Nov 11, 2019

hinnerkoetting commented Nov 11, 2019 • edited Loading

ctietze commented Nov 18, 2019

MiczFlor commented Nov 20, 2019

ctietze commented Nov 20, 2019

hinnerkoetting commented Nov 20, 2019

hinnerkoetting commented Nov 11, 2019 •

edited

Loading