Add Lock screen controls for video playback

[mitchdowney]

Feature Request

Add the ability to play, pause, time jump, or skip track in the video player from the Lock screen.

Why it is needed

For devices that allow you to continue playing a video from the lock screen, it would be a nice UX to be able to play, pause, time jump, or skip track from the Lock screen.

[vargajacint]

Any progress?

[jrhager84]

Any progress?

I've had really good luck using this player with react native music control. It does everything that you're asking.

https://www.npmjs.com/package/react-native-music-control

[vargajacint]

@jrhager84 I'm using this package as well, but unfortunately this package is "deprecated" favour of react-native-track-player. I think the react-native-track-player is a little bit to much for handling video metadata, play/pause and seek event.

I think these core functionalities is belongs to the video player in some way.

[jrhager84]

How is it deprecated? It works just fine. 🤷🏼‍♂️

[mitchdowney]

@vargajacint I didn't think react-native-track-player handles video?

According to @freeboub in #2932 the lock screen controls are still unavailable in react-native-video, but possible.

@jrhager84 good to hear react-native-music-control works well with react-native-video. It'd be great if lock screen controls were in RNV directly but good to know there is a workaround.

[vargajacint]

@jrhager84 Right now works fine, but they don't have maintainers, and have a couple of problems on Android. Also if Apple change something, the library will break your app.

[freeboub]

If you want to contribute to this library (react-native-track-player) I can invite you to join react-native-video organization and create a fork here

[sam1463]

@freeboub unless I misunderstood, you mentioned here that you had this working on a company fork. Would you mind adding that to this library, or sharing it somewhere else if for some reason the relevant changes can't be merged to this repo?

[freeboub]

@sam1463 no, unfortunately, I don't have this feature developped ...

[watadarkstar]

You can actually do this, but its a bit of hack with react-native-track-player. Here are the steps:

1. When playing video set the track player's volume to 0
2. Set the progress updates of the track player to match the progress updates of the video using .seekTo whenever the video updates its progress.
3. Listen to the track player events for play, pause, etc. to update the video state

Basically you are using the track player to listen for events and that's about it. The audio comes from the video.

[Dahvd]

@watadarkstar
This works for handling pause and play events on android, but on IOS some controls take over when the video is playing and show only pause and stop, removing all other metadata information. Do you know how I can access these build-in IOS controls that take over when the video plays?

The controls appear when these props are like so:
playInBackground={false}
playWhenInactive={true}
However locking the phone causes the video audio to pause unless it was in PiP mode, necessitating the user clicking stop then play again if they wish to continue listening from the lock screen.

If those controls are reversed to: playInBackground={true} and playWhenInactive={false} then the controls are not shown but it also doesn't pause when the phone is locked.

[watadarkstar]

@Dahvd Yeah my props are like so:

playInBackground={false}
        playWhenInactive
        controls={false}

I had to build all the controls myself manually to deliver what the client wanted.

Did you add a listener to handle the pausing of the video from the lock screen? Like so:

// where you add your listeners
TrackPlayer.addEventListener(Event.RemotePause, () => {
    // Pause the video by setting state to paused
   // update Redux, xState, context or set isPlaying to false
    MediaPlayerController.pause()
  })

// in another file
...
<Video paused={isPlaying} ... />

[ahmadsyed]

TrackPlayer.addEventListener(Event.RemotePause, () => {
// Pause the video by setting state to paused
// update Redux, xState, context or set isPlaying to false
MediaPlayerController.pause()
})

HI @watadarkstar have you wrote your listeners inside RNVP module's components/contexts ? Because its mentioned in the docs if we will write it in some component or context file ,they may get unmounted , and we should add these listeners in Index.js (entry file).
The problem is I am not able to access any off the app states like MediaPlayerController.pause() inside my listeners. Please suggest

[mitchdowney]

I ended up using react-native-track-player for adding lock screen buttons, and using its remote event listeners. I believe the RNTP lock screen buttons need to be added by setting the capabilities in RNTP.

[MTPL0005-AbhishekDube]

I have integrated react-native-track-player for playback in the notification. I use the voice-over video and utilize events from react-native-track-player to play, pause, forward, and backward.

[vargajacint]

Hey folks,

I see you started to implement react-native-track-player and as I understand it's possible to change the volume to 0. My concern with this solution is that will also double your streaming costs. I mean 1 cost for streaming the video + audio and one for streaming the audio(I'm not sure RNTP only streams the audio). Can anyone confirm or reject this?

@MTPL0005-AbhishekDubey @mitchdowney @watadarkstar

[watadarkstar]

@vargajacint That is a good point. I didn't think about that. It probably does double the cost but I have yet to test this. I will bring this up with our team and see what we can find.

[paulrinaldi]

I believe this is available now with prop showNotificationControls in release 6.0.0.

[MTPL0005-AbhishekDube]

@paulrinaldi, I was migrating and saw the documentation for this. The showNotificationControls works as expected on Android but fails on iOS. When I set showNotificationControls to false, the controls still appear on the notification screen. I raised this as a bug a few hours ago.

[YangJonghun]

@freeboub @KrzysztofMoch
I think we can close this issue. (#3723)

[freeboub]

Available on 6.2.0. another fix ongoing for the next release from @KrzysztofMoch. Issue on old android versions