Make web use the redux settings/profile

pull/2936/head
zbettenbuk 7 years ago committed by Saúl Ibarra Corretgé
parent ab7e572162
commit 959db3a665
  1. 2
      app.js
  2. 50
      conference.js
  3. 7
      modules/UI/side_pannels/profile/Profile.js
  4. 11
      modules/UI/util/UIUtil.js
  5. 12
      modules/UI/videolayout/LocalVideo.js
  6. 10
      modules/devices/mediaDeviceHelper.js
  7. 191
      modules/settings/Settings.js
  8. 34
      react/features/app/components/AbstractApp.js
  9. 32
      react/features/base/devices/functions.js
  10. 1
      react/features/base/devices/index.js
  11. 12
      react/features/base/media/middleware.js
  12. 15
      react/features/base/profile/actionTypes.js
  13. 23
      react/features/base/profile/actions.js
  14. 53
      react/features/base/profile/reducer.js
  15. 22
      react/features/base/settings/actionTypes.js
  16. 30
      react/features/base/settings/actions.js
  17. 16
      react/features/base/settings/functions.js
  18. 0
      react/features/base/settings/index.js
  19. 25
      react/features/base/settings/middleware.js
  20. 157
      react/features/base/settings/reducer.js
  21. 23
      react/features/base/storage/README.md
  22. 10
      react/features/base/tracks/functions.js
  23. 24
      react/features/base/util/helpers.js
  24. 31
      react/features/device-selection/actions.js
  25. 37
      react/features/settings/components/AbstractSettingsView.js
  26. 14
      react/features/settings/components/native/SettingsView.js
  27. 20
      react/features/welcome/components/AbstractWelcomePage.js
  28. 17
      react/features/welcome/components/VideoSwitch.js
  29. 2
      react/features/welcome/components/WelcomePage.native.js

@ -15,7 +15,6 @@ import conference from './conference';
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';
@ -41,7 +40,6 @@ window.APP = {
keyboardshortcut,
remoteControl,
settings,
translation,
UI
};

@ -46,7 +46,10 @@ import {
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,
@ -82,6 +85,7 @@ import {
participantRoleChanged,
participantUpdated
} from './react/features/base/participants';
import { updateSettings } from './react/features/base/settings';
import {
createLocalTracksF,
isLocalTrackMuted,
@ -1273,7 +1277,7 @@ export default {
: 'colibri';
}
const nick = APP.settings.getDisplayName();
const nick = APP.store.getState()['features/base/settings'].displayName;
if (nick) {
options.displayName = nick;
@ -2131,7 +2135,9 @@ export default {
})
.then(() => {
logger.log('switched local video device');
APP.settings.setCameraDeviceId(cameraDeviceId, true);
APP.store.dispatch(updateSettings({
cameraDeviceId
}));
})
.catch(err => {
APP.UI.showCameraErrorNotification(err);
@ -2163,7 +2169,9 @@ export default {
.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);
@ -2175,7 +2183,7 @@ export default {
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. '
@ -2317,7 +2325,8 @@ export default {
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,
@ -2367,14 +2376,18 @@ export default {
// 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);
@ -2426,8 +2439,7 @@ export default {
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());
}
@ -2576,7 +2588,10 @@ export default {
email: formattedEmail
}));
APP.settings.setEmail(formattedEmail);
APP.store.dispatch(updateSettings({
email: formattedEmail
}));
APP.UI.setUserEmail(localId, formattedEmail);
sendData(commands.EMAIL, formattedEmail);
},
@ -2600,7 +2615,9 @@ export default {
avatarURL: formattedUrl
}));
APP.settings.setAvatarUrl(url);
APP.store.dispatch(updateSettings({
avatarURL: formattedUrl
}));
sendData(commands.AVATAR_URL, url);
},
@ -2654,7 +2671,10 @@ export default {
name: formattedNickname
}));
APP.settings.setDisplayName(formattedNickname);
APP.store.dispatch(updateSettings({
displayName: formattedNickname
}));
APP.API.notifyDisplayNameChanged(id, {
displayName: formattedNickname,
formattedDisplayName:

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

@ -74,17 +74,6 @@ const UIUtil = {
.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);

@ -10,6 +10,7 @@ import { VideoTrack } from '../../../react/features/base/media';
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);
@ -121,9 +122,10 @@ LocalVideo.prototype.changeVideo = function(stream) {
// 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 = () => {
@ -194,10 +196,14 @@ LocalVideo.prototype._buildContextMenu = function() {
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
}));
}
}
},

@ -1,5 +1,7 @@
/* global APP, JitsiMeetJS */
import { getAudioOutputDeviceId } from '../../react/features/base/devices';
let currentAudioInputDevices,
currentAudioOutputDevices,
currentVideoInputDevices;
@ -16,7 +18,7 @@ function getNewAudioOutputDevice(newDevices) {
return;
}
const selectedAudioOutputDeviceId = APP.settings.getAudioOutputDeviceId();
const selectedAudioOutputDeviceId = getAudioOutputDeviceId();
const availableAudioOutputDevices = newDevices.filter(
d => d.kind === 'audiooutput');
@ -40,7 +42,8 @@ function getNewAudioOutputDevice(newDevices) {
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);
@ -76,7 +79,8 @@ function getNewAudioInputDevice(newDevices, localAudio) {
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);

@ -1,191 +0,0 @@
/* 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));
}
};

@ -12,7 +12,6 @@ import {
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';
@ -26,6 +25,9 @@ import { appNavigate, appWillMount, appWillUnmount } from '../actions';
/**
* 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';
@ -133,26 +135,14 @@ export class AbstractApp extends Component {
// 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
@ -383,8 +373,8 @@ export class AbstractApp extends Component {
return (
this.props.defaultURL
|| this._getStore().getState()['features/base/profile']
.serverURL
|| this._getStore().getState()['features/base/settings']
.serverURL
|| DEFAULT_URL);
}

@ -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
})));
}

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

@ -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

@ -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');

@ -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
};
}

@ -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;
});

@ -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');

@ -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
};
}

@ -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;

@ -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
}));
}

@ -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;
}

@ -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).

@ -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 {

@ -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;
}

@ -1,18 +1,20 @@
/* 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';
@ -42,10 +44,12 @@ function _openDeviceSelectionDialogHere() {
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
@ -135,6 +139,9 @@ function _openDeviceSelectionDialogInPopup() {
*/
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()
@ -152,9 +159,9 @@ function _processRequest(dispatch, getState, request, responseCallback) { // esl
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':

@ -2,7 +2,7 @@
import { Component } from 'react';
import { updateProfile } from '../../base/profile';
import { updateSettings } from '../../base/settings';
/**
* The type of the React {@code Component} props of
@ -11,18 +11,16 @@ import { updateProfile } from '../../base/profile';
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.
@ -79,7 +77,7 @@ export class AbstractSettingsView extends Component<Props> {
* @returns {void}
*/
_onChangeDisplayName(text) {
this._updateProfile({
this._updateSettings({
displayName: text
});
}
@ -94,7 +92,7 @@ export class AbstractSettingsView extends Component<Props> {
* @returns {void}
*/
_onChangeEmail(text) {
this._updateProfile({
this._updateSettings({
email: text
});
}
@ -109,7 +107,7 @@ export class AbstractSettingsView extends Component<Props> {
* @returns {void}
*/
_onChangeServerURL(text) {
this._updateProfile({
this._updateSettings({
serverURL: text
});
}
@ -125,7 +123,7 @@ export class AbstractSettingsView extends Component<Props> {
* @returns {void}
*/
_onStartAudioMutedChange(newValue) {
this._updateProfile({
this._updateSettings({
startWithAudioMuted: newValue
});
}
@ -141,22 +139,23 @@ export class AbstractSettingsView extends Component<Props> {
* @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));
}
}
@ -167,15 +166,15 @@ export class AbstractSettingsView extends Component<Props> {
* @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
};
}

@ -120,7 +120,7 @@ class SettingsView extends AbstractSettingsView {
* @returns {void}
*/
_processServerURL(hideOnSuccess: boolean) {
const { serverURL } = this.props._profile;
const { serverURL } = this.props._settings;
const normalizedURL = normalizeUserInputURL(serverURL);
if (normalizedURL === null) {
@ -140,7 +140,7 @@ class SettingsView extends AbstractSettingsView {
* @returns {React$Element}
*/
_renderBody() {
const { _profile } = this.props;
const { _settings } = this.props;
return (
<SafeAreaView style = { styles.settingsForm }>
@ -154,7 +154,7 @@ class SettingsView extends AbstractSettingsView {
autoCorrect = { false }
onChangeText = { this._onChangeDisplayName }
placeholder = 'John Doe'
value = { _profile.displayName } />
value = { _settings.displayName } />
</FormRow>
<FormRow i18nLabel = 'settingsView.email'>
<TextInput
@ -163,7 +163,7 @@ class SettingsView extends AbstractSettingsView {
keyboardType = { 'email-address' }
onChangeText = { this._onChangeEmail }
placeholder = 'email@example.com'
value = { _profile.email } />
value = { _settings.email } />
</FormRow>
<FormSectionHeader
i18nLabel = 'settingsView.conferenceSection' />
@ -176,19 +176,19 @@ class SettingsView extends AbstractSettingsView {
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>

@ -14,10 +14,18 @@ import { generateRoomWithoutSeparator } from '../functions';
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<*>
};
@ -229,13 +237,13 @@ export class AbstractWelcomePage extends Component<Props, *> {
* @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']
};
}

@ -5,8 +5,8 @@ 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 { updateSettings } from '../../base/settings';
import styles, { SWITCH_THUMB_COLOR, SWITCH_UNDER_COLOR } from './styles';
@ -26,9 +26,9 @@ type Props = {
t: Function,
/**
* The current profile settings from redux.
* The current settings from redux.
*/
_profile: Object
_settings: Object
};
/**
@ -55,7 +55,7 @@ class VideoSwitch extends Component<Props> {
* @inheritdoc
*/
render() {
const { t, _profile } = this.props;
const { t, _settings } = this.props;
const { textStyle } = Header;
return (
@ -71,7 +71,7 @@ class VideoSwitch extends Component<Props> {
onValueChange = { this._onStartAudioOnlyChange }
style = { styles.audioVideoSwitch }
thumbTintColor = { SWITCH_THUMB_COLOR }
value = { _profile.startAudioOnly } />
value = { _settings.startAudioOnly } />
<TouchableWithoutFeedback
onPress = { this._onStartAudioOnlyTrue }>
<Text style = { textStyle }>
@ -94,8 +94,7 @@ class VideoSwitch extends Component<Props> {
_onStartAudioOnlyChange(startAudioOnly) {
const { dispatch } = this.props;
dispatch(updateProfile({
...this.props._profile,
dispatch(updateSettings({
startAudioOnly
}));
}
@ -124,12 +123,12 @@ class VideoSwitch extends Component<Props> {
* @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']
};
}

@ -66,7 +66,7 @@ class WelcomePage extends AbstractWelcomePage {
const { dispatch } = this.props;
if (this.props._profile.startAudioOnly) {
if (this.props._settings.startAudioOnly) {
dispatch(destroyLocalTracks());
} else {
dispatch(createDesiredLocalTracks(MEDIA_TYPE.VIDEO));

Loading…
Cancel
Save