Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update selector and containers. Peers now don't jump around on the screen when active speaker changes.

master
Håvar Aambø Fosstveit 2019-11-26 12:49:36 +01:00
parent 4c39a48d4e
commit b163fd0a72
4 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/components/Containers/Peer.js
View File

@ -519,17 +519,17 @@ Peer.propTypes =
theme : PropTypes.object.isRequired theme : PropTypes.object.isRequired
}; };
const makeMapStateToProps = (initialState, props) => const makeMapStateToProps = (initialState, { id }) =>
{ {
const getPeerConsumers = makePeerConsumerSelector(); const getPeerConsumers = makePeerConsumerSelector();
const mapStateToProps = (state) => const mapStateToProps = (state) =>
{ {
return { return {
peer : state.peers[props.id], peer : state.peers[id],
...getPeerConsumers(state, props), ...getPeerConsumers(state, id),
windowConsumer : state.room.windowConsumer, windowConsumer : state.room.windowConsumer,
activeSpeaker : props.id === state.room.activeSpeakerId activeSpeaker : id === state.room.activeSpeakerId
}; };
}; };

6
app/src/components/Containers/SpeakerPeer.js
View File

@ -190,13 +190,13 @@ SpeakerPeer.propTypes =
classes : PropTypes.object.isRequired classes : PropTypes.object.isRequired
}; };
const mapStateToProps = (state, props) => const mapStateToProps = (state, { id }) =>
{ {
const getPeerConsumers = makePeerConsumerSelector(); const getPeerConsumers = makePeerConsumerSelector();
return { return {
peer : state.peers[props.id], peer : state.peers[id],
...getPeerConsumers(state, props) ...getPeerConsumers(state, id)
}; };
}; };

2
app/src/components/MeetingViews/Filmstrip.js
View File

@ -319,7 +319,7 @@ const mapStateToProps = (state) =>
myId : state.me.id, myId : state.me.id,
spotlights : state.room.spotlights, spotlights : state.room.spotlights,
spotlightsLength : spotlightsLengthSelector(state), spotlightsLength : spotlightsLengthSelector(state),
boxes : videoBoxesSelector(state), boxes : videoBoxesSelector(state)
}; };
}; };

12
app/src/components/Selectors.js
View File

@ -5,8 +5,8 @@ const consumersSelect = (state) => state.consumers;
const spotlightsSelector = (state) => state.room.spotlights; const spotlightsSelector = (state) => state.room.spotlights;
const peersSelector = (state) => state.peers; const peersSelector = (state) => state.peers;
const lobbyPeersSelector = (state) => state.lobbyPeers; const lobbyPeersSelector = (state) => state.lobbyPeers;
const getPeerConsumers = (state, props) => const getPeerConsumers = (state, id) =>
(state.peers[props.id] ? state.peers[props.id].consumers : null); (state.peers[id] ? state.peers[id].consumers : null);
const getAllConsumers = (state) => state.consumers; const getAllConsumers = (state) => state.consumers;
const peersKeySelector = createSelector( const peersKeySelector = createSelector(
peersSelector, peersSelector,
@ -70,12 +70,12 @@ export const spotlightsLengthSelector = createSelector(
export const spotlightPeersSelector = createSelector( export const spotlightPeersSelector = createSelector(
spotlightsSelector, spotlightsSelector,
peersSelector, peersKeySelector,
(spotlights, peers) => (spotlights, peers) =>
spotlights.reduce((result, peerId) => peers.reduce((result, peerId) =>
{ {
if (peers[peerId]) if (spotlights.includes(peerId))
result.push(peers[peerId]); result.push(peerId);
return result; return result;
}, []) }, [])