diff --git a/mopidy_musicbox_webclient/static/index.html b/mopidy_musicbox_webclient/static/index.html index 28e77da..4cddb4f 100644 --- a/mopidy_musicbox_webclient/static/index.html +++ b/mopidy_musicbox_webclient/static/index.html @@ -169,7 +169,7 @@
- @@ -429,7 +428,7 @@ Save
- diff --git a/mopidy_musicbox_webclient/static/js/controls.js b/mopidy_musicbox_webclient/static/js/controls.js index 7353dfa..02364cb 100644 --- a/mopidy_musicbox_webclient/static/js/controls.js +++ b/mopidy_musicbox_webclient/static/js/controls.js @@ -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(); diff --git a/mopidy_musicbox_webclient/static/js/functionsvars.js b/mopidy_musicbox_webclient/static/js/functionsvars.js index 6d1f995..c24944e 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; @@ -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 += ''; $(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 = '
  • ' + - '' + - '' + - '' + '' + - // '

    ' + 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; } @@ -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 += '

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

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

    ' + newalbum[0].name + "

    "; + var liID = targetmin + '-' + newalbum[0].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++) { @@ -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 += '

  • '; //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 5990673..3acfbcb 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,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 += '' + 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); @@ -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"); diff --git a/mopidy_musicbox_webclient/static/js/library.js b/mopidy_musicbox_webclient/static/js/library.js index 5dd2906..f149d86 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,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; } diff --git a/mopidy_musicbox_webclient/static/js/process_ws.js b/mopidy_musicbox_webclient/static/js/process_ws.js index b7a899a..c8e0d31 100644 --- a/mopidy_musicbox_webclient/static/js/process_ws.js +++ b/mopidy_musicbox_webclient/static/js/process_ws.js @@ -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); }