Using as Chat Audio Message

[gmantuanrosa]

Hello there,

Today at my company we have both native apps (Android/iOS) and since we were tasked with building a chat message screen, React Native was chosen to deliver a faster and hybrid solution between both platforms. As soon as we started, Expo-AV was considered for many react-native users so we did try to integrate both React Native and Expo-AV into our Native apps.

While on Android the integration with React Native + Expo worked on iOS I had conflicting issues that were not possible to be solved in our current native iOS codebase. All chat functionalities are done and working, the missing feature is Audio Player.

In my current implementation I fetch my messages and add to the queue and when more messages are loaded if they are audio messages I add them into the queue. This helps because I don't need to setup the player and add the audio message for every audio message bubble, then I can only control Play/Pause and Skip if the current audio playing is different from the item in the queue that I am trying to play. The issue starts when the audio finishes, jumping to the next track in the queue -- and since the chat is backwards, audio messages are going to be playing also from bottom to top.

Is there a way to achieve what I'm trying to do? Playing one track at a time from the queue? I saw some PRs but the last update was that the feature to do something similar was removed...

[gmantuanrosa]

After some digging on the code, I could reach a "not the best" solution but one that it works for anyone that is wondering.

First of all, all your Audio Message bubbles needs to own its state, so each bubble own their slider position, play/pause state and current track.

With that on mind I setup the Track Player to use RepeatMode.Queue so that in theory all audio messages would play one after the other. After that, I hooked into the audio message bubble logic an event to detect if the active track changed and compare with the current Track of the bubble.

  const [queue] = useAtom(queueAtom);
  const [currentTrackIndex, setCurrentTrackIndex] = useAtom(currentTrackIndexAtom);
  
  const { playing } = useIsPlaying();
  
  const trackIndex = queue.findIndex(track => track.id === item.id);
  const isCurrentTrack = currentTrackIndex === trackIndex;
  
  useTrackPlayerEvents([Event.PlaybackActiveTrackChanged], async event => {
    if (isCurrentTrack && event.track.id !== item.id) {
      await TrackPlayer.stop();
      setSliderValue(0);
    }
  });
  
  const toggleAudio = useCallback(async () => {
    if (trackIndex !== -1) {
      if (isCurrentTrack && playing) {
        await TrackPlayer.pause();
      } else {
        if (!isCurrentTrack) {
          await TrackPlayer.skip(trackIndex);
          setCurrentTrackIndex(trackIndex);
        }
        await TrackPlayer.play();
      }
    }
  }, [isCurrentTrack, playing, trackIndex, setCurrentTrackIndex])

This is a snippet of the code that I could control the current index of the track for all audio messages to skip or play/pause. Also this is used to compare if the next in queue is the same that is currently active, performing the stop if they are going to change.

It would be nice to have an Event for the PlaybackActiveTrackFinished so I could avoid the logic and perform a TrackPlayer.stop() or a way to add a RepeatMode that stops to play when the track finishes...

[lovegaoshi]

first of all u shouldnt use this lib and should focus on resolving the native dependency conflicts of expo-av, or react-native-video for a clunkier implementation. this lib offers a foreground service which is not what u want.

for ur specific issue i dont see why u have to use the queue functionality at all. u should manage queue externally instead and always use setQueue with the audio msg ur trying to play.