Skip to content

Commit

Permalink
Add more options to popup dialog box for inserting tracks in tracklist.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcass77
jcass77 committed Jan 6, 2017
1 parent 910ad3f commit 45dd2d6
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 53 deletions.
11 changes: 6 additions & 5 deletions mopidy_musicbox_webclient/static/css/webclient.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,13 +222,14 @@ span.hostInfo {
font-size: 28px;
}

.splitGroupLeft {
float: right;
.ui-block-a-min {
float: left !important;
width: initial !important;
}

.splitGroupRight {
float:right;
margin-left: -6px;
.ui-block-b-min {
float:right !important;
width: initial !important;
}

/***************
Expand Down
47 changes: 16 additions & 31 deletions mopidy_musicbox_webclient/static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ <h2>Artists</h2>
<a href="#" onclick="return controls.playQueueTrack();">Play <span class="popupTrackName"></span></a>
</li>
<li data-icon="playNext">
<a href="#" onclick="return controls.showInsertTrackPopup();">Insert Track After This One</a>
<a href="#" onclick="return controls.showAddTrackPopup();">Insert Track After This One</a>
</li>
<li data-icon="remove">
<a href="#" onclick="return controls.removeTrack();">Remove from Queue</a>
Expand All @@ -181,27 +181,17 @@ <h2>Artists</h2>
</div>
</div>

<div data-role="popup" data-theme="b" id="popupInsertTrack" class="popupDialog">
<form>
<p>Insert a Track to Play Next
<input id="insertTrackInput" placeholder="Track URI" class="span2" data-clear-btn="true"
onkeypress="return controls.checkDefaultButtonClick(event.keyCode, '#popupInsertTrack');" type="text"/>
<div data-role="controlgroup" data-type="horizontal" align="center">
<button class="btn" type="button" onclick="return $('#popupInsertTrack').popup('close');">
Cancel
</button>
<button class="btn" type="button" data-default-btn="true" onclick="return controls.insertTrack($('#insertTrackInput').val());">
Insert
</button>
</div>
</form>
</div><!--/insert track in queue to play next-->

<div data-role="popup" data-theme="b" id="popupAddTrack" class="popupDialog">
<form>
<p>Add a Track to End of Queue
<p>Add a Track to the Queue
<button class="btn" type="button" id="getPlayingBtn" title="Use URI of currently playing track" onclick="return controls.getCurrentlyPlaying('addTrackInput');">
Get Currently Playing URI
</button>
<input id="addTrackInput" placeholder="Track URI" class="span2" data-clear-btn="true"
onkeypress="return controls.checkDefaultButtonClick(event.keyCode, '#popupAddTrack');" type="text"/>
<div class="ui-field-contain">
<select name="select-add" id="select-add"></select>
</div>
<div data-role="controlgroup" data-type="horizontal" align="center">
<button class="btn" type="button" onclick="return $('#popupAddTrack').popup('close');">
Cancel
Expand All @@ -211,7 +201,7 @@ <h2>Artists</h2>
</button>
</div>
</form>
</div><!--/add track to bottom of queue-->
</div><!--/add track to queue-->

<div data-role="popup" data-theme="b" id="popupSave" class="popupDialog">
<form>
Expand Down Expand Up @@ -377,26 +367,21 @@ <h4>Browse</h4>

<div data-role="content" class="pane" id="currentpane">
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-block-a ui-block-a-min">
<h4>Play Queue</h4>
</div>
<div align="right" class="ui-block-b">
<div class="splitGroupRight" data-role="controlgroup" data-type="horizontal">
<div align="right" class="ui-block-b ui-block-b-min">
<div data-role="controlgroup" data-type="horizontal">
<button class="btn" type="button" title="Add a track to the queue" onclick="return controls.showAddTrackPopup();">
<i class="fa fa-plus"></i>
</button>
<button class="btn" type="button" title="Save queue to playlist" onclick="return controls.showSavePopup();">
<i class="fa fa-bookmark-o"></i>
</button>
<button class="btn" type="button" title="Clear queue" onclick="return controls.clearQueue();">
<i class="fa fa-times"></i>
</button>
</div>
<div class="splitGroupLeft" data-role="controlgroup" data-type="horizontal">
<button class="btn" type="button" title="Insert a Track to Play Next" onclick="return controls.showInsertTrackPopup();">
<i class="fa fa-level-down"></i>
</button>
<button class="btn" type="button" title="Add a Track to Bottom of Queue" onclick="return controls.showAddTrackPopup();">
<i class="fa fa-plus-square-o"></i>
</button>
</div>
</div>
</div>
<div class="ui-grid">
Expand Down Expand Up @@ -474,7 +459,7 @@ <h4>Streams</h4>
<div class="ui-block-a" style="padding: 5px">
<form>
<p>Play a specific stream/track and optionally save it to your favourites.
<button class="btn" type="button" onclick="return controls.getCurrentlyPlaying();">
<button class="btn" type="button" onclick="return controls.getCurrentlyPlaying('streamuriinput', 'streamnameinput');">
Get currently playing
</button>
<input id="streamuriinput" placeholder="URI" class="span2" data-clear-btn="true"
Expand Down
48 changes: 32 additions & 16 deletions mopidy_musicbox_webclient/static/js/controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,24 +224,45 @@
return true
},

showInsertTrackPopup: function (tlid) {
$('#insertTrackInput').val('')
showAddTrackPopup: function (tlid) {
$('#addTrackInput').val('')
$('#select-add').empty()
tlid = tlid || $('#popupQueue').data('tlid')
if (typeof tlid !== 'undefined' && tlid !== '') {
// Store the tlid of the track after which we want to perform the insert
$('#popupInsertTrack').data('tlid', $('#popupQueue').data('tlid'))
$('#popupInsertTrack').one('popupafterclose', function (event, ui) {
$('#popupAddTrack').data('tlid', $('#popupQueue').data('tlid'))
$('#popupAddTrack').one('popupafterclose', function (event, ui) {
// Ensure that popup attributes are reset when the popup is closed.
$(this).removeData('tlid')
})
var trackName = popupData[$('#popupQueue').data('track')].name
$('#select-add').append('<option value="0" selected="selected">Insert track after \'' + trackName + '\'</option>')
}
if (typeof songdata.track.uri !== 'undefined' && songdata.track.uri !== '') {
$('#getPlayingBtn').button('enable')
} else {
$('#getPlayingBtn').button('disable')
}

$('#select-add').append('<option value="1">Play Next</option>') // PLAY_NEXT
$('#select-add').append('<option value="2">Add to Bottom of Queue</option>') // ADD_THIS_BOTTOM
$('#select-add').trigger('change')

$('#popupQueue').popup('close')
$('#popupInsertTrack').popup('open')
$('#popupAddTrack').popup('open')
},

addTrack: function (trackUri) {
if (parseInt($('#select-add').val()) === ADD_THIS_BOTTOM) {
controls.addTrackToBottom(trackUri)
} else {
controls.insertTrack(trackUri)
}
},

insertTrack: function (trackUri) {
if (typeof trackUri !== 'undefined' && trackUri !== '') {
var tlid = $('#popupInsertTrack').data('tlid')
var tlid = $('#popupAddTrack').data('tlid')
if (typeof tlid !== 'undefined' && tlid !== '') {
mopidy.tracklist.index({tlid: parseInt(tlid)}).then(function (index) {
controls.playTracks(PLAY_NEXT, mopidy, trackUri, 'undefined', index)
Expand All @@ -250,17 +271,12 @@
// No tlid provided, insert after current track.
controls.playTracks(PLAY_NEXT, mopidy, trackUri, 'undefined')
}
$('#popupInsertTrack').popup('close')
$('#popupAddTrack').popup('close')
}
return false
},

showAddTrackPopup: function () {
$('#addTrackInput').val('')
$('#popupAddTrack').popup('open')
},

addTrack: function (trackUri) {
addTrackToBottom: function (trackUri) {
if (typeof trackUri !== 'undefined' && trackUri !== '') {
controls.playTracks(ADD_THIS_BOTTOM, mopidy, trackUri, 'undefined')
$('#popupAddTrack').popup('close')
Expand Down Expand Up @@ -518,16 +534,16 @@
return false
},

getCurrentlyPlaying: function () {
$('#streamuriinput').val(songdata.track.uri)
getCurrentlyPlaying: function (uriInput, nameInput) {
$('#' + uriInput).val(songdata.track.uri)
var name = songdata.track.name
if (songdata.track.artists) {
var artistStr = artistsToString(songdata.track.artists)
if (artistStr) {
name = artistStr + ' - ' + name
}
}
$('#streamnameinput').val(name)
$('#' + nameInput).val(name)
return true
},

Expand Down
2 changes: 1 addition & 1 deletion mopidy_musicbox_webclient/static/mb.appcache
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
CACHE MANIFEST

# 2016-12-11:v2
# 2017-01-06:v2

NETWORK:
*
Expand Down

0 comments on commit 45dd2d6

Please sign in to comment.