From f97f294d1a681927a017eff098da3f9d66f71882 Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.h.kim@gmail.com>
Date: Tue, 17 Jul 2018 10:49:58 -0700
Subject: [PATCH] feat(live-streaming): add beta tag to mobile

---
 .../toolbox/components/ToolboxItem.native.js  |  2 ++
 .../LiveStream/AbstractLiveStreamButton.js    | 23 +++++++++++++++++++
 .../LiveStream/LiveStreamButton.web.js        | 17 --------------
 .../{styles.js => styles.native.js}           | 15 +++++++++++-
 .../components/LiveStream/styles.web.js       |  0
 .../toolbox/components/native/styles.js       |  2 +-
 6 files changed, 40 insertions(+), 19 deletions(-)
 rename react/features/recording/components/LiveStream/{styles.js => styles.native.js} (54%)
 create mode 100644 react/features/recording/components/LiveStream/styles.web.js

diff --git a/react/features/base/toolbox/components/ToolboxItem.native.js b/react/features/base/toolbox/components/ToolboxItem.native.js
index 90bb4213d..63ac012e7 100644
--- a/react/features/base/toolbox/components/ToolboxItem.native.js
+++ b/react/features/base/toolbox/components/ToolboxItem.native.js
@@ -51,6 +51,7 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
     _renderItem() {
         const {
             disabled,
+            elementAfter,
             onClick,
             showLabel,
             styles
@@ -72,6 +73,7 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
                     <Text style = { styles && styles.labelStyle }>
                         { this.label }
                     </Text>
+                    { elementAfter }
                 </View>
             );
 
diff --git a/react/features/recording/components/LiveStream/AbstractLiveStreamButton.js b/react/features/recording/components/LiveStream/AbstractLiveStreamButton.js
index 1ae8306b0..9b43bd814 100644
--- a/react/features/recording/components/LiveStream/AbstractLiveStreamButton.js
+++ b/react/features/recording/components/LiveStream/AbstractLiveStreamButton.js
@@ -1,11 +1,13 @@
 // @flow
 
+import React from 'react';
 import { openDialog } from '../../../base/dialog';
 import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
 import {
     isLocalParticipantModerator,
     getLocalParticipant
 } from '../../../base/participants';
+import { Container, Text } from '../../../base/react';
 import {
     AbstractButton,
     type AbstractButtonProps
@@ -15,6 +17,7 @@ import { getActiveSession } from '../../functions';
 
 import StartLiveStreamDialog from './StartLiveStreamDialog';
 import StopLiveStreamDialog from './StopLiveStreamDialog';
+import styles from './styles';
 
 /**
  * The type of the React {@code Component} props of
@@ -47,6 +50,26 @@ export default class AbstractLiveStreamButton<P: Props>
     label = 'dialog.startLiveStreaming';
     toggledLabel = 'dialog.stopLiveStreaming';
 
+    /**
+     * Helper function to be implemented by subclasses, which returns
+     * a React Element to display (a beta tag) at the end of the button.
+     *
+     * @override
+     * @protected
+     * @returns {ReactElement}
+     */
+    _getElementAfter() {
+        return (
+            <Container
+                className = { 'beta-tag' }
+                style = { styles && { ...styles.betaTag } }>
+                <Text style = { styles && { ...styles.betaTagText } }>
+                    { this.props.t('recording.beta') }
+                </Text>
+            </Container>
+        );
+    }
+
     /**
      * Handles clicking / pressing the button.
      *
diff --git a/react/features/recording/components/LiveStream/LiveStreamButton.web.js b/react/features/recording/components/LiveStream/LiveStreamButton.web.js
index 640c775eb..df508fa22 100644
--- a/react/features/recording/components/LiveStream/LiveStreamButton.web.js
+++ b/react/features/recording/components/LiveStream/LiveStreamButton.web.js
@@ -1,6 +1,5 @@
 // @flow
 
-import React from 'react';
 import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n';
@@ -57,22 +56,6 @@ class LiveStreamButton extends AbstractLiveStreamButton<Props> {
         this.tooltip = newProps._liveStreamDisabledTooltipKey;
     }
 
-    /**
-     * Helper function to be implemented by subclasses, which returns
-     * a React Element to display (a beta tag) at the end of the button.
-     *
-     * @override
-     * @protected
-     * @returns {boolean}
-     */
-    _getElementAfter() {
-        return (
-            <span className = 'beta-tag'>
-                { this.props.t('recording.beta') }
-            </span>
-        );
-    }
-
     /**
      * Helper function to be implemented by subclasses, which must return a
      * boolean value indicating if this button is disabled or not.
diff --git a/react/features/recording/components/LiveStream/styles.js b/react/features/recording/components/LiveStream/styles.native.js
similarity index 54%
rename from react/features/recording/components/LiveStream/styles.js
rename to react/features/recording/components/LiveStream/styles.native.js
index fa08b8f87..a4e15fcf7 100644
--- a/react/features/recording/components/LiveStream/styles.js
+++ b/react/features/recording/components/LiveStream/styles.native.js
@@ -1,11 +1,24 @@
 // @flow
 
-import { BoxModel, createStyleSheet } from '../../../base/styles';
+import { BoxModel, ColorPalette, createStyleSheet } from '../../../base/styles';
 
 /**
  * The styles of the React {@code Components} of LiveStream.
  */
 export default createStyleSheet({
+    betaTag: {
+        backgroundColor: ColorPalette.darkGrey,
+        borderRadius: 2,
+        marginLeft: 16,
+        opacity: 0.90,
+        paddingLeft: 6,
+        paddingRight: 6
+    },
+
+    betaTagText: {
+        color: ColorPalette.white,
+        fontWeight: 'bold'
+    },
 
     streamKeyFormWrapper: {
         flexDirection: 'column',
diff --git a/react/features/recording/components/LiveStream/styles.web.js b/react/features/recording/components/LiveStream/styles.web.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/react/features/toolbox/components/native/styles.js b/react/features/toolbox/components/native/styles.js
index 1b4b17569..baa945f4c 100644
--- a/react/features/toolbox/components/native/styles.js
+++ b/react/features/toolbox/components/native/styles.js
@@ -180,7 +180,7 @@ const overflowMenuStyles = createStyleSheet({
      * {@code OverflowMenu}.
      */
     label: {
-        flex: 1,
+        flexShrink: 1,
         fontSize: 16,
         marginLeft: 32,
         opacity: 0.90