mirrors
/
ympd
mirror of https://github.com/SuperBFG7/ympd
1
0
Fork 0
Code Issues Releases Wiki Activity

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.
This commit is contained in:
Virgil Dupras 2015-06-20 22:39:42 -04:00
parent 51c371bbc3
commit fe44fca184
1 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
htdocs/js/mpd.js
View File

@ -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>"
);