Fix formatting of track length in 'Show Info' popup.

mopidy_musicbox_webclient/static/index.html

@@ -151,7 +151,7 @@
                 <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>
+                <a href="#" onclick="return controls.showInfoPopup('#popupTracks', mopidy);">Show Track Info...</span></a>
             </li>
         </ul>
     </div>
@@ -181,7 +181,7 @@
                 <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>
+                <a href="#" onclick="return controls.showInfoPopup('#popupQueue', mopidy);">Show Track Info...</span></a>
             </li>
         </ul>
     </div>

mopidy_musicbox_webclient/static/js/controls.js

@@ -338,14 +338,19 @@
             })
         },
 
-        showInfoPopup: function (popupId) {
+        showInfoPopup: function (popupId, mopidy) {
             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.name) {
+                    $('#popupShowInfo #name-cell').text(track.name)
+                } else {
+                    $('#popupShowInfo #name-cell').text('(Not available)')
+                }
+
                 if (track.album && track.album.name) {
                     $('#popupShowInfo #album-cell').text(track.album.name)
                 } else {
@@ -383,8 +388,7 @@
                     $('#popupShowInfo #track-no-row').hide()
                 }
                 if (track.length) {
-                    var duration = new Date(track.length)
+                    $('#popupShowInfo #length-cell').text(timeFromSeconds(track.length / 1000))
-                    $('#popupShowInfo #length-cell').text(duration.getUTCMinutes() + ':' + duration.getUTCSeconds())
                     $('#popupShowInfo #length-row').show()
                 } else {
                     $('#popupShowInfo #length-row').hide()

tests/js/test_controls.js

@@ -360,4 +360,47 @@ describe('controls', function () {
             })
         })
     })
+
+    describe('#showInfoPopup()', function () {
+        var track
+        var popup = $('<div data-role="popup" id="popupShowInfo"></div>')
+
+        before(function () {
+            track = {
+                'uri': QUEUE_TRACKS[0].uri,
+                'length': 61000
+            }
+            var library = {
+                lookup: sinon.stub()
+            }
+            mopidy.library = library
+            mopidy.library.lookup.returns($.when({'track:tlTrackMock1': [track]}))
+
+            $(document.body).append(popup)
+            $('#popupTracks').data(track, track.uri)  // Simulate selection from context menu
+            $('#popupShowInfo').popup()  // Initialize popup
+        })
+
+        afterEach(function () {
+            mopidy.library.lookup.reset()
+        })
+
+        it('should default track name', function () {
+            popup.append('<span id="name-cell"></span>')
+            controls.showInfoPopup('#popupTracks', mopidy)
+            assert.equal($('#name-cell').text(), '(Not available)')
+        })
+
+        it('should default album name', function () {
+            popup.append('<span id="album-cell"></span>')
+            controls.showInfoPopup('#popupTracks', mopidy)
+            assert.equal($('#album-cell').text(), '(Not available)')
+        })
+
+        it('should add leading zero if seconds length < 10', function () {
+            popup.append('<span id="length-cell"></span>')
+            controls.showInfoPopup('#popupTracks', mopidy)
+            assert.equal($('#length-cell').text(), '1:01')
+        })
+    })
 })