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

better queue popup, next track fix

Browse Source
This commit is contained in:
Wouter van Wijk 2013-06-22 01:22:45 +02:00
parent a2b1937a0e
commit 3d7168a1c8
4 changed files with 81 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
webclient/index.html
View File

@ -73,20 +73,20 @@
<div data-role="popup" data-transition="none" data-theme="c" id="popupTracks">
<div data-role="collapsible-set">
<ul data-role="listview" data-icon="false" id="popupTracksLv">
<li data-role="divider">
<!-- <li data-role="divider">
<span id="popupTrackName"></span>
</li>
<li>
<a href="#" onclick="return playTrack();">Play Now <span id="popupTrackName"></span></a>
--> <li>
<a href="#" onclick="return playTrack();">Play <span id="popupTrackName"></span></a>
</li>
<li>
<li class="addqueue">
<a href="#" onclick="return playTrack(PLAY_NEXT);">Play Track Next</a>
</li>
<li>
<a href="#" onclick="return playTrack(ADD_THIS_BOTTOM);">Add track to bottom of queue</a>
<li class="addqueue">
<a href="#" onclick="return playTrack(ADD_THIS_BOTTOM);">Add Track to Bottom of Queue</a>
</li>
<li>
<a href="#" onclick="return playTrack(ADD_ALL_BOTTOM);" id="liaddtobottom">Add all tracks to bottom of queue</a>
<li class="addqueue">
<a href="#" onclick="return playTrack(ADD_ALL_BOTTOM);" id="liaddtobottom">Add all to Bottom of Queue</a>
</li>
<li>
<a href="#" onclick="showAlbumPopup()">Show Album <span id="popupAlbumName"></span></a>

30
webclient/js/controls.js vendored
View File

