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

Mostly working mediasoup v3

Browse Source
This commit is contained in:
Håvar Aambø Fosstveit
2019-06-03 11:55:23 +02:00
parent e9b946ba93
commit 30f42d6ced
31 changed files with 2563 additions and 1741 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/components/Containers/Me.js
+3 -3
View File
@@ -95,7 +95,7 @@ const Me = (props) =>
roomClient.changeDisplayName(displayName);
}}
>
<Volume name={me.name} />
<Volume id={me.id} />
</VideoView>
</div>
</div>
@@ -138,7 +138,7 @@ const mapStateToProps = (state) =>
me : state.me,
...meProducersSelector(state),
settings : state.settings,
activeSpeaker : state.me.name === state.room.activeSpeakerName
activeSpeaker : state.me.id === state.room.activeSpeakerId
};
};
@@ -153,7 +153,7 @@ export default withRoomContext(connect(
prev.me === next.me &&
prev.producers === next.producers &&
prev.settings === next.settings &&
prev.room.activeSpeakerName === next.room.activeSpeakerName
prev.room.activeSpeakerId === next.room.activeSpeakerId
);
}
}
app/src/components/Containers/Peer.js
+9 -23
View File
@@ -196,13 +196,6 @@ const Peer = (props) =>
}}
>
<div className={classnames(classes.viewContainer)} style={style}>
{ videoVisible && !webcamConsumer.supported ?
<div className={classes.videoInfo}>
<p>incompatible video</p>
</div>
:null
}
{ !videoVisible ?
<div className={classes.videoInfo}>
<p>this video is paused</p>
@@ -210,7 +203,7 @@ const Peer = (props) =>
:null
}
{ videoVisible && webcamConsumer.supported ?
{ videoVisible ?
<div
className={classnames(classes.controls, webcamHover ? 'hover' : null)}
onMouseOver={() => setWebcamHover(true)}
@@ -240,8 +233,8 @@ const Peer = (props) =>
onClick={() =>
{
micEnabled ?
roomClient.modifyPeerConsumer(peer.name, 'mic', true) :
roomClient.modifyPeerConsumer(peer.name, 'mic', false);
roomClient.modifyPeerConsumer(peer.id, 'mic', true) :
roomClient.modifyPeerConsumer(peer.id, 'mic', false);
}}
>
{ micEnabled ?
@@ -295,7 +288,7 @@ const Peer = (props) =>
audioCodec={micConsumer ? micConsumer.codec : null}
videoCodec={webcamConsumer ? webcamConsumer.codec : null}
>
<Volume name={peer.name} />
<Volume id={peer.id} />
</VideoView>
</div>
</div>
@@ -323,13 +316,6 @@ const Peer = (props) =>
}, 2000);
}}
>
{ screenVisible && !screenConsumer.supported ?
<div className={classes.videoInfo} style={style}>
<p>incompatible video</p>
</div>
:null
}
{ !screenVisible ?
<div className={classes.videoInfo} style={style}>
<p>this video is paused</p>
@@ -337,7 +323,7 @@ const Peer = (props) =>
:null
}
{ screenVisible && screenConsumer.supported ?
{ screenVisible ?
<div className={classnames(classes.viewContainer)} style={style}>
<div
className={classnames(classes.controls, screenHover ? 'hover' : null)}
@@ -418,7 +404,7 @@ Peer.propTypes =
micConsumer : appPropTypes.Consumer,
webcamConsumer : appPropTypes.Consumer,
screenConsumer : appPropTypes.Consumer,
windowConsumer : PropTypes.number,
windowConsumer : PropTypes.string,
activeSpeaker : PropTypes.bool,
style : PropTypes.object,
toggleConsumerFullscreen : PropTypes.func.isRequired,
@@ -434,10 +420,10 @@ const makeMapStateToProps = (initialState, props) =>
const mapStateToProps = (state) =>
{
return {
peer : state.peers[props.name],
peer : state.peers[props.id],
...getPeerConsumers(state, props),
windowConsumer : state.room.windowConsumer,
activeSpeaker : props.name === state.room.activeSpeakerName
activeSpeaker : props.id === state.room.activeSpeakerId
};
};
@@ -470,7 +456,7 @@ export default withRoomContext(connect(
return (
prev.peers === next.peers &&
prev.consumers === next.consumers &&
prev.room.activeSpeakerName === next.room.activeSpeakerName &&
prev.room.activeSpeakerId === next.room.activeSpeakerId &&
prev.room.windowConsumer === next.room.windowConsumer
);
}
app/src/components/Containers/Volume.js
+1 -1
View File
@@ -150,7 +150,7 @@ const makeMapStateToProps = (initialState, props) =>
const mapStateToProps = (state) =>
{
return {
volume : state.peerVolumes[props.name]
volume : state.peerVolumes[props.id]
};
};
app/src/components/Controls/Sidebar.js
+2 -2
View File
@@ -158,8 +158,8 @@ const Sidebar = (props) =>
onClick={() =>
{
micState === 'on' ?
roomClient.muteMic() :
roomClient.unmuteMic();
roomClient.disableMic() :
roomClient.enableMic();
}}
>
{ micState === 'on' ?
app/src/components/MeetingDrawer/FileSharing/File.js
+8 -8
View File
@@ -55,7 +55,7 @@ class File extends React.PureComponent
{
const {
roomClient,
torrentSupport,
canShareFiles,
file,
classes
} = this.props;
@@ -105,7 +105,7 @@ class File extends React.PureComponent
<Typography className={classes.text}>
{magnet.decode(file.magnetUri).dn}
</Typography>
{ torrentSupport ?
{ canShareFiles ?
<Button
variant='contained'
component='span'
@@ -145,17 +145,17 @@ class File extends React.PureComponent
}
File.propTypes = {
roomClient : PropTypes.object.isRequired,
torrentSupport : PropTypes.bool.isRequired,
file : PropTypes.object.isRequired,
classes : PropTypes.object.isRequired
roomClient : PropTypes.object.isRequired,
canShareFiles : PropTypes.bool.isRequired,
file : PropTypes.object.isRequired,
classes : PropTypes.object.isRequired
};
const mapStateToProps = (state, { magnetUri }) =>
{
return {
file : state.files[magnetUri],
torrentSupport : state.room.torrentSupport
file : state.files[magnetUri],
canShareFiles : state.me.canShareFiles
};
};
app/src/components/MeetingDrawer/FileSharing/FileSharing.js
+9 -9
View File
@@ -46,11 +46,11 @@ class FileSharing extends React.PureComponent
render()
{
const {
torrentSupport,
canShareFiles,
classes
} = this.props;
const buttonDescription = torrentSupport ?
const buttonDescription = canShareFiles ?
'Share file' : 'File sharing not supported';
return (
@@ -67,7 +67,7 @@ class FileSharing extends React.PureComponent
variant='contained'
component='span'
className={classes.button}
disabled={!torrentSupport}
disabled={!canShareFiles}
>
{buttonDescription}
</Button>
@@ -80,17 +80,17 @@ class FileSharing extends React.PureComponent
}
FileSharing.propTypes = {
roomClient : PropTypes.any.isRequired,
torrentSupport : PropTypes.bool.isRequired,
tabOpen : PropTypes.bool.isRequired,
classes : PropTypes.object.isRequired
roomClient : PropTypes.any.isRequired,
canShareFiles : PropTypes.bool.isRequired,
tabOpen : PropTypes.bool.isRequired,
classes : PropTypes.object.isRequired
};
const mapStateToProps = (state) =>
{
return {
torrentSupport : state.room.torrentSupport,
tabOpen : state.toolarea.currentToolTab === 'files'
canShareFiles : state.me.canShareFiles,
tabOpen : state.toolarea.currentToolTab === 'files'
};
};
app/src/components/MeetingDrawer/ParticipantList/ListPeer.js
+5 -5
View File
@@ -185,8 +185,8 @@ const ListPeer = (props) =>
{
e.stopPropagation();
screenVisible ?
roomClient.modifyPeerConsumer(peer.name, 'screen', true) :
roomClient.modifyPeerConsumer(peer.name, 'screen', false);
roomClient.modifyPeerConsumer(peer.id, 'screen', true) :
roomClient.modifyPeerConsumer(peer.id, 'screen', false);
}}
>
{ screenVisible ?
@@ -207,8 +207,8 @@ const ListPeer = (props) =>
{
e.stopPropagation();
micEnabled ?
roomClient.modifyPeerConsumer(peer.name, 'mic', true) :
roomClient.modifyPeerConsumer(peer.name, 'mic', false);
roomClient.modifyPeerConsumer(peer.id, 'mic', true) :
roomClient.modifyPeerConsumer(peer.id, 'mic', false);
}}
>
{ micEnabled ?
@@ -241,7 +241,7 @@ const makeMapStateToProps = (initialState, props) =>
const mapStateToProps = (state) =>
{
return {
peer : state.peers[props.name],
peer : state.peers[props.id],
...getPeerConsumers(state, props)
};
};
app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js
+21 -21
View File
@@ -76,7 +76,7 @@ class ParticipantList extends React.PureComponent
roomClient,
advancedMode,
passivePeers,
selectedPeerName,
selectedPeerId,
spotlightPeers,
classes
} = this.props;
@@ -92,14 +92,14 @@ class ParticipantList extends React.PureComponent
<li className={classes.listheader}>Participants in Spotlight:</li>
{ spotlightPeers.map((peer) => (
<li
key={peer.name}
key={peer.id}
className={classNames(classes.listItem, {
selected : peer.name === selectedPeerName
selected : peer.id === selectedPeerId
})}
onClick={() => roomClient.setSelectedPeer(peer.name)}
onClick={() => roomClient.setSelectedPeer(peer.id)}
>
<ListPeer name={peer.name} advancedMode={advancedMode}>
<Volume small name={peer.name} />
<ListPeer id={peer.id} advancedMode={advancedMode}>
<Volume small id={peer.id} />
</ListPeer>
</li>
))}
@@ -107,15 +107,15 @@ class ParticipantList extends React.PureComponent
<br />
<ul className={classes.list}>
<li className={classes.listheader}>Passive Participants:</li>
{ passivePeers.map((peerName) => (
{ passivePeers.map((peerId) => (
<li
key={peerName}
key={peerId}
className={classNames(classes.listItem, {
selected : peerName === selectedPeerName
selected : peerId === selectedPeerId
})}
onClick={() => roomClient.setSelectedPeer(peerName)}
onClick={() => roomClient.setSelectedPeer(peerId)}
>
<ListPeer name={peerName} advancedMode={advancedMode} />
<ListPeer id={peerId} advancedMode={advancedMode} />
</li>
))}
</ul>
@@ -126,20 +126,20 @@ class ParticipantList extends React.PureComponent
ParticipantList.propTypes =
{
roomClient : PropTypes.any.isRequired,
advancedMode : PropTypes.bool,
passivePeers : PropTypes.array,
selectedPeerName : PropTypes.string,
spotlightPeers : PropTypes.array,
classes : PropTypes.object.isRequired
roomClient : PropTypes.any.isRequired,
advancedMode : PropTypes.bool,
passivePeers : PropTypes.array,
selectedPeerId : PropTypes.string,
spotlightPeers : PropTypes.array,
classes : PropTypes.object.isRequired
};
const mapStateToProps = (state) =>
{
return {
passivePeers : passivePeersSelector(state),
selectedPeerName : state.room.selectedPeerName,
spotlightPeers : spotlightPeersSelector(state)
passivePeers : passivePeersSelector(state),
selectedPeerId : state.room.selectedPeerId,
spotlightPeers : spotlightPeersSelector(state)
};
};
@@ -153,7 +153,7 @@ const ParticipantListContainer = withRoomContext(connect(
return (
prev.peers === next.peers &&
prev.room.spotlights === next.room.spotlights &&
prev.room.selectedPeerName === next.room.selectedPeerName
prev.room.selectedPeerId === next.room.selectedPeerId
);
}
}
app/src/components/MeetingViews/Democratic.js
+2 -2
View File
@@ -139,9 +139,9 @@ class Democratic extends React.PureComponent
{
return (
<Peer
key={peer.name}
key={peer.id}
advancedMode={advancedMode}
name={peer.name}
id={peer.id}
style={style}
/>
);
app/src/components/MeetingViews/Filmstrip.js
+21 -21
View File
@@ -104,11 +104,11 @@ class Filmstrip extends React.PureComponent
// Find the name of the peer which is currently speaking. This is either
// the latest active speaker, or the manually selected peer, or, if no
// person has spoken yet, the first peer in the list of peers.
getActivePeerName = () =>
getActivePeerId = () =>
{
if (this.props.selectedPeerName)
if (this.props.selectedPeerId)
{
return this.props.selectedPeerName;
return this.props.selectedPeerId;
}
if (this.state.lastSpeaker)
@@ -116,23 +116,23 @@ class Filmstrip extends React.PureComponent
return this.state.lastSpeaker;
}
const peerNames = Object.keys(this.props.peers);
const peerIds = Object.keys(this.props.peers);
if (peerNames.length > 0)
if (peerIds.length > 0)
{
return peerNames[0];
return peerIds[0];
}
};
isSharingCamera = (peerName) => this.props.peers[peerName] &&
this.props.peers[peerName].consumers.some((consumer) =>
isSharingCamera = (peerId) => this.props.peers[peerId] &&
this.props.peers[peerId].consumers.some((consumer) =>
this.props.consumers[consumer].source === 'screen');
getRatio = () =>
{
let ratio = 4 / 3;
if (this.isSharingCamera(this.getActivePeerName()))
if (this.isSharingCamera(this.getActivePeerId()))
{
ratio *= 2;
}
@@ -202,12 +202,12 @@ class Filmstrip extends React.PureComponent
classes
} = this.props;
const activePeerName = this.getActivePeerName();
const activePeerId = this.getActivePeerId();
return (
<div className={classes.root}>
<div className={classes.activePeerContainer} ref={this.activePeerContainer}>
{ peers[activePeerName] ?
{ peers[activePeerId] ?
<div
className={classes.activePeer}
style={{
@@ -217,7 +217,7 @@ class Filmstrip extends React.PureComponent
>
<Peer
advancedMode={advancedMode}
name={activePeerName}
name={activePeerId}
/>
</div>
:null
@@ -226,23 +226,23 @@ class Filmstrip extends React.PureComponent
<div className={classes.filmStrip}>
<div className={classes.filmStripContent}>
{ Object.keys(peers).map((peerName) =>
{ Object.keys(peers).map((peerId) =>
{
if (spotlights.find((spotlightsElement) => spotlightsElement === peerName))
if (spotlights.find((spotlightsElement) => spotlightsElement === peerId))
{
return (
<div
key={peerName}
onClick={() => roomClient.setSelectedPeer(peerName)}
key={peerId}
onClick={() => roomClient.setSelectedPeer(peerId)}
className={classnames(classes.film, {
selected : this.props.selectedPeerName === peerName,
active : this.state.lastSpeaker === peerName
selected : this.props.selectedPeerId === peerId,
active : this.state.lastSpeaker === peerId
})}
>
<div className={classes.filmContent}>
<Peer
advancedMode={advancedMode}
name={peerName}
name={peerId}
/>
</div>
</div>
@@ -276,7 +276,7 @@ Filmstrip.propTypes = {
peers : PropTypes.object.isRequired,
consumers : PropTypes.object.isRequired,
myName : PropTypes.string.isRequired,
selectedPeerName : PropTypes.string,
selectedPeerId : PropTypes.string,
spotlightsLength : PropTypes.number,
spotlights : PropTypes.array.isRequired,
classes : PropTypes.object.isRequired
@@ -288,7 +288,7 @@ const mapStateToProps = (state) =>
return {
activeSpeakerName : state.room.activeSpeakerName,
selectedPeerName : state.room.selectedPeerName,
selectedPeerId : state.room.selectedPeerId,
peers : state.peers,
consumers : state.consumers,
myName : state.me.name,
app/src/components/Selectors.js
+5 -5
View File
@@ -5,7 +5,7 @@ const consumersSelect = (state) => state.consumers;
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);
(state.peers[props.id] ? state.peers[props.id].consumers : null);
const getAllConsumers = (state) => state.consumers;
const peersKeySelector = createSelector(
peersSelector,
@@ -66,10 +66,10 @@ export const spotlightPeersSelector = createSelector(
spotlightsSelector,
peersSelector,
(spotlights, peers) =>
spotlights.reduce((result, peerName) =>
spotlights.reduce((result, peerId) =>
{
if (peers[peerName])
result.push(peers[peerName]);
if (peers[peerId])
result.push(peers[peerId]);
return result;
}, [])
@@ -83,7 +83,7 @@ export const peersLengthSelector = createSelector(
export const passivePeersSelector = createSelector(
peersKeySelector,
spotlightsSelector,
(peers, spotlights) => peers.filter((peerName) => !spotlights.includes(peerName))
(peers, spotlights) => peers.filter((peerId) => !spotlights.includes(peerId))
);
export const videoBoxesSelector = createSelector(
app/src/components/VideoContainers/FullScreenView.js
-7
View File
@@ -102,13 +102,6 @@ const FullScreenView = (props) =>
return (
<div className={classes.root}>
{ consumerVisible && !consumer.supported ?
<div className={classes.incompatibleVideo}>
<p>incompatible video</p>
</div>
:null
}
<div className={classes.controls}>
<div
className={classnames(classes.button, {
app/src/components/appPropTypes.js
+14 -16
View File
@@ -5,7 +5,7 @@ export const Room = PropTypes.shape(
url : PropTypes.string.isRequired,
state : PropTypes.oneOf(
[ 'new', 'connecting', 'connected', 'closed' ]).isRequired,
activeSpeakerName : PropTypes.string
activeSpeakerId : PropTypes.string
});
export const Device = PropTypes.shape(
@@ -17,7 +17,7 @@ export const Device = PropTypes.shape(
export const Me = PropTypes.shape(
{
name : PropTypes.string.isRequired,
id : PropTypes.string.isRequired,
device : Device.isRequired,
canSendMic : PropTypes.bool.isRequired,
canSendWebcam : PropTypes.bool.isRequired,
@@ -26,30 +26,28 @@ export const Me = PropTypes.shape(
export const Producer = PropTypes.shape(
{
id : PropTypes.number.isRequired,
source : PropTypes.oneOf([ 'mic', 'webcam', 'screen' ]).isRequired,
deviceLabel : PropTypes.string,
type : PropTypes.oneOf([ 'front', 'back', 'screen' ]),
locallyPaused : PropTypes.bool.isRequired,
remotelyPaused : PropTypes.bool.isRequired,
track : PropTypes.any,
codec : PropTypes.string.isRequired
id : PropTypes.string.isRequired,
source : PropTypes.oneOf([ 'mic', 'webcam', 'screen' ]).isRequired,
deviceLabel : PropTypes.string,
type : PropTypes.oneOf([ 'front', 'back', 'screen' ]),
paused : PropTypes.bool.isRequired,
track : PropTypes.any,
codec : PropTypes.string.isRequired
});
export const Peer = PropTypes.shape(
{
name : PropTypes.string.isRequired,
id : PropTypes.string.isRequired,
displayName : PropTypes.string,
device : Device.isRequired,
consumers : PropTypes.arrayOf(PropTypes.number).isRequired
consumers : PropTypes.arrayOf(PropTypes.string).isRequired
});
export const Consumer = PropTypes.shape(
{
id : PropTypes.number.isRequired,
peerName : PropTypes.string.isRequired,
id : PropTypes.string.isRequired,
peerId : PropTypes.string.isRequired,
source : PropTypes.oneOf([ 'mic', 'webcam', 'screen' ]).isRequired,
supported : PropTypes.bool.isRequired,
locallyPaused : PropTypes.bool.isRequired,
remotelyPaused : PropTypes.bool.isRequired,
profile : PropTypes.oneOf([ 'none', 'default', 'low', 'medium', 'high' ]),
@@ -75,7 +73,7 @@ export const Message = PropTypes.shape(
export const FileEntryProps = PropTypes.shape(
{
data : PropTypes.shape({
name : PropTypes.string.isRequired,
id : PropTypes.string.isRequired,
picture : PropTypes.string,
file : PropTypes.shape({
magnet : PropTypes.string.isRequired