Skip to content

Commit

Permalink
Merge pull request #216 from jcass77/enhance/75_add_track_uri_to_queue
Browse files Browse the repository at this point in the history 
Add feature for adding track URI directly to the queue
  • Loading branch information
@jcass77
jcass77 authored Jan 14, 2017
2 parents f3a45d0 + 45d6e67 commit 37b267d
Show file tree
Hide file tree
Showing 9 changed files with 559 additions and 113 deletions.
7 changes: 6 additions & 1 deletion 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)
-------------------

- Now shows server name/IP address and port number at the bottom of the navigation pane. (Addresses: `#67 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/67>`_).
- 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
71 changes: 64 additions & 7 deletions mopidy_musicbox_webclient/static/css/webclient.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*
* Mopidy Webclient CSS
* (c) Wouter van Wijk 2012-2013
* (c) Wouter van Wijk 2012-2017
*/

/****************************
Expand Down 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,38 @@ span.hostInfo {
border-bottom: 1px solid #CECECE;
}

.info-table {
display: table !important;
}

.info-table thead {
visibility: collapse;
}

.info-table th {
border-bottom: none !important;
}

.info-table tr {
border-bottom: 1px solid #f2f2f2
}

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

.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 +370,6 @@ span.hostInfo {
/**********************
* Now Playing area *
**********************/

#nowPlayingFooter {
height: 50px;
line-height: 48px;
Expand Down Expand Up @@ -406,6 +448,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 +468,10 @@ span.hostInfo {
content: '\f149';
}

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

.ui-icon-add:after {
content: '\f196';
}
Expand All @@ -448,11 +495,17 @@ span.hostInfo {
font-weight: normal;
}

.popupDialog {
.popupDialog,
.popupDialog-full-width {
padding: 10px;
text-align: center;
}

.popupDialog-full-width {
padding-left: 0;
padding-right: 0;
}

/*dont hide clear buttons in text input */
.ui-input-clear-hidden {
display: block !important;
Expand All @@ -461,7 +514,6 @@ span.hostInfo {
/****************
* Common use *
****************/

#playlistspane {
margin: 0 !important;
}
Expand Down Expand Up @@ -545,13 +597,13 @@ a {
}

/*helper*/

.ui-loader h1 {
color: #efefef;
}

/* panel workaround to make it responsive wrap push on wide viewports once open */
@media (min-width: 35em){
/*tablets and desktop*/
@media (min-width: 35em) {
/* panel workaround to make it responsive wrap push on wide viewports once open */
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push,
Expand All @@ -569,7 +621,12 @@ a {
.ui-responsive-panel .ui-panel-dismiss-display-reveal {
display: none;
}

.popupDialog {
min-width: 320px;
}
}

/*smartphones*/
@media (max-width: 35em) {
#nowPlayingpane {
Expand Down
107 changes: 91 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,48 @@ <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"/>
<select name="select-add" id="select-add"></select>
<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 +251,48 @@ <h2>Artists</h2>
</form>
</div><!--/confirm delete stream-->

<div data-role="popup" data-theme="b" id="popupShowInfo" class="popupDialog-full-width">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<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>
</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 +413,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 +505,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 37b267d

Please sign in to comment.