Merge pull request #88 from wagamama/multi-songs

Identify tracklist items using the tracklist ID. Fixes #81.
This commit is contained in:
Nick Steel 2015-04-11 11:09:29 +01:00
commit 2c946d4fdd
6 changed files with 139 additions and 104 deletions

View File

@ -169,7 +169,7 @@
<div data-role="collapsible-set">
<ul data-role="listview" data-icon="false" id="popupTracksLv">
<li>
<a href="#" onclick="return playTrack();">Play <span class="popupTrackName"></span></a>
<a href="#" onclick="return playTrack(PLAY_NOW);">Play <span class="popupTrackName"></span></a>
</li>
<li class="addqueue">
<a href="#" onclick="return playTrack(PLAY_NEXT);">Play Track Next</a>
@ -304,7 +304,6 @@
<label for="trackslider" disabled="disabled" class="ui-hidden-accessible">Position</label>
<input id="trackslider" name="trackslider" data-mini="true" type="range" onchange="doSeekPos(this.value);" />
</div>
</div>
<!-- /nowplaying -->
@ -429,7 +428,7 @@
Save
</button>
<br/>
<button class="btn" type="button" onclick="$('#streamuriinput').val(songdata.uri); return true;">
<button class="btn" type="button" onclick="$('#streamuriinput').val(songdata.track.uri); return true;">
Add currently playing url
</button>
</form>

View File

