Added settings drawer with persistent settings

1 files changed, 140 insertions, 3 deletions

diff --git a/app/features/conference/components/Conference.js b/app/features/conference/components/Conference.js
index 8683820..f308ef0 100644
--- a/app/features/conference/components/Conference.js
+++ b/app/features/conference/components/Conference.js
@@ -14,21 +14,38 @@ import {
 } from 'jitsi-meet-electron-utils';
 
 import config from '../../config';
+import { setEmail, setName } from '../../settings';
 
 import { Wrapper } from '../styled';
 
 type Props = {
 
     /**
+     * Redux dispatch.
+     */
+    dispatch: Dispatch<*>;
+
+    /**
      * React Router match object.
      * This contains parameters passed through <Route /> component.
      */
     match: Object;
 
     /**
-     * Redux dispatch.
+     * Avatar URL.
      */
-    dispatch: Dispatch<*>;
+    _avatarURL: string;
+
+    /**
+     * Email of user.
+     */
+    _email: string;
+
+    /**
+     * Name of user.
+     */
+    _name: string;
+
 };
 
 /**
@@ -77,6 +94,26 @@ class Conference extends Component<Props, *> {
     }
 
     /**
+     * Keep profile settings in sync with Conference.
+     *
+     * @param {Props} prevProps - Component's prop values before update.
+     * @returns {void}
+     */
+    componentDidUpdate(prevProps) {
+        const { props } = this;
+
+        if (props._avatarURL !== prevProps._avatarURL) {
+            this._setAvatarURL(props._avatarURL);
+        }
+        if (props._email !== prevProps._email) {
+            this._setEmail(props._email);
+        }
+        if (props._name !== prevProps._name) {
+            this._setName(props._name);
+        }
+    }
+
+    /**
      * Remove conference on unmounting.
      *
      * @returns {void}
@@ -131,7 +168,107 @@ class Conference extends Component<Props, *> {
         setupWiFiStats(iframe);
 
         this._api.on('readyToClose', () => this._navigateToHome());
+
+        this._api.on('videoConferenceJoined',
+            (conferenceInfo: Object) =>
+                this._onVideoConferenceJoined(conferenceInfo));
+    }
+
+    /**
+     * Updates redux state's user name from conference.
+     *
+     * @param {Object} params - Returned object from event.
+     * @param {string} id - Local Participant ID.
+     * @returns {void}
+     */
+    _onDisplayNameChange(params: Object, id: string) {
+        if (params.id === id) {
+            this.props.dispatch(setName(params.displayname));
+        }
     }
+
+    /**
+     * Updates redux state's email from conference.
+     *
+     * @param {Object} params - Returned object from event.
+     * @param {string} id - Local Participant ID.
+     * @returns {void}
+     */
+    _onEmailChange(params: Object, id: string) {
+        if (params.id === id) {
+            this.props.dispatch(setEmail(params.email));
+        }
+    }
+
+    /**
+     * Saves conference info on joining it.
+     *
+     * @param {Object} conferenceInfo - Contains information about the current
+     * conference.
+     * @returns {void}
+     */
+    _onVideoConferenceJoined(conferenceInfo: Object) {
+
+        this._setAvatarURL(this.props._avatarURL);
+        this._setEmail(this.props._email);
+        this._setName(this.props._name);
+
+        const { id } = conferenceInfo;
+
+        this._api.on('displayNameChange',
+            (params: Object) => this._onDisplayNameChange(params, id));
+        this._api.on('emailChange',
+            (params: Object) => this._onEmailChange(params, id));
+    }
+
+    /**
+     * Set Avatar URL from settings to conference.
+     *
+     * @param {string} avatarURL - Avatar URL.
+     * @returns {void}
+     */
+    _setAvatarURL(avatarURL: string) {
+        this._api.executeCommand('avatarUrl', avatarURL);
+    }
+
+    /**
+     * Set email from settings to conference.
+     *
+     * @param {string} email - Email of user.
+     * @returns {void}
+     */
+    _setEmail(email: string) {
+        this._api.executeCommand('email', email);
+    }
+
+    /**
+     * Set name from settings to conference.
+     *
+     * @param {string} name - Name of user.
+     * @returns {void}
+     */
+    _setName(name: string) {
+        this._api.executeCommand('displayName', name);
+    }
+
+}
+
+/**
+ * Maps (parts of) the redux state to the React props.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {{
+ *     _avatarURL: string,
+ *     _email: string,
+ *     _name: string
+ * }}
+ */
+function _mapStateToProps(state: Object) {
+    return {
+        _avatarURL: state.settings.avatarURL,
+        _email: state.settings.email,
+        _name: state.settings.name
+    };
 }
 
-export default connect()(Conference);
+export default connect(_mapStateToProps)(Conference);