mirror of
https://github.com/netzbegruenung/jitsi-meet-electron.git
synced 2024-04-26 14:14:52 +02:00
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.
|
* Default Jitsi Server URL.
|
||||||
*/
|
*/
|
||||||
_serverURL: string;
|
_serverURL: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Start with Audio Muted.
|
||||||
|
*/
|
||||||
|
_startWithAudioMuted: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Start with Video Muted.
|
||||||
|
*/
|
||||||
|
_startWithVideoMuted: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
|
@ -201,7 +211,13 @@ class Conference extends Component<Props, State> {
|
||||||
|
|
||||||
const { host } = URL.parse(serverURL);
|
const { host } = URL.parse(serverURL);
|
||||||
|
|
||||||
|
const configOverwrite = {
|
||||||
|
startWithAudioMuted: this.props._startWithAudioMuted,
|
||||||
|
startWithVideoMuted: this.props._startWithVideoMuted
|
||||||
|
};
|
||||||
|
|
||||||
this._api = new JitsiMeetExternalAPI(host, {
|
this._api = new JitsiMeetExternalAPI(host, {
|
||||||
|
configOverwrite,
|
||||||
onload: this._onIframeLoad,
|
onload: this._onIframeLoad,
|
||||||
parentNode,
|
parentNode,
|
||||||
roomName
|
roomName
|
||||||
|
@ -341,7 +357,9 @@ function setupDragAreas(iframe) {
|
||||||
* _avatarURL: string,
|
* _avatarURL: string,
|
||||||
* _email: string,
|
* _email: string,
|
||||||
* _name: string,
|
* _name: string,
|
||||||
* _serverURL: string
|
* _serverURL: string,
|
||||||
|
* _startWithAudioMuted: boolean,
|
||||||
|
* _startWithVideoMuted: boolean
|
||||||
* }}
|
* }}
|
||||||
*/
|
*/
|
||||||
function _mapStateToProps(state: Object) {
|
function _mapStateToProps(state: Object) {
|
||||||
|
@ -349,7 +367,9 @@ function _mapStateToProps(state: Object) {
|
||||||
_avatarURL: state.settings.avatarURL,
|
_avatarURL: state.settings.avatarURL,
|
||||||
_email: state.settings.email,
|
_email: state.settings.email,
|
||||||
_name: state.settings.name,
|
_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.
|
* 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');
|
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
|
// @flow
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
SET_AUDIO_MUTED,
|
||||||
SET_AVATAR_URL,
|
SET_AVATAR_URL,
|
||||||
SET_EMAIL,
|
SET_EMAIL,
|
||||||
SET_NAME,
|
SET_NAME,
|
||||||
SET_SERVER_URL
|
SET_SERVER_URL,
|
||||||
|
SET_VIDEO_MUTED
|
||||||
} from './actionTypes';
|
} from './actionTypes';
|
||||||
|
|
||||||
import { normalizeServerURL } from '../utils';
|
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 { setEmail, setName } from '../actions';
|
||||||
|
|
||||||
import ServerURLField from './ServerURLField';
|
import ServerURLField from './ServerURLField';
|
||||||
|
import StartMutedToggles from './StartMutedToggles';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
|
||||||
|
@ -98,6 +99,7 @@ class SettingsDrawer extends Component<Props, *> {
|
||||||
value = { this.props._email } />
|
value = { this.props._email } />
|
||||||
</form>
|
</form>
|
||||||
<ServerURLField />
|
<ServerURLField />
|
||||||
|
<StartMutedToggles />
|
||||||
</SettingsContainer>
|
</SettingsContainer>
|
||||||
</DrawerContainer>
|
</DrawerContainer>
|
||||||
</AkCustomDrawer>
|
</AkCustomDrawer>
|
||||||
|
|
146
app/features/settings/components/StartMutedToggles.js
Normal file
146
app/features/settings/components/StartMutedToggles.js
Normal 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);
|
38
app/features/settings/components/ToggleWithLabel.js
Normal file
38
app/features/settings/components/ToggleWithLabel.js
Normal 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;
|
|
@ -5,17 +5,21 @@ import os from 'os';
|
||||||
import { getAvatarURL } from 'js-utils';
|
import { getAvatarURL } from 'js-utils';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
SET_AUDIO_MUTED,
|
||||||
SET_AVATAR_URL,
|
SET_AVATAR_URL,
|
||||||
SET_EMAIL,
|
SET_EMAIL,
|
||||||
SET_NAME,
|
SET_NAME,
|
||||||
SET_SERVER_URL
|
SET_SERVER_URL,
|
||||||
|
SET_VIDEO_MUTED
|
||||||
} from './actionTypes';
|
} from './actionTypes';
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
avatarURL: string,
|
avatarURL: string,
|
||||||
email: string,
|
email: string,
|
||||||
name: string,
|
name: string,
|
||||||
serverURL: ?string
|
serverURL: ?string,
|
||||||
|
startWithAudioMuted: boolean,
|
||||||
|
startWithVideoMuted: boolean
|
||||||
};
|
};
|
||||||
|
|
||||||
const username = os.userInfo().username;
|
const username = os.userInfo().username;
|
||||||
|
@ -24,7 +28,9 @@ const DEFAULT_STATE = {
|
||||||
avatarURL: getAvatarURL({ id: username }),
|
avatarURL: getAvatarURL({ id: username }),
|
||||||
email: '',
|
email: '',
|
||||||
name: username,
|
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) => {
|
export default (state: State = DEFAULT_STATE, action: Object) => {
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
|
case SET_AUDIO_MUTED:
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
startWithAudioMuted: action.startWithAudioMuted
|
||||||
|
};
|
||||||
|
|
||||||
case SET_AVATAR_URL:
|
case SET_AVATAR_URL:
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
|
@ -60,6 +72,12 @@ export default (state: State = DEFAULT_STATE, action: Object) => {
|
||||||
serverURL: action.serverURL
|
serverURL: action.serverURL
|
||||||
};
|
};
|
||||||
|
|
||||||
|
case SET_VIDEO_MUTED:
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
startWithVideoMuted: action.startWithVideoMuted
|
||||||
|
};
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
8
app/features/settings/styled/Label.js
Normal file
8
app/features/settings/styled/Label.js
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
export default styled.label`
|
||||||
|
cursor: default;
|
||||||
|
margin: 0 4px;
|
||||||
|
`;
|
9
app/features/settings/styled/ToggleContainer.js
Normal file
9
app/features/settings/styled/ToggleContainer.js
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
export default styled.div`
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
padding: 8px 0;
|
||||||
|
`;
|
9
app/features/settings/styled/TogglesContainer.js
Normal file
9
app/features/settings/styled/TogglesContainer.js
Normal file
|
@ -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 AvatarContainer } from './AvatarContainer';
|
||||||
|
export { default as Label } from './Label';
|
||||||
export { default as SettingsContainer } from './SettingsContainer';
|
export { default as SettingsContainer } from './SettingsContainer';
|
||||||
|
export { default as ToggleContainer } from './ToggleContainer';
|
||||||
|
export { default as TogglesContainer } from './TogglesContainer';
|
||||||
|
|
5092
package-lock.json
generated
5092
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -40,6 +40,7 @@
|
||||||
"@atlaskit/page": "7.0.1",
|
"@atlaskit/page": "7.0.1",
|
||||||
"@atlaskit/spinner": "8.0.0",
|
"@atlaskit/spinner": "8.0.0",
|
||||||
"@atlaskit/theme": "3.2.2",
|
"@atlaskit/theme": "3.2.2",
|
||||||
|
"@atlaskit/toggle": "4.0.3",
|
||||||
"electron-debug": "2.0.0",
|
"electron-debug": "2.0.0",
|
||||||
"electron-is-dev": "0.3.0",
|
"electron-is-dev": "0.3.0",
|
||||||
"electron-window-state": "4.1.1",
|
"electron-window-state": "4.1.1",
|
||||||
|
|
Loading…
Reference in a new issue