From 12efa3eb2cccd48816bda68e9fc75a01021759ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= Date: Tue, 26 Nov 2019 12:44:04 +0100 Subject: [PATCH 1/3] Fixed sizing of democratic view --- app/src/components/MeetingViews/Democratic.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/src/components/MeetingViews/Democratic.js b/app/src/components/MeetingViews/Democratic.js index ca735bd..e3a61bb 100644 --- a/app/src/components/MeetingViews/Democratic.js +++ b/app/src/components/MeetingViews/Democratic.js @@ -91,11 +91,11 @@ class Democratic extends React.PureComponent break; } } - if (Math.ceil(this.state.peerWidth) !== Math.ceil(0.9 * x)) + if (Math.ceil(this.state.peerWidth) !== Math.ceil(0.94 * x)) { this.setState({ - peerWidth : 0.95 * x, - peerHeight : 0.95 * y + peerWidth : 0.94 * x, + peerHeight : 0.94 * y }); } }; @@ -160,9 +160,9 @@ class Democratic extends React.PureComponent { return ( From 4c39a48d4eae7f4c94f35d65d2c3acd1bfd2a56f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= Date: Tue, 26 Nov 2019 12:48:20 +0100 Subject: [PATCH 2/3] Fade out passive speakers. --- app/src/components/Containers/Peer.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/src/components/Containers/Peer.js b/app/src/components/Containers/Peer.js index 8a7f20f..fc79018 100644 --- a/app/src/components/Containers/Peer.js +++ b/app/src/components/Containers/Peer.js @@ -45,7 +45,14 @@ const styles = (theme) => }, '&.active-speaker' : { + transition : 'filter .2s', + filter : 'grayscale(0)', borderColor : 'var(--active-speaker-border-color)' + }, + '&:not(.active-speaker)' : + { + transition : 'filter 2s', + filter : 'grayscale(0.75)' } }, fab : From b163fd0a72bccf7252bb75ea0f4d0b59dd7f84a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= Date: Tue, 26 Nov 2019 12:49:36 +0100 Subject: [PATCH 3/3] Update selector and containers. Peers now don't jump around on the screen when active speaker changes. --- app/src/components/Containers/Peer.js | 8 ++++---- app/src/components/Containers/SpeakerPeer.js | 6 +++--- app/src/components/MeetingViews/Filmstrip.js | 2 +- app/src/components/Selectors.js | 12 ++++++------ 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/app/src/components/Containers/Peer.js b/app/src/components/Containers/Peer.js index fc79018..5cc1554 100644 --- a/app/src/components/Containers/Peer.js +++ b/app/src/components/Containers/Peer.js @@ -519,17 +519,17 @@ Peer.propTypes = theme : PropTypes.object.isRequired }; -const makeMapStateToProps = (initialState, props) => +const makeMapStateToProps = (initialState, { id }) => { const getPeerConsumers = makePeerConsumerSelector(); const mapStateToProps = (state) => { return { - peer : state.peers[props.id], - ...getPeerConsumers(state, props), + peer : state.peers[id], + ...getPeerConsumers(state, id), windowConsumer : state.room.windowConsumer, - activeSpeaker : props.id === state.room.activeSpeakerId + activeSpeaker : id === state.room.activeSpeakerId }; }; diff --git a/app/src/components/Containers/SpeakerPeer.js b/app/src/components/Containers/SpeakerPeer.js index 011b93c..fa3300b 100644 --- a/app/src/components/Containers/SpeakerPeer.js +++ b/app/src/components/Containers/SpeakerPeer.js @@ -190,13 +190,13 @@ SpeakerPeer.propTypes = classes : PropTypes.object.isRequired }; -const mapStateToProps = (state, props) => +const mapStateToProps = (state, { id }) => { const getPeerConsumers = makePeerConsumerSelector(); return { - peer : state.peers[props.id], - ...getPeerConsumers(state, props) + peer : state.peers[id], + ...getPeerConsumers(state, id) }; }; diff --git a/app/src/components/MeetingViews/Filmstrip.js b/app/src/components/MeetingViews/Filmstrip.js index fde6515..0403ce4 100644 --- a/app/src/components/MeetingViews/Filmstrip.js +++ b/app/src/components/MeetingViews/Filmstrip.js @@ -319,7 +319,7 @@ const mapStateToProps = (state) => myId : state.me.id, spotlights : state.room.spotlights, spotlightsLength : spotlightsLengthSelector(state), - boxes : videoBoxesSelector(state), + boxes : videoBoxesSelector(state) }; }; diff --git a/app/src/components/Selectors.js b/app/src/components/Selectors.js index d3e293d..966fd9b 100644 --- a/app/src/components/Selectors.js +++ b/app/src/components/Selectors.js @@ -5,8 +5,8 @@ const consumersSelect = (state) => state.consumers; const spotlightsSelector = (state) => state.room.spotlights; const peersSelector = (state) => state.peers; const lobbyPeersSelector = (state) => state.lobbyPeers; -const getPeerConsumers = (state, props) => - (state.peers[props.id] ? state.peers[props.id].consumers : null); +const getPeerConsumers = (state, id) => + (state.peers[id] ? state.peers[id].consumers : null); const getAllConsumers = (state) => state.consumers; const peersKeySelector = createSelector( peersSelector, @@ -70,12 +70,12 @@ export const spotlightsLengthSelector = createSelector( export const spotlightPeersSelector = createSelector( spotlightsSelector, - peersSelector, + peersKeySelector, (spotlights, peers) => - spotlights.reduce((result, peerId) => + peers.reduce((result, peerId) => { - if (peers[peerId]) - result.push(peers[peerId]); + if (spotlights.includes(peerId)) + result.push(peerId); return result; }, [])