Skip to content

Commit

Permalink
Add feature to allow insertion of track URI at any point in the queue.
Browse files Browse the repository at this point in the history 
Fixes pimusicbox#75.
  • Loading branch information
@jcass77
jcass77 committed Jan 7, 2017
1 parent f3a45d0 commit a9c998c
Show file tree
Hide file tree
Showing 9 changed files with 517 additions and 104 deletions.
5 changes: 5 additions & 0 deletions README.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,12 +106,17 @@ Changelog
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**

- Only show 'Show Album' or 'Show Artist' options in popup menus if URI's for those resources are available.
(Fixes: `#213 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/213>`_).
- Now shows correct hostname information in loader popup. (Fixes: `#209 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/209>`_).
- Now shows server name/IP address and port number at the bottom of the navigation pane. (Fixes: `#67 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/67>`_).
- Reset 'Now Playing' info when the last track in the tracklist is deleted. Fixes an issue where info of the last song played would be displayed even after the queue had been cleared.
- Use correct icons for folders, audio, and other files when browsing local files.

v2.3.0 (2016-05-15)
Expand Down
35 changes: 32 additions & 3 deletions mopidy_musicbox_webclient/static/css/webclient.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,17 @@ span.hostInfo {
#homerows div i {
font-size: 28px;
}

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

.ui-block-b-min {
float:right !important;
width: initial !important;
}

/***************
* listviews *
***************/
Expand Down Expand Up @@ -249,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 Expand Up @@ -327,7 +353,6 @@ span.hostInfo {
/**********************
* Now Playing area *
**********************/

#nowPlayingFooter {
height: 50px;
line-height: 48px;
Expand Down Expand Up @@ -406,6 +431,7 @@ span.hostInfo {
.ui-icon-playAll:after,
.ui-icon-play:after,
.ui-icon-playNext:after,
.ui-icon-insert:after,
.ui-icon-add:after,
.ui-icon-addAll:after,
.ui-icon-remove:after {
Expand All @@ -425,6 +451,10 @@ span.hostInfo {
content: '\f149';
}

.ui-icon-insert:after {
content: '\f177';
}

.ui-icon-add:after {
content: '\f196';
}
Expand Down Expand Up @@ -461,7 +491,6 @@ span.hostInfo {
/****************
* Common use *
****************/

#playlistspane {
margin: 0 !important;
}
Expand Down Expand Up @@ -545,7 +574,6 @@ a {
}

/*helper*/

.ui-loader h1 {
color: #efefef;
}
Expand All @@ -570,6 +598,7 @@ a {
display: none;
}
}

/*smartphones*/
@media (max-width: 35em) {
#nowPlayingpane {
Expand Down
111 changes: 95 additions & 16 deletions mopidy_musicbox_webclient/static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,14 +111,14 @@

<h3 id="coverpopupalbumname"></h3>
<h4 id="coverpopupartist"></h4>
<a href="#" onclick="closePopups();"><img id="coverpopupimage" src="" alt="Album cover"/></a>
<a href="#" onclick="$('#coverpopup').popup('close');"><img id="coverpopupimage" src="" alt="Album cover"/></a>
</div>

<div id="artistpopup" data-role="popup" data-theme="c">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext"
class="ui-btn-right">Close</a>
<h4 id="artistpopupname">&nbsp;</h4>
<a href="#" onclick="closePopups();"><img id="artistpopupimage" src="" alt="Album artist"/></a>
<a href="#" onclick="$('#artistpopup').popup('close');"><img id="artistpopupimage" src="" alt="Album artist"/></a>
</div>

<div data-role="popup" data-transition="none" data-theme="b" id="popupTracks">
Expand Down 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 @@ -160,8 +163,11 @@ <h2>Artists</h2>
<li data-icon="play">
<a href="#" onclick="return controls.playQueueTrack();">Play <span class="popupTrackName"></span></a>
</li>
<li data-icon="insert">
<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();">Remove from Queue</a>
<a href="#" onclick="return controls.removeTrack('', mopidy);">Remove from Queue</a>
</li>
<li class="popupAlbumLi">
<a href="#" onclick="showAlbumPopup('#popupQueue')">Show Album <span class="popupAlbumName"></span></a>
Expand All @@ -174,26 +180,50 @@ <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>

<div data-role="popup" data-theme="b" id="popupAddTrack" class="popupDialog">
<form>
<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
</button>
<button class="btn" type="button" data-default-btn="true" onclick="return controls.addTrack($('#addTrackInput').val(), mopidy);">
Add
</button>
</div>
</form>
</div><!--/add track to queue-->

<div data-role="popup" data-theme="b" id="popupSave" class="popupDialog">
<form>
<p>Save Current Queue to a Playlist
<input id="saveinput" placeholder="Playlist name" class="span2" data-clear-btn="true"
onkeypress="return controls.savePressed(event.keyCode);" type="text"/>
onkeypress="return controls.checkDefaultButtonClick(event.keyCode, '#popupSave');" type="text"/>
<div data-role="controlgroup" data-type="horizontal" align="center">
<button class="btn" type="button" onclick="return $('#popupSave').popup('close');">
Cancel
</button>
<button class="btn" type="button" onclick="return controls.saveQueue();">
<button class="btn" type="button" data-default-btn="true" onclick="return controls.saveQueue();">
Save
</button>
</div>
</form>
</div>
<!--/save queue to playlist-->
</div><!--/save queue to playlist-->

<div data-role="popup" data-theme="b" id="popupOverwrite" class="popupDialog">
<form>
Expand Down Expand Up @@ -223,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 Expand Up @@ -343,16 +417,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" data-role="controlgroup" data-type="horizontal">
<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 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>
</div>
<div class="ui-grid">
Expand Down Expand Up @@ -430,7 +509,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
Loading

0 comments on commit a9c998c

Please sign in to comment.