From faf146b4a8a22e9d15c3bf2641e87f179b373112 Mon Sep 17 00:00:00 2001
From: jcass <john.cass77@gmail.com>
Date: Sat, 7 Jan 2017 18:07:01 +0200
Subject: [PATCH] Add 'Show Track Info' popup dialog.

---
 README.rst                                    |  2 +
 .../static/css/webclient.css                  | 15 ++++
 mopidy_musicbox_webclient/static/index.html   | 52 +++++++++++++-
 .../static/js/controls.js                     | 71 ++++++++++++++++++-
 4 files changed, 136 insertions(+), 4 deletions(-)

diff --git a/README.rst b/README.rst
index 6fb879d2..4195e62a 100644
--- a/README.rst
+++ b/README.rst
@@ -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**
 
diff --git a/mopidy_musicbox_webclient/static/css/webclient.css b/mopidy_musicbox_webclient/static/css/webclient.css
index f01fe7f0..5cbbe85c 100644
--- a/mopidy_musicbox_webclient/static/css/webclient.css
+++ b/mopidy_musicbox_webclient/static/css/webclient.css
@@ -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;
 }
diff --git a/mopidy_musicbox_webclient/static/index.html b/mopidy_musicbox_webclient/static/index.html
index 8dcf3065..9c94983d 100644
--- a/mopidy_musicbox_webclient/static/index.html
+++ b/mopidy_musicbox_webclient/static/index.html
@@ -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>
@@ -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>
@@ -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>
@@ -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>
diff --git a/mopidy_musicbox_webclient/static/js/controls.js b/mopidy_musicbox_webclient/static/js/controls.js
index d8758a01..ec94aebf 100644
--- a/mopidy_musicbox_webclient/static/js/controls.js
+++ b/mopidy_musicbox_webclient/static/js/controls.js
@@ -240,7 +240,7 @@
                     $(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')
@@ -248,8 +248,8 @@
                 $('#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')
@@ -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 = {}