React-native-track-player: Using registerPlaybackService before starting my app and "remote-" events are not firing

[Alanz2223]

Hello I would like to point out I am using React native navigation and everything was working fine before the major release of RNTP that incorporated the new event system. My current implementation calls the registerPlaybackService before React native navigation launches the app and before setupPlayer is called. Within the playback service my file has an async function and looks something like this but with more events registered.

` TrackPlayer.addEventListener('playback-queue-ended',(evt) => {
console.log('queue end');
store.dispatch(playerActions.playerQueueEnded());

    } );

    TrackPlayer.addEventListener('remote-play',(evt) => {
        console.log('remote play');
        store.dispatch(playerActions.togglePlay());
    } );`

My issue is that with the previous version of RNN the events worked even though the service was called before setup player and app startup. The weird thing is that i see in the console that the "playback-" events like queue end are called but not the "remote-" events. I do call updateOptions and have the capabilities for the events and as I mentioned they worked before, so I am puzzled and would appreciate any pointers.

[Guichaguri]

Android or iOS?

[Alanz2223]

On Android pie, I was also testing on marshmallow. Using the latest dev version of rntp

[vlatri]

I also use RNN and experience random issues with remote events fired from notification controls. They just stop working inconsistently. However, headset buttons work correctly, firing play/pause events. Can this behavior be related to RNN or this particular issue?

Edit: It only happens in development mode.

[dengue8830]

im facing the same issue in android (not tested in ios) and im not using react native navigation (im using react-router). All the normal events are listened but not the remote ones, in my service.js registrated in index.js i have this

  TrackPlayer.addEventListener('remote-play', () => {
    console.log('this log is never executed when i press the play button in the notification');
  });

  TrackPlayer.addEventListener('playback-state', () => {
    console.log('this one yes');
  });

package.json

"react": "16.8.3",
"react-native": "0.59.3",
"react-native-track-player": "^1.1.3",

build.gradle

buildscript {
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.3.1'
        // Para firebase
        // classpath 'com.google.gms:google-services:4.0.1'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

subprojects {
    afterEvaluate {project ->
        if (project.hasProperty("android")) {
            android {
                compileSdkVersion 28
                buildToolsVersion '28.0.3'
            }
        }
    }
}

ext {
    buildToolsVersion = "28.0.3"
    minSdkVersion = 16
    compileSdkVersion = 28
    targetSdkVersion = 28
    supportLibVersion = "28.0.0"
}

task wrapper(type: Wrapper) {
    gradleVersion = '4.10.1'
    distributionUrl = distributionUrl.replace("bin", "all")
}

[dengue8830]

in my case solved removing await from calling setupPlayer(), now it works great :D tested on android 6

[Alanz2223]

@dengue8830 I don't understand your answer. The only way this would conflict is if setupPlayer had to be called either prior or after registering the events.

Either way seems like I am not the only one experiencing problems with remote only events. I've yet to find the time to attach a debugger and analyze what's going on.

[dengue8830]

indeed setupPlayer must be called before registering remote events, check the example project

[sideokyou]

@dengue8830

Hi, is that right doing like below?

Although setupPlayer called after registerPlaybackSrevice(), it plays for mp3 file. but, it can't play for the music from a streaming server. Still figuring out now.. any idea..?

AppRegistry.registerComponent(appName, () => App);

TrackPlayer.setupPlayer().then((TrackPlayer) => {
  console.log("the player is ready to be used");
});

TrackPlayer.registerPlaybackService(() => require('./service.js'));

[dengue8830]

@sideokyou
that is a codec support issue, i didn't tried with streaming server music like shoutcast/icecast (indeed i need this in others projects). But did you try set mp3 codec in your streaming client?

when you connect to a shoutcast server from a client (like mixx or winamp) you can select the codec.

[sideokyou]

@dengue8830

Thanks for the comment.
Still not sure how to select codes when the app connects to the server. and, the server has no SSL.

However, I found that after Android 9, Google announced that http request will not be working. We have to use https instead of using http request. There is a workaround for solving that issue, but there is nothing I can do for that now.
(ref. https://developer.android.com/training/articles/security-config)

Other than the streaming server, I pull mp3 files from the different server which provides SSL. Those files are working perfectly.

Thanks!

[dengue8830]

no, you need a desktop pc client like winamp, mixx or idjc, from there you will be the dj and send the sound to the server in mp3 format. The mobile app its just a player, a listener

[sideokyou]

@dengue8830

hmm... that's weird. Because only Galaxy S10 model is not working, other models like iPhone XS, X, LG phones are working well.

Would be a possibility that only Galaxy S10 requires certain codes in order to play it?

[dengue8830]

some android device working? this project uses exoplayer and its codecs should work in android

[sideokyou]

@dengue8830

Yes. Only Android 9 is not working. I think it is not a problem of RNTP. without SSL, Android 9 rejects network connect. Even I tested the image URL from https and HTTP. Images from HTTP didn't show. but after changing it to https, it shows images.

[dengue8830]

that's valuable information, i never tried without https in android 9. And now i know i can use this lib for my radio streaming app :P

[Alanz2223]

Please create your own issue to discuss this.

[ashokkumar88]

@Alanz2223 did you find any work around for the remote events to work with RNN?

[b3hz4d]

I had this problem when react native bundle get reloaded
Try destroy player on app reload

[curiousdustin]

For those experiencing this issue, does the issue reproduce for you in the example app included in this repo?

The example also uses react-navigation, and does not have this issue for me.

What version of RNTP? Does the issue happen in release builds?