@ -122,7 +122,7 @@ function playTrack(addtoqueue) {
//find track that is playing
for (var playing = 0; playing < currentplaylist.length; playing++) {
if (currentplaylist[playing].uri == songdata.uri) {
if (currentplaylist[playing].tlid == songdata.tlid) {
break;
}
}
@ -212,25 +212,26 @@ function playTrackByUri(track_uri, playlist_uri) {
/***
* Plays a Track from a Playlist.
* @param uri
* @param playlisturi
* @param tlid
* @returns {boolean}
*/
function playTrackQueueByUri(uri, playlisturi) {
function playTrackQueueByTlid(uri, tlid) {
// console.log('playquuri');
//stop directly, for user feedback
mopidy.playback.stop();
$('#popupQueue').popup('close');
toast('Loading...');
tlid = parseInt(tlid);
mopidy.tracklist.filter({
'uri': [uri]
'tlid': [tlid]
}).then(
function(tltracks) {
if (tltracks.length > 0) {
mopidy.playback.play(tltracks[0]);
return;
}
console.log('Failed to play selected track ', uri);
console.log('Failed to play selected track ', tlid);
}
);
return false;
@ -242,9 +243,9 @@ function playTrackQueueByUri(uri, playlisturi) {
*/
function playTrackQueue() {
// console.log('playqu');
playlisturi = $('#popupQueue').data("list");
uri = $('#popupQueue').data("track");
return playTrackQueueByUri(uri, playlisturi);
tlid = $('#popupQueue').data("tlid");
return playTrackQueueByTlid(uri, tlid);
}
/********************************************************
@ -254,18 +255,9 @@ function removeTrack() {
$('#popupQueue').popup('close');
toast('Deleting...');
uri = $('#popupQueue').data("track");
console.log(uri);
for (var i = 0; i < currentplaylist.length; i++) {
if (currentplaylist[i].uri == uri) {
break;
}
}
var track = {};
track.uri = [currentplaylist[i].uri];
mopidy.tracklist.remove({'uri':track.uri});
// console.log(currentplaylist[i].uri);
tlid = parseInt($('#popupQueue').data("tlid"));
console.log(tlid);
mopidy.tracklist.remove({'tlid':[tlid]});
}
function clearQueue() {
@ -308,7 +300,7 @@ function doPlay() {
if (!play) {
mopidy.playback.play();
} else {
if(isStreamUri(songdata.uri)) {
if(isStreamUri(songdata.track.uri)) {
mopidy.playback.stop();
} else {
mopidy.playback.pause();

View File

@ -34,7 +34,7 @@ var songlength = 0;
var artistshtml = '';
var artiststext = '';
var songname = '';
var songdata = '';
var songdata = {'track':{}, 'tlid':-1};
var newposition = 0;
var playlisttracksScroll;
@ -172,14 +172,14 @@ function albumTracksToTable(pl, target, uri) {
for (var i = 0; i < pl.length; i++) {
popupData[pl[i].uri] = pl[i];
liID = targetmin + '-' + pl[i].uri;
tmp += renderSongLi(pl[i], liID, uri, 'playTrackByUri');
tmp += renderSongLi(pl[i], liID, uri);
};
tmp += '</ul>';
$(target).html(tmp);
$(target).attr('data', uri);
}
function renderSongLi(song, liID, uri, playlistType) {
function renderSongLi(song, liID, uri) {
var name;
if (!song.name || song.name == '') {
name = uri.split('/');
@ -189,14 +189,31 @@ function renderSongLi(song, liID, uri, playlistType) {
}
// var iconClass = getMediaClass(liID.split('-')[1]);
songLi = '<li class="song albumli" id="' + liID + '">' +
'<a href="#" class="moreBtn" onclick="return popupTracks(event, \'' + uri + '\',\'' + song.uri + '\');">' +
'<i class="fa fa-ellipsis-v"></i>' +
'</a>' + '<a href="#" onclick="return ' + playlistType + '(\'' + song.uri + '\',\'' + uri + '\');">' +
// '<h1 class="trackname"><i class="' + iconClass + '"></i> ' + name + '</h1>' +
'<h1 class="trackname">' + name + '</h1>' +
'</a>' +
'<a href="#" class="moreBtn" onclick="return popupTracks(event, \'' + uri + '\',\'' + song.uri + '\');">' +
'<i class="fa fa-ellipsis-v"></i></a>' +
'<a href="#" onclick="return playTrackByUri(\'' + song.uri + '\',\'' + uri + '\');">' +
// '<h1 class="trackname"><i class="' + iconClass + '"></i> ' + name + '</h1>' +
'<h1 class="trackname">' + name + '</h1></a>' +
'</li>';
return songLi;
}
'</li>';
function renderQueueSongLi(song, liID, uri, tlid) {
var name;
if (!song.name || song.name == '') {
name = uri.split('/');
name = decodeURI(name[name.length - 1]);
} else {
name = song.name;
}
// var iconClass = getMediaClass(liID.split('-')[1]);
songLi = '<li class="song albumli" id="' + liID + '" tlid="' + tlid + '">' +
'<a href="#" class="moreBtn" onclick="return popupTracks(event, \'' + uri + '\',\'' + song.uri + '\',\'' + tlid + '\');">' +
'<i class="fa fa-ellipsis-v"></i></a>' +
'<a href="#" onclick="return playTrackQueueByTlid(\'' + song.uri + '\',\'' + tlid + '\');">' +
// '<h1 class="trackname"><i class="' + iconClass + '"></i> ' + name + '</h1>' +
'<h1 class="trackname">' + name + '</h1></a>' +
'</li>';
return songLi;
}
@ -204,15 +221,16 @@ function resultsToTables(results, target, uri) {
if (!results) {
return
}
if (target == '#currenttable') {
playlistType = 'playTrackQueueByUri';
} else if (target == SEARCH_TRACK_TABLE) {
playlistType = 'playTrackByUri';
} else {
playlistType = 'playTrackByUri';
var tlids = [];
if (target == CURRENT_PLAYLIST_TABLE) {
for (i = 0; i < results.length; i++) {
tlids[i] = results[i].tlid;
results[i] = results[i].track;
}
}
var newalbum = [];
var newtlids = [];
//keep a list of albums for retreiving of covers
var coversList = [];
var nextname = '';
@ -247,6 +265,7 @@ function resultsToTables(results, target, uri) {
if (results[i].name.substring(0, 12) == '[unplayable]') continue;
newalbum.push(results[i]);
newtlids.push(tlids[i]);
nextname = '';
if ((i < length - 1) && results[i + 1].album && results[i + 1].album.name) {
nextname = results[i + 1].album.name;
@ -254,6 +273,7 @@ function resultsToTables(results, target, uri) {
if (results[i].length == -1) {
html += '<li class="albumli"><a href="#"><h1><i class="' + iconClass + '"></i> ' + results[i].name + ' [Stream]</h1></a></li>';
newalbum = [];
newtlids = [];
nextname = '';
} else {
if ((results[i].album.name != nextname) || (nextname == '')) {
@ -264,11 +284,21 @@ function resultsToTables(results, target, uri) {
html += '<li class="smalldivider"> &nbsp;</li>';
}
iconClass = getMediaClass(newalbum[0].uri);
html += '<li class="song albumli" id="' + targetmin + '-' + newalbum[0].uri + '">' +
'<a href="#" class="moreBtn" onclick="return popupTracks(event, \'' + uri + '\',\'' + newalbum[0].uri + '\');">' +
'<i class="fa fa-ellipsis-v"></i></a>' +
'<a href="#" onclick="return ' + playlistType + '(\'' + newalbum[0].uri + '\',\'' + uri + '\');">' +
'<h1><i class="' + iconClass + '"></i> ' + newalbum[0].name + "</h1><p>";
var liID = targetmin + '-' + newalbum[0].uri;
if (target == CURRENT_PLAYLIST_TABLE) {
html += '<li class="song albumli" id="' + liID + '" tlid="' + newtlids[0] + '">' +
'<a href="#" class="moreBtn" onclick="return popupTracks(event, \'' + uri + '\',\'' + newalbum[0].uri + '\',\'' + newtlids[0] + '\');">' +
'<i class="fa fa-ellipsis-v"></i></a>' +
'<a href="#" onclick="return playTrackQueueByTlid(\'' + newalbum[0].uri + '\',\'' + newtlids[0] + '\');">' +
'<h1><i class="' + iconClass + '"></i> ' + newalbum[0].name + "</h1><p>";
} else {
html += '<li class="song albumli" id="' + liID + '">' +
'<a href="#" class="moreBtn" onclick="return popupTracks(event, \'' + uri + '\',\'' + newalbum[0].uri + '\');">' +
'<i class="fa fa-ellipsis-v"></i></a>' +
'<a href="#" onclick="return playTrackByUri(\'' + newalbum[0].uri + '\',\'' + uri + '\');">' +
'<h1><i class="' + iconClass + '"></i> ' + newalbum[0].name + "</h1><p>";
}
/* '<span style="float: right;">' + timeFromSeconds(newalbum[0].length / 1000) + '</span>'; */
if (newalbum[0].artists) {
for (j = 0; j < newalbum[0].artists.length; j++) {
@ -289,6 +319,7 @@ function resultsToTables(results, target, uri) {
popupData[newalbum[0].uri] = newalbum[0];
newalbum = [];
newtlids = [];
} else { //newalbum length
if (results[i].album.uri && results[i].album.name) {
// iconClass = getMediaClass(results[i].album.uri);
@ -315,12 +346,17 @@ function resultsToTables(results, target, uri) {
//hERE!
var liID = targetmin + '-' + newalbum[j].uri;
html += renderSongLi(newalbum[j], liID, uri, playlistType);
if (target == CURRENT_PLAYLIST_TABLE) {
html += renderQueueSongLi(newalbum[j], liID, uri, newtlids[j]);
} else {
html += renderSongLi(newalbum[j], liID, uri);
}
//html += '<li class="albumli" id="' + targetmin + '-' + newalbum[j].uri + '"><a href="#" onclick="return popupTracks(event, \'' + uri + '\',\'' + newalbum[j].uri + '\');">';
//html += '<p class="pright">' + timeFromSeconds(newalbum[j].length / 1000) + '</p><h1>' + newalbum[j].name + '</h1></a></li>';
}
newalbum = [];
newtlids = [];
if (results[i].album) {
coversList.push([results[i].album, i]);
}

View File

@ -12,16 +12,18 @@ function resetSong() {
setPlayState(false);
setPosition(0);
var data = new Object;
data.name = '';
data.artists = '';
data.length = 0;
data.uri = ' ';
data.tlid = -1;
data.track = new Object;
data.track.name = '';
data.track.artists = '';
data.track.length = 0;
data.track.uri = ' ';
setSongInfo(data);
}
}
function resizeMb() {
$("#infoname").html(songdata.name);
$("#infoname").html(songdata.track.name);
$("#infoartist").html(artiststext);
if ($(window).width() <= 960) {
@ -72,68 +74,68 @@ function resizeMb() {
function setSongInfo(data) {
// console.log(data, songdata);
if (!data ) { return; }
if ( (data.uri == songdata.uri) ) { return;}
if (!data.name || data.name == '') {
var name = data.uri.split('/');
data.name = decodeURI(name[name.length - 1]);
if (data.tlid == songdata.tlid) { return; }
if (!data.track.name || data.track.name == '') {
var name = data.track.uri.split('/');
data.track.name = decodeURI(name[name.length - 1]);
};
updatePlayIcons(data.uri);
updatePlayIcons(data.track.uri, data.tlid);
artistshtml = '';
artiststext = '';
if (validUri(data.name)) {
if (validUri(data.track.name)) {
for (var key in streamUris) {
rs = streamUris[key];
if (rs && rs[1] == data.name) {
data.name = (rs[0] || rs[1]);
}
};
rs = streamUris[key];
if (rs && rs[1] == data.track.name) {
data.track.name = (rs[0] || rs[1]);
}
};
}
songdata = data;
$("#modalname").html(data.name);
$("#modalname").html(data.track.name);
if (!data.length || data.length == 0) {
if (!data.track.length || data.track.length == 0) {
songlength = 0;
$("#songlength").html('');
pausePosTimer();
$('#trackslider').slider('disable');
// $('#streamnameinput').val(data.name);
// $('#streamuriinput').val(data.uri);
$("#songlength").html('');
pausePosTimer();
$('#trackslider').slider('disable');
// $('#streamnameinput').val(data.track.name);
// $('#streamuriinput').val(data.track.uri);
} else {
songlength = data.length;
$("#songlength").html(timeFromSeconds(data.length / 1000));
songlength = data.track.length;
$("#songlength").html(timeFromSeconds(data.track.length / 1000));
$('#trackslider').slider('enable');
}
var arttmp = '';
if(data.artists) {
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) {
if(data.track.artists) {
for (var j = 0; j < data.track.artists.length; j++) {
artistshtml += '<a href="#" onclick="return showArtist(\'' + data.track.artists[j].uri + '\');">' + data.track.artists[j].name + '</a>';
artiststext += data.track.artists[j].name;
if (j != data.track.artists.length - 1) {
artistshtml += ', ';
artiststext += ', ';
}
}
arttmp = artistshtml;
}
if (data.album && data.album.name) {
$("#modalalbum").html('<a href="#" onclick="return showAlbum(\'' + data.album.uri + '\');">' + data.album.name + '</a>');
getCover(data.album, '#infocover, #controlspopupimage', 'extralarge');
if (data.track.album && data.track.album.name) {
$("#modalalbum").html('<a href="#" onclick="return showAlbum(\'' + data.track.album.uri + '\');">' + data.track.album.name + '</a>');
getCover(data.track.album, '#infocover, #controlspopupimage', 'extralarge');
} else {
$("#modalalbum").html('');
$("#infocover").attr('src', 'images/default_cover.png');
$("#modalalbum").html('');
$("#infocover").attr('src', 'images/default_cover.png');
$("#controlspopupimage").attr('src', 'images/default_cover.png');
}
$("#modalartist").html(arttmp);
$("#trackslider").attr("min", 0);
$("#trackslider").attr("max", data.length);
$("#trackslider").attr("max", data.track.length);
resizeMb();
}
@ -150,7 +152,7 @@ function closePopups() {
}
function popupTracks(e, listuri, trackuri) {
function popupTracks(e, listuri, trackuri, tlid) {
if (!e)
var e = window.event;
$('.popupTrackName').html(popupData[trackuri].name);
@ -192,10 +194,18 @@ function popupTracks(e, listuri, trackuri) {
var popupName = '#popupTracks';
}
$(popupName).data("list", listuri).data("track", trackuri).popup("open", {
x : e.pageX,
y : e.pageY
});
if (typeof tlid != 'undefined' && tlid != '') {
$(popupName).data("list", listuri).data("track", trackuri).data("tlid", tlid).popup("open", {
x : e.pageX,
y : e.pageY
});
} else {
$(popupName).data("list", listuri).data("track", trackuri).popup("open", {
x : e.pageX,
y : e.pageY
});
}
return false;
}
@ -230,12 +240,12 @@ function initSocketevents() {
mopidy.on("event:trackPlaybackStarted", function(data) {
mopidy.playback.getTimePosition().then(processCurrentposition, console.error);
setPlayState(true);
setSongInfo(data.tl_track.track);
setSongInfo(data.tl_track);
initPosTimer();
});
mopidy.on("event:trackPlaybackPaused", function(data) {
//setSongInfo(data.tl_track.track);
//setSongInfo(data.tl_track);
pausePosTimer();
setPlayState(false);
});
@ -338,7 +348,7 @@ function setHeadline(site){
//update timer
function updateStatusTimer() {
// console.log('statustimer');
mopidy.playback.getCurrentTrack().then(processCurrenttrack, console.error);
mopidy.playback.getCurrentTlTrack().then(processCurrenttrack, console.error);
mopidy.playback.getTimePosition().then(processCurrentposition, console.error);
//TODO check offline?
}
@ -353,7 +363,7 @@ function updateOptions() {
//update everything as if reloaded
function updateStatusOfAll() {
mopidy.playback.getCurrentTrack().then(processCurrenttrack, console.error);
mopidy.playback.getCurrentTlTrack().then(processCurrenttrack, console.error);
mopidy.playback.getTimePosition().then(processCurrentposition, console.error);
mopidy.playback.getState().then(processPlaystate, console.error);
@ -567,10 +577,14 @@ $(document).ready(function(event) {
} );
});
function updatePlayIcons (uri) {
function updatePlayIcons (uri, tlid) {
//update styles of listviews
$('#currenttable li').each(function() {
if (this.id == 'currenttable-' + uri) {
var eachTlid = $(this).attr('tlid');
if (typeof eachTlid != 'undefined') {
eachTlid = parseInt(eachTlid);
}
if (this.id == 'currenttable-' + uri && eachTlid == tlid) {
$(this).addClass('currenttrack');
} else {
$(this).removeClass("currenttrack");

View File

@ -78,7 +78,7 @@ function processSearchResults(resultArr) {
// TODO should of coures have multiple tables
var results = {'tracks': [], 'artists': [], 'albums': []};
var j, emptyResult = true;
/* for (var i = 0; i < resultArr.length; ++i) {
for (var prop in results) {
if (resultArr[i][prop] && resultArr[i][prop].length) {
@ -199,7 +199,6 @@ function processSearchResults(resultArr) {
// playlisttotable(results.tracks, SEARCH_TRACK_TABLE, 'trackresultscache');
resultsToTables(results.tracks, SEARCH_TRACK_TABLE, 'trackresultscache');
setSongInfo();
showLoading(false);
}
@ -230,7 +229,7 @@ function getBrowseDir(rootdir) {
}
function getCurrentPlaylist() {
mopidy.tracklist.getTracks().then(processCurrentPlaylist, console.error);
mopidy.tracklist.getTlTracks().then(processCurrentPlaylist, console.error);
}
/********************************************************
@ -292,7 +291,6 @@ function showArtist(nwuri) {
}, console.error);
switchContent('artists', nwuri);
scrollToTop();
setSongInfo();
return false;
}
@ -329,7 +327,6 @@ function showAlbum(uri) {
//show page
switchContent('albums', uri);
scrollToTop();
setSongInfo();
return false;
}

View File

@ -144,7 +144,7 @@ function processBrowseDir(resultArr) {
$('#browsepath').html('');
}
updatePlayIcons(songdata.uri);
updatePlayIcons(songdata.track.uri, songdata.tlid);
showLoading(false);
}
@ -194,7 +194,6 @@ function processGetTracklist(resultArr) {
var newplaylisturi = resultArr.uri;
//console.log(resultArr);
playlists[newplaylisturi] = resultArr;
setSongInfo();
resultsToTables(playlists[newplaylisturi].tracks, PLAYLIST_TABLE, newplaylisturi);
showLoading(false);
}
@ -204,9 +203,9 @@ function processGetTracklist(resultArr) {
*********************************************************/
function processCurrentPlaylist(resultArr) {
currentplaylist = resultArr;
resultsToTables(resultArr, CURRENT_PLAYLIST_TABLE);
mopidy.playback.getCurrentTrack().then(processCurrenttrack, console.error);
updatePlayIcons(songdata.uri);
resultsToTables(currentplaylist, CURRENT_PLAYLIST_TABLE);
mopidy.playback.getCurrentTlTrack().then(processCurrenttrack, console.error);
updatePlayIcons(songdata.track.uri, songdata.tlid);
}
/********************************************************
@ -225,7 +224,6 @@ function processArtistResults(resultArr) {
var artistname = getArtist(resultArr);
$('#h_artistname, #artistpopupname').html(artistname);
getArtistImage(artistname, '#artistviewimage, #artistpopupimage', 'extralarge');
setSongInfo();
showLoading(false);
}
@ -248,7 +246,6 @@ function processAlbumResults(resultArr) {
$('#h_albumartist').html(artistname);
$('#coverpopupalbumname').html(albumname);
$('#coverpopupartist').html(artistname);
setSongInfo();
getCover(resultArr[0].album, '#albumviewcover, #coverpopupimage', 'extralarge');
showLoading(false);
}