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

android/src/main/java/com/brentvatne/common/react/VideoEventEmitter.java

@@ -58,6 +58,7 @@ public VideoEventEmitter(ReactContext reactContext) {
     private static final String EVENT_TEXT_TRACKS = "onTextTracks";
     private static final String EVENT_VIDEO_TRACKS = "onVideoTracks";
     private static final String EVENT_ON_RECEIVE_AD_EVENT = "onReceiveAdEvent";
+    private static final String EVENT_PICTURE_IN_PICTURE_STATUS_CHANGED = "onPictureInPictureStatusChanged";
 
     static public final String[] Events = {
             EVENT_LOAD_START,
@@ -85,7 +86,8 @@ public VideoEventEmitter(ReactContext reactContext) {
             EVENT_TEXT_TRACKS,
             EVENT_VIDEO_TRACKS,
             EVENT_BANDWIDTH,
-            EVENT_ON_RECEIVE_AD_EVENT
+            EVENT_ON_RECEIVE_AD_EVENT,
+            EVENT_PICTURE_IN_PICTURE_STATUS_CHANGED
     };
 
     @Retention(RetentionPolicy.SOURCE)
@@ -115,7 +117,8 @@ public VideoEventEmitter(ReactContext reactContext) {
             EVENT_TEXT_TRACKS,
             EVENT_VIDEO_TRACKS,
             EVENT_BANDWIDTH,
-            EVENT_ON_RECEIVE_AD_EVENT
+            EVENT_ON_RECEIVE_AD_EVENT,
+            EVENT_PICTURE_IN_PICTURE_STATUS_CHANGED
     })
     @interface VideoEvents {
     }
@@ -157,6 +160,7 @@ public VideoEventEmitter(ReactContext reactContext) {
     private static final String EVENT_PROP_BITRATE = "bitrate";
 
     private static final String EVENT_PROP_IS_PLAYING = "isPlaying";
+    private static final String EVENT_PROP_IS_ACTIVE = "isActive";
 
     public void setViewId(int viewId) {
         this.viewId = viewId;
@@ -387,6 +391,12 @@ public void volumeChange(float volume) {
         receiveEvent(EVENT_VOLUME_CHANGE, map);
     }
 
+    public void onPictureInPictureStatusChanged(boolean isActive) {
+        WritableMap map = Arguments.createMap();
+        map.putBoolean(EVENT_PROP_IS_ACTIVE, isActive);
+        receiveEvent(EVENT_PICTURE_IN_PICTURE_STATUS_CHANGED, map);
+    }
+
     public void timedMetadata(ArrayList<TimedMetadata> _metadataArrayList) {
         if (_metadataArrayList.size() == 0) {
             return;

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

@@ -0,0 +1,79 @@
+package com.brentvatne.exoplayer
+
+import android.annotation.SuppressLint
+import android.app.AppOpsManager
+import android.app.PictureInPictureParams
+import android.app.RemoteAction
+import android.content.pm.PackageManager
+import android.graphics.drawable.Icon
+import android.os.Build
+import android.os.Process
+import androidx.annotation.ChecksSdkIntAtLeast
+import androidx.annotation.RequiresApi
+import androidx.core.app.AppOpsManagerCompat
+import com.brentvatne.receiver.PictureInPictureReceiver
+import com.facebook.react.uimanager.ThemedReactContext
+
+class PictureInPictureUtil {
+    companion object {
+        fun enterPictureInPictureMode(context: ThemedReactContext, pictureInPictureParams: PictureInPictureParams?) {
+            if (!isSupportPictureInPicture(context)) return
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && pictureInPictureParams != null) {
+                context.currentActivity?.enterPictureInPictureMode(pictureInPictureParams)
+            } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
+                context.currentActivity?.enterPictureInPictureMode()
+            }
+        }
+
+        fun updatePictureInPictureActions(context: ThemedReactContext, pictureInPictureParams: PictureInPictureParams) {
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+                context.currentActivity?.setPictureInPictureParams(pictureInPictureParams)
+            }
+        }
+
+        @RequiresApi(Build.VERSION_CODES.O)
+        fun getPictureInPictureActions(context: ThemedReactContext, isPaused: Boolean, receiver: PictureInPictureReceiver): ArrayList<RemoteAction> {
+            val intent = receiver.getPipActionIntent(isPaused)
+            val resource =
+                if (isPaused) androidx.media3.ui.R.drawable.exo_icon_play else androidx.media3.ui.R.drawable.exo_icon_pause
+            val icon = Icon.createWithResource(context, resource)
+            val title = if (isPaused) "play" else "pause"
+            return arrayListOf(RemoteAction(icon, title, title, intent))
+        }
+
+        private fun isSupportPictureInPicture(context: ThemedReactContext): Boolean =
+            checkIsApiSupport() &&
+                checkIsUserAllowPIP(
+                    context
+                ) &&
+                checkIsSystemSupportPIP(context)
+
+        @ChecksSdkIntAtLeast(api = Build.VERSION_CODES.N)
+        private fun checkIsApiSupport(): Boolean = Build.VERSION.SDK_INT >= Build.VERSION_CODES.N
+
+        private fun checkIsUserAllowPIP(context: ThemedReactContext): Boolean {
+            val activity = context.currentActivity ?: return false
+            return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+                @SuppressLint("InlinedApi")
+                val result = AppOpsManagerCompat.noteOpNoThrow(
+                    activity,
+                    AppOpsManager.OPSTR_PICTURE_IN_PICTURE,
+                    Process.myUid(),
+                    activity.packageName
+                )
+                // In Android 10 Google Pixel, If allow,MODE_ALLOWED. If not allow, MODE_ERRORED
+                // Log.d(TAG, "isSupportPIP: OPSTR_PICTURE_IN_PICTURE=" + result); // MODE_ERRORED
+                AppOpsManager.MODE_ALLOWED == result
+            } else {
+                Build.VERSION.SDK_INT < Build.VERSION_CODES.O && Build.VERSION.SDK_INT >= Build.VERSION_CODES.N
+            }
+        }
+
+        // PIP might be disabled on devices that have low RAM.
+        @RequiresApi(Build.VERSION_CODES.N)
+        private fun checkIsSystemSupportPIP(context: ThemedReactContext): Boolean {
+            val activity = context.currentActivity ?: return false
+            return activity.packageManager.hasSystemFeature(PackageManager.FEATURE_PICTURE_IN_PICTURE)
+        }
+    }
+}

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

@@ -0,0 +1,30 @@
+package com.brentvatne.exoplayer
+
+import androidx.fragment.app.Fragment
+
+class ReactExoplayerFragment(private val view: ReactExoplayerView) : Fragment() {
+
+    private var mIsOnStopCalled = false
+
+    override fun onStart() {
+        super.onStart()
+        mIsOnStopCalled = false
+    }
+
+    override fun onStop() {
+        // On entering Picture-in-Picture mode, onPause is called, but not onStop.
+        // For this reason, this is the place where we should pause the video playback.
+        super.onStop()
+        if (!view.playInBackground) view.setPausedModifier(true)
+        mIsOnStopCalled = true
+    }
+
+    override fun onPictureInPictureModeChanged(isInPictureInPictureMode: Boolean) {
+        super.onPictureInPictureModeChanged(isInPictureInPictureMode)
+        view.setIsInPictureInPicture(isInPictureInPictureMode)
+        // To pause player when closing PIP window.
+        if (!isInPictureInPictureMode && mIsOnStopCalled && !view.playInBackground) {
+            view.setPausedModifier(true)
+        }
+    }
+}

android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java

@@ -9,9 +9,12 @@
 import android.annotation.SuppressLint;
 import android.app.Activity;
 import android.app.ActivityManager;
+import android.app.PictureInPictureParams;
+import android.app.RemoteAction;
 import android.content.Context;
 import android.media.AudioManager;
 import android.net.Uri;
+import android.os.Build;
 import android.os.Handler;
 import android.os.Looper;
 import android.os.Message;
@@ -25,6 +28,7 @@
 import androidx.activity.OnBackPressedCallback;
 import androidx.annotation.NonNull;
 import androidx.annotation.WorkerThread;
+import androidx.fragment.app.FragmentActivity;
 import androidx.core.view.WindowCompat;
 import androidx.core.view.WindowInsetsCompat;
 import androidx.core.view.WindowInsetsControllerCompat;
@@ -101,12 +105,14 @@
 import com.brentvatne.react.R;
 import com.brentvatne.receiver.AudioBecomingNoisyReceiver;
 import com.brentvatne.receiver.BecomingNoisyListener;
+import com.brentvatne.receiver.PictureInPictureReceiver;
 import com.facebook.react.bridge.Dynamic;
 import com.facebook.react.bridge.LifecycleEventListener;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.UiThreadUtil;
 import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.views.view.ReactViewGroup;
 import com.google.ads.interactivemedia.v3.api.AdEvent;
 import com.google.ads.interactivemedia.v3.api.AdErrorEvent;
 import com.google.common.collect.ImmutableList;
@@ -159,6 +165,7 @@ public class ReactExoplayerView extends FrameLayout implements
 
     private ExoPlayerView exoPlayerView;
     private FullScreenPlayerView fullScreenPlayerView;
+    private FullScreenPlayerView pipFullScreenPlayerView;
     private ImaAdsLoader adsLoader;
 
     private DataSource.Factory mediaDataSourceFactory;
@@ -174,6 +181,9 @@ public class ReactExoplayerView extends FrameLayout implements
     private boolean isPaused;
     private boolean isBuffering;
     private boolean muted = false;
+    private boolean pictureInPictureEnabled = false;
+    private boolean isInPictureInPicture = false;
+    private PictureInPictureParams.Builder pictureInPictureParamsBuilder;
     private boolean hasAudioFocus = false;
     private float rate = 1f;
     private AudioOutput audioOutput = AudioOutput.SPEAKER;
@@ -184,7 +194,6 @@ public class ReactExoplayerView extends FrameLayout implements
     private boolean hasDrmFailed = false;
     private boolean isUsingContentResolution = false;
     private boolean selectTrackWhenReady = false;
-
     private int minBufferMs = DefaultLoadControl.DEFAULT_MIN_BUFFER_MS;
     private int maxBufferMs = DefaultLoadControl.DEFAULT_MAX_BUFFER_MS;
     private int bufferForPlaybackMs = DefaultLoadControl.DEFAULT_BUFFER_FOR_PLAYBACK_MS;
@@ -217,7 +226,7 @@ public class ReactExoplayerView extends FrameLayout implements
     private boolean disableDisconnectError;
     private boolean preventsDisplaySleepDuringVideoPlayback = true;
     private float mProgressUpdateInterval = 250.0f;
-    private boolean playInBackground = false;
+    protected boolean playInBackground = false;
     private Map<String, String> requestHeaders;
     private boolean mReportBandwidth = false;
     private UUID drmUUID = null;
@@ -229,8 +238,10 @@ public class ReactExoplayerView extends FrameLayout implements
 
     // React
     private final ThemedReactContext themedReactContext;
+    private final ReactExoplayerFragment reactExoplayerFragment;
     private final AudioManager audioManager;
     private final AudioBecomingNoisyReceiver audioBecomingNoisyReceiver;
+    private final PictureInPictureReceiver pictureInPictureReceiver;
     private final AudioManager.OnAudioFocusChangeListener audioFocusChangeListener;
 
     // store last progress event values to avoid sending unnecessary messages
@@ -279,6 +290,7 @@ public ReactExoplayerView(ThemedReactContext context, ReactExoplayerConfig confi
         super(context);
         this.themedReactContext = context;
         this.eventEmitter = new VideoEventEmitter(context);
+        this.reactExoplayerFragment = new ReactExoplayerFragment(this);
         this.config = config;
         this.bandwidthMeter = config.getBandwidthMeter();
 
@@ -288,6 +300,11 @@ public ReactExoplayerView(ThemedReactContext context, ReactExoplayerConfig confi
         themedReactContext.addLifecycleEventListener(this);
         audioBecomingNoisyReceiver = new AudioBecomingNoisyReceiver(themedReactContext);
         audioFocusChangeListener = new OnAudioFocusChangedListener(this, themedReactContext);
+        pictureInPictureReceiver = new PictureInPictureReceiver(this, themedReactContext);
+
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && pictureInPictureParamsBuilder == null) {
+            pictureInPictureParamsBuilder = new PictureInPictureParams.Builder();
+        }
     }
 
     private boolean isPlayingAd() {
@@ -324,11 +341,26 @@ private void createViews() {
     protected void onAttachedToWindow() {
         super.onAttachedToWindow();
         initializePlayer();
+        Activity activity = themedReactContext.getCurrentActivity();
+        if (activity instanceof FragmentActivity) {
+            ((FragmentActivity) themedReactContext.getCurrentActivity())
+                    .getSupportFragmentManager()
+                    .beginTransaction()
+                    .add(((ReactViewGroup) getParent()).getId(), reactExoplayerFragment)
+                    .commitAllowingStateLoss();
+        }
     }
 
     @Override
     protected void onDetachedFromWindow() {
         super.onDetachedFromWindow();
+        Activity activity = themedReactContext.getCurrentActivity();
+        if (activity instanceof FragmentActivity && reactExoplayerFragment != null) {
+            ((FragmentActivity) activity).getSupportFragmentManager()
+                    .beginTransaction()
+                    .remove(reactExoplayerFragment)
+                    .commitAllowingStateLoss();
+        }
         /* We want to be able to continue playing audio when switching tabs.
          * Leave this here in case it causes issues.
          */
@@ -347,7 +379,11 @@ public void onHostResume() {
     @Override
     public void onHostPause() {
         isInBackground = true;
-        if (playInBackground) {
+        if (pictureInPictureEnabled && !isInPictureInPicture) {
+            enterPictureInPictureMode();
+            return;
+        }
+        if (playInBackground || isInPictureInPicture) {
             return;
         }
         setPlayWhenReady(false);
@@ -648,6 +684,7 @@ private void initializePlayerCore(ReactExoplayerView self) {
             adsLoader.setPlayer(player);
         }
         audioBecomingNoisyReceiver.setListener(self);
+        pictureInPictureReceiver.setListener();
         bandwidthMeter.addEventListener(new Handler(), self);
         setPlayWhenReady(!isPaused);
         playerNeedsSource = true;
@@ -902,6 +939,7 @@ private void releasePlayer() {
         adsLoader = null;
         progressHandler.removeMessages(SHOW_PROGRESS);
         audioBecomingNoisyReceiver.removeListener();
+        pictureInPictureReceiver.removeListener();
         bandwidthMeter.removeEventListener(this);
 
         if (mainHandler != null && mainRunnable != null) {
@@ -1839,7 +1877,64 @@ public void setPausedModifier(boolean paused) {
             } else {
                 pausePlayback();
             }
+            updatePictureInPictureActions(paused);
+        }
+    }
+
+    public void setPictureInPicture(boolean pictureInPictureEnabled) {
+        this.pictureInPictureEnabled = Build.VERSION.SDK_INT >= Build.VERSION_CODES.N && pictureInPictureEnabled;
+    }
+
+    protected void setIsInPictureInPicture(boolean isInPictureInPicture) {
+        this.isInPictureInPicture = isInPictureInPicture;
+        eventEmitter.onPictureInPictureStatusChanged(isInPictureInPicture);
+        if (isInPictureInPicture) {
+            if (fullScreenPlayerView != null && fullScreenPlayerView.isShowing()) {
+                fullScreenPlayerView.dismiss();
+            }
+            if (pipFullScreenPlayerView == null) {
+                pipFullScreenPlayerView = new FullScreenPlayerView(getContext(), exoPlayerView, null, new OnBackPressedCallback(true) {
+                    @Override
+                    public void handleOnBackPressed() { }
+                });
+            }
+            pipFullScreenPlayerView.show();
+        } else {
+            if (pipFullScreenPlayerView != null && pipFullScreenPlayerView.isShowing())  {
+                pipFullScreenPlayerView.dismiss();
+            }
+            if (controls) {
+                fullScreenPlayerView = new FullScreenPlayerView(getContext(), exoPlayerView, playerControlView, new OnBackPressedCallback(true) {
+                    @Override
+                    public void handleOnBackPressed() {
+                        setFullscreen(false);
+                    }
+                });
+                fullScreenPlayerView.show();
+                updateFullScreenButtonVisbility();
+            }
+        }
+    }
+
+    private void updatePictureInPictureActions(boolean isPaused) {
+        if (pictureInPictureParamsBuilder == null) return;
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+            ArrayList<RemoteAction> actions = PictureInPictureUtil.Companion.getPictureInPictureActions(themedReactContext, isPaused, pictureInPictureReceiver);
+            pictureInPictureParamsBuilder.setActions(actions);
+            PictureInPictureParams pipParams = pictureInPictureParamsBuilder.build();
+            PictureInPictureUtil.Companion.updatePictureInPictureActions(themedReactContext, pipParams);
+        }
+    }
+
+    protected void enterPictureInPictureMode() {
+        if (!pictureInPictureEnabled) return;
+        PictureInPictureParams _pipParams = null;
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+            ArrayList<RemoteAction> actions = PictureInPictureUtil.Companion.getPictureInPictureActions(themedReactContext, isPaused, pictureInPictureReceiver);
+            pictureInPictureParamsBuilder.setActions(actions);
+            _pipParams = pictureInPictureParamsBuilder.build();
         }
+        PictureInPictureUtil.Companion.enterPictureInPictureMode(themedReactContext, _pipParams);
     }
 
     public void setMutedModifier(boolean muted) {