add album covers from lastfm, changed all lists to display albums and covers

webclient/css/jquery.mobile-1.3.0-rc.1.css

@@ -2532,7 +2532,7 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid
 	border-bottom-left-radius: inherit;	
 }
 .ui-li>.ui-btn-inner { display: block; position: relative; padding: 0; }
-.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .7em 15px; display: block; }
+.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .4em 10px; display: block; }
 .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb  { min-height: 59px; padding-left: 100px; }
 .ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon { min-height: 20px; padding-left: 40px; }
 .ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-count, .ui-li-divider.ui-li-has-count { padding-right: 45px; }

webclient/css/ws.css

@@ -5,6 +5,12 @@
 
 /****************************
  *  Responsive stuff
+ *  * iphone 3 20em
+ *    landscape 30
+ * iphone 4 40em
+ *    landscape 60
+ * ipad landsc 64
+ *    portr 48
  ****************************/
 
 @media all and (min-width: 50.1em) {
@@ -18,15 +24,13 @@
         clear: left;
     }
     .header-breakpoint.ui-grid-b .ui-block-a {
-        width: 21.95%;
+        width: 21%;
     }
     .header-breakpoint.ui-grid-b .ui-block-b {
-        width: 37.92%;
+        width: 37%;
-        display: block;
     }
     .header-breakpoint.ui-grid-b .ui-block-c {
-        width: 37.1%;
+        width: 35.1%;
-        display: block;
     }
     .pl-breakpoint.ui-grid-a .ui-block-a {
         clear: left;
@@ -40,44 +44,38 @@
     #playlisttablediv {
         margin-left: 10px;
     }
-    #header {
-        height: 50px !important;
-    }
-
 }
 
-@media all and (max-width: 50em) {
+/* tablet etc */
+@media all and (max-width: 50em) and (min-width: 30.1em) {
     .header-breakpoint.ui-grid-b .ui-block-a {
         width: 39.95%;
     }
     .header-breakpoint.ui-grid-b .ui-block-c {
-        width: 59%;
+        width: 50%;
     }
     .header-breakpoint.ui-grid-b .ui-block-b {
         display: none;
     }
-    #header {
-        height: 50px !important;
-    }
 }
 
-@media all and (max-width: 35em) {
+/* phone */
+@media all and (max-width: 30em) {
     .pl-breakpoint .ui-block-a, .pl-breakpoint .ui-block-b {
         width: 100%;
     }
     .header-breakpoint.ui-grid-b .ui-block-a {
-        width: 40%;
+        width: 35%;
         clear: left;
     }
     .header-breakpoint.ui-grid-b .ui-block-c {
-        width: 45%;
+        width: 40%;
     }
     .header-breakpoint.ui-grid-b .ui-block-b {
         display: none;
     }
 }
 
-
 /************************
  *  Volume Slider
  ***********************/
@@ -101,7 +99,7 @@
 }
 
 #slidercontainer {
-    margin-top: 10px;
+    margin-top: 7px;
     margin-bottom: 5px;
 }
 
@@ -125,6 +123,7 @@
 #controldiv {
     height: 30px;
     width: 230px;
+    margin-top: -3px;
     margin-left: -5px;
     display: inline;
 }
@@ -139,7 +138,7 @@
 }
 
 #nextimg, #previmg {
-    margin-top: 20px;
+    margin-top: 16px;
 }
 
 #backimg {
@@ -207,9 +206,12 @@
 .currenttrack {
     background-image: url('../images/icons/play_alt_16x16.png');
     background-repeat: no-repeat;
-    background-color: #fff;
+    background-color: #eee;
     background-position: 4px center;
-    padding-left: 10px;
+}
+
+.currenttrack a {
+    margin-left: 14px;
 }
 
 #modalalbum a, #modalartist a {
@@ -229,6 +231,15 @@ a {
     text-decoration: none !important;
 }
 
+.ui-li-divider {
+    height: 37px;
+}
+
+.ui-li-divider a p {
+    color: #555 !important;
+    font-size: 120% !important;
+}
+
 #artistviewimage, #albumviewcover {
     float: right;
     heigth: 90px;
