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

Small cleanups here and there.

master
Håvar Aambø Fosstveit 2019-10-23 12:15:22 +02:00
parent 98b902c5f8
commit 79ecaf7408
12 changed files with 68 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/Containers/HiddenPeers.js
View File

@ -96,7 +96,7 @@ class HiddenPeers extends React.PureComponent
onClick={() => openUsersTab()}
>
<p>+{hiddenPeersCount} <br /> participant
{(hiddenPeersCount === 1) ? null : 's'}
{(hiddenPeersCount > 1) && 's'}
</p>
</div>
);

23
app/src/components/Containers/Me.js
View File

@ -332,13 +332,11 @@ const Me = (props) =>
}
}}
>
{ screenState === 'on' || screenState === 'unsupported' ?
{ (screenState === 'on' || screenState === 'unsupported') &&
<ScreenOffIcon/>
:null
}
{ screenState === 'off' ?
{ screenState === 'off' &&
<ScreenIcon/>
:null
}
</Fab>
</div>
@ -351,10 +349,10 @@ const Me = (props) =>
peer={me}
displayName={settings.displayName}
showPeerInfo
videoTrack={webcamProducer ? webcamProducer.track : null}
videoTrack={webcamProducer && webcamProducer.track}
videoVisible={videoVisible}
audioCodec={micProducer ? micProducer.codec : null}
videoCodec={webcamProducer ? webcamProducer.codec : null}
audioCodec={micProducer && micProducer.codec}
videoCodec={webcamProducer && webcamProducer.codec}
onChangeDisplayName={(displayName) =>
{
roomClient.changeDisplayName(displayName);
@ -364,9 +362,9 @@ const Me = (props) =>
</VideoView>
</div>
</div>
{ screenProducer ?
{ screenProducer &&
<div
className={classnames(classes.root, 'screen', hover ? 'hover' : null)}
className={classnames(classes.root, 'screen', hover && 'hover')}
onMouseOver={() => setHover(true)}
onMouseOut={() => setHover(false)}
onTouchStart={() =>
@ -390,7 +388,7 @@ const Me = (props) =>
>
<div className={classnames(classes.viewContainer)} style={style}>
<div
className={classnames(classes.controls, hover ? 'hover' : null)}
className={classnames(classes.controls, hover && 'hover')}
onMouseOver={() => setHover(true)}
onMouseOut={() => setHover(false)}
onTouchStart={() =>
@ -420,13 +418,12 @@ const Me = (props) =>
isScreen
advancedMode={advancedMode}
videoContain
videoTrack={screenProducer ? screenProducer.track : null}
videoTrack={screenProducer && screenProducer.track}
videoVisible={screenVisible}
videoCodec={screenProducer ? screenProducer.codec : null}
videoCodec={screenProducer && screenProducer.codec}
/>
</div>
</div>
:null
}
</React.Fragment>
);

38
app/src/components/Containers/Peer.js
View File

@ -166,8 +166,8 @@ const Peer = (props) =>
classnames(
classes.root,
'webcam',
hover ? 'hover' : null,
activeSpeaker ? 'active-speaker' : null
hover && 'hover',
activeSpeaker && 'active-speaker'
)
}
onMouseOver={() => setHover(true)}
@ -192,15 +192,14 @@ const Peer = (props) =>
style={rootStyle}
>
<div className={classnames(classes.viewContainer)}>
{ !videoVisible ?
{ !videoVisible &&
<div className={classes.videoInfo}>
<p>this video is paused</p>
</div>
:null
}
<div
className={classnames(classes.controls, hover ? 'hover' : null)}
className={classnames(classes.controls, hover && 'hover')}
onMouseOver={() => setHover(true)}
onMouseOut={() => setHover(false)}
onTouchStart={() =>
@ -241,7 +240,7 @@ const Peer = (props) =>
}
</Fab>
{ !smallScreen ?
{ !smallScreen &&
<Fab
aria-label='New window'
className={classes.fab}
@ -257,7 +256,6 @@ const Peer = (props) =>
>
<NewWindowIcon />
</Fab>
:null
}
<Fab
@ -279,20 +277,20 @@ const Peer = (props) =>
peer={peer}
displayName={peer.displayName}
showPeerInfo
videoTrack={webcamConsumer ? webcamConsumer.track : null}
videoTrack={webcamConsumer && webcamConsumer.track}
videoVisible={videoVisible}
videoProfile={videoProfile}
audioCodec={micConsumer ? micConsumer.codec : null}
videoCodec={webcamConsumer ? webcamConsumer.codec : null}
audioCodec={micConsumer && micConsumer.codec}
videoCodec={webcamConsumer && webcamConsumer.codec}
>
<Volume id={peer.id} />
</VideoView>
</div>
</div>
{ screenConsumer ?
{ screenConsumer &&
<div
className={classnames(classes.root, 'screen', hover ? 'hover' : null)}
className={classnames(classes.root, 'screen', hover && 'hover')}
onMouseOver={() => setHover(true)}
onMouseOut={() => setHover(false)}
onTouchStart={() =>
@ -314,17 +312,16 @@ const Peer = (props) =>
}}
style={rootStyle}
>
{ !screenVisible ?
{ !screenVisible &&
<div className={classes.videoInfo}>
<p>this video is paused</p>
</div>
:null
}
{ screenVisible ?
{ screenVisible &&
<div className={classnames(classes.viewContainer)}>
<div
className={classnames(classes.controls, hover ? 'hover' : null)}
className={classnames(classes.controls, hover && 'hover')}
onMouseOver={() => setHover(true)}
onMouseOut={() => setHover(false)}
onTouchStart={() =>
@ -346,7 +343,7 @@ const Peer = (props) =>
}, 2000);
}}
>
{ !smallScreen ?
{ !smallScreen &&
<Fab
aria-label='New window'
className={classes.fab}
@ -362,7 +359,6 @@ const Peer = (props) =>
>
<NewWindowIcon />
</Fab>
:null
}
<Fab
@ -381,16 +377,14 @@ const Peer = (props) =>
<VideoView
advancedMode={advancedMode}
videoContain
videoTrack={screenConsumer ? screenConsumer.track : null}
videoTrack={screenConsumer && screenConsumer.track}
videoVisible={screenVisible}
videoProfile={screenProfile}
videoCodec={screenConsumer ? screenConsumer.codec : null}
videoCodec={screenConsumer && screenConsumer.codec}
/>
</div>
:null
}
</div>
:null
}
</React.Fragment>
);

12
app/src/components/Containers/SpeakerPeer.js
View File

@ -117,11 +117,10 @@ const SpeakerPeer = (props) =>
style={spacingStyle}
>
<div className={classnames(classes.viewContainer)} style={style}>
{ !videoVisible ?
{ !videoVisible &&
<div className={classes.videoInfo}>
<p>this video is paused</p>
</div>
:null
}
<VideoView
@ -140,18 +139,17 @@ const SpeakerPeer = (props) =>
</div>
</div>
{ screenConsumer ?
{ screenConsumer &&
<div
className={classnames(classes.root, 'screen')}
>
{ !screenVisible ?
{ !screenVisible &&
<div className={classes.videoInfo} style={style}>
<p>this video is paused</p>
</div>
:null
}
{ screenVisible ?
{ screenVisible &&
<div className={classnames(classes.viewContainer)} style={style}>
<VideoView
advancedMode={advancedMode}
@ -162,10 +160,8 @@ const SpeakerPeer = (props) =>
videoCodec={screenConsumer ? screenConsumer.codec : null}
/>
</div>
:null
}
</div>
:null
}
</React.Fragment>
);

35
app/src/components/JoinDialog.js
View File

@ -66,11 +66,27 @@ const JoinDialog = ({
paper : classes.dialogPaper
}}
>
{ window.config.logo ?
{ window.config.logo &&
<img alt='Logo' className={classes.logo} src={window.config.logo} />
:null
}
<Typography variant='subtitle1'>You are about to join a meeting, how would you like to join?</Typography>
<Typography variant='subtitle1'>
You are about to join a meeting.
Set your name that others will see,
and chose how you want to join?
</Typography>
<TextField
id='displayname'
label='Name'
className={classes.textField}
value={displayName}
onChange={(event) =>
{
const { value } = event.target;
changeDisplayName(value);
}}
margin='normal'
/>
<DialogActions>
<Button
onClick={() =>
@ -90,19 +106,6 @@ const JoinDialog = ({
>
Audio and Video
</Button>
<TextField
id='displayname'
label='Name'
className={classes.textField}
value={displayName}
onChange={(event) =>
{
const { value } = event.target;
changeDisplayName(value);
}}
margin='normal'
/>
</DialogActions>
</Dialog>
</div>

12
app/src/components/MeetingDrawer/FileSharing/File.js
View File

@ -67,7 +67,7 @@ class File extends React.PureComponent
<img alt='Avatar' className={classes.avatar} src={picture} />
<div className={classes.fileContent}>
{ file.files ?
{ file.files &&
<Fragment>
<Typography className={classes.text}>
File finished downloading
@ -92,13 +92,12 @@ class File extends React.PureComponent
</div>
))}
</Fragment>
:null
}
<Typography className={classes.text}>
{ `${displayName} shared a file` }
</Typography>
{ !file.active && !file.files ?
{ (!file.active && !file.files) &&
<div className={classes.fileInfo}>
<Typography className={classes.text}>
{ magnet.decode(magnetUri).dn }
@ -121,20 +120,17 @@ class File extends React.PureComponent
</Typography>
}
</div>
:null
}
{ file.timeout ?
{ file.timeout &&
<Typography className={classes.text}>
If this process takes a long time, there might not be anyone seeding
this torrent. Try asking someone to reupload the file that you want.
</Typography>
:null
}
{ file.active ?
{ file.active &&
<progress value={file.progress} />
:null
}
</div>
</div>

3
app/src/components/MeetingDrawer/ParticipantList/ListMe.js
View File

@ -91,9 +91,8 @@ const ListMe = (props) =>
</div>
<div className={classes.indicators}>
{ me.raisedHand ?
{ me.raisedHand &&
<div className={classnames(classes.icon, 'raise-hand')} />
:null
}
</div>
</div>

6
app/src/components/MeetingDrawer/ParticipantList/ListPeer.js
View File

@ -159,7 +159,7 @@ const ListPeer = (props) =>
{peer.displayName}
</div>
<div className={classes.indicators}>
{ peer.raiseHandState ?
{ peer.raiseHandState &&
<div className={
classnames(
classes.icon, 'raise-hand', {
@ -169,12 +169,11 @@ const ListPeer = (props) =>
)
}
/>
:null
}
</div>
{children}
<div className={classes.controls}>
{ screenConsumer ?
{ screenConsumer &&
<div
className={classnames(classes.button, 'screen', {
on : screenVisible,
@ -195,7 +194,6 @@ const ListPeer = (props) =>
<ScreenOffIcon />
}
</div>
:null
}
<div
className={classnames(classes.button, 'mic', {

3
app/src/components/MeetingViews/Democratic.js
View File

@ -153,11 +153,10 @@ class Democratic extends React.PureComponent
/>
);
})}
{ spotlightsLength < peersLength ?
{ spotlightsLength < peersLength &&
<HiddenPeers
hiddenPeersCount={peersLength - spotlightsLength}
/>
:null
}
</div>
);

6
app/src/components/MeetingViews/Filmstrip.js
View File

@ -228,13 +228,12 @@ class Filmstrip extends React.PureComponent
return (
<div className={classes.root}>
<div className={classes.speaker} ref={this.activePeerContainer}>
{ peers[activePeerId] ?
{ peers[activePeerId] &&
<SpeakerPeer
advancedMode={advancedMode}
id={activePeerId}
style={speakerStyle}
/>
:null
}
</div>
@ -286,11 +285,10 @@ class Filmstrip extends React.PureComponent
</Grid>
</div>
{ spotlightsLength<Object.keys(peers).length ?
{ spotlightsLength<Object.keys(peers).length &&
<HiddenPeers
hiddenPeersCount={Object.keys(peers).length-spotlightsLength}
/>
:null
}
</div>
);

19
app/src/components/VideoContainers/VideoView.js
View File

@ -171,24 +171,17 @@ class VideoView extends React.PureComponent
})}
>
<div className={classes.box}>
{ audioCodec ?
<p>{audioCodec}</p>
:null
}
{ audioCodec && <p>{audioCodec}</p> }
{ videoCodec ?
<p>{videoCodec} {videoProfile}</p>
:null
}
{ videoCodec && <p>{videoCodec} {videoProfile}</p> }
{ (videoVisible && videoWidth !== null) ?
{ (videoVisible && videoWidth !== null) &&
<p>{videoWidth}x{videoHeight}</p>
:null
}
</div>
</div>
{ showPeerInfo ?
{ showPeerInfo &&
<div className={classes.peer}>
<div className={classes.box}>
{ isMe ?
@ -212,17 +205,15 @@ class VideoView extends React.PureComponent
</span>
}
{ advancedMode ?
{ advancedMode &&
<div className={classes.deviceInfo}>
<span>
{peer.device.name} {Math.floor(peer.device.version) || null}
</span>
</div>
:null
}
</div>
</div>
:null
}
</div>

6
app/src/components/VideoWindow/NewWindow.js
View File

@ -130,7 +130,7 @@ class NewWindow extends React.PureComponent
return ReactDOM.createPortal([
<div key='newwindow' className={classes.root}>
<div className={classes.controls}>
{this.fullscreen.fullscreenEnabled && (
{ this.fullscreen.fullscreenEnabled &&
<div
className={classes.button}
onClick={this.handleToggleFullscreen}
@ -144,9 +144,9 @@ class NewWindow extends React.PureComponent
<FullScreenIcon className={classes.icon} />
}
</div>
)}
}
</div>
{this.props.children}
{ this.props.children }
</div>
], this.container);
}