[Feature]: Video Player play/pause during incoming calling
Sumeeth-24 opened this issue · comments
Description
We need functionality where the video player pauses when a call is incoming and resumes when the call ends. This should not happen automatically but should be controlled via a prop value so that our custom functionality can handle the play/pause actions.
There is an old npm package named react-native-call-detection which is outdated (last updated 4 years ago) and incompatible with the newer Android/iOS versions. This package detects different call states like Incoming, Disconnected, Dialing, and Connected for iOS. For Android, it provides states like Offhook, Incoming, Disconnected, and Missed.
Our goal is to handle at least the Incoming and Disconnected events to implement custom controls for playing and pausing the video.
Why it is needed ?
Every ott platform like Amazon Prime, Netflix, Disney plus HotStar has this functionality where any video is playing and call is coming in between then automatically the player pause and when its disconnected then it automatically starts playing. Atleast need those two event listener (Incoming and Disconnected) and then video player would be completed. Its a much needed functionality for any video player. If possible please release it as early as possible as we have made an ott platform completed with this package and react-native and only this functionality and android pip support is missing.
Possible implementation
Refer this package for idea " react-native-call-detection".
Code sample
Code sample
@Sumeeth-24 Bro I have tried this approach after lots of tries using the library you provided and finally this approach works for me,
Add this line in the video component
onAudioFocusChanged={event => {
if (!event.hasAudioFocus) {
setPaused(true);
setActiveCall(true);
} else {
setPaused(false);
setActiveCall(false);
}
}}
And disable your play pause button
<Pressable
style={{
marginHorizontal: moderateScale(50),
padding: scale(10),
borderRadius: 100,
justifyContent: "center",
alignItems: "center",
// backgroundColor: "rgba(0,0,0, 0.3)",
display: isLoading ? "none" : "flex",
}}
disabled={activeCall}
onPress={() => {
setPaused(!paused);
handleControlInteraction(true);
}}>
{paused ? (
<Icon
name="play"
type="ionicon"
size={showFullscreen ? moderateScale(30) : moderateScale(35)}
color={"#FFFFFF"}
/>
) : (
<Icon
name="pause"
type="ionicon"
size={showFullscreen ? moderateScale(30) : moderateScale(35)}
color={"#FFFFFF"}
/>
)}
The player works already as you describe in Android @Sumeeth-24 . See the example/basic. Run it by:
yarn install
cd examples/basic
yarn install
yarn run android
yarn run start a
However, I'm on 6.1.2 and my video player in my pure RN app I'm developing keeps playing on Android when it receives a call in simulator which is different from what the basic app does.
It looks like they handle it with this.onAudioFocusChanged in examples/basic...