[RN] Add Google Sign In to live streaming

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

@@ -0,0 +1,122 @@
+// @flow
+
+import React, { Component } from 'react';
+import { Text, TouchableHighlight, View } from 'react-native';
+
+import { translate } from '../../../base/i18n';
+
+import styles, { ACTIVE_OPACITY, TOUCHABLE_UNDERLAY } from './styles';
+
+type Props = {
+
+    /**
+     * The list of broadcasts the user can pick from.
+     */
+    broadcasts: ?Array<Object>,
+
+    /**
+     * Callback to be invoked when the user picked a broadcast. To be invoked
+     * with a single key (string).
+     */
+    onChange: Function,
+
+    /**
+     * Function to be used to translate i18n labels.
+     */
+    t: Function
+}
+
+type State = {
+
+     /**
+      * The key of the currently selected stream.
+      */
+     streamKey: ?string
+}
+
+/**
+ * Class to implement a stream key picker (dropdown) component to allow the user
+ * to choose from the available Google Broadcasts/Streams.
+ *
+ * NOTE: This component is currently only used on mobile, but it is advised at
+ * a later point to unify mobile and web logic for this functionality. But it's
+ * out of the scope for now of the mobile live streaming functionality.
+ */
+class StreamKeyPicker extends Component<Props, State> {
+
+    /**
+     * Instantiates a new instance of StreamKeyPicker.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this.state = {
+            streamKey: null
+        };
+
+        this._onStreamPick = this._onStreamPick.bind(this);
+    }
+
+    /**
+     * Renders the component.
+     *
+     * @inheritdoc
+     */
+    render() {
+        const { broadcasts } = this.props;
+
+        if (!broadcasts || !broadcasts.length) {
+            return null;
+        }
+
+        return (
+            <View style = { styles.formWrapper }>
+                <View style = { styles.streamKeyPickerCta }>
+                    <Text>
+                        { this.props.t('liveStreaming.choose') }
+                    </Text>
+                </View>
+                <View style = { styles.streamKeyPickerWrapper } >
+                    { broadcasts.map((broadcast, index) =>
+                        (<TouchableHighlight
+                            activeOpacity = { ACTIVE_OPACITY }
+                            key = { index }
+                            onPress = { this._onStreamPick(broadcast.key) }
+                            style = { [
+                                styles.streamKeyPickerItem,
+                                this.state.streamKey === broadcast.key
+                                    ? styles.streamKeyPickerItemHighlight : null
+                            ] }
+                            underlayColor = { TOUCHABLE_UNDERLAY }>
+                            <Text style = { styles.streamKeyPickerItemText }>
+                                { broadcast.title }
+                            </Text>
+                        </TouchableHighlight>))
+                    }
+                </View>
+            </View>
+        );
+    }
+
+    _onStreamPick: string => Function
+
+    /**
+     * Callback to be invoked when the user picks a stream from the list.
+     *
+     * @private
+     * @param {string} streamKey - The key of the stream selected.
+     * @returns {Function}
+     */
+    _onStreamPick(streamKey) {
+        return () => {
+            this.setState({
+                streamKey
+            });
+            this.props.onChange(streamKey);
+        };
+    }
+}
+
+export default translate(StreamKeyPicker);