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:
parent
d0c22806ec
commit
ad4707c660
|
@ -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",
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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)
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -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.
|
||||||
*
|
*
|
||||||
|
|
|
@ -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
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue