Can't add Soundcloud tracks using bookmarklet

[adrienjoly]

Describe the bug

As reported by Polad Hajiyev, thru Facebook Messenger:

just showing loading, not add.

To Reproduce

Use the bookmarklet / openwhyd "add track" browser extension from the following pages:

• https://soundcloud.com/juanchov182/thievery-corporation-meu
• https://soundcloud.com/micronicariga/electricano-baba-yaga-free-download?in_system_playlist=personalized-tracks%3A%3Ahrmnlive%3A798177592

Note: it's possible to add the tracks by pasting their URL to openwhyd's search bar.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[nightkall]

Bookmarklet and Chrome extension doesn't work on youtube neither

[adrienjoly]

Thanks for reporting, @nightkall !
I'm having a look at this, right now.

[adrienjoly]

YouTube should be fixed!

Now having a look at Soundcloud.

[adrienjoly]

News: I reproduced the problem while trying to add a SoundCloud track using the bookmarklet:

Sample from the JS console:

-= openwhyd bookmarklet v2.6.1 =-
48-639627cb-3.js:160 loading bookmarklet stylesheet...
48-639627cb-3.js:160 loading PlayemJS...
48-639627cb-3.js:160 1/2 parse page...
48-639627cb-3.js:160 -----detectYouTubePageTrack => 0
48-639627cb-3.js:160 -----detectPandoraTrack => 0
48-639627cb-3.js:160 -----detectDeezerTrack => 0
48-639627cb-3.js:160 -----detectTrackFromTitle => 0
48-639627cb-3.js:160 -----extractBandcampTracks => 0
48-639627cb-3.js:160 -----parseDomElements => 93
48-639627cb-3.js:160 2/2 list streamable tracks...
48-639627cb-3.js:160 Script error.
n @ 48-639627cb-3.js:160
playem-min.js?1611492155758:2 Uncaught ReferenceError: SOUNDCLOUD_CLIENT_ID is not defined
    at g (playem-min.js?1611492155758:2)
    at SoundCloudPlayer.b.fetchMetadata (playem-min.js?1611492155758:2)
    at detectPlayableStreams (bookmarklet.js?1611492155616:627)

[adrienjoly]

PR #440 prevents a JS exception but the problem is not completely fixed yet:

We'd expect the "meu destino" track to be listed first.

Instead we end up with several links that are part of SoundCloud's page navigation links.

Note: the second thumb does allow to add the track, but its "title" is taken from a hyperlink that has an empty href, and therefore links to the page's URL:

<a href="" class="header__moreButton sc-ir" tabindex="0" aria-haspopup="true" role="button" aria-owns="dropdown-button-103">Paramètres et plus</a>

=> Proposed next steps:

• make the bookmarklet recognize the soundcloud page and list the corresponding track first (see bookmarkletPageDetectors.ts, before digging into the page's hyperlinks (see detectPlayableStreams())
• exclude false positive results from soundcloud's navigation links
• if necessary, provide a soundcloud api key (SOUNDCLOUD_CLIENT_ID) to the bookmarklet, in order to check the URLs of those links and/or fetch any missing track metadata

[adrienjoly]

Note: Soundcloud brings breaking changes to their API => this may have an impact to this issue. See #465 for more info.