added track shuffle, coverart cleanup

webclient/css/ws.css

@@ -289,8 +289,7 @@ a {
     height: 50px !important;
 }
 
-
-#controlspopupimage, #coverpopupimage, #artistpopupimage {
+#buttons, #controlspopupimage, #coverpopupimage, #artistpopupimage {
     display: block;
     margin-left: auto;
     margin-right: auto 

webclient/index.html

@@ -44,29 +44,30 @@
                 <h4 id="coverpopupartist">bbb</h4>
                 <img id="coverpopupimage" src="" />
             </div>
-            
+
             <div id="artistpopup" data-role="popup" data-theme="c">
                 <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
                 <h4 id="artistpopupname">bbb</h4>
                 <img id="artistpopupimage" src="" />
             </div>
-            
+
             <div id="controlsmodal" data-role="popup" data-theme="c">
                 <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
-                <p class="">
+                <p id="buttons">
                     <a href="#" onclick="doRandom(); return false"><img src="images/icons/loop_alt2_16x14.png" alt="" id="randombt" /></a>
                     &nbsp; <a href="#" onclick="doRepeat(); return false"><img src="images/icons/reload_12x14.png" id="repeatbt" alt="" /></a>
-                    <div>
-                        <a href="#" onclick="doMute(); return false;"><img id="mutebt" src="images/icons/volume_16x12.png" alt="" /></a>
-                        <label for="volumeslider" class="ui-hidden-accessible">Volume</label>
-                        <input id="volumeslider" name="volumeslider" data-mini="true" type="range" min="0" value="0" max="100" onchange="doVolume(this.value);" />
-                    </div>
+                    &nbsp; <a href="#" onclick="doShuffle(); return false" title="Shuffle"><img src="images/icons/fork_21x24.png" id="shufflebt" alt="" /></a>
                 </p>
+                <div>
+                    <a href="#" onclick="doMute(); return false;"><img id="mutebt" src="images/icons/volume_16x12.png" alt="" /></a>
+                    <label for="volumeslider" class="ui-hidden-accessible">Volume</label>
+                    <input id="volumeslider" name="volumeslider" data-mini="true" type="range" min="0" value="0" max="100" onchange="doVolume(this.value);" />
+                </div>
                 <h3 id="modalname"></h3>
                 <h4 id="modalartist"></h4>
                 <h4 id="modalalbum"></h4>
                 <img id="controlspopupimage" src="" />
-                
+
             </div>
 
             <div data-role="popup" data-transition="none" data-theme="c" id="popupTracks">
@@ -79,7 +80,7 @@
                             <a href="#" onclick="return playTrack();">Play Track <span id="popupTrackName"></span></a>
                         </li>
                         <li id="liaddtobottom">
-                        <a href="#" onclick="return playTrack(true);">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>
@@ -104,11 +105,7 @@
                 </div>
 
                 <div id="songinfo" class=" ui-block-b">
-                    <a href="#controlsmodal" data-rel="popup">
-                    <img id="infocover" width="36" height="36"></img>
-                    <div id="infoname"></div>
-                    <div id="infoartist"></div>
-                    </a>
+                    <a href="#controlsmodal" data-rel="popup"> <img id="infocover" width="36" height="36"></img> <div id="infoname"></div> <div id="infoartist"></div> </a>
                 </div>
 
                 <div id="slidercontainer" class="ui-block-c">
@@ -213,7 +210,7 @@
         <script src="js/functionsvars.js"></script>
         <script src="js/process_ws.js"></script>
 
-                <!-- use lastfm -->
+        <!-- use lastfm -->
         <script type="text/javascript" src="js/lastfm.api.md5.js"></script>
         <script type="text/javascript" src="js/lastfm.api.js"></script>
         <script type="text/javascript" src="js/lastfm.api.cache.js"></script>

webclient/js/controls.js

