load the song metadata from the backend, instead of scraping the playlist HTML

server/djrandom/frontend/static/js/djr/backend.js

@@ -184,6 +184,21 @@ djr.Backend.prototype.streamPlaylist = function(uuid, streaming, callback, ctx)
          });
 };
 
+/**
+ * Return song information.
+ *
+ * @param {string} song SHA1 of the song
+ */
+djr.Backend.prototype.getSongInfo = function(song, callback) {
+  $.ajax({url: '/json/song/' + song,
+          dataType: 'json',
+          type: 'GET',
+          success: function(data, status, jqxhr) {
+            callback(data);
+          }
+         });
+};
+
 /**
  * Return the HTML fragment to render a list of songs.
  *

server/djrandom/frontend/static/js/djr/djr.js

@@ -242,3 +242,13 @@ djr.generateRandomId = function() {
   return uuid.join('');
 };
 
+// Add the escapeHTML() function to the String base class.
+String.prototype.escapeHTML = function () {
+  return(
+    this.replace(/&/g,'&').
+      replace(/>/g,'>').
+      replace(/</g,'&lt;').
+      replace(/"/g,'&quot;')
+  );
+};
+

server/djrandom/frontend/static/js/djr/player.js

@@ -331,21 +331,23 @@ djr.Player.prototype.play = function(song) {
   this.player.jPlayer('setMedia',
                       {mp3: url}).jPlayer('play');
 
-  // Load song info in the player UI. We cheat by stealing the data
-  // from the existing <div> instead than from the server.
-  var artist = $('#song_' + song + ' .artist').text();
-  var album = $('#song_' + song + ' .album').text();
+  // Load song info in the player UI.
+  this.backend.getSongInfo(song, function(song_info) {
+    // Show song info.
     $('#songInfoDiv').html(
-    $('#song_' + song + ' .title').text() + '<br>'
-      + artist + '<br>'
-      + '<small>' + album + '</small>'
+      song_info.title.escapeHTML() + '<br>'
+        + song_info.artist.escapeHTML() + '<br>'
+        + '<small>' + song_info.album.escapeHTML() + '</small>'
     );
 
     // Load album art full-screen.
-  var album_art_url = '/album_image/' + escape(artist) + '/' + escape(album);
+    var album_art_url = ('/album_image/'
+                         + escape(song_info.artist)
+                         + '/' + escape(song_info.album));
     $('#albumart_fs').attr('src', album_art_url);
     $('#albumart_fs').fullBg();
     $('#albumart_fs').show();
+  });
 
   // Report the new song being played.
   this.backend.nowPlaying(song, this.old_songs);