[RN] Make the audio-video labels touchable

react/features/welcome/components/VideoSwitch.js

@@ -0,0 +1,136 @@
+// @flow
+import React, { Component } from 'react';
+import {
+    Switch,
+    TouchableWithoutFeedback,
+    View
+} from 'react-native';
+import { connect } from 'react-redux';
+
+import { translate } from '../../base/i18n';
+import { updateProfile } from '../../base/profile';
+import { Header, Text } from '../../base/react';
+
+import styles, {
+    SWITCH_THUMB_COLOR,
+    SWITCH_UNDER_COLOR
+} from './styles';
+
+type Props = {
+
+    /**
+     * The Redux dispatch functions.
+     */
+    dispatch: Function,
+
+    /**
+     * The i18n translate function.
+     */
+    t: Function,
+
+    /**
+     * The current profile settings from Redux.
+     */
+    _profile: Object
+};
+
+/**
+ * Renders the audio-video switch on the welcome screen.
+ */
+class VideoSwitch extends Component<Props> {
+    /**
+     * Constructor of the component.
+     *
+     * @inheritdoc
+     */
+    constructor(props) {
+        super(props);
+
+        this._onStartAudioOnlyChange = this._onStartAudioOnlyChange.bind(this);
+    }
+
+    /**
+     * Implements React Component's render.
+     *
+     * @inheritdoc
+     */
+    render() {
+        const { t, _profile } = this.props;
+        const { textStyle } = Header;
+
+        return (
+            <View style = { styles.audioVideoSwitchContainer }>
+                <TouchableWithoutFeedback
+                    onPress = {
+                        this._onStartAudioOnlyChangeFn(false)
+                    } >
+                    <Text style = { textStyle } >
+                        { t('welcomepage.audioVideoSwitch.video') }
+                    </Text>
+                </TouchableWithoutFeedback>
+                <Switch
+                    onTintColor = { SWITCH_UNDER_COLOR }
+                    onValueChange = { this._onStartAudioOnlyChange }
+                    style = { styles.audioVideoSwitch }
+                    thumbTintColor = { SWITCH_THUMB_COLOR }
+                    value = { _profile.startAudioOnly } />
+                <TouchableWithoutFeedback
+                    onPress = {
+                        this._onStartAudioOnlyChangeFn(true)
+                    } >
+                    <Text style = { textStyle } >
+                        { t('welcomepage.audioVideoSwitch.audio') }
+                    </Text>
+                </TouchableWithoutFeedback>
+            </View>
+        );
+    }
+
+    /**
+     * Creates a function that forwards the startAudioOnly changes to the
+     * function that handles it.
+     *
+     * @private
+     * @param {boolean} startAudioOnly - The new startAudioOnly value.
+     * @returns {void}
+     */
+    _onStartAudioOnlyChangeFn(startAudioOnly) {
+        return () => this._onStartAudioOnlyChange(startAudioOnly);
+    }
+
+    _onStartAudioOnlyChange: boolean => void
+
+    /**
+     * Handles the audio-video switch changes.
+     *
+     * @private
+     * @param {boolean} startAudioOnly - The new startAudioOnly value.
+     * @returns {void}
+     */
+    _onStartAudioOnlyChange(startAudioOnly) {
+        const { dispatch } = this.props;
+
+        dispatch(updateProfile({
+            ...this.props._profile,
+            startAudioOnly
+        }));
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the React {@code Component} props of
+ * {@code VideoSwitch}.
+ *
+ * @param {Object} state - The redux state.
+ * @protected
+ * @returns {{
+ *     _profile: Object
+ * }}
+ */
+export function _mapStateToProps(state: Object) {
+    return {
+        _profile: state['features/base/profile']
+    };
+}
+
+export default translate(connect(_mapStateToProps)(VideoSwitch));

react/features/welcome/components/WelcomePage.native.js

@@ -3,7 +3,6 @@ import {
     Animated,
     Keyboard,
     SafeAreaView,
-    Switch,
     TextInput,
     TouchableHighlight,
     TouchableOpacity,
@@ -14,7 +13,6 @@ import { connect } from 'react-redux';
 import { translate } from '../../base/i18n';
 import { Icon } from '../../base/font-icons';
 import { MEDIA_TYPE } from '../../base/media';
-import { updateProfile } from '../../base/profile';
 import { LoadingIndicator, Header, Text } from '../../base/react';
 import { ColorPalette } from '../../base/styles';
 import {
@@ -27,10 +25,9 @@ import { AbstractWelcomePage, _mapStateToProps } from './AbstractWelcomePage';
 import { setSideBarVisible } from '../actions';
 import LocalVideoTrackUnderlay from './LocalVideoTrackUnderlay';
 import styles, {
-    PLACEHOLDER_TEXT_COLOR,
-    SWITCH_THUMB_COLOR,
-    SWITCH_UNDER_COLOR
+    PLACEHOLDER_TEXT_COLOR
 } from './styles';
+import VideoSwitch from './VideoSwitch';
 import WelcomePageLists from './WelcomePageLists';
 import WelcomePageSideBar from './WelcomePageSideBar';
 
@@ -55,7 +52,6 @@ class WelcomePage extends AbstractWelcomePage {
         this._getHintBoxStyle = this._getHintBoxStyle.bind(this);
         this._onFieldFocusChange = this._onFieldFocusChange.bind(this);
         this._onShowSideBar = this._onShowSideBar.bind(this);
-        this._onStartAudioOnlyChange = this._onStartAudioOnlyChange.bind(this);
         this._renderHintBox = this._renderHintBox.bind(this);
     }
 
@@ -87,8 +83,8 @@ class WelcomePage extends AbstractWelcomePage {
      * @returns {ReactElement}
      */
     render() {
-        const { buttonStyle, pageStyle, textStyle } = Header;
-        const { t, _profile } = this.props;
+        const { buttonStyle, pageStyle } = Header;
+        const { t } = this.props;
 
         return (
             <LocalVideoTrackUnderlay style = { styles.welcomePage }>
@@ -99,20 +95,7 @@ class WelcomePage extends AbstractWelcomePage {
                                 name = 'menu'
                                 style = { buttonStyle } />
                         </TouchableOpacity>
-                        <View style = { styles.audioVideoSwitchContainer }>
-                            <Text style = { textStyle } >
-                                { t('welcomepage.audioVideoSwitch.video') }
-                            </Text>
-                            <Switch
-                                onTintColor = { SWITCH_UNDER_COLOR }
-                                onValueChange = { this._onStartAudioOnlyChange }
-                                style = { styles.audioVideoSwitch }
-                                thumbTintColor = { SWITCH_THUMB_COLOR }
-                                value = { _profile.startAudioOnly } />
-                            <Text style = { textStyle } >
-                                { t('welcomepage.audioVideoSwitch.audio') }
-                            </Text>
-                        </View>
+                        <VideoSwitch />
                     </Header>
                     <SafeAreaView style = { styles.roomContainer } >
                         <View style = { styles.joinControls } >
@@ -202,22 +185,6 @@ class WelcomePage extends AbstractWelcomePage {
         this.props.dispatch(setSideBarVisible(true));
     }
 
-    /**
-     * Handles the audio-video switch changes.
-     *
-     * @private
-     * @param {boolean} startAudioOnly - The new startAudioOnly value.
-     * @returns {void}
-     */
-    _onStartAudioOnlyChange(startAudioOnly) {
-        const { dispatch } = this.props;
-
-        dispatch(updateProfile({
-            ...this.props._profile,
-            startAudioOnly
-        }));
-    }
-
     /**
      * Renders the hint box if necessary.
      *