fix:Replace Javascript dialogs and buttons with jQuery Mobile equivalents.

Use 'm3u' format for saving playlists. Invalidate the playlist cache on refresh or external changes.

Replace links with buttons and text with icons.

Fixes #113. Fixes #173. Fixes #177.

README.rst

@@ -79,6 +79,9 @@ v2.2.0 (UNRELEASED)
 - No longer interferes with changes to Mopidy's volume levels that are triggered externally. (Fixes: `#162 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/162>`_).
 - Volume slider now works with Mopidy-ALSAMixer again. (Fixes: `#168 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/168>`_).
 - Now falls back to track artist if album artist is not available for rendering cover art. (Fixes: `#128 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/128>`_).
+- Replace Javascript prompt with jQuery Mobile equivalent. (Fixes: `#113 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/113>`_).
+- Fix playlist refresh button. (Fixes: `#173 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/173>`_).
+- Update save queue functionality to use 'm3u' format. (Fixes: `#177 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/177>`_).
 
 v2.1.1 (2016-02-04)
 -------------------

mopidy_musicbox_webclient/static/css/webclient.css

@@ -378,6 +378,10 @@
     border: 1px solid #aaa;
 }
 
+.popupDialog {
+    padding: 10px;
+}
+
 /*dont hide clear buttons in text input */
 .ui-input-clear-hidden {
     display: block !important;

mopidy_musicbox_webclient/static/index.html

@@ -207,6 +207,37 @@
 </div>
 
 
+<div data-role="popup" data-theme="b" id="popupSave" class="popupDialog">
+    <form>
+        <p>Save current queue to a playlist.
+        <input id="saveinput" placeholder="Playlist name" class="span2" data-clear-btn="true"
+               onkeypress="return savePressed(event.keyCode);" type="text"/>
+        <div data-role="controlgroup" data-type="horizontal" align="center">
+            <button class="btn" type="button" onclick="return saveQueue();">
+                Ok
+            </button>
+            <button class="btn" type="button" onclick="return $('#popupSave').popup('close');">
+                Cancel
+            </button>
+        </div>
+    </form>
+</div>
+<!--/save queue to playlist-->
+
+
+<div data-role="popup" data-theme="b" id="popupOverwrite" class="popupDialog">
+    <form>
+        <p>Overwrite existing playlist with same name?
+        <div data-role="controlgroup" data-type="horizontal" align="center">
+            <button class="btn" type="button" id="overwriteConfirmBtn">
+                Ok
+            </button>
+            <button class="btn" type="button" onclick="$('#popupOverwrite').popup('close'); return $('#popupSave').popup('open');">
+                Cancel
+            </button>
+        </div>
+    </form>
+</div><!--/overwrite existing playlist-->
 
 <div data-role="header" data-tap-toggle="false" id="header" data-position="fixed" class="header-breakpoint headerbtn">
     <a id="headermenubtn" href="#panel"><i class="fa fa-align-justify"></i></a>
@@ -297,8 +328,16 @@
 <!-- /nowplaying -->
 
 <div data-role="content" id="playlistspane" class="pane">
-    <a style="float:right; padding: 1.2em 10px" onclick="return refreshPlaylists();"><i class="fa fa-refresh"></i></a>
+    <div class="ui-grid-a">
-    <h4>Playlists</h4>
+        <div class="ui-block-a">
+            <h4>Playlists</h4>
+        </div>
+        <div align="right" class="ui-block-b" data-role="controlgroup" data-type="horizontal">
+            <button class="btn" type="button" title="Refresh playlists" onclick="return refreshPlaylists();">
+                <i class="fa fa-refresh"></i>
+            </button>
+        </div>
+    </div>
     <div class="ui-grid-a pl-breakpoint">
         <div class="ui-block-a scroll" id="playlistslistdiv">
             <ul id="playlistslist" class="table"></ul>
@@ -307,7 +346,9 @@
             <div id="playlisttracksback" style="height: 30px; margin: 2px; padding-top: 2px; background-color: #aaa;">
                 <a style="display:block; padding: 5px;" href="#" onclick="return togglePlaylists();"><i class="fa fa-arrow-circle-left"></i> Back</a>
             </div>
-            <ul class="table" id="playlisttracks"></ul>
+            <div>
+                <ul class="table" id="playlisttracks"></ul>
+            </div>
         </div>
     </div>
 </div>
@@ -321,11 +362,22 @@
 <!--/browsepane-->
 
 <div data-role="content" class="pane" id="currentpane">
-    <a style="float:right" onclick="return clearQueue();" data-role="button">Clear</a>
+    <div class="ui-grid-a">
-    <a style="float:right; margin-right: 0.5em" onclick="return saveQueue();" data-role="button">Save</a><h4>Play Queue</h4>
+        <div class="ui-block-a">
-    <!--                <ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul>
+            <h4>Play Queue</h4>
-                    <ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul> -->
+        </div>
-    <ul class="table" id="currenttable"></ul>
+        <div align="right" class="ui-block-b" data-role="controlgroup" data-type="horizontal">
+            <button class="btn" type="button" title="Save queue to playlist" onclick="return showSavePopup();">
+                <i class="fa fa-floppy-o"></i>
+            </button>
+            <button class="btn" type="button" title="Clear queue" onclick="return clearQueue();">
+                <i class="fa fa-trash-o"></i>
+            </button>
+        </div>
+    </div>
+    <div class="ui-grid">
+        <ul class="table" id="currenttable"></ul>
+    </div>
 </div>
 
 <div data-role="content" class="pane" id="albumspane">

mopidy_musicbox_webclient/static/js/controls.js

@@ -207,39 +207,67 @@ function removeTrack() {
 }
 
 function clearQueue() {
-    mopidy.playback.stop();
+    mopidy.tracklist.clear().then(
-    resetSong();
+        resetSong()
-    mopidy.tracklist.clear();
+    );
-    resetSong();
     return false;
 }
 
+function savePressed(key) {
+    if (key == 13) {
+        saveQueue();
+        return false;
+    }
+    return true;
+}
+
+function showSavePopup(){
+    mopidy.tracklist.getTracks().then(function(tracks) {
+        if (tracks.length > 0) {
+            $('#saveinput').val('');
+            $('#popupSave').popup('open');
+        }
+    });
+
+}
+
 function saveQueue() {
     mopidy.tracklist.getTracks().then(function(tracks) {
-        if (tracks.length > 0) {
+        var playlistName = $('#saveinput').val().trim();
-            var plname = window.prompt("Playlist name:", "").trim();
+        if (playlistName != null && playlistName != "") {
-            if (plname != null && plname != "") {
+            getPlaylistByName(playlistName, 'm3u', false).then(function(exists) {
-                mopidy.playlists.filter({"name": plname}).then(function(existing) {
+                if (exists) {
-                    var exists = false;
+                    $('#popupSave').popup('close');
-                    for (var i = 0; i < existing.length; i++) {
+                    $('#popupOverwrite').popup('open');
-                        exists = exists || existing[i].uri.indexOf("m3u:") == 0 || existing[i].uri.indexOf("local:") == 0;
+                    $('#overwriteConfirmBtn').click(function() {
-                    }
+                        initSave(playlistName, tracks);
-                    if (!exists || window.confirm("Overwrite existing playlist \"" + plname + "\"?")) {
+                    });
-                        mopidy.playlists.create({'name': plname, 'uri_scheme': "local"}).then(function(playlist) {
+                } else {
-                             playlist.tracks = tracks;
+                    initSave(playlistName, tracks);
-                             mopidy.playlists.save({'playlist': playlist}).then();
+                }
-                             getPlaylists();
+            });
-                        });
-                    }
-                });
-            }
         }
     });
     return false;
 }
 
+function initSave(playlistName, tracks) {
+    $('#popupOverwrite').popup('close');
+    $('#popupSave').popup('close');
+    $('#saveinput').val('');
+    toast('Saving...');
+    mopidy.playlists.create({'name': playlistName, 'uri_scheme': "m3u"}).then(function(playlist) {
+         playlist.tracks = tracks;
+         mopidy.playlists.save({'playlist': playlist}).then();
+     });
+}
+
 function refreshPlaylists() {
-    mopidy.playlists.refresh();
+    mopidy.playlists.refresh().then(function() {
+        playlists = {};
+        $('#playlisttracksdiv').hide();
+        $('#playlistslistdiv').show();
+    });
     return false;
 }
 

mopidy_musicbox_webclient/static/js/gui.js

@@ -259,6 +259,20 @@ function initSocketevents() {
         getPlaylists();
     });
 
+    mopidy.on("event:playlistChanged", function(data) {
+        $('#playlisttracksdiv').hide();
+        $('#playlistslistdiv').show();
+        delete playlists[data["playlist"].uri];
+        getPlaylists();
+    });
+
+    mopidy.on("event:playlistDeleted", function(data) {
+        $('#playlisttracksdiv').hide();
+        $('#playlistslistdiv').show();
+        delete playlists[data["uri"]];
+        getPlaylists();
+    });
+
     mopidy.on("event:volumeChanged", function(data) {
         setVolume(data.volume);
     });