Make web use the redux settings/profile

react/features/base/devices/functions.js

@@ -0,0 +1,32 @@
+// @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

@@ -1,5 +1,6 @@
 export * from './actions';
 export * from './actionTypes';
+export * from './functions';
 
 import './middleware';
 import './reducer';

react/features/base/media/middleware.js

@@ -8,8 +8,8 @@ import {
 } 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';
@@ -79,11 +79,11 @@ function _setRoom({ dispatch, getState }, next, action) {
     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:
@@ -141,7 +141,7 @@ function _setRoom({ dispatch, getState }, next, action) {
                         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
@@ -151,7 +151,7 @@ function _setRoom({ dispatch, getState }, next, action) {
                         // 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

@@ -1,15 +0,0 @@
-/**
- * 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

@@ -1,23 +0,0 @@
-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

@@ -1,53 +0,0 @@
-// @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

@@ -0,0 +1,22 @@
+/**
+ * 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

@@ -0,0 +1,30 @@
+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/settings/functions.js

@@ -3,9 +3,11 @@
 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.
@@ -14,7 +16,7 @@ import { toState } from '../redux';
  * @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.
@@ -31,13 +33,13 @@ export function getPropertyValue(
         // 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);
 
@@ -61,9 +63,9 @@ export function getPropertyValue(
         }
     }
 
-    // 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/settings/middleware.js

@@ -4,12 +4,13 @@ import { setAudioOnly } from '../conference';
 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}
@@ -18,16 +19,16 @@ MiddlewareRegistry.register(store => next => action => {
     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.
@@ -36,14 +37,14 @@ MiddlewareRegistry.register(store => next => 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
@@ -52,7 +53,7 @@ function _maybeSetAudioOnly(
 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:
@@ -60,7 +61,7 @@ function _updateLocalParticipant(store) {
         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

@@ -0,0 +1,157 @@
+// @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

@@ -6,18 +6,20 @@ store/state into window.localStorage (on Web) or AsyncStorage (on mobile).
 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.
@@ -31,3 +33,12 @@ throttling timeout can be configured in
 ```
 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

@@ -35,14 +35,16 @@ export function createLocalTracksF(
     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

@@ -18,3 +18,27 @@ export function getJitsiMeetGlobalNS() {
 
     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;
+}