feat: implement enterPictureInPictureOnLeave prop for both platform(Android, iOS) #3385

YangJonghun · 2023-11-26T20:46:49Z

Update the changelog

feat(android): implement pictureInPicture prop and onPictureInPictureStatusChanged event

Describe the changes

(Breaking Change) Remove pictureInPicture boolean prop (iOS)
Add enterPictureInPictureOnLeave boolean prop (Android, iOS)
Add enterPictureInPicture method (Android, iOS)
Add exitPictureInPicture method (Android, iOS)
Add onPictureInPictureStatusChanged event listener (Android)
Resolve issue React Native Video Picture In Picture for Android #2621

memo)
As I know Activity's onUserLeaveHint is acceptable lifecycle method for enter PIP. but it's impossible to detect that method within this library. so, I implement enterPicturInPicture within onHostPause.
If someone doesn't like this approach, please leave comment in this PR, I'll give you intent style code.

freeboub · 2023-11-26T20:50:00Z

Thank you for the PR, can you open a PR in draft, it will allow to comment on it.

public void onHostPause() {
isInBackground = true;
if (pictureInPictureEnabled) {
enterPictureInPictureMode();
return;
}
You cannot do like this, when another application will go over the app, it will automatically switch to Pip ...

freeboub · 2023-11-26T20:51:13Z

I don't understand why you use a dedicated fragment : ReactExoplayerFragment can you explain why you had to use it please ? (point to doc or other sample is enough)

freeboub · 2023-11-26T20:51:30Z

can you enable pip in sample to be able to test easily please

YangJonghun · 2023-11-26T20:52:11Z

can you enable pip in sample to be able to test easily please

      <Video
        style={{width: '100%', height: 300, backgroundColor: 'black'}}
        resizeMode={ResizeMode.CONTAIN}
        source={{
          uri: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel-en.ism/.mpd',
        }}
        selectedTextTrack={{
          type: SelectedTrackType.INDEX,
          value: 0,
        }}
        fullscreen={false}
        controls
        pictureInPicture
        playWhenInactive
        playInBackground={false}
        debug={{enable: true, thread: true}}
        onPictureInPictureStatusChanged={({isActive}) => {
          console.log(isActive, 'isActive');
        }}
      />

YangJonghun · 2023-11-26T20:57:44Z

@freeboub

I don't understand why you use a dedicated fragment : ReactExoplayerFragment can you explain why you had to use it please ? (point to doc or other sample is enough)

To implement PIP, we need to use the onUserLeaveHint and onPictureInPictureModeChanged methods of Activity. However, this requires forcing the user to modify their native code.
To avoid this, I tricky replaced onUserLeaveHint with onPause in the Fragment and onPictureInPictureModeChanged with Fragment's onPictureInPictureModeChanged in the Fragment.

freeboub · 2023-11-26T20:59:11Z

can you enable pip in sample to be able to test easily please

      <Video
        style={{width: '100%', height: 300, backgroundColor: 'black'}}
        resizeMode={ResizeMode.CONTAIN}
        source={{
          uri: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel-en.ism/.mpd',
        }}
        selectedTextTrack={{
          type: SelectedTrackType.INDEX,
          value: 0,
        }}
        fullscreen={false}
        controls
        pictureInPicture
        playWhenInactive
        playInBackground={false}
        debug={{enable: true, thread: true}}
        onPictureInPictureStatusChanged={({isActive}) => {
          console.log(isActive, 'isActive');
        }}
      />

Ok, but will it work without native controls ?

YangJonghun · 2023-11-26T21:00:49Z

can you enable pip in sample to be able to test easily please

      <Video
        style={{width: '100%', height: 300, backgroundColor: 'black'}}
        resizeMode={ResizeMode.CONTAIN}
        source={{
          uri: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel-en.ism/.mpd',
        }}
        selectedTextTrack={{
          type: SelectedTrackType.INDEX,
          value: 0,
        }}
        fullscreen={false}
        controls
        pictureInPicture
        playWhenInactive
        playInBackground={false}
        debug={{enable: true, thread: true}}
        onPictureInPictureStatusChanged={({isActive}) => {
          console.log(isActive, 'isActive');
        }}
      />

Ok, but will it work without native controls ?

Yes, it's same like iOS and there are no restrictions.

YangJonghun · 2023-11-26T21:06:08Z

Thank you for the PR, can you open a PR in draft, it will allow to comment on it.

public void onHostPause() { isInBackground = true; if (pictureInPictureEnabled) { enterPictureInPictureMode(); return; } You cannot do like this, when another application will go over the app, it will automatically switch to Pip ...

I'm not sure, but as I know onUserLeaveHint is also called when another app is turned on.
Actually I wanted to detect and implement the home key event, but the API was deprecated and I replaced it with onPause.

YangJonghun · 2024-01-11T04:08:26Z

@nick-mccomb-easygo
Unfortunately, I've been so busy lately that I haven't been able to keep up with this work, but I'm going to finish it.
You're welcome to implement it if you'd like.

- activity provide helper method for same purpose, but this flag makes code simple

YangJonghun · 2024-01-19T17:44:53Z

@freeboub @KrzysztofMoch

Hi. I'd like to let you know this PR is ready for review 🙌
please review when you possible. :)

FYI,
this PR depends on PR #3489
If doesn't merge, PIP's action button doesn't work properly

I think this code is too mush complicate to understand.
but I couldn't rewrite FullScreenPlayerView code in this PR.
It would be nice if you(or someone) could refactor it later.

android/src/main/java/com/brentvatne/exoplayer/PictureInPictureUtil.kt

KrzysztofMoch

LGTM 👍, thank you for the PR!
Tested it on Android 14, and 10 (simulators) and it worked for me. Will test it on device later.
Lets @freeboub review and for me we can merge

freeboub · 2024-10-10T21:44:36Z

I just fix conflict. The only comments I have are in the discussion

android/src/main/java/com/brentvatne/react/VideoManagerModule.kt

KrzysztofMoch · 2024-10-11T10:16:15Z

I have created 6.7.0-rc.0 release that contain this PR - as we will get feedback and do some changes I will push more RCs. For now let's see how it will go 🙌

KrzysztofMoch · 2024-10-26T15:09:40Z

I have released next rc version 6.8.0-rc.0 - if there will be no reported issues, this PR should be merged 🙌

tungmin97 · 2024-11-10T16:03:36Z

Hi @YangJonghun, I'm encountering the same issue as @tiplefbxx mentioned where my app would always crash upon return from PIP.

For a little bit more context, I have a separated Video component outside my navigator stack, and in my testing unload the video component below when having a floating player eliminates this behavior.

Your app just crashed. See the error below.
java.lang.IndexOutOfBoundsException: Index: 1, Size: 1
  java.util.ArrayList.get(ArrayList.java:437)
  com.brentvatne.exoplayer.ReactExoplayerView.setIsInPictureInPicture(ReactExoplayerView.java:2305)
  com.brentvatne.exoplayer.ReactExoplayerFragment.onPictureInPictureModeChanged(ReactExoplayerFragment.kt:35)
  androidx.fragment.app.Fragment.performPictureInPictureModeChanged(Fragment.java:3221)
  androidx.fragment.app.FragmentManager.dispatchPictureInPictureModeChanged(FragmentManager.java:3017)
  androidx.fragment.app.FragmentManager.lambda$new$3$androidx-fragment-app-FragmentManager(FragmentManager.java:468)
  androidx.fragment.app.FragmentManager$$ExternalSyntheticLambda3.accept(Unknown Source:4)
  androidx.activity.ComponentActivity.onPictureInPictureModeChanged(ComponentActivity.java:1097)
  android.app.Activity.dispatchPictureInPictureModeChanged(Unknown Source:23)
  android.app.ActivityThread.handleWindowingModeChangeIfNeeded(Unknown Source:40)
  android.app.ActivityThread.performActivityConfigurationChanged(Unknown Source:12)
  android.app.ActivityThread.performConfigurationChangedForActivity(Unknown Source:28)
  android.app.ActivityThread.handleActivityConfigurationChanged(Unknown Source:273)
  android.app.ActivityThread$ActivityClientRecord$1.onConfigurationChanged(Unknown Source:14)
  android.view.ViewRootImpl.performConfigurationChange(Unknown Source:81)
  android.view.ViewRootImpl.handleResized(Unknown Source:112)
  android.view.ViewRootImpl.-$$Nest$mhandleResized(Unknown Source:0)
  android.view.ViewRootImpl$ViewRootHandler.handleMessageImpl(Unknown Source:658)
  android.view.ViewRootImpl$ViewRootHandler.handleMessage(Unknown Source:15)
  android.os.Handler.dispatchMessage(Unknown Source:19)
  android.os.Looper.loopOnce(Unknown Source:182)
  android.os.Looper.loop(Unknown Source:82)
  android.app.ActivityThread.main(Unknown Source:123)
  java.lang.reflect.Method.invoke(Native Method)
  com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(Unknown Source:11)
  com.android.internal.os.ZygoteInit.main(Unknown Source:312)

YangJonghun · 2024-11-11T05:38:18Z

@tungmin97
Thanks for reporting me. but it's hard to me to reproduce what you're describing🥲
If you can, please provide me any small reproduction code🙏

tungmin97 · 2024-11-13T08:22:30Z

@YangJonghun here is the crash example. I've found some issues only happen on android.

1 - We can still swipe home to enter pip even after the video outside navigation is paused, the other has enterPictureInPictureOnLeave set to false.

2 - Has both video playing, pause then play the floated video, swipe home or press the button to enter PIP mode, notice the source is set to the other video with enterPictureInPictureOnLeave set to false.

3 - Resume the app while in PIP will always crash the application

YangJonghun · 2024-11-29T14:32:15Z

@tungmin97
Sorry for late reply.
Multiplayer issue is a difficult problem to solve, so fix will be delayed.
I'm working on this PR personally, so I can't guarantee any due date, but I'll get to it as soon as I can. 🙏

FYI. @KrzysztofMoch @freeboub

YangJonghun · 2024-12-03T09:32:09Z

@l2hyunwoo May I request your code review?🙏

KrzysztofMoch · 2024-12-10T18:48:46Z

Hey @YangJonghun what is status of PR? Together with @freeboub we are okay to merge this PR - so let me know if you are also okay to merge it

- remove code that uses Fragment, which is a tricky implementation

YangJonghun · 2024-12-15T11:10:58Z

@KrzysztofMoch @freeboub
I apologise for the delay in responding.
I've been testing in my spare time and this PR has the following issues

It may behave differently than intended when multiple Video components exist at the same time
Fullscreen behavior has changed significantly from when this PR was originally written, so it doesn't work correctly on Android. (Fullscreen controller will be exposed on pip)
I've removed tricky implementation with Fragment and replaced it with androidx. The current implementation is recommended stable implementation for Android, but it's been implemented recently and lacks testing.
Web support is not written because it was added while the PR was not merged. It's not a difficult task, but I don't have enough time these days to work on it🥲

I'm fine with this PR being merged, but there are things that need to be fixed, so it would be nice to let the developers know that this is an experimental feature.

l2hyunwoo · 2024-12-15T11:11:16Z

android/src/main/java/com/brentvatne/exoplayer/PictureInPictureUtil.kt

+
+        val onPictureInPictureModeChanged: (info: PictureInPictureModeChangedInfo) -> Unit = { info: PictureInPictureModeChangedInfo ->
+            view.setIsInPictureInPicture(info.isInPictureInPictureMode)
+            if (!info.isInPictureInPictureMode && context.findActivity().lifecycle.currentState == Lifecycle.State.CREATED) {


Suggested change

if (!info.isInPictureInPictureMode && context.findActivity().lifecycle.currentState == Lifecycle.State.CREATED) {

if (!info.isInPictureInPictureMode && activity.lifecycle.currentState == Lifecycle.State.CREATED) {

How about this?

Isn't it possible Activity is different between when bind eventListeners and when onPictureInPictureModeChanged is called?🤔

It makes more sense to fix it as you said! We need to only handle Activity where the Video is visible

5e244e8
I've fixed it in above commit :)

KrzysztofMoch · 2024-12-15T11:13:46Z

Sure! We can go with what we have, I will open tickets for those issues

KrzysztofMoch · 2024-12-15T15:46:59Z

So @YangJonghun, once you are ready please let me know 🙌

YangJonghun added 3 commits November 27, 2023 05:03

docs: enable Android PIP

29c35e9

chore: change comments

e5fd0c7

feat(android): implement Android PictureInPicture

b554034

YangJonghun mentioned this pull request Nov 26, 2023

React Native Video Picture In Picture for Android #2621

Open

YangJonghun added 6 commits January 18, 2024 21:46

Merge branch 'master' into feat/android-pip

e6797fd

refactor: minor refactor code and apply lint

3ba6a30

fix: rewrite pip action intent code for Android14

4938bd0

fix: remove redundant codes

6e8307b

feat: add isInPictureInPicture flag for lifecycle handling

0c06c2f

- activity provide helper method for same purpose, but this flag makes code simple

feat: add pipFullscreenPlayerView for makes PIP include video only

f3066a4

YangJonghun marked this pull request as ready for review January 19, 2024 17:40

Merge branch 'master' into feat/android-pip

60657eb

KrzysztofMoch reviewed Jan 20, 2024

View reviewed changes

android/src/main/java/com/brentvatne/exoplayer/PictureInPictureUtil.kt Outdated Show resolved Hide resolved

YangJonghun added 3 commits January 21, 2024 00:20

fix: add manifest value checker for prevent crash

2872689

docs: add pictureInPicture prop's Android guide

9723313

fix: sync controller visibility

8269546

KrzysztofMoch requested a review from freeboub January 22, 2024 15:43

KrzysztofMoch approved these changes Jan 22, 2024

View reviewed changes

refactor: refining variable name

d10f624

YangJonghun force-pushed the feat/android-pip branch from 4621774 to 1b3a0b2 Compare January 23, 2024 16:43

freeboub reviewed Oct 10, 2024

View reviewed changes

android/src/main/java/com/brentvatne/react/VideoManagerModule.kt Show resolved Hide resolved

freeboub and others added 4 commits October 10, 2024 23:46

Update android/src/main/java/com/brentvatne/react/VideoManagerModule.kt

9c805d9

Merge branch 'master' into feat/android-pip

8e132c3

fix(android): fix lint error

d712690

fix(ios): fix lint error

441fb56

YangJonghun added 3 commits October 13, 2024 11:46

Merge branch 'master' into feat/android-pip

c431403

fix(ios): fix lint error

42b2477

feat(expo): add android picture in picture config within expo plugin

a4381e4

Merge branch 'master' into feat/android-pip

87bc4ab

freeboub mentioned this pull request Nov 17, 2024

PictureInPicture not work after source uri change #2916

Closed

Merge branch 'master' into feat/android-pip

3c0c24c

YangJonghun mentioned this pull request Nov 29, 2024

feat(android): bump androidx.activity default version from v1.8.2 to v1.9.3 #4314

Merged

Merge branch 'master' into feat/android-pip

a27d098

fix: Replace Fragment with androidx.activity

3521d74

- remove code that uses Fragment, which is a tricky implementation

l2hyunwoo reviewed Dec 15, 2024

View reviewed changes

YangJonghun added 3 commits December 15, 2024 20:20

fix: fix lint error

a86189d

fix(android): disable auto enter when player released

846412e

fix(android): fix event handler to check based on Activity it's bound to

5e244e8

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: implement enterPictureInPictureOnLeave prop for both platform(Android, iOS) #3385

feat: implement enterPictureInPictureOnLeave prop for both platform(Android, iOS) #3385

YangJonghun commented Nov 26, 2023 •

edited

Loading

freeboub commented Nov 26, 2023 •

edited

Loading

freeboub commented Nov 26, 2023

freeboub commented Nov 26, 2023

YangJonghun commented Nov 26, 2023 •

edited

Loading

YangJonghun commented Nov 26, 2023 •

edited

Loading

freeboub commented Nov 26, 2023

YangJonghun commented Nov 26, 2023

YangJonghun commented Nov 26, 2023 •

edited

Loading

YangJonghun commented Jan 11, 2024

YangJonghun commented Jan 19, 2024 •

edited

Loading

KrzysztofMoch left a comment

freeboub commented Oct 10, 2024

KrzysztofMoch commented Oct 11, 2024

KrzysztofMoch commented Oct 26, 2024

tungmin97 commented Nov 10, 2024

YangJonghun commented Nov 11, 2024

tungmin97 commented Nov 13, 2024

YangJonghun commented Nov 29, 2024

YangJonghun commented Dec 3, 2024 •

edited

Loading

KrzysztofMoch commented Dec 10, 2024

YangJonghun commented Dec 15, 2024

l2hyunwoo Dec 15, 2024

YangJonghun Dec 15, 2024

YangJonghun Dec 15, 2024 •

edited

Loading

YangJonghun Dec 15, 2024

KrzysztofMoch commented Dec 15, 2024

KrzysztofMoch commented Dec 15, 2024

	if (!info.isInPictureInPictureMode && context.findActivity().lifecycle.currentState == Lifecycle.State.CREATED) {
	if (!info.isInPictureInPictureMode && activity.lifecycle.currentState == Lifecycle.State.CREATED) {

feat: implement enterPictureInPictureOnLeave prop for both platform(Android, iOS) #3385

Are you sure you want to change the base?

feat: implement enterPictureInPictureOnLeave prop for both platform(Android, iOS) #3385

Conversation

YangJonghun commented Nov 26, 2023 • edited Loading

Update the changelog

Describe the changes

freeboub commented Nov 26, 2023 • edited Loading

freeboub commented Nov 26, 2023

freeboub commented Nov 26, 2023

YangJonghun commented Nov 26, 2023 • edited Loading

YangJonghun commented Nov 26, 2023 • edited Loading

freeboub commented Nov 26, 2023

YangJonghun commented Nov 26, 2023

YangJonghun commented Nov 26, 2023 • edited Loading

YangJonghun commented Jan 11, 2024

YangJonghun commented Jan 19, 2024 • edited Loading

KrzysztofMoch left a comment

Choose a reason for hiding this comment

freeboub commented Oct 10, 2024

KrzysztofMoch commented Oct 11, 2024

KrzysztofMoch commented Oct 26, 2024

tungmin97 commented Nov 10, 2024

YangJonghun commented Nov 11, 2024

tungmin97 commented Nov 13, 2024

YangJonghun commented Nov 29, 2024

YangJonghun commented Dec 3, 2024 • edited Loading

KrzysztofMoch commented Dec 10, 2024

YangJonghun commented Dec 15, 2024

l2hyunwoo Dec 15, 2024

Choose a reason for hiding this comment

YangJonghun Dec 15, 2024

Choose a reason for hiding this comment

YangJonghun Dec 15, 2024 • edited Loading

Choose a reason for hiding this comment

YangJonghun Dec 15, 2024

Choose a reason for hiding this comment

KrzysztofMoch commented Dec 15, 2024

KrzysztofMoch commented Dec 15, 2024

YangJonghun commented Nov 26, 2023 •

edited

Loading

freeboub commented Nov 26, 2023 •

edited

Loading

YangJonghun commented Nov 26, 2023 •

edited

Loading

YangJonghun commented Nov 26, 2023 •

edited

Loading

YangJonghun commented Nov 26, 2023 •

edited

Loading

YangJonghun commented Jan 19, 2024 •

edited

Loading

YangJonghun commented Dec 3, 2024 •

edited

Loading

YangJonghun Dec 15, 2024 •

edited

Loading