small improvements

webclient/css/ws.css

@@ -319,7 +319,7 @@
 }
 
 #playlistslist li a {
-    padding: 5px;
+    padding: 10px;
 }
 
 #playlistslist, #playlisttracks {

webclient/css/ws.css.bk

@@ -0,0 +1,431 @@
+/*****
+ * Mopidy Webclient CSS
+ * (c)
+ */
+
+/****************************
+ *  Responsive stuff
+ *  * iphone 3 20em
+ *    landscape 30
+ * iphone 4 40em
+ *    landscape 60
+ * ipad landsc 64
+ *    portr 48
+ ****************************/
+
+@media all and (min-width: 40.1em) {
+    /*header*/
+    .header-breakpoint.ui-grid-b .ui-block-a {
+        width: 30%;
+    }
+    .header-breakpoint.ui-grid-b .ui-block-b {
+        width: 30%;
+    }
+    .header-breakpoint.ui-grid-b .ui-block-c {
+        width: 30.1%;
+    }
+    /*playlists*/
+    .pl-breakpoint.ui-grid-a .ui-block-a {
+        width: 32.95%;
+    }
+    .pl-breakpoint.ui-grid-a .ui-block-b {
+        width: 65.2%;
+    }
+    .pl-breakpoint.ui-grid-a .ui-block-a {
+        clear: left;
+    }
+    .pl-breakpoint.ui-grid-a .ui-block-a {
+        clear: left;
+    }
+    #playlisttracksdiv {
+        margin-left: 10px;
+    }
+    /*search*/
+    .srch-breakpoint.ui-grid-a .ui-block-b {
+        margin-left: .5em;
+    }
+    .srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b {
+        width: 49%;
+    }
+    .scroll {
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
+}
+
+/* tablet etc */
+@media all and (min-width: 30.1em) and (max-width: 40em) {
+    /*header*/
+    .header-breakpoint.ui-grid-b .ui-block-a {
+        width: 45.95%;
+        clear: left;
+    }
+    .header-breakpoint.ui-grid-b .ui-block-b {
+        display: none;
+        width: 0;
+    }
+    .header-breakpoint.ui-grid-b .ui-block-c {
+        width: 40%;
+    }
+    /*search*/
+    .srch-breakpoint.ui-grid-a .ui-block-b {
+        margin-left: .2em;
+    }
+    .srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b {
+        width: 49.5%;
+    }
+    .scroll {
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
+}
+
+/* phone */
+@media all and (max-width: 30em) {
+    /*header*/
+    .header-breakpoint.ui-grid-b .ui-block-a {
+        width: 35%;
+        clear: left;
+    }
+    .header-breakpoint.ui-grid-b .ui-block-b {
+        display: none;
+    }
+    .header-breakpoint.ui-grid-b .ui-block-c {
+        width: 33%;
+    }
+    /*playlists*/
+    .pl-breakpoint .ui-block-a, .pl-breakpoint .ui-block-b {
+        width: 100%;
+    }
+    /*search*/
+    .srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b {
+        width: 100%;
+    }
+    #playlistspane, .scroll {
+        overflow-y: auto;
+        overflow-x: auto;
+        width: 100%;
+        heigth: 100%;
+    }
+}
+
+/* phone portrait */
+@media all and (max-width: 20em) {
+    .header-breakpoint.ui-grid-b .ui-block-c {
+        display: none;
+    }
+    #playlistspane, .scroll {
+        overflow-y: auto;
+        overflow-x: auto;
+        width: 100%;
+        heigth: 100%;
+    }
+}
+
+/***********
+ * Header & controls
+ */
+#header {
+    height: 50px !important;
+}
+
+#controldiv {
+    height: 30px;
+/*    width: 245px; */
+    width: 200px;
+    margin-top: -3px;
+    margin-left: -5px;
+    display: inline;
+}
+
+#controldiv img {
+    margin-left: 20px;
+    float: left;
+}
+
+#playimg {
+    margin-top: 12px;
+}
+
+#nextimg, #previmg {
+    margin-top: 16px;
+}
+
+#backimg {
+    margin-top: 16px;
+}
+
+#controlsimg {
+    margin-top: 16px;
+}
+
+/**********************
+ *  Song information
+ **********************/
+
+#infoname {
+    overflow: hidden;
+    font: bold;
+    color: #ddd;
+    font-size: 14px;
+    text-shadow: 1px 1px #555;
+}
+
+#songinfo {
+    margin-top: 10px;
+    height: 35px;
+}
+
+#infoartist {
+    overflow: hidden;
+    color: #aaa;
+    font-size: 11px;
+    text-shadow: 1px 1px #333;
+    margin: 2px;
+}
+
+#songinfo a {
+    text-decoration: none;
+}
+
+#infoartist a {
+    color: #eee;
+}
+
+#infocover {
+    float: left;
+    width: 36px;
+    heigth: 36px;
+    margin-right: 5px;
+    margin-top: -3px;
+}
+
+/***********************
+ *  Track Slider
+ ***********************/
+
+#trackslider {
+    display: inline;
+    width: 100%;
+}
+
+#slidercontainer {
+    margin-top: 7px;
+    margin-bottom: 5px;
+    margin-right: 10px;
+    float: right;
+}
+
+.ui-slider-track {
+    margin-left: 38px;
+    margin-right: 35px;
+}
+
+.ui-mobile .ui-page .ui-slider-input, .ui-mobile .ui-dialog .ui-slider-input {
+    display: none !important;
+}
+
+#songelapsed, #songlength {
+    font-size: 10px;
+    margin-top: 12px;
+}
+
+/************************
+ *  Volume Slider
+ ***********************/
+#mutebt {
+    float: left;
+    margin-left: 8px;
+    margin-top: 8px;
+}
+
+#volumeslider {
+    display: inline;
+}
+
+/***********
+ * pages, content
+ */
+
+#searchresults {
+    display: none;
+}
+
+#currentpane, #searchpane, #albumspane, #artistspane {
+    display: none;
+}
+
+#playlistspane {
+    padding: 4px;
+}
+
+#artistviewimage, #albumviewcover {
+    float: right;
+    heigth: 90px;
+}
+
+/*********************
+ * listviews
+ ********************/
+.table li a {
+    color: #555 !important;
+    font-size: 80% !important;
+    display: block;
+    padding: 5px;
+}
+
+.table li {
+    background-color: #f0f0f0;
+    border: 1px solid #999;
+    border-bottom: 0;
+    padding: 0px;
+}
+
+.table {
+    padding: 0;
+    list-style-type:none;
+}
+
+.table li:first-child {  
+    -moz-border-radius-topleft: 7px;
+    -moz-border-radius-topright: 7px;
+    -webkit-border-top-left-radius: 7px;
+    -webkit-border-top-right-radius: 7px;
+    border-top-right-radius: 7px;
+    border-top-left-radius: 7px;
+}
+
+.table li:last-child { 
+    -moz-border-radius-bottomleft: 7px;
+    -moz-border-radius-bottomright: 7px;
+    -webkit-border-bottom-left-radius: 7px;
+    -webkit-border-bottom-right-radius: 7px;
+    border-bottom-left-radius: 7px;
+    border-bottom-right-radius: 7px;
+    border-bottom: 1px solid #999;
+}
+
+.albumdivider h1, .table li h1 {
+    font-size: 120% !important;
+}
+
+.albumdivider {
+        background-color: #ddd !important;
+}
+
+.smalldivider {
+    font-size: 25% !important;
+    heigth: 5px !important;
+    background-color: #ddd !important;
+}
+
+#playlistslist li a {
+    padding: 9px;
+}
+
+#playlistslist, #playlisttracks {
+    margin: 0 !important;
+    padding: 0 !important;
+/*    border: 1px solid blue; */
+}
+
+.albumli {
+    padding-left: 5px;
+}
+
+.playlistactive {
+    background-color: #ccc;
+}
+
+.artistcover {
+    float: right;
+    width: 30px;
+    heigth: 30px;
+    margin-right: 3px;
+}
+
+.currenttrack2 {
+    background-image: url('../images/icons/play_alt_12x12.png');
+    background-repeat: no-repeat;
+    background-position: 4px center;
+}
+.currenttrack {
+    background-image: url('../images/icons/play_alt_16x16.png');
+    background-repeat: no-repeat;
+    background-color: #eee;
+    background-position: 6px center;
+}
+
+.currenttrack2 a {
+    margin-left: 15px;
+}
+.currenttrack a {
+    margin-left: 20px;
+}
+
+/*******************
+ * Popups
+ *******************/
+#modalalbum a, #modalartist a {
+    color: #444;
+    text-decoration: none;
+}
+
+#popupArtistName, #popupTrackName, #popupAlbumName, .popupArtistName {
+    font-style: oblique;
+}
+
+#controlsmodal, #artistpopup, #coverpopup {
+    max-width: 500px;
+    min-width: 300px;
+}
+
+#h_artistname {
+    margin-bottom: 65px;
+    margin-top: 10px;
+}
+#buttons, #controlspopupimage, #coverpopupimage, #artistpopupimage {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 5px;
+}
+
+/*dont hide clear buttons in text input */
+.ui-input-clear-hidden {
+    display:block !important;
+}    
+  
+
+/***************
+ *  common use
+ ***************/
+a {
+    text-decoration: none !important;
+}
+
+.nobreak, .btsquare {
+    display: inline !important;
+}
+
+.pull-right {
+    float: right;
+}
+
+.pull-left {
+    float: left;
+}
+
+.hidden, #allresultloader, .loader {
+    display: none;
+}
+
+.breakafter {
+    margin-right: 15px;
+}
+
+.pright {
+    display: inline;
+    margin-top: 4px;
+    float: right;
+}

