React Native Video Picture In Picture for Android

[aliraza944]

Feature Request

Enable Picture In Picture for video streaming on the android platform as well.

Why it is needed

If the video is a bit long, it works quite reasonably on the ios due to the picture in picture prop availability. On Android, however, the video plays only after it completely loads. The picture in picture prop really required on the android platform as well.

Possible implementation

Code sample

[freeboub]

I investogated this issue on android, but pip is linked to an activity, not a view, so it shall not be react-native-video to handle pip (in my point of view).

[alimoghaddam2000]

I investogated this issue on android, but pip is linked to an activity, not a view, so it shall not be react-native-video to handle pip (in my point of view).

Is there any way that I could implement this feature in react native?
If there is, can you give me a hint,Thanks.

[freeboub]

I reopen this issue as there is a real topic on it.
But no time to provide sample right now

[paulohc]

I also need this feature in my current project but I don't know how add it.
I notice this closed PR. Is there any reason why it was closed?

[YangJonghun]

PR #1776 was have some issues

• not working with landscape
• should customize main activity codes

Android PIP life cycle managed by activity (already @freeboub mentioned)
but I think this library can be use fragment's pip lifecycles and application lifecycle (I know it is quite tricky, but it makes pip work without customize activity)
I was used ACTION_CLOSE_SYSTEM_DIALOGS intent, but it deprecated from Android12.
so I recommend to use Application.ActivityLifecycleCallbacks - onActivityPaused

FYI) https://stackoverflow.com/questions/51876716/listen-for-home-button-press

[aliraza944]

I investogated this issue on android, but pip is linked to an activity, not a view, so it shall not be react-native-video to handle pip (in my point of view).

Is there any way that I could implement this feature in react native? If there is, can you give me a hint,Thanks.

I improved the loading time of the video by using the following technique. Idk if it's the right one, but it greatly decreased the loading time.

First I added the following buffer config. I played with the numbers and found these useful

 bufferConfig={{
          minBufferMs: 15000,
          maxBufferMs: 20000,
          bufferForPlaybackMs: 2500,
          bufferForPlaybackAfterRebufferMs: 5000,
        }}

Second, I follow the steps on this https://github.com/react-native-video/react-native-video/issues/2611 to enable the google android exoplayer.

[jrhager84]

I investogated this issue on android, but pip is linked to an activity, not a view, so it shall not be react-native-video to handle pip (in my point of view).

From my research, you can use the default activity if you just provide the manifest some more props and add a couple overrides in the class.

See here: https://developer.android.com/guide/topics/ui/picture-in-picture

[MaxJadav]

Is there any updated PR or Fork available with fix PIP?

[bulkinav]

Yes, I also want to see the PiP on Android. This is an very important feature for video playback on modern devices.

[TDanks2000]

I would love if someone could make a pr to add pip support for android too

[YangJonghun]

@freeboub
I want to write a PR that implements Android PIP, but first I want to know which of the following options you prefer.

1. implement PIP by subscribing to the Activity's lifecycle with a Fragment. This doesn't require the library user to make any native settings, but it's a tricky and vulnerable to Android updates.
2. adding an Activity lifecycle listener. It is inconvenient for library users to add a separate listener to MainActivity.

Which way should we work?

Also, it would be nice to know if the pictureInPicture prop will work on app exit like iOS or separate like pictureInPicture/pictureInPictureOnLeave.

[freeboub]

@YangJonghun I did a proof of concept for this feature also.

Let's try to sum up Issues I encounter and how I proceed:

• Pip feature: on android the Pip is something which shall be enable per Activity. it means that the whole app will be moved to pip. as finnally this is an app feature, I think it make sense to use an external package to implement it.

  • I used https://github.com/shaun-chiang/rn-android-pip to support to enable pip feature (I had to patch it). but the package has been archived, so we cannot use it anymore
  • I let you search if another package seems to be suitable to implement it.
  • It can also make sense to create a dedicated package react-native-video-pip (forked from another open source package).

• React native video: The main issue I found in the package is the lifecycle handling:

  • as you highlight, we need to be registered to lifecycle events (especially to continue playback on pause).
  • I choose option 2.
  • But if option 1 can be implemented, it ould be better for users

In order to avoid behavior changes with other applications, I added following api to control exactly what to do with lifecycle (but I think option 2 is mandatory to be able to implement it)

Last point it is mandatory to implement it in the sample app !
There is also a canceled implementation here

lifecycle

Control android player lifecycle policy.
This object describe expected behavior when app receive onStart or onStop lifecycle events from android.

lifecycle={{
  stop: 'release',
  start: 'none',
}}

Possible values:
stop

• "release" - release the instanciated players
• "stop" - stop current playback
• "pause" - pause playback
• "none" - nothing

Start:

• "resume" - resume previously paused content
• "play" - play last played content
• "none" - nothing

Platforms: Android

[freeboub]

A poc available here for info : https://github.com/FernandoAOborges/REACT-NATIVE-PIP-ANDROID

[YangJonghun]

@freeboub
It's already been implemented, with some exceptions.

• Fragment's onPictureInPictureModeChanged is not called correctly.
• We need to enable fullscreen behavior on PIP entry and disable fullscreen behavior after PIP exit.

If you'd like, I will create a PR with a WIP status.
The current implementation can be found at the link below.
https://github.com/YangJonghun/react-native-video/tree/feat/android-pip

[freeboub]

Hello,

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

I have a first point here:

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 ...

Second point, 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)

Another interesting point would be to enable pip in sample to be able to test easily !

[YangJonghun]

@freeboub
I made draft PR #3385
If you don't mind, could you leave it as a comment?

[freeboub]

@YangJonghun I put the comment in the PR (I split it be able to use threads). Thank you !