PIP support for android in case of nested screen

[nitesh3539]

I want to use PIP mode in child screen such that PIP mode comes on top of parent screen.

Like if we have parent screen A and child screen B, If we are in screen B and want to allow Screen B to go In PIP mode, Then , screen B comes as PIP mode on top of Screen A.

Please help me out.

Thanks

[matejpolak]

Hi @nitesh3539, the above described scenario is not an ideal case for PIP mode. PiP mode in general behaves differently on each platform, like this:

So far, PiP mode as is, is working only on Android and iOS (iPad ONLY!)

1. iOS (iPad) - Should be working same as you described above.
2. Android - When entering PIP mode (by setting pictureInPicture prop, or pressing Home/Recent button) Whole app goes to PIP, so the app itself if minified and you see the android home screen for example and the minified app in a PIP window above it.

But the case you are describing is fully achievable by styles of the player window (if player is screen B). I have it like this in several projects already.

See:

All those examples are combination of styles and PanResponers, and obviously it's working on all platforms.

[nitesh3539]

can you reference me with a set of code ?

Thanks

[nitesh3539]

Hi @matejpolak please update me on this. I need a neet explanation for this.

Thanks

[matejpolak]

Hi @nitesh3539, please think about the player as of any other UI element like a div or View for example. You can style it in any way you like, you can for example make it rounded and bouncing on the screen, same as any other element. So in my case, I have a MiniPlayerContainer component, which receiver all the player UI elements and Video component as a children prop and render it like this.

    return renderMiniPlayerContainer ? (
        <Animated.View
            style={{
                position: 'absolute',
                bottom: isMiniPlayer ? margin : 0,
                right: isMiniPlayer ? margin : 0,
                transform: [{ translateX: this.translateX }],
                width: this.playerWidth.interpolate({
                    inputRange: [0, 100],
                    outputRange: ['0%', '100%']
                }),
                height: this.playerHeight.interpolate({
                    inputRange: [0, 100],
                    outputRange: ['0%', '100%']
                })
            }}
            {...(isMiniPlayer ? this.panResponder.panHandlers : {})}
        >
            <View
                // We must keep both views,
                // because Animated.View doesn't have onLayout callback prop
                style={styles}
                onLayout={this.onContainerLayout}
            >
                {children}
            </View>
        </Animated.View>
    ) : (
        children
    );

In the code above, width and height are either 100 and 100 (fullscreen player), or any other value like 25 and 30 (landscape miniplayer). Hope this helps. Please consider this as a non tested raw snippet explaining my idea behind it.

[matejpolak]

And for the swipe gesture, you can use something like this: https://medium.com/@andi.gu.ca/exploring-react-natives-panresponder-and-layoutanimation-dde77e7f4cc9.

But again, please, this is only my idea, and there are of course similar/better/more... ways how to achieve above described behavior.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. If you are having a similar problem, please open a new issue and reference this one instead of commenting on a stale or closed issue.