From 0cc9465faf06d581db95ab86a4271fca59d99904 Mon Sep 17 00:00:00 2001
From: Wouter van Wijk <woutervanwijk@gmail.com>
Date: Sun, 24 Feb 2013 21:55:30 +0100
Subject: [PATCH] no more siwtch to queue after playing a track, seperately
 scrolling playlist/tracks

---
 webclient/css/ws.css          | 42 +++++++++++++++++++++++---------
 webclient/index.html          | 12 ++++-----
 webclient/js/controls.js      |  2 +-
 webclient/js/functionsvars.js | 21 ++++++++--------
 webclient/js/gui.js           | 46 +++++++++++++++++++++++++++++------
 webclient/js/library.js       |  3 ++-
 webclient/js/process_ws.js    |  6 ++---
 7 files changed, 93 insertions(+), 39 deletions(-)

diff --git a/webclient/css/ws.css b/webclient/css/ws.css
index 860b484..d4e7bb0 100755
--- a/webclient/css/ws.css
+++ b/webclient/css/ws.css
@@ -37,7 +37,7 @@
     .pl-breakpoint.ui-grid-a .ui-block-a {
         clear: left;
     }
-    #playlisttablediv {
+    #playlisttracksdiv {
         margin-left: 10px;
     }
     /*search*/
@@ -51,6 +51,11 @@
     #btcontrols {
         display: none;
     }
+    .scroll {
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
+
 }
 
 /* tablet etc */
@@ -73,7 +78,7 @@
     }
     .srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b {
         width: 49.5%;
-    }    
+    }
 }
 
 /* phone */
@@ -100,7 +105,11 @@
     /*controls*/
     #btcontrols {
         display: block;
-    }        
+    }
+    .scroll {
+        overflow-y: auto;
+        overflow-x: auto;
+    }
 }
 
 /* phone portrait */
@@ -147,7 +156,7 @@
 }
 
 /**********************
- *  Song information 
+ *  Song information
  **********************/
 
 #infoname {
@@ -199,7 +208,7 @@
 #slidercontainer {
     margin-top: 7px;
     margin-bottom: 5px;
-    margin-right: 10px; 
+    margin-right: 10px;
     float: right;
 }
 
@@ -242,15 +251,19 @@
     display: none;
 }
 
+#playlistspane {
+    padding: 2px;
+}
+
 #artistviewimage, #albumviewcover {
     float: right;
     heigth: 90px;
 }
 
-
 /*********************
  * listviews
  ********************/
+
 .ui-li-divider {
     padding: 2px;
     padding-top: 10px;
@@ -267,8 +280,8 @@
 }
 
 .albumli {
-  padding-left: 5px;
-} 
+    padding-left: 5px;
+}
 
 .playlistactive {
     background-color: #ccc;
@@ -285,18 +298,25 @@
     margin-right: 3px;
 }
 
