Added Start with Audio and Video muted toggles

This commit is contained in:
akshitkrnagpal 2018-07-01 09:55:06 +05:30 committed by Saúl Ibarra Corretgé
parent 27aafc13c8
commit e228bfcca0
13 changed files with 2877 additions and 2535 deletions

View File

@ -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
};
}

View File

@ -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');

View File

@ -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
};
}

View File

@ -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>

View File

@ -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);

View File

@ -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;

View File

@ -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;
}

View File

@ -0,0 +1,8 @@
// @flow
import styled from 'styled-components';
export default styled.label`
cursor: default;
margin: 0 4px;
`;

View File

@ -0,0 +1,9 @@
// @flow
import styled from 'styled-components';
export default styled.div`
align-items: center;
display: flex;
padding: 8px 0;
`;

View File

@ -0,0 +1,9 @@
// @flow
import styled from 'styled-components';
export default styled.div`
display: flex;
flex-direction: column;
margin: 16px 0;
`;

View File

@ -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';

5092
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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",