From bab4f420fd7a17176db1eb4417f848ba01c33997 Mon Sep 17 00:00:00 2001 From: Torjus Date: Fri, 20 Jul 2018 10:49:03 +0200 Subject: [PATCH] Add mode switch (democratic, filmstrip) to settings --- app/lib/components/Filmstrip.jsx | 3 +- app/lib/components/Peers.jsx | 16 ++++++--- app/lib/components/Room.jsx | 12 +++---- app/lib/components/Settings.jsx | 62 ++++++++++++++++++++------------ app/lib/redux/reducers/room.js | 7 +++- app/lib/redux/stateActions.js | 6 ++++ 6 files changed, 70 insertions(+), 36 deletions(-) diff --git a/app/lib/components/Filmstrip.jsx b/app/lib/components/Filmstrip.jsx index f1607fd..5e2f870 100644 --- a/app/lib/components/Filmstrip.jsx +++ b/app/lib/components/Filmstrip.jsx @@ -2,7 +2,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import classnames from 'classnames'; -import * as appPropTypes from './appPropTypes'; import Peer from './Peer'; class Filmstrip extends Component @@ -65,7 +64,7 @@ class Filmstrip extends Component Filmstrip.propTypes = { activeSpeakerName : PropTypes.string, advancedMode : PropTypes.bool, - peers : appPropTypes.peers + peers : PropTypes.object.isRequired }; const mapStateToProps = (state) => diff --git a/app/lib/components/Peers.jsx b/app/lib/components/Peers.jsx index b219db5..de8cbbc 100644 --- a/app/lib/components/Peers.jsx +++ b/app/lib/components/Peers.jsx @@ -14,14 +14,22 @@ class Peers extends React.Component constructor(props) { super(props); + this.state = { peerWidth : 400, peerHeight : 300 }; + + this.peersRef = React.createRef(); } updateDimensions = () => { + if (!this.peersRef.current) + { + return; + } + const n = this.props.boxes; if (n === 0) @@ -29,8 +37,8 @@ class Peers extends React.Component return; } - const width = this.refs.peers.clientWidth; - const height = this.refs.peers.clientHeight; + const width = this.peersRef.current.clientWidth; + const height = this.peersRef.current.clientHeight; let x, y, space; @@ -64,7 +72,7 @@ class Peers extends React.Component window.addEventListener('resize', this.updateDimensions); const observer = new ResizeObserver(this.updateDimensions); - observer.observe(this.refs.peers); + observer.observe(this.peersRef.current); } componentWillUnmount() @@ -92,7 +100,7 @@ class Peers extends React.Component }; return ( -
+
{ peers.map((peer) => { diff --git a/app/lib/components/Room.jsx b/app/lib/components/Room.jsx index 0e81374..6aeb26e 100644 --- a/app/lib/components/Room.jsx +++ b/app/lib/components/Room.jsx @@ -65,6 +65,11 @@ class Room extends React.Component onRoomLinkCopy } = this.props; + const View = { + filmstrip : Filmstrip, + democratic : Peers + }[room.mode]; + return (
@@ -122,12 +127,7 @@ class Room extends React.Component
- - {false && ( - - )} +
{ - this.props.handleChangeWebcam(webcam); + this.props.handleChangeWebcam(webcam.value); this.setState({ - selectedCamera: webcam + selectedCamera : webcam }); } handleChangeAudioDevice = (device) => { - this.props.handleChangeAudioDevice(device); + this.props.handleChangeAudioDevice(device.value); this.setState({ - selectedAudioDevice: device + selectedAudioDevice : device }); } + handleChangeMode = (mode) => + { + this.setState({ + selectedMode : mode + }); + + this.props.handleChangeMode(mode.value); + }; + render() { const { @@ -75,6 +93,7 @@ class Settings extends React.Component onChange={this.handleChangeWebcam} placeholder={webcamText} /> + + + +
); @@ -101,7 +127,8 @@ Settings.propTypes = room : appPropTypes.Room.isRequired, handleChangeWebcam : PropTypes.func.isRequired, handleChangeAudioDevice : PropTypes.func.isRequired, - onToggleAdvancedMode : PropTypes.func.isRequired + onToggleAdvancedMode : PropTypes.func.isRequired, + handleChangeMode : PropTypes.func.isRequired }; const mapStateToProps = (state) => @@ -112,22 +139,11 @@ const mapStateToProps = (state) => }; }; -const mapDispatchToProps = (dispatch) => -{ - return { - handleChangeWebcam : (device) => - { - dispatch(requestActions.changeWebcam(device.value)); - }, - handleChangeAudioDevice : (device) => - { - dispatch(requestActions.changeAudioDevice(device.value)); - }, - onToggleAdvancedMode : () => - { - dispatch(stateActions.toggleAdvancedMode()); - } - }; +const mapDispatchToProps = { + handleChangeWebcam : requestActions.changeWebcam, + handleChangeAudioDevice : requestActions.changeAudioDevice, + onToggleAdvancedMode : stateActions.toggleAdvancedMode, + handleChangeMode : stateActions.setDisplayMode }; const SettingsContainer = connect( diff --git a/app/lib/redux/reducers/room.js b/app/lib/redux/reducers/room.js index e92196b..4a787de 100644 --- a/app/lib/redux/reducers/room.js +++ b/app/lib/redux/reducers/room.js @@ -6,7 +6,8 @@ const initialState = showSettings : false, advancedMode : false, fullScreenConsumer : null, // ConsumerID - toolbarsVisible : true + toolbarsVisible : true, + mode : 'democratic' }; const room = (state = initialState, action) => @@ -65,6 +66,10 @@ const room = (state = initialState, action) => return { ...state, toolbarsVisible }; } + + case 'SET_DISPLAY_MODE': + return { ...state, mode: action.payload.mode }; + default: return state; } diff --git a/app/lib/redux/stateActions.js b/app/lib/redux/stateActions.js index 9dcbb41..2c51b02 100644 --- a/app/lib/redux/stateActions.js +++ b/app/lib/redux/stateActions.js @@ -93,6 +93,12 @@ export const toggleAdvancedMode = () => }; }; +export const setDisplayMode = (mode) => + ({ + type : 'SET_DISPLAY_MODE', + payload : { mode } + }); + export const setAudioOnlyState = (enabled) => { return {