Small cleanups here and there.

app/src/components/Containers/HiddenPeers.js

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

app/src/components/Containers/Me.js

@@ -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}
+						audioCodec={micProducer && micProducer.codec}
-						videoCodec={webcamProducer ? webcamProducer.codec : null}
+						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>
 	);

app/src/components/Containers/Peer.js

@@ -166,8 +166,8 @@ const Peer = (props) =>
 					classnames(
 						classes.root,
 						'webcam',
-						hover ? 'hover' : null,
+						hover && 'hover',
-						activeSpeaker ? 'active-speaker' : null
+						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}
+						audioCodec={micConsumer && micConsumer.codec}
-						videoCodec={webcamConsumer ? webcamConsumer.codec : null}
+						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>
 	);

app/src/components/Containers/SpeakerPeer.js

@@ -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>
 	);

app/src/components/JoinDialog.js

@@ -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>

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

@@ -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>

app/src/components/MeetingDrawer/ParticipantList/ListMe.js

@@ -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>

app/src/components/MeetingDrawer/ParticipantList/ListPeer.js

@@ -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', {

app/src/components/MeetingViews/Democratic.js

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

app/src/components/MeetingViews/Filmstrip.js

@@ -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>
 		);

app/src/components/VideoContainers/VideoView.js

@@ -171,24 +171,17 @@ class VideoView extends React.PureComponent
 						})}
 					>
 						<div className={classes.box}>
-							{ audioCodec ?
+							{ audioCodec && <p>{audioCodec}</p> }
-								<p>{audioCodec}</p>
-								:null
-							}
 
-							{ videoCodec ?
+							{ videoCodec && <p>{videoCodec} {videoProfile}</p> }
-								<p>{videoCodec} {videoProfile}</p>
-								:null
-							}
 
-							{ (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>
 

app/src/components/VideoWindow/NewWindow.js

@@ -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);
 	}