webclient/js/controls.js

@@ -2,25 +2,28 @@
  * play an uri from a trackslist or the current playlist
  *********************************************************/
 function playTrack(addtobottom) {
-    showLoading(true);
+    //stop directly, for user feedback
+    if (!addtobottom) {
+        mopidy.playback.stop(true);
+    }
     $('#popupTracks').popup('close');
     $('#controlsmodal').popup('close');
+    showLoading(true);
 
     //function playtrack(uri, playlisturi) {
     playlisturi = $('#popupTracks').data("list");
     uri = $('#popupTracks').data("track");
+
     var trackslist = new Array();
     var track, tracksbefore, tracksafter;
     var tracks = getTracksFromUri(playlisturi);
     if (tracks) {
         if (!addtobottom) {
-            mopidy.playback.stop(true);
             mopidy.tracklist.clear();
         }
         $(CURRENT_PLAYLIST_TABLE).empty();
     } else {
         tracks = currentplaylist;
-        mopidy.playback.stop(true);
         for (var i = 0; i < tracks.length; i++) {
             if (tracks[i].uri == uri) {
                 track = i + 1;
@@ -44,18 +47,21 @@ function playTrack(addtobottom) {
 // first add track to be played, then the other tracks
     for (var i = 0; i < tracks.length; i++) {
         if (tracks[i].uri == uri) {
-            mopidy.tracklist.add(tracks.slice(i) );
+console.log(i);
+            mopidy.tracklist.add(tracks.slice(i, i + 1) );
             mopidy.playback.play();
-            mopidy.tracklist.add(tracks.slice(0, i), 0);
+	    //wait 2 seconds before adding the rest to give server the time to start playing
-            if (i<tracks.length) {
+	    setTimeout(function() {
-                mopidy.tracklist.add(tracks.slice(i + 1) );
+                mopidy.tracklist.add(tracks.slice(0, i), 0);
-            }
+	        if (i < tracks.length) {
+    		    mopidy.tracklist.add(tracks.slice(i + 1) );
+    	        }
+	    }, (2000));
             break;
         }
     }
 
     showLoading(false);
-
     return false;
 }
 

webclient/js/functionsvars.js

@@ -109,6 +109,7 @@ function getAlbum(pl) {
  * break up results and put them in album tables
  *********************************************************/
 function albumTracksToTable(pl, target, uri) {
+    console.log(pl);
     var tmp = '';
     var targetmin = target.substr(1);
     $(target).empty();
@@ -283,3 +284,10 @@ 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);
 }
+
+//get hash
+function getHash() {
+    var hash = document.location.hash.split('?');
+    //remove #
+    return hash[0].substr(1);
+}

webclient/js/gui.js

@@ -83,7 +83,8 @@ function setSongInfo(data) {
     }
     artistshtml = '';
     artiststext = '';
-    if (data.name == '') {
+
+    if ( !data.name || (data.name == '')) {
         return;
     };
 
@@ -96,10 +97,12 @@ function setSongInfo(data) {
         }
     }
 
+
     if (data.album) {
         $("#modalalbum").html('Album: <a href="#" onclick="return showAlbum(\'' + data.album.uri + '\');">' + data.album.name + '</a>');
     }
     $("#modalname").html(data.name);
+
     getCover(artiststext, data.album.name, '#infocover, #controlspopupimage', 'extralarge');
 
     var arttmp = 'Artist';
@@ -192,9 +195,8 @@ function popupTracks(e, listuri, trackuri) {
         //  this makes the viewport of the window resize somehow
         $('#popupArtistsLv').listview("refresh");
     }
-    var hash = document.location.hash.split('?');
+    var hash = getHash();
-    var divid = hash[0].substr(1);
+    if (hash == 'current') {
-    if (divid == 'current') {
         $("#liaddtobottom").hide();
     } else {
         $("#liaddtobottom").show();
@@ -313,7 +315,7 @@ function initSocketevents() {
 $(document).ready(function() {
     //check for websockets
     if (!window.WebSocket) {
-        switchContent("playlists");
+        switchContent("current");
         $('#playlistspane').html('<h2>Old Browser</h2><p>Sorry. Your browser isn\'t modern enough for this webapp. Modern versions of Chrome, Firefox, Safari all will do. Maybe Opera and Internet Explorer 10 also work, but it\'s not tested.</p>');
         exit;
     }
@@ -328,7 +330,7 @@ $(document).ready(function() {
     resetSong();
 
     if (location.hash.length < 2) {
-        switchContent("playlists");
+        switchContent("current");
     }
 
     initgui = false;
@@ -389,16 +391,15 @@ function updateStatusOfAll() {
 
 function locationHashChanged() {
     var hash = document.location.hash.split('?');
-    //remove #
-    var divid = hash[0].substr(1);
     var uri = hash[1];
+    
     $('#navcurrent 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');
     $('.pane').hide();
-    $('#' + divid + 'pane').show();
+    $('#' + getHash() + 'pane').show();
 
-    switch(divid) {
+    switch(hash) {
         case 'current':
             $('#navcurrent a').addClass('ui-state-active ui-state-persist ui-btn-active');
             break;

webclient/js/library.js

@@ -41,13 +41,14 @@ function initSearch() {
  * process results of a search
  *********************************************************/
 function processSearchResults(resultArr) {
+        console.log(resultArr);
+
     $(SEARCH_TRACK_TABLE).empty();
     $(SEARCH_ARTIST_TABLE).empty();
     $(SEARCH_ALBUM_TABLE).empty();
     //get the right result
-    // 0 = older raspberry 1 = dev.
+    // 0 = mopidy 0.13 1 = mopidy 0.12.
-    //    var results = resultArr[0];
+    var results = resultArr[0];
-    var results = resultArr[1];
     var tracks = (results.tracks) ? results.tracks : '';
     customTracklists['trackresultscache'] = tracks;
     var artists = (results.artists) ? results.artists : '';

webclient/js/process_ws.js

@@ -109,6 +109,7 @@ function processCurrentPlaylist(resultArr) {
  * process results of an artist lookup
  *********************************************************/
 function processArtistResults(resultArr) {
+    console.log(resultArr);
     customTracklists[resultArr.uri] = resultArr;
 
     resultsToTables(resultArr, ARTIST_TABLE, resultArr.uri);
@@ -123,6 +124,7 @@ function processArtistResults(resultArr) {
  * process results of an album lookup
  *********************************************************/
 function processAlbumResults(resultArr) {
+    console.log(resultArr);
     customTracklists[resultArr.uri] = resultArr;
     albumTracksToTable(resultArr, ALBUM_TABLE, resultArr.uri);
     var albumname = getAlbum(resultArr);