From 5598b8443abaf06c912bcb2fa3ac2df27f745df3 Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.kim@8x8.com>
Date: Tue, 18 Dec 2018 14:29:13 -0800
Subject: [PATCH] fix(live-streaming): show stream key validation in mobile

---
 .../LiveStream/native/StreamKeyForm.js        | 31 +++++++++++++------
 .../components/LiveStream/native/styles.js    | 22 ++++++++++++-
 .../LiveStream/web/StreamKeyForm.js           | 11 ++++---
 3 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/react/features/recording/components/LiveStream/native/StreamKeyForm.js b/react/features/recording/components/LiveStream/native/StreamKeyForm.js
index 094d3aba0..b7ad959ff 100644
--- a/react/features/recording/components/LiveStream/native/StreamKeyForm.js
+++ b/react/features/recording/components/LiveStream/native/StreamKeyForm.js
@@ -52,15 +52,28 @@ class StreamKeyForm extends AbstractStreamKeyForm {
                     placeholderTextColor = { PLACEHOLDER_COLOR }
                     style = { styles.streamKeyInput }
                     value = { this.props.value } />
-                <TouchableOpacity
-                    onPress = { this._onOpenHelp }
-                    style = { styles.streamKeyHelp } >
-                    <Text style = { styles.text }>
-                        {
-                            t('liveStreaming.streamIdHelp')
-                        }
-                    </Text>
-                </TouchableOpacity>
+                <View style = { styles.formFooter }>
+                    {
+                        this.state.showValidationError
+                            ? <View style = { styles.formFooterItem }>
+                                <Text style = { styles.warningText }>
+                                    { t('liveStreaming.invalidStreamKey') }
+                                </Text>
+                            </View>
+                            : null
+                    }
+                    <View style = { styles.formFooterItem }>
+                        <TouchableOpacity
+                            onPress = { this._onOpenHelp }
+                            style = { styles.streamKeyHelp } >
+                            <Text style = { styles.text }>
+                                {
+                                    t('liveStreaming.streamIdHelp')
+                                }
+                            </Text>
+                        </TouchableOpacity>
+                    </View>
+                </View>
             </View>
         );
     }
diff --git a/react/features/recording/components/LiveStream/native/styles.js b/react/features/recording/components/LiveStream/native/styles.js
index c07bb3c63..7a31c1f72 100644
--- a/react/features/recording/components/LiveStream/native/styles.js
+++ b/react/features/recording/components/LiveStream/native/styles.js
@@ -48,6 +48,20 @@ export default createStyleSheet({
         padding: BoxModel.padding
     },
 
+    /**
+     * Wrapper for the last element in the form.
+     */
+    formFooter: {
+        flexDirection: 'row'
+    },
+
+    /**
+     * Wrapper for individual children in the last element of the form.
+     */
+    formFooterItem: {
+        flex: 1
+    },
+
     /**
      * Explaining text on the top of the sign in form.
      */
@@ -133,6 +147,12 @@ export default createStyleSheet({
 
     text: {
         color: ColorPalette.white
-    }
+    },
 
+    /**
+     * A different colored text to indicate information needing attention.
+     */
+    warningText: {
+        color: ColorPalette.Y200
+    }
 });
diff --git a/react/features/recording/components/LiveStream/web/StreamKeyForm.js b/react/features/recording/components/LiveStream/web/StreamKeyForm.js
index d8bb9c279..130e3a9f5 100644
--- a/react/features/recording/components/LiveStream/web/StreamKeyForm.js
+++ b/react/features/recording/components/LiveStream/web/StreamKeyForm.js
@@ -53,11 +53,12 @@ class StreamKeyForm extends AbstractStreamKeyForm {
                     type = 'text'
                     value = { this.props.value } />
                 <div className = 'form-footer'>
-                    { this.state.showValidationError
-                        ? <span className = 'validation-error'>
-                            { t('liveStreaming.invalidStreamKey') }
-                        </span>
-                        : null
+                    {
+                        this.state.showValidationError
+                            ? <span className = 'validation-error'>
+                                { t('liveStreaming.invalidStreamKey') }
+                            </span>
+                            : null
                     }
                     { this.helpURL
                         ? <a