Make web use the redux settings/profile

app.js

 import API from './modules/API';
 import keyboardshortcut from './modules/keyboardshortcut/keyboardshortcut';
 import remoteControl from './modules/remotecontrol/RemoteControl';
-import settings from './modules/settings/Settings';
 import translation from './modules/translation/translation';
 import UI from './modules/UI/UI';
 
 
     keyboardshortcut,
     remoteControl,
-    settings,
     translation,
     UI
 };

conference.js

     sendLocalParticipant,
     setDesktopSharingEnabled
 } from './react/features/base/conference';
-import { updateDeviceList } from './react/features/base/devices';
+import {
+    setAudioOutputDeviceId,
+    updateDeviceList
+} from './react/features/base/devices';
 import {
     isFatalJitsiConnectionError,
     JitsiConferenceErrors,
     participantRoleChanged,
     participantUpdated
 } from './react/features/base/participants';
+import { updateSettings } from './react/features/base/settings';
 import {
     createLocalTracksF,
     isLocalTrackMuted,
                     : 'colibri';
         }
 
-        const nick = APP.settings.getDisplayName();
+        const nick = APP.store.getState()['features/base/settings'].displayName;
 
         if (nick) {
             options.displayName = nick;
                 })
                 .then(() => {
                     logger.log('switched local video device');
-                    APP.settings.setCameraDeviceId(cameraDeviceId, true);
+                    APP.store.dispatch(updateSettings({
+                        cameraDeviceId
+                    }));
                 })
                 .catch(err => {
                     APP.UI.showCameraErrorNotification(err);
                 .then(stream => {
                     this.useAudioStream(stream);
                     logger.log('switched local audio device');
-                    APP.settings.setMicDeviceId(micDeviceId, true);
+                    APP.store.dispatch(updateSettings({
+                        micDeviceId
+                    }));
                 })
                 .catch(err => {
                     APP.UI.showMicErrorNotification(err);
             UIEvents.AUDIO_OUTPUT_DEVICE_CHANGED,
             audioOutputDeviceId => {
                 sendAnalytics(createDeviceChangedEvent('audio', 'output'));
-                APP.settings.setAudioOutputDeviceId(audioOutputDeviceId)
+                setAudioOutputDeviceId(audioOutputDeviceId)
                     .then(() => logger.log('changed audio output device'))
                     .catch(err => {
                         logger.warn('Failed to change audio output device. '
         APP.store.dispatch(conferenceJoined(room));
 
         APP.UI.mucJoined();
-        const displayName = APP.settings.getDisplayName();
+        const displayName
+            = APP.store.getState()['features/base/settings'].displayName;
 
         APP.API.notifyConferenceJoined(
             this.roomName,
                         // storage and settings menu. This is a workaround until
                         // getConstraints() method will be implemented
                         // in browsers.
+                        const { dispatch } = APP.store;
+
                         if (this.localAudio) {
-                            APP.settings.setMicDeviceId(
-                                this.localAudio.getDeviceId(), false);
+                            dispatch(updateSettings({
+                                micDeviceId: this.localAudio.getDeviceId()
+                            }));
                         }
 
                         if (this.localVideo) {
-                            APP.settings.setCameraDeviceId(
-                                this.localVideo.getDeviceId(), false);
+                            dispatch(updateSettings({
+                                cameraDeviceId: this.localVideo.getDeviceId()
+                            }));
                         }
 
                         mediaDeviceHelper.setCurrentMediaDevices(devices);
 
         if (typeof newDevices.audiooutput !== 'undefined') {
             // Just ignore any errors in catch block.
-            promises.push(APP.settings
-                .setAudioOutputDeviceId(newDevices.audiooutput)
+            promises.push(setAudioOutputDeviceId(newDevices.audiooutput)
                 .catch());
         }
 
             email: formattedEmail
         }));
 
-        APP.settings.setEmail(formattedEmail);
+        APP.store.dispatch(updateSettings({
+            email: formattedEmail
+        }));
+
         APP.UI.setUserEmail(localId, formattedEmail);
         sendData(commands.EMAIL, formattedEmail);
     },
             avatarURL: formattedUrl
         }));
 
-        APP.settings.setAvatarUrl(url);
+        APP.store.dispatch(updateSettings({
+            avatarURL: formattedUrl
+        }));
         sendData(commands.AVATAR_URL, url);
     },
 
             name: formattedNickname
         }));
 
