Use with react-native-carplay

[mbpictures]

Hi!

Thanks a lot for this awesome package!
I'm curious whether this package can be used with react-native-carplay to display different kinds of views?
E.g. add a tab bar And a grid layout using react-native-carplay and then, once the user clicks on a specific item, display the media item using your package?
Also: when should we call the methods for setting the media items?

Thanks a lot in advance and best regards!

[chaimPaneth]

Hi @mbpictures

I’m using this still-raw package for Android Auto instead of react-native-carplay, since my apps are primarily media apps and require a MediaBrowser implementation. To my knowledge, react-native-carplay isn’t the correct approach for Android in case of a media displaying and playing app because it relies on the Car APIused for navigational apps etc rather than MediaBrowser. On iOS I do use react-native-carplay, but for Android I disable it and rely specifically on the headless branch of this package. When media is selected in the callbacks of onPlayFromMediaId if I'm in headless and js isn't awake I will natively broadcast a call to my native media player and if js react context is up I will call react that will start my regular player + UI through react.

[mbpictures]

Thanks for your answer. This gives me a nudge in the right direction.

I've started an implementation for playback management for iOS and Android myself here using the "new" media3 API, and I'm currently trying to implement HeadlessJsTask to support playback initiation from Android Auto.

Maybe you can help me with the project as a contributor (if you want to) or help me with the following question:
When the react native app is active and I receive events from either notification or Android Auto, I send turbomodule events. So far so good. When the application has not been started and the MediaLibraryService has been started (from Android Auto), I start a HeadlessJsTask. On the JavaScript side, this task should start the media playback. My question/problem is: how to share this instance of the media player from the headless task with the React app (when the user starts the app after the headless task has been executed by Android Auto)? Would it be enough to create a singleton module, which holds a ref to the current media player, and when the app starts (with UI), I load the state from this module?

[mbpictures]

@chaimPaneth This is the current implementation: mbpictures/react-native-media-notification/tree/feat/android-auto-library. If you want to give some feedback or give it a try

[chaimPaneth]

Hi @mbpictures

For the case you're describing, I added a native module in my native player code to query the MediaSession state. On app launch, I run an isPlaying check via the native module. If playback is active, I pull the item from the session extras, stop the headless native player, and immediately spin up a new player instance from the React UI. The result is a brief pause/resume gap of about a second. So far I haven’t found a cleaner solution.

[mbpictures]

Hi again @chaimPaneth !

I invite you again to check out my implementation. I overcome this problem by reusing the MediaService and by handling foreground and background events in the module singleton. This allows the synchronization between foreground React UI and background playback using Android Auto, for example. It's possible to start playback from Android Auto (app is fully closed), then open the App, and the player state syncs accordingly.

I'm currently struggling with my implementation of the MediaLibrary. You call the setMediaLibrary method, which then builds the native media library queried by Android Auto. But what happens when the App is closed and Android Auto requests the available media items? For this use case, I store the current MediaLibrary in the Apps Preferences, which can then be loaded without starting the React Native App, but it feels like a hack for me. I also tried to send a HeadlessTask event to React Native with an "Request Media Library" event; the JavaScript part should then call the setMediaLibrary, while the onGetRoot() (for example) waits until the library has been set from JavaScript. However, I always got crashes from the Headless Task.

Maybe you have an idea on how to better solve this?