{ screenConsumer ?
@@ -267,18 +271,20 @@ ListPeer.propTypes =
micConsumer : appPropTypes.Consumer,
webcamConsumer : appPropTypes.Consumer,
screenConsumer : appPropTypes.Consumer,
+ volume : PropTypes.number,
classes : PropTypes.object.isRequired
};
-const makeMapStateToProps = () =>
+const makeMapStateToProps = (initialState, props) =>
{
const getPeerConsumers = makePeerConsumerSelector();
- const mapStateToProps = (state, props) =>
+ const mapStateToProps = (state) =>
{
return {
- peer : state.peers[props.name],
- ...getPeerConsumers(state, props)
+ peer : state.peers[props.name],
+ ...getPeerConsumers(state, props),
+ volume : state.peerVolumes[props.name]
};
};
diff --git a/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js b/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js
index c03bfa5..1b6655f 100644
--- a/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js
+++ b/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js
@@ -1,8 +1,10 @@
import React from 'react';
import { connect } from 'react-redux';
+import {
+ passivePeersSelector
+} from '../../Selectors';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
-import * as appPropTypes from '../../appPropTypes';
import { withRoomContext } from '../../../RoomContext';
import PropTypes from 'prop-types';
import ListPeer from './ListPeer';
@@ -71,7 +73,7 @@ class ParticipantList extends React.PureComponent
const {
roomClient,
advancedMode,
- peers,
+ passivePeers,
selectedPeerName,
spotlights,
classes
@@ -86,38 +88,30 @@ class ParticipantList extends React.PureComponent
- Participants in Spotlight:
- {peers.filter((peer) =>
- {
- return (spotlights.find((spotlight) =>
- { return (spotlight === peer.name); }));
- }).map((peer) => (
+ { spotlights.map((peerName) => (
- roomClient.setSelectedPeer(peer.name)}
+ onClick={() => roomClient.setSelectedPeer(peerName)}
>
-
+
))}
- Passive Participants:
- {peers.filter((peer) =>
- {
- return !(spotlights.find((spotlight) =>
- { return (spotlight === peer.name); }));
- }).map((peer) => (
+ { passivePeers.map((peerName) => (
- roomClient.setSelectedPeer(peer.name)}
+ onClick={() => roomClient.setSelectedPeer(peerName)}
>
-
+
))}
@@ -130,25 +124,33 @@ ParticipantList.propTypes =
{
roomClient : PropTypes.any.isRequired,
advancedMode : PropTypes.bool,
- peers : PropTypes.arrayOf(appPropTypes.Peer).isRequired,
+ passivePeers : PropTypes.array,
selectedPeerName : PropTypes.string,
spotlights : PropTypes.array.isRequired,
classes : PropTypes.object.isRequired
};
const mapStateToProps = (state) =>
-{
- const peersArray = Object.values(state.peers);
-
- return {
- peers : peersArray,
+ ({
+ passivePeers : passivePeersSelector(state),
selectedPeerName : state.room.selectedPeerName,
spotlights : state.room.spotlights
- };
-};
+ });
const ParticipantListContainer = withRoomContext(connect(
- mapStateToProps
+ mapStateToProps,
+ null,
+ null,
+ {
+ areStatesEqual : (next, prev) =>
+ {
+ return (
+ prev.peers === next.peers &&
+ prev.spotlights === next.spotlights &&
+ prev.room.selectedPeerName === next.room.selectedPeerName
+ );
+ }
+ }
)(withStyles(styles)(ParticipantList)));
export default ParticipantListContainer;
diff --git a/app/src/components/MeetingViews/Democratic.js b/app/src/components/MeetingViews/Democratic.js
index a5e6772..14211d6 100644
--- a/app/src/components/MeetingViews/Democratic.js
+++ b/app/src/components/MeetingViews/Democratic.js
@@ -1,9 +1,8 @@
import React from 'react';
import { connect } from 'react-redux';
import {
- peersSelector,
+ peersLengthSelector,
videoBoxesSelector,
- spotlightsSelector,
spotlightsLengthSelector
} from '../Selectors';
import PropTypes from 'prop-types';
@@ -117,7 +116,7 @@ class Democratic extends React.PureComponent
{
const {
advancedMode,
- peers,
+ peersLength,
spotlights,
spotlightsLength,
classes
@@ -135,27 +134,20 @@ class Democratic extends React.PureComponent
advancedMode={advancedMode}
style={style}
/>
- { Object.keys(peers).map((peerName) =>
+ { spotlights.map((peerName) =>
{
- if (spotlights.find((spotlightsElement) => spotlightsElement === peerName))
- {
- return (
-
- );
- }
- else
- {
- return ('');
- }
+ return (
+
+ );
})}
- { spotlightsLength < Object.keys(peers).length ?
+ { spotlightsLength < peersLength ?
:null
}
@@ -167,7 +159,7 @@ class Democratic extends React.PureComponent
Democratic.propTypes =
{
advancedMode : PropTypes.bool,
- peers : PropTypes.object.isRequired,
+ peersLength : PropTypes.number,
boxes : PropTypes.number,
spotlightsLength : PropTypes.number,
spotlights : PropTypes.array.isRequired,
@@ -177,13 +169,25 @@ Democratic.propTypes =
const mapStateToProps = (state) =>
{
return {
- peers : peersSelector(state),
+ peersLength : peersLengthSelector(state),
boxes : videoBoxesSelector(state),
- spotlights : spotlightsSelector(state),
+ spotlights : state.room.spotlights,
spotlightsLength : spotlightsLengthSelector(state)
};
};
export default connect(
- mapStateToProps
+ mapStateToProps,
+ null,
+ null,
+ {
+ areStatesEqual : (next, prev) =>
+ {
+ return (
+ prev.producers === next.producers &&
+ prev.consumers === next.consumers &&
+ prev.spotlights === next.spotlights
+ );
+ }
+ }
)(withStyles(styles)(Democratic));
diff --git a/app/src/components/Room.js b/app/src/components/Room.js
index 1f64460..aa4bf0f 100644
--- a/app/src/components/Room.js
+++ b/app/src/components/Room.js
@@ -433,5 +433,20 @@ const mapDispatchToProps = (dispatch) =>
export default withRoomContext(connect(
mapStateToProps,
- mapDispatchToProps
+ mapDispatchToProps,
+ null,
+ {
+ areStatesEqual : (next, prev) =>
+ {
+ return (
+ prev.room === next.room &&
+ prev.me.loggedIn === next.me.loggedIn &&
+ prev.me.loginEnabled === next.me.loginEnabled &&
+ prev.me.picture === next.me.picture &&
+ prev.toolarea.toolAreaOpen === next.toolarea.toolAreaOpen &&
+ prev.toolarea.unreadMessages === next.toolarea.unreadMessages &&
+ prev.toolarea.unreadFiles === next.toolarea.unreadFiles
+ );
+ }
+ }
)(withStyles(styles, { withTheme: true })(Room)));
\ No newline at end of file
diff --git a/app/src/components/Selectors.js b/app/src/components/Selectors.js
index 836d158..0497119 100644
--- a/app/src/components/Selectors.js
+++ b/app/src/components/Selectors.js
@@ -5,7 +5,7 @@ const consumersSelect = (state) => state.consumers;
export const spotlightsSelector = (state) => state.room.spotlights;
-export const peersSelector = (state) => state.peers;
+const peersSelector = (state) => state.peers;
export const micProducersSelector = createSelector(
producersSelect,
@@ -57,6 +57,28 @@ export const spotlightsLengthSelector = createSelector(
(spotlights) => (spotlights ? spotlights.length : 0)
);
+export const spotlightPeersSelector = createSelector(
+ spotlightsSelector,
+ peersSelector,
+ (spotlights, peers) => spotlights.map((peerName) => peers[peerName])
+);
+
+export const peersLengthSelector = createSelector(
+ peersSelector,
+ (peers) => Object.values(peers).length
+);
+
+const peersKeySelector = createSelector(
+ peersSelector,
+ (peers) => Object.keys(peers)
+);
+
+export const passivePeersSelector = createSelector(
+ peersKeySelector,
+ spotlightsSelector,
+ (peers, spotlights) => peers.filter((peerName) => !spotlights.includes(peerName))
+);
+
export const videoBoxesSelector = createSelector(
spotlightsLengthSelector,
screenProducersSelector,
@@ -79,7 +101,8 @@ export const meProducersSelector = createSelector(
}
);
-const getPeerConsumers = (state, props) => state.peers[props.name].consumers;
+const getPeerConsumers = (state, props) =>
+ (state.peers[props.name] ? state.peers[props.name].consumers : null);
const getAllConsumers = (state) => state.consumers;
export const makePeerConsumerSelector = () =>
@@ -89,6 +112,9 @@ export const makePeerConsumerSelector = () =>
getAllConsumers,
(consumers, allConsumers) =>
{
+ if (!consumers)
+ return null;
+
const consumersArray = consumers
.map((consumerId) => allConsumers[consumerId]);
const micConsumer =
@@ -101,4 +127,4 @@ export const makePeerConsumerSelector = () =>
return { micConsumer, webcamConsumer, screenConsumer };
}
);
-};
\ No newline at end of file
+};
diff --git a/app/src/reducers/consumers.js b/app/src/reducers/consumers.js
index 117cdc5..758efd2 100644
--- a/app/src/reducers/consumers.js
+++ b/app/src/reducers/consumers.js
@@ -25,6 +25,7 @@ const consumers = (state = initialState, action) =>
{
const { consumerId, originator } = action.payload;
const consumer = state[consumerId];
+
let newConsumer;
if (originator === 'local')
@@ -35,19 +36,11 @@ const consumers = (state = initialState, action) =>
return { ...state, [consumerId]: newConsumer };
}
- case 'SET_CONSUMER_VOLUME':
- {
- const { consumerId, volume } = action.payload;
- const consumer = state[consumerId];
- const newConsumer = { ...consumer, volume };
-
- return { ...state, [consumerId]: newConsumer };
- }
-
case 'SET_CONSUMER_RESUMED':
{
const { consumerId, originator } = action.payload;
const consumer = state[consumerId];
+
let newConsumer;
if (originator === 'local')
diff --git a/app/src/reducers/peerVolumes.js b/app/src/reducers/peerVolumes.js
new file mode 100644
index 0000000..6b89db8
--- /dev/null
+++ b/app/src/reducers/peerVolumes.js
@@ -0,0 +1,44 @@
+const initialState = {};
+
+const peerVolumes = (state = initialState, action) =>
+{
+ switch (action.type)
+ {
+ case 'SET_ME':
+ {
+ const {
+ peerName
+ } = action.payload;
+
+ return { ...state, [peerName]: 0 };
+ }
+ case 'ADD_PEER':
+ {
+ const { peer } = action.payload;
+
+ return { ...state, [peer.name]: 0 };
+ }
+
+ case 'REMOVE_PEER':
+ {
+ const { peerName } = action.payload;
+ const newState = { ...state };
+
+ delete newState[peerName];
+
+ return newState;
+ }
+
+ case 'SET_PEER_VOLUME':
+ {
+ const { peerName, volume } = action.payload;
+
+ return { ...state, [peerName]: volume };
+ }
+
+ default:
+ return state;
+ }
+};
+
+export default peerVolumes;
diff --git a/app/src/reducers/producers.js b/app/src/reducers/producers.js
index 736f70b..64aee90 100644
--- a/app/src/reducers/producers.js
+++ b/app/src/reducers/producers.js
@@ -25,6 +25,7 @@ const producers = (state = initialState, action) =>
{
const { producerId, originator } = action.payload;
const producer = state[producerId];
+
let newProducer;
if (originator === 'local')
@@ -35,19 +36,11 @@ const producers = (state = initialState, action) =>
return { ...state, [producerId]: newProducer };
}
- case 'SET_PRODUCER_VOLUME':
- {
- const { producerId, volume } = action.payload;
- const producer = state[producerId];
- const newProducer = { ...producer, volume };
-
- return { ...state, [producerId]: newProducer };
- }
-
case 'SET_PRODUCER_RESUMED':
{
const { producerId, originator } = action.payload;
const producer = state[producerId];
+
let newProducer;
if (originator === 'local')
diff --git a/app/src/reducers/rootReducer.js b/app/src/reducers/rootReducer.js
index 8b3fdce..b7e3b75 100644
--- a/app/src/reducers/rootReducer.js
+++ b/app/src/reducers/rootReducer.js
@@ -4,6 +4,7 @@ import me from './me';
import producers from './producers';
import peers from './peers';
import consumers from './consumers';
+import peerVolumes from './peerVolumes';
import notifications from './notifications';
import chatmessages from './chatmessages';
import toolarea from './toolarea';
@@ -15,6 +16,7 @@ export default combineReducers({
producers,
peers,
consumers,
+ peerVolumes,
notifications,
chatmessages,
toolarea,
diff --git a/app/src/store.js b/app/src/store.js
index 4b247db..14c8460 100644
--- a/app/src/store.js
+++ b/app/src/store.js
@@ -28,8 +28,7 @@ if (process.env.NODE_ENV !== 'production')
const reduxLogger = createLogger(
{
// filter VOLUME level actions from log
- predicate : (getState, action) => ! (action.type === 'SET_PRODUCER_VOLUME'
- || action.type === 'SET_CONSUMER_VOLUME'),
+ predicate : (getState, action) => !(action.type === 'SET_PEER_VOLUME'),
duration : true,
timestamp : false,
level : 'log',