Mobile Lock Screen Play/Pause state is being overridden by ReactPlayer

[jaxomlotus]

Current Behavior

When trying to pause a live hls audio stream from my mobile phone's lock screen (iOS and Android), it pauses for a moment and then resumes playing. Somehow ReactPlayer is overriding the native functionality.

Expected Behavior

I would expect the audio to respect the play/pause state on the device.

Steps to Reproduce

1. Start a live HLS stream
2. Access it from a mobile device.
3. Put the device in lock screen mode.
4. Try to pause the stream.

Environment

• URL attempting to play: https://prankcast.com/milkbox/showreel/1377-Nathan-Fielder-s-The-Rehearsal-Interview-with-Cheap-Chick-in-the-City-s-Tricia-from-Ep-1
• Browser: Safari
• Operating system: iOS
• jsFiddle example: dont have one

Other Information

hlsVersion: 0.13.1

Here's the ReactPlayer code, in case this is helpful:

` //hlsVersion: 0.13.1

          <ReactPlayer
                        ref={player_state?.playerRef}
                        url={stream_url_active}
                        config={{
                                forceAudio: true,
                                forceHLS: player_state?.useHLS,
                                hlsOptions:  {
                                                maxLoadingDelay: 4,
                                                minAutoBitrate: 0,
                                                lowLatencyMode: true,
                                                enableWorker: true,
                                            } 
                        }}

                        width='100%'
                        height='40px'
                        autoPlay={player_state?.isMediaLoaded}
                        preload={"auto"}
                        controls={false}
                        playing={player_state?.isPlaying}
                        muted={player_state?.isMuted}
                        volume={player_state?.volume}
                        onPlay={()=> {
                            set_player_state({...player_state
                                    ,isPlaying:true
                                    ,isSeeking:false
                                    ,isLoading:false
                                    ,isMediaLoaded:true
                                })
                        }}
                        onPause={()=> {
                            set_player_state({...player_state
                                ,isPlaying:false
                                ,isSeeking:false
                            })
                        }}
                        onEnded={()=> {
                            console.log("audio ended");
                            set_player_state({...player_state
                                ,url:''
                                ,file:''
                                ,isPlaying:false
                                ,isSeeking:false
                                ,isEnded:true
                            })
                        }}
                        onBuffer={()=> set_player_state({...player_state,isBuffering:true})}
                        onBufferEnd={()=> set_player_state({...player_state,isBuffering:false})}
                    />`

[jaxomlotus]

Just curious if this is happening to anyone else and if there is a simple workaround?

[cookpete]

I can’t reproduce this on iOS 15.6.1 when using the HLS example on the demo page.

Does the issue still occur if you remove the onPause handler?

Actually, I wonder if it’s because you are passing a new function in to the onPlay and onPause etc handlers on every render. Maybe try wrapping them in useCallback and see if that changes anything?

[jaxomlotus]

Ok thanks! will do - I’ll let you know.

On Fri, Sep 16, 2022 at 6:50 PM Pete Cook @.***> wrote:

I can’t reproduce this on iOS 15.6.1 when using the HLS example on the demo page https://cookpete.com/react-player/.

Does the issue still occur if you remove the onPause handler?

Actually, I wonder if it’s because you are passing a new function in to the onPlay and onPause etc handlers on every render. Maybe try wrapping them in useCallback and see if that changes anything?

— Reply to this email directly, view it on GitHub https://github.com/cookpete/react-player/issues/1490#issuecomment-1249920136, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADWSST6D3VNE4TAP5K3EJDV6T2TPANCNFSM55T2UIDA . You are receiving this because you authored the thread.Message ID: @.***>

[jaxomlotus]

OK, so I tested both scenarios.

• Wrapping in a callback did not change anything (issue persists).

• removing the onPause event did stop this issue from happening. I had some custom functionality inside of onPause, so if there's an alternative way to trigger that when someone hits the pause button please do let me know.

On Fri, Sep 16, 2022 at 6:50 PM Pete Cook @.***> wrote:

I can’t reproduce this on iOS 15.6.1 when using the HLS example on the demo page https://cookpete.com/react-player/.

Does the issue still occur if you remove the onPause handler?

Actually, I wonder if it’s because you are passing a new function in to the onPlay and onPause etc handlers on every render. Maybe try wrapping them in useCallback and see if that changes anything?

— Reply to this email directly, view it on GitHub https://github.com/cookpete/react-player/issues/1490#issuecomment-1249920136, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADWSST6D3VNE4TAP5K3EJDV6T2TPANCNFSM55T2UIDA . You are receiving this because you authored the thread.Message ID: @.***>