From f21265859749696030eeb7f35e021b5ec400c3f5 Mon Sep 17 00:00:00 2001 From: wagamama Date: Sun, 15 Mar 2015 21:25:12 +0800 Subject: [PATCH] Add more button in browse pane 1. Play all (flush queue, add all tracks and play) 2. Play track (stop current, add track to next and play next) 3. Play next (add track to next) 4. Add track to queue 5. Add all tracks to queue --- mopidy_musicbox_webclient/static/index.html | 22 ++++++- .../static/js/controls.js | 57 ++++++++++++++----- .../static/js/functionsvars.js | 1 + mopidy_musicbox_webclient/static/js/gui.js | 29 +++++----- .../static/js/process_ws.js | 14 +++-- 5 files changed, 90 insertions(+), 33 deletions(-) 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
    • ';