Fix stream title handling

mopidy_musicbox_webclient/static/css/webclient.css

@@ -423,8 +423,9 @@ span.hostInfo {
 /************
  *  Popups  *
  ************/
-#modalalbum a, #modalartist a, #modalname a {
+#modalname a, #modaldetail a {
     color: #444;
+    background-color:#F8F8F5;
     text-decoration: none;
 }
 
@@ -587,7 +588,7 @@ a {
     text-overflow: ellipsis;
 }
 
-#infoartist {
+#infodetail {
     overflow: hidden;
     font-size: 11px;
     white-space: nowrap;

mopidy_musicbox_webclient/static/index.html

@@ -340,7 +340,7 @@ <h4>System</h4>
 
     <div class="nowPlaying-artistInfo">
         <h3 id="modalname"></h3>
-        <p class="artistAlbumLine"><span id="modalartist"></span> - <span id="modalalbum"></span></p>
+        <p class="artistAlbumLine"><span id="modaldetail"></span></p>
     </div>
 
     <div id="slidercontainer"><!-- slider for track position -->
@@ -516,7 +516,7 @@ <h4>Streams</h4>
             <a href="#"><div style="float: left"><img id="infocover" src="images/default_cover.png" alt="Album cover"/></div></a>
             <div class="songinfo-text">
                 <div id="infoname"></div>
-                <div id="infoartist"></div>
+                <div id="infodetail"></div>
             </div>
         </div>
         <div class="playicon">

mopidy_musicbox_webclient/static/js/functionsvars.js

@@ -23,8 +23,10 @@ var initgui = true
 var popupData = {}  // TODO: Refactor into one shared cache
 var songlength = 0
 
-var artistshtml = ''
-var artiststext = ''
+var artistsHtml = ''
+var artistsText = ''
+var albumHtml = ''
+var albumText = ''
 var songname = ''
 var songdata = {'track': {}, 'tlid': -1}
 

mopidy_musicbox_webclient/static/js/gui.js

@@ -16,33 +16,62 @@ function resetSong () {
     data.track.artists = ''
     data.track.length = 0
     data.track.uri = ''
+    data.stream = ''
     setSongInfo(data)
 }
 
+/* Name:    Use stream title if we have it, else track name.
+ * Detail:  If we don't know artist and it's a stream then show track name instead.
+ *          If we know both artist and album show them, otherwise just show artist if we know it.
+ */
+function showSongInfo (data) {
+    var name = data.track.name
+    if (data.stream) {
+        name = data.stream
+    }
+    $('#modalname').html('<a href="#" onclick="return controls.showInfoPopup(\'' + data.track.uri + '\', \'\', mopidy);">' + name + '</span></a>')
+    if (!artistsHtml && data.stream) {
+        $('#modaldetail').html(data.track.name)
+    } else if (artistsHtml.length) {
+        if (albumHtml.length) {
+            $('#modaldetail').html(albumHtml + ' - ' + artistsHtml)
+        } else {
+            $('#modaldetail').html(artistsHtml)
+        }
+    }
+
+    $('#infoname').html(name)
+    if (!artistsText && data.stream) {
+        $('#infodetail').html(data.track.name)
+    } else if (artistsText.length) {
+        if (albumText.length) {
+            $('#infodetail').html(albumText + ' - ' + artistsText)
+        } else {
+            $('#infodetail').html(artistsText)
+        }
+    }
+}
+
+function setStreamTitle (title) {
+    songdata.stream = title
+    showSongInfo(songdata)
+}
+
 function resizeMb () {
     if ($(window).width() < 880) {
         $('#panel').panel('close')
     } else {
         $('#panel').panel('open')
     }
 
-    $('#infoname').html(songdata.track.name)
-    $('#infoartist').html(artiststext)
+    showSongInfo(songdata)
 
     if ($(window).width() > 960) {
         $('#playlisttracksdiv').show()
         $('#playlistslistdiv').show()
     }
 }
 
