feat(live-streaming): Add T&C.

lang/main.json

@@ -395,7 +395,9 @@
         "signOut": "Sign out",
         "start": "Start a live stream",
         "streamIdHelp": "What's this?",
-        "unavailableTitle": "Live Streaming unavailable"
+        "unavailableTitle": "Live Streaming unavailable",
+        "youtubeTerms": "YouTube terms of services",
+        "googlePrivacyPolicy": "Google Privacy Policy"
     },
     "localRecording": {
         "clientState": {

react/features/recording/components/LiveStream/constants.js

@@ -1,6 +1,15 @@
+/**
+ * The URL for Google Privacy Policy.
+ */
+export const GOOGLE_PRIVACY_POLICY = 'https://policies.google.com/privacy';
+
 /**
  * The URL that is the main landing page for YouTube live streaming and should
  * have a user's live stream key.
  */
-export const YOUTUBE_LIVE_DASHBOARD_URL
+export const YOUTUBE_LIVE_DASHBOARD_URL = 'https://www.youtube.com/live_dashboard';
-    = 'https://www.youtube.com/live_dashboard';
+
+/**
+ * The URL for YouTube terms and conditions.
+ */
+export const YOUTUBE_TERMS_URL = 'https://www.youtube.com/t/terms';

react/features/recording/components/LiveStream/native/StreamKeyForm.js

@@ -11,6 +11,7 @@ import { StyleType } from '../../../../base/styles';
 import AbstractStreamKeyForm, {
     type Props as AbstractProps
 } from '../AbstractStreamKeyForm';
+import { GOOGLE_PRIVACY_POLICY, YOUTUBE_TERMS_URL } from '../constants';
 
 type Props = AbstractProps & {
 
@@ -38,7 +39,10 @@ class StreamKeyForm extends AbstractStreamKeyForm<Props> {
         super(props);
 
         // Bind event handlers so they are only bound once per instance.
+        this._onOpenGooglePrivacyPolicy = this._onOpenGooglePrivacyPolicy.bind(this);
         this._onOpenHelp = this._onOpenHelp.bind(this);
+        this._onOpenYoutubeTerms = this._onOpenYoutubeTerms.bind(this);
+
     }
 
     /**
@@ -101,12 +105,52 @@ class StreamKeyForm extends AbstractStreamKeyForm<Props> {
                         </TouchableOpacity>
                     </View>
                 </View>
+                <View>
+                    <TouchableOpacity onPress = { this._onOpenYoutubeTerms }>
+                        <Text
+                            style = { [
+                                _dialogStyles.text,
+                                styles.text,
+                                styles.tcText
+                            ] }>
+                            {
+                                t('liveStreaming.youtubeTerms')
+                            }
+                        </Text>
+                    </TouchableOpacity>
+                </View>
+                <View>
+                    <TouchableOpacity onPress = { this._onOpenGooglePrivacyPolicy }>
+                        <Text
+                            style = { [
+                                _dialogStyles.text,
+                                styles.text,
+                                styles.tcText
+                            ] }>
+                            {
+                                t('liveStreaming.googlePrivacyPolicy')
+                            }
+                        </Text>
+                    </TouchableOpacity>
+                </View>
             </View>
         );
     }
 
     _onInputChange: Object => void
 
+    _onOpenGooglePrivacyPolicy: () => void;
+
+    /**
+     * Opens the Google Privacy Policy web page.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onOpenGooglePrivacyPolicy() {
+        Linking.openURL(GOOGLE_PRIVACY_POLICY);
+    }
+
     _onOpenHelp: () => void
 
     /**
@@ -123,6 +167,18 @@ class StreamKeyForm extends AbstractStreamKeyForm<Props> {
             Linking.openURL(helpURL);
         }
     }
+
+    _onOpenYoutubeTerms: () => void;
+
+    /**
+     * Opens the YouTube terms and conditions web page.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onOpenYoutubeTerms() {
+        Linking.openURL(YOUTUBE_TERMS_URL);
+    }
 }
 
 export default translate(connect(_abstractMapStateToProps)(StreamKeyForm));

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

@@ -145,6 +145,13 @@ export default createStyleSheet({
         flexDirection: 'column'
     },
 
+    /**
+     * Terms and Conditions texts.
+     */
+    tcText: {
+        textAlign: 'right'
+    },
+
     text: {
         fontSize: 14,
         textAlign: 'left'

react/features/recording/components/LiveStream/web/StreamKeyForm.js

@@ -8,6 +8,7 @@ import { translate } from '../../../../base/i18n';
 import AbstractStreamKeyForm, {
     type Props
 } from '../AbstractStreamKeyForm';
+import { GOOGLE_PRIVACY_POLICY, YOUTUBE_TERMS_URL } from '../constants';
 
 /**
  * A React Component for entering a key for starting a YouTube live stream.
@@ -53,21 +54,37 @@ class StreamKeyForm extends AbstractStreamKeyForm<Props> {
                     type = 'text'
                     value = { this.props.value } />
                 <div className = 'form-footer'>
-                    {
+                    <div className = 'help-container'>
-                        this.state.showValidationError
+                        {
-                            ? <span className = 'warning-text'>
+                            this.state.showValidationError
-                                { t('liveStreaming.invalidStreamKey') }
+                                ? <span className = 'warning-text'>
-                            </span>
+                                    { t('liveStreaming.invalidStreamKey') }
+                                </span>
+                                : null
+                        }
+                        { this.helpURL
+                            ? <a
+                                className = 'helper-link'
+                                onClick = { this._onOpenHelp }>
+                                { t('liveStreaming.streamIdHelp') }
+                            </a>
                             : null
-                    }
+                        }
-                    { this.helpURL
+                    </div>
-                        ? <a
+                    <a
-                            className = 'helper-link'
+                        className = 'helper-link'
-                            onClick = { this._onOpenHelp }>
+                        href = { YOUTUBE_TERMS_URL }
-                            { t('liveStreaming.streamIdHelp') }
+                        rel = 'noopener noreferrer'
-                        </a>
+                        target = '_blank'>
-                        : null
+                        { t('liveStreaming.youtubeTerms') }
-                    }
+                    </a>
+                    <a
+                        className = 'helper-link'
+                        href = { GOOGLE_PRIVACY_POLICY }
+                        rel = 'noopener noreferrer'
+                        target = '_blank'>
+                        { t('liveStreaming.googlePrivacyPolicy') }
+                    </a>
                 </div>
             </div>
         );