[RN] Add Google Sign In to live streaming

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

@@ -5,20 +5,34 @@ import { View } from 'react-native';
 import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n';
+import { googleApi } from '../../../google-api';
+
 
 import { setLiveStreamKey } from '../../actions';
 
 import AbstractStartLiveStreamDialog, {
-    _mapStateToProps,
-    type Props
+    _mapStateToProps as _abstractMapStateToProps,
+    type Props as AbstractProps
 } from './AbstractStartLiveStreamDialog';
+import GoogleSigninForm from './GoogleSigninForm';
 import StreamKeyForm from './StreamKeyForm';
+import StreamKeyPicker from './StreamKeyPicker';
+import styles from './styles';
+
+type Props = AbstractProps & {
+
+    /**
+     * The ID for the Google client application used for making stream key
+     * related requests on iOS.
+     */
+    _googleApiIOSClientID: string
+};
 
 /**
  * A React Component for requesting a YouTube stream key to use for live
  * streaming of the current conference.
  */
-class StartLiveStreamDialog extends AbstractStartLiveStreamDialog {
+class StartLiveStreamDialog extends AbstractStartLiveStreamDialog<Props> {
     /**
      * Constructor of the component.
      *
@@ -28,27 +42,13 @@ class StartLiveStreamDialog extends AbstractStartLiveStreamDialog {
         super(props);
 
         // Bind event handlers so they are only bound once per instance.
-        this._onInitializeGoogleApi = this._onInitializeGoogleApi.bind(this);
         this._onStreamKeyChangeNative
             = this._onStreamKeyChangeNative.bind(this);
+        this._onStreamKeyPick = this._onStreamKeyPick.bind(this);
+        this._onUserChanged = this._onUserChanged.bind(this);
         this._renderDialogContent = this._renderDialogContent.bind(this);
     }
 
-    _onInitializeGoogleApi: () => Promise<*>
-
-    /**
-     * Loads the Google client application used for fetching stream keys.
-     * If the user is already logged in, then a request for available YouTube
-     * broadcasts is also made.
-     *
-     * @private
-     * @returns {Promise}
-     */
-    _onInitializeGoogleApi() {
-        // This is a placeholder method for the Google feature.
-        return Promise.resolve();
-    }
-
     _onStreamKeyChange: string => void
 
     _onStreamKeyChangeNative: string => void;
@@ -70,6 +70,49 @@ class StartLiveStreamDialog extends AbstractStartLiveStreamDialog {
         this._onStreamKeyChange(streamKey);
     }
 
+    _onStreamKeyPick: string => void
+
+    /**
+     * Callback to be invoked when the user selects a stream from the picker.
+     *
+     * @private
+     * @param {string} streamKey - The key of the selected stream.
+     * @returns {void}
+     */
+    _onStreamKeyPick(streamKey) {
+        this.setState({
+            streamKey
+        });
+    }
+
+    _onUserChanged: Object => void
+
+    /**
+     * A callback to be invoked when an authenticated user changes, so
+     * then we can get (or clear) the YouTube stream key.
+     *
+     * TODO: handle errors by showing some indication to the user.
+     *
+     * @private
+     * @param {Object} response - The retreived signin response.
+     * @returns {void}
+     */
+    _onUserChanged(response) {
+        if (response && response.accessToken) {
+            googleApi.getYouTubeLiveStreams(response.accessToken)
+            .then(broadcasts => {
+                this.setState({
+                    broadcasts
+                });
+            });
+        } else {
+            this.setState({
+                broadcasts: undefined,
+                streamKey: undefined
+            });
+        }
+    }
+
     _renderDialogContent: () => React$Component<*>
 
     /**
@@ -79,14 +122,37 @@ class StartLiveStreamDialog extends AbstractStartLiveStreamDialog {
      */
     _renderDialogContent() {
         return (
-            <View>
+            <View style = { styles.startDialogWrapper }>
+                <GoogleSigninForm
+                    clientId = { this.props._googleApiApplicationClientID }
+                    iOSClientId = { this.props._googleApiIOSClientID }
+                    onUserChanged = { this._onUserChanged } />
+                <StreamKeyPicker
+                    broadcasts = { this.state.broadcasts }
+                    onChange = { this._onStreamKeyPick } />
                 <StreamKeyForm
                     onChange = { this._onStreamKeyChangeNative }
-                    value = { this.props._streamKey } />
+                    value = { this.state.streamKey || this.props._streamKey } />
             </View>
         );
     }
 
 }
 
+/**
+ * Maps part of the Redux state to the component's props.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {{
+ *     _googleApiApplicationClientID: string
+ * }}
+ */
+function _mapStateToProps(state: Object) {
+    return {
+        ..._abstractMapStateToProps(state),
+        _googleApiIOSClientID:
+            state['features/base/config'].googleApiIOSClientID
+    };
+}
+
 export default translate(connect(_mapStateToProps)(StartLiveStreamDialog));