From 3561849fabd84dca9f08989ed07d873f87687af5 Mon Sep 17 00:00:00 2001
From: Calin-Teodor <calin.chitu@8x8.com>
Date: Mon, 30 Sep 2024 13:10:42 +0300
Subject: [PATCH 1/8] feat(mobile/picture-in-picture): ios implementation

---
 react/features/app/types.ts                   |  2 +
 .../media/components/native/FallbackView.tsx  | 10 +++
 .../base/media/components/native/Video.tsx    | 69 +++++++++++++++++--
 .../components/ParticipantView.native.tsx     |  3 +-
 .../mobile/picture-in-picture/actionTypes.ts  | 12 ++++
 .../mobile/picture-in-picture/actions.ts      |  9 ++-
 .../picture-in-picture/middleware.native.ts   | 24 +++++++
 .../mobile/picture-in-picture/reducer.ts      | 29 ++++++++
 8 files changed, 150 insertions(+), 8 deletions(-)
 create mode 100644 react/features/base/media/components/native/FallbackView.tsx
 create mode 100644 react/features/mobile/picture-in-picture/middleware.native.ts
 create mode 100644 react/features/mobile/picture-in-picture/reducer.ts

diff --git a/react/features/app/types.ts b/react/features/app/types.ts
index 272d5bd2ca9c..898b27338f8f 100644
--- a/react/features/app/types.ts
+++ b/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;
diff --git a/react/features/base/media/components/native/FallbackView.tsx b/react/features/base/media/components/native/FallbackView.tsx
new file mode 100644
index 000000000000..626d3032d908
--- /dev/null
+++ b/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;
diff --git a/react/features/base/media/components/native/Video.tsx b/react/features/base/media/components/native/Video.tsx
index e6003c9588bc..f2965ce89ee8 100644
--- a/react/features/base/media/components/native/Video.tsx
+++ b/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));
diff --git a/react/features/base/participants/components/ParticipantView.native.tsx b/react/features/base/participants/components/ParticipantView.native.tsx
index 390bbd5e930a..4b5a6b7415c6 100644
--- a/react/features/base/participants/components/ParticipantView.native.tsx
+++ b/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.
diff --git a/react/features/mobile/picture-in-picture/actionTypes.ts b/react/features/mobile/picture-in-picture/actionTypes.ts
index 318b31264d57..5ffa11ef4f11 100644
--- a/react/features/mobile/picture-in-picture/actionTypes.ts
+++ b/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.
diff --git a/react/features/mobile/picture-in-picture/actions.ts b/react/features/mobile/picture-in-picture/actions.ts
index 4b27aff53109..dc98c15f28ae 100644
--- a/react/features/mobile/picture-in-picture/actions.ts
+++ b/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(
diff --git a/react/features/mobile/picture-in-picture/middleware.native.ts b/react/features/mobile/picture-in-picture/middleware.native.ts
new file mode 100644
index 000000000000..a27a9be905df
--- /dev/null
+++ b/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;
+})
diff --git a/react/features/mobile/picture-in-picture/reducer.ts b/react/features/mobile/picture-in-picture/reducer.ts
new file mode 100644
index 000000000000..9466165cd956
--- /dev/null
+++ b/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;
+    }
+})

From 2543e9e076f60527adf60acc000a441c0e47c0f7 Mon Sep 17 00:00:00 2001
From: Calin-Teodor <calin.chitu@8x8.com>
Date: Mon, 30 Sep 2024 13:12:02 +0300
Subject: [PATCH 2/8] dep(rnwebrtc): use ios pip rnwebrtc commit

---
 package-lock.json | 13 +++++++------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 270119234c40..4d20248d3efb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -100,7 +100,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://git@github.com/react-native-webrtc/react-native-webrtc.git#4288a1630d6dcfa141ff7c1c8c30c64c67c0dd0e",
         "react-native-webview": "13.8.7",
         "react-native-youtube-iframe": "2.3.0",
         "react-redux": "7.2.9",
