feat(title-bar) Updated title bar (#10752)

Only display Picture-in-Picture button when feature is available
Moved conference timer before title
Created new always-on container for labels
Moved recording labels to always-on
Updated expanded label to support new always-on labels
Added raised hands counter label
Added speaker - earpiece toggle button
Lifted state up

react/features/base/label/components/ExpandedLabel.native.js

@@ -11,7 +11,12 @@ export type Props = {
      * The position of the parent element (from right to left) to display the
      * arrow.
      */
-    parentPosition: number
+    parentPosition: number,
+
+    /**
+     * Custom styles.
+     */
+    style: ?Object
 };
 
 type State = {
@@ -61,7 +66,10 @@ export default class ExpandedLabel<P: Props> extends Component<P, State> {
     render() {
         return (
             <Animated.View
-                style = { [ styles.expandedLabelContainer, { opacity: this.state.opacityAnimation } ] }>
+                style = { [ styles.expandedLabelContainer,
+                    this.props.style,
+                    { opacity: this.state.opacityAnimation }
+                ] }>
                 <View
                     style = { [ styles.expandedLabelTextContainer,
                         { backgroundColor: this._getColor() || DEFAULT_COLOR } ] }>

react/features/base/label/components/Label.native.js

@@ -22,6 +22,11 @@ const STATUS_OFF = 'off';
 
 type Props = AbstractProps & {
 
+    /**
+     * Color for the icon.
+     */
+    iconColor?: ?string,
+
     /**
      * Status of the label. This prop adds some additional styles based on its
      * value. E.g. If status = off, it will render the label symbolising that
@@ -32,7 +37,12 @@ type Props = AbstractProps & {
     /**
      * Style of the label.
      */
-    style?: ?StyleType
+    style?: ?StyleType,
+
+    /**
+     * Custom styles for the text.
+     */
+    textStyle?: ?StyleType
 };
 
 type State = {
@@ -91,7 +101,7 @@ export default class Label extends AbstractLabel<Props, State> {
      * @inheritdoc
      */
     render() {
-        const { icon, text, status, style } = this.props;
+        const { icon, text, status, style, iconColor, textStyle } = this.props;
 
         let extraStyle = null;
 
@@ -113,9 +123,10 @@ export default class Label extends AbstractLabel<Props, State> {
                     extraStyle
                 ] }>
                 { icon && <Icon
+                    color = { iconColor }
                     size = '18'
                     src = { icon } /> }
-                { text && <Text style = { styles.labelText }>
+                { text && <Text style = { [ styles.labelText, textStyle ] }>
                     { text }
                 </Text>}
             </Animated.View>

react/features/base/label/components/styles.js

@@ -1,6 +1,7 @@
 // @flow
 
 import { ColorPalette } from '../../styles';
+import BaseTheme from '../../ui/components/BaseTheme';
 
 /**
  * The default color of the {@code Label} and {@code ExpandedLabel}.
@@ -29,7 +30,8 @@ export default {
         right: 0,
         top: 36,
         flexDirection: 'row',
-        justifyContent: 'center'
+        justifyContent: 'center',
+        zIndex: 1
     },
 
     expandedLabelTextContainer: {
@@ -59,7 +61,7 @@ export default {
 
     labelText: {
         color: ColorPalette.white,
-        fontSize: 12
+        ...BaseTheme.typography.labelBold
     },
 
     labelOff: {

react/features/conference/components/native/AlwaysOnLabels.js

@@ -0,0 +1,44 @@
+// @flow
+
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+
+import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
+import { RecordingLabel } from '../../../recording';
+
+import RaisedHandsCountLabel from './RaisedHandsCountLabel';
+import {
+    LabelHitSlop,
+    LABEL_ID_RAISED_HANDS_COUNT,
+    LABEL_ID_RECORDING,
+    LABEL_ID_STREAMING
+} from './constants';
+
+type Props = {
+
+    /**
+     * Creates a function to be invoked when the onPress of the touchables are
+     * triggered.
+     */
+    createOnPress: Function
+}
+
+const AlwaysOnLabels = ({ createOnPress }: Props) => (<>
+    <TouchableOpacity
+        hitSlop = { LabelHitSlop }
+        onPress = { createOnPress(LABEL_ID_RECORDING) } >
+        <RecordingLabel mode = { JitsiRecordingConstants.mode.FILE } />
+    </TouchableOpacity>
+    <TouchableOpacity
+        hitSlop = { LabelHitSlop }
+        onPress = { createOnPress(LABEL_ID_STREAMING) } >
+        <RecordingLabel mode = { JitsiRecordingConstants.mode.STREAM } />
+    </TouchableOpacity>
+    <TouchableOpacity
+        hitSlop = { LabelHitSlop }
+        onPress = { createOnPress(LABEL_ID_RAISED_HANDS_COUNT) } >
+        <RaisedHandsCountLabel />
+    </TouchableOpacity>
+</>);
+
+export default AlwaysOnLabels;

react/features/conference/components/native/Conference.js

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { NativeModules, SafeAreaView, StatusBar, View } from 'react-native';
+import { withSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { appNavigate } from '../../../app/actions';
 import { PIP_ENABLED, FULLSCREEN_ENABLED, getFeatureFlag } from '../../../base/flags';
@@ -32,9 +33,12 @@ import {
 } from '../AbstractConference';
 import type { AbstractProps } from '../AbstractConference';
 
+import AlwaysOnLabels from './AlwaysOnLabels';
 import { navigate } from './ConferenceNavigationContainerRef';
+import ExpandedLabelPopup from './ExpandedLabelPopup';
 import LonelyMeetingExperience from './LonelyMeetingExperience';
-import NavigationBar from './NavigationBar';
+import TitleBar from './TitleBar';
+import { EXPANDED_LABEL_TIMEOUT } from './constants';
 import { screen } from './routes';
 import styles from './styles';
 
@@ -106,13 +110,31 @@ type Props = AbstractProps & {
     /**
      * The redux {@code dispatch} function.
      */
-    dispatch: Function
+    dispatch: Function,
+
+    /**
+    * Object containing the safe area insets.
+    */
+    insets: Object
 };
 
+type State = {
+
+    /**
+     * The label that is currently expanded.
+     */
+    visibleExpandedLabel: ?string
+}
+
 /**
  * The conference page of the mobile (i.e. React Native) application.
  */
-class Conference extends AbstractConference<Props, *> {
+class Conference extends AbstractConference<Props, State> {
+    /**
+     * Timeout ref.
+     */
+    _expandedLabelTimeout: Object;
+
     /**
      * Initializes a new Conference instance.
      *
@@ -122,10 +144,17 @@ class Conference extends AbstractConference<Props, *> {
     constructor(props) {
         super(props);
 
+        this.state = {
+            visibleExpandedLabel: undefined
+        };
+
+        this._expandedLabelTimeout = React.createRef();
+
         // Bind event handlers so they are only bound once per instance.
         this._onClick = this._onClick.bind(this);
         this._onHardwareBackPress = this._onHardwareBackPress.bind(this);
         this._setToolboxVisible = this._setToolboxVisible.bind(this);
+        this._createOnPress = this._createOnPress.bind(this);
     }
 
     /**
@@ -167,6 +196,8 @@ class Conference extends AbstractConference<Props, *> {
     componentWillUnmount() {
         // Tear handling any hardware button presses for back navigation down.
         BackButtonRegistry.removeListener(this._onHardwareBackPress);
+
+        clearTimeout(this._expandedLabelTimeout.current);
     }
 
     /**
@@ -243,6 +274,38 @@ class Conference extends AbstractConference<Props, *> {
                 : undefined);
     }
 
+    _createOnPress: (string) => void;
+
+    /**
+     * Creates a function to be invoked when the onPress of the touchables are
+     * triggered.
+     *
+     * @param {string} label - The identifier of the label that's onLayout is
+     * triggered.
+     * @returns {Function}
+     */
+    _createOnPress(label) {
+        return () => {
+            const { visibleExpandedLabel } = this.state;
+
+            const newVisibleExpandedLabel
+                = visibleExpandedLabel === label ? undefined : label;
+
+            clearTimeout(this._expandedLabelTimeout.current);
+            this.setState({
+                visibleExpandedLabel: newVisibleExpandedLabel
+            });
+
+            if (newVisibleExpandedLabel) {
+                this._expandedLabelTimeout.current = setTimeout(() => {
+                    this.setState({
+                        visibleExpandedLabel: undefined
+                    });
+                }, EXPANDED_LABEL_TIMEOUT);
+            }
+        };
+    }
+
     /**
      * Renders the content for the Conference container.
      *
@@ -307,10 +370,29 @@ class Conference extends AbstractConference<Props, *> {
                     pointerEvents = 'box-none'
                     style = {
                         _toolboxVisible
-                            ? styles.navBarSafeViewColor
-                            : styles.navBarSafeViewTransparent }>
-                    <NavigationBar />
-                    { this._renderNotificationsContainer() }
+                            ? styles.titleBarSafeViewColor
+                            : styles.titleBarSafeViewTransparent }>
+                    <TitleBar _createOnPress = { this._createOnPress } />
+                </SafeAreaView>
+                <SafeAreaView
+                    pointerEvents = 'box-none'
+                    style = {
+                        _toolboxVisible
+                            ? [ styles.titleBarSafeViewTransparent, { top: this.props.insets.top + 50 } ]
+                            : styles.titleBarSafeViewTransparent
+                    }>
+                    <View
+                        pointerEvents = 'box-none'
+                        style = { styles.expandedLabelWrapper }>
+                        <ExpandedLabelPopup visibleExpandedLabel = { this.state.visibleExpandedLabel } />
+                    </View>
+                    <View
+                        pointerEvents = 'box-none'
+                        style = { styles.alwaysOnTitleBar }>
+                        {/* eslint-disable-next-line react/jsx-no-bind */}
+                        <AlwaysOnLabels createOnPress = { this._createOnPress } />
+                    </View>
+                    {this._renderNotificationsContainer()}
                     <KnockingParticipantList />
                 </SafeAreaView>
 
@@ -439,4 +521,4 @@ function _mapStateToProps(state) {
     };
 }
 
-export default connect(_mapStateToProps)(Conference);
+export default withSafeAreaInsets(connect(_mapStateToProps)(Conference));

react/features/conference/components/native/ExpandedLabelPopup.js

@@ -0,0 +1,37 @@
+// @flow
+
+import React from 'react';
+
+import BaseTheme from '../../../base/ui/components/BaseTheme';
+
+import { EXPANDED_LABELS } from './constants';
+
+type Props = {
+
+    /**
+     * The selected label to show details.
+     */
+    visibleExpandedLabel: ?string
+}
+
+const ExpandedLabelPopup = ({ visibleExpandedLabel }: Props) => {
+    if (visibleExpandedLabel) {
+        const expandedLabel = EXPANDED_LABELS[visibleExpandedLabel];
+
+        if (expandedLabel) {
+            const LabelComponent = expandedLabel.component || expandedLabel;
+            const { props, alwaysOn } = expandedLabel || {};
+            const style = {
+                top: alwaysOn ? BaseTheme.spacing[6] : BaseTheme.spacing[1]
+            };
+
+            return (<LabelComponent
+                { ...props }
+                style = { style } />);
+        }
+    }
+
+    return null;
+};
+
+export default ExpandedLabelPopup;

react/features/conference/components/native/Labels.js

@@ -3,96 +3,27 @@
 import React, { Component } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
-import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
-import { RecordingLabel, RecordingExpandedLabel } from '../../../recording';
-import { TranscribingExpandedLabel, TranscribingLabel } from '../../../transcribing';
-import { VideoQualityExpandedLabel, VideoQualityLabel } from '../../../video-quality';
+import { TranscribingLabel } from '../../../transcribing';
+import { VideoQualityLabel } from '../../../video-quality';
 
-import InsecureRoomNameExpandedLabel from './InsecureRoomNameExpandedLabel';
+import { LabelHitSlop, LABEL_ID_INSECURE_ROOM_NAME, LABEL_ID_QUALITY, LABEL_ID_TRANSCRIBING } from './constants';
 import styles from './styles';
 
 import { InsecureRoomNameLabel } from './';
 
-type Props = {}
-
-type State = {
+type Props = {
 
     /**
-     * String to show which {@code ExpandedLabel} to be shown. (Equals to the
-     * label IDs below.).
+     * Creates a function to be invoked when the onPress of the touchables are
+     * triggered.
      */
-    visibleExpandedLabel: ?string
+    createOnPress: Function
 }
 
-const LABEL_ID_QUALITY = 'quality';
-const LABEL_ID_RECORDING = 'recording';
-const LABEL_ID_STREAMING = 'streaming';
-const LABEL_ID_TRANSCRIBING = 'transcribing';
-const LABEL_ID_INSECURE_ROOM_NAME = 'insecure-room-name';
-
-const LabelHitSlop = {
-    top: 10,
-    bottom: 10,
-    left: 0,
-    right: 0
-};
-
-/**
- * The {@code ExpandedLabel} components to be rendered for the individual
- * {@code Label}s.
- */
-const EXPANDED_LABELS = {
-    [LABEL_ID_QUALITY]: VideoQualityExpandedLabel,
-    [LABEL_ID_RECORDING]: {
-        component: RecordingExpandedLabel,
-        props: {
-            mode: JitsiRecordingConstants.mode.FILE
-        }
-    },
-    [LABEL_ID_STREAMING]: {
-        component: RecordingExpandedLabel,
-        props: {
-            mode: JitsiRecordingConstants.mode.STREAM
-        }
-    },
-    [LABEL_ID_TRANSCRIBING]: TranscribingExpandedLabel,
-    [LABEL_ID_INSECURE_ROOM_NAME]: InsecureRoomNameExpandedLabel
-};
-
-/**
- * Timeout to hide the {@ExpandedLabel}.
- */
-const EXPANDED_LABEL_TIMEOUT = 5000;
-
 /**
  * A container that renders the conference indicators, if any.
  */
-class Labels extends Component<Props, State> {
-    /**
-     * Timeout for the expanded labels to disappear.
-     */
-    expandedLabelTimeout: TimeoutID;
-
-    /**
-     * Instantiates a new instance of {@code Labels}.
-     *
-     * @inheritdoc
-     */
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            visibleExpandedLabel: undefined
-        };
-    }
-
-    /**
-     * Implements React {@code Component}'s componentWillUnmount.
-     *
-     * @inheritdoc
-     */
-    componentWillUnmount() {
-        clearTimeout(this.expandedLabelTimeout);
-    }
+class Labels extends Component<Props> {
 
     /**
      * Implements React {@code Component}'s render.
@@ -101,99 +32,34 @@ class Labels extends Component<Props, State> {
      */
     render() {
         return (
-            <>
-                <View pointerEvents = 'box-none'>
-                    <View
-                        pointerEvents = 'box-none'
-                        style = { styles.indicatorContainer }>
-                        <TouchableOpacity
-                            hitSlop = { LabelHitSlop }
-                            onPress = { this._createOnPress(LABEL_ID_RECORDING) } >
-                            <RecordingLabel mode = { JitsiRecordingConstants.mode.FILE } />
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            hitSlop = { LabelHitSlop }
-                            onPress = { this._createOnPress(LABEL_ID_STREAMING) } >
-                            <RecordingLabel mode = { JitsiRecordingConstants.mode.STREAM } />
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            hitSlop = { LabelHitSlop }
-                            onPress = {
-                                this._createOnPress(LABEL_ID_TRANSCRIBING)
-                            } >
-                            <TranscribingLabel />
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            hitSlop = { LabelHitSlop }
-                            onPress = {
-                                this._createOnPress(LABEL_ID_INSECURE_ROOM_NAME)
-                            } >
-                            <InsecureRoomNameLabel />
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            hitSlop = { LabelHitSlop }
-                            onPress = {
-                                this._createOnPress(LABEL_ID_QUALITY) } >
-                            <VideoQualityLabel />
-                        </TouchableOpacity>
-                    </View>
+            <View pointerEvents = 'box-none'>
+                <View
+                    pointerEvents = 'box-none'
+                    style = { styles.indicatorContainer }>
+                    <TouchableOpacity
+                        hitSlop = { LabelHitSlop }
+                        onPress = {
+                            this.props.createOnPress(LABEL_ID_TRANSCRIBING)
+                        } >
+                        <TranscribingLabel />
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                        hitSlop = { LabelHitSlop }
+                        onPress = {
+                            this.props.createOnPress(LABEL_ID_INSECURE_ROOM_NAME)
+                        } >
+                        <InsecureRoomNameLabel />
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                        hitSlop = { LabelHitSlop }
+                        onPress = {
+                            this.props.createOnPress(LABEL_ID_QUALITY) } >
+                        <VideoQualityLabel />
+                    </TouchableOpacity>
                 </View>
-                { this._renderExpandedLabel() }
-            </>
+            </View>
         );
     }
-
-    /**
-     * Creates a function to be invoked when the onPress of the touchables are
-     * triggered.
-     *
-     * @param {string} label - The identifier of the label that's onLayout is
-     * triggered.
-     * @returns {Function}
-     */
-    _createOnPress(label) {
-        return () => {
-            let { visibleExpandedLabel } = this.state;
-
-            visibleExpandedLabel
-                = visibleExpandedLabel === label ? undefined : label;
-
-            clearTimeout(this.expandedLabelTimeout);
-            this.setState({
-                visibleExpandedLabel
-            });
-
-            if (visibleExpandedLabel) {
-                this.expandedLabelTimeout = setTimeout(() => {
-                    this.setState({
-                        visibleExpandedLabel: undefined
-                    });
-                }, EXPANDED_LABEL_TIMEOUT);
-            }
-        };
-    }
-
-    /**
-     * Rendes the expanded (explaining) label for the label that was touched.
-     *
-     * @returns {React$Element}
-     */
-    _renderExpandedLabel() {
-        const { visibleExpandedLabel } = this.state;
-
-        if (visibleExpandedLabel) {
-            const expandedLabel = EXPANDED_LABELS[visibleExpandedLabel];
-
-            if (expandedLabel) {
-                const LabelComponent = expandedLabel.component || expandedLabel;
-                const { props } = expandedLabel || {};
-
-                return <LabelComponent { ...props } />;
-            }
-        }
-
-        return null;
-    }
 }
 
 export default Labels;

react/features/conference/components/native/RaisedHandsCountExpandedLabel.js

@@ -0,0 +1,26 @@
+// @flow
+
+import { translate } from '../../../base/i18n';
+import { ExpandedLabel, type Props as AbstractProps } from '../../../base/label';
+
+type Props = AbstractProps & {
+    t: Function
+}
+
+/**
+ * A react {@code Component} that implements an expanded label as tooltip-like
+ * component to explain the meaning of the {@code RaisedHandsCountExpandedLabel}.
+ */
+class RaisedHandsCountExpandedLabel extends ExpandedLabel<Props> {
+
+    /**
+     * Returns the label specific text of this {@code ExpandedLabel}.
+     *
+     * @returns {string}
+     */
+    _getLabel() {
+        return this.props.t('raisedHandsLabel');
+    }
+}
+
+export default translate(RaisedHandsCountExpandedLabel);

react/features/conference/components/native/RaisedHandsCountLabel.js

@@ -0,0 +1,26 @@
+// @flow
+
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { IconRaisedHand } from '../../../base/icons';
+import { Label } from '../../../base/label';
+import BaseTheme from '../../../base/ui/components/BaseTheme';
+
+import styles from './styles';
+
+const RaisedHandsCountLabel = () => {
+    const raisedHandsCount = useSelector(state =>
+        (state['features/base/participants'].raisedHandsQueue || []).length);
+
+    return raisedHandsCount > 0 && (
+        <Label
+            icon = { IconRaisedHand }
+            iconColor = { BaseTheme.palette.uiBackground }
+            style = { styles.raisedHandsCountLabel }
+            text = { raisedHandsCount }
+            textStyle = { styles.raisedHandsCountLabelText } />
+    );
+};
+
+export default RaisedHandsCountLabel;

react/features/conference/components/native/NavigationBar.js → react/features/conference/components/native/TitleBar.js

@@ -7,6 +7,7 @@ import { getConferenceName, getConferenceTimestamp } from '../../../base/confere
 import { getFeatureFlag, CONFERENCE_TIMER_ENABLED, MEETING_NAME_ENABLED } from '../../../base/flags';
 import { connect } from '../../../base/redux';
 import InviteButton from '../../../invite/components/add-people-dialog/native/InviteButton';
+import AudioDeviceToggleButton from '../../../mobile/audio-mode/components/AudioDeviceToggleButton';
 import { PictureInPictureButton } from '../../../mobile/picture-in-picture';
 import { isToolboxVisible } from '../../../toolbox/functions.native';
 import ConferenceTimer from '../ConferenceTimer';
@@ -17,6 +18,12 @@ import styles from './styles';
 
 type Props = {
 
+    /**
+     * Creates a function to be invoked when the onPress of the touchables are
+     * triggered.
+     */
+    _createOnPress: Function,
+
     /**
      * Whether displaying the current conference timer is enabled or not.
      */
@@ -45,23 +52,24 @@ type Props = {
  * @param {Props} props - The React props passed to this component.
  * @returns {React.Node}
  */
-const NavigationBar = (props: Props) => {
-    if (!props._visible) {
-        return null;
-    }
-
-    return (
+const TitleBar = (props: Props) => (<>
+    {props._visible && <View
+        pointerEvents = 'box-none'
+        style = { styles.titleBarWrapper }>
+        <View style = { styles.pipButtonContainer }>
+            <PictureInPictureButton styles = { styles.pipButton } />
+        </View>
         <View
             pointerEvents = 'box-none'
-            style = { styles.navBarWrapper }>
-            <View style = { styles.pipButtonContainer }>
-                <PictureInPictureButton styles = { styles.pipButton } />
-            </View>
-            <View
-                pointerEvents = 'box-none'
-                style = { styles.roomNameWrapper }>
-                {
-                    props._meetingNameEnabled
+            style = { styles.roomNameWrapper }>
+            {
+                props._conferenceTimerEnabled
+                    && <View style = { styles.roomTimerView }>
+                        <ConferenceTimer textStyle = { styles.roomTimer } />
+                    </View>
+            }
+            {
+                props._meetingNameEnabled
                         && <View style = { styles.roomNameView }>
                             <Text
                                 numberOfLines = { 1 }
@@ -69,21 +77,18 @@ const NavigationBar = (props: Props) => {
                                 { props._meetingName }
                             </Text>
                         </View>
-                }
-                {
-                    props._conferenceTimerEnabled
-                            && <View style = { styles.roomTimerView }>
-                                <ConferenceTimer textStyle = { styles.roomTimer } />
-                            </View>
-                }
-                <Labels />
-            </View>
-            <View style = { styles.inviteButtonContainer }>
-                <InviteButton styles = { styles.inviteButton } />
-            </View>
+            }
+            {/* eslint-disable-next-line react/jsx-no-bind */}
+            <Labels createOnPress = { props._createOnPress } />
         </View>
-    );
-};
+        <View style = { styles.titleBarButtonContainer }>
+            <AudioDeviceToggleButton styles = { styles.inviteButton } />
+        </View>
+        <View style = { styles.titleBarButtonContainer }>
+            <InviteButton styles = { styles.inviteButton } />
+        </View>
+    </View>}
+</>);
 
 /**
  * Maps part of the Redux store to the props of this component.
@@ -105,4 +110,4 @@ function _mapStateToProps(state) {
     };
 }
 
-export default connect(_mapStateToProps)(NavigationBar);
+export default connect(_mapStateToProps)(TitleBar);

react/features/conference/components/native/constants.js

@@ -0,0 +1,56 @@
+// @flow
+
+import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
+import { RecordingExpandedLabel } from '../../../recording';
+import { TranscribingExpandedLabel } from '../../../transcribing';
+import { VideoQualityExpandedLabel } from '../../../video-quality';
+
+import InsecureRoomNameExpandedLabel from './InsecureRoomNameExpandedLabel';
+import RaisedHandsCountExpandedLabel from './RaisedHandsCountExpandedLabel';
+
+export const LabelHitSlop = {
+    top: 10,
+    bottom: 10,
+    left: 0,
+    right: 0
+};
+
+/**
+ * Timeout to hide the {@ExpandedLabel}.
+ */
+export const EXPANDED_LABEL_TIMEOUT = 5000;
+
+export const LABEL_ID_QUALITY = 'quality';
+export const LABEL_ID_RECORDING = 'recording';
+export const LABEL_ID_STREAMING = 'streaming';
+export const LABEL_ID_TRANSCRIBING = 'transcribing';
+export const LABEL_ID_INSECURE_ROOM_NAME = 'insecure-room-name';
+export const LABEL_ID_RAISED_HANDS_COUNT = 'raised-hands-count';
+
+/**
+ * The {@code ExpandedLabel} components to be rendered for the individual
+ * {@code Label}s.
+ */
+export const EXPANDED_LABELS = {
+    [LABEL_ID_QUALITY]: VideoQualityExpandedLabel,
+    [LABEL_ID_RECORDING]: {
+        component: RecordingExpandedLabel,
+        props: {
+            mode: JitsiRecordingConstants.mode.FILE
+        },
+        alwaysOn: true
+    },
+    [LABEL_ID_STREAMING]: {
+        component: RecordingExpandedLabel,
+        props: {
+            mode: JitsiRecordingConstants.mode.STREAM
+        },
+        alwaysOn: true
+    },
+    [LABEL_ID_TRANSCRIBING]: TranscribingExpandedLabel,
+    [LABEL_ID_INSECURE_ROOM_NAME]: InsecureRoomNameExpandedLabel,
+    [LABEL_ID_RAISED_HANDS_COUNT]: {
+        component: RaisedHandsCountExpandedLabel,
+        alwaysOn: true
+    }
+};

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

@@ -4,13 +4,13 @@ import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 export const INSECURE_ROOM_NAME_LABEL_COLOR = BaseTheme.palette.actionDanger;
 
-const NAVBAR_BUTTON_SIZE = 24;
+const TITLE_BAR_BUTTON_SIZE = 24;
 
 
 /**
- * The styles of the safe area view that contains the navigation bar.
+ * The styles of the safe area view that contains the title bar.
  */
-const navBarSafeView = {
+const titleBarSafeView = {
     left: 0,
     position: 'absolute',
     right: 0,
@@ -53,14 +53,11 @@ export default {
         flexDirection: 'row'
     },
 
-    inviteButtonContainer: {
+    titleBarButtonContainer: {
         borderRadius: 3,
         height: BaseTheme.spacing[7],
-        position: 'absolute',
         marginTop: BaseTheme.spacing[1],
         marginRight: BaseTheme.spacing[1],
-        top: 0,
-        right: 0,
         zIndex: 1,
         width: BaseTheme.spacing[7]
     },
@@ -69,7 +66,7 @@ export default {
         iconStyle: {
             color: BaseTheme.palette.icon01,
             padding: 12,
-            fontSize: NAVBAR_BUTTON_SIZE
+            fontSize: TITLE_BAR_BUTTON_SIZE
         },
         underlayColor: BaseTheme.spacing.underlay01
     },
@@ -98,36 +95,35 @@ export default {
     },
 
     pipButtonContainer: {
-        borderRadius: 3,
-        height: BaseTheme.spacing[7],
-        position: 'absolute',
-        marginTop: BaseTheme.spacing[1],
-        marginLeft: BaseTheme.spacing[1],
-        top: 0,
-        left: 0,
-        zIndex: 1,
-        width: BaseTheme.spacing[7]
+        '&:not(:empty)': {
+            borderRadius: 3,
+            height: BaseTheme.spacing[7],
+            marginTop: BaseTheme.spacing[1],
+            marginLeft: BaseTheme.spacing[1],
+            zIndex: 1,
+            width: BaseTheme.spacing[7]
+        }
     },
 
     pipButton: {
         iconStyle: {
             color: BaseTheme.palette.icon01,
             padding: 12,
-            fontSize: NAVBAR_BUTTON_SIZE
+            fontSize: TITLE_BAR_BUTTON_SIZE
         },
         underlayColor: BaseTheme.spacing.underlay01
     },
 
-    navBarSafeViewColor: {
-        ...navBarSafeView,
+    titleBarSafeViewColor: {
+        ...titleBarSafeView,
         backgroundColor: BaseTheme.palette.uiBackground
     },
 
-    navBarSafeViewTransparent: {
-        ...navBarSafeView
+    titleBarSafeViewTransparent: {
+        ...titleBarSafeView
     },
 
-    navBarWrapper: {
+    titleBarWrapper: {
         alignItems: 'center',
         flex: 1,
         flexDirection: 'row',
@@ -135,25 +131,42 @@ export default {
         justifyContent: 'center'
     },
 
+    alwaysOnTitleBar: {
+        padding: 4,
+        paddingRight: 0,
+        borderRadius: 6,
+        backgroundColor: 'rgba(0, 0, 0, .5)',
+        marginLeft: BaseTheme.spacing[2],
+        flexDirection: 'row',
+        alignSelf: 'flex-start',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: BaseTheme.spacing[2]
+    },
+
+    expandedLabelWrapper: {
+        zIndex: 1
+    },
+
     roomTimer: {
         color: BaseTheme.palette.text01,
-        fontSize: 12,
-        fontWeight: '400',
-        paddingHorizontal: 8
+        ...BaseTheme.typography.bodyShortBold,
+        paddingHorizontal: 8,
+        paddingVertical: 6,
+        textAlign: 'center'
     },
 
     roomTimerView: {
         backgroundColor: BaseTheme.palette.action02,
         borderRadius: 3,
-        height: 28,
         justifyContent: 'center',
         minWidth: 50
     },
 
     roomName: {
         color: BaseTheme.palette.text01,
-        fontSize: 14,
-        fontWeight: '400'
+        ...BaseTheme.typography.bodyShortBold,
+        paddingVertical: 6
     },
 
     roomNameView: {
@@ -161,15 +174,16 @@ export default {
         borderBottomLeftRadius: 3,
         borderTopLeftRadius: 3,
         flexShrink: 1,
-        height: 28,
         justifyContent: 'center',
-        paddingHorizontal: 10,
-        maxWidth: 168
+        paddingHorizontal: 10
     },
 
     roomNameWrapper: {
         flexDirection: 'row',
-        marginHorizontal: 35
+        marginRight: 10,
+        marginLeft: 8,
+        flexShrink: 1,
+        flexGrow: 1
     },
 
     /**
@@ -189,6 +203,20 @@ export default {
 
     insecureRoomNameLabel: {
         backgroundColor: INSECURE_ROOM_NAME_LABEL_COLOR
+    },
+
+    raisedHandsCountLabel: {
+        backgroundColor: BaseTheme.palette.warning02,
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginLeft: BaseTheme.spacing[0],
+        marginBottom: BaseTheme.spacing[0],
+        marginRight: BaseTheme.spacing[1]
+    },
+
+    raisedHandsCountLabelText: {
+        color: BaseTheme.palette.uiBackground,
+        paddingLeft: BaseTheme.spacing[2]
     }
 };
 

react/features/mobile/audio-mode/components/AudioDeviceToggleButton.js

@@ -0,0 +1,40 @@
+// @flow
+import type { Dispatch } from 'redux';
+
+import { openDialog } from '../../../base/dialog';
+import { translate } from '../../../base/i18n';
+import { IconVolumeEmpty } from '../../../base/icons';
+import { connect } from '../../../base/redux';
+import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
+
+import AudioRoutePickerDialog from './AudioRoutePickerDialog';
+
+type Props = AbstractButtonProps & {
+
+    /**
+     * The Redux dispatch function.
+     */
+    dispatch: Dispatch<any>
+};
+
+/**
+ * Implements an {@link AbstractButton} to open the audio device list.
+ */
+class AudioDeviceToggleButton extends AbstractButton<Props, *> {
+    accessibilityLabel = 'toolbar.accessibilityLabel.audioRoute';
+    icon = IconVolumeEmpty;
+    label = 'toolbar.accessibilityLabel.audioRoute';
+
+    /**
+     * Handles clicking / pressing the button, and opens the appropriate dialog.
+     *
+     * @private
+     * @returns {void}
+     */
+    _handleClick() {
+        this.props.dispatch(openDialog(AudioRoutePickerDialog));
+    }
+}
+
+
+export default translate(connect()(AudioDeviceToggleButton));

react/features/recording/components/native/RecordingExpandedLabel.js

@@ -9,8 +9,6 @@ import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
 import { connect } from '../../../base/redux';
 import { getSessionStatusToShow } from '../../functions';
 
-import { LIVE_LABEL_COLOR, REC_LABEL_COLOR } from './styles';
-
 type Props = AbstractProps & {
 
     /**
@@ -34,21 +32,6 @@ type Props = AbstractProps & {
  * component to explain the meaning of the {@code RecordingLabel}.
  */
 class RecordingExpandedLabel extends ExpandedLabel<Props> {
-    /**
-     * Returns the color this expanded label should be rendered with.
-     *
-     * @returns {string}
-     */
-    _getColor() {
-        switch (this.props.mode) {
-        case JitsiRecordingConstants.mode.STREAM:
-            return LIVE_LABEL_COLOR;
-        case JitsiRecordingConstants.mode.FILE:
-            return REC_LABEL_COLOR;
-        default:
-            return null;
-        }
-    }
 
     /**
      * Returns the label specific text of this {@code ExpandedLabel}.

react/features/recording/components/native/RecordingLabel.js

@@ -26,14 +26,20 @@ class RecordingLabel extends AbstractRecordingLabel {
      * @inheritdoc
      */
     _renderLabel() {
-        let indicatorStyle;
+        let indicatorStyle = styles.indicatorStyle;
 
         switch (this.props.mode) {
         case JitsiRecordingConstants.mode.STREAM:
-            indicatorStyle = styles.indicatorLive;
+            indicatorStyle = {
+                ...indicatorStyle,
+                ...styles.indicatorLive
+            };
             break;
         case JitsiRecordingConstants.mode.FILE:
-            indicatorStyle = styles.indicatorRecording;
+            indicatorStyle = {
+                ...indicatorStyle,
+                ...styles.indicatorRecording
+            };
             break;
         default:
             // Invalid mode is passed to the component.

react/features/recording/components/native/styles.js

@@ -1,15 +1,24 @@
 // @flow
 
 import { ColorPalette, createStyleSheet } from '../../../base/styles';
+import BaseTheme from '../../../base/ui/components/BaseTheme';
 
 export const LIVE_LABEL_COLOR = ColorPalette.blue;
-export const REC_LABEL_COLOR = ColorPalette.red;
 
 /**
  * The styles of the React {@code Components} of the feature recording.
  */
 export default createStyleSheet({
 
+    /**
+     * Style for the recording indicator.
+     */
+    indicatorStyle: {
+        marginRight: 4,
+        marginLeft: 0,
+        marginBottom: 0
+    },
+
     /**
      * Style for the recording indicator.
      */
@@ -21,6 +30,6 @@ export default createStyleSheet({
      * Style for the recording indicator.
      */
     indicatorRecording: {
-        backgroundColor: REC_LABEL_COLOR
+        backgroundColor: BaseTheme.palette.iconError
     }
 });