-function setSongTitle (track, refresh_ui) {
-    songdata.track.name = track.name
-    $('#modalname').html('<a href="#" onclick="return controls.showInfoPopup(\'' + track.uri + '\', \'\', mopidy);">' + track.name + '</span></a>')
-    if (refresh_ui) {
-        resizeMb()
-    }
-}
-
 function setSongInfo (data) {
     if (!data) { return }
     if (data.tlid === songdata.tlid) { return }
@@ -52,8 +81,6 @@ function setSongInfo (data) {
     }
 
     updatePlayIcons(data.track.uri, data.tlid, controls.getIconForAction())
-    artistshtml = ''
-    artiststext = ''
 
     if (validUri(data.track.name)) {
         for (var key in streamUris) {
@@ -63,13 +90,10 @@ function setSongInfo (data) {
             }
         }
     }
-
     songdata = data
 
-    setSongTitle(data.track, false)
-    songlength = Infinity
-
     if (!data.track.length || data.track.length === 0) {
+        songlength = Infinity
         $('#trackslider').next().find('.ui-slider-handle').hide()
         $('#trackslider').slider('disable')
         // $('#streamnameinput').val(data.track.name);
@@ -80,24 +104,26 @@ function setSongInfo (data) {
         $('#trackslider').next().find('.ui-slider-handle').show()
     }
 
-    var arttmp = ''
-
+    artistsHtml = ''
+    artistsText = ''
     if (data.track.artists) {
         for (var j = 0; j < data.track.artists.length; j++) {
-            artistshtml += '<a href="#" onclick="return library.showArtist(\'' + data.track.artists[j].uri + '\', mopidy);">' + data.track.artists[j].name + '</a>'
-            artiststext += data.track.artists[j].name
+            var artistName = data.track.artists[j].name
             if (j !== data.track.artists.length - 1) {
-                artistshtml += ', '
-                artiststext += ', '
+                artistName += ', '
             }
+            artistsHtml += '<a href="#" onclick="return library.showArtist(\'' + data.track.artists[j].uri + '\', mopidy);">' + artistName + '</a>'
+            artistsText += artistName
         }
-        arttmp = artistshtml
     }
+
+    albumHtml = ''
+    albumText = ''
     if (data.track.album && data.track.album.name) {
-        $('#modalalbum').html('<a href="#" onclick="return library.showAlbum(\'' + data.track.album.uri + '\', mopidy);">' + data.track.album.name + '</a>')
-    } else {
-        $('#modalalbum').html('')
+        albumHtml = '<a href="#" onclick="return library.showAlbum(\'' + data.track.album.uri + '\', mopidy);">' + data.track.album.name + '</a>'
+        albumText = data.track.album.name
     }
+
     images.setAlbumImage(data.track.uri, '#infocover, #albumCoverImg', mopidy)
     if (data.track.uri) {
         // Add 'Show Info' icon to album image
@@ -106,8 +132,6 @@ function setSongInfo (data) {
             '<i class="fa fa-info-circle"></i></a>')
     }
 
-    $('#modalartist').html(arttmp)
-
     $('#trackslider').attr('min', 0)
     $('#trackslider').attr('max', songlength)
     syncedProgressTimer.reset().set(0, songlength)
@@ -282,8 +306,9 @@ function initSocketevents () {
     })
 
     mopidy.on('event:streamTitleChanged', function (data) {
-        // Update all track info.
-        mopidy.playback.getCurrentTlTrack().then(processCurrenttrack, console.error)
+        // The stream title is separate from the current track.
+        setStreamTitle(data.title)
+        controls.setPlayState(true)
     })
 }
 

mopidy_musicbox_webclient/static/js/library.js

@@ -275,7 +275,12 @@
             $('#controlsmodal').popup('close')
             $(ARTIST_TABLE).empty()
 
+            if (!nwuri.length || nwuri === 'undefined') {
+                return false
+            }
+
             // TODO cache
+
             $('#h_artistname').html('')
             showLoading(true)
             mopidy.library.lookup({'uris': [nwuri]}).then(function (resultDict) {
@@ -293,6 +298,11 @@
             $('#popupTracks').popup('close')
             $('#controlsmodal').popup('close')
             $(ALBUM_TABLE).empty()
+
+            if (!uri.length || uri === 'undefined') {
+                return false
+            }
+
             // fill from cache
             var pl = getTracksFromUri(uri, true)
             if (pl.length > 0) {

mopidy_musicbox_webclient/static/js/process_ws.js

@@ -6,10 +6,13 @@
  */
 
 /** ******************************************************
- * process results of a (new) currently playing track
+ * process results of a (new) currently playing track and any stream title
  *********************************************************/
 function processCurrenttrack (data) {
     setSongInfo(data)
+    mopidy.playback.getStreamTitle().then(function (title) {
+        setStreamTitle(title)
+    }, console.error)
 }
 
 /** ******************************************************