The native app’s headless audio player

When playing audio in the web audio-player, the native app is actually playing the audio, while the web-view keeps on rendering the UI. In order to the web-views UI in sync with the native app’s audio player, the native app sends frequent updates to the web-view about the current playing state.

In addition, when interacting with the lock-screen UI of the phone where the native-app is playing the audio, the native-app forwords these interactions to the web-view, so that the web-view can update its UI accordingly.

Events sent from the web-view to the native app

The web-view uses postMessage to send events to the native app. The function notifyApp is used to send the events.

Example:

notifyApp(AudioEvent.SETUP_TRACK, {
  // Adapted, not sent as-is — see below.
  item: toNativeAppTrack(item),
  autoPlay,
  initialTime,
  playbackRate,
  coverImage: audioCoverUrl(item.document?.image, 1024),
})

The item payload is a frozen shape. The web player’s own queue items carry Sanity content ({ _id, title, slug, audioSourceMp3, … }), but the app reads a track’s url from document.meta.audioSource.mp3 — the shape the old AudioQueueItem GraphQL fragment delivered. App versions already installed can never be updated, so a web release cannot change what they receive. helpers/nativeAppTrack.ts translates between the two at this boundary, and is the only place that knows about the old shape. The same applies to the play-audio payload in AudioProvider, used by app versions below v2.2.0.

Events

Events received in the webview, sent from the native-app

In order to receive events from the native app, the react-hook useNativeAppEvent is used.

Example:

useNativeAppEvent<string>(
  AudioEvent.QUEUE_ADVANCE,
  async (itemId) => {
    const isHeadOfQueue =
      audioQueue && audioQueue.length > 0 && audioQueue[0].id === itemId
    const isActiveItem = activePlayerItem && activePlayerItem.id === itemId
    if (isHeadOfQueue || isActiveItem) {
      // HasOptedOutFromAutoPlay might be null, which should then result in 'true'
      await onQueueAdvance(isAutoPlayEnabled)
    }
  },
  [initialized, activePlayerItem, isAutoPlayEnabled],
)

Most of the communication received by the web-view is handled in the AudioPlayerController  component.

Events

Example message flow

References

• react-native-track-player 

• postMessage docs 

• react-native onMessage