Hello guys,How to implement PiP (Picture-in-picture) video on React Native Home Button Pressed ? I cannot show correctly PiP Video in React Native

Question

When I pressed android home button,play pip video via native modules and pass video url and current duration of video and Native Module accept that parameter and intent to Video Activity.Inside Video Activity OnCreate method,I try to show PiP video.When I pressed on icon in react native,PiP mode is show but I cannot go back to react native view.When I pressed on Android Home Button,PiP mode cannot show.

PiPModule.java

public class PiPModule extends ReactContextBaseJavaModule {

public PiPModule(ReactApplicationContext reactContext){
    super(reactContext);
}

@NonNull
@Override
public String getName() {
    return "PiPModule";
}

@ReactMethod
public void showPiPVideo(String videoURL,int seekToDuration)
{
    Toast.makeText(getReactApplicationContext(),"showPiPVideo is working",Toast.LENGTH_SHORT).show();
    Intent intent = new Intent(getCurrentActivity(), PiPVideoActivity.class);
    intent.putExtra("VIDEO_URL",videoURL);
    intent.putExtra("VIDEO_CURRENT_DURATION",seekToDuration);
    getCurrentActivity().startActivity(intent);
}

}

Usage in React-Native Component

import {NativeModules} from 'react-native'
const pipVideo = NativeModules.PiPModule;
pipVideo.showPiPVideo(videoURL, Math.floor(currentTime) * 1000);

PiPVideo Activity

public class PiPVideoActivity extends AppCompatActivity {

private String videoPath;
private int videoDuration;
VideoView myVideoView;

@RequiresApi(api = Build.VERSION_CODES.O)
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_pip_video);

    Intent i = getIntent();

    if(i != null){
        myVideoView = (VideoView) findViewById(R.id.videoView);
        videoPath = i.getStringExtra("VIDEO_URL");
        videoDuration = i.getIntExtra("VIDEO_CURRENT_DURATION",0);
        PlayVideo();
    }
    else{
        Toast.makeText(PiPVideoActivity.this, "VideoURL not found", Toast.LENGTH_SHORT).show();
    }

    PictureInPictureParams params = new PictureInPictureParams
            .Builder()
            .setAspectRatio(new Rational(1,1))
            .build();
    enterPictureInPictureMode(params);

}

private void PlayVideo() {
    try {
        getWindow().setFormat(PixelFormat.TRANSLUCENT);
        Uri video = Uri.parse(videoPath);
        myVideoView.setVideoURI(video);
        myVideoView.requestFocus();
        myVideoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
            public void onPrepared(MediaPlayer mp) {
                //seek to receive miliseconds
                myVideoView.seekTo(videoDuration);
                myVideoView.start();
            }
        });

    } catch (Exception e) {
        System.out.println("Video Play Error :" + e.toString());
        finish();
    }

}

}

score 0 · Answer 1 · answered Mar 16 '23 at 17:34

You can implement Picture in Picture in react native with writing some native modules

Native module for Android:

package com.rnchallenge;

import android.app.PictureInPictureParams;
import android.os.Build;
import android.util.Rational;
import android.widget.Toast;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class PipModule extends ReactContextBaseJavaModule {
    private Rational aspectRatio;
    PipModule(ReactApplicationContext context){
        super(context);
        aspectRatio = new Rational(4,3);
    }

    @Override
    public String getName(){
        return "PipModule";
    }

    @ReactMethod
    public void EnterPipMode(){
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O) {
            PictureInPictureParams params = new PictureInPictureParams.Builder().setAspectRatio(this.aspectRatio).build();
            getCurrentActivity().enterPictureInPictureMode(params);
        }
    }
}

Hello guys,How to implement PiP (Picture-in-picture) video on React Native Home Button Pressed ? I cannot show correctly PiP Video in React Native

1 Answers1