From 0ee1f46d68bb09234236bfd1933d5c4aee3b4404 Mon Sep 17 00:00:00 2001 From: Wouter van Wijk Date: Wed, 6 Mar 2013 00:52:10 +0100 Subject: [PATCH] much faster much faster listviews, by bypassing jqm; much faster playing of a track, by first adding the track and then the rest of the list --- webclient/css/ws.css | 77 ++++++++++++++++++++++++++--------- webclient/index.html | 25 ++++++++---- webclient/js/controls.js | 37 +++++++++++------ webclient/js/functionsvars.js | 20 +++++---- webclient/js/gui.js | 34 ++++++++-------- webclient/js/library.js | 24 ++++++----- webclient/js/process_ws.js | 2 +- 7 files changed, 143 insertions(+), 76 deletions(-) diff --git a/webclient/css/ws.css b/webclient/css/ws.css index 1f2740f..f956782 100755 --- a/webclient/css/ws.css +++ b/webclient/css/ws.css @@ -274,6 +274,58 @@ /********************* * 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; +} + +.table { + 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; +} + +.table li h1 { + font-size: 100% !important; +} + +.albumdivider { + background-color: #ddd !important; +} + +.smalldivider { + heigth: 10px !important; + background-color: #ddd !important; +} + +#playlistslist li a { + padding: 5px; +} #playlistslist, #playlisttracks { margin: 0 !important; @@ -281,21 +333,6 @@ /* border: 1px solid blue; */ } -.ui-li-divider { - padding: 2px; - padding-top: 10px; - padding-left: 5px; -} - -.ui-li-divider a { - height: 30px !important; -} - -.ui-li-divider a p { - color: #555 !important; - font-size: 100% !important; -} - .albumli { padding-left: 5px; } @@ -304,10 +341,6 @@ background-color: #ccc; } -.smalldivider { - heigth: 5px !important; -} - .artistcover { float: right; width: 30px; @@ -362,6 +395,12 @@ margin-bottom: 5px; } +/*dont hide clear buttons in text input */ +.ui-input-clear-hidden { + display:block !important; +} + + /*************** * common use ***************/ diff --git a/webclient/index.html b/webclient/index.html index fd53982..d56f856 100755 --- a/webclient/index.html +++ b/webclient/index.html @@ -120,39 +120,46 @@
-
    +
      -
        +
          + +

          Play Queue

          - + +

          - + +

          - +
          - +
          + +
          @@ -160,11 +167,11 @@

          Artists

          -
            +

              Albums

              -
                +
                  @@ -174,7 +181,7 @@
                  -->

                  Tracks

                  - +
                  diff --git a/webclient/js/controls.js b/webclient/js/controls.js index 346c6ad..9d06b7f 100644 --- a/webclient/js/controls.js +++ b/webclient/js/controls.js @@ -2,45 +2,58 @@ * play an uri from a trackslist or the current playlist *********************************************************/ function playTrack(addtobottom) { + showLoading(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; + var track, tracksbefore, tracksafter; var tracks = getTracksFromUri(playlisturi); if (tracks) { if (!addtobottom) { mopidy.playback.stop(true); mopidy.tracklist.clear(); } - mopidy.tracklist.add(tracks); $(CURRENT_PLAYLIST_TABLE).empty(); } else { tracks = currentplaylist; mopidy.playback.stop(true); - } - - if (addtobottom) { + for (var i = 0; i < tracks.length; i++) { + if (tracks[i].uri == uri) { + track = i + 1; + break; + } + } + for (var i = 0; i < track; i++) { + mopidy.playback.next(); + } + mopidy.playback.play(); showLoading(false); return false; } - // switchContent('current', uri); + if (addtobottom) { + mopidy.tracklist.add(tracks); + showLoading(false); + return false; + } +// first add track to be played, then the other tracks for (var i = 0; i < tracks.length; i++) { if (tracks[i].uri == uri) { - track = i + 1; + mopidy.tracklist.add(tracks.slice(i) ); + mopidy.playback.play(); + mopidy.tracklist.add(tracks.slice(0, i), 0); + if (i'; html += '

                  ' + newalbum[0].name + "

                  "; html += '

                  '; @@ -184,9 +187,9 @@ function resultsToTables(results, target, uri) { newalbum = []; } else { - html += '

                • '; - html += ''; - html += '

                  ' + results[i].album.name + '

                  '; + html += '

                • '; +// html += ''; + html += '

                  ' + results[i].album.name + '

                  '; 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) ? '' : ' / '; @@ -212,8 +215,9 @@ function resultsToTables(results, target, uri) { } tableid = "#" + tableid; $(target).html(html); + $(target).attr('data', uri); - $(target).listview('refresh'); +// $(target).listview('refresh'); } //process updated playlist to gui @@ -250,7 +254,7 @@ function playlisttotable(pl, target, uri) { $(target).attr('data', uri); //refresh - $(target).listview('refresh'); +// $(target).listview('refresh'); } function getPlaylistFromUri(uri) { diff --git a/webclient/js/gui.js b/webclient/js/gui.js index 1f00111..ba4fed7 100755 --- a/webclient/js/gui.js +++ b/webclient/js/gui.js @@ -20,9 +20,6 @@ function resetSong() { } } -function expandSonginfo() { -} - function resizeMb() { $("#infoname").html(songdata.name); $("#infoartist").html(artiststext); @@ -48,25 +45,23 @@ function resizeMb() { if (!playlistslistScroll) { playlistslistScroll = new iScroll('playlistslistdiv'); playlisttracksScroll = new iScroll('playlisttracksdiv'); - } + } } else { if (playlistslistScroll) { playlistslistScroll.destroy(); playlistslistScroll = null; playlisttracksScroll.destroy(); playlisttracksScroll = null; - } + } } } - - //set height of playlist scrollers - + if ($(window).width() > 480) { $('.scroll').height($(window).height() - 104); //jqm added something which it shouldnt (at least in this case) I guess -// $('#playlistspane').removeClass('height').height($(window).height() - 110); + // $('#playlistspane').removeClass('height').height($(window).height() - 110); $('.scroll').removeClass('height').removeClass('width'); $('#playlistspane').removeClass('height').removeClass('width'); } else { @@ -74,7 +69,7 @@ function resizeMb() { $('#playlistspane').addClass('height', '100%').addClass('width', '100%'); } - if (isMobileWebkit && ($(window).width() > 480) ) { + if (isMobileWebkit && ($(window).width() > 480)) { playlistslistScroll.refresh(); playlisttracksScroll.refresh(); } @@ -155,10 +150,12 @@ function setSongInfo(data) { } /*************** - * display popup - * @param {Object} listuri - * @param {Object} trackuri + * display popups */ +function coverPopup() { + +} + function popupTracks(e, listuri, trackuri) { if (!e) var e = window.event; @@ -221,12 +218,14 @@ function showAlbumPopup() { *****************/ function showLoading(on) { if (on) { + $("body").css("cursor", "progress"); $.mobile.loading('show', { text : 'Loading data from ' + PROGRAM_NAME + '. Please wait...', textVisible : true, theme : 'a' }); } else { + $("body").css("cursor", "default"); $.mobile.loading('hide'); } } @@ -316,7 +315,8 @@ $(document).ready(function() { //check for websockets if (!window.WebSocket) { switchContent("playlists"); - $('#playlistspane').html('

                  Old Browser

                  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; + $('#playlistspane').html('

                  Old Browser

                  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(); @@ -397,7 +397,9 @@ function locationHashChanged() { $('#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'); - // alert(divid); + $('.pane').hide(); + $('#' + divid + 'pane').show(); + switch(divid) { case 'current': $('#navcurrent a').addClass('ui-state-active ui-state-persist ui-btn-active'); @@ -425,7 +427,5 @@ function locationHashChanged() { } // Set the page title based on the hash. document.title = PROGRAM_NAME; - $('.pane').hide(); - $('#' + divid + 'pane').show(); return false; } diff --git a/webclient/js/library.js b/webclient/js/library.js index bc16365..e6cc205 100644 --- a/webclient/js/library.js +++ b/webclient/js/library.js @@ -18,6 +18,10 @@ function initSearch() { if ((value.length < 100) && (value.length > 0)) { showLoading(true); + //hide ios/android keyboard + document.activeElement.blur(); + $("input").blur(); + $('#artistresulttable').empty(); $('#albumresulttable').empty(); $('#trackresulttable').empty(); @@ -26,6 +30,7 @@ function initSearch() { delete customTracklists['albumresultscache']; delete customTracklists['trackresultscache']; $("#searchresults").hide(); + mopidy.library.search({ any : value }).then(processSearchResults, console.error); @@ -63,7 +68,7 @@ function processSearchResults(resultArr) { child += '">                  ' + artists[i].name + "
                  • "; } $(SEARCH_ARTIST_TABLE).html(child); - $(SEARCH_ARTIST_TABLE).listview('refresh'); +// $(SEARCH_ARTIST_TABLE).listview('refresh'); child = ''; @@ -81,7 +86,7 @@ function processSearchResults(resultArr) { child += '

                  '; } $(SEARCH_ALBUM_TABLE).html(child); - $(SEARCH_ALBUM_TABLE).listview('refresh'); +// $(SEARCH_ALBUM_TABLE).listview('refresh'); $('#expandsearch').show(); playlisttotable(results.tracks, SEARCH_TRACK_TABLE, 'trackresultscache'); @@ -113,12 +118,13 @@ function getCurrentPlaylist() { function showTracklist(uri) { $(PLAYLIST_TABLE).empty(); $('#playlisttracksdiv').show(); - showLoading(true); var pl = getPlaylistFromUri(uri); //load from cache if (pl) { resultsToTables(pl.tracks, PLAYLIST_TABLE, uri); + } else { + showLoading(true); } $('#playlistslist li a').each(function() { @@ -127,7 +133,6 @@ function showTracklist(uri) { $(this).addClass('playlistactive'); } }); - scrollToTracklist(); //lookup recent tracklist mopidy.playlists.lookup(uri).then(processGetTracklist, console.error); @@ -143,10 +148,10 @@ function showArtist(nwuri) { $('#controlsmodal').popup('close'); $(ARTIST_TABLE).empty(); //fill from cache - var pl = getTracksFromUri(nwuri); +// var pl = getTracksFromUri(nwuri); +//TODO cache $('#h_artistname').html(''); showLoading(true); - // $('#artistsloader').show(); mopidy.library.lookup(nwuri).then(processArtistResults, console.error); switchContent('artists', nwuri); scrollToTop(); @@ -168,17 +173,16 @@ function showAlbum(uri) { $('#h_albumartist').html(artistname); $('#coverpopupalbumname').html(albumname); $('#coverpopupartist').html(artistname); - + showLoading(false); getCover(artistname, albumname, '#albumviewcover, #coverpopupimage', 'extralarge'); mopidy.library.lookup(uri).then(processAlbumResults, console.error); } else { + showLoading(true); $('#h_albumname').html(''); $('#h_albumartist').html(''); - showLoading(true); - // $('#albumsloader').show(); mopidy.library.lookup(uri).then(processAlbumResults, console.error); } - //show + //show page switchContent('albums', uri); scrollToTop(); setSongInfo(); diff --git a/webclient/js/process_ws.js b/webclient/js/process_ws.js index e690ff9..174663f 100755 --- a/webclient/js/process_ws.js +++ b/webclient/js/process_ws.js @@ -73,7 +73,7 @@ function processGetPlaylists(resultArr) { }; $('#playlistslist').empty(); $('#playlistslist').html(tmp); - $('#playlistslist').listview('refresh'); + // $('#playlistslist').listview('refresh'); if (isMobileWebkit) { playlistslistScroll.refresh(); }