@@ -239,21 +250,40 @@ a {
     width: 36px;
     heigth: 36px;
     margin-right: 5px;
-/*    border: 1px solid #666; */
+    /*    border: 1px solid #666; */
     margin-top: -3px;
 }
 
 .artistcover {
-    float: left;
+    float: right;
     width: 40px;
     heigth: 40px;
-    margin-right: 3px;    
+    margin-right: 3px;
-}    
+}
 
 #popupTrackName, #popupAlbumName, .popupArtistName {
     font-style: oblique;
 }
 
 #controlsmodal {
-    min-width:300px;
+    min-width: 300px;
-}
+}
+
+.pright {
+    display: inline;
+    margin-top: 4px;
+    float: right;
+}
+
+.artistname {
+    font: bold;
+}
+
+#h_artistname {
+    margin-bottom: 65px;
+    margin-top: 10px;
+}
+
+#header {
+    height: 50px !important;
+}

webclient/index.html

@@ -86,10 +86,9 @@
                         <li>
                             <a href="#" onclick="return playTrack();">Play Track <span id="popupTrackName"></span></a>
                         </li>
-                        <!--                    <li>
+                        <li id="liaddtobottom">
-                        <a href="#">Add tracks to bottom of queue</a>
+                        <a href="#" onclick="return playTrack(true);">Add tracks to bottom of queue</a>
                         </li>
-                        -->
                         <li>
                             <a href="#" onclick="showAlbumPopup()">Show Album <span id="popupAlbumName"></span></a>
                         </li>
@@ -106,10 +105,10 @@
 
                 <div id="controldiv" class="ui-block-a">
                     <span id="btback"><a href="#" onclick="return backbt();"> <img  id="backimg"src="images/icons/arrow_left_alt1_24x24.png" /></a></span>
-                    <span id="btprev"><a href="#" onclick="doPrevious(); return false"><img id="previmg" src="images/icons/first_16x16.png" alt="Previous Track" /></a></span>
+                    <span id="btprev"><a href="#" onclick="doPrevious(); return false"><img id="previmg" src="images/icons/first_24x24.png" alt="Previous Track" /></a></span>
                     <span id="btplay"><a href="#" onclick="doPlay(); return false"><img src="images/icons/pause_32x32.png" alt="Play" id="playimg" /></a></span>
-                    <span id="btnext"><a href="#" onclick="doNext(); return false"><img id="nextimg" src="images/icons/last_16x16.png" alt="Next Track" /></a></span>
+                    <span id="btnext"><a href="#" onclick="doNext(); return false"><img id="nextimg" src="images/icons/last_24x24.png" alt="Next Track" /></a></span>
-                    <span id="btcontrols"><a href="#controlsmodal" data-rel="popup"><img src="images/icons/cog_24x24.png" id="controlsimg" alt="More controls" class="breakafter" /></a></span>
+                    <span id="btcontrols"><a href="#controlsmodal" data-rel="popup"><img src="images/icons/new_window_24x24.png" id="controlsimg" alt="More controls" class="breakafter" /></a></span>
                 </div>
 
                 <div id="songinfo" class=" ui-block-b">
@@ -134,7 +133,7 @@
                     <ul id="playlistslist" data-icon="false" data-inset="true" data-role="listview" data-filter="true"></ul>
                 </div>
                 <div class="ui-block-b" id="playlisttablediv">
-                    <ul data-role="listview"  data-icon="false" id="playlisttable" data-inset="true" data-filter="true"></ul>
+                    <ul data-role="listview" data-theme="c" data-icon="false" id="playlisttable" data-inset="true" data-filter="true"></ul>
                     <img src="images/loader.gif" id="playlistloader" class= "loader" />
                 </div>
 
@@ -142,7 +141,7 @@
 
             <div data-role="content" class="pane" id="currentpane">
                 <h4>Play Queue</h4>
-                <ul data-role="listview" data-icon="false" data-inset="true" id="currenttable"></ul>
+                <ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul>
                 <img src="images/loader.gif" id="currentloader" class= "loader" />
             </div>
 
@@ -158,10 +157,7 @@
                 <!--                            <h4>Artist</h4> -->
                 <a href="#artistpopup" data-rel="popup"><img height="90" src="" id="artistviewimage" /></a>
                 <h3 id="h_artistname"></h3>
