feat(mobile/picture-in-picture): ios implementation

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/native/FallbackView.tsx

@@ -0,0 +1,10 @@
+import { View } from 'react-native';
+
+const FallbackView = () => {
+
+    return(
+        <View style={{ height: 800, width: 400, backgroundColor: 'red' }} />
+    )
+}
+
+export default FallbackView;

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

@@ -1,16 +1,27 @@
-import React, { Component } from 'react';
+import React, {Component, RefObject} from 'react';
 import { GestureResponderEvent } from 'react-native';
-import { MediaStream, RTCView } from 'react-native-webrtc';
+import { connect } from 'react-redux';
 
+import { MediaStream, RTCPIPView, startIOSPIP, stopIOSPIP } from 'react-native-webrtc';
+
+import { IReduxState}  from '../../../../app/types';
+import { translate } from '../../../i18n/functions';
 import Pressable from '../../../react/components/native/Pressable';
 
+import logger from '../../logger';
+
 import VideoTransform from './VideoTransform';
 import styles from './styles';
+import FallbackView from "./FallbackView";
+
 
 /**
  * The type of the React {@code Component} props of {@link Video}.
  */
 interface IProps {
+
+    _enableIosPIP?: boolean;
+
     mirror: boolean;
 
     onPlaying: Function;
@@ -58,7 +69,15 @@ interface IProps {
  * {@code HTMLVideoElement} and wraps around react-native-webrtc's
  * {@link RTCView}.
  */
-export default class Video extends Component<IProps> {
+class Video extends Component<IProps> {
+
+    _ref: RefObject<typeof Video>;
+
+    constructor(props) {
+        super(props);
+        this._ref = React.createRef();
+    }
+
     /**
      * React Component method that executes once component is mounted.
      *
@@ -79,7 +98,28 @@ export default class Video extends Component<IProps> {
      * @returns {ReactElement|null}
      */
     render() {
-        const { onPress, stream, zoomEnabled } = this.props;
+        const { _enableIosPIP, onPress, stream, zoomEnabled } = this.props;
+
+        const iosPIPOptions = {
+            startAutomatically: true,
+            fallbackView: (<FallbackView />),
+            preferredSize: {
+                width: 400,
+                height: 800,
+            }
+        }
+
+        if (_enableIosPIP) {
+            console.log('TESTING _enableIosPIP is', _enableIosPIP);
+            console.log(this._ref?.current, 'Picture in picture mode on');
+            // logger.warn(this._ref?.current, `Picture in picture mode on`);
+            // startIOSPIP(this._ref?.current);
+        } else {
+            console.log('TESTING _enableIosPIP is', _enableIosPIP);
+            console.log('TESTING Picture in picture mode off');
+            // logger.warn(`Picture in picture mode off`);
+            // stopIOSPIP(this._ref?.current);
+        }
 
         if (stream) {
             // RTCView
@@ -90,9 +130,11 @@ export default class Video extends Component<IProps> {
                     : 'cover';
             const rtcView
                 = (
-                    <RTCView
+                    <RTCPIPView
+                        iosPIP = { iosPIPOptions }
                         mirror = { this.props.mirror }
                         objectFit = { objectFit }
+                        ref = { this._ref }
                         streamURL = { stream.toURL() }
                         style = { style }
                         zOrder = { this.props.zOrder } />
@@ -132,3 +174,20 @@ export default class Video extends Component<IProps> {
         return null;
     }
 }
+
+/**
+ * Maps part of the Redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {Object}
+ */
+function _mapStateToProps(state: IReduxState) {
+    const iosPIP = state['features/mobile/picture-in-picture']?.enableIosPIP
+
+    return {
+        _enableIosPIP: iosPIP
+    };
+}
+
+// @ts-ignore
+export default translate(connect(_mapStateToProps)(Video));

react/features/base/participants/components/ParticipantView.native.tsx

@@ -21,6 +21,7 @@ import TestHint from '../../testing/components/TestHint';
 import { getVideoTrackByParticipant } from '../../tracks/functions';
 import { ITrack } from '../../tracks/types';
 import { getParticipantById, getParticipantDisplayName, isSharedVideoParticipant } from '../functions';
+import { FakeParticipant } from '../types';
 
 import styles from './styles';
 
@@ -71,7 +72,7 @@ interface IProps {
     /**
      * Whether video should be disabled for his view.
      */
-    disableVideo?: boolean;
+    disableVideo?: boolean | FakeParticipant;
 
     /**
      * Callback to invoke when the {@code ParticipantView} is clicked/pressed.

react/features/mobile/picture-in-picture/actionTypes.ts

@@ -1,3 +1,15 @@
+/**
+ * The type of redux action to enable picture-in-picture for ios.
+ *
+ * {
+ *      type: ENABLE_IOS_PIP,
+ *      enableIosPIP: boolean
+ * }
+ *
+ * @public
+ */
+export const ENABLE_IOS_PIP = 'ENABLE_IOS_PIP';
+
 /**
  * The type of redux action to enter (or rather initiate entering)
  * picture-in-picture.

react/features/mobile/picture-in-picture/actions.ts

@@ -3,7 +3,7 @@ import { NativeModules } from 'react-native';
 import { IStore } from '../../app/types';
 import Platform from '../../base/react/Platform.native';
 
-import { ENTER_PICTURE_IN_PICTURE } from './actionTypes';
+import { ENABLE_IOS_PIP, ENTER_PICTURE_IN_PICTURE } from './actionTypes';
 import { isPipEnabled } from './functions';
 import logger from './logger';
 
@@ -24,8 +24,13 @@ export function enterPictureInPicture() {
         // fine to enter PiP mode.
         if (isPipEnabled(getState())) {
             const { PictureInPicture } = NativeModules;
+            const { enableIosPIP } = getState()['features/mobile/picture-in-picture'];
             const p
-                = Platform.OS === 'android'
+                = Platform.OS === 'ios'
+                ? dispatch({
+                type: ENABLE_IOS_PIP,
+                enableIosPIP: !enableIosPIP })
+                : Platform.OS === 'android'
                     ? PictureInPicture
                         ? PictureInPicture.enterPictureInPicture()
                         : Promise.reject(

react/features/mobile/picture-in-picture/middleware.native.ts

@@ -0,0 +1,24 @@
+import MiddlewareRegistry from '../../base/redux/MiddlewareRegistry';
+import { APP_STATE_CHANGED } from '../background/actionTypes';
+import { ENABLE_IOS_PIP } from './actionTypes';
+
+MiddlewareRegistry.register(store => next => action => {
+    const result = next(action);
+
+    switch (action.type) {
+    case APP_STATE_CHANGED: {
+        const state = store.getState();
+        const { dispatch } = store;
+        const { appState } = state['features/background'];
+
+        if (appState === 'inactive') {
+            dispatch({
+                type: ENABLE_IOS_PIP,
+                enableIosPIP: false })
+        }
+        break;
+    }
+    }
+
+    return result;
+})

react/features/mobile/picture-in-picture/reducer.ts

@@ -0,0 +1,29 @@
+import ReducerRegistry from '../../base/redux/ReducerRegistry';
+import { ENABLE_IOS_PIP } from './actionTypes';
+
+const DEFAULT_STATE = {
+    enableIosPIP: false
+};
+
+export interface IMobilePictureInPictureState {
+    enableIosPIP: boolean;
+}
+
+const STORE_NAME = 'features/mobile/picture-in-picture';
+
+ReducerRegistry.register<IMobilePictureInPictureState>(STORE_NAME, (state = DEFAULT_STATE, action): IMobilePictureInPictureState => {
+    switch (action.type) {
+
+    case ENABLE_IOS_PIP: {
+        const { enableIosPIP } = action;
+
+        return {
+            ...state,
+            enableIosPIP
+        }
+    }
+
+    default:
+        return state;
+    }
+})