[BUG]: play/pause button state is not synchronised with notification controls

[Bartek Mogielnicki]

Version

6.2.0

What platforms are you having the problem on?

iOS, Android

System Version

iOS 17.5.1 / android 10 / emulator android 13

On what device are you experiencing the issue?

Real device, Simulator

Architecture

Old architecture

What happened?

It looks like play/pause button state is not synchronised with notification controls.

---

Samsung Note 9, android 10

Screen.Recording.2024-06-11.at.15.42.16.mov

---

Iphone 13 mini, iOS 17.5.1

Screen.Recording.2024-06-11.at.15.58.36.mov

Reproduction

https://github.com/TheWidlarzGroup/react-native-video/tree/master/examples/basic

Reproduction

Step to reproduce this bug are:

1. Enable notification controls
2. Press play/pause button in the notification controls
3. Check the play/pause button state in a video player

[YangJH]

Native state controlled by external controls (notifications, external controllers) cannot handle changes to JS state.

If you only need a simple state change, you'll need to resynchronize isPlaying value from onPlaybackStateChanged, and if you need a custom controller, you'll need to use onPlaybackStateChanged and ref.resume and ref.pause.

[Bartek Mogielnicki]

@YangJonghun you are right, thanks. I should be able to handle this myself using onPlaybackStateChanged.

Although I think it's a good idea to add such a handler to the basic example project as well, as it can be confusing and looks a bit broken 🤔

[Bartek Mogielnicki]

I tried implementing a custom controller and it works pretty well for just play/pause, but it gets complicated if we also try to implement something like a skip forward button.

Let's assume we want to implement the simple handler you mentioned. It simply updates the state of the player button.

onPlaybackStateChanged={state => {
   if (state.isPlaying) {
      play()
   } else {
      stop()
   }
}}

If we add a fairly common button to skip forward to do something like:

onPress={() => {
   videoRef.current?.seek(time);
}}

We pause the video every time the skip button is pressed because it triggers the onPlaybackStateChanged state twice:

1. with isPlaying as false
2. with isPlaying as true

In my opinion, this is not desirable behaviour.

So I think we're missing a mechanism to distinguish pressing the play/pause button from pressing the seek related button.