Fix browsing for non-ascii entity URI under Safari

Previously, browsing entities with non-ascii characters in their URI
under Safari wouldn't work. Directories would be empty, songs wouldn't
be added. I haven't tried it, but this behavior seems to be common to
Webkit-based browsers, so Chrome would be affected too.

This turned out to be because Safari normalizes all unicode strings to
NFC, breaking the link with MPD-spewed URIs, which are in NFD.

An obvious fix would have been to normalize all URIs to NFD, but
unfortunately, Safari doesn't have `str.normalize()`. Adding
normalization capabilities to our JS side would have involved
introductiing libraries such as `unorm`, which is rather big.

We could have done it on the C side, but it involves introducing `icu`,
which is far from trivial too.

After much fussing around, I stumbled on a simple solution: URI-encode
our URI when creating our browser table row. This magically prevents
Safari from trying to mess with our unicode form before we get the
chance to send it back to our server.

diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index 2993a85..55acf6b 100644 (file)
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -185,21 +185,25 @@ function webSocketConnect() {
                     if(current_app !== 'browse' && current_app !== 'search')
                         break;
 
+                    /* The use of encodeURI() below might seem useless, but it's not. It prevents
+                     * some browsers, such as Safari, from changing the normalization form of the
+                     * URI from NFD to NFC, breaking our link with MPD.
+                     */
                     for (var item in obj.data) {
                         switch(obj.data[item].type) {
                             case "directory":
                                 $('#salamisandwich > tbody').append(
-                                    "<tr uri=\"" + obj.data[item].dir + "\" class=\"dir\">" +
-                                    "<td><span class=\"glyphicon glyphicon-folder-open\"></span></td>" + 
-                                    "<td><a>" + basename(obj.data[item].dir) + "</a></td>" + 
+                                    "<tr uri=\"" + encodeURI(obj.data[item].dir) + "\" class=\"dir\">" +
+                                    "<td><span class=\"glyphicon glyphicon-folder-open\"></span></td>" +
+                                    "<td><a>" + basename(obj.data[item].dir) + "</a></td>" +
                                     "<td></td><td></td></tr>"
                                 );
                                 break;
                             case "playlist":
                                 $('#salamisandwich > tbody').append(
-                                    "<tr uri=\"" + obj.data[item].plist + "\" class=\"plist\">" +
-                                    "<td><span class=\"glyphicon glyphicon-list\"></span></td>" + 
-                                    "<td><a>" + basename(obj.data[item].plist) + "</a></td>" + 
+                                    "<tr uri=\"" + encodeURI(obj.data[item].plist) + "\" class=\"plist\">" +
+                                    "<td><span class=\"glyphicon glyphicon-list\"></span></td>" +
+                                    "<td><a>" + basename(obj.data[item].plist) + "</a></td>" +
                                     "<td></td><td></td></tr>"
                                 );
                                 break;
@@ -208,9 +212,9 @@ function webSocketConnect() {
                                 var seconds = obj.data[item].duration - minutes * 60;
 
                                 $('#salamisandwich > tbody').append(
-                                    "<tr uri=\"" + obj.data[item].uri + "\" class=\"song\">" +
-                                    "<td><span class=\"glyphicon glyphicon-music\"></span></td>" + 
-                                    "<td>" + obj.data[item].title +"</td>" + 
+                                    "<tr uri=\"" + encodeURI(obj.data[item].uri) + "\" class=\"song\">" +
+                                    "<td><span class=\"glyphicon glyphicon-music\"></span></td>" +
+                                    "<td>" + obj.data[item].title +"</td>" +
                                     "<td>"+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds +
                                     "</td><td></td></tr>"
                                 );