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", "profileSection": "Profile",
"serverURL": "Server URL", "serverURL": "Server URL",
"showAdvanced": "Show advanced settings", "showAdvanced": "Show advanced settings",
"startCarModeInLowBandwidthMode": "Start car mode in low bandwidth mode",
"startWithAudioMuted": "Start with audio muted", "startWithAudioMuted": "Start with audio muted",
"startWithVideoMuted": "Start with video muted", "startWithVideoMuted": "Start with video muted",
"terms": "Terms", "terms": "Terms",

View File

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

View File

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

View File

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

View File

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