pimusicbox · jcass77 · Jan 14, 2017 · Dec 11, 2016 · Jan 8, 2017 · Jan 8, 2017
diff --git a/README.rst b/README.rst
@@ -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)

diff --git a/mopidy_musicbox_webclient/static/css/webclient.css b/mopidy_musicbox_webclient/static/css/webclient.css
@@ -1,6 +1,6 @@
 /*
  * Mopidy Webclient CSS
- * (c) Wouter van Wijk 2012-2013
+ * (c) Wouter van Wijk 2012-2017
  */
 
 /****************************
@@ -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  *
  ***************/
@@ -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;
 }
@@ -327,7 +370,6 @@ span.hostInfo {
 /**********************
  *  Now Playing area  *
  **********************/
-
 #nowPlayingFooter {
     height: 50px;
     line-height: 48px;
@@ -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 {
@@ -425,6 +468,10 @@ span.hostInfo {
     content: '\f149';
 }
 
+.ui-icon-insert:after {
+    content: '\f177';
+}
+
 .ui-icon-add:after {
     content: '\f196';
 }
@@ -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;
@@ -461,7 +514,6 @@ span.hostInfo {
 /****************
  *  Common use  *
  ****************/
-
 #playlistspane {
     margin: 0 !important;
 }
@@ -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,
@@ -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 {

diff --git a/mopidy_musicbox_webclient/static/index.html b/mopidy_musicbox_webclient/static/index.html
@@ -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">
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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">
@@ -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"