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); }