expo: expo-av Video crash in production: EXAVPlayerData observeValueForKeyPath:ofObject:change:context:

Hi! We’ve fixed various stability issues with expo-av and we think we fixed this issue as well. I’ve released a test-version for you to try out and I’d love to hear whether this solves the problem for you.

You can install it in a bare project using yarn install expo-av@8.4.0. You can find the changelog here: https://github.com/expo/expo/blob/master/packages/expo-av/CHANGELOG.md

Let us know whether this fixes the problem for you!

hey @IjzerenHein

Here is the actual code used in production that loads / unloads the sounds (we currently experience this for sound, not video, but they both use the underlying expo-av)

//
// inspired from react-timer-hook
// https://github.com/amrlabib/react-timer-hook/blob/master/src/useTimer.js
//
import {useEffect, useRef} from 'react';
import {Audio} from 'expo-av';
import {AVPlaybackStatus} from 'expo-av/build/AV';

/**
 *
 * Hook reponsible of loading / unloading the sounds needed by a component
 * @param props
 */
export default function useSounds(
  sources: Array<number>,
  playFirstOne: boolean,
) {
  const soundsRef = useRef<Audio.Sound[]>();

  useEffect(() => {
    //promise to load all sources, all at once
    Promise.all(
      sources.map((source, index) =>
        Audio.Sound.createAsync(
          source,
          {
            shouldPlay: playFirstOne && index === 0,
          },
          handlePlaybackStatusUpdate(index),
        ),
      ),
    )
      .then(resources => {
        //TODO: there is a possible race condition, namely the sources change BEFORE all promises get resolved
        //before assigning the sounds to the ref, we should determine if that scenario happened
        //and instead unloadAsync the sounds to avoid memory leaks;

        soundsRef.current = resources.map(resource => resource.sound);
      })
      .catch(() => {
        //add the moment, if the loading fails, simply avoid playing any sounds for this component
      });

    //setup the mode for the audio session
    Audio.setAudioModeAsync({
      playsInSilentModeIOS: true,
      allowsRecordingIOS: false,
      staysActiveInBackground: true,
      interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DUCK_OTHERS,
      shouldDuckAndroid: true,
      interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DUCK_OTHERS,
      playThroughEarpieceAndroid: true,
    });

    return () => {
      if (soundsRef.current) {
        //release the memory
        soundsRef.current.map(sound => sound.unloadAsync());
        soundsRef.current = undefined;
      }
    };
  }, sources); //eslint-disable-line react-hooks/exhaustive-deps

  //
  // Fix a bug where the spotify sound level would not raise back when the sound just finished
  //
  const handlePlaybackStatusUpdate = (index: number) => (
    playbackStatus: AVPlaybackStatus,
  ) => {
    if (
      playbackStatus.isLoaded &&
      playbackStatus.didJustFinish &&
      soundsRef.current
    ) {
      soundsRef?.current[index].stopAsync();
    }
  };

  return soundsRef;
}

And then, where we need it use something like

useSounds([require('assets/sounds/done.aac')], true);

UPDATE: No looping used

UPDATE2: Here is another, more complex usage of the hook

  const playFirstOne = props.countdown === marks[0]; //whether or not to play the first one imediatelly after loading
  const soundsRef = useSounds(sounds, playFirstOne);
  const [currentMark, setCurrentMark] = useState(playFirstOne ? 0 : -1); //this accounts for the first mount (which has no sound available)

  //use an effect to play only 1 sound, the correct one (and to stop when the countdown is unmounted)
  useEffect(
    () => {
      if (soundsRef.current && currentMark < soundsRef.current.length) {
        soundsRef.current[currentMark].playAsync();
      }

      //increment the current mark, so the next time the effect is run, the proper sound is played
      setCurrentMark(currentMark + 1);
    },

    //create a boolean dep list based on the position of secondsLeft relative to the marks
    //[false, false] vs [true, false] vs [true, true] etc.
    marks.map(mark => secondsLeft < mark), //eslint-disable-line react-hooks/exhaustive-deps
  );

@andreibarabas I’ve only done a brief review of the code so far, but it looks like not all observers are removed before the PlayerData object is released.

@IjzerenHein - one last thing, noticed the crash happening when in Battery -> Low Power Mode is activated, which is likely to happen if you < 20% of battery

This is useful, thanks for letting me know @andreibarabas 👍