feat(rn,conference) new UI for conference name duration

react/features/conference/components/ConferenceTimer.js

@@ -17,6 +17,11 @@ type Props = {
      */
     _startTimestamp: ?number,
 
+    /**
+     * Style to be applied to the rendered text.
+     */
+    textStyle: ?Object,
+
     /**
      * The redux {@code dispatch} function.
      */
@@ -89,13 +94,13 @@ class ConferenceTimer extends Component<Props, State> {
      */
     render() {
         const { timerValue } = this.state;
-        const { _startTimestamp } = this.props;
+        const { _startTimestamp, textStyle } = this.props;
 
         if (!_startTimestamp) {
             return null;
         }
 
-        return renderConferenceTimer(timerValue);
+        return renderConferenceTimer(timerValue, textStyle);
     }
 
     /**
@@ -107,7 +112,6 @@ class ConferenceTimer extends Component<Props, State> {
      * @returns {void}
      */
     _setStateFromUTC(refValueUTC, currentValueUTC) {
-
         if (!refValueUTC || !currentValueUTC) {
             return;
         }

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

@@ -3,20 +3,19 @@
 import React from 'react';
 import { Text } from 'react-native';
 
-import styles from './styles';
-
 /**
  * Returns native element to be rendered.
  *
  * @param {string} timerValue - String to display as time.
+ * @param {Object} textStyle - Style to be applied to the text.
  *
  * @returns {ReactElement}
  */
-export default function renderConferenceTimer(timerValue: string) {
+export default function renderConferenceTimer(timerValue: string, textStyle: Object) {
     return (
         <Text
-            numberOfLines = { 4 }
-            style = { styles.roomTimer }>
+            numberOfLines = { 1 }
+            style = { textStyle }>
             { timerValue }
         </Text>
     );

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

@@ -57,18 +57,27 @@ const NavigationBar = (props: Props) => {
                 styles = { styles.navBarButton } />
             <View
                 pointerEvents = 'box-none'
-                style = { styles.roomNameWrapper }>
-                {
-                    props._meetingNameEnabled
-                    && <Text
-                        numberOfLines = { 1 }
-                        style = { styles.roomName }>
-                        { props._meetingName }
-                    </Text>
-                }
-                {
-                    props._conferenceTimerEnabled && <ConferenceTimer />
-                }
+                style = { styles.roomNameContainer }>
+                <View
+                    pointerEvents = 'box-none'
+                    style = { styles.roomNameWrapper }>
+                    {
+                        props._meetingNameEnabled
+                        && <View style = { styles.roomNameView }>
+                            <Text
+                                numberOfLines = { 1 }
+                                style = { styles.roomName }>
+                                { props._meetingName }
+                            </Text>
+                        </View>
+                    }
+                    {
+                        props._conferenceTimerEnabled
+                            && <View style = { styles.roomTimerView }>
+                                <ConferenceTimer textStyle = { styles.roomTimer } />
+                            </View>
+                    }
+                </View>
                 <Labels />
             </View>
         </View>

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

@@ -103,18 +103,35 @@ export default {
 
     roomTimer: {
         color: ColorPalette.white,
-        fontSize: 15,
-        opacity: 0.6
+        fontSize: 12,
+        fontWeight: '400'
+    },
+
+    roomTimerView: {
+        backgroundColor: 'rgba(0,0,0,0.8)',
+        borderBottomRightRadius: 3,
+        borderTopRightRadius: 3,
+        height: 28,
+        justifyContent: 'center',
+        paddingHorizontal: 10
     },
 
     roomName: {
         color: ColorPalette.white,
-        fontSize: 17,
+        fontSize: 14,
         fontWeight: '400'
     },
 
-    roomNameWrapper: {
-        flexDirection: 'column',
+    roomNameView: {
+        backgroundColor: 'rgba(0,0,0,0.6)',
+        borderBottomLeftRadius: 3,
+        borderTopLeftRadius: 3,
+        height: 28,
+        justifyContent: 'center',
+        paddingHorizontal: 10
+    },
+
+    roomNameContainer: {
         alignItems: 'center',
         left: 0,
         paddingHorizontal: 48,
@@ -122,6 +139,11 @@ export default {
         right: 0
     },
 
+    roomNameWrapper: {
+        alignItems: 'center',
+        flexDirection: 'row'
+    },
+
     /**
      * The style of the {@link View} which expands over the whole
      * {@link Conference} area and splits it between the {@link Filmstrip} and

react/features/conference/components/web/ConferenceTimerDisplay.js

@@ -1,15 +1,18 @@
 // @flow
 
+/* eslint-disable no-unused-vars */
+
 import React from 'react';
 
 /**
  * Returns web element to be rendered.
  *
  * @param {string} timerValue - String to display as time.
+ * @param {Object} textStyle - Unused on web.
  *
  * @returns {ReactElement}
  */
-export default function renderConferenceTimer(timerValue: string) {
+export default function renderConferenceTimer(timerValue: string, textStyle: Object) {
     return (
         <span className = 'subject-conference-timer' >{ timerValue }</span>
     );