Picture in Picture on Android - We need your help!

[KrzysztofMoch]

Hello everyone! 👋

We are announcing that we are starting process to merge PR made by @YangJonghun that introduce Picture in Picture on Android! We delayed the merge of this PR because it was big and risky to merge - but now we are gathering testers who will help us test and make sure everything works properly.

There is special test release 6.7.0-rc.0 that contain changes from this PR
If you are interested in bringing this feature to live help us by simply testing it. Install test release in your app or new app and test Picture in Picture.

We need to test prop enterPictureInPictureOnLeave, callback onPictureInPictureStatusChanged and component ref functions enterPictureInPicture and exitPictureInPicture, Both on Android and iOS. But testing other things can also help!

For android configuration see this comment - #4228 (comment)

Sample component for testing

import * as React from 'react';
import {Text, View, StyleSheet, Button} from 'react-native';
import Video, {VideoRef} from 'react-native-video';

const VideoPlayer = () => {
  const videoRef = React.useRef<VideoRef>(null);

  const enterPictureInPicture = () => {
    if (!videoRef.current) {
      return;
    }

    console.log('Entering Picture in Picture');
    videoRef.current.enterPictureInPicture();
  };

  const exitPictureInPicture = () => {
    if (!videoRef.current) {
      return;
    }

    console.log('Exiting Picture in Picture');
    videoRef.current.exitPictureInPicture();
  };

  return (
    <View style={styles.container}>
      <Video
        ref={videoRef}
        source={{
          uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
        }}
        style={{width: 300, height: 300}}
        controls={false}
        enterPictureInPictureOnLeave
        onPictureInPictureStatusChanged={({isActive}) => {
          console.log('Picture in Picture status changed:', isActive);
        }}
        playInBackground
        playWhenInactive
      />
      <Button
        title="Enter Picture in Picture"
        onPress={enterPictureInPicture}
      />
      <Button title="Exit Picture in Picture" onPress={exitPictureInPicture} />
    </View>
  );
};

export default VideoPlayer;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

If you had Error or you were successful to use it leave here a comment with your feedback.

After we collect enough feedback and make any potential corrections we will publish a stable version with this feature. But first we need to collect feedback from testers - and here we are counting on you!

Thank You All!

[YangJonghun]

Thanks. @KrzysztofMoch
As written in PR's doc, the code below must be added to work enterPictureInPicture/enterPictureInPictureOnLeave on Android, otherwise it will be silently ignored.

Bare React Native

• android/src/main/AndroidManifest.xml

<activity
  android:name=".MainActivity"
  ...
  android:supportsPictureInPicture="true">

Expo

• app.json (app.config.json or app.config.js)

  "plugins": [
    [
      "react-native-video",
      {
        "enableAndroidPictureInPicture": true,
      }
    ]
  ]

[KrzysztofMoch]

Thanks for note!

[fredrikburmester]

I'd be happy to implement it in a Streamyfin beta version and let our Android users test it. Can't wait for the release of this feature!

[freeboub]

For me the code looks good, The PR is good to me, 2 comments on my side:
@YangJonghun one small comment on: android:supportsPictureInPicture="true", Can you please add a configuration flag for expo integration ?
@KrzysztofMoch There is an interoperability issue also. As the api changed for ios. Existing users will have to there applications. I should be a new major version 7.X.X...
I don't think this is a major problem.

[YangJonghun]

@freeboub

@YangJonghun one small comment on: android:supportsPictureInPicture="true", Can you please add a configuration flag for expo integration ?

I've added that config to expo plugin in commit below.
a4381e4

@KrzysztofMoch Can you please create a new version with above commit?

[KrzysztofMoch]

Sorry for late response! For some reason I don't have notifications from discussions 🙏I will release it on the end of week

[projectninjatech]

I tried this feature in my app and its working perfectly. Keep up the good work. Just make sure guys put android:supportsPictureInPicture="true" under activity not under application in AndroidManifest.xml and this works like charm.

[yungblud]

I think it's working fine.
Tested with Pixel 7 (API 35) emulator with adding bottom code fragment.

<activity
  android:name=".MainActivity"
  ...
  android:supportsPictureInPicture="true">

[Aliatore]

Hello @KrzysztofMoch, sorry for my English, I'm trying to replicate that functionality in IOS, but the enterPictureInPictureOnLeave property doesn't work when the app enters in background mode (Only for iOS, in android works good), im using the same example from this post, also im using emulators to test my app.

[proohit]

We've been using enterPictureInPictureOnLeave for a while now too on 6.8.0-rc.0 and it seems to be working fine. Getting the already documented error occasionally, but other than that, thanks for this feature!

Using Expo@51 with

[
        "react-native-video",
        {
          "enableBackgroundAudio": true,
          "enableNotificationControls": true,
          "enableAndroidPictureInPicture": true
        }
      ]