Update selector and containers. Peers now don't jump around on the screen when active speaker changes.
parent
4c39a48d4e
commit
b163fd0a72
|
|
@ -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
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -319,7 +319,7 @@ const mapStateToProps = (state) =>
|
|||
myId : state.me.id,
|
||||
spotlights : state.room.spotlights,
|
||||
spotlightsLength : spotlightsLengthSelector(state),
|
||||
boxes : videoBoxesSelector(state),
|
||||
boxes : videoBoxesSelector(state)
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}, [])
|
||||
|
|
|
|||
Loading…
Reference in New Issue