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 @@ -
'; child += '' + timeFromSeconds(pl[i].length / 1000) + ''; @@ -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: ' + data.album.name + ''); } - $("#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('
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.
'); + $('#playlistspane').html('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.
'); 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(); }