Unable to load spotify webplayer on android phone

[ateshkoul]

Describe the bug

I am unable to load the spotify webplayer (while the normal login page loads). The website remains stuck at the moving 3 dots.

Steps to reproduce

I used the example from the toga website:
https://toga.readthedocs.io/en/stable/reference/api/widgets/webview.html
and example here :
https://gist.github.com/simonw/b43343d437f05f5b0c73d814fcd9e5ba
In both of the cases, the spotify webplayer remains stuck.

Expected behavior

Loading of the spotify website with the webplayer.

Screenshots

No response

Environment

• Operating System: android (emulator) and physical device (OnePlus 10)
• Python version: 3.8.18
• Software versions:
  • Briefcase: '0.3.16'
  • Toga:'0.4.0'

Logs

W/m.example.test1: Long monitor contention with owner ThreadPoolForeg (21790) at org.chromium.net.AndroidCertVerifyResult OB0.h(byte[][], java.lang.String, java.lang.String)(chromium-TrichromeWebViewGoogle6432.apk-stable-567263637:242) waiters=2 in org.chromium.net.AndroidCertVerifyResult OB0.h(byte[][], java.lang.String, java.lang.String) for 222ms

I/chromium: [INFO:CONSOLE(1)] "Uncaught TypeError: Cannot read properties of null (reading 'getItem')", source: https://open.spotifycdn.com/cdn/build/web-player/vendor~web-player.f22720bd.js (1)

W/native.stderr: [INFO:CONSOLE(1)] "Uncaught TypeError: Cannot read properties of null (reading 'getItem')", source: https://open.spotifycdn.com/cdn/build/web-player/vendor~web-player.f22720bd.js (1)

I/chromium: [INFO:CONSOLE(0)] "The resource https://open.spotifycdn.com/cdn/generated-locales/web-player/en.c4239d5f.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.", source: https://open.spotify.com/ (0)

W/native.stderr: [INFO:CONSOLE(0)] "The resource https://open.spotifycdn.com/cdn/generated-locales/web-player/en.c4239d5f.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.", source: https://open.spotify.com/ (0)

I/chromium: [INFO:CONSOLE(0)] "The resource https://open.spotifycdn.com/cdn/fonts/spoticon_regular_2.d728648c.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.", source: https://open.spotify.com/ (0)

W/native.stderr: [INFO:CONSOLE(0)] "The resource https://open.spotifycdn.com/cdn/fonts/spoticon_regular_2.d728648c.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.", source: https://open.spotify.com/ (0)

Additional context

The application works in the dev mode. On both emulator and physical device, the login page loads but gets stuck for the webplayer.
I already updated the cleartextTrafficPermitted="true" in network_security_config.xml as well as updating build parameters in gradle.build (proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro', adding dependencies of andriod webkit) as well as tried looking at javascript.

[freakboy3742]

Thanks for the report - I'm guessing that either the web view needs a permission that hasn't been granted (given it's Spotify, my guess would be audio access), or the Spotify website itself doesn't work on the Android webview (which isn't Chrome - it's a standalone WebKit view, so the vendor string might be blocked).

@mhsmith might have some more ideas on how to debug what is going on here.

[ateshkoul]

Thanks a lot @freakboy3742 for the quick response and the insight. Would it be possible to grant the audio permissions somewhere? Another thing that popped up while searching the error was something like setting 'domStorageEnabled = true' (https://stackoverflow.com/questions/69843764/specific-url-not-rendering-in-android-webview ). But I am not sure where to add this.

Thanks a lot again.

UPDATE: checked also with apple music, the same error comes up and it stops at the loading page.

[freakboy3742]

If the problem is enabling DOM storage, then invoking mywebview._impl.settings.setDomStorageEnabled(True) before setting the URL should enable the setting. If that works, we should probably add that configuration change to the constructor for Toga's WebView on Android - we've got other settings that we have turned on (e.g., JavaScript is explicitly enabled, as is pinch-to-zoom). Feel free to submit a PR.

If it's audio permissions - that's done in the AndroidManifest. There isn't currently a way to configure Briefcase to add the permission - you need to manually modify the AndroidManifest after it has been created. We should be adding permission handling to Briefcase in the near future (see beeware/briefcase#547).

[mhsmith]

To see if it really is an audio permission issue, you could try it with a page containing a simple HTML <audio> tag.

[ateshkoul]

Thanks a lot both @freakboy3742 and @mhsmith !
The DOM storage works for loading the page (the webplayer doesn't stop at the three dots) but now the spotify reports that the playback of protected content is not enabled or playback disabled (if I choose to open the open.spotify.com website).

Help much appreciated!

Thanks again.
P.S. the apple music works and plays music.

[freakboy3742]

Good to hear it's been partially successful. The fact that Apple Music works suggests it isn't a permissions issue (it might still be, but if it is, it's an edge case); the reference to "protected content" suggests there's some sort of DRM extension in the web view that they're expecting to find.

I don't have any particular insight on this - however, this blog post might be a place to start, as it mentions DRM and is using Spotify specifically.

Unfortunately, if it turns out that DRM is the issue, the solution that the post uses involves subclassing the WebView to override a handler, which is something that Chaquopy (the Java bridging layer that Toga uses) can't handle at the moment (see #1020).