diff --git a/mopidy_musicbox_webclient/static/index.html b/mopidy_musicbox_webclient/static/index.html index 9b0ef26..b800ff3 100644 --- a/mopidy_musicbox_webclient/static/index.html +++ b/mopidy_musicbox_webclient/static/index.html @@ -143,7 +143,27 @@ - +
+
+ +
+
diff --git a/mopidy_musicbox_webclient/static/js/controls.js b/mopidy_musicbox_webclient/static/js/controls.js index 786eefe..514e18b 100644 --- a/mopidy_musicbox_webclient/static/js/controls.js +++ b/mopidy_musicbox_webclient/static/js/controls.js @@ -4,12 +4,14 @@ function playBrowsedTracks(addtoqueue, trackid) { //stop directly, for user feedback. - if (!addtoqueue) { + if (addtoqueue == PLAY_ALL) { mopidy.playback.stop(true); mopidy.tracklist.clear(); } toast('Loading...'); + trackid = typeof trackid !== 'undefined' ? trackid : $('#popupBrowse').data("track"); + var selected = 0, counter = 0; var isStream = isStreamUri(trackid); @@ -17,23 +19,48 @@ function playBrowsedTracks(addtoqueue, trackid) { if (isStream) { mopidy.tracklist.add(null, null, trackid); } else { - //add selected item to the playlist - $('.browsetrack').each(function() { - if (this.id == trackid) { - selected = counter; - } - mopidy.tracklist.add(null, null, this.id); - counter++; - }); + switch (addtoqueue) { + case PLAY_NOW: + case PLAY_NEXT: + //find track that is playing + for (var playing = 0; playing < currentplaylist.length; playing++) { + if (currentplaylist[playing].uri == songdata.uri) { + break; + } + } + mopidy.tracklist.add(null, playing + 1, trackid); + break; + case ADD_THIS_BOTTOM: + mopidy.tracklist.add(null, null, trackid); + break; + case ADD_ALL_BOTTOM: + case PLAY_ALL: + //add selected item to the playlist + $('.browsetrack').each(function() { + if (this.id == trackid) { + selected = counter; + } + mopidy.tracklist.add(null, null, this.id); + counter++; + }); + break; + default: + break; + } + } //play selected item - if (!addtoqueue) { + if (addtoqueue == PLAY_ALL) { mopidy.playback.stop(); for (var i = 0; i <= selected; i++) { mopidy.playback.next(); } mopidy.playback.play(); //tracks[selected]); + } else if (addtoqueue == PLAY_NOW) { + mopidy.playback.stop(); + mopidy.playback.next(); + mopidy.playback.play(); } //add all items, but selected to the playlist @@ -73,18 +100,18 @@ function playTrack(addtoqueue) { mopidy.playback.stop(true); mopidy.tracklist.clear(); } + $('#popupTracks').popup('close'); $('#controlspopup').popup('close'); toast('Loading...'); - playlisturi = $('#popupTracks').data("list"); - - uri = $('#popupTracks').data("track"); - var trackslist = new Array(); var track, tracksbefore, tracksafter; var tracks = getTracksFromUri(playlisturi); + playlisturi = $('#popupTracks').data("list"); + uri = $('#popupTracks').data("track"); + //find track that was selected for (var selected = 0; selected < tracks.length; selected++) { if (tracks[selected].uri == uri) { @@ -140,7 +167,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) { diff --git a/mopidy_musicbox_webclient/static/js/functionsvars.js b/mopidy_musicbox_webclient/static/js/functionsvars.js index 9db68a3..6d1f995 100644 --- a/mopidy_musicbox_webclient/static/js/functionsvars.js +++ b/mopidy_musicbox_webclient/static/js/functionsvars.js @@ -70,6 +70,7 @@ PLAY_NOW = 0; PLAY_NEXT = 1; ADD_THIS_BOTTOM = 2; ADD_ALL_BOTTOM = 3; +PLAY_ALL = 4; MAX_TABLEROWS = 50; diff --git a/mopidy_musicbox_webclient/static/js/gui.js b/mopidy_musicbox_webclient/static/js/gui.js index 82d2b96..5990673 100644 --- a/mopidy_musicbox_webclient/static/js/gui.js +++ b/mopidy_musicbox_webclient/static/js/gui.js @@ -90,7 +90,7 @@ function setSongInfo(data) { } }; } - + songdata = data; $("#modalname").html(data.name); @@ -109,7 +109,7 @@ function setSongInfo(data) { } var arttmp = ''; - + if(data.artists) { for (var j = 0; j < data.artists.length; j++) { artistshtml += '' + data.artists[j].name + ''; @@ -134,7 +134,7 @@ function setSongInfo(data) { $("#trackslider").attr("min", 0); $("#trackslider").attr("max", data.length); - + resizeMb(); } @@ -159,7 +159,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(); @@ -184,9 +184,12 @@ function popupTracks(e, listuri, trackuri) { if (divid == 'current') { $(".addqueue").hide(); var popupName = '#popupQueue'; + } else if (divid == 'browse') { + $(".addqueue").show(); + var popupName = '#popupBrowse'; } else { $(".addqueue").show(); - var popupName = '#popupTracks'; + var popupName = '#popupTracks'; } $(popupName).data("list", listuri).data("track", trackuri).popup("open", { @@ -221,7 +224,7 @@ function initSocketevents() { resetSong(); showOffline(true); }); - + mopidy.on("event:optionsChanged", updateOptions); mopidy.on("event:trackPlaybackStarted", function(data) { @@ -487,9 +490,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,16 +555,16 @@ $(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) { diff --git a/mopidy_musicbox_webclient/static/js/process_ws.js b/mopidy_musicbox_webclient/static/js/process_ws.js index 0b8fda9..8f54176 100644 --- a/mopidy_musicbox_webclient/static/js/process_ws.js +++ b/mopidy_musicbox_webclient/static/js/process_ws.js @@ -110,13 +110,19 @@ 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 + '

  • '; } }; @@ -156,11 +162,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
  • ';