From b6dc2bb292c7a61720a8d79f5c2d85a53cb49c58 Mon Sep 17 00:00:00 2001 From: wagamama Date: Sun, 22 Mar 2015 11:25:16 +0800 Subject: [PATCH] Resolve multiple currently playing songs in queue Use TlTrack to distinguish same songs in current queue 1. Play icon is not applied to songs with same uri 2. Songs with same uri are not removed at once --- mopidy_musicbox_webclient/static/index.html | 6 +- .../static/js/controls.js | 34 ++--- .../static/js/functionsvars.js | 85 ++++++++--- mopidy_musicbox_webclient/static/js/gui.js | 132 ++++++++++-------- .../static/js/library.js | 10 +- .../static/js/process_ws.js | 22 +-- 6 files changed, 168 insertions(+), 121 deletions(-) diff --git a/mopidy_musicbox_webclient/static/index.html b/mopidy_musicbox_webclient/static/index.html index 9b0ef26..0bfbfa2 100644 --- a/mopidy_musicbox_webclient/static/index.html +++ b/mopidy_musicbox_webclient/static/index.html @@ -149,7 +149,7 @@
- Add to saved streams + Add to saved streams @@ -410,7 +410,7 @@ Save
- diff --git a/mopidy_musicbox_webclient/static/js/controls.js b/mopidy_musicbox_webclient/static/js/controls.js index 786eefe..94f6b1a 100644 --- a/mopidy_musicbox_webclient/static/js/controls.js +++ b/mopidy_musicbox_webclient/static/js/controls.js @@ -94,7 +94,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; } } @@ -140,7 +140,7 @@ function playTrack(addtoqueue) { function playTrackByUri(track_uri, playlist_uri) { function findAndPlayTrack(tltracks) { // console.log('fa', tltracks, track_uri); - if (tltracks == []) { return;} + if (tltracks == []) { return;} // Find track that was selected for (var selected = 0; selected < tltracks.length; selected++) { if (tltracks[selected].track.uri == track_uri) { @@ -184,25 +184,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(true); $('#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; @@ -214,9 +215,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); } /******************************************************** @@ -226,18 +227,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() { @@ -280,7 +272,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(); diff --git a/mopidy_musicbox_webclient/static/js/functionsvars.js b/mopidy_musicbox_webclient/static/js/functionsvars.js index 9db68a3..ac740ed 100644 --- a/mopidy_musicbox_webclient/static/js/functionsvars.js +++ b/mopidy_musicbox_webclient/static/js/functionsvars.js @@ -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; @@ -171,14 +171,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 += ''; $(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('/'); @@ -188,14 +188,31 @@ function renderSongLi(song, liID, uri, playlistType) { } // var iconClass = getMediaClass(liID.split('-')[1]); songLi = '
  • ' + - '' + - '' + - '' + '' + - // '

    ' + name + '

    ' + - '

    ' + name + '

    ' + - '    ' + + '' + + '' + + '' + + // '

    ' + name + '

    ' + + '

    ' + name + '

    ' + + '
    • '; + return songLi; +} - ''; +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 = '
  • ' + + '' + + '' + + '' + + // '

    ' + name + '

    ' + + '

    ' + name + '

    ' + + '
    • '; return songLi; } @@ -203,15 +220,21 @@ 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) { + var tmp = []; + for (i = 0; i < results.length; i++) { + tmp[i] = results[i].track; + tlids[i] = results[i].tlid; + } + results = []; + for (i = 0; i < tmp.length; i++) { + results[i] = tmp[i]; + } } var newalbum = []; + var newtlids = []; //keep a list of albums for retreiving of covers var coversList = []; var nextname = ''; @@ -246,6 +269,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; @@ -253,6 +277,7 @@ function resultsToTables(results, target, uri) { if (results[i].length == -1) { html += '

  • ' + results[i].name + ' [Stream]

    • '; newalbum = []; + newtlids = []; nextname = ''; } else { if ((results[i].album.name != nextname) || (nextname == '')) { @@ -263,11 +288,21 @@ function resultsToTables(results, target, uri) { html += '
  •  
    • '; } iconClass = getMediaClass(newalbum[0].uri); - html += '
  • ' + - '' + - '' + - '' + - '

    ' + newalbum[0].name + "

    "; + var liID = targetmin + '-' + newalbum[j].uri; + if (target == CURRENT_PLAYLIST_TABLE) { + html += '

  • ' + + '' + + '' + + '' + + '

    ' + newalbum[0].name + "

    "; + } else { + html += '

  • ' + + '' + + '' + + '' + + '

    ' + newalbum[0].name + "

    "; + } + /* '' + timeFromSeconds(newalbum[0].length / 1000) + ''; */ if (newalbum[0].artists) { for (j = 0; j < newalbum[0].artists.length; j++) { @@ -288,6 +323,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); @@ -314,12 +350,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 += '

  • '; //html += '

    ' + timeFromSeconds(newalbum[j].length / 1000) + '

    ' + newalbum[j].name + '

    • '; } newalbum = []; + newtlids = []; if (results[i].album) { coversList.push([results[i].album, i]); } diff --git a/mopidy_musicbox_webclient/static/js/gui.js b/mopidy_musicbox_webclient/static/js/gui.js index 82d2b96..c7f9654 100644 --- a/mopidy_musicbox_webclient/static/js/gui.js +++ b/mopidy_musicbox_webclient/static/js/gui.js @@ -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,69 +74,69 @@ 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 += '' + data.artists[j].name + ''; - 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 += '' + data.track.artists[j].name + ''; + 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('' + data.album.name + ''); - getCover(data.album, '#infocover, #controlspopupimage', 'extralarge'); + if (data.track.album && data['track'].album.name) { + $("#modalalbum").html('' + data.track.album.name + ''); + 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); @@ -159,7 +161,7 @@ function popupTracks(e, listuri, trackuri) { if (popupData[trackuri].artists) { if (popupData[trackuri].artists.length == 1) { - child = 'Show Artist'; + child = 'Show Artist'; $('.popupArtistName').html(popupData[trackuri].artists[0].name); $('.popupArtistHref').attr('onclick', 'showArtist("' + popupData[trackuri].artists[0].uri + '");' ); $('.popupArtistsDiv').hide(); @@ -189,10 +191,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; } @@ -221,18 +231,18 @@ function initSocketevents() { resetSong(); showOffline(true); }); - + mopidy.on("event:optionsChanged", updateOptions); 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); }); @@ -335,7 +345,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? } @@ -350,7 +360,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); @@ -487,9 +497,9 @@ $(document).ready(function(event) { //navigation temporary, rewrite this! $('#songinfo').click( - function() + function() {return switchContent('nowPlaying')} ); - $('#controlspopupimage').click( + $('#controlspopupimage').click( function() { return switchContent('current')} ); $('#navEnterFullscreen').click(function(){ @@ -552,22 +562,26 @@ $(document).ready(function(event) { // swipe songinfo and panel $( "#normalFooter, #nowPlayingFooter" ).on( "swiperight", doPrevious ); $( "#normalFooter, #nowPlayingFooter" ).on( "swipeleft", doNext ); - $( "#nowPlayingpane, .ui-body-c, #header, #panel, .pane" ).on( "swiperight", function() { + $( "#nowPlayingpane, .ui-body-c, #header, #panel, .pane" ).on( "swiperight", function() { if(!$(event.target).is("#normalFooter") && !$(event.target).is("#nowPlayingFooter")) { $("#panel").panel("open"); event.stopImmediatePropagation(); } - } ); - $( "#nowPlayingpane, .ui-body-c, #header, #panel, .pane" ).on( "swipeleft", function() { + } ); + $( "#nowPlayingpane, .ui-body-c, #header, #panel, .pane" ).on( "swipeleft", function() { if(!$(event.target).is("#normalFooter") && !$(event.target).is("#nowPlayingFooter")) { - $("#panel").panel("close"); + $("#panel").panel("close"); event.stopImmediatePropagation(); } - } ); + } ); }); -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"); diff --git a/mopidy_musicbox_webclient/static/js/library.js b/mopidy_musicbox_webclient/static/js/library.js index 5dd2906..20bd57c 100644 --- a/mopidy_musicbox_webclient/static/js/library.js +++ b/mopidy_musicbox_webclient/static/js/library.js @@ -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,7 @@ function processSearchResults(resultArr) { // playlisttotable(results.tracks, SEARCH_TRACK_TABLE, 'trackresultscache'); resultsToTables(results.tracks, SEARCH_TRACK_TABLE, 'trackresultscache'); - setSongInfo(); + // setSongInfo(); showLoading(false); } @@ -230,7 +230,7 @@ function getBrowseDir(rootdir) { } function getCurrentPlaylist() { - mopidy.tracklist.getTracks().then(processCurrentPlaylist, console.error); + mopidy.tracklist.getTlTracks().then(processCurrentPlaylist, console.error); } /******************************************************** @@ -292,7 +292,7 @@ function showArtist(nwuri) { }, console.error); switchContent('artists', nwuri); scrollToTop(); - setSongInfo(); + // setSongInfo(); return false; } @@ -329,7 +329,7 @@ function showAlbum(uri) { //show page switchContent('albums', uri); scrollToTop(); - setSongInfo(); + // setSongInfo(); return false; } diff --git a/mopidy_musicbox_webclient/static/js/process_ws.js b/mopidy_musicbox_webclient/static/js/process_ws.js index 0b8fda9..7e55f9f 100644 --- a/mopidy_musicbox_webclient/static/js/process_ws.js +++ b/mopidy_musicbox_webclient/static/js/process_ws.js @@ -110,13 +110,13 @@ function processBrowseDir(resultArr) { iconClass = getMediaClass(resultArr[i].uri); if(resultArr[i].type == 'track' ) { // console.log(resultArr[i]); - child += '

  • ' + resultArr[i].name + '

    • '; } else { if (browseStack.length > 0) { iconClass="fa fa-folder-o"; } - child += '

  • ' + resultArr[i].name + '

    • '; } }; @@ -138,7 +138,7 @@ function processBrowseDir(resultArr) { $('#browsepath').html(''); } - updatePlayIcons(songdata.uri); + updatePlayIcons(songdata.track.uri, songdata.tlid); showLoading(false); } @@ -156,11 +156,11 @@ function processGetPlaylists(resultArr) { var child, tmp = '', starredRegex = /spotify:user:.*:starred/g, iconClass, starred; - + for (var i = 0; i < resultArr.length; i++) { iconClass = getMediaClass(resultArr[i].uri); - + // Check if this is Spotify's "Starred" playlist if(starredRegex.test(resultArr[i].uri)) { starred = '
  • ★ Spotify Starred Tracks
    • '; @@ -188,7 +188,7 @@ function processGetTracklist(resultArr) { var newplaylisturi = resultArr.uri; //console.log(resultArr); playlists[newplaylisturi] = resultArr; - setSongInfo(); + // setSongInfo(); resultsToTables(playlists[newplaylisturi].tracks, PLAYLIST_TABLE, newplaylisturi); showLoading(false); } @@ -198,9 +198,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); } /******************************************************** @@ -219,7 +219,7 @@ function processArtistResults(resultArr) { var artistname = getArtist(resultArr); $('#h_artistname, #artistpopupname').html(artistname); getArtistImage(artistname, '#artistviewimage, #artistpopupimage', 'extralarge'); - setSongInfo(); + // setSongInfo(); showLoading(false); } @@ -242,7 +242,7 @@ function processAlbumResults(resultArr) { $('#h_albumartist').html(artistname); $('#coverpopupalbumname').html(albumname); $('#coverpopupartist').html(artistname); - setSongInfo(); + // setSongInfo(); getCover(resultArr[0].album, '#albumviewcover, #coverpopupimage', 'extralarge'); showLoading(false); }