@ -17,6 +17,7 @@ function playTrack(addtoqueue) {
var trackslist = new Array();
var track, tracksbefore, tracksafter;
var tracks = getTracksFromUri(playlisturi);
console.log(tracks);
if (tracks) {
if (!addtoqueue) {
clearQueue();
@ -39,20 +40,27 @@ function playTrack(addtoqueue) {
}
//find track that was selected
for (var i = 0; i < tracks.length; i++) {
if (tracks[i].uri == uri) {
for (var selected = 0; selected < tracks.length; selected++) {
if (tracks[selected].uri == uri) {
break;
}
}
//options
//find track that is playing
for (var playing = 0; playing < currentplaylist.length; playing++) {
if (currentplaylist[playing].uri == songdata.uri) {
break;
}
}
//switch popup options
switch (addtoqueue) {
case ADD_THIS_BOTTOM:
mopidy.tracklist.add(tracks.slice(i, i + 1));
mopidy.tracklist.add(tracks.slice(selected, selected + 1));
showLoading(false);
return false;
case PLAY_NEXT:
mopidy.tracklist.add(tracks.slice(i, i + 1), 1);
mopidy.tracklist.add(tracks.slice(selected, selected + 1), playing + 1);
showLoading(false);
return false;
case ADD_ALL_BOTTOM:
@ -62,15 +70,15 @@ function playTrack(addtoqueue) {
}
// play now: first add track to be played, then the other tracks
mopidy.tracklist.add(tracks.slice(i, i + 1) );
mopidy.tracklist.add(tracks.slice(selected, selected + 1) );
mopidy.playback.play();
//wait 2 seconds before adding the rest to give server the time to start playing
//wait 1 second before adding the rest to give server the time to start playing
setTimeout(function() {
mopidy.tracklist.add(tracks.slice(0, i), 0);
if (i < tracks.length) {
mopidy.tracklist.add(tracks.slice(i + 1) );
mopidy.tracklist.add(tracks.slice(0, selected), 0);
if (selected < tracks.length) {
mopidy.tracklist.add(tracks.slice(selected + 1) );
}
}, (2000));
}, (1000));
showLoading(false);
return false;
}

103
webclient/js/gui.js
View File

@ -76,48 +76,11 @@ function resizeMb() {
}
function setSongInfo(data) {
if (data) {
songdata = data;
} else {
data = songdata;
}
artistshtml = '';
artiststext = '';
if ( !data.name || (data.name == '')) {
if (!data) { return; }
if (data.name == '') {
return;
};
for (var j = 0; j < data.artists.length; j++) {
artistshtml += '<a href="#" onclick="return showArtist(\'' + data.artists[j].uri + '\');">' + data.artists[j].name + '</a>';
artiststext += data.artists[j].name;
if (j != data.artists.length - 1) {
artistshtml += ', ';
artiststext += ', ';
}
}
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';
if (data.artists.length > 1) {
arttmp += 's';
}
$("#modalartist").html(arttmp + ': ' + artistshtml);
$("#trackslider").attr("min", 0);
songlength = data.length;
$("#trackslider").attr("max", data.length);
$("#songlength").html(timeFromSeconds(data.length / 1000));
resizeMb();
//update styles of listviews
$('#currenttable li').each(function() {
$(this).removeClass("currenttrack");
@ -150,6 +113,46 @@ function setSongInfo(data) {
$(this).addClass('currenttrack2');
}
});
if (songdata.name == data.name) {
return;
}
if (data) {
songdata = data;
} else {
data = songdata;
}
artistshtml = '';
artiststext = '';
for (var j = 0; j < data.artists.length; j++) {
artistshtml += '<a href="#" onclick="return showArtist(\'' + data.artists[j].uri + '\');">' + data.artists[j].name + '</a>';
artiststext += data.artists[j].name;
if (j != data.artists.length - 1) {
artistshtml += ', ';
artiststext += ', ';
}
}
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';
if (data.artists.length > 1) {
arttmp += 's';
}
$("#modalartist").html(arttmp + ': ' + artistshtml);
$("#trackslider").attr("min", 0);
songlength = data.length;
$("#trackslider").attr("max", data.length);
$("#songlength").html(timeFromSeconds(data.length / 1000));
resizeMb();
}
/***************
@ -195,11 +198,12 @@ function popupTracks(e, listuri, trackuri) {
// this makes the viewport of the window resize somehow
$('#popupArtistsLv').listview("refresh");
}
var hash = getHash();
if (hash == 'current') {
$("#liaddtobottom").hide();
var hash = document.location.hash.split('?');
var divid = hash[0].substr(1);
if (divid == 'current') {
$(".addqueue").hide();
} else {
$("#liaddtobottom").show();
$(".addqueue").show();
}
$('#popupTracks').data("list", listuri).data("track", trackuri).popup("open", {
@ -315,7 +319,7 @@ function initSocketevents() {
$(document).ready(function() {
//check for websockets
if (!window.WebSocket) {
switchContent("current");
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;
}
@ -330,7 +334,7 @@ $(document).ready(function() {
resetSong();
if (location.hash.length < 2) {
switchContent("current");
switchContent("playlists");
}
initgui = false;
@ -371,7 +375,7 @@ function switchContent(divid, uri) {
}
//update timer
function updateStatusOfAll() {
function updateTimer() {
mopidy.playback.getCurrentTrack().then(processCurrenttrack, console.error);
mopidy.playback.getTimePosition().then(processCurrentposition, console.error);
//TODO check offline?
@ -391,15 +395,16 @@ 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();
$('#' + getHash() + 'pane').show();
$('#' + divid + 'pane').show();
switch(hash) {
switch(divid) {
case 'current':
$('#navcurrent a').addClass('ui-state-active ui-state-persist ui-btn-active');
break;

6
webclient/js/process_ws.js
View File

@ -72,13 +72,7 @@ function processGetPlaylists(resultArr) {
};
$('#playlistslist').empty();
$('#playlistslist').html(tmp);
// $('#playlistslist').listview('refresh');
scrollToTracklist();
/* if (isMobileWebkit) {
playlistslistScroll.refresh();
}
*/
console.log('pl');
showLoading(false);
}