@@ -8,8 +8,6 @@ function playTrack(addtobottom) {
     //function playtrack(uri, playlisturi) {
     playlisturi = $('#popupTracks').data("list");
     uri = $('#popupTracks').data("track");
-    //console.log(uri);
-    //console.log(playlisturi);
     var trackslist = new Array();
     var track;
     switchContent('current', uri);
@@ -24,9 +22,11 @@ function playTrack(addtobottom) {
     } else {
         tracks = currentplaylist;
     }
-    
-    if (addtobottom) { return false;}
-    
+
+    if (addtobottom) {
+        return false;
+    }
+
     mopidy.playback.stop(true);
 
     for (var i = 0; i < tracks.length; i++) {
@@ -47,6 +47,12 @@ function playTrack(addtobottom) {
  * Buttons
  */
 
+function doShuffle() {
+    mopidy.playback.stop(true);
+    mopidy.tracklist.shuffle();
+    mopidy.playback.play();
+}
+
 /* Toggle state of play button */
 function setPlayState(nwplay) {
     if (nwplay) {
@@ -180,7 +186,6 @@ function setPosition(pos) {
 
 function setVolume(value) {
     var oldval = initgui;
-    console.log('volume: ' + value);
     initgui = true;
     $("#volumeslider").val(value).slider('refresh');
     initgui = oldval;
@@ -238,4 +243,3 @@ function initTimer() {
 function pauseTimer() {
     clearInterval(posTimer);
 }
-

webclient/js/functionsvars.js

@@ -63,7 +63,13 @@ STATUS_TIMER = 10000;
  */
 function scrollToTop() {
     var divtop = 0;
-    //    console.log(divtop);
+    $('body,html').animate({
+        scrollTop : divtop
+    }, 250);
+}
+
+function scrollToTracklist() {
+    var divtop = $("#playlisttablediv").offset().top - 25;
     $('body,html').animate({
         scrollTop : divtop
     }, 250);
@@ -133,8 +139,6 @@ function resultsToTables(results, target, uri) {
             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" />';
@@ -161,7 +165,6 @@ function resultsToTables(results, target, uri) {
             newalbum = [];
         }
     }
-    //console.log(html);
     tableid = "#" + tableid;
     $(target).html(html);
     $(target).attr('data', uri);
@@ -175,24 +178,6 @@ function playlisttotable(pl, table, uri) {
 
     var child = '';
     for (var i = 0; i < pl.length; i++) {
-        /*        var child = '<li><a href="#" class="name" id="' + pl[i].uri + '"><h2>' + pl[i].name + "</h2></a>";
-         child += '<a href="#" class="time" id="' + pl[i].uri + '"><h2 class="ui-li-aside">' + timeFromSeconds(pl[i].length / 1000) + '</h2></a>';
-         //   console.log(i);
-         child += '<h4>';
-         for (var j = 0; j < pl[i].artists.length; j++) {
-         child += '<a href="#" class="artist" id="' + pl[i].artists[j].uri + '">' + pl[i].artists[j].name + "</a>";
-         //stop after 3
-         if (j > 2) {
-         child += '...';
-         break;
-         }
-         }
-         //        child += '</a>';
-         child += ' / <a href="#" class="album" id="' + pl[i].album.uri + '">' + pl[i].album.name + '</a></h4>';
-         child += '</li>';
-         //console.log(child);
-         tmp += child;
-         */
         popupData[pl[i].uri] = pl[i];
 
         child = '<li id="' + pl[i].uri + '"><a href="#" onclick="return popupTracks(event, \'' + uri + '\',\'' + pl[i].uri + '\');">';

webclient/js/gui.js

@@ -99,7 +99,6 @@ function setSongInfo(data) {
 function popupTracks(e, listuri, trackuri) {
     if (!e)
         var e = window.event;
-    //console.log('list: ' + listuri + ', track: ' + trackuri);
     $('#popupTrackName').html(popupData[trackuri].name);
     $('#popupAlbumName').html(popupData[trackuri].album.name);
     var child = "";
@@ -120,13 +119,11 @@ function popupTracks(e, listuri, trackuri) {
         }))));
 
         $('#popupArtistsDiv').hide();
-        //        console.log(child);
         //        $('#popupArtistsLi').html(child).show();
     } else {
         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>';
         }
-        //console.log(child);
         $('#popupArtistsLi').hide();
         $('#popupArtistsLv').html(child).show();
         $('#popupArtistsDiv').show();
@@ -273,7 +270,6 @@ $(document).ready(function() {
     window.onhashchange = locationHashChanged;
     // Log all events
     mopidy.on(function() {
-        //    console.log(arguments);
     });
 
     //update gui status every x seconds from mopdidy

webclient/js/library.js

@@ -114,12 +114,11 @@ function showTracklist(uri) {
     showLoading(true);
 
     var pl = getPlaylistFromUri(uri);
-    //    console.log (pl);
     //load from cache
     if (pl) {
         playlisttotable(pl.tracks, PLAYLIST_TABLE, uri);
     }
-    scrollToTop();
+    scrollToTracklist();
     //lookup recent tracklist
     mopidy.playlists.lookup(uri).then(processGetTracklist, console.error);
     return false;

webclient/js/process_ws.js

@@ -41,14 +41,12 @@ function processRandom(data) {
 function processCurrentposition(data) {
     var pos = parseInt(data);
     setPosition(pos);
-    // console.log('pos:' + pos);
 }
 
 /********************************************************
  * process results playstate
  *********************************************************/
 function processPlaystate(data) {
-    // console.log(data);
     if (data == 'playing') {
         setPlayState(true);
         resumeTimer();
@@ -86,13 +84,12 @@ function processGetPlaylists(resultArr) {
 function processGetTracklist(resultArr) {
     //cache result
     var newplaylisturi = resultArr.uri;
-    //console.log(newplaylisturi);
     playlists[newplaylisturi] = resultArr;
     resultsToTables(playlists[newplaylisturi].tracks, PLAYLIST_TABLE, newplaylisturi);
     //    playlisttotable(playlists[newplaylisturi].tracks, PLAYLIST_TABLE, newplaylisturi);
     //    $('#playlistloader').hide();
     showLoading(false);
-    scrollToTop();
+    scrollToTracklist();
 }
 
 /********************************************************