-        APP.settings.setDisplayName(formattedNickname);
+        APP.store.dispatch(updateSettings({
+            displayName: formattedNickname
+        }));
+
         APP.API.notifyDisplayNameChanged(id, {
             displayName: formattedNickname,
             formattedDisplayName:

modules/UI/side_pannels/profile/Profile.js

 /* global $, APP */
 import UIUtil from '../../util/UIUtil';
 import UIEvents from '../../../../service/UI/UIEvents';
-import Settings from '../../../settings/Settings';
 
 import {
     createProfilePanelButtonEvent,
     init(emitter) {
         initHTML();
 
+        const settings = APP.store.getState()['features/base/settings'];
+
         /**
          * Updates display name.
          *
         }
 
         $('#setDisplayName')
-            .val(Settings.getDisplayName())
+            .val(settings.displayName)
             .keyup(event => {
                 if (event.keyCode === 13) { // enter
                     updateDisplayName();
         }
 
         $('#setEmail')
-            .val(Settings.getEmail())
+            .val(settings.email)
             .keyup(event => {
                 if (event.keyCode === 13) { // enter
                     updateEmail();

modules/UI/util/UIUtil.js

             .html();
     },
 
-    /**
-     * Unescapes the given text.
-     *
-     * @param {string} safe string which contains escaped html
-     * @returns {string} unescaped html string.
-     */
-    unescapeHtml(safe) {
-        return $('<div />').html(safe)
-            .text();
-    },
-
     imageToGrayScale(canvas) {
         const context = canvas.getContext('2d');
         const imgData = context.getImageData(0, 0, canvas.width, canvas.height);

modules/UI/videolayout/LocalVideo.js

 import {
     getAvatarURLByParticipantId
 } from '../../../react/features/base/participants';
+import { updateSettings } from '../../../react/features/base/settings';
 /* eslint-enable no-unused-vars */
 
 const logger = require('jitsi-meet-logger').getLogger(__filename);
 
     // eslint-disable-next-line eqeqeq
     const isVideo = stream.videoType != 'desktop';
+    const settings = APP.store.getState()['features/base/settings'];
 
     this._enableDisableContextMenu(isVideo);
-    this.setFlipX(isVideo ? APP.settings.getLocalFlipX() : false);
+    this.setFlipX(isVideo ? settings.localFlipX : false);
 
     const endedHandler = () => {
 
             flip: {
                 name: 'Flip',
                 callback: () => {
-                    const val = !APP.settings.getLocalFlipX();
+                    const { store } = APP;
+                    const val = !store.getState()['features/base/settings']
+                    .localFlipX;
 
                     this.setFlipX(val);
-                    APP.settings.setLocalFlipX(val);
+                    store.dispatch(updateSettings({
+                        localFlipX: val
+                    }));
                 }
             }
         },

modules/devices/mediaDeviceHelper.js

 /* global APP, JitsiMeetJS */
 
+import { getAudioOutputDeviceId } from '../../react/features/base/devices';
+
 let currentAudioInputDevices,
     currentAudioOutputDevices,
     currentVideoInputDevices;
         return;
     }
 
-    const selectedAudioOutputDeviceId = APP.settings.getAudioOutputDeviceId();
+    const selectedAudioOutputDeviceId = getAudioOutputDeviceId();
     const availableAudioOutputDevices = newDevices.filter(
         d => d.kind === 'audiooutput');
 
 function getNewAudioInputDevice(newDevices, localAudio) {
     const availableAudioInputDevices = newDevices.filter(
         d => d.kind === 'audioinput');
-    const selectedAudioInputDeviceId = APP.settings.getMicDeviceId();
+    const settings = APP.store.getState()['features/base/settings'];
+    const selectedAudioInputDeviceId = settings.micDeviceId;
     const selectedAudioInputDevice = availableAudioInputDevices.find(
         d => d.deviceId === selectedAudioInputDeviceId);
 
 function getNewVideoInputDevice(newDevices, localVideo) {
     const availableVideoInputDevices = newDevices.filter(
         d => d.kind === 'videoinput');
-    const selectedVideoInputDeviceId = APP.settings.getCameraDeviceId();
+    const settings = APP.store.getState()['features/base/settings'];
+    const selectedVideoInputDeviceId = settings.cameraDeviceId;
     const selectedVideoInputDevice = availableVideoInputDevices.find(
         d => d.deviceId === selectedVideoInputDeviceId);
 

modules/settings/Settings.js

-/* global JitsiMeetJS */
-const logger = require('jitsi-meet-logger').getLogger(__filename);
-
-import UIUtil from '../UI/util/UIUtil';
-import jitsiLocalStorage from '../util/JitsiLocalStorage';
-import { randomHexString } from '../../react/features/base/util';
-
-let avatarUrl = '';
-
-let email = UIUtil.unescapeHtml(jitsiLocalStorage.getItem('email') || '');
-let avatarId = UIUtil.unescapeHtml(jitsiLocalStorage.getItem('avatarId') || '');
-
-if (!avatarId) {
-    // if there is no avatar id, we generate a unique one and use it forever
-    avatarId = randomHexString(32);
-    jitsiLocalStorage.setItem('avatarId', avatarId);
-}
-
-let localFlipX = JSON.parse(jitsiLocalStorage.getItem('localFlipX') || true);
-let displayName = UIUtil.unescapeHtml(
-    jitsiLocalStorage.getItem('displayname') || '');
-let cameraDeviceId = jitsiLocalStorage.getItem('cameraDeviceId') || '';
-let micDeviceId = jitsiLocalStorage.getItem('micDeviceId') || '';
-
-// Currently audio output device change is supported only in Chrome and
-// default output always has 'default' device ID
-const audioOutputDeviceId = jitsiLocalStorage.getItem('audioOutputDeviceId')
-    || 'default';
-
-if (audioOutputDeviceId
-    !== JitsiMeetJS.mediaDevices.getAudioOutputDevice()) {
-    JitsiMeetJS.mediaDevices.setAudioOutputDevice(audioOutputDeviceId)
-        .catch(ex => {
-            logger.warn('Failed to set audio output device from local '
-                + 'storage. Default audio output device will be used'
-                + 'instead.', ex);
-        });
-}
-
-export default {
-
-    /**
-     * Sets the local user display name and saves it to local storage
-     *
-     * @param {string} newDisplayName unescaped display name for the local user
-     * @param {boolean} disableLocalStore disables local store the display name
-     */
-    setDisplayName(newDisplayName, disableLocalStore) {
-        displayName = newDisplayName;
-
-        if (!disableLocalStore) {
-            jitsiLocalStorage.setItem('displayname',
-                UIUtil.escapeHtml(displayName));
-        }
-    },
-
-    /**
-     * Returns the escaped display name currently used by the user
-     * @returns {string} currently valid user display name.
-     */
-    getDisplayName() {
-        return displayName;
-    },
-
-    /**
-     * Sets new email for local user and saves it to the local storage.
-     * @param {string} newEmail new email for the local user
-     * @param {boolean} disableLocalStore disables local store the email
-     */
-    setEmail(newEmail, disableLocalStore) {
-        email = newEmail;
-
-        if (!disableLocalStore) {
-            jitsiLocalStorage.setItem('email', UIUtil.escapeHtml(newEmail));
-        }
-    },
-
-    /**
-     * Returns email address of the local user.
-     * @returns {string} email
-     */
-    getEmail() {
-        return email;
-    },
-
-    /**
-     * Returns avatar id of the local user.
-     * @returns {string} avatar id
-     */
-    getAvatarId() {
-        return avatarId;
-    },
-
-    /**
-     * Sets new avatarUrl for local user and saves it to the local storage.
-     * @param {string} newAvatarUrl new avatarUrl for the local user
-     */
-    setAvatarUrl(newAvatarUrl) {
-        avatarUrl = newAvatarUrl;
-    },
-
-    /**
-     * Returns avatarUrl address of the local user.
-     * @returns {string} avatarUrl
-     */
-    getAvatarUrl() {
-        return avatarUrl;
-    },
-
-    /**
-     * Sets new flipX state of local video and saves it to the local storage.
-     * @param {string} val flipX state of local video
-     */
-    setLocalFlipX(val) {
-        localFlipX = val;
-        jitsiLocalStorage.setItem('localFlipX', val);
-    },
-
-    /**
-     * Returns flipX state of local video.
-     * @returns {string} flipX
-     */
-    getLocalFlipX() {
-        return localFlipX;
-    },
-
-    /**
-     * Get device id of the camera which is currently in use.
-     * Empty string stands for default device.
-     * @returns {String}
-     */
-    getCameraDeviceId() {
-        return cameraDeviceId;
-    },
-
-    /**
-     * Set device id of the camera which is currently in use.
-     * Empty string stands for default device.
-     * @param {string} newId new camera device id
-     * @param {boolean} whether we need to store the value
-     */
-    setCameraDeviceId(newId, store) {
-        cameraDeviceId = newId;
-        if (store) {
-            jitsiLocalStorage.setItem('cameraDeviceId', newId);
-        }
-    },
-
-    /**
-     * Get device id of the microphone which is currently in use.
-     * Empty string stands for default device.
-     * @returns {String}
-     */
-    getMicDeviceId() {
-        return micDeviceId;
-    },
-
-    /**
-     * Set device id of the microphone which is currently in use.
-     * Empty string stands for default device.
-     * @param {string} newId new microphone device id
-     * @param {boolean} whether we need to store the value
-     */
-    setMicDeviceId(newId, store) {
-        micDeviceId = newId;
-        if (store) {
-            jitsiLocalStorage.setItem('micDeviceId', newId);
-        }
-    },
-
-    /**
-     * Get device id of the audio output device which is currently in use.
-     * Empty string stands for default device.
-     * @returns {String}
-     */
-    getAudioOutputDeviceId() {
-        return JitsiMeetJS.mediaDevices.getAudioOutputDevice();
-    },
-
-    /**
-     * Set device id of the audio output device which is currently in use.
-     * Empty string stands for default device.
-     * @param {string} newId='default' - new audio output device id
-     * @returns {Promise}
-     */
-    setAudioOutputDeviceId(newId = 'default') {
-        return JitsiMeetJS.mediaDevices.setAudioOutputDevice(newId)
-            .then(() =>
-                jitsiLocalStorage.setItem('audioOutputDeviceId', newId));
-    }
-};

react/features/app/components/AbstractApp.js

     localParticipantJoined,
     localParticipantLeft
 } from '../../base/participants';
-import '../../base/profile';
 import { Fragment, RouteRegistry } from '../../base/react';
 import { MiddlewareRegistry, ReducerRegistry } from '../../base/redux';
 import { SoundCollection } from '../../base/sounds';
 /**
  * The default URL to open if no other was specified to {@code AbstractApp}
  * via props.
+ *
+ * FIXME: This is not at the best place here. This should be either in the
+ * base/settings feature or a default in base/config.
  */
 const DEFAULT_URL = 'https://meet.jit.si';
 
             // actions is important, not the call site. Moreover, we've got
             // localParticipant business logic in the React Component
             // (i.e. UI) AbstractApp now.
-            let localParticipant = {};
-
-            if (typeof APP === 'object') {
-                localParticipant = {
-                    avatarID: APP.settings.getAvatarId(),
-                    avatarURL: APP.settings.getAvatarUrl(),
-                    email: APP.settings.getEmail(),
-                    name: APP.settings.getDisplayName()
-                };
-            }
 
-            // Profile is the new React compatible settings.
-            const profile = getState()['features/base/profile'];
-
-            if (profile) {
-                localParticipant.email
-                    = profile.email || localParticipant.email;
-                localParticipant.name
-                    = profile.displayName || localParticipant.name;
-            }
+            const settings = getState()['features/base/settings'];
+            const localParticipant = {
+                avatarID: settings.avatarID,
+                avatarURL: settings.avatarURL,
+                email: settings.email,
+                name: settings.displayName
+            };
 
             // We set the initialized state here and not in the contructor to
             // make sure that {@code componentWillMount} gets invoked before
 
         return (
             this.props.defaultURL
-                || this._getStore().getState()['features/base/profile']
-                    .serverURL
+                || this._getStore().getState()['features/base/settings']
+                .serverURL
                 || DEFAULT_URL);
     }
 

react/features/base/devices/functions.js

+// @flow
+
+import JitsiMeetJS from '../lib-jitsi-meet';
+import { updateSettings } from '../settings';
+
+/**
+ * Get device id of the audio output device which is currently in use.
+ * Empty string stands for default device.
+ *
+ * @returns {string}
+ */
+export function getAudioOutputDeviceId() {
+    return JitsiMeetJS.mediaDevices.getAudioOutputDevice();
+}
+
+/**
+ * Set device id of the audio output device which is currently in use.
+ * Empty string stands for default device.
+ *
+ * @param {string} newId - New audio output device id.
+ * @param {Function} dispatch - The Redux dispatch function.
+ * @returns {Promise}
+ */
+export function setAudioOutputDeviceId(
+        newId: string = 'default',
+        dispatch: Function): Promise<*> {
+    return JitsiMeetJS.mediaDevices.setAudioOutputDevice(newId)
+        .then(() =>
+            dispatch(updateSettings({
+                audioOutputDeviceId: newId
+            })));
+}

react/features/base/devices/index.js

 export * from './actions';
 export * from './actionTypes';
+export * from './functions';
 
 import './middleware';
 import './reducer';

react/features/base/media/middleware.js

 } from '../../analytics';
 import { isRoomValid, SET_ROOM, setAudioOnly } from '../conference';
 import JitsiMeetJS from '../lib-jitsi-meet';
-import { getPropertyValue } from '../profile';
 import { MiddlewareRegistry } from '../redux';
+import { getPropertyValue } from '../settings';
 import { setTrackMuted, TRACK_ADDED } from '../tracks';
 
 import { setAudioMuted, setCameraFacingMode, setVideoMuted } from './actions';
     const mutedSources = {
         // We have startWithAudioMuted and startWithVideoMuted here:
         config: true,
-        profile: true,
+        settings: true,
 
         // XXX We've already overwritten base/config with urlParams. However,
-        // profile is more important than the server-side config. Consequently,
-        // we need to read from urlParams anyway:
+        // settings are more important than the server-side config.
+        // Consequently, we need to read from urlParams anyway:
         urlParams: true,
 
         // We don't have startWithAudioMuted and startWithVideoMuted here:
                         config: roomIsValid,
 
                         // XXX We've already overwritten base/config with
-                        // urlParams if roomIsValid. However, profile is more
+                        // urlParams if roomIsValid. However, settings are more
                         // important than the server-side config. Consequently,
                         // we need to read from urlParams anyway. We also
                         // probably want to read from urlParams when
                         // The following don't have complications around whether
                         // they are defined or not:
                         jwt: false,
-                        profile: true
+                        settings: true
                     }));
     } else {
         // Default to audio-only if the (execution) environment does not

react/features/base/profile/actionTypes.js

-/**
- * Create an action for when the local profile is updated.
- *
- * {
- *     type: PROFILE_UPDATED,
- *     profile: {
- *         displayName: string,
- *         defaultURL: URL,
- *         email: string,
- *         startWithAudioMuted: boolean,
- *         startWithVideoMuted: boolean
- *     }
- * }
- */
-export const PROFILE_UPDATED = Symbol('PROFILE_UPDATED');

react/features/base/profile/actions.js

-import { PROFILE_UPDATED } from './actionTypes';
-
-/**
- * Create an action for when the local profile is updated.
- *
- * @param {Object} profile - The new profile data.
- * @returns {{
- *     type: UPDATE_PROFILE,
- *     profile: {
- *         displayName: string,
- *         defaultURL: URL,
- *         email: string,
- *         startWithAudioMuted: boolean,
- *         startWithVideoMuted: boolean
- *     }
- * }}
- */
-export function updateProfile(profile) {
-    return {
-        type: PROFILE_UPDATED,
-        profile
-    };
-}

react/features/base/profile/reducer.js

-// @flow
-
-import { APP_WILL_MOUNT } from '../../app';
-import { ReducerRegistry } from '../redux';
-import { PersistenceRegistry } from '../storage';
-
-import { PROFILE_UPDATED } from './actionTypes';
-
-/**
- * The default/initial redux state of the feature {@code base/profile}.
- *
- * @type Object
- */
-const DEFAULT_STATE = {};
-
-const STORE_NAME = 'features/base/profile';
-
-/**
- * Sets up the persistence of the feature {@code base/profile}.
- */
-PersistenceRegistry.register(STORE_NAME);
-
-ReducerRegistry.register(STORE_NAME, (state = DEFAULT_STATE, action) => {
-    switch (action.type) {
-    case APP_WILL_MOUNT:
-        // XXX APP_WILL_MOUNT is the earliest redux action of ours dispatched in
-        // the store. For the purposes of legacy support, make sure that the
-        // deserialized base/profile's state is in the format deemed current by
-        // the current app revision.
-        if (state && typeof state === 'object') {
-            // In an enterprise/internal build of Jitsi Meet for Android and iOS
-            // we had base/profile's state as an object with property profile.
-            const { profile } = state;
-
-            if (profile && typeof profile === 'object') {
-                return { ...profile };
-            }
-        } else {
-            // In the weird case that we have previously persisted/serialized
-            // null.
-            return DEFAULT_STATE;
-        }
-        break;
-
-    case PROFILE_UPDATED:
-        return {
-            ...state,
-            ...action.profile
-        };
-    }
-
-    return state;
-});

react/features/base/settings/actionTypes.js

+/**
+ * Create an action for when the settings are updated.
+ *
+ * {
+ *     type: SETTINGS_UPDATED,
+ *     settings: {
+ *         audioOutputDeviceId: string,
+ *         avatarID: string,
+ *         avatarURL: string,
+ *         cameraDeviceId: string,
+ *         displayName: string,
+ *         email: string,
+ *         localFlipX: boolean,
+ *         micDeviceId: string,
+ *         serverURL: string,
+ *         startAudioOnly: boolean,
+ *         startWithAudioMuted: boolean,
+ *         startWithVideoMuted: boolean
+ *     }
+ * }
+ */
+export const SETTINGS_UPDATED = Symbol('SETTINGS_UPDATED');

react/features/base/settings/actions.js

+import { SETTINGS_UPDATED } from './actionTypes';
+
+/**
+ * Create an action for when the settings are updated.
+ *
+ * @param {Object} settings - The new (partial) settings properties.
+ * @returns {{
+ *     type: SETTINGS_UPDATED,
+ *     settings: {
+ *         audioOutputDeviceId: string,
+ *         avatarID: string,
+ *         avatarURL: string,
+ *         cameraDeviceId: string,
+ *         displayName: string,
+ *         email: string,
+ *         localFlipX: boolean,
+ *         micDeviceId: string,
+ *         serverURL: string,
+ *         startAudioOnly: boolean,
+ *         startWithAudioMuted: boolean,
+ *         startWithVideoMuted: boolean
+ *     }
+ * }}
+ */
+export function updateSettings(settings) {
+    return {
+        type: SETTINGS_UPDATED,
+        settings
+    };
+}

react/features/base/profile/functions.js → react/features/base/settings/functions.js

 import { parseURLParams } from '../config';
 import { toState } from '../redux';
 
+
 /**
  * Returns the effective value of a configuration/preference/setting by applying
- * a precedence among the values specified by JWT, URL, profile, and config.
+ * a precedence among the values specified by JWT, URL, settings,
+ * and config.
  *
  * @param {Object|Function} stateful - The redux state object or
  * {@code getState} function.
  * @param {{
  *     config: boolean,
  *     jwt: boolean,
- *     profile: boolean,
+ *     settings: boolean,
  *     urlParams: boolean
  * }} [sources] - A set/structure of {@code boolean} flags indicating the
  * configuration/preference/setting sources to consider/retrieve values from.
         // Defaults:
         config: true,
         jwt: true,
-        profile: true,
+        settings: true,
         urlParams: true,
 
         ...sources
     };
 
-    // Precedence: jwt -> urlParams -> profile -> config.
+    // Precedence: jwt -> urlParams -> settings -> config.
 
     const state = toState(stateful);
 
         }
     }
 
-    // profile
-    if (sources.profile) {
-        const value = state['features/base/profile'][propertyName];
+    // settings
+    if (sources.settings) {
+        const value = state['features/base/settings'][propertyName];
 
         if (typeof value !== 'undefined') {
             return value;

react/features/base/profile/middleware.js → react/features/base/settings/middleware.js

 import { getLocalParticipant, participantUpdated } from '../participants';
 import { MiddlewareRegistry, toState } from '../redux';
 
-import { PROFILE_UPDATED } from './actionTypes';
+import { SETTINGS_UPDATED } from './actionTypes';
+import { getSettings } from './functions';
 
 /**
- * The middleware of the feature base/profile. Distributes changes to the state
- * of base/profile to the states of other features computed from the state of
- * base/profile.
+ * The middleware of the feature base/settings. Distributes changes to the state
+ * of base/settings to the states of other features computed from the state of
+ * base/settings.
  *
  * @param {Store} store - The redux store.
  * @returns {Function}
     const result = next(action);
 
     switch (action.type) {
-    case PROFILE_UPDATED:
-        _updateLocalParticipant(store);
+    case SETTINGS_UPDATED:
         _maybeSetAudioOnly(store, action);
+        _updateLocalParticipant(store);
     }
 
     return result;
 });
 
 /**
- * Updates {@code startAudioOnly} flag if it's updated in the profile.
+ * Updates {@code startAudioOnly} flag if it's updated in the settings.
  *
  * @param {Store} store - The redux store.
  * @param {Object} action - The redux action.
  */
 function _maybeSetAudioOnly(
         { dispatch },
-        { profile: { startAudioOnly } }) {
+        { settings: { startAudioOnly } }) {
     if (typeof startAudioOnly === 'boolean') {
         dispatch(setAudioOnly(startAudioOnly));
     }
 }
 
 /**
- * Updates the local participant according to profile changes.
+ * Updates the local participant according to settings changes.
  *
  * @param {Store} store - The redux store.
  * @private
 function _updateLocalParticipant(store) {
     const state = toState(store);
     const localParticipant = getLocalParticipant(state);
-    const profile = state['features/base/profile'];
+    const settings = getSettings(state);
 
     store.dispatch(participantUpdated({
         // Identify that the participant to update i.e. the local participant:
         local: true,
 
         // Specify the updates to be applied to the identified participant:
-        email: profile.email,
-        name: profile.displayName
+        email: settings.email,
+        name: settings.displayName
     }));
 }

react/features/base/settings/reducer.js

+// @flow
+import _ from 'lodash';
+
+import { APP_WILL_MOUNT } from '../../app';
+
+import JitsiMeetJS, { browser } from '../lib-jitsi-meet';
+import { ReducerRegistry } from '../redux';
+import { PersistenceRegistry } from '../storage';
+import { assignIfDefined, randomHexString } from '../util';
+
+import { SETTINGS_UPDATED } from './actionTypes';
+
+const logger = require('jitsi-meet-logger').getLogger(__filename);
+
+/**
+ * The default/initial redux state of the feature {@code base/settings}.
+ *
+ * @type Object
+ */
+const DEFAULT_STATE = {
+    audioOutputDeviceId: undefined,
+    avatarID: undefined,
+    avatarURL: undefined,
+    cameraDeviceId: undefined,
+    displayName: undefined,
+    email: undefined,
+    localFlipX: true,
+    micDeviceId: undefined,
+    serverURL: undefined,
+    startAudioOnly: false,
+    startWithAudioMuted: false,
+    startWithVideoMuted: false
+};
+
+const STORE_NAME = 'features/base/settings';
+
+/**
+ * Sets up the persistence of the feature {@code base/settings}.
+ */
+PersistenceRegistry.register(STORE_NAME);
+
+ReducerRegistry.register(STORE_NAME, (state = DEFAULT_STATE, action) => {
+    switch (action.type) {
+    case APP_WILL_MOUNT:
+        return _initSettings(state);
+
+    case SETTINGS_UPDATED:
+        return {
+            ...state,
+            ...action.settings
+        };
+    }
+
+    return state;
+});
+
+/**
+ * Retrieves the legacy profile values regardless of it's being in pre or
+ * post-flattening format.
+ *
+ * FIXME: Let's remove this after a predefined time (e.g. by July 2018) to avoid
+ * garbage in the source.
+ *
+ * @private
+ * @returns {Object}
+ */
+function _getLegacyProfile() {
+    let persistedProfile
+        = window.localStorage.getItem('features/base/profile');
+
+    if (persistedProfile) {
+        try {
+            persistedProfile = JSON.parse(persistedProfile);
+
+            if (persistedProfile && typeof persistedProfile === 'object') {
+                const preFlattenedProfile = persistedProfile.profile;
+
+                return preFlattenedProfile || persistedProfile;
+            }
+        } catch (e) {
+            logger.warn('Error parsing persisted legacy profile', e);
+        }
+    }
+
+    return {};
+}
+
+/**
+ * Inits the settings object based on what information we have available.
+ * Info taken into consideration:
+ *   - Old Settings.js style data
+ *   - Things that we stored in profile earlier but belong here.
+ *
+ * @private
+ * @param {Object} featureState - The current state of the feature.
+ * @returns {Object}
+ */
+function _initSettings(featureState) {
+    let settings = featureState;
+
+    // Old Settings.js values
+    // FIXME: Let's remove this after a predefined time (e.g. by July 2018) to
+    // avoid garbage in the source.
+    const displayName = _.escape(window.localStorage.getItem('displayname'));
+    const email = _.escape(window.localStorage.getItem('email'));
+    let avatarID = _.escape(window.localStorage.getItem('avatarId'));
+
+    if (!avatarID) {
+        // if there is no avatar id, we generate a unique one and use it forever
+        avatarID = randomHexString(32);
+    }
+
+    settings = assignIfDefined({
+        avatarID,
+        displayName,
+        email
+    }, settings);
+
+    if (!browser.isReactNative()) {
+        // Browser only
+        const localFlipX
+            = JSON.parse(window.localStorage.getItem('localFlipX') || 'true');
+        const cameraDeviceId
+            = window.localStorage.getItem('cameraDeviceId') || '';
+        const micDeviceId = window.localStorage.getItem('micDeviceId') || '';
+
+        // Currently audio output device change is supported only in Chrome and
+        // default output always has 'default' device ID
+        const audioOutputDeviceId
+            = window.localStorage.getItem('audioOutputDeviceId') || 'default';
+
+        if (audioOutputDeviceId
+            !== JitsiMeetJS.mediaDevices.getAudioOutputDevice()) {
+            JitsiMeetJS.mediaDevices.setAudioOutputDevice(
+                audioOutputDeviceId
+            ).catch(ex => {
+                logger.warn('Failed to set audio output device from local '
+                    + 'storage. Default audio output device will be used'
+                    + 'instead.', ex);
+            });
+        }
+
+        settings = assignIfDefined({
+            audioOutputDeviceId,
+            cameraDeviceId,
+            localFlipX,
+            micDeviceId
+        }, settings);
+    }
+
+    // Things we stored in profile earlier
+    const legacyProfile = _getLegacyProfile();
+
+    settings = assignIfDefined(legacyProfile, settings);
+
+    return settings;
+}

react/features/base/storage/README.md

 Usage
 =====
 If a subtree of the redux store should be persisted (e.g.
-`'features/base/profile'`), then persistence for that subtree should be
+`'features/base/settings'`), then persistence for that subtree should be
 requested by registering the subtree with `PersistenceRegistry`.
 
