Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

album art on now playing widget #9

Closed
whatSocks opened this issue Feb 22, 2022 · 5 comments
Closed

album art on now playing widget #9

whatSocks opened this issue Feb 22, 2022 · 5 comments

Comments

@whatSocks
Copy link

Looks like a bit more could go on the now playing widget

https://github.com/tanguyantoine/react-native-music-control
https://expo.canny.io/feature-requests/p/react-native-music-control

maybe i will give this a shot (unless you get to it first)

@peterklingelhofer
Copy link
Member

peterklingelhofer commented Feb 22, 2022

I was looking at these earlier as well. I also noticed react-native-webview has an injectedJavaScript prop (example here). Perhaps injecting JS that selects a hidden element with its value being JSON metadata which we could then parse and send to react-native-music-control could work.

The fact that the iOS PWA fails to do this makes me curious if there's some way of making Safari report the now playing metadata the same way Chrome is on Android devices. I've done a bit of digging but haven't been able to come up with anything on that specific issue yet...

@peterklingelhofer
Copy link
Member

This link discusses the issue, but it's a little out of date.

@peterklingelhofer
Copy link
Member

peterklingelhofer commented Feb 24, 2022

Browser compatibility for the MediaSessionAPI seems to be pretty well supported now in 2022. I may make an issue for this on the stream repo later this week and attempt. I suspect this would be far easier to get going on that side than making the stream repo somehow respond to WebView and inform it what it's playing, but I could be wrong.

It looks like we have this implemented in stream/packages/player-component/index.js. It looks like it's only supposed to work for iOS 15 and up, and I'm only on 14 on my phone. I will update tomorrow and see if that makes any difference...

@peterklingelhofer
Copy link
Member

It's working perfectly fine in the web app in my Desktop Safari, which is up to date, for example:
Screen Shot 2022-02-24 at 12 20 01 AM

@peterklingelhofer
Copy link
Member

Per MDN's MediaSessionAPI Browser Compatibility, iOS 15 is required for full functionality of this feature. I updated my phone and voilà, we're officially in business! As a result, I am closing this issue.

IMG_684FB2069995-1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants