Added Start with Audio and Video muted toggles
This commit is contained in:
parent
27aafc13c8
commit
e228bfcca0
|
@ -53,6 +53,16 @@ type Props = {
|
|||
* Default Jitsi Server URL.
|
||||
*/
|
||||
_serverURL: string;
|
||||
|
||||
/**
|
||||
* Start with Audio Muted.
|
||||
*/
|
||||
_startWithAudioMuted: boolean;
|
||||
|
||||
/**
|
||||
* Start with Video Muted.
|
||||
*/
|
||||
_startWithVideoMuted: boolean;
|
||||
};
|
||||
|
||||
type State = {
|
||||
|
@ -201,7 +211,13 @@ class Conference extends Component<Props, State> {
|
|||
|
||||
const { host } = URL.parse(serverURL);
|
||||
|
||||
const configOverwrite = {
|
||||
startWithAudioMuted: this.props._startWithAudioMuted,
|
||||
startWithVideoMuted: this.props._startWithVideoMuted
|
||||
};
|
||||
|
||||
this._api = new JitsiMeetExternalAPI(host, {
|
||||
configOverwrite,
|
||||
onload: this._onIframeLoad,
|
||||
parentNode,
|
||||
roomName
|
||||
|
@ -341,7 +357,9 @@ function setupDragAreas(iframe) {
|
|||
* _avatarURL: string,
|
||||
* _email: string,
|
||||
* _name: string,
|
||||
* _serverURL: string
|
||||
* _serverURL: string,
|
||||
* _startWithAudioMuted: boolean,
|
||||
* _startWithVideoMuted: boolean
|
||||
* }}
|
||||
*/
|
||||
function _mapStateToProps(state: Object) {
|
||||
|
@ -349,7 +367,9 @@ function _mapStateToProps(state: Object) {
|
|||
_avatarURL: state.settings.avatarURL,
|
||||
_email: state.settings.email,
|
||||
_name: state.settings.name,
|
||||
_serverURL: state.settings.serverURL
|
||||
_serverURL: state.settings.serverURL,
|
||||
_startWithAudioMuted: state.settings.startWithAudioMuted,
|
||||
_startWithVideoMuted: state.settings.startWithVideoMuted
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
@ -1,3 +1,13 @@
|
|||
/**
|
||||
* The type of (redux) action that sets Start with Audio Muted.
|
||||
*
|
||||
* {
|
||||
* type: SET_AUDIO_MUTED,
|
||||
* startWithAudioMuted: boolean
|
||||
* }
|
||||
*/
|
||||
export const SET_AUDIO_MUTED = Symbol('SET_AUDIO_MUTED');
|
||||
|
||||
/**
|
||||
* The type of (redux) action that sets the Avatar URL.
|
||||
*
|
||||
|
@ -37,3 +47,13 @@ export const SET_NAME = Symbol('SET_NAME');
|
|||
* }
|
||||
*/
|
||||
export const SET_SERVER_URL = Symbol('SET_SERVER_URL');
|
||||
|
||||
/**
|
||||
* The type of (redux) action that sets Start with Video Muted.
|
||||
*
|
||||
* {
|
||||
* type: SET_VIDEO_MUTED,
|
||||
* startWithVideoMuted: boolean
|
||||
* }
|
||||
*/
|
||||
export const SET_VIDEO_MUTED = Symbol('SET_VIDEO_MUTED');
|
||||
|
|
|
@ -1,10 +1,12 @@
|
|||
// @flow
|
||||
|
||||
import {
|
||||
SET_AUDIO_MUTED,
|
||||
SET_AVATAR_URL,
|
||||
SET_EMAIL,
|
||||
SET_NAME,
|
||||
SET_SERVER_URL
|
||||
SET_SERVER_URL,
|
||||
SET_VIDEO_MUTED
|
||||
} from './actionTypes';
|
||||
|
||||
import { normalizeServerURL } from '../utils';
|
||||
|
@ -73,4 +75,36 @@ export function setServerURL(serverURL: string) {
|
|||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Set start with audio muted.
|
||||
*
|
||||
* @param {boolean} startWithAudioMuted - Whether to start with audio muted.
|
||||
* @returns {{
|
||||
* type: SET_AUDIO_MUTED,
|
||||
* startWithAudioMuted: boolean
|
||||
* }}
|
||||
*/
|
||||
export function setStartWithAudioMuted(startWithAudioMuted: boolean) {
|
||||
return {
|
||||
type: SET_AUDIO_MUTED,
|
||||
startWithAudioMuted
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Set start with video muted.
|
||||
*
|
||||
* @param {boolean} startWithVideoMuted - Whether to start with video muted.
|
||||
* @returns {{
|
||||
* type: SET_VIDEO_MUTED,
|
||||
* startWithVideoMuted: boolean
|
||||
* }}
|
||||
*/
|
||||
export function setStartWithVideoMuted(startWithVideoMuted: boolean) {
|
||||
return {
|
||||
type: SET_VIDEO_MUTED,
|
||||
startWithVideoMuted
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -14,6 +14,7 @@ import { AvatarContainer, SettingsContainer } from '../styled';
|
|||
import { setEmail, setName } from '../actions';
|
||||
|
||||
import ServerURLField from './ServerURLField';
|
||||
import StartMutedToggles from './StartMutedToggles';
|
||||
|
||||
type Props = {
|
||||
|
||||
|
@ -98,6 +99,7 @@ class SettingsDrawer extends Component<Props, *> {
|
|||
value = { this.props._email } />
|
||||
</form>
|
||||
<ServerURLField />
|
||||
<StartMutedToggles />
|
||||
</SettingsContainer>
|
||||
</DrawerContainer>
|
||||
</AkCustomDrawer>
|
||||
|
|
|
@ -0,0 +1,146 @@
|
|||
// @flow
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import type { Dispatch } from 'redux';
|
||||
|
||||
import { TogglesContainer } from '../styled';
|
||||
import {
|
||||
setStartWithAudioMuted,
|
||||
setStartWithVideoMuted
|
||||
} from '../actions';
|
||||
|
||||
import ToggleWithLabel from './ToggleWithLabel';
|
||||
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* Redux dispatch.
|
||||
*/
|
||||
dispatch: Dispatch<*>;
|
||||
|
||||
/**
|
||||
* Start with Audio Muted value in (redux) state.
|
||||
*/
|
||||
_startWithAudioMuted: boolean;
|
||||
|
||||
/**
|
||||
* Start with Video Muted value in (redux) state.
|
||||
*/
|
||||
_startWithVideoMuted: boolean;
|
||||
};
|
||||
|
||||
type State = {
|
||||
|
||||
/**
|
||||
* Start with Audio Muted value in (local) state.
|
||||
*/
|
||||
startWithAudioMuted: boolean;
|
||||
|
||||
/**
|
||||
* Start with Video Muted value in (local) state.
|
||||
*/
|
||||
startWithVideoMuted: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* Start Muted toggles for audio and video placed in Settings Drawer.
|
||||
*/
|
||||
class StartMutedToggles extends Component<Props, State> {
|
||||
/**
|
||||
* Initializes a new {@code StartMutedToggles} instance.
|
||||
*
|
||||
* @inheritdoc
|
||||
*/
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
startWithAudioMuted: false,
|
||||
startWithVideoMuted: false
|
||||
};
|
||||
|
||||
this._onAudioToggleChange = this._onAudioToggleChange.bind(this);
|
||||
this._onVideoToggleChange = this._onVideoToggleChange.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* This updates the startWithAudioMuted and startWithVideoMuted in (local)
|
||||
* state when there is a change in redux store.
|
||||
*
|
||||
* @param {Props} props - New props of the component.
|
||||
* @returns {State} - New state of the component.
|
||||
*/
|
||||
static getDerivedStateFromProps(props) {
|
||||
return {
|
||||
startWithAudioMuted: props._startWithAudioMuted,
|
||||
startWithVideoMuted: props._startWithVideoMuted
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Render function of component.
|
||||
*
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
render() {
|
||||
return (
|
||||
<TogglesContainer>
|
||||
<ToggleWithLabel
|
||||
isDefaultChecked = { this.props._startWithAudioMuted }
|
||||
label = 'Start with Audio muted'
|
||||
onChange = { this._onAudioToggleChange }
|
||||
value = { this.state.startWithAudioMuted } />
|
||||
<ToggleWithLabel
|
||||
isDefaultChecked = { this.props._startWithVideoMuted }
|
||||
label = 'Start with Video muted'
|
||||
onChange = { this._onVideoToggleChange }
|
||||
value = { this.state.startWithVideoMuted } />
|
||||
</TogglesContainer>
|
||||
);
|
||||
}
|
||||
|
||||
_onAudioToggleChange: (*) => void;
|
||||
|
||||
/**
|
||||
* Toggles startWithAudioMuted.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
_onAudioToggleChange() {
|
||||
const { startWithAudioMuted } = this.state;
|
||||
|
||||
this.props.dispatch(setStartWithAudioMuted(!startWithAudioMuted));
|
||||
}
|
||||
|
||||
_onVideoToggleChange: (*) => void;
|
||||
|
||||
/**
|
||||
* Toggles startWithVideoMuted.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
_onVideoToggleChange() {
|
||||
const { startWithVideoMuted } = this.state;
|
||||
|
||||
this.props.dispatch(setStartWithVideoMuted(!startWithVideoMuted));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Maps (parts of) the redux state to the React props.
|
||||
*
|
||||
* @param {Object} state - The redux state.
|
||||
* @returns {{
|
||||
* _startWithAudioMuted: boolean,
|
||||
* _startWithVideoMuted: boolean
|
||||
* }}
|
||||
*/
|
||||
function _mapStateToProps(state: Object) {
|
||||
return {
|
||||
_startWithAudioMuted: state.settings.startWithAudioMuted,
|
||||
_startWithVideoMuted: state.settings.startWithVideoMuted
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(_mapStateToProps)(StartMutedToggles);
|
|
@ -0,0 +1,38 @@
|
|||
// @flow
|
||||
|
||||
import Toggle from '@atlaskit/toggle';
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { Label, ToggleContainer } from '../styled';
|
||||
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* Label to show for toggle.
|
||||
*/
|
||||
label: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggles Buttons with label.
|
||||
*/
|
||||
class ToggleWithLabel extends Component<Props, *> {
|
||||
/**
|
||||
* Render function of component.
|
||||
*
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
render() {
|
||||
return (
|
||||
<ToggleContainer>
|
||||
<Toggle
|
||||
size = 'large'
|
||||
{ ...this.props } />
|
||||
<Label>{ this.props.label }</Label>
|
||||
</ToggleContainer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ToggleWithLabel;
|
|
@ -5,17 +5,21 @@ import os from 'os';
|
|||
import { getAvatarURL } from 'js-utils';
|
||||
|
||||
import {
|
||||
SET_AUDIO_MUTED,
|
||||
SET_AVATAR_URL,
|
||||
SET_EMAIL,
|
||||
SET_NAME,
|
||||
SET_SERVER_URL
|
||||
SET_SERVER_URL,
|
||||
SET_VIDEO_MUTED
|
||||
} from './actionTypes';
|
||||
|
||||
type State = {
|
||||
avatarURL: string,
|
||||
email: string,
|
||||
name: string,
|
||||
serverURL: ?string
|
||||
serverURL: ?string,
|
||||
startWithAudioMuted: boolean,
|
||||
startWithVideoMuted: boolean
|
||||
};
|
||||
|
||||
const username = os.userInfo().username;
|
||||
|
@ -24,7 +28,9 @@ const DEFAULT_STATE = {
|
|||
avatarURL: getAvatarURL({ id: username }),
|
||||
email: '',
|
||||
name: username,
|
||||
serverURL: undefined
|
||||
serverURL: undefined,
|
||||
startWithAudioMuted: false,
|
||||
startWithVideoMuted: false
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -36,6 +42,12 @@ const DEFAULT_STATE = {
|
|||
*/
|
||||
export default (state: State = DEFAULT_STATE, action: Object) => {
|
||||
switch (action.type) {
|
||||
case SET_AUDIO_MUTED:
|
||||
return {
|
||||
...state,
|
||||
startWithAudioMuted: action.startWithAudioMuted
|
||||
};
|
||||
|
||||
case SET_AVATAR_URL:
|
||||
return {
|
||||
...state,
|
||||
|
@ -60,6 +72,12 @@ export default (state: State = DEFAULT_STATE, action: Object) => {
|
|||
serverURL: action.serverURL
|
||||
};
|
||||
|
||||
case SET_VIDEO_MUTED:
|
||||
return {
|
||||
...state,
|
||||
startWithVideoMuted: action.startWithVideoMuted
|
||||
};
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
// @flow
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
export default styled.label`
|
||||
cursor: default;
|
||||
margin: 0 4px;
|
||||
`;
|
|
@ -0,0 +1,9 @@
|
|||
// @flow
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
export default styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 8px 0;
|
||||
`;
|
|
@ -0,0 +1,9 @@
|
|||
// @flow
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
export default styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 16px 0;
|
||||
`;
|
|
@ -1,2 +1,5 @@
|
|||
export { default as AvatarContainer } from './AvatarContainer';
|
||||
export { default as Label } from './Label';
|
||||
export { default as SettingsContainer } from './SettingsContainer';
|
||||
export { default as ToggleContainer } from './ToggleContainer';
|
||||
export { default as TogglesContainer } from './TogglesContainer';
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -40,6 +40,7 @@
|
|||
"@atlaskit/page": "7.0.1",
|
||||
"@atlaskit/spinner": "8.0.0",
|
||||
"@atlaskit/theme": "3.2.2",
|
||||
"@atlaskit/toggle": "4.0.3",
|
||||
"electron-debug": "2.0.0",
|
||||
"electron-is-dev": "0.3.0",
|
||||
"electron-window-state": "4.1.1",
|
||||
|
|
Loading…
Reference in New Issue