const mapStateToProps = (state) =>
{
return {
- peer : state.peers[props.name],
- ...getPeerConsumers(state, props),
- volume : state.peerVolumes[props.name]
+ peer : state.peers[props.name],
+ ...getPeerConsumers(state, props)
};
};
@@ -292,5 +250,16 @@ const makeMapStateToProps = (initialState, props) =>
};
export default withRoomContext(connect(
- makeMapStateToProps
+ makeMapStateToProps,
+ null,
+ null,
+ {
+ areStatesEqual : (next, prev) =>
+ {
+ return (
+ prev.peers === next.peers &&
+ prev.consumers === next.consumers
+ );
+ }
+ }
)(withStyles(styles)(ListPeer)));
\ No newline at end of file
diff --git a/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js b/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js
index 1b6655f..e1675ba 100644
--- a/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js
+++ b/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js
@@ -1,7 +1,8 @@
import React from 'react';
import { connect } from 'react-redux';
import {
- passivePeersSelector
+ passivePeersSelector,
+ spotlightPeersSelector
} from '../../Selectors';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
@@ -9,6 +10,7 @@ import { withRoomContext } from '../../../RoomContext';
import PropTypes from 'prop-types';
import ListPeer from './ListPeer';
import ListMe from './ListMe';
+import Volume from '../../Containers/Volume';
const styles = (theme) =>
({
@@ -75,7 +77,7 @@ class ParticipantList extends React.PureComponent
advancedMode,
passivePeers,
selectedPeerName,
- spotlights,
+ spotlightPeers,
classes
} = this.props;
@@ -88,15 +90,17 @@ class ParticipantList extends React.PureComponent
- Participants in Spotlight:
- { spotlights.map((peerName) => (
+ { spotlightPeers.map((peer) => (
- roomClient.setSelectedPeer(peerName)}
+ onClick={() => roomClient.setSelectedPeer(peer.name)}
>
-
+
+
+
))}
@@ -126,16 +130,18 @@ ParticipantList.propTypes =
advancedMode : PropTypes.bool,
passivePeers : PropTypes.array,
selectedPeerName : PropTypes.string,
- spotlights : PropTypes.array.isRequired,
+ spotlightPeers : PropTypes.array,
classes : PropTypes.object.isRequired
};
const mapStateToProps = (state) =>
- ({
+{
+ return {
passivePeers : passivePeersSelector(state),
selectedPeerName : state.room.selectedPeerName,
- spotlights : state.room.spotlights
- });
+ spotlightPeers : spotlightPeersSelector(state)
+ };
+};
const ParticipantListContainer = withRoomContext(connect(
mapStateToProps,
diff --git a/app/src/components/MeetingViews/Democratic.js b/app/src/components/MeetingViews/Democratic.js
index 14211d6..0bf6e8e 100644
--- a/app/src/components/MeetingViews/Democratic.js
+++ b/app/src/components/MeetingViews/Democratic.js
@@ -1,6 +1,7 @@
import React from 'react';
import { connect } from 'react-redux';
import {
+ spotlightPeersSelector,
peersLengthSelector,
videoBoxesSelector,
spotlightsLengthSelector
@@ -117,7 +118,7 @@ class Democratic extends React.PureComponent
const {
advancedMode,
peersLength,
- spotlights,
+ spotlightsPeers,
spotlightsLength,
classes
} = this.props;
@@ -134,13 +135,13 @@ class Democratic extends React.PureComponent
advancedMode={advancedMode}
style={style}
/>
- { spotlights.map((peerName) =>
+ { spotlightsPeers.map((peer) =>
{
return (
);
@@ -162,7 +163,7 @@ Democratic.propTypes =
peersLength : PropTypes.number,
boxes : PropTypes.number,
spotlightsLength : PropTypes.number,
- spotlights : PropTypes.array.isRequired,
+ spotlightsPeers : PropTypes.array.isRequired,
classes : PropTypes.object.isRequired
};
@@ -171,7 +172,7 @@ const mapStateToProps = (state) =>
return {
peersLength : peersLengthSelector(state),
boxes : videoBoxesSelector(state),
- spotlights : state.room.spotlights,
+ spotlightsPeers : spotlightPeersSelector(state),
spotlightsLength : spotlightsLengthSelector(state)
};
};
@@ -184,6 +185,7 @@ export default connect(
areStatesEqual : (next, prev) =>
{
return (
+ prev.peers === next.peers &&
prev.producers === next.producers &&
prev.consumers === next.consumers &&
prev.spotlights === next.spotlights
diff --git a/app/src/components/Notifications/Notifications.js b/app/src/components/Notifications/Notifications.js
index 105467c..60553f9 100644
--- a/app/src/components/Notifications/Notifications.js
+++ b/app/src/components/Notifications/Notifications.js
@@ -81,5 +81,17 @@ const mapDispatchToProps = (dispatch) =>
});
export default withSnackbar(
- connect(mapStateToProps, mapDispatchToProps)(Notifications)
+ connect(
+ mapStateToProps,
+ mapDispatchToProps,
+ null,
+ {
+ areStatesEqual : (next, prev) =>
+ {
+ return (
+ prev.notifications === next.notifications
+ );
+ }
+ }
+ )(Notifications)
);
diff --git a/app/src/components/PeerAudio/AudioPeers.js b/app/src/components/PeerAudio/AudioPeers.js
index b9ffdcd..671f4a2 100644
--- a/app/src/components/PeerAudio/AudioPeers.js
+++ b/app/src/components/PeerAudio/AudioPeers.js
@@ -38,7 +38,17 @@ const mapStateToProps = (state) =>
});
const AudioPeersContainer = connect(
- mapStateToProps
+ mapStateToProps,
+ null,
+ null,
+ {
+ areStatesEqual : (next, prev) =>
+ {
+ return (
+ prev.consumers === next.consumers
+ );
+ }
+ }
)(AudioPeers);
export default AudioPeersContainer;
diff --git a/app/src/components/Selectors.js b/app/src/components/Selectors.js
index 0497119..c21c21f 100644
--- a/app/src/components/Selectors.js
+++ b/app/src/components/Selectors.js
@@ -2,10 +2,15 @@ import { createSelector } from 'reselect';
const producersSelect = (state) => state.producers;
const consumersSelect = (state) => state.consumers;
-
-export const spotlightsSelector = (state) => state.room.spotlights;
-
+const spotlightsSelector = (state) => state.room.spotlights;
const peersSelector = (state) => state.peers;
+const getPeerConsumers = (state, props) =>
+ (state.peers[props.name] ? state.peers[props.name].consumers : null);
+const getAllConsumers = (state) => state.consumers;
+const peersKeySelector = createSelector(
+ peersSelector,
+ (peers) => Object.keys(peers)
+);
export const micProducersSelector = createSelector(
producersSelect,
@@ -54,13 +59,20 @@ export const screenConsumerSelector = createSelector(
export const spotlightsLengthSelector = createSelector(
spotlightsSelector,
- (spotlights) => (spotlights ? spotlights.length : 0)
+ (spotlights) => spotlights.length
);
export const spotlightPeersSelector = createSelector(
spotlightsSelector,
peersSelector,
- (spotlights, peers) => spotlights.map((peerName) => peers[peerName])
+ (spotlights, peers) =>
+ spotlights.reduce((result, peerName) =>
+ {
+ if (peers[peerName])
+ result.push(peers[peerName]);
+
+ return result;
+ }, [])
);
export const peersLengthSelector = createSelector(
@@ -68,11 +80,6 @@ export const peersLengthSelector = createSelector(
(peers) => Object.values(peers).length
);
-const peersKeySelector = createSelector(
- peersSelector,
- (peers) => Object.keys(peers)
-);
-
export const passivePeersSelector = createSelector(
peersKeySelector,
spotlightsSelector,
@@ -101,10 +108,6 @@ export const meProducersSelector = createSelector(
}
);
-const getPeerConsumers = (state, props) =>
- (state.peers[props.name] ? state.peers[props.name].consumers : null);
-const getAllConsumers = (state) => state.consumers;
-
export const makePeerConsumerSelector = () =>
{
return createSelector(
diff --git a/app/src/components/Settings/Settings.js b/app/src/components/Settings/Settings.js
index f251ea1..cdccb43 100644
--- a/app/src/components/Settings/Settings.js
+++ b/app/src/components/Settings/Settings.js
@@ -215,5 +215,15 @@ const mapDispatchToProps = {
export default withRoomContext(connect(
mapStateToProps,
- mapDispatchToProps
+ mapDispatchToProps,
+ null,
+ {
+ areStatesEqual : (next, prev) =>
+ {
+ return (
+ prev.me === next.me &&
+ prev.room === next.room
+ );
+ }
+ }
)(withStyles(styles)(Settings)));
\ No newline at end of file
diff --git a/app/src/components/VideoContainers/FullScreenView.js b/app/src/components/VideoContainers/FullScreenView.js
index 0e53a4a..85a9e0d 100644
--- a/app/src/components/VideoContainers/FullScreenView.js
+++ b/app/src/components/VideoContainers/FullScreenView.js
@@ -161,5 +161,16 @@ const mapDispatchToProps = (dispatch) =>
export default connect(
mapStateToProps,
- mapDispatchToProps
+ mapDispatchToProps,
+ null,
+ {
+ areStatesEqual : (next, prev) =>
+ {
+ return (
+ prev.consumers[prev.room.fullScreenConsumer] ===
+ next.consumers[next.room.fullScreenConsumer] &&
+ prev.room.toolbarsVisible === next.room.toolbarsVisible
+ );
+ }
+ }
)(withStyles(styles)(FullScreenView));
diff --git a/app/src/components/VideoContainers/VideoView.js b/app/src/components/VideoContainers/VideoView.js
index a8608c3..2d2852c 100644
--- a/app/src/components/VideoContainers/VideoView.js
+++ b/app/src/components/VideoContainers/VideoView.js
@@ -132,81 +132,6 @@ const styles = () =>
fontSize : 11,
color : 'rgba(255, 255, 255, 0.55)'
}
- },
- volume :
- {
- position : 'absolute',
- top : 0,
- bottom : 0,
- right : 2,
- width : 10,
- display : 'flex',
- flexDirection : 'column',
- justifyContent : 'center',
- alignItems : 'center'
- },
- volumeBar :
- {
- width : 6,
- borderRadius : 6,
- background : 'rgba(yellow, 0.65)',
- transitionProperty : 'height background-color',
- transitionDuration : '0.25s',
- '&.level0' :
- {
- height : 0,
- backgroundColor : 'rgba(255, 255, 0, 0.65)'
- },
- '&.level1' :
- {
- height : '10%',
- backgroundColor : 'rgba(255, 255, 0, 0.65)'
- },
- '&.level2' :
- {
- height : '20%',
- backgroundColor : 'rgba(255, 255, 0, 0.65)'
- },
- '&.level3' :
- {
- height : '30%',
- backgroundColor : 'rgba(255, 255, 0, 0.65)'
- },
- '&.level4' :
- {
- height : '40%',
- backgroundColor : 'rgba(255, 165, 0, 0.65)'
- },
- '&.level5' :
- {
- height : '50%',
- backgroundColor : 'rgba(255, 165, 0, 0.65)'
- },
- '&.level6' :
- {
- height : '60%',
- backgroundColor : 'rgba(255, 0, 0, 0.65)'
- },
- '&.level7' :
- {
- height : '70%',
- backgroundColor : 'rgba(255, 0, 0, 0.65)'
- },
- '&.level8' :
- {
- height : '80%',
- backgroundColor : 'rgba(0, 0, 0, 0.65)'
- },
- '&.level9' :
- {
- height : '90%',
- backgroundColor : 'rgba(0, 0, 0, 0.65)'
- },
- '&.level10' :
- {
- height : '100%',
- backgroundColor : 'rgba(0, 0, 0, 0.65)'
- }
}
});
@@ -218,15 +143,10 @@ class VideoView extends React.PureComponent
this.state =
{
- volume : 0, // Integer from 0 to 10.,
videoWidth : null,
videoHeight : null
};
- // Latest received video track.
- // @type {MediaStreamTrack}
- this._audioTrack = null;
-
// Latest received video track.
// @type {MediaStreamTrack}
this._videoTrack = null;
@@ -240,7 +160,6 @@ class VideoView extends React.PureComponent
const {
isMe,
peer,
- volume,
showPeerInfo,
videoContain,
advancedMode,
@@ -249,6 +168,7 @@ class VideoView extends React.PureComponent
audioCodec,
videoCodec,
onChangeDisplayName,
+ children,
classes
} = this.props;
@@ -331,18 +251,16 @@ class VideoView extends React.PureComponent
muted={isMe}
/>
-
+ {children}
);
}
componentDidMount()
{
- const { audioTrack, videoTrack } = this.props;
+ const { videoTrack } = this.props;
- this._setTracks(audioTrack, videoTrack);
+ this._setTracks(videoTrack);
}
componentWillUnmount()
@@ -352,18 +270,17 @@ class VideoView extends React.PureComponent
componentWillReceiveProps(nextProps)
{
- const { audioTrack, videoTrack } = nextProps;
+ const { videoTrack } = nextProps;
- this._setTracks(audioTrack, videoTrack);
+ this._setTracks(videoTrack);
}
- _setTracks(audioTrack, videoTrack)
+ _setTracks(videoTrack)
{
- if (this._audioTrack === audioTrack && this._videoTrack === videoTrack)
+ if (this._videoTrack === videoTrack)
return;
- this._audioTrack = audioTrack;
this._videoTrack = videoTrack;
clearInterval(this._videoResolutionTimer);
@@ -371,13 +288,10 @@ class VideoView extends React.PureComponent
const { video } = this.refs;
- if (audioTrack || videoTrack)
+ if (videoTrack)
{
const stream = new MediaStream();
- if (audioTrack)
- stream.addTrack(audioTrack);
-
if (videoTrack)
stream.addTrack(videoTrack);
@@ -425,14 +339,13 @@ VideoView.propTypes =
showPeerInfo : PropTypes.bool,
videoContain : PropTypes.bool,
advancedMode : PropTypes.bool,
- audioTrack : PropTypes.any,
- volume : PropTypes.number,
videoTrack : PropTypes.any,
videoVisible : PropTypes.bool.isRequired,
videoProfile : PropTypes.string,
audioCodec : PropTypes.string,
videoCodec : PropTypes.string,
onChangeDisplayName : PropTypes.func,
+ children : PropTypes.object,
classes : PropTypes.object.isRequired
};
diff --git a/app/src/components/VideoWindow/VideoWindow.js b/app/src/components/VideoWindow/VideoWindow.js
index f7bd796..7d19905 100644
--- a/app/src/components/VideoWindow/VideoWindow.js
+++ b/app/src/components/VideoWindow/VideoWindow.js
@@ -66,7 +66,17 @@ const mapDispatchToProps = (dispatch) =>
const VideoWindowContainer = connect(
mapStateToProps,
- mapDispatchToProps
+ mapDispatchToProps,
+ null,
+ {
+ areStatesEqual : (next, prev) =>
+ {
+ return (
+ prev.consumers[prev.room.windowConsumer] ===
+ next.consumers[next.room.windowConsumer]
+ );
+ }
+ }
)(VideoWindow);
export default VideoWindowContainer;