fix(carmode) Force potrait mode, add connection indicator

react/features/conference/components/native/carmode/TitleBar.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { Text, View } from 'react-native';
 
 import { getConferenceName } from '../../../../base/conference/functions';
+import { ConnectionIndicator } from '../../../../connection-indicator';
 import { getFeatureFlag, MEETING_NAME_ENABLED } from '../../../../base/flags';
 import { JitsiRecordingConstants } from '../../../../base/lib-jitsi-meet';
 import { connect } from '../../../../base/redux';;
 import { RecordingLabel } from '../../../../recording';
 import { VideoQualityLabel } from '../../../../video-quality';
 
+import { getLocalParticipant } from '../../../../base/participants';
 import styles from './styles';
 
 
@@ -32,35 +35,42 @@ type Props = {
  * @param {Props} props - The React props passed to this component.
  * @returns {JSX.Element}
  */
-const TitleBar = (props: Props) : JSX.Element => (<>
+const TitleBar = (props: Props) : JSX.Element => {
-    <View
+    const localParticipant =  useSelector(getLocalParticipant);
-        pointerEvents = 'box-none'
+    const localParticipantId = localParticipant?.id;
-        style = { styles.titleBarWrapper }>
+
+    return (<>
         <View
             pointerEvents = 'box-none'
-            style = { styles.roomNameWrapper }>
+            style = { styles.titleBarWrapper }>
-            <View style = { styles.qualityLabelContainer }>
+            <View
-                <VideoQualityLabel />
+                pointerEvents = 'box-none'
-            </View>
+                style = { styles.roomNameWrapper }>
-
+                <View style = { styles.qualityLabelContainer }>
-            <View style = { styles.headerLabels }>
+                    <VideoQualityLabel />
-                <RecordingLabel mode = { JitsiRecordingConstants.mode.FILE } />
-                <RecordingLabel mode = { JitsiRecordingConstants.mode.STREAM } />
-            </View>
-
-            {
-                props._meetingNameEnabled
-                && <View style = { styles.roomNameView }>
-                    <Text
-                        numberOfLines = { 1 }
-                        style = { styles.roomName }>
-                        {props._meetingName}
-                    </Text>
                 </View>
-            }
+                <ConnectionIndicator
+                    participantId = { localParticipantId }
+                    iconStyle = { styles.connectionIndicatorIcon } />
+                <View style = { styles.headerLabels }>
+                    <RecordingLabel mode = { JitsiRecordingConstants.mode.FILE } />
+                    <RecordingLabel mode = { JitsiRecordingConstants.mode.STREAM } />
+                </View>
+
+                {
+                    props._meetingNameEnabled
+                    && <View style = { styles.roomNameView }>
+                        <Text
+                            numberOfLines = { 1 }
+                            style = { styles.roomName }>
+                            {props._meetingName}
+                        </Text>
+                    </View>
+                }
+            </View>
         </View>
-    </View>
+    </>);
-</>);
+}
 
 /**
  * Maps part of the Redux store to the props of this component.

react/features/conference/components/native/carmode/styles.js

@@ -203,5 +203,9 @@ export default {
         color: BaseTheme.palette.text01,
         marginBottom: 32,
         ...BaseTheme.typography.bodyShortRegularLarge
+    },
+
+    connectionIndicatorIcon: {
+        fontSize: 20
     }
 };

react/features/connection-indicator/components/AbstractConnectionIndicator.js

@@ -32,6 +32,11 @@ export type Props = {
      */
     participantId: string,
 
+    /**
+     * Custom icon style.
+     */
+    iconStyle?: Object,
+
     /**
      * The source name of the track.
      */

react/features/connection-indicator/components/native/ConnectionIndicator.js

@@ -58,7 +58,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
                 }}>
                 <BaseIndicator
                     icon = { IconConnectionActive }
-                    iconStyle = { iconStyle } />
+                    iconStyle = { this.props.iconStyle || iconStyle } />
             </View>
         );
     }

react/features/mobile/navigation/screenOptions.js

@@ -184,7 +184,10 @@ export const presentationScreenOptions = {
 /**
  * Screen options for car mode.
  */
-export const carmodeScreenOptions = presentationScreenOptions;
+export const carmodeScreenOptions = {
+    ...presentationScreenOptions,
+    orientation: 'portrait'
+};
 
 /**
  * Screen options for chat.