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

View File

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

View File

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

View File

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

View File

@ -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;
}, [])