doublesymmetry / react-native-track-player

A fully fledged audio module created for music apps. Provides audio playback, external media controls, background mode and more!
https://rntp.dev/
Apache License 2.0
3.2k stars 984 forks source link

Skipping to previous song while on last track in a queue fires PlaybackQueueEnded and then PlaybackTrackChanged events twice #2169

Closed charlieswing closed 6 months ago

charlieswing commented 9 months ago

Describe the Bug In version 3.2.0, I noticed an issue where when I am on the last track in the queue of songs, if I skip back to the previous song (either using skipToPrevious or manually using skip(previousIndex)) the track player is behaving oddly. It appears to be firing the PlaybackTrackChanged event THEN the PlaybackQueueEnded event (even though the queue has not ended) and then PlaybackTrackChanged event again. Am I just fundamentally misunderstanding how this should work? PlaybackQueueEnded should not fire if I'm paused on my last track and use skipToPrevious, right? Also, why is the PlaybackTrackChanged event firing twice?

Steps To Reproduce

  1. Have a queue of multiple songs loaded
  2. Skip forward through queue until you are on the last song.
  3. Skip back to the previous song
  4. PlaybackTrackChanged event fires
  5. PlaybackQueueEnded event fires
  6. PlaybackTrackChanged event fires again

LOG playbacktrackchanged LOG event {"nextTrack": 9, "position": 0, "track": 10, "type": "playback-track-changed"} LOG playbackqueueended LOG playbacktrackchanged LOG event {"nextTrack": 0, "position": 0, "track": 9, "type": "playback-track-changed"} LOG playbacktrackchanged LOG event {"position": 0, "track": 0, "type": "playback-track-changed"}

Code To Reproduce

const skipToPrevious = async () => {
  try {
      await TrackPlayer.skipToPrevious();
  } catch (error: any) {
    console.error('Error skipping to previous track', error);
  }
};

useTrackPlayerEvents([Event.PlaybackTrackChanged], async event => {
  if (event.type === Event.PlaybackTrackChanged) {
    console.log('playbacktrackchanged');
    console.log('event', event);
    const currentTrack = await TrackPlayer.getTrack(event.nextTrack || 0);

    setCurrentTrack(currentTrack);
    setCurrentTrackIndex(event.nextTrack || 0);

    if (isPlaying) {
      TrackPlayer.play();
    }
  }
});

useTrackPlayerEvents([Event.PlaybackQueueEnded], async event => {
  if (event.type === Event.PlaybackQueueEnded) {
    console.log('playbackqueueended');
  }
});

Environment Info: System: OS: macOS 13.5.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 205.67 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.8.0 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 10.1.0 - /usr/local/bin/npm Watchman: 2023.09.25.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0 Android SDK: Not Found IDEs: Android Studio: 2022.1 AI-221.6008.13.2211.9477386 Xcode: 15.0/15A240d - /usr/bin/xcodebuild Languages: Java: 11.0.17 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: Not Found react-native: ^0.69.1 => 0.69.1 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

react-native-track-player version: 3.2.0 Real device? Or simulator? Both What OS are you running? iOS 15.0

dcvz commented 9 months ago

We just released V4 of RNTP which makes a lot of improvements to events. I recommend you try to update to that version. You can find a migration helper here.