andpp/mopidy-musicbox-webclient
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

much faster

Browse Source 
much faster listviews, by bypassing jqm;
much faster playing of a track, by first adding the track and then the
rest of the list
This commit is contained in:
Wouter van Wijk 2013-03-06 00:52:10 +01:00
parent d24d1b9728
commit 0ee1f46d68
7 changed files with 143 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
webclient/css/ws.css
View File

@ -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
***************/

25
webclient/index.html
View File

@ -120,39 +120,46 @@
<div data-role="content" id="playlistspane" class="pane ui-grid-a pl-breakpoint">
<div class="ui-block-a scroll" id="playlistslistdiv">
<ul id="playlistslist" data-icon="false" data-inset="true" data-role="listview"></ul>
<ul id="playlistslist" class="table"></ul>
</div>
<div class="ui-block-b scroll" id="playlisttracksdiv">
<ul data-role="listview" data-theme="c" data-icon="false" id="playlisttracks" data-inset="true"></ul>
<ul class="table" id="playlisttracks"></ul>
<!-- <ul id="playlisttracks"></ul> -->
<!-- <ul data-role="listview" data-theme="c" data-icon="false" id="playlisttracks" data-inset="true"></ul> -->
</div>
</div><!--/playlistspane-->
<div data-role="content" class="pane" id="currentpane">
<h4>Play Queue</h4>
<ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul>
<!-- <ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul>
<ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul> -->
<ul class="table" id="currenttable"></ul>
</div>
<div data-role="content" class="pane" id="albumspane">
<a href="#coverpopup" data-position-to="window" data-rel="popup"><img height="90" src="" id="albumviewcover" /></a>
<h3 id="h_albumname"></h3>
<h5 id="h_albumartist"></h5>
<ul data-role="listview" data-icon="false" data-inset="true" id="albumstable"></ul>
<!-- <ul data-role="listview" data-icon="false" data-inset="true" id="albumstable"></ul> -->
<ul class="table" id="albumstable"></ul>
</div>
<div data-role="content" class="pane" id="artistspane">
<!-- <h4>Artist</h4> -->
<a href="#artistpopup" data-position-to="window" data-rel="popup"><img height="90" src="" id="artistviewimage" /></a>
<h3 id="h_artistname"></h3>
<ul data-role="listview" data-icon="false" data-inset="true" id="artiststable"></ul>
<ul class="table" id="artiststable"></ul>
</div>
<div data-role="content" class="pane" id="searchpane">
<div class="">
<input id="searchinput" class="span2" onkeypress="return searchPressed(event.keyCode);" id="appendedInputButton" type="text">
<form>
<input id="searchinput" class="span2" data-clear-btn="true" onkeypress="return searchPressed(event.keyCode);" id="appendedInputButton" type="text" />
<button class="btn" type="button" onclick="return initSearch(event.value);" >
Search!
</button>
</form>
</div>
@ -160,11 +167,11 @@
<div class="ui-grid-a srch-breakpoint">
<div class="ui-block-a" id="searchartists">
<h4>Artists</h4>
<ul class="" data-icon="false" data-role="listview" data-inset="true" id="artistresulttable"></ul>
<ul class="table" id="artistresulttable"></ul>
</div>
<div class="ui-block-b" id="searchalbums">
<h4>Albums</h4>
<ul class="" data-icon="false" data-role="listview" data-inset="true" id="albumresulttable"></ul>
<ul class="table" id="albumresulttable"></ul>
</div>
</div>
<!-- grid a -->
@ -174,7 +181,7 @@
</div>
--> <div class="" id="searchtracks">
<h4>Tracks</h4>
<ul id="trackresulttable" data-icon="false" data-inset="true" data-role="listview"></ul>
<ul id="trackresulttable" class="table"></ul>
</div>
</div>
</div>

37
webclient/js/controls.js vendored
View File

@ -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<tracks.length) {
mopidy.tracklist.add(tracks.slice(i + 1) );
}
break;
}
}
for (var i = 0; i < track; i++) {
mopidy.playback.next();
}
mopidy.playback.play();
showLoading(false);
return false;

20
webclient/js/functionsvars.js
View File

@ -59,6 +59,8 @@ SEARCH_ALBUM_TABLE = '#albumresulttable';
SEARCH_ARTIST_TABLE = '#artistresulttable';
SEARCH_TRACK_TABLE = '#trackresulttable';
MAX_TABLEROWS = 50;
//update track slider timer, milliseconds
TRACK_TIMER = 1000;
@ -124,9 +126,9 @@ function albumTracksToTable(pl, target, uri) {
return playtrack(this.id, uri)
});*/
//create (for new tables)
$(target).listview().trigger("create");
// $(target).listview().trigger("create");
//refresh
$(target).listview('refresh');
// $(target).listview('refresh');
}
function resultsToTables(results, target, uri) {
@ -164,7 +166,8 @@ function resultsToTables(results, target, uri) {
tableid = 'art' + i;
//render differently if only one track in the album
if (newalbum.length == 1) {
html += '<li data-role="list-divider" data-theme="d" class="smalldivider"></li>';
// html += '<li data-role="list-divider" data-theme="d" class="smalldivider"></li>';
html += '<li class="smalldivider"></li>';
html += '<li id="' + targetmin + '-' + newalbum[0].uri + '"><a href="#" onclick="return popupTracks(event, \'' + uri + '\',\'' + newalbum[0].uri + '\');">';
html += '<h1>' + newalbum[0].name + "</h1>";
html += '<p>';
@ -184,9 +187,9 @@ function resultsToTables(results, target, uri) {
newalbum = [];
} else {
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="30" height="30" />';
html += '<p><em>' + results[i].album.name + '</em></p><p>';
html += '<li class="albumdivider">';
// html += '<a href="#coverpopup" onclick="return coverPopup();" data-position-to="window" data-rel="popup"><img id="' + targetmin + '-cover-' + i + '" class="artistcover" width="30" height="30" /></a>';
html += '<a href="#" onclick="return showAlbum(\'' + results[i].album.uri + '\');"><img id="' + targetmin + '-cover-' + i + '" class="artistcover" width="30" height="30" /><p><em>' + results[i].album.name + '</em></p><p>';
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) {

34
webclient/js/gui.js
View File

@ -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('<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;
$('#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();
@ -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;
}

24
webclient/js/library.js
View File

@ -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 += '"><a href="#" onclick="return showArtist(this.id)" id="' + artists[i].uri + '">' + artists[i].name + "</a></li>";
}
$(SEARCH_ARTIST_TABLE).html(child);
$(SEARCH_ARTIST_TABLE).listview('refresh');
// $(SEARCH_ARTIST_TABLE).listview('refresh');
child = '';
@ -81,7 +86,7 @@ function processSearchResults(resultArr) {
child += '</p></a></li>';
}
$(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();

2
webclient/js/process_ws.js
View File

@ -73,7 +73,7 @@ function processGetPlaylists(resultArr) {
};
$('#playlistslist').empty();
$('#playlistslist').html(tmp);
$('#playlistslist').listview('refresh');
// $('#playlistslist').listview('refresh');
if (isMobileWebkit) {
playlistslistScroll.refresh();
}