-For example, to register the field `profile` of the redux subtree
-`'features/base/profile'` to be persisted, use:
+For example, to register the field `displayName` of the redux subtree
+`'features/base/settings'` to be persisted, use:
 ```javascript
-PersistenceRegistry.register('features/base/profile', {
-    profile: true
+PersistenceRegistry.register('features/base/settings', {
+    displayName: true
 });
 ```
 
-in the `reducer.js` of the `base/profile` feature.
+in the `reducer.js` of the `base/settings` feature.
+
+If the second parameter is omitted, the entire feature state is persisted.
 
 When it's done, Jitsi Meet will automatically persist these subtrees and
 rehydrate them on startup.
 ```
 react/features/base/storage/middleware.js#PERSIST_STATE_DELAY
 ```
+
+Serialization
+=============
+The API JSON.stringify() is currently used to serialize feature states,
+therefore its limitations affect the persistency feature too. E.g. complex
+objects, such as Maps (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
+or Sets (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
+cannot be automatically persisted at the moment. The same applies to Functions
+(which is not a good practice to store in Redux anyhow).

react/features/base/tracks/functions.js

     if (typeof APP !== 'undefined') {
         // TODO The app's settings should go in the redux store and then the
         // reliance on the global variable APP will go away.
+        store || (store = APP.store); // eslint-disable-line no-param-reassign
+
+        const settings = store.getState()['features/base/settings'];
+
         if (typeof cameraDeviceId === 'undefined' || cameraDeviceId === null) {
-            cameraDeviceId = APP.settings.getCameraDeviceId();
+            cameraDeviceId = settings.cameraDeviceId;
         }
         if (typeof micDeviceId === 'undefined' || micDeviceId === null) {
-            micDeviceId = APP.settings.getMicDeviceId();
+            micDeviceId = settings.micDeviceId;
         }
-
-        store || (store = APP.store); // eslint-disable-line no-param-reassign
     }
 
     const {

react/features/base/util/helpers.js

 
     return window.JitsiMeetJS.app;
 }
+
+/**
+ * A helper function that behaves similar to Object.assign, but only reassigns a
+ * property in target if it's defined in source.
+ *
+ * @param {Object} target - The target object to assign the values into.
+ * @param {Object} source - The source object.
+ * @returns {Object}
+ */
+export function assignIfDefined(target: Object, source: Object) {
+    const to = Object(target);
+
+    for (const nextKey in source) {
+        if (source.hasOwnProperty(nextKey)) {
+            const value = source[nextKey];
+
+            if (typeof value !== 'undefined') {
+                to[nextKey] = value;
+            }
+        }
+    }
+
+    return to;
+}

react/features/device-selection/actions.js

 /* globals APP, interfaceConfig */
 
-import { openDialog } from '../base/dialog';
-import JitsiMeetJS from '../base/lib-jitsi-meet';
 import { API_ID } from '../../../modules/API/constants';
 import {
+    PostMessageTransportBackend,
+    Transport
+} from '../../../modules/transport';
+
+import {
+    getAudioOutputDeviceId,
     setAudioInputDevice,
     setAudioOutputDevice,
     setVideoInputDevice
 } from '../base/devices';
+import { openDialog } from '../base/dialog';
 import { i18next } from '../base/i18n';
-import {
-    PostMessageTransportBackend,
-    Transport
-} from '../../../modules/transport';
+import JitsiMeetJS from '../base/lib-jitsi-meet';
 
 import { SET_DEVICE_SELECTION_POPUP_DATA } from './actionTypes';
 import { DeviceSelectionDialog } from './components';
     return dispatch =>
         JitsiMeetJS.mediaDevices.isDeviceListAvailable()
             .then(isDeviceListAvailable => {
+                const settings = APP.store.getState()['features/base/settings'];
+
                 dispatch(openDialog(DeviceSelectionDialog, {
-                    currentAudioInputId: APP.settings.getMicDeviceId(),
-                    currentAudioOutputId: APP.settings.getAudioOutputDeviceId(),
-                    currentVideoInputId: APP.settings.getCameraDeviceId(),
+                    currentAudioInputId: settings.micDeviceId,
+                    currentAudioOutputId: getAudioOutputDeviceId(),
+                    currentVideoInputId: settings.cameraDeviceId,
                     disableAudioInputChange:
                         !JitsiMeetJS.isMultipleAudioInputSupported(),
                     disableDeviceChange: !isDeviceListAvailable
  */
 function _processRequest(dispatch, getState, request, responseCallback) { // eslint-disable-line max-len, max-params
     if (request.type === 'devices') {
+        const state = getState();
+        const settings = state['features/base/settings'];
+
         switch (request.name) {
         case 'isDeviceListAvailable':
             JitsiMeetJS.mediaDevices.isDeviceListAvailable()
             break;
         case 'getCurrentDevices':
             responseCallback({
-                audioInput: APP.settings.getMicDeviceId(),
-                audioOutput: APP.settings.getAudioOutputDeviceId(),
-                videoInput: APP.settings.getCameraDeviceId()
+                audioInput: settings.micDeviceId,
+                audioOutput: getAudioOutputDeviceId(),
+                videoInput: settings.cameraDeviceId
             });
             break;
         case 'getAvailableDevices':

react/features/settings/components/AbstractSettingsView.js

 
 import { Component } from 'react';
 
-import { updateProfile } from '../../base/profile';
+import { updateSettings } from '../../base/settings';
 
 /**
  * The type of the React {@code Component} props of
 type Props = {
 
     /**
-     * The current profile object.
+     * The default URL for when there is no custom URL set in the settings.
      *
      * @protected
      */
-    _profile: Object,
+    _serverURL: string,
 
     /**
-     * The default URL for when there is no custom URL set in the profile.
-     *
-     * @protected
+     * The current settings object.
      */
-    _serverURL: string,
+    _settings: Object,
 
     /**
      * Whether {@link AbstractSettingsView} is visible.
      * @returns {void}
      */
     _onChangeDisplayName(text) {
-        this._updateProfile({
+        this._updateSettings({
             displayName: text
         });
     }
      * @returns {void}
      */
     _onChangeEmail(text) {
-        this._updateProfile({
+        this._updateSettings({
             email: text
         });
     }
      * @returns {void}
      */
     _onChangeServerURL(text) {
-        this._updateProfile({
+        this._updateSettings({
             serverURL: text
         });
     }
      * @returns {void}
      */
     _onStartAudioMutedChange(newValue) {
-        this._updateProfile({
+        this._updateSettings({
             startWithAudioMuted: newValue
         });
     }
      * @returns {void}
      */
     _onStartVideoMutedChange(newValue) {
-        this._updateProfile({
+        this._updateSettings({
             startWithVideoMuted: newValue
         });
     }
 
-    _updateProfile: (Object) => void;
+    _updateSettings: (Object) => void;
 
     /**
-     * Updates the persisted profile on any change.
+     * Updates the persisted settings on any change.
      *
-     * @param {Object} updateObject - The partial update object for the profile.
+     * @param {Object} updateObject - The partial update object for the
+     * settings.
      * @private
      * @returns {void}
      */
-    _updateProfile(updateObject: Object) {
-        this.props.dispatch(updateProfile(updateObject));
+    _updateSettings(updateObject: Object) {
+        this.props.dispatch(updateSettings(updateObject));
     }
 }
 
  * @param {Object} state - The redux state.
  * @protected
  * @returns {{
- *     _profile: Object,
  *     _serverURL: string,
+ *     _settings: Object,
  *     _visible: boolean
  * }}
  */
 export function _mapStateToProps(state: Object) {
     return {
-        _profile: state['features/base/profile'],
         _serverURL: state['features/app'].app._getDefaultURL(),
+        _settings: state['features/base/settings'],
         _visible: state['features/settings'].visible
     };
 }

react/features/settings/components/native/SettingsView.js

      * @returns {void}
      */
     _processServerURL(hideOnSuccess: boolean) {
-        const { serverURL } = this.props._profile;
+        const { serverURL } = this.props._settings;
         const normalizedURL = normalizeUserInputURL(serverURL);
 
         if (normalizedURL === null) {
      * @returns {React$Element}
      */
     _renderBody() {
-        const { _profile } = this.props;
+        const { _settings } = this.props;
 
         return (
             <SafeAreaView style = { styles.settingsForm }>
                             autoCorrect = { false }
                             onChangeText = { this._onChangeDisplayName }
                             placeholder = 'John Doe'
-                            value = { _profile.displayName } />
+                            value = { _settings.displayName } />
                     </FormRow>
                     <FormRow i18nLabel = 'settingsView.email'>
                         <TextInput
                             keyboardType = { 'email-address' }
                             onChangeText = { this._onChangeEmail }
                             placeholder = 'email@example.com'
-                            value = { _profile.email } />
+                            value = { _settings.email } />
                     </FormRow>
                     <FormSectionHeader
                         i18nLabel = 'settingsView.conferenceSection' />
                             onBlur = { this._onBlurServerURL }
                             onChangeText = { this._onChangeServerURL }
                             placeholder = { this.props._serverURL }
-                            value = { _profile.serverURL } />
+                            value = { _settings.serverURL } />
                     </FormRow>
                     <FormRow
                         fieldSeparator = { true }
                         i18nLabel = 'settingsView.startWithAudioMuted'>
                         <Switch
                             onValueChange = { this._onStartAudioMutedChange }
-                            value = { _profile.startWithAudioMuted } />
+                            value = { _settings.startWithAudioMuted } />
                     </FormRow>
                     <FormRow i18nLabel = 'settingsView.startWithVideoMuted'>
                         <Switch
                             onValueChange = { this._onStartVideoMutedChange }
-                            value = { _profile.startWithVideoMuted } />
+                            value = { _settings.startWithVideoMuted } />
                     </FormRow>
                 </ScrollView>
             </SafeAreaView>

react/features/welcome/components/AbstractWelcomePage.js

 type Props = {
 
     /**
-     * The user's profile.
+     * Room name to join to.
      */
-    _profile: Object,
     _room: string,
+
+    /**
+     * The current settings.
+     */
+    _settings: Object,
+
+    /**
+     * The Redux dispatch Function.
+     */
     dispatch: Dispatch<*>
 };
 
  * @param {Object} state - The redux state.
  * @protected
  * @returns {{
- *     _profile: Object,
- *     _room: string
+ *     _room: string,
+ *     _settings: Object
  * }}
  */
 export function _mapStateToProps(state: Object) {
     return {
-        _profile: state['features/base/profile'],
-        _room: state['features/base/conference'].room
+        _room: state['features/base/conference'].room,
+        _settings: state['features/base/settings']
     };
 }

react/features/welcome/components/VideoSwitch.js

 import { connect } from 'react-redux';
 
 import { translate } from '../../base/i18n';
-import { updateProfile } from '../../base/profile';
 import { Header, Text } from '../../base/react';
+import { updateSettings } from '../../base/settings';
 
 import styles, { SWITCH_THUMB_COLOR, SWITCH_UNDER_COLOR } from './styles';
 
     t: Function,
 
     /**
-     * The current profile settings from redux.
+     * The current settings from redux.
      */
-    _profile: Object
+    _settings: Object
 };
 
 /**
      * @inheritdoc
      */
     render() {
-        const { t, _profile } = this.props;
+        const { t, _settings } = this.props;
         const { textStyle } = Header;
 
         return (
                     onValueChange = { this._onStartAudioOnlyChange }
                     style = { styles.audioVideoSwitch }
                     thumbTintColor = { SWITCH_THUMB_COLOR }
-                    value = { _profile.startAudioOnly } />
+                    value = { _settings.startAudioOnly } />
                 <TouchableWithoutFeedback
                     onPress = { this._onStartAudioOnlyTrue }>
                     <Text style = { textStyle }>
     _onStartAudioOnlyChange(startAudioOnly) {
         const { dispatch } = this.props;
 
-        dispatch(updateProfile({
-            ...this.props._profile,
+        dispatch(updateSettings({
             startAudioOnly
         }));
     }
  * @param {Object} state - The redux state.
  * @protected
  * @returns {{
- *     _profile: Object
+ *     _settings: Object
  * }}
  */
 export function _mapStateToProps(state: Object) {
     return {
-        _profile: state['features/base/profile']
+        _settings: state['features/base/settings']
     };
 }
 

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

 
         const { dispatch } = this.props;
 
-        if (this.props._profile.startAudioOnly) {
+        if (this.props._settings.startAudioOnly) {
             dispatch(destroyLocalTracks());
         } else {
             dispatch(createDesiredLocalTracks(MEDIA_TYPE.VIDEO));