feat(settings/native): start car mode in low bandwidth mode (#12286)

* feat(settings/native): start car mode in low bandwidth mode
This commit is contained in:
Calinteodor 2022-10-06 14:29:39 +03:00 committed by GitHub
parent d0c22806ec
commit ad4707c660
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 90 additions and 4 deletions

View File

@ -1010,6 +1010,7 @@
"profileSection": "Profile",
"serverURL": "Server URL",
"showAdvanced": "Show advanced settings",
"startCarModeInLowBandwidthMode": "Start car mode in low bandwidth mode",
"startWithAudioMuted": "Start with audio muted",
"startWithVideoMuted": "Start with video muted",
"terms": "Terms",

View File

@ -37,6 +37,7 @@ const DEFAULT_STATE: ISettingsState = {
soundsTalkWhileMuted: true,
soundsReactions: true,
startAudioOnly: false,
startCarMode: false,
startWithAudioMuted: false,
startWithVideoMuted: false,
userSelectedAudioOutputDeviceId: undefined,
@ -74,6 +75,7 @@ export interface ISettingsState {
soundsReactions?: boolean;
soundsTalkWhileMuted?: boolean;
startAudioOnly?: boolean;
startCarMode?: boolean;
startWithAudioMuted?: boolean;
startWithVideoMuted?: boolean;
userSelectedAudioOutputDeviceId?: string;

View File

@ -60,13 +60,18 @@ type Props = AbstractProps & {
*/
_aspectRatio: Symbol,
/**
* Whether the audio only is enabled or not.
*/
_audioOnlyEnabled: boolean,
/**
* Branding styles for conference.
*/
_brandingStyles: Object,
/**
* Wherther the calendar feature is enabled or not.
* Whether the calendar feature is enabled or not.
*/
_calendarEnabled: boolean,
@ -134,6 +139,11 @@ type Props = AbstractProps & {
*/
_showLobby: boolean,
/**
* Indicates whether the car mode is enabled.
*/
_startCarMode: boolean,
/**
* The redux {@code dispatch} function.
*/
@ -142,7 +152,12 @@ type Props = AbstractProps & {
/**
* Object containing the safe area insets.
*/
insets: Object
insets: Object,
/**
* Default prop for navigating between screen components(React Navigation).
*/
navigation: Object
};
type State = {
@ -192,7 +207,17 @@ class Conference extends AbstractConference<Props, State> {
* @returns {void}
*/
componentDidMount() {
const {
_audioOnlyEnabled,
_startCarMode,
navigation
} = this.props;
BackHandler.addEventListener('hardwareBackPress', this._onHardwareBackPress);
if (_audioOnlyEnabled && _startCarMode) {
navigation.navigate(screen.conference.carmode);
}
}
/**
@ -536,6 +561,8 @@ function _mapStateToProps(state) {
const { isOpen } = state['features/participants-pane'];
const { aspectRatio, reducedUI } = state['features/base/responsive-ui'];
const { backgroundColor } = state['features/dynamic-branding'];
const { startCarMode } = state['features/base/settings'];
const { enabled: audioOnlyEnabled } = state['features/base/audio-only'];
const participantCount = getParticipantCount(state);
const brandingStyles = backgroundColor ? {
backgroundColor
@ -544,6 +571,7 @@ function _mapStateToProps(state) {
return {
...abstractMapStateToProps(state),
_aspectRatio: aspectRatio,
_audioOnlyEnabled: Boolean(audioOnlyEnabled),
_brandingStyles: brandingStyles,
_calendarEnabled: isCalendarEnabled(state),
_connecting: isConnecting(state),
@ -556,6 +584,7 @@ function _mapStateToProps(state) {
_reducedUI: reducedUI,
_shouldEnableAutoKnock: shouldEnableAutoKnock(state),
_showLobby: getIsLobbyVisible(state),
_startCarMode: startCarMode,
_toolboxVisible: isToolboxVisible(state)
};
}

View File

@ -88,6 +88,11 @@ interface State {
*/
serverURL: string;
/**
* State variable for start car mode.
*/
startCarMode: boolean;
/**
* State variable for the start with audio muted switch.
*/
@ -135,6 +140,7 @@ interface Props extends WithTranslation {
displayName: string;
email: string;
serverURL: string;
startCarMode: boolean;
startWithAudioMuted: boolean;
startWithVideoMuted: boolean;
};
@ -185,6 +191,7 @@ class SettingsView extends Component<Props, State> {
displayName,
email,
serverURL,
startCarMode,
startWithAudioMuted,
startWithVideoMuted
} = props._settings || {};
@ -197,6 +204,7 @@ class SettingsView extends Component<Props, State> {
displayName,
email,
serverURL,
startCarMode,
startWithAudioMuted,
startWithVideoMuted
};
@ -213,6 +221,8 @@ class SettingsView extends Component<Props, State> {
this._onDisableSelfView = this._onDisableSelfView.bind(this);
this._onStartAudioMutedChange
= this._onStartAudioMutedChange.bind(this);
this._onStartCarmodeInLowBandwidthMode
= this._onStartCarmodeInLowBandwidthMode.bind(this);
this._onStartVideoMutedChange
= this._onStartVideoMutedChange.bind(this);
this._setURLFieldReference = this._setURLFieldReference.bind(this);
@ -250,6 +260,7 @@ class SettingsView extends Component<Props, State> {
displayName,
email,
serverURL,
startCarMode,
startWithAudioMuted,
startWithVideoMuted
} = this.state;
@ -325,6 +336,13 @@ class SettingsView extends Component<Props, State> {
theme = { textInputTheme }
value = { serverURL } />
<Divider style = { styles.fieldSeparator } />
<FormRow label = 'settingsView.startCarModeInLowBandwidthMode'>
<Switch
checked = { startCarMode }
// @ts-ignore
onChange = { this._onStartCarmodeInLowBandwidthMode } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
<FormRow
label = 'settingsView.startWithAudioMuted'>
<Switch
@ -532,6 +550,23 @@ class SettingsView extends Component<Props, State> {
});
}
/** .
* Handles car mode in low bandwidth mode.
*
* @param {boolean} startCarMode - The new value.
* @private
* @returns {void}
*/
_onStartCarmodeInLowBandwidthMode(startCarMode: boolean) {
this.setState({
startCarMode
});
this._updateSettings({
startCarMode
});
}
/**
* Handles the disable crash reporting change event.
*

View File

@ -1,11 +1,15 @@
// @flow
import { toggleAudioOnly } from '../../../base/audio-only';
import { setAudioOnly, toggleAudioOnly } from '../../../base/audio-only';
import { AUDIO_ONLY_BUTTON_ENABLED, getFeatureFlag } from '../../../base/flags';
import { translate } from '../../../base/i18n';
import { IconAudioOnly, IconAudioOnlyOff } from '../../../base/icons';
import { connect } from '../../../base/redux';
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
import {
navigate
} from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
import { screen } from '../../../mobile/navigation/routes';
/**
* The type of the React {@code Component} props of {@link AudioOnlyButton}.
@ -17,6 +21,11 @@ type Props = AbstractButtonProps & {
*/
_audioOnly: boolean,
/**
* Indicates whether the car mode is enabled.
*/
_startCarMode: boolean,
/**
* The redux {@code dispatch} function.
*/
@ -41,8 +50,16 @@ class AudioOnlyButton extends AbstractButton<Props, *> {
* @returns {void}
*/
_handleClick() {
this.props.dispatch(toggleAudioOnly());
const { _audioOnly, _startCarMode, dispatch } = this.props;
if (!_audioOnly && _startCarMode) {
dispatch(setAudioOnly(true));
navigate(screen.conference.carmode);
} else {
dispatch(toggleAudioOnly());
}
}
/**
* Indicates whether this button is in toggled state or not.
@ -70,10 +87,12 @@ class AudioOnlyButton extends AbstractButton<Props, *> {
function _mapStateToProps(state, ownProps): Object {
const { enabled: audioOnly } = state['features/base/audio-only'];
const enabledInFeatureFlags = getFeatureFlag(state, AUDIO_ONLY_BUTTON_ENABLED, true);
const { startCarMode } = state['features/base/settings'];
const { visible = enabledInFeatureFlags } = ownProps;
return {
_audioOnly: Boolean(audioOnly),
_startCarMode: startCarMode,
visible
};
}