From e3a0db9d43fd21f90f99d26d4ce08f68f49671fb Mon Sep 17 00:00:00 2001
From: Wouter van Wijk <woutervanwijk@gmail.com>
Date: Fri, 28 Jun 2013 15:58:53 +0200
Subject: [PATCH] 'toast' loading message when playing a song, popup for queue

---
 webclient/index.html          | 29 +++++++++++++++++++++++++++--
 webclient/js/controls.js      | 16 +++++-----------
 webclient/js/functionsvars.js | 15 +++++++++++++++
 3 files changed, 47 insertions(+), 13 deletions(-)
diff --git a/webclient/index.html b/webclient/index.html
index b13b2d7..6ce348d 100755
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -3,8 +3,9 @@
     <head>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
         <meta charset="utf-8">
-        <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
+        <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" /> 
         <script src="js/jquery-1.8.3.js"></script>
+<!-- <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" /> -->
         <script type='application/javascript' src='js/fastclick.js'></script>
         <meta name="apple-mobile-web-app-status-bar-style" content="black" />
         <script type="text/javascript">
@@ -77,7 +78,7 @@
                         <span id="popupTrackName"></span>
                         </li>
 -->                        <li>
-                            <a href="#" onclick="return playTrack();">Play <span id="popupTrackName"></span></a>
+                            <a href="#" onclick="return playTrack();">Play <span class="popupTrackName"></span></a>
                         </li>
                         <li class="addqueue">
                             <a href="#" onclick="return playTrack(PLAY_NEXT);">Play Track Next</a>
@@ -103,6 +104,30 @@
                 </div>
             </div>
 
+            <div data-role="popup" data-transition="none" data-theme="c" id="popupQueue">
+                <div data-role="collapsible-set">
+                    <ul data-role="listview" data-icon="false" id="popupQueueLv">
+                        <li>
+                            <a href="#" onclick="return playTrack();">Play <span class="popupTrackName"></span></a>
+                        </li>
+                        <li>
+                            <a href="#" onclick="return removeTrack();">Remove from Queue</a>
+                        </li>
+                        <li>
+                            <a href="#" onclick="showAlbumPopup()">Show Album <span id="popupAlbumName"></span></a>
+                        </li>
+                        <li id="popupArtistsLi">
+                            <a href="#" onclick="showArtist()" id="popupArtistHref">Show Artist <span id="popupArtistName"></span>
+                            </a>
+                        </li>
+                        <div data-role="collapsible" data-icon="false" data-inset="false" id="popupArtistsDiv">
+                            <h2>Artists</h2>
+                            <ul data-icon="false" data-inset="false" data-role="listview" id="popupArtistsLv"></ul>
+                        </div>
+                    </ul>
+                </div>
+            </div>
+
             <div data-role="header" data-tap-toggle="false" id="header" data-position="fixed" class="ui-grid-b header-breakpoint">
 
                 <div id="controldiv" class="ui-block-a">
diff --git a/webclient/js/controls.js b/webclient/js/controls.js
index c802e65..254644d 100755
--- a/webclient/js/controls.js
+++ b/webclient/js/controls.js
@@ -8,7 +8,7 @@ function playTrack(addtoqueue) {
     }
     $('#popupTracks').popup('close');
     $('#controlsmodal').popup('close');
-    showLoading(true);
+    toast('Loading...');
 
     //function playtrack(uri, playlisturi) {
     playlisturi = $('#popupTracks').data("list");
@@ -17,7 +17,6 @@ function playTrack(addtoqueue) {
     var trackslist = new Array();
     var track, tracksbefore, tracksafter;
     var tracks = getTracksFromUri(playlisturi);
-//    console.log(tracks);
     if (tracks) {
         if (!addtoqueue) {
             clearQueue();
@@ -35,7 +34,6 @@ function playTrack(addtoqueue) {
             mopidy.playback.next();
         }
         mopidy.playback.play();
-        showLoading(false);
         return false;
     }
 
@@ -57,29 +55,25 @@ function playTrack(addtoqueue) {
     switch (addtoqueue) {
 	case ADD_THIS_BOTTOM:
             mopidy.tracklist.add(tracks.slice(selected, selected + 1));
-            showLoading(false);
 	    return false;
 	case PLAY_NEXT:
 	    mopidy.tracklist.add(tracks.slice(selected, selected + 1), playing + 1);
-            showLoading(false);
 	    return false;
 	case ADD_ALL_BOTTOM:
             mopidy.tracklist.add(tracks);
-            showLoading(false);
 	    return false;
     }
 
-// play now: first add track to be played, then the other tracks
+// first add track to be played, then the other tracks
     mopidy.tracklist.add(tracks.slice(selected, selected + 1) );
-    mopidy.playback.play();
-    //wait 1 second before adding the rest to give server the time to start playing
+    //wait 1.5 second before adding the rest to give server the time to start playing
     setTimeout(function() {
         mopidy.tracklist.add(tracks.slice(0, selected), 0);
 	if (selected < tracks.length) {
             mopidy.tracklist.add(tracks.slice(selected + 1) );
 	}
-    }, (1000));
-    showLoading(false);
+    }, (1500));
+    mopidy.playback.play();
     return false;
 }
 
diff --git a/webclient/js/functionsvars.js b/webclient/js/functionsvars.js
index e254825..74a88a2 100755
--- a/webclient/js/functionsvars.js
+++ b/webclient/js/functionsvars.js
@@ -292,3 +292,18 @@ function timeFromSeconds(length) {
     var s = Math.floor(d % 3600 % 60);
     return ((h > 0 ? h + ":" : "") + (m > 0 ? (h > 0 && m < 10 ? "0" : "") + m + ":" : "0:") + (s < 10 ? "0" : "") + s);
 }
+
+
+/******* Toast ***/
+function toast (message, delay) {
+    message = message || "Loading...";
+    delay = delay || 1000;
+    $.mobile.showPageLoadingMsg("a", message);
+    if(delay > 0) {
+        setTimeout(function(){
+            $.mobile.hidePageLoadingMsg();
+        }, delay);
+    }
+}
+
+
