jxnblk / plangular

Create custom SoundCloud players with HTML & CSS
http://jxnblk.github.io/plangular
480 stars 93 forks source link

Safari: tracks with U+2028 character break player #62

Closed shazzygh closed 6 years ago

shazzygh commented 9 years ago

Hey, according to your source code comments you are aware of this issue, i would just like to extend on it from what I experienced from my testing. When the json request contains a U+2028 or U+2029 character it will break Safari. The endpoint doesn't matter, it happens on single tracks as well.

Example: https://soundcloud.com/telekollegen/telecast-002-mixed-by-jekyllandhyde The illegal character is in front of the facebook link in the description in this case.

A possible solution is outlined in this thread- I have however no idea if it applies here since my background in programming is quite limited:

http://stackoverflow.com/questions/14179377/how-to-replace-escape-u2028-or-u2029-characters-in-php-to-stop-my-jsonp-api-br

An overview of the issue is given here: http://timelessrepo.com/json-isnt-a-javascript-subset

edit: some more http://stackoverflow.com/questions/2965293/javascript-parse-error-on-u2028-unicode-character/9168133#9168133

jxnblk commented 9 years ago

Thanks! I'll definitely look into this a little more. That unicode issue really bothers me.

shazzygh commented 9 years ago

Awesome thank you! For the meantime I have build this simple php script which will remove the unwanted characters from the input (to manually remove these illegal characters from soundcloud descriptions by copy and pasting): http://robinbenad.com/scformat.php

The str_replace i am using looks like this:

$string = str_replace('
', '', $string); 
$string = str_replace('
', '', $string); 
$string = str_replace('
', '', $string); 
$string = str_replace('
', '', $string); 

This regex I found all over the web didn't target these characters for me:

$string = str_replace("\xe2\x80\xa8", '', $string);
$string = str_replace("\xe2\x80\xa9", '', $string);

Neither did the json_encode() function for some reason..

Since this is a php solution it's likey not possible to implement it in plangular, maybe it is possible to adapt it to javascript, however i have no idea how the routing of json request actually works ; ) sharing this just in case

edit: If it's impossible to modify the jsonp output, perhaps a json proxy could be a solution.

In this thread someone suggests using CORS instead of JSONP to bypass the issue: http://stackoverflow.com/a/25549616

shazzygh commented 9 years ago

Also stumbled upon this: https://github.com/douglascrockford/JSON-js

mentioned here as a possible solution : http://stackoverflow.com/questions/2965293/javascript-parse-error-on-u2028-unicode-character/9168133#comment3032767_2972426