+.currenttrack2 {
+    background-image: url('../images/icons/play_alt_8x8.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: 4px center;
+    background-position: 6px center;
 }
 
+.currenttrack2 a {
+    margin-left: 8px;
+}
 .currenttrack a {
     margin-left: 14px;
 }
 
-
 /*******************
  * Popups
  *******************/
@@ -326,7 +346,7 @@
 }
 
 /***************
- *  common use 
+ *  common use
  ***************/
 a {
     text-decoration: none !important;
diff --git a/webclient/index.html b/webclient/index.html
index 20c3c22..fadb480 100755
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -94,7 +94,7 @@
                 </div>
             </div>
 
-            <div data-role="header" id="header" data-position="fixed" class="ui-grid-b header-breakpoint">
+            <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">
                     <span id="btback"><a href="#" onclick="return backbt();"> <img  id="backimg"src="images/icons/arrow_left_alt1_24x24.png" /></a></span>
@@ -119,11 +119,11 @@
             </div><!-- /header -->
 
             <div data-role="content" id="playlistspane" class="pane ui-grid-a pl-breakpoint">
-                <div class="ui-block-a">
-                    <ul id="playlistslist" data-icon="false" data-inset="true" data-role="listview" data-filter="true"></ul>
+                <div class="ui-block-a scroll">
+                    <ul id="playlistslist" data-icon="false" data-inset="true" data-role="listview"></ul>
                 </div>
-                <div class="ui-block-b" id="playlisttablediv">
-                    <ul data-role="listview" data-theme="c" data-icon="false" id="playlisttable" data-inset="true" data-filter="true"></ul>
+                <div class="ui-block-b scroll" id="playlisttracksdiv">
+                    <ul data-role="listview" data-theme="c" data-icon="false" id="playlisttracks" data-inset="true"></ul>
                 </div>
 
             </div><!--/playlistspane-->
@@ -180,7 +180,7 @@
             </div>
             <!-- search div -->
 
-            <div data-role="footer" data-position="fixed">
+            <div data-role="footer" data-tap-toggle="false" data-position="fixed">
                 <div data-role="navbar" data-iconpos="left">
                     <ul>
                         <li id="navplaylists">
diff --git a/webclient/js/controls.js b/webclient/js/controls.js
index 6b66683..346c6ad 100644
--- a/webclient/js/controls.js
+++ b/webclient/js/controls.js
@@ -29,7 +29,7 @@ function playTrack(addtobottom) {
         return false;
     }
 
-    switchContent('current', uri);
+ //   switchContent('current', uri);
 
     for (var i = 0; i < tracks.length; i++) {
         if (tracks[i].uri == uri) {
diff --git a/webclient/js/functionsvars.js b/webclient/js/functionsvars.js
index ce20bda..131ece2 100755
--- a/webclient/js/functionsvars.js
+++ b/webclient/js/functionsvars.js
@@ -32,6 +32,7 @@ var songlength = 0;
 var artistshtml = '';
 var artiststext = '';
 var songname = '';
+var songdata = '';
 var newposition = 0;
 
 //array of cached playlists (not only user-playlists, also search, artist, album-playlists)
@@ -45,7 +46,7 @@ PROGRAM_NAME = 'MusicBox';
 //PROGRAM_NAME = 'Mopidy';
 ARTIST_TABLE = '#artiststable';
 ALBUM_TABLE = '#albumstable';
-PLAYLIST_TABLE = '#playlisttable';
+PLAYLIST_TABLE = '#playlisttracks';
 CURRENT_PLAYLIST_TABLE = '#currenttable';
 SEARCH_ALL_TABLE = '#allresulttable';
 SEARCH_ALBUM_TABLE = '#albumresulttable';
@@ -69,7 +70,7 @@ function scrollToTop() {
 }
 
 function scrollToTracklist() {
-    var divtop = $("#playlisttablediv").offset().top - 25;
+    var divtop = $("#playlisttracksdiv").offset().top - 25;
     $('body,html').animate({
         scrollTop : divtop
     }, 250);
@@ -209,15 +210,15 @@ function resultsToTables(results, target, uri) {
 }
 
 //process updated playlist to gui
-function playlisttotable(pl, table, uri) {
+function playlisttotable(pl, target, uri) {
     var tmp = '';
-    $(table).html('');
-
+    $(target).html('');
+    var targetmin = target.substr(1);
     var child = '';
     for (var i = 0; i < pl.length; i++) {
         popupData[pl[i].uri] = pl[i];
 
-        child = '<li id="' + pl[i].uri + '"><a href="#" onclick="return popupTracks(event, \'' + uri + '\',\'' + pl[i].uri + '\');">';
+        child = '<li id="' + targetmin + '-' + pl[i].uri + '"><a href="#" onclick="return popupTracks(event, \'' + uri + '\',\'' + pl[i].uri + '\');">';
         child += '<h1>' + pl[i].name + "</h1>";
         child += '<p>';
         child += '<span style="float: right;">' + timeFromSeconds(pl[i].length / 1000) + '</span>';
@@ -238,13 +239,13 @@ function playlisttotable(pl, table, uri) {
         tmp += child;
     };
 
-    $(table).html(tmp);
-    $(table).attr('data', uri);
+    $(target).html(tmp);
+    $(target).attr('data', uri);
 
     //create (for new tables)
-    //    $(table).listview().trigger("create");
+    //    $(target).listview().trigger("create");
     //refresh
-    $(table).listview('refresh');
+    $(target).listview('refresh');
 }
 
 function getPlaylistFromUri(uri) {
diff --git a/webclient/js/gui.js b/webclient/js/gui.js
index 1618351..0e20460 100755
--- a/webclient/js/gui.js
+++ b/webclient/js/gui.js
@@ -24,7 +24,7 @@ function expandSonginfo() {
 }
 
 function resizeSonginfo() {
-    $("#infoname").html(songname);
+    $("#infoname").html(songdata.name);
     $("#infoartist").html(artiststext);
     //bug in truncate?
     var spanwidth = $("#infoartist").width() - 38;
@@ -44,10 +44,14 @@ function resizeSonginfo() {
 }
 
 function setSongInfo(data) {
+    if (data) {
+        songdata = data;
+    } else {
+        data = songdata;
+    }
     artistshtml = '';
     artiststext = '';
-    songname = data.name;
-    if (songname == '') {
+    if (data.name == '') {
         return;
     };
 
@@ -63,7 +67,7 @@ function setSongInfo(data) {
     if (data.album) {
         $("#modalalbum").html('Album: <a href="#" onclick="return showAlbum(\'' + data.album.uri + '\');">' + data.album.name + '</a>');
     }
-    $("#modalname").html(songname);
+    $("#modalname").html(data.name);
     getCover(artiststext, data.album.name, '#infocover, #controlspopupimage', 'extralarge');
 
     var arttmp = 'Artist';
@@ -79,12 +83,37 @@ function setSongInfo(data) {
     $("#songlength").html(timeFromSeconds(data.length / 1000));
 
     resizeSonginfo();
+
     $('#currenttable li').each(function() {
         $(this).removeClass("currenttrack");
         if (this.id == 'currenttable-' + data.uri) {
             $(this).addClass('currenttrack');
         }
     });
+    $('#playlisttracks li').each(function() {
+        $(this).removeClass("currenttrack2");
+        if (this.id == 'playlisttracks-' + data.uri) {
+            $(this).addClass('currenttrack2');
+        }
+    });
+    $('#trackresulttable li').each(function() {
+        $(this).removeClass("currenttrack2");
+        if (this.id == 'trackresulttable-' + data.uri) {
+            $(this).addClass('currenttrack2');
+        }
+    });
+    $('#artiststable li').each(function() {
+        $(this).removeClass("currenttrack2");
+        if (this.id == 'trackresulttable-' + data.uri) {
+            $(this).addClass('currenttrack2');
+        }
+    });
+    $('#albumstable li').each(function() {
+        $(this).removeClass("currenttrack2");
+        if (this.id == 'trackresulttable-' + data.uri) {
+            $(this).addClass('currenttrack2');
+        }
+    });
 }
 
 /***************
@@ -248,12 +277,12 @@ function initSocketevents() {
 $(document).ready(function() {
     //$(document).bind("pageinit", function() {
     //check for websockets
-    if(!window.WebSocket) {
+    if (!window.WebSocket) {
         switchContent("playlists");
-        $('#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>');  
+        $('#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;
     }
-    
+
     $(window).hashchange();
 
     // Connect to server
@@ -284,8 +313,11 @@ $(document).ready(function() {
         $("#btback").hide();
     }
 
+    $('.scroll').height($(window).height() - 100);
+
     $(window).resize(function() {
         resizeSonginfo();
+        $('.scroll').height($(window).height() - 100);
     });
 });
 
diff --git a/webclient/js/library.js b/webclient/js/library.js
index ffa89c4..c427a56 100644
--- a/webclient/js/library.js
+++ b/webclient/js/library.js
@@ -85,6 +85,7 @@ function processSearchResults(resultArr) {
 
     $('#expandsearch').show();
     playlisttotable(results.tracks, SEARCH_TRACK_TABLE, 'trackresultscache');
+    setSongInfo();
     showLoading(false);
 }
 
@@ -111,7 +112,7 @@ function getCurrentPlaylist() {
  ********************************************************/
 function showTracklist(uri) {
     $(PLAYLIST_TABLE).empty();
-    $('#playlisttablediv').show();
+    $('#playlisttracksdiv').show();
     showLoading(true);
 
     var pl = getPlaylistFromUri(uri);
diff --git a/webclient/js/process_ws.js b/webclient/js/process_ws.js
index 22796c2..3197bd7 100755
--- a/webclient/js/process_ws.js
+++ b/webclient/js/process_ws.js
@@ -86,8 +86,7 @@ function processGetTracklist(resultArr) {
     var newplaylisturi = resultArr.uri;
     playlists[newplaylisturi] = resultArr;
     resultsToTables(playlists[newplaylisturi].tracks, PLAYLIST_TABLE, newplaylisturi);
-    //    playlisttotable(playlists[newplaylisturi].tracks, PLAYLIST_TABLE, newplaylisturi);
-    //    $('#playlistloader').hide();
+    setSongInfo();
     showLoading(false);
     scrollToTracklist();
 }
@@ -111,6 +110,7 @@ function processArtistResults(resultArr) {
     var artistname = getArtist(resultArr);
     $('#h_artistname, #artistpopupname').html(artistname);
     getArtistImage(artistname, '#artistviewimage, #artistpopupimage', 'extralarge');
+    setSongInfo();
     showLoading(false);
 }
 
@@ -127,6 +127,6 @@ function processAlbumResults(resultArr) {
     $('#coverpopupalbumname').html(albumname);
     $('#coverpopupartist').html(artistname);
     getCover(artistname, albumname, '#albumviewcover, #coverpopupimage', 'extralarge');
+    setSongInfo();
     showLoading(false);
-    //    $('#albumsloader').hide();
 }