Skip to content

Commit

Permalink
Add 'Show Track Info' popup dialog.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcass77
jcass77 committed Jan 7, 2017
1 parent 24416ee commit faf146b
Show file tree
Hide file tree
Showing 4 changed files with 136 additions and 4 deletions.
2 changes: 2 additions & 0 deletions README.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,8 @@ v2.4.0 (UNRELEASED)
-------------------

- Add ability to insert a track anywhere in the current queue. (Addresses: `#75 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/75>`_).
- Add 'Show Track Info' popup which can be activated from any context menu. The popup includes the URI of the track,
which can be inserted into various lists elsewhere in the player.

**Fixes**

Expand Down
15 changes: 15 additions & 0 deletions mopidy_musicbox_webclient/static/css/webclient.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,21 @@ span.hostInfo {
border-bottom: 1px solid #CECECE;
}

.info-table td {
color: #555 !important;
padding: 2px;
padding-right: 4px;
padding-left: 4px;
}

.info-table td.label {
font-weight: bold;
}

.info-table td.label-center {
vertical-align: middle;
}

.albumdivider h1, .table li h1 {
font-size: 120% !important;
}
Expand Down
52 changes: 51 additions & 1 deletion mopidy_musicbox_webclient/static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,9 @@ <h4 id="artistpopupname">&nbsp;</h4>
<h2>Artists</h2>
<ul data-icon="false" data-inset="false" data-role="listview" class="popupArtistsLv"></ul>
</div>
<li>
<a href="#" onclick="return controls.showInfoPopup('#popupTracks');">Show Track Info...</span></a>
</li>
</ul>
</div>
</div>
Expand All @@ -161,7 +164,7 @@ <h2>Artists</h2>
<a href="#" onclick="return controls.playQueueTrack();">Play <span class="popupTrackName"></span></a>
</li>
<li data-icon="insert">
<a href="#" onclick="return controls.showAddTrackPopup();">Insert Below this Track</a>
<a href="#" onclick="return controls.showAddTrackPopup();">Add a Track Below <span class="popupTrackName"></span></a>
</li>
<li data-icon="remove">
<a href="#" onclick="return controls.removeTrack('', mopidy);">Remove from Queue</a>
Expand All @@ -177,6 +180,9 @@ <h2>Artists</h2>
<h2>Artists</h2>
<ul data-icon="false" data-inset="false" data-role="listview" class="popupArtistsLv"></ul>
</div>
<li>
<a href="#" onclick="return controls.showInfoPopup('#popupQueue');">Show Track Info...</span></a>
</li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -247,6 +253,50 @@ <h2>Artists</h2>
</form>
</div><!--/confirm delete stream-->

<div data-role="popup" data-theme="b" id="popupShowInfo" class="popupDialog">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<form>
<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke info-table">
<thead>
<tr>
<th data-priority="persist"></th>
<th data-priority="persist"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="label">Name:</td>
<td id="name-cell"></td>
</tr>
<tr id="album-row">
<td class="label">Album:</td>
<td id="album-cell"></td>
</tr>
<tr id="artist-row">
<td class="label">Artist(s):</td>
<td id="artist-cell"></td>
</tr>
<tr id="track-no-row">
<td class="label">Track #:</td>
<td id="track-no-cell"></td>
</tr>
<tr id="length-row">
<td class="label">Length:</td>
<td id="length-cell"></td>
</tr>
<tr id="bitrate-row">
<td class="label">Bitrate:</td>
<td id="bitrate-cell"></td>
</tr>
<tr>
<td class="label label-center">URI:</td>
<td><input type="text" id="uri-cell"></input></td>
</tr>
</tbody>
</table>
</form>
</div><!--/show track info-->

<div data-role="header" data-tap-toggle="false" id="header" data-position="fixed" class="header-breakpoint headerbtn">
<a id="headermenubtn" href="#panel"><i class="fa fa-align-justify"></i></a>
<h1 id="contentHeadline">Initializing...</h1>
Expand Down
71 changes: 68 additions & 3 deletions mopidy_musicbox_webclient/static/js/controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,16 +240,16 @@
$(this).removeData('tlid')
})
var trackName = popupData[$('#popupQueue').data('track')].name
$('#select-add').append('<option value="6" selected="selected">Insert track below \'' + trackName + '\'</option>')
$('#select-add').append('<option value="6" selected="selected">Add Track Below \'' + 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').append('<option value="1">Play Added Track Next</option>') // PLAY_NEXT
$('#select-add').append('<option value="2">Add Track to Bottom of Queue</option>') // ADD_THIS_BOTTOM
$('#select-add').trigger('change')

$('#popupQueue').popup('close')
Expand Down Expand Up @@ -340,6 +340,71 @@
})
},

showInfoPopup: function (popupId) {
showLoading(true)
var uri = $(popupId).data('track')
$(popupId).popup('close')
mopidy.library.lookup({'uris': [uri]}).then(function (resultDict) {
var uri = Object.keys(resultDict)[0]
var track = resultDict[uri][0]
$('#popupShowInfo #name-cell').text(track.name)
if (track.album && track.album.name) {
$('#popupShowInfo #album-cell').text(track.album.name)
} else {
$('#popupShowInfo #album-cell').text('(Not available)')
}
var artistNames = ''
if (track.artists && track.artists.length > 0) {
for (var i = 0; i < track.artists.length; i++) {
if (i > 0) {
artistNames = artistNames + ', '
}
artistNames = artistNames + track.artists[i].name
}
}

// Fallback to album artists.
if (artistNames.length === 0 && track.album.artists && track.album.artists.length > 0) {
for (i = 0; i < track.album.artists.length; i++) {
if (i > 0) {
artistNames = artistNames + ', '
}
artistNames = artistNames + track.album.artists[i].name
}
}
if (artistNames.length > 0) {
$('#popupShowInfo #artist-cell').text(artistNames)
$('#popupShowInfo #artist-row').show()
} else {
$('#popupShowInfo #artist-row').hide()
}
if (track.track_no) {
$('#popupShowInfo #track-no-cell').text(track.track_no)
$('#popupShowInfo #track-no-row').show()
} else {
$('#popupShowInfo #track-no-row').hide()
}
if (track.duration) {
var duration = new Date(track.length)
$('#popupShowInfo #length-cell').text(duration.getUTCMinutes() + ':' + duration.getUTCSeconds())
$('#popupShowInfo #length-row').show()
} else {
$('#popupShowInfo #length-row').hide()
}
if (track.bitrate) {
$('#popupShowInfo #bitrate-cell').text(track.bitrate)
$('#popupShowInfo #bitrate-row').show()
} else {
$('#popupShowInfo #bitrate-row').hide()
}
$('#popupShowInfo #uri-cell').val(uri)
showLoading(false)
$('#popupShowInfo').popup('open')
$('#popupShowInfo #uri-cell').focus()
$('#popupShowInfo #uri-cell').select()
}, console.error)
},

refreshPlaylists: function () {
mopidy.playlists.refresh().then(function () {
playlists = {}
Expand Down

0 comments on commit faf146b

Please sign in to comment.