-
+                <ul data-role="listview" data-icon="false" data-inset="true" id="artiststable"></ul>
-                <!--          <ul data-role="listview" data-icon="false" id="artistslist" data-inset="true"></ul> -->
-
-                <div id="artiststable"></div>
                 <img src="images/loader.gif" id="artistsloader" class="loader" />
             </div>
 

webclient/js/controls.js

@@ -1,7 +1,7 @@
 /********************************************************
  * play an uri from a trackslist or the current playlist
  *********************************************************/
-function playTrack() {
+function playTrack(addtobottom) {
     $('#popupTracks').popup('close');
     $('#controlsmodal').popup('close');
 
@@ -14,13 +14,19 @@ function playTrack() {
     var track;
     switchContent('current', uri);
     var tracks = getTracksFromUri(playlisturi);
+
     if (tracks) {
-        mopidy.tracklist.clear();
+        if (!addtobottom) {
+            mopidy.tracklist.clear();
+        }
         mopidy.tracklist.add(tracks);
         $(CURRENT_PLAYLIST_TABLE).empty();
     } else {
         tracks = currentplaylist;
     }
+    
+    if (addtobottom) { return false;}
+    
     mopidy.playback.stop(true);
 
     for (var i = 0; i < tracks.length; i++) {
@@ -37,8 +43,6 @@ function playTrack() {
     return false;
 }
 
-
-
 /**********************
  * Buttons
  */
@@ -129,6 +133,7 @@ function doRepeat() {
 
 /*********************
  * Track Slider
+ * Use a timer to prevent looping of commands
  *********************/
 
 function doSeekPos(value) {
@@ -138,20 +143,24 @@ function doSeekPos(value) {
     if (!initgui) {
         pauseTimer();
         //set timer to not trigger it too much
-        mopidy.playback.pause();
+        posChanging = true;
-        seekTimer = setTimeout(triggerPos, 250);
+        seekTimer = setTimeout(triggerPos, 200);
     }
 }
 
 function triggerPos() {
-    console.log(newposition);
     if (mopidy) {
+        mopidy.playback.stop();
         mopidy.playback.seek(newposition);
         mopidy.playback.resume();
+        posChanging = false;
     }
 }
 
 function setPosition(pos) {
+    if (posChanging) {
+        return;
+    }
     var oldval = initgui;
     if (pos > songlength) {
         pos = songlength;
@@ -165,11 +174,13 @@ function setPosition(pos) {
 }
 
 /********************
- * Volume
+ * Volume slider
+ * Use a timer to prevent looping of commands
  */
 
 function setVolume(value) {
     var oldval = initgui;
+    console.log('volume: ' + value);
     initgui = true;
     $("#volumeslider").val(value).slider('refresh');
     initgui = oldval;
@@ -177,11 +188,17 @@ function setVolume(value) {
 
 function doVolume(value) {
     if (!initgui) {
-        console.log('volume: ' + value);
+        volumeChanging = true;
+        clearInterval(volumeTimer);
+        volumeTimer = setTimeout(triggerVolume, 2000);
         mopidy.playback.setVolume(parseInt(value));
     }
 }
 
+function triggerVolume() {
+    volumeChanging = false;
+}
+
 function doMute() {
     //only emit the event, not the status
     if (muteVolume == -1) {
@@ -195,8 +212,9 @@ function doMute() {
     }
 
 }
+
 /*******
- * Track timer 
+ * Track timer
  */
 
 //timer function to update interface
@@ -213,7 +231,7 @@ function resumeTimer() {
 
 function initTimer() {
     pauseTimer();
-   // setPosition(0);
+    // setPosition(0);
     resumeTimer();
 }
 
@@ -221,5 +239,3 @@ function pauseTimer() {
     clearInterval(posTimer);
 }
 
-
-

webclient/js/functionsvars.js

@@ -18,7 +18,11 @@ var random;
 var repeat;
 var currentVolume = -1;
 var muteVolume = -1;
+var volumeChanging = false;
+var posChanging = false;
+
 var posTimer;
+var volumeTimer;
 var seekTimer;
 var initgui = true;
 var currentpos = 0;
@@ -54,13 +58,12 @@ TRACK_TIMER = 1000;
 //check status timer, every 5 or 10 sec
 STATUS_TIMER = 10000;
 
-
 /*******
  *
  */
 function scrollToTop() {
     var divtop = 0;
-//    console.log(divtop);
+    //    console.log(divtop);
     $('body,html').animate({
         scrollTop : divtop
     }, 250);
@@ -87,6 +90,84 @@ function getAlbum(pl) {
     };
 }
 
+/********************************************************
+ * break up results and put them in album tables
+ *********************************************************/
+function albumTracksToTable(pl, table, uri) {
+    var tmp = '';
+    $(table).empty();
+    var child = '';
+    for (var i = 0; i < pl.length; i++) {
+        popupData[pl[i].uri] = pl[i];
+        child = '<li><a href="#" onclick="return popupTracks(event, \'' + uri + '\',\'' + pl[i].uri + '\');">';
+        child += '<p style="float:right; display: inline;">' + timeFromSeconds(pl[i].length / 1000) + '</p><h1>' + pl[i].name + '</h1></a></li>';
+        tmp += child;
+    };
+    $(table).html(tmp);
+    $(table).attr('data', uri);
+    //set click handlers
+    /*   $(table + ' .name').click(function() {
+    return playtrack(this.id, uri)
+    });*/
+    //create (for new tables)
+    $(table).listview().trigger("create");
+    //refresh
+    $(table).listview('refresh');
+}
+
+function resultsToTables(results, target, uri) {
+    $(target).html('');
+
+    //break into albums and put in tables
+    var newalbum = [];
+    var html = '';
+    var nexturi = '';
+    var tableid, j, artistname, alburi;
+    var targetmin = target.substr(1);
+    $(target).attr('data', uri);
+
+    for (var i = 0; i < results.length; i++) {
+        newalbum.push(results[i]);
+        nexturi = '';
+        if (i < results.length - 1) {
+            nexturi = results[i + 1].album.uri;
+        }
+        if (results[i].album.uri != nexturi) {
+            //        console.log(i);
+
+            tableid = 'art' + i;
+            html += '<li data-role="list-divider" data-theme="d"><a href="#" onclick="return showAlbum(\'' + results[i].album.uri + '\');">';
+            html += '<img id="' + targetmin + '-cover-' + i + '" class="artistcover" width="40" height="40" />';
+            html += '<p class="artistname">' + results[i].album.name + '</p><p>';
+            for (j = 0; j < results[i].album.artists.length; j++) {
+                html += results[i].album.artists[j].name;
+                html += (j == results[i].album.artists.length - 1) ? '' : ' / ';
+                //stop after 3
+                if (j > 2) {
+                    child += '...';
+                    break;
+                }
+            }
+            html += '</p></a></li>';
+            //            html += '<ul data-role="listview" data-inset="true" data-icon="false" class="" id="' + tableid + '"></ul>';
+            for (j = 0; j < newalbum.length; j++) {
+                popupData[newalbum[j].uri] = newalbum[j];
+                html += '<li id="' + newalbum[j].uri + '"><a href="#" onclick="return popupTracks(event, \'' + uri + '\',\'' + newalbum[j].uri + '\');">';
+                html += '<p class="pright">' + timeFromSeconds(newalbum[j].length / 1000) + '</p><h1>' + newalbum[j].name + '</h1></a></li>';
+            };
+            artistname = results[i].artists[0].name;
+            getCover(artistname, results[i].album.name, target + '-cover-' + i, 'small');
+            //            customTracklists[results[i].album.uri] = newalbum;
+            newalbum = [];
+        }
+    }
+    //console.log(html);
+    tableid = "#" + tableid;
+    $(target).html(html);
+    $(target).attr('data', uri);
+    $(target).listview('refresh');
+}
+
 //process updated playlist to gui
 function playlisttotable(pl, table, uri) {
     var tmp = '';
@@ -121,7 +202,7 @@ function playlisttotable(pl, table, uri) {
         // <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
         for (var j = 0; j < pl[i].artists.length; j++) {
             child += pl[i].artists[j].name;
-            child += (j == pl[i].artists.length - 1) ?  '' : ' / ';
+            child += (j == pl[i].artists.length - 1) ? '' : ' / ';
             //stop after 3
             if (j > 2) {
                 child += '...';
@@ -130,7 +211,7 @@ function playlisttotable(pl, table, uri) {
         }
         child += ' / <em>' + pl[i].album.name + '</em></p>';
 
-//        child += '<p>' + pl[i].album.name + '</p>';
+        //        child += '<p>' + pl[i].album.name + '</p>';
         child += '</a></li>';
         tmp += child;
     };
@@ -139,30 +220,7 @@ function playlisttotable(pl, table, uri) {
     $(table).attr('data', uri);
 
     //create (for new tables)
-//    $(table).listview().trigger("create");
+    //    $(table).listview().trigger("create");
-    //refresh
-    $(table).listview('refresh');
-}
-
-function albumtrackstotable(pl, table, uri) {
-    var tmp = '';
-    $(table).empty();
-    var child = '';
-    for (var i = 0; i < pl.length; i++) {
-        popupData[pl[i].uri] = pl[i];
-        child = '<li><a href="#" onclick="return popupTracks(event, \'' + uri + '\',\'' + pl[i].uri + '\');">';
-        child += '<p style="float:right; display: inline;">' + timeFromSeconds(pl[i].length / 1000) + 
-            '</p><h1>' + pl[i].name + '</h1></a></li>';
-        tmp += child;
-    };
-    $(table).html(tmp);
-    $(table).attr('data', uri);
-    //set click handlers
-    /*   $(table + ' .name').click(function() {
-    return playtrack(this.id, uri)
-    });*/
-    //create (for new tables)
-    $(table).listview().trigger("create");
     //refresh
     $(table).listview('refresh');
 }

webclient/js/gui.js

@@ -1,21 +1,23 @@
 /* gui interactions here
- * set- functions only set/update the gui elements
+* set- functions only set/update the gui elements
- * do- functions interact with the server
+* do- functions interact with the server
- * show- functions do both
+* show- functions do both
- */
+*/
 /********************
  * Song Info Sreen
  ********************/
 function resetSong() {
-    pauseTimer();
+    if (!posChanging) {
-    setPlayState(false);
+        pauseTimer();
-    setPosition(0);
+        setPlayState(false);
-    var data = new Object;
+        setPosition(0);
-    data.name = '';
+        var data = new Object;
-    data.artists = '';
+        data.name = '';
-    data.length = 0;
+        data.artists = '';
-    data.uri = '';
+        data.length = 0;
-    setSongInfo(data);
+        data.uri = '';
+        setSongInfo(data);
+    }
 }
 
 function expandSonginfo() {
@@ -61,7 +63,7 @@ function setSongInfo(data) {
             artiststext += ', ';
         }
     }
-    
+
     if (data.album) {
         $("#modalalbum").html('Album: <a href="#" onclick="return showAlbum(\'' + data.album.uri + '\');">' + data.album.name + '</a>');
     }
@@ -81,10 +83,7 @@ function setSongInfo(data) {
     $("#songlength").html(timeFromSeconds(data.length / 1000));
 
     resizeSonginfo();
-
+    $('#currenttable li').each(function() {
-    $('#currenttable li').each(
-    function() {
-        //console.log(this.className);
         $(this).removeClass("currenttrack");
         if (this.id == data.uri) {
             $(this).addClass('currenttrack');
@@ -97,8 +96,9 @@ function setSongInfo(data) {
  * @param {Object} listuri
  * @param {Object} trackuri
  */
-function popupTracks (e, listuri, trackuri) {
+function popupTracks(e, listuri, trackuri) {
-    if (!e) var e = window.event;
+    if (!e)
+        var e = window.event;
     //console.log('list: ' + listuri + ', track: ' + trackuri);
     $('#popupTrackName').html(popupData[trackuri].name);
     $('#popupAlbumName').html(popupData[trackuri].album.name);
@@ -107,35 +107,47 @@ function popupTracks (e, listuri, trackuri) {
     if (popupData[trackuri].artists.length == 1) {
 
         //this doesnt work
-//        child += '<a href="#" onclick="showArtist(\'' +popupData[trackuri].artists[0].uri + '\');">Show Artist <span class="popupArtistName">' + popupData[trackuri].artists[0].name + '</span></a>';
+        //        child += '<a href="#" onclick="showArtist(\'' +popupData[trackuri].artists[0].uri + '\');">Show Artist <span class="popupArtistName">' + popupData[trackuri].artists[0].name + '</span></a>';
-    $('#popupTracksLv').append($('<li/>', { 'id': "popupArtistsLi"})
+        $('#popupTracksLv').append($('<li/>', {
-        .append($('<a/>', {
+            'id' : "popupArtistsLi"
-            'href': '#', 
+        }).append($('<a/>', {
-            'onclick': 'showArtist(\'' +popupData[trackuri].artists[0].uri + '\');',
+            'href' : '#',
-            'text': 'Show Artist '  
+            'onclick' : 'showArtist(\'' + popupData[trackuri].artists[0].uri + '\');',
+            'text' : 'Show Artist '
         }).append($('<span/>', {
-            'class': 'popupArtistName',
+            'class' : 'popupArtistName',
-            'text': popupData[trackuri].artists[0].name
+            'text' : popupData[trackuri].artists[0].name
         }))));
-        
+
         $('#popupArtistsDiv').hide();
-//        console.log(child);
+        //        console.log(child);
-//        $('#popupArtistsLi').html(child).show();
+        //        $('#popupArtistsLi').html(child).show();
     } else {
-        for (var j = 0; j < popupData[trackuri].artists.length; j++) {                
+        for (var j = 0; j < popupData[trackuri].artists.length; j++) {
-                child += '<li><a href="#" onclick="showArtist(\'' + popupData[trackuri].artists[j].uri + '\');"><span class="popupArtistName">' + popupData[trackuri].artists[j].name + '</span></a></li>';
+            child += '<li><a href="#" onclick="showArtist(\'' + popupData[trackuri].artists[j].uri + '\');"><span class="popupArtistName">' + popupData[trackuri].artists[j].name + '</span></a></li>';
         }
         //console.log(child);
         $('#popupArtistsLi').hide();
         $('#popupArtistsLv').html(child).show();
         $('#popupArtistsDiv').show();
         $('#popupArtistsLv').listview("refresh");
-     }
+    }
-    $('#popupTracksLv') .listview().trigger("create");
+    var hash = document.location.hash.split('?');
+    var divid = hash[0].substr(1);
+    if (divid == 'current') {
+        $("#liaddtobottom").hide();
+    } else {
+        $("#liaddtobottom").show();
+    }
+
+    $('#popupTracksLv').listview().trigger("create");
 
     $('#popupTracksLv').listview('refresh');
 
-    $('#popupTracks').data("list", listuri).data("track", trackuri).popup("open", { x: e.pageX, y: e.pageY } );
+    $('#popupTracks').data("list", listuri).data("track", trackuri).popup("open", {
+        x : e.pageX,
+        y : e.pageY
+    });
     return false;
 }
 
@@ -210,7 +222,9 @@ function initSocketevents() {
     });
 
     mopidy.on("event:volumeChanged", function(data) {
-        setVolume(data["volume"]);
+        if (!volumeChanging) {
+            setVolume(data["volume"]);
+        }
     });
 
     mopidy.on("event:playbackStateChanged", function(data) {
@@ -239,10 +253,10 @@ function initSocketevents() {
  * initialize software
  **********************/
 $(document).ready(function() {
-//$(document).bind("pageinit", function() {
+    //$(document).bind("pageinit", function() {
 
     $(window).hashchange();
-    
+
     // Connect to server
     mopidy = new Mopidy();
     //initialize events
@@ -254,19 +268,18 @@ $(document).ready(function() {
         switchContent("playlists");
     }
 
-
     //  $("#songinfo").resize(resizeSonginfo());
     initgui = false;
     window.onhashchange = locationHashChanged;
     // Log all events
     mopidy.on(function() {
-    //    console.log(arguments);
+        //    console.log(arguments);
     });
-    
+
     //update gui status every x seconds from mopdidy
     setInterval(updateTimer, STATUS_TIMER);
-    
+
-        //only show backbutton if in UIWebview
+    //only show backbutton if in UIWebview
     if (window.navigator.standalone) {
         $("#btback").show();
     } else {
@@ -283,7 +296,7 @@ function switchContent(divid, uri) {
     if (uri) {
         hash += "?" + uri;
     }
-//    $.mobile.changePage("#" + hash);
+    //    $.mobile.changePage("#" + hash);
     location.hash = "#" + hash;
 }
 
@@ -291,7 +304,7 @@ function switchContent(divid, uri) {
 function updateStatusOfAll() {
     mopidy.playback.getCurrentTrack().then(processCurrenttrack, console.error);
     mopidy.playback.getTimePosition().then(processCurrentposition, console.error);
-//TODO check offline?
+    //TODO check offline?
 }
 
 //update everything as if reloaded
@@ -307,42 +320,42 @@ function updateStatusOfAll() {
 }
 
 function locationHashChanged() {
-        var hash = document.location.hash.split('?');
+    var hash = document.location.hash.split('?');
-        //remove #
+    //remove #
-        var divid = hash[0].substr(1);
+    var divid = hash[0].substr(1);
-        var uri = hash[1];
+    var uri = hash[1];
-        $('#navcurrent a').removeClass('ui-state-active ui-state-persist ui-btn-active');
+    $('#navcurrent a').removeClass('ui-state-active ui-state-persist ui-btn-active');
-        $('#navplaylists a').removeClass('ui-state-active ui-state-persist ui-btn-active');
+    $('#navplaylists a').removeClass('ui-state-active ui-state-persist ui-btn-active');
-        $('#navsearch a').removeClass('ui-state-active ui-state-persist ui-btn-active');
+    $('#navsearch a').removeClass('ui-state-active ui-state-persist ui-btn-active');
-//        alert(divid);
+    //        alert(divid);
-        switch(divid) {
+    switch(divid) {
-            case 'current':
+        case 'current':
-                $('#navcurrent a').addClass('ui-state-active ui-state-persist ui-btn-active');
+            $('#navcurrent a').addClass('ui-state-active ui-state-persist ui-btn-active');
-                break;
+            break;
-            case 'playlists':
+        case 'playlists':
-                $('#navplaylists a').addClass('ui-state-active ui-state-persist ui-btn-active');
+            $('#navplaylists a').addClass('ui-state-active ui-state-persist ui-btn-active');
-                break;
+            break;
-            case 'search':
+        case 'search':
-                $('#navsearch a').addClass( $.mobile.activeBtnClass );
+            $('#navsearch a').addClass($.mobile.activeBtnClass);
-                $("#searchinput").focus();
+            $("#searchinput").focus();
-                if (customTracklists['allresultscache'] == '') {
+            if (customTracklists['allresultscache'] == '') {
-                    initSearch($('#searchinput').val());
+                initSearch($('#searchinput').val());
-                }
+            }
-                break;
+            break;
-            case 'artists':
+        case 'artists':
-                if (uri != '') {
+            if (uri != '') {
-                    showArtist(uri);
+                showArtist(uri);
-                }
+            }
-                break;
+            break;
-            case 'albums':
+        case 'albums':
-                if (uri != '') {
+            if (uri != '') {
-                    showAlbum(uri);
+                showAlbum(uri);
-                }
+            }
-                break;
+            break;
-        }
-        // Set the page title based on the hash.
-        document.title = PROGRAM_NAME;
-        $('.pane').hide();
-        $('#' + divid + 'pane').show();
-        return false;
     }
+    // Set the page title based on the hash.
+    document.title = PROGRAM_NAME;
+    $('.pane').hide();
+    $('#' + divid + 'pane').show();
+    return false;
+}

webclient/js/lastfm.js

@@ -23,12 +23,9 @@ $(window).load(function() {
 
 function getCover(nwartist, nwalbum, image, size) {
         $(image).attr('src', '../images/icons/cd_32x32.png');
-//        console.log(nwartist + ' - ' + nwalbum + ' - ' + image);
         lastfm.album.getInfo({artist: nwartist, album: nwalbum}, {success: function(data){
-//            console.log(data);
             for (var i = 0; i < data.album.image.length; i++) {
                 if ( data.album.image[i]['size'] == size) {
- //                   console.log(image + ' - ' + data.album.image[i]['#text']);
                     $(image).attr('src', data.album.image[i]['#text']);
                 }
             }

webclient/js/library.js

@@ -151,7 +151,7 @@ function showAlbum(uri) {
     //fill from cache
     var pl = getTracksFromUri(uri);
     if (pl) {
-        albumtrackstotable(pl, ALBUM_TABLE, uri);
+        albumTracksToTable(pl, ALBUM_TABLE, uri);
         var albumname = getAlbum(pl);
         var artistname = getArtist(pl);
         $('#h_albumname').html(albumname);

webclient/js/process_ws.js

@@ -16,7 +16,9 @@ function processCurrenttrack(data) {
  * process results of volume
  *********************************************************/
 function processVolume(data) {
-    setVolume(data);
+    if (!volumeChanging) {
+        setVolume(data);
+    }
 }
 
 /********************************************************
@@ -84,8 +86,10 @@ function processGetPlaylists(resultArr) {
 function processGetTracklist(resultArr) {
     //cache result
     var newplaylisturi = resultArr.uri;
+    //console.log(newplaylisturi);
     playlists[newplaylisturi] = resultArr;
-    playlisttotable(playlists[newplaylisturi].tracks, PLAYLIST_TABLE, newplaylisturi);
+    resultsToTables(playlists[newplaylisturi].tracks, PLAYLIST_TABLE, newplaylisturi);
+    //    playlisttotable(playlists[newplaylisturi].tracks, PLAYLIST_TABLE, newplaylisturi);
     //    $('#playlistloader').hide();
     showLoading(false);
     scrollToTop();
@@ -96,7 +100,7 @@ function processGetTracklist(resultArr) {
  *********************************************************/
 function processCurrentPlaylist(resultArr) {
     currentplaylist = resultArr;
-    playlisttotable(resultArr, CURRENT_PLAYLIST_TABLE);
+    resultsToTables(resultArr, CURRENT_PLAYLIST_TABLE);
     mopidy.playback.getCurrentTrack().then(processCurrenttrack, console.error);
 }
 
@@ -105,35 +109,9 @@ function processCurrentPlaylist(resultArr) {
  *********************************************************/
 function processArtistResults(resultArr) {
     customTracklists[resultArr.uri] = resultArr;
-    $(ARTIST_TABLE).html('');
 
-    //break into albums and put in tables
+    resultsToTables(resultArr, ARTIST_TABLE, resultArr.uri);
-    var newalbum = [];
-    var nexturi = '';
-    var html, tableid;
     var artistname = getArtist(resultArr);
-
-    for (var i = 0; i < resultArr.length; i++) {
-        newalbum.push(resultArr[i]);
-        nexturi = '';
-        if (i < resultArr.length - 1) {
-            nexturi = resultArr[i + 1].album.uri;
-        }
-        //  console.log(i);
-        if (resultArr[i].album.uri != nexturi) {
-            tableid = 'art' + i;
-            html = '<a href="#" onclick="return showAlbum(\'' + resultArr[i].album.uri + '\');"><img id="artistcover-' + i + '" class="artistcover" width="40" height="40" />';
-            html += '<h4>' + resultArr[i].album.name + '</h4></a>';
-            html += '<ul data-role="listview" data-inset="true" data-icon="false" class="" id="' + tableid + '"></ul>';
-            tableid = "#" + tableid;
-            $(ARTIST_TABLE).append(html);
-            albumtrackstotable(newalbum, tableid, resultArr[i].album.uri);
-            getCover(artistname, resultArr[i].album.name, '#artistcover-' + i, 'small');
-            $(tableid).listview('refresh');
-            customTracklists[resultArr[i].album.uri] = newalbum;
-            newalbum = [];
-        }
-    }
     $('#h_artistname, #artistpopupname').html(artistname);
     getArtistImage(artistname, '#artistviewimage, #artistpopupimage', 'extralarge');
     showLoading(false);
@@ -144,7 +122,7 @@ function processArtistResults(resultArr) {
  *********************************************************/
 function processAlbumResults(resultArr) {
     customTracklists[resultArr.uri] = resultArr;
-    albumtrackstotable(resultArr, ALBUM_TABLE, resultArr.uri);
+    albumTracksToTable(resultArr, ALBUM_TABLE, resultArr.uri);
     var albumname = getAlbum(resultArr);
     var artistname = getArtist(resultArr);
     $('#h_albumname').html(albumname);