@@ -16063,8 +16063,9 @@
     },
     "node_modules/react-native-webrtc": {
       "version": "124.0.4",
-      "resolved": "https://registry.npmjs.org/react-native-webrtc/-/react-native-webrtc-124.0.4.tgz",
-      "integrity": "sha512-ZbhSz1f+kc1v5VE0B84+v6ujIWTHa2fIuocrYzGUIFab7E5izmct7PNHb9dzzs0xhBGqh4c2rUa49jbL+P/e2w==",
+      "resolved": "git+https://git@github.com/react-native-webrtc/react-native-webrtc.git#4288a1630d6dcfa141ff7c1c8c30c64c67c0dd0e",
+      "integrity": "sha512-Z5G4+wSqLYNtdORjoDXkbFQKRW9AI7dvys9E8L642bAA+k1g9kZSL3FC9eWmsQKq/0gEgeYaFiJwUiENzqlnfw==",
+      "license": "MIT",
       "dependencies": {
         "base64-js": "1.5.1",
         "debug": "4.3.4",
@@ -30642,9 +30643,9 @@
       }
     },
     "react-native-webrtc": {
-      "version": "124.0.4",
-      "resolved": "https://registry.npmjs.org/react-native-webrtc/-/react-native-webrtc-124.0.4.tgz",
-      "integrity": "sha512-ZbhSz1f+kc1v5VE0B84+v6ujIWTHa2fIuocrYzGUIFab7E5izmct7PNHb9dzzs0xhBGqh4c2rUa49jbL+P/e2w==",
+      "version": "git+https://git@github.com/react-native-webrtc/react-native-webrtc.git#4288a1630d6dcfa141ff7c1c8c30c64c67c0dd0e",
+      "integrity": "sha512-Z5G4+wSqLYNtdORjoDXkbFQKRW9AI7dvys9E8L642bAA+k1g9kZSL3FC9eWmsQKq/0gEgeYaFiJwUiENzqlnfw==",
+      "from": "react-native-webrtc@git+https://git@github.com/react-native-webrtc/react-native-webrtc.git#4288a1630d6dcfa141ff7c1c8c30c64c67c0dd0e",
       "requires": {
         "base64-js": "1.5.1",
         "debug": "4.3.4",
diff --git a/package.json b/package.json
index 4eb40d99a4b1..42a75dfc5ac8 100644
--- a/package.json
+++ b/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://git@github.com/react-native-webrtc/react-native-webrtc.git#4288a1630d6dcfa141ff7c1c8c30c64c67c0dd0e",
     "react-native-webview": "13.8.7",
     "react-native-youtube-iframe": "2.3.0",
     "react-redux": "7.2.9",

From 15db4a29ec6235b9d2ab4e3d17f5bb2e78b98416 Mon Sep 17 00:00:00 2001
From: Calin-Teodor <calin.chitu@8x8.com>
Date: Fri, 4 Oct 2024 14:40:45 +0300
Subject: [PATCH 3/8] feat(base/media): refactoring/lint fixes

---
 .../media/components/native/FallbackView.tsx  |  9 +-
 .../base/media/components/native/Video.tsx    | 82 +++++++++----------
 2 files changed, 42 insertions(+), 49 deletions(-)

diff --git a/react/features/base/media/components/native/FallbackView.tsx b/react/features/base/media/components/native/FallbackView.tsx
index 626d3032d908..e64970a8e412 100644
--- a/react/features/base/media/components/native/FallbackView.tsx
+++ b/react/features/base/media/components/native/FallbackView.tsx
@@ -1,10 +1,7 @@
 import { View } from 'react-native';
 
-const FallbackView = () => {
-
-    return(
-        <View style={{ height: 800, width: 400, backgroundColor: 'red' }} />
-    )
-}
+const FallbackView = () => (
+    <View style={{ height: 800, width: 400, backgroundColor: 'red' }} />
+)
 
 export default FallbackView;
diff --git a/react/features/base/media/components/native/Video.tsx b/react/features/base/media/components/native/Video.tsx
index f2965ce89ee8..6da58c9bcea7 100644
--- a/react/features/base/media/components/native/Video.tsx
+++ b/react/features/base/media/components/native/Video.tsx
@@ -8,7 +8,7 @@ import { IReduxState}  from '../../../../app/types';
 import { translate } from '../../../i18n/functions';
 import Pressable from '../../../react/components/native/Pressable';
 
-import logger from '../../logger';
+// import logger from '../../logger';
 
 import VideoTransform from './VideoTransform';
 import styles from './styles';
@@ -101,7 +101,6 @@ class Video extends Component<IProps> {
         const { _enableIosPIP, onPress, stream, zoomEnabled } = this.props;
 
         const iosPIPOptions = {
-            startAutomatically: true,
             fallbackView: (<FallbackView />),
             preferredSize: {
                 width: 400,
@@ -121,52 +120,49 @@ class Video extends Component<IProps> {
             // stopIOSPIP(this._ref?.current);
         }
 
-        if (stream) {
-            // RTCView
-            const style = styles.video;
-            const objectFit
-                = zoomEnabled
-                    ? 'contain'
-                    : 'cover';
-            const rtcView
-                = (
-                    <RTCPIPView
-                        iosPIP = { iosPIPOptions }
-                        mirror = { this.props.mirror }
-                        objectFit = { objectFit }
-                        ref = { this._ref }
-                        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.
+        // RTCView
+        const style = styles.video;
+        const objectFit
+            = zoomEnabled
+            ? 'contain'
+            : 'cover';
+        const rtcView
+            = (
+            <RTCPIPView
+                iosPIP = { iosPIPOptions }
+                mirror = { this.props.mirror }
+                objectFit = { objectFit }
+                streamURL = { stream && 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 (
-                <Pressable onPress = { onPress }>
+                <VideoTransform
+                    enabled = { zoomEnabled }
+                    onPress = { onPress }
+                    streamId = { stream && stream.id }
+                    style = { style }>
                     { rtcView }
-                </Pressable>
+                </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>
+        );
+
         // 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

From 8fa68b1462354f1924bdb0537b069b0c30ad2a9e Mon Sep 17 00:00:00 2001
From: Calin-Teodor <calin.chitu@8x8.com>
Date: Thu, 24 Oct 2024 12:21:57 +0300
Subject: [PATCH 4/8] feat(mobile/picture-in-picture): updates

---
 package-lock.json                             |  12 +-
 package.json                                  |   2 +-
 react/features/app/reducers.native.ts         |   1 +
 .../media/components/AbstractVideoTrack.tsx   |   8 +-
 .../media/components/native/FallbackView.tsx  |   7 -
 .../base/media/components/native/Video.tsx    | 173 +++++++-----------
 .../media/components/native/VideoTrack.tsx    |  14 +-
 .../components/ParticipantView.native.tsx     | 124 +++++--------
 react/features/base/participants/functions.ts |  71 +++++--
 .../mobile/picture-in-picture/actions.ts      |  27 +--
 .../components/PictureInPictureButton.ts      |   2 +-
 .../prejoin/components/native/Prejoin.tsx     |   2 +-
 12 files changed, 209 insertions(+), 234 deletions(-)
 delete mode 100644 react/features/base/media/components/native/FallbackView.tsx

diff --git a/package-lock.json b/package-lock.json
index 4d20248d3efb..5d7be208477a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -100,7 +100,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": "git+https://git@github.com/react-native-webrtc/react-native-webrtc.git#4288a1630d6dcfa141ff7c1c8c30c64c67c0dd0e",
+        "react-native-webrtc": "git+https://git@github.com/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",
@@ -16063,8 +16063,8 @@
     },
     "node_modules/react-native-webrtc": {
       "version": "124.0.4",
-      "resolved": "git+https://git@github.com/react-native-webrtc/react-native-webrtc.git#4288a1630d6dcfa141ff7c1c8c30c64c67c0dd0e",
-      "integrity": "sha512-Z5G4+wSqLYNtdORjoDXkbFQKRW9AI7dvys9E8L642bAA+k1g9kZSL3FC9eWmsQKq/0gEgeYaFiJwUiENzqlnfw==",
+      "resolved": "git+https://git@github.com/react-native-webrtc/react-native-webrtc.git#6953b21a33382478c9d56674e4d4bd35a30149f9",
+      "integrity": "sha512-JMunPsk83dw+Vn1YaK8VuzBkJtE6WznjdIn4tj84DWqzj0h8L+JGBaYTR6QRQArNvL9Dh+0dwadmXPjuh3DtUw==",
       "license": "MIT",
       "dependencies": {
         "base64-js": "1.5.1",
@@ -30643,9 +30643,9 @@
       }
     },
     "react-native-webrtc": {
-      "version": "git+https://git@github.com/react-native-webrtc/react-native-webrtc.git#4288a1630d6dcfa141ff7c1c8c30c64c67c0dd0e",
-      "integrity": "sha512-Z5G4+wSqLYNtdORjoDXkbFQKRW9AI7dvys9E8L642bAA+k1g9kZSL3FC9eWmsQKq/0gEgeYaFiJwUiENzqlnfw==",
-      "from": "react-native-webrtc@git+https://git@github.com/react-native-webrtc/react-native-webrtc.git#4288a1630d6dcfa141ff7c1c8c30c64c67c0dd0e",
+      "version": "git+https://git@github.com/react-native-webrtc/react-native-webrtc.git#6953b21a33382478c9d56674e4d4bd35a30149f9",
+      "integrity": "sha512-JMunPsk83dw+Vn1YaK8VuzBkJtE6WznjdIn4tj84DWqzj0h8L+JGBaYTR6QRQArNvL9Dh+0dwadmXPjuh3DtUw==",
+      "from": "react-native-webrtc@git+https://git@github.com/react-native-webrtc/react-native-webrtc.git#6953b21a33382478c9d56674e4d4bd35a30149f9",
       "requires": {
         "base64-js": "1.5.1",
         "debug": "4.3.4",
diff --git a/package.json b/package.json
index 42a75dfc5ac8..56b11448d8b3 100644
--- a/package.json
+++ b/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": "git+https://git@github.com/react-native-webrtc/react-native-webrtc.git#4288a1630d6dcfa141ff7c1c8c30c64c67c0dd0e",
+    "react-native-webrtc": "git+https://git@github.com/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",
diff --git a/react/features/app/reducers.native.ts b/react/features/app/reducers.native.ts
index 0ffc5800b794..a0a632cc4009 100644
--- a/react/features/app/reducers.native.ts
+++ b/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';
 
diff --git a/react/features/base/media/components/AbstractVideoTrack.tsx b/react/features/base/media/components/AbstractVideoTrack.tsx
index 03c405153901..9bc4a8b834a8 100644
--- a/react/features/base/media/components/AbstractVideoTrack.tsx
+++ b/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 }
 
diff --git a/react/features/base/media/components/native/FallbackView.tsx b/react/features/base/media/components/native/FallbackView.tsx
deleted file mode 100644
index e64970a8e412..000000000000
--- a/react/features/base/media/components/native/FallbackView.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { View } from 'react-native';
-
-const FallbackView = () => (
-    <View style={{ height: 800, width: 400, backgroundColor: 'red' }} />
-)
-
-export default FallbackView;
diff --git a/react/features/base/media/components/native/Video.tsx b/react/features/base/media/components/native/Video.tsx
index 6da58c9bcea7..bda43cac5136 100644
--- a/react/features/base/media/components/native/Video.tsx
+++ b/react/features/base/media/components/native/Video.tsx
@@ -1,18 +1,15 @@
-import React, {Component, RefObject} from 'react';
-import { GestureResponderEvent } from 'react-native';
-import { connect } from 'react-redux';
+import React, { Component, useEffect, useRef } from 'react';
+import { GestureResponderEvent, ViewStyle } from 'react-native';
+import { useSelector } 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";
+import logger from '../../logger';
 
 
 /**
@@ -20,7 +17,10 @@ import FallbackView from "./FallbackView";
  */
 interface IProps {
 
-    _enableIosPIP?: boolean;
+    /**
+     * iOS component for PiP view.
+     */
+    fallbackView: React.Component;
 
     mirror: boolean;
 
@@ -67,123 +67,76 @@ interface IProps {
 /**
  * The React Native {@link Component} which is similar to Web's
  * {@code HTMLVideoElement} and wraps around react-native-webrtc's
- * {@link RTCView}.
+ * {@link RTCPIPView}.
  */
-class Video extends Component<IProps> {
-
-    _ref: RefObject<typeof Video>;
-
-    constructor(props) {
-        super(props);
-        this._ref = React.createRef();
+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
     }
-
-    /**
-     * React Component method that executes once component is mounted.
-     *
-     * @inheritdoc
-     */
-    componentDidMount() {
+    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 { _enableIosPIP, onPress, stream, zoomEnabled } = this.props;
-
-        const iosPIPOptions = {
-            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);
+    useEffect(() =>  {
+        if (enableIosPIP) {
+            logger.warn(`Picture in picture mode on`);
+            startIOSPIP(viewRef);
         } 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);
-        }
-
-        // RTCView
-        const style = styles.video;
-        const objectFit
-            = zoomEnabled
-            ? 'contain'
-            : 'cover';
-        const rtcView
-            = (
-            <RTCPIPView
-                iosPIP = { iosPIPOptions }
-                mirror = { this.props.mirror }
-                objectFit = { objectFit }
-                streamURL = { stream && 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 && stream.id }
-                    style = { style }>
-                    { rtcView }
-                </VideoTransform>
-            );
+            logger.warn(`Picture in picture mode off`);
+            stopIOSPIP(viewRef);
         }
+    }, [ enableIosPIP ]);
 
-        // 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.
+    // VideoTransform implements "pinch to zoom". As part of "pinch to
+    // zoom", it implements onPress, of course.
+    if (zoomEnabled) {
         return (
-            <Pressable onPress = { onPress }>
+            <VideoTransform
+                enabled = { zoomEnabled }
+                onPress = { onPress }
+                streamId = { stream?.id }
+                style = { styles.video as ViewStyle }>
                 { rtcView }
-            </Pressable>
+            </VideoTransform>
         );
-
-        // 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;
     }
-}
 
-/**
- * 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
+    // 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>
+    );
 
-    return {
-        _enableIosPIP: iosPIP
-    };
 }
 
 // @ts-ignore
-export default translate(connect(_mapStateToProps)(Video));
+export default Video;
diff --git a/react/features/base/media/components/native/VideoTrack.tsx b/react/features/base/media/components/native/VideoTrack.tsx
index 018d8efbd574..aa0032573f05 100644
--- a/react/features/base/media/components/native/VideoTrack.tsx
+++ b/react/features/base/media/components/native/VideoTrack.tsx
@@ -1,17 +1,15 @@
 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.
      *
@@ -19,10 +17,14 @@ class VideoTrack extends AbstractVideoTrack<IProps> {
      * @returns {ReactElement}
      */
     render() {
+        const { fallbackView, videoTrack } = this.props;
+
         return (
-            <View style = { styles.video } >
-                { super.render() }
-            </View>
+            <>
+                {
+                    videoTrack?.muted ? fallbackView : super.render()
+                }
+            </>
         );
     }
 }
diff --git a/react/features/base/participants/components/ParticipantView.native.tsx b/react/features/base/participants/components/ParticipantView.native.tsx
index 4b5a6b7415c6..30e530a5c0e6 100644
--- a/react/features/base/participants/components/ParticipantView.native.tsx
+++ b/react/features/base/participants/components/ParticipantView.native.tsx
@@ -3,24 +3,23 @@ import { GestureResponderEvent, Text, TextStyle, View, ViewStyle } from 'react-n
 import { connect } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
-import {
-    isTrackStreamingStatusActive,
-    isTrackStreamingStatusInactive
-} from '../../../connection-indicator/functions';
+import { isTrackStreamingStatusInactive } from '../../../connection-indicator/functions';
 import SharedVideo from '../../../shared-video/components/native/SharedVideo';
 import { isSharedVideoEnabled } from '../../../shared-video/functions';
-import { IStateful } from '../../app/types';
 import Avatar from '../../avatar/components/Avatar';
 import { translate } from '../../i18n/functions';
 import VideoTrack from '../../media/components/native/VideoTrack';
-import { shouldRenderVideoTrack } from '../../media/functions';
 import Container from '../../react/components/native/Container';
-import { toState } from '../../redux/functions';
 import { StyleType } from '../../styles/functions.any';
 import TestHint from '../../testing/components/TestHint';
-import { getVideoTrackByParticipant } from '../../tracks/functions';
+import { getVideoTrackByParticipant } from '../../tracks/functions.native';
 import { ITrack } from '../../tracks/types';
-import { getParticipantById, getParticipantDisplayName, isSharedVideoParticipant } from '../functions';
+import {
+    getParticipantById,
+    getParticipantDisplayName,
+    isSharedVideoParticipant,
+    shouldRenderParticipantVideo
+} from '../functions';
 import { FakeParticipant } from '../types';
 
 import styles from './styles';
@@ -163,6 +162,21 @@ class ParticipantView extends Component<IProps> {
         );
     }
 
+    _renderParticipantAvatar() {
+        const {
+            avatarSize,
+            participantId,
+        } = this.props;
+
+        return(
+            <View style = { styles.avatarContainer as ViewStyle }>
+                <Avatar
+                    participantId = { participantId }
+                    size = { avatarSize } />
+            </View>
+        )
+    }
+
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -176,14 +190,21 @@ class ParticipantView extends Component<IProps> {
             _renderVideo: renderVideo,
             _sharedVideoEnabled,
             _videoTrack: videoTrack,
+            avatarSize,
             disableVideo,
-            onPress
+            onPress,
+            participantId,
+            style,
+            testHintId: testHintIdProp,
+            useConnectivityInfoLabel,
+            zOrder,
+            zoomEnabled
         } = this.props;
 
         const testHintId
-            = this.props.testHintId
-                ? this.props.testHintId
-                : `org.jitsi.meet.Participant#${this.props.participantId}`;
+            = testHintIdProp
+                ? testHintIdProp
+                : `org.jitsi.meet.Participant#${participantId}`;
 
         const renderSharedVideo = _isSharedVideoParticipant && !disableVideo && _sharedVideoEnabled;
 
@@ -192,7 +213,7 @@ class ParticipantView extends Component<IProps> {
                 onClick = { renderVideo || renderSharedVideo ? undefined : onPress }
                 style = {{
                     ...styles.participantView,
-                    ...this.props.style
+                    ...style
                 }}
                 touchFeedback = { false }>
 
@@ -203,22 +224,17 @@ class ParticipantView extends Component<IProps> {
 
                 { renderSharedVideo && <SharedVideo /> }
 
-                { renderVideo
-                    && <VideoTrack
-                        onPress = { onPress }
-                        videoTrack = { videoTrack }
-                        waitForVideoStarted = { false }
-                        zOrder = { this.props.zOrder }
-                        zoomEnabled = { this.props.zoomEnabled } /> }
-
-                { !renderSharedVideo && !renderVideo
-                    && <View style = { styles.avatarContainer as ViewStyle }>
-                        <Avatar
-                            participantId = { this.props.participantId }
-                            size = { this.props.avatarSize } />
-                    </View> }
-
-                { _isConnectionInactive && this.props.useConnectivityInfoLabel
+                <VideoTrack
+                    avatarSize = { avatarSize }
+                    fallbackView = { this._renderParticipantAvatar() }
+                    onPress = { onPress }
+                    participantId = { participantId }
+                    videoTrack = { videoTrack }
+                    waitForVideoStarted = { false }
+                    zOrder = { zOrder }
+                    zoomEnabled = { zoomEnabled } />
+
+                { _isConnectionInactive && useConnectivityInfoLabel
                     && this._renderInactiveConnectionInfo() }
             </Container>
         );
@@ -250,52 +266,4 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
     };
 }
 
-/**
- * Returns true if the video of the participant should be rendered.
- *
- * @param {Object|Function} stateful - Object or function that can be resolved
- * to the Redux state.
- * @param {string} id - The ID of the participant.
- * @returns {boolean}
- */
-function shouldRenderParticipantVideo(stateful: IStateful, id: string) {
-    const state = toState(stateful);
-    const participant = getParticipantById(state, id);
-
-    if (!participant) {
-        return false;
-    }
-
-    /* First check if we have an unmuted video track. */
-    const videoTrack = getVideoTrackByParticipant(state, participant);
-
-    if (!videoTrack) {
-        return false;
-    }
-
-    if (!shouldRenderVideoTrack(videoTrack, /* waitForVideoStarted */ false)) {
-        return false;
-    }
-
-    /* Then check if the participant connection or track streaming status is active. */
-    if (!videoTrack.local && !isTrackStreamingStatusActive(videoTrack)) {
-        return false;
-    }
-
-    /* Then check if audio-only mode is not active. */
-    const audioOnly = state['features/base/audio-only'].enabled;
-
-    if (!audioOnly) {
-        return true;
-    }
-
-    /* Last, check if the participant is sharing their screen and they are on stage. */
-    const remoteScreenShares = state['features/video-layout'].remoteScreenShares || [];
-    const largeVideoParticipantId = state['features/large-video'].participantId;
-    const participantIsInLargeVideoWithScreen
-        = participant.id === largeVideoParticipantId && remoteScreenShares.includes(participant.id);
-
-    return participantIsInLargeVideoWithScreen;
-}
-
 export default translate(connect(_mapStateToProps)(ParticipantView));
diff --git a/react/features/base/participants/functions.ts b/react/features/base/participants/functions.ts
index ddebf4a31226..4512a28a9921 100644
--- a/react/features/base/participants/functions.ts
+++ b/react/features/base/participants/functions.ts
@@ -1,20 +1,20 @@
 // @ts-expect-error
-import { getGravatarURL } from '@jitsi/js-utils/avatar';
-
-import { IReduxState, IStore } from '../../app/types';
-import { isStageFilmstripAvailable } from '../../filmstrip/functions';
-import { isAddPeopleEnabled, isDialOutEnabled } from '../../invite/functions';
-import { toggleShareDialog } from '../../share-room/actions';
-import { IStateful } from '../app/types';
-import { GRAVATAR_BASE_URL } from '../avatar/constants';
-import { isCORSAvatarURL } from '../avatar/functions';
+import {  getGravatarURL } from '@jitsi/js-utils/avatar';
+
+import {  IReduxState, IStore } from '../../app/types';
+import {  isStageFilmstripAvailable } from '../../filmstrip/functions';
+import {  isAddPeopleEnabled, isDialOutEnabled } from '../../invite/functions';
+import {  toggleShareDialog } from '../../share-room/actions';
+import {  IStateful } from '../app/types';
+import {  GRAVATAR_BASE_URL } from '../avatar/constants';
+import {  isCORSAvatarURL } from '../avatar/functions';
 import { getCurrentConference } from '../conference/functions';
 import { ADD_PEOPLE_ENABLED } from '../flags/constants';
 import { getFeatureFlag } from '../flags/functions';
 import i18next from '../i18n/i18next';
 import { MEDIA_TYPE, MediaType, VIDEO_TYPE } from '../media/constants';
 import { toState } from '../redux/functions';
-import { getScreenShareTrack, isLocalTrackMuted } from '../tracks/functions.any';
+import { getScreenShareTrack, getVideoTrackByParticipant, isLocalTrackMuted } from '../tracks/functions.any';
 import { createDeferred } from '../util/helpers';
 
 import {
@@ -23,8 +23,10 @@ import {
     PARTICIPANT_ROLE,
     WHITEBOARD_PARTICIPANT_ICON
 } from './constants';
-import { preloadImage } from './preloadImage';
-import { FakeParticipant, IJitsiParticipant, IParticipant, ISourceInfo } from './types';
+import {  preloadImage } from './preloadImage';
+import {  FakeParticipant, IJitsiParticipant, IParticipant, ISourceInfo } from './types';
+import {  shouldRenderVideoTrack } from '../media/functions';
+import {  isTrackStreamingStatusActive } from '../../connection-indicator/functions';
 
 
 /**
@@ -807,3 +809,48 @@ export const setShareDialogVisiblity = (addPeopleFeatureEnabled: boolean, dispat
         dispatch(toggleShareDialog(true));
     }
 };
+
+/**
+ * Returns true if the video of the participant should be rendered.
+ *
+ * @param {Object|Function} stateful - Object or function that can be resolved
+ * to the Redux state.
+ * @param {string} id - The ID of the participant.
+ * @returns {boolean}
+ */
+export function shouldRenderParticipantVideo(stateful: IStateful, id: string) {
+    const state = toState(stateful);
+    const participant = getParticipantById(state, id);
+
+    if (!participant) {
+        return false;
+    }
+
+    /* First check if we have an unmuted video track. */
+    const videoTrack = getVideoTrackByParticipant(state, participant);
+
+    if (!videoTrack) {
+        return false;
+    }
+
+    if (!shouldRenderVideoTrack(videoTrack, /* waitForVideoStarted */ false)) {
+        return false;
+    }
+
+    /* Then check if the participant connection or track streaming status is active. */
+    if (!videoTrack.local && !isTrackStreamingStatusActive(videoTrack)) {
+        return false;
+    }
+
+    /* Then check if audio-only mode is not active. */
+    const audioOnly = state['features/base/audio-only'].enabled;
+
+    if (!audioOnly) {
+        return true;
+    }
+
+    /* Last, check if the participant is sharing their screen and they are on stage. */
+    const remoteScreenShares = state['features/video-layout'].remoteScreenShares || [];
+    const largeVideoParticipantId = state['features/large-video'].participantId;
+    return participant.id === largeVideoParticipantId && remoteScreenShares.includes(participant.id);
+}
diff --git a/react/features/mobile/picture-in-picture/actions.ts b/react/features/mobile/picture-in-picture/actions.ts
index dc98c15f28ae..e89744bf732c 100644
--- a/react/features/mobile/picture-in-picture/actions.ts
+++ b/react/features/mobile/picture-in-picture/actions.ts
@@ -22,26 +22,31 @@ export function enterPictureInPicture() {
         // XXX At the time of this writing this action can only be dispatched by
         // the button which is on the conference view, which means that it's
         // fine to enter PiP mode.
-        if (isPipEnabled(getState())) {
-            const { PictureInPicture } = NativeModules;
-            const { enableIosPIP } = getState()['features/mobile/picture-in-picture'];
-            const p
-                = Platform.OS === 'ios'
-                ? dispatch({
+        const { enableIosPIP } = getState()['features/mobile/picture-in-picture'];
+
+        if (Platform.OS === 'ios') {
+            dispatch({
                 type: ENABLE_IOS_PIP,
                 enableIosPIP: !enableIosPIP })
-                : Platform.OS === 'android'
+        }
+
+        if (Platform.OS === 'android') {
+            if (isPipEnabled(getState())) {
+                const { PictureInPicture } = NativeModules;
+                const p
+                    = Platform.OS === 'android'
                     ? PictureInPicture
                         ? PictureInPicture.enterPictureInPicture()
                         : Promise.reject(
                             new Error('Picture-in-Picture not supported'))
                     : Promise.resolve();
 
-            p.catch((e: string) => logger.warn(`Error entering PiP mode: ${e}`));
+                p.catch((e: string) => logger.warn(`Error entering PiP mode: ${e}`));
 
-            // We should still dispatch ENTER_PICTURE_IN_PICTURE for cases where
-            // the external app needs to handle the event (ie. react-native-sdk)
-            p.finally(() => dispatch({ type: ENTER_PICTURE_IN_PICTURE }));
+                // We should still dispatch ENTER_PICTURE_IN_PICTURE for cases where
+                // the external app needs to handle the event (ie. react-native-sdk)
+                p.finally(() => dispatch({ type: ENTER_PICTURE_IN_PICTURE }));
+            }
         }
     };
 }
diff --git a/react/features/mobile/picture-in-picture/components/PictureInPictureButton.ts b/react/features/mobile/picture-in-picture/components/PictureInPictureButton.ts
index a59eea589f6a..31c997208217 100644
--- a/react/features/mobile/picture-in-picture/components/PictureInPictureButton.ts
+++ b/react/features/mobile/picture-in-picture/components/PictureInPictureButton.ts
@@ -63,7 +63,7 @@ function _mapStateToProps(state: IReduxState) {
     const enabled = pipEnabled && (!isLocalVideoTrackDesktop(state) || pipWhileScreenSharingEnabled);
 
     return {
-        _enabled: enabled
+        _enabled: true
     };
 }
 
diff --git a/react/features/prejoin/components/native/Prejoin.tsx b/react/features/prejoin/components/native/Prejoin.tsx
index bc71101e093c..337f6fd52701 100644
--- a/react/features/prejoin/components/native/Prejoin.tsx
+++ b/react/features/prejoin/components/native/Prejoin.tsx
@@ -38,7 +38,7 @@ import { navigateRoot } from '../../../mobile/navigation/rootNavigationContainer
 import { screen } from '../../../mobile/navigation/routes';
 import AudioMuteButton from '../../../toolbox/components/native/AudioMuteButton';
 import VideoMuteButton from '../../../toolbox/components/native/VideoMuteButton';
-import { isDisplayNameRequired, isRoomNameEnabled } from '../../functions';
+import { isDisplayNameRequired, isRoomNameEnabled } from '../../functions.native';
 import { IPrejoinProps } from '../../types';
 import { hasDisplayName } from '../../utils';
 

From 93d884e4b180d0a4476acf3299fc9c7025473d7b Mon Sep 17 00:00:00 2001
From: Calin-Teodor <calin.chitu@8x8.com>
Date: Thu, 24 Oct 2024 12:23:57 +0300
Subject: [PATCH 5/8] feat(base/participants): reverted some import changes

---
 react/features/base/participants/functions.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/react/features/base/participants/functions.ts b/react/features/base/participants/functions.ts
index 4512a28a9921..2f5cae631b82 100644
--- a/react/features/base/participants/functions.ts
+++ b/react/features/base/participants/functions.ts
@@ -1,13 +1,13 @@
 // @ts-expect-error
-import {  getGravatarURL } from '@jitsi/js-utils/avatar';
-
-import {  IReduxState, IStore } from '../../app/types';
-import {  isStageFilmstripAvailable } from '../../filmstrip/functions';
-import {  isAddPeopleEnabled, isDialOutEnabled } from '../../invite/functions';
-import {  toggleShareDialog } from '../../share-room/actions';
-import {  IStateful } from '../app/types';
-import {  GRAVATAR_BASE_URL } from '../avatar/constants';
-import {  isCORSAvatarURL } from '../avatar/functions';
+import { getGravatarURL } from '@jitsi/js-utils/avatar';
+
+import { IReduxState, IStore } from '../../app/types';
+import { isStageFilmstripAvailable } from '../../filmstrip/functions';
+import { isAddPeopleEnabled, isDialOutEnabled } from '../../invite/functions';
+import { toggleShareDialog } from '../../share-room/actions';
+import { IStateful } from '../app/types';
+import { GRAVATAR_BASE_URL } from '../avatar/constants';
+import { isCORSAvatarURL } from '../avatar/functions';
 import { getCurrentConference } from '../conference/functions';
 import { ADD_PEOPLE_ENABLED } from '../flags/constants';
 import { getFeatureFlag } from '../flags/functions';

From a3c3b341a2a382056ca587f7f2b751386b206920 Mon Sep 17 00:00:00 2001
From: Calin-Teodor <calin.chitu@8x8.com>
Date: Thu, 24 Oct 2024 12:24:45 +0300
Subject: [PATCH 6/8] feat(base/participants): reverted some import changes 2

---
 react/features/base/participants/functions.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/react/features/base/participants/functions.ts b/react/features/base/participants/functions.ts
index 2f5cae631b82..0d0a4093aa49 100644
--- a/react/features/base/participants/functions.ts
+++ b/react/features/base/participants/functions.ts
@@ -23,10 +23,10 @@ import {
     PARTICIPANT_ROLE,
     WHITEBOARD_PARTICIPANT_ICON
 } from './constants';
-import {  preloadImage } from './preloadImage';
-import {  FakeParticipant, IJitsiParticipant, IParticipant, ISourceInfo } from './types';
-import {  shouldRenderVideoTrack } from '../media/functions';
-import {  isTrackStreamingStatusActive } from '../../connection-indicator/functions';
+import { preloadImage } from './preloadImage';
+import { FakeParticipant, IJitsiParticipant, IParticipant, ISourceInfo } from './types';
+import { shouldRenderVideoTrack } from '../media/functions';
+import { isTrackStreamingStatusActive } from '../../connection-indicator/functions';
 
 
 /**

From a6105a1d48b1b7501430d3105399c424b6c66476 Mon Sep 17 00:00:00 2001
From: Calin-Teodor <calin.chitu@8x8.com>
Date: Thu, 24 Oct 2024 13:15:40 +0300
Subject: [PATCH 7/8] fixed some lint issues

---
 .../media/components/AbstractVideoTrack.tsx   |  4 +--
 .../base/media/components/native/Video.tsx    | 25 +++++++++----------
 .../components/ParticipantView.native.tsx     |  9 +++----
 react/features/base/participants/functions.ts |  9 ++++---
 .../mobile/picture-in-picture/actions.ts      |  5 ++--
 .../components/PictureInPictureButton.ts      |  6 ++---
 .../picture-in-picture/middleware.native.ts   |  6 +++--
 .../mobile/picture-in-picture/reducer.ts      |  4 ++-
 8 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/react/features/base/media/components/AbstractVideoTrack.tsx b/react/features/base/media/components/AbstractVideoTrack.tsx
index 9bc4a8b834a8..9f7917c98774 100644
--- a/react/features/base/media/components/AbstractVideoTrack.tsx
+++ b/react/features/base/media/components/AbstractVideoTrack.tsx
@@ -1,4 +1,4 @@
-import React, {Component, ReactElement} from 'react';
+import React, { Component, ReactElement } from 'react';
 
 import { IStore } from '../../../app/types';
 import { trackVideoStarted } from '../../tracks/actions';
@@ -17,7 +17,7 @@ export interface IProps {
     dispatch: IStore['dispatch'];
 
     /**
-     * iOS component for PiP view.
+     * IOS component for PiP view.
      */
     fallbackView?: ReactElement;
 
diff --git a/react/features/base/media/components/native/Video.tsx b/react/features/base/media/components/native/Video.tsx
index bda43cac5136..e76512cd4ba6 100644
--- a/react/features/base/media/components/native/Video.tsx
+++ b/react/features/base/media/components/native/Video.tsx
@@ -1,16 +1,15 @@
-import React, { Component, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { GestureResponderEvent, ViewStyle } from 'react-native';
-import { useSelector } from 'react-redux';
-
 import { MediaStream, RTCPIPView, startIOSPIP, stopIOSPIP } from 'react-native-webrtc';
+import { useSelector } from 'react-redux';
 
-import { IReduxState}  from '../../../../app/types';
+import { IReduxState } from '../../../../app/types';
 import Pressable from '../../../react/components/native/Pressable';
 
-import VideoTransform from './VideoTransform';
-import styles from './styles';
 import logger from '../../logger';
 
+import VideoTransform from './VideoTransform';
+import styles from './styles';
 
 /**
  * The type of the React {@code Component} props of {@link Video}.
@@ -18,7 +17,7 @@ import logger from '../../logger';
 interface IProps {
 
     /**
-     * iOS component for PiP view.
+     * IOS component for PiP view.
      */
     fallbackView: React.Component;
 
@@ -76,10 +75,10 @@ const Video: React.FC<IProps> = ({ fallbackView, mirror, onPlaying, onPress, str
         fallbackView,
         preferredSize: {
             width: 400,
-            height: 800,
+            height: 800
         },
         startAutomatically: true
-    }
+    };
     const objectFit = zoomEnabled ? 'contain' : 'cover';
     const viewRef = useRef();
 
@@ -100,12 +99,12 @@ const Video: React.FC<IProps> = ({ fallbackView, mirror, onPlaying, onPress, str
         onPlaying?.();
     }, []);
 
-    useEffect(() =>  {
+    useEffect(() => {
         if (enableIosPIP) {
-            logger.warn(`Picture in picture mode on`);
+            logger.warn('Picture in picture mode on');
             startIOSPIP(viewRef);
         } else {
-            logger.warn(`Picture in picture mode off`);
+            logger.warn('Picture in picture mode off');
             stopIOSPIP(viewRef);
         }
     }, [ enableIosPIP ]);
@@ -136,7 +135,7 @@ const Video: React.FC<IProps> = ({ fallbackView, mirror, onPlaying, onPress, str
         </Pressable>
     );
 
-}
+};
 
 // @ts-ignore
 export default Video;
diff --git a/react/features/base/participants/components/ParticipantView.native.tsx b/react/features/base/participants/components/ParticipantView.native.tsx
index 30e530a5c0e6..55d02a4b4b66 100644
--- a/react/features/base/participants/components/ParticipantView.native.tsx
+++ b/react/features/base/participants/components/ParticipantView.native.tsx
@@ -163,19 +163,16 @@ class ParticipantView extends Component<IProps> {
     }
 
     _renderParticipantAvatar() {
-        const {
-            avatarSize,
-            participantId,
-        } = this.props;
+        const { avatarSize, participantId } = this.props;
 
-        return(
+        return (
             <View style = { styles.avatarContainer as ViewStyle }>
                 <Avatar
                     participantId = { participantId }
                     size = { avatarSize } />
             </View>
         )
-    }
+    };
 
     /**
      * Implements React's {@link Component#render()}.
diff --git a/react/features/base/participants/functions.ts b/react/features/base/participants/functions.ts
index 0d0a4093aa49..1b6c4fcaf6f0 100644
--- a/react/features/base/participants/functions.ts
+++ b/react/features/base/participants/functions.ts
@@ -2,6 +2,7 @@
 import { getGravatarURL } from '@jitsi/js-utils/avatar';
 
 import { IReduxState, IStore } from '../../app/types';
+import { isTrackStreamingStatusActive } from '../../connection-indicator/functions';
 import { isStageFilmstripAvailable } from '../../filmstrip/functions';
 import { isAddPeopleEnabled, isDialOutEnabled } from '../../invite/functions';
 import { toggleShareDialog } from '../../share-room/actions';
@@ -12,6 +13,7 @@ import { getCurrentConference } from '../conference/functions';
 import { ADD_PEOPLE_ENABLED } from '../flags/constants';
 import { getFeatureFlag } from '../flags/functions';
 import i18next from '../i18n/i18next';
+import { shouldRenderVideoTrack } from '../media/functions';
 import { MEDIA_TYPE, MediaType, VIDEO_TYPE } from '../media/constants';
 import { toState } from '../redux/functions';
 import { getScreenShareTrack, getVideoTrackByParticipant, isLocalTrackMuted } from '../tracks/functions.any';
@@ -25,8 +27,6 @@ import {
 } from './constants';
 import { preloadImage } from './preloadImage';
 import { FakeParticipant, IJitsiParticipant, IParticipant, ISourceInfo } from './types';
-import { shouldRenderVideoTrack } from '../media/functions';
-import { isTrackStreamingStatusActive } from '../../connection-indicator/functions';
 
 
 /**
@@ -852,5 +852,8 @@ export function shouldRenderParticipantVideo(stateful: IStateful, id: string) {
     /* Last, check if the participant is sharing their screen and they are on stage. */
     const remoteScreenShares = state['features/video-layout'].remoteScreenShares || [];
     const largeVideoParticipantId = state['features/large-video'].participantId;
-    return participant.id === largeVideoParticipantId && remoteScreenShares.includes(participant.id);
+    const participantIsInLargeVideoWithScreen
+        = participant.id === largeVideoParticipantId && remoteScreenShares.includes(participant.id);
+
+    return participantIsInLargeVideoWithScreen;
 }
diff --git a/react/features/mobile/picture-in-picture/actions.ts b/react/features/mobile/picture-in-picture/actions.ts
index e89744bf732c..9a27bc8c6b30 100644
--- a/react/features/mobile/picture-in-picture/actions.ts
+++ b/react/features/mobile/picture-in-picture/actions.ts
@@ -27,15 +27,14 @@ export function enterPictureInPicture() {
         if (Platform.OS === 'ios') {
             dispatch({
                 type: ENABLE_IOS_PIP,
-                enableIosPIP: !enableIosPIP })
+                enableIosPIP: !enableIosPIP });
         }
 
         if (Platform.OS === 'android') {
             if (isPipEnabled(getState())) {
                 const { PictureInPicture } = NativeModules;
                 const p
-                    = Platform.OS === 'android'
-                    ? PictureInPicture
+                    = Platform.OS === 'android' ? PictureInPicture
                         ? PictureInPicture.enterPictureInPicture()
                         : Promise.reject(
                             new Error('Picture-in-Picture not supported'))
diff --git a/react/features/mobile/picture-in-picture/components/PictureInPictureButton.ts b/react/features/mobile/picture-in-picture/components/PictureInPictureButton.ts
index 31c997208217..06fa2512e900 100644
--- a/react/features/mobile/picture-in-picture/components/PictureInPictureButton.ts
+++ b/react/features/mobile/picture-in-picture/components/PictureInPictureButton.ts
@@ -58,9 +58,9 @@ class PictureInPictureButton extends AbstractButton<IProps> {
  * }}
  */
 function _mapStateToProps(state: IReduxState) {
-    const pipEnabled = isPipEnabled(state);
-    const pipWhileScreenSharingEnabled = getFeatureFlag(state, PIP_WHILE_SCREEN_SHARING_ENABLED, false);
-    const enabled = pipEnabled && (!isLocalVideoTrackDesktop(state) || pipWhileScreenSharingEnabled);
+    // const pipEnabled = isPipEnabled(state);
+    // const pipWhileScreenSharingEnabled = getFeatureFlag(state, PIP_WHILE_SCREEN_SHARING_ENABLED, false);
+    // const enabled = pipEnabled && (!isLocalVideoTrackDesktop(state) || pipWhileScreenSharingEnabled);
 
     return {
         _enabled: true
diff --git a/react/features/mobile/picture-in-picture/middleware.native.ts b/react/features/mobile/picture-in-picture/middleware.native.ts
index a27a9be905df..0835a1ddb32d 100644
--- a/react/features/mobile/picture-in-picture/middleware.native.ts
+++ b/react/features/mobile/picture-in-picture/middleware.native.ts
@@ -1,5 +1,6 @@
 import MiddlewareRegistry from '../../base/redux/MiddlewareRegistry';
 import { APP_STATE_CHANGED } from '../background/actionTypes';
+
 import { ENABLE_IOS_PIP } from './actionTypes';
 
 MiddlewareRegistry.register(store => next => action => {
@@ -14,11 +15,12 @@ MiddlewareRegistry.register(store => next => action => {
         if (appState === 'inactive') {
             dispatch({
                 type: ENABLE_IOS_PIP,
-                enableIosPIP: false })
+                enableIosPIP: false
+            });
         }
         break;
     }
     }
 
     return result;
-})
+});
diff --git a/react/features/mobile/picture-in-picture/reducer.ts b/react/features/mobile/picture-in-picture/reducer.ts
index 9466165cd956..6e2741a395a9 100644
--- a/react/features/mobile/picture-in-picture/reducer.ts
+++ b/react/features/mobile/picture-in-picture/reducer.ts
@@ -1,4 +1,5 @@
 import ReducerRegistry from '../../base/redux/ReducerRegistry';
+
 import { ENABLE_IOS_PIP } from './actionTypes';
 
 const DEFAULT_STATE = {
@@ -11,6 +12,7 @@ export interface IMobilePictureInPictureState {
 
 const STORE_NAME = 'features/mobile/picture-in-picture';
 
+// eslint-disable-next-line max-len
 ReducerRegistry.register<IMobilePictureInPictureState>(STORE_NAME, (state = DEFAULT_STATE, action): IMobilePictureInPictureState => {
     switch (action.type) {
 
@@ -26,4 +28,4 @@ ReducerRegistry.register<IMobilePictureInPictureState>(STORE_NAME, (state = DEFA
     default:
         return state;
     }
-})
+});

From 84b0359755cdb30739bd46e37660404de32b61e5 Mon Sep 17 00:00:00 2001
From: Calin-Teodor <calin.chitu@8x8.com>
Date: Thu, 24 Oct 2024 13:28:19 +0300
Subject: [PATCH 8/8] fixed some lint issues

---
 react/features/base/media/components/native/Video.tsx     | 1 -
 .../participants/components/ParticipantView.native.tsx    | 4 ++--
 react/features/base/participants/functions.ts             | 2 +-
 .../components/PictureInPictureButton.ts                  | 8 ++++----
 react/features/mobile/picture-in-picture/reducer.ts       | 2 +-
 5 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/react/features/base/media/components/native/Video.tsx b/react/features/base/media/components/native/Video.tsx
index e76512cd4ba6..803e54b702bf 100644
--- a/react/features/base/media/components/native/Video.tsx
+++ b/react/features/base/media/components/native/Video.tsx
@@ -5,7 +5,6 @@ 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';
diff --git a/react/features/base/participants/components/ParticipantView.native.tsx b/react/features/base/participants/components/ParticipantView.native.tsx
index 55d02a4b4b66..1ea6529a14bf 100644
--- a/react/features/base/participants/components/ParticipantView.native.tsx
+++ b/react/features/base/participants/components/ParticipantView.native.tsx
@@ -171,8 +171,8 @@ class ParticipantView extends Component<IProps> {
                     participantId = { participantId }
                     size = { avatarSize } />
             </View>
-        )
-    };
+        );
+    }
 
     /**
      * Implements React's {@link Component#render()}.
diff --git a/react/features/base/participants/functions.ts b/react/features/base/participants/functions.ts
index 1b6c4fcaf6f0..cfc3f88eb666 100644
--- a/react/features/base/participants/functions.ts
+++ b/react/features/base/participants/functions.ts
@@ -13,8 +13,8 @@ import { getCurrentConference } from '../conference/functions';
 import { ADD_PEOPLE_ENABLED } from '../flags/constants';
 import { getFeatureFlag } from '../flags/functions';
 import i18next from '../i18n/i18next';
-import { shouldRenderVideoTrack } from '../media/functions';
 import { MEDIA_TYPE, MediaType, VIDEO_TYPE } from '../media/constants';
+import { shouldRenderVideoTrack } from '../media/functions';
 import { toState } from '../redux/functions';
 import { getScreenShareTrack, getVideoTrackByParticipant, isLocalTrackMuted } from '../tracks/functions.any';
 import { createDeferred } from '../util/helpers';
diff --git a/react/features/mobile/picture-in-picture/components/PictureInPictureButton.ts b/react/features/mobile/picture-in-picture/components/PictureInPictureButton.ts
index 06fa2512e900..acdc1490e874 100644
--- a/react/features/mobile/picture-in-picture/components/PictureInPictureButton.ts
+++ b/react/features/mobile/picture-in-picture/components/PictureInPictureButton.ts
@@ -1,14 +1,14 @@
 import { connect } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
-import { PIP_WHILE_SCREEN_SHARING_ENABLED } from '../../../base/flags/constants';
-import { getFeatureFlag } from '../../../base/flags/functions';
+// import { PIP_WHILE_SCREEN_SHARING_ENABLED } from '../../../base/flags/constants';
+// import { getFeatureFlag } from '../../../base/flags/functions';
 import { translate } from '../../../base/i18n/functions';
 import { IconArrowDown } from '../../../base/icons/svg';
 import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
-import { isLocalVideoTrackDesktop } from '../../../base/tracks/functions.native';
+// import { isLocalVideoTrackDesktop } from '../../../base/tracks/functions.native';
 import { enterPictureInPicture } from '../actions';
-import { isPipEnabled } from '../functions';
+// import { isPipEnabled } from '../functions';
 
 interface IProps extends AbstractButtonProps {
 
diff --git a/react/features/mobile/picture-in-picture/reducer.ts b/react/features/mobile/picture-in-picture/reducer.ts
index 6e2741a395a9..934a88c52cc0 100644
--- a/react/features/mobile/picture-in-picture/reducer.ts
+++ b/react/features/mobile/picture-in-picture/reducer.ts
@@ -22,7 +22,7 @@ ReducerRegistry.register<IMobilePictureInPictureState>(STORE_NAME, (state = DEFA
         return {
             ...state,
             enableIosPIP
-        }
+        };
     }
 
     default: