W.I.P. feat(ios): add PiP functionality

package.json

@@ -106,7 +106,7 @@
     "react-native-url-polyfill": "2.0.0",
     "react-native-video": "6.0.0-alpha.11",
     "react-native-watch-connectivity": "1.1.0",
-    "react-native-webrtc": "124.0.4",
+    "react-native-webrtc": "git+https://[email protected]/react-native-webrtc/react-native-webrtc.git#6953b21a33382478c9d56674e4d4bd35a30149f9",
     "react-native-webview": "13.8.7",
     "react-native-youtube-iframe": "2.3.0",
     "react-redux": "7.2.9",

react/features/app/reducers.native.ts

@@ -3,6 +3,7 @@ import '../mobile/background/reducer';
 import '../mobile/call-integration/reducer';
 import '../mobile/external-api/reducer';
 import '../mobile/full-screen/reducer';
+import '../mobile/picture-in-picture/reducer';
 import '../mobile/watchos/reducer';
 import '../share-room/reducer';
 

react/features/app/types.ts

@@ -52,6 +52,7 @@ import { IBackgroundState } from '../mobile/background/reducer';
 import { ICallIntegrationState } from '../mobile/call-integration/reducer';
 import { IMobileExternalApiState } from '../mobile/external-api/reducer';
 import { IFullScreenState } from '../mobile/full-screen/reducer';
+import { IMobilePictureInPictureState } from '../mobile/picture-in-picture/reducer';
 import { IMobileWatchOSState } from '../mobile/watchos/reducer';
 import { INoAudioSignalState } from '../no-audio-signal/reducer';
 import { INoiseDetectionState } from '../noise-detection/reducer';
@@ -142,6 +143,7 @@ export interface IReduxState {
     'features/lobby': ILobbyState;
     'features/mobile/audio-mode': IMobileAudioModeState;
     'features/mobile/external-api': IMobileExternalApiState;
+    'features/mobile/picture-in-picture': IMobilePictureInPictureState;
     'features/mobile/watchos': IMobileWatchOSState;
     'features/no-audio-signal': INoAudioSignalState;
     'features/noise-detection': INoiseDetectionState;

react/features/base/media/components/AbstractVideoTrack.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, ReactElement } from 'react';
 
 import { IStore } from '../../../app/types';
 import { trackVideoStarted } from '../../tracks/actions';
@@ -16,6 +16,11 @@ export interface IProps {
      */
     dispatch: IStore['dispatch'];
 
+    /**
+     * IOS component for PiP view.
+     */
+    fallbackView?: ReactElement;
+
     /**
      * Callback to invoke when the {@link Video} of {@code AbstractVideoTrack}
      * is clicked/pressed.
@@ -111,6 +116,7 @@ export default class AbstractVideoTrack<P extends IProps> extends Component<P> {
 
         return (
             <Video
+                fallbackView = { this.props.fallbackView }
                 mirror = { videoTrack?.mirror }
                 onPlaying = { this._onVideoPlaying }
 

react/features/base/media/components/native/Video.tsx

@@ -1,8 +1,11 @@
-import React, { Component } from 'react';
-import { GestureResponderEvent } from 'react-native';
-import { MediaStream, RTCView } from 'react-native-webrtc';
+import React, { useEffect, useRef } from 'react';
+import { GestureResponderEvent, ViewStyle } from 'react-native';
+import { MediaStream, RTCPIPView, startIOSPIP, stopIOSPIP } from 'react-native-webrtc';
+import { useSelector } from 'react-redux';
 
+import { IReduxState } from '../../../../app/types';
 import Pressable from '../../../react/components/native/Pressable';
+import logger from '../../logger';
 
 import VideoTransform from './VideoTransform';
 import styles from './styles';
@@ -11,6 +14,12 @@
  * The type of the React {@code Component} props of {@link Video}.
  */
 interface IProps {
+
+    /**
+     * IOS component for PiP view.
+     */
+    fallbackView: React.Component;
+
     mirror: boolean;
 
     onPlaying: Function;
@@ -53,82 +62,79 @@
     zoomEnabled: boolean;
 }
 
 /**
  * The React Native {@link Component} which is similar to Web's
  * {@code HTMLVideoElement} and wraps around react-native-webrtc's
- * {@link RTCView}.
+ * {@link RTCPIPView}.
  */
-export default class Video extends Component<IProps> {
-    /**
-     * React Component method that executes once component is mounted.
-     *
-     * @inheritdoc
-     */
-    componentDidMount() {
+const Video: React.FC<IProps> = ({ fallbackView, mirror, onPlaying, onPress, stream, zoomEnabled, zOrder }: IProps) => {
+    const { enableIosPIP } = useSelector((state: IReduxState) => state['features/mobile/picture-in-picture']);
+
+    const iosPIPOptions = {
+        fallbackView,
+        preferredSize: {
+            width: 400,
+            height: 800
+        },
+        startAutomatically: true
+    };
+    const objectFit = zoomEnabled ? 'contain' : 'cover';
+    const viewRef = useRef();
+
+    const rtcView = (
+        <RTCPIPView
+            iosPIP = { iosPIPOptions }
+            mirror = { mirror }
+            objectFit = { objectFit }
+            ref = { viewRef }
+            streamURL = { stream?.toURL() }
+            style = { styles.video as ViewStyle }
+            zOrder = { zOrder } />
+    );
+
+    useEffect(() => {
         // RTCView currently does not support media events, so just fire
         // onPlaying callback when <RTCView> is rendered.
-        const { onPlaying } = this.props;
-
         onPlaying?.();
-    }
+    }, []);
 
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement|null}
-     */
-    render() {
-        const { onPress, stream, zoomEnabled } = this.props;
-
-        if (stream) {
-            // RTCView
-            const style = styles.video;
-            const objectFit
-                = zoomEnabled
-                    ? 'contain'
-                    : 'cover';
-            const rtcView
-                = (
-                    <RTCView
-                        mirror = { this.props.mirror }
-                        objectFit = { objectFit }
-                        streamURL = { stream.toURL() }
-                        style = { style }
-                        zOrder = { this.props.zOrder } />
-                );
-
-            // VideoTransform implements "pinch to zoom". As part of "pinch to
-            // zoom", it implements onPress, of course.
-            if (zoomEnabled) {
-                return (
-                    <VideoTransform
-                        enabled = { zoomEnabled }
-                        onPress = { onPress }
-                        streamId = { stream.id }
-                        style = { style }>
-                        { rtcView }
-                    </VideoTransform>
-                );
-            }
-
-            // XXX Unfortunately, VideoTransform implements a custom press
-            // detection which has been observed to be very picky about the
-            // precision of the press unlike the builtin/default/standard press
-            // detection which is forgiving to imperceptible movements while
-            // pressing. It's not acceptable to be so picky, especially when
-            // "pinch to zoom" is not enabled.
-            return (
-                <Pressable onPress = { onPress }>
-                    { rtcView }
-                </Pressable>
-            );
+    useEffect(() => {
+        if (enableIosPIP) {
+            logger.warn('Picture in picture mode on');
+            startIOSPIP(viewRef);
+        } else {
+            logger.warn('Picture in picture mode off');
+            stopIOSPIP(viewRef);
         }
+    }, [ enableIosPIP ]);
 
-        // RTCView has peculiarities which may or may not be platform specific.
-        // For example, it doesn't accept an empty streamURL. If the execution
-        // reached here, it means that we explicitly chose to not initialize an
-        // RTCView as a way of dealing with its idiosyncrasies.
-        return null;
+    // VideoTransform implements "pinch to zoom". As part of "pinch to
+    // zoom", it implements onPress, of course.
+    if (zoomEnabled) {
+        return (
+            <VideoTransform
+                enabled = { zoomEnabled }
+                onPress = { onPress }
+                streamId = { stream?.id }
+                style = { styles.video as ViewStyle }>
+                { rtcView }
+            </VideoTransform>
+        );
     }
-}
+
+    // XXX Unfortunately, VideoTransform implements a custom press
+    // detection which has been observed to be very picky about the
+    // precision of the press unlike the builtin/default/standard press
+    // detection which is forgiving to imperceptible movements while
+    // pressing. It's not acceptable to be so picky, especially when
+    // "pinch to zoom" is not enabled.
+    return (
+        <Pressable onPress = { onPress }>
+            { rtcView }
+        </Pressable>
+    );
+
+};
+
+// @ts-ignore
+export default Video;

react/features/base/media/components/native/VideoTrack.tsx

@@ -1,28 +1,30 @@
 import React from 'react';
-import { View } from 'react-native';
 import { connect } from 'react-redux';
 
 import AbstractVideoTrack, { IProps } from '../AbstractVideoTrack';
 
-import styles from './styles';
-
 /**
  * Component that renders video element for a specified video track.
  *
  * @augments AbstractVideoTrack
  */
 class VideoTrack extends AbstractVideoTrack<IProps> {
+
     /**
      * Renders the video element for the associated video track.
      *
      * @override
      * @returns {ReactElement}
      */
     render() {
+        const { fallbackView, videoTrack } = this.props;
+
         return (
-            <View style = { styles.video } >
-                { super.render() }
-            </View>
+            <>
+                {
+                    videoTrack?.muted ? fallbackView : super.render()
+                }
+            </>
         );
     }
 }