React-native-track-player: RN 0.60.0 with v2 and remote-* events

[mhabegger]

Does the combination RN 0.60.0 with the RC of v2 already works with remote-* commands ? I can't seem to figure out how to get play/pause/next/previous working from the notification or lock screen.

Code

index.js

AppRegistry.registerComponent(appName, () => App)
TrackPlayer.registerPlaybackService(() => TrackPlayerService)

service.ts

import TrackPlayer, { Event } from 'react-native-track-player'

export const TrackPlayerService = async () => {

  TrackPlayer.addEventListener(Event.RemotePlay, event => {
    console.log('=== remote play', event)
    TrackPlayer.play()
  })

  TrackPlayer.addEventListener(Event.RemotePause, event => {
    console.log('=== remote pause', event)
    TrackPlayer.pause()
  })

}

[dcvz]

It should, but I'll take a look later today.

[dcvz]

It's currently working for me using the hooks:

useTrackPlayerEvents([Event.PlaybackTrackChanged], () => {
  setHasTrack(true)
})

I will check with the addEventListener API

[dcvz]

This also works for me:
```
TrackPlayer.addEventListener(Event.PlaybackTrackChanged, () => {
setHasTrack(true)
})
````

Are you using v2-rc10?

[dcvz]

Keep in mind that you can do this at your component level. It doesn't have to be in the declaration of the service.

[mhabegger]

@dcvz yes, PlaybackTrackChanged and so work. I am interested in the remote-* commands to hook in play and pause from the iOS Locked Screen etc.

[jpolo]

Reproducible on rc12 .
My updateOptions

{
      stopWithApp: false,
      jumpInterval: 15,
      capabilities: [
        TrackPlayer.Capability.Play,
        TrackPlayer.Capability.Pause,
        TrackPlayer.Capability.JumpBackward,
        TrackPlayer.Capability.JumpForward
      ],
      compactCapabilities: [
        TrackPlayer.Capability.Play,
        TrackPlayer.Capability.Pause,
        TrackPlayer.Capability.JumpBackward,
        TrackPlayer.Capability.Stop,
      ],
    }

The buttons Play/Pause are no-op, the event handler never seems to be fired...

[dcvz]

@jpolo your issue comes from the fact that constants are now exporting differently. Please look at: https://github.com/react-native-kit/react-native-track-player/issues/662#issuecomment-511792143

[dcvz]

@mhabegger I've now fixed this in rc-13 💃

[mhabegger]

Works now. Thanks @dcvz

[drew-royster]

@mhabegger what does your event handler look like. I'm on rc13 and have still not been seeing the events as I click the remote control buttons

[mhabegger]

@drew-royster
The following code is inside our view. and links the remote events to our internal handling of the player state.

import TrackPlayer, {
  usePlaybackState,
  State,
  Capability,
  IOSCategory,
  IOSCategoryMode,
  TrackMetadata,
  useTrackPlayerEvents,
  Event,
} from 'react-native-track-player'

...

const events = [
    Event.PlaybackError,
    Event.RemotePause,
    Event.RemoteNext,
    Event.RemotePlay,
    Event.RemotePause,
    Event.RemoteStop,
  ]
  useTrackPlayerEvents(events, event => {
    if (event.type === Event.PlaybackError) {
      console.warn('An error occured while playing the current track.', event)
    }
    if (event.type === Event.RemoteNext) {
      skipToNext()
    }
    if (event.type === Event.RemotePrevious) {
      skipToPrevious()
    }
    if (event.type === Event.RemotePlay) {
      play()
    }
    if (event.type === Event.RemotePause) {
      stop()
    }
    if (event.type === Event.RemoteStop) {
      stop()
    }
  })

[mhabegger]

As an example:

// Initialize the Player
useEffect(() => {
    // Initialize
    TrackPlayer.setupPlayer({
      iosCategory: IOSCategory.Playback,
      // iosCategoryOptions:
      iosCategoryMode: IOSCategoryMode.Default,
    })
    TrackPlayer.updateOptions({
      stopWithApp: true,
      capabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
        Capability.SkipToPrevious,
        Capability.Stop,
      ],
      compactCapabilities: [Capability.Play, Capability.Pause],
    })
  }, [])

...

const skipToNext = async () => {
    try {
      await TrackPlayer.skipToNext()
      // ... some other code we need inside the app
    } catch (_) {}
  }

[dimaportenko]

@dcvz @mhabegger so old way from example app of v1 doesn't work anymore?

like

import { AppRegistry } from 'react-native';
import TrackPlayer from 'react-native-track-player';

import App from './App';

AppRegistry.registerComponent('example', () => App);
TrackPlayer.registerPlaybackService(() => require('./service'));

import TrackPlayer from 'react-native-track-player';

module.exports = async function() {

  TrackPlayer.addEventListener('remote-play', () => {
    TrackPlayer.play()
  })

  TrackPlayer.addEventListener('remote-pause', () => {
    TrackPlayer.pause()
  });

  TrackPlayer.addEventListener('remote-next', () => {
    TrackPlayer.skipToNext()
  });

  TrackPlayer.addEventListener('remote-previous', () => {
    TrackPlayer.skipToPrevious()
  });

  TrackPlayer.addEventListener('remote-stop', () => {
    TrackPlayer.destroy()
  });

};

[alanhabib]

@dcvz I am also wondering if the old way is not enough anymore? And also in "remote-jump-forward" and "backward" sometimes work and sometimes it does not show up. I am using v.1.1.8

like:

import TrackPlayer from "react-native-track-player";

module.exports = async () => {
TrackPlayer.addEventListener("remote-play", () => {
console.log("#DEBUG remote play #");
TrackPlayer.play();
});

TrackPlayer.addEventListener("remote-pause",  () => {
    console.log("#DEBUG remote pause #");
    TrackPlayer.pause();
});

TrackPlayer.addEventListener('remote-seek', () => {
    console.log("#DEBUG REMOTE-SEEK #");
});

TrackPlayer.addEventListener("remote-jump-forward", () => {
    console.log("#DEBUG remote skipNext #");
});

TrackPlayer.addEventListener("remote-jump-backward", () => {
    console.log("#DEBUG remote skipPrevious #");
});

TrackPlayer.addEventListener("remote-stop", () => {
    console.log("#DEBUG remote stop #");
    TrackPlayer.destroy();
});

};

Thanks in advance!

[hirentech]

@dcvz, yes please let me know why remote-* events are not working following event handler

import TrackPlayer, {Event} from 'react-native-track-player';

module.exports = async function() {
TrackPlayer.addEventListener('remote-play', async data => {
console.log('Play Button Clicked');
TrackPlayer.play();
});

TrackPlayer.addEventListener('remote-pause', async data => {
console.log('Pause Button Clicked');
TrackPlayer.pause();
});

TrackPlayer.addEventListener('remote-next', () => {
TrackPlayer.skipToNext();
});

TrackPlayer.addEventListener('remote-previous', () => {
TrackPlayer.skipToPrevious();
});

TrackPlayer.addEventListener('remote-stop', () => {
TrackPlayer.destroy();
});

TrackPlayer.addEventListener('playback-state', async data => {
console.log('service file playback-state: ', data.state);
});
};