jiti-meet/react/features/settings/components/AbstractSettingsView.js

201 lines
4.7 KiB
JavaScript

// @flow
import { Component } from 'react';
import type { Dispatch } from 'redux';
import { getDefaultURL } from '../../app/functions';
import { updateSettings } from '../../base/settings';
/**
* The type of the React {@code Component} props of
* {@link AbstractSettingsView}.
*/
export type Props = {
/**
* The default URL for when there is no custom URL set in the settings.
*
* @protected
*/
_serverURL: string,
/**
* The current settings object.
*/
_settings: Object,
/**
* Whether {@link AbstractSettingsView} is visible.
*
* @protected
*/
_visible: boolean,
/**
* Redux store dispatch function.
*/
dispatch: Dispatch<any>,
/**
* The i18n translate function.
*/
t: Function
};
/**
* Base (abstract) class for container component rendering the app settings
* page.
*
* @abstract
*/
export class AbstractSettingsView<P: Props, S: *> extends Component<P, S> {
/**
* Initializes a new {@code AbstractSettingsView} instance.
*
* @param {P} props - The React {@code Component} props to initialize
* the component.
*/
constructor(props: P) {
super(props);
// Bind event handlers so they are only bound once per instance.
this._onChangeDisplayName = this._onChangeDisplayName.bind(this);
this._onChangeEmail = this._onChangeEmail.bind(this);
this._onChangeServerURL = this._onChangeServerURL.bind(this);
this._onStartAudioMutedChange
= this._onStartAudioMutedChange.bind(this);
this._onStartVideoMutedChange
= this._onStartVideoMutedChange.bind(this);
this._onStartReactionsMutedChange
= this._onStartReactionsMutedChange.bind(this);
}
_onChangeDisplayName: (string) => void;
/**
* Handles the display name field value change.
*
* @param {string} text - The value typed in the name field.
* @protected
* @returns {void}
*/
_onChangeDisplayName(text) {
this._updateSettings({
displayName: text
});
}
_onChangeEmail: (string) => void;
/**
* Handles the email field value change.
*
* @param {string} text - The value typed in the email field.
* @protected
* @returns {void}
*/
_onChangeEmail(text) {
this._updateSettings({
email: text
});
}
_onChangeServerURL: (string) => void;
/**
* Handles the server name field value change.
*
* @param {string} text - The server URL typed in the server field.
* @protected
* @returns {void}
*/
_onChangeServerURL(text) {
this._updateSettings({
serverURL: text
});
}
_onStartAudioMutedChange: (boolean) => void;
/**
* Handles the start audio muted change event.
*
* @param {boolean} newValue - The new value for the start audio muted
* option.
* @protected
* @returns {void}
*/
_onStartAudioMutedChange(newValue) {
this._updateSettings({
startWithAudioMuted: newValue
});
}
_onStartVideoMutedChange: (boolean) => void;
/**
* Handles the start video muted change event.
*
* @param {boolean} newValue - The new value for the start video muted
* option.
* @protected
* @returns {void}
*/
_onStartVideoMutedChange(newValue) {
this._updateSettings({
startWithVideoMuted: newValue
});
}
_onStartReactionsMutedChange: (boolean) => void;
/**
* Handles the start reactions muted change event.
*
* @param {boolean} newValue - The new value for the start reactions muted
* option.
* @protected
* @returns {void}
*/
_onStartReactionsMutedChange(newValue) {
this._updateSettings({
startWithReactionsMuted: newValue
});
}
_updateSettings: (Object) => void;
/**
* Updates the persisted settings on any change.
*
* @param {Object} updateObject - The partial update object for the
* settings.
* @private
* @returns {void}
*/
_updateSettings(updateObject: Object) {
this.props.dispatch(updateSettings(updateObject));
}
}
/**
* Maps (parts of) the redux state to the React {@code Component} props of
* {@code AbstractSettingsView}.
*
* @param {Object} state - The redux state.
* @protected
* @returns {{
* _serverURL: string,
* _settings: Object,
* _visible: boolean
* }}
*/
export function _mapStateToProps(state: Object) {
return {
_serverURL: getDefaultURL(state),
_settings: state['features/base/settings'],
_visible: state['features/settings'].visible
};
}