Merge pull request #6 from havfo/develop

Sync with upstream Develop
2020-05-14 08:26:02 +02:00 · 2020-05-14 08:26:02 +02:00 · 77e807143b
parent a8af8f0c8d a1d348eefc
commit 77e807143b
29 changed files with 811 additions and 393 deletions
--- a/app/src/RoomClient.js
+++ b/app/src/RoomClient.js
@ -302,6 +302,16 @@ export default class RoomClient

 				switch (key)
 				{
+					case String.fromCharCode(37):
+					{
+						this._spotlights.setPrevAsSelected();
+						break;
+					}
+					case String.fromCharCode(39):
+					{
+						this._spotlights.setNextAsSelected();
+						break;
+					}
 					case 'A': // Activate advanced mode
 					{
 						store.dispatch(settingsActions.toggleAdvancedMode());
--- a/app/src/Spotlights.js
+++ b/app/src/Spotlights.js
@ -12,6 +12,7 @@ export default class Spotlights extends EventEmitter
 		this._signalingSocket = signalingSocket;
 		this._maxSpotlights = maxSpotlights;
 		this._peerList = [];
+		this._unmutablePeerList = [];
 		this._selectedSpotlights = [];
 		this._currentSpotlights = [];
 		this._started = false;
@ -45,6 +46,90 @@ export default class Spotlights extends EventEmitter
 		}
 	}

+	setNextAsSelected()
+	{
+		let peerId = null;
+
+		if (this._selectedSpotlights.length > 0) 
+		{
+			peerId = this._selectedSpotlights[0];
+		}
+		else if (this._unmutablePeerList.length > 0) 
+		{
+			peerId = this._unmutablePeerList[0];
+		}
+
+		if (peerId != null && this._currentSpotlights.length < this._unmutablePeerList.length) 
+		{
+			const oldIndex = this._unmutablePeerList.indexOf(peerId);
+
+			let index = oldIndex;
+
+			index++;
+			do 
+			{
+				if (index >= this._unmutablePeerList.length) 
+				{
+					index = 0;
+				}
+				const newSelectedPeer = this._unmutablePeerList[index];
+
+				if (!this._currentSpotlights.includes(newSelectedPeer)) 
+				{
+					this.setPeerSpotlight(newSelectedPeer);
+					break;
+				}
+				index++;
+				if (index === oldIndex) 
+				{
+					break;
+				}
+			} while (true);
+		}
+	}
+
+	setPrevAsSelected()
+	{
+		let peerId = null;
+
+		if (this._selectedSpotlights.length > 0) 
+		{
+			peerId = this._selectedSpotlights[0];
+		}
+		else if (this._unmutablePeerList.length > 0) 
+		{
+			peerId = this._unmutablePeerList[0];
+		}
+
+		if (peerId != null && this._currentSpotlights.length < this._unmutablePeerList.length) 
+		{
+			const oldIndex = this._unmutablePeerList.indexOf(peerId);
+
+			let index = oldIndex;
+
+			index--;
+			do 
+			{
+				if (index < 0) 
+				{
+					index = this._unmutablePeerList.length - 1;
+				}
+				const newSelectedPeer = this._unmutablePeerList[index];
+
+				if (!this._currentSpotlights.includes(newSelectedPeer)) 
+				{
+					this.setPeerSpotlight(newSelectedPeer);
+					break;
+				}
+				index--;
+				if (index === oldIndex) 
+				{
+					break;
+				}
+			} while (true);
+		}
+	}
+
 	setPeerSpotlight(peerId)
 	{
 		logger.debug('setPeerSpotlight() [peerId:"%s"]', peerId);
@ -114,6 +199,7 @@ export default class Spotlights extends EventEmitter
 			logger.debug('_handlePeer() | adding peer [peerId: "%s"]', id);

 			this._peerList.push(id);
+			this._unmutablePeerList.push(id);

 			if (this._started)
 				this._spotlightsUpdated();
@ -126,6 +212,7 @@ export default class Spotlights extends EventEmitter
 			'room "peerClosed" event [peerId:%o]', id);

 		this._peerList = this._peerList.filter((peer) => peer !== id);
+		this._unmutablePeerList = this._unmutablePeerList.filter((peer) => peer !== id);

 		this._selectedSpotlights = this._selectedSpotlights.filter((peer) => peer !== id);

--- a/app/src/components/Containers/Me.js
+++ b/app/src/components/Containers/Me.js
@ -290,6 +290,28 @@ const Me = (props) =>
 		'margin' : spacing
 	};

+	let audioScore = null;
+
+	if (micProducer && micProducer.score)
+	{
+		audioScore =
+			micProducer.score.reduce(
+				(prev, curr) =>
+					(prev.score < curr.score ? prev : curr)
+			);
+	}
+
+	let videoScore = null;
+
+	if (webcamProducer && webcamProducer.score)
+	{
+		videoScore =
+			webcamProducer.score.reduce(
+				(prev, curr) =>
+					(prev.score < curr.score ? prev : curr)
+			);
+	}
+
 	return (
 		<React.Fragment>
 			<div
@ -378,195 +400,207 @@ const Me = (props) =>
 							<React.Fragment>
 								<Tooltip title={micTip} placement='left'>
 									{ smallContainer ?
-										<IconButton
-											aria-label={intl.formatMessage({
-												id             : 'device.muteAudio',
-												defaultMessage : 'Mute audio'
-											})}
-											className={classes.smallContainer}
-											disabled={!me.canSendMic || me.audioInProgress}
-											color={micState === 'on' ? 'primary' : 'secondary'}
-											size='small'
-											onClick={() =>
-											{
-												if (micState === 'off')
-													roomClient.enableMic();
-												else if (micState === 'on')
-													roomClient.muteMic();
-												else
-													roomClient.unmuteMic();
-											}}
-										>
-											{ micState === 'on' ?
-												<MicIcon />
-												:
-												<MicOffIcon />
-											}
-										</IconButton>
+										<div>
+											<IconButton
+												aria-label={intl.formatMessage({
+													id             : 'device.muteAudio',
+													defaultMessage : 'Mute audio'
+												})}
+												className={classes.smallContainer}
+												disabled={!me.canSendMic || me.audioInProgress}
+												color={micState === 'on' ? 'primary' : 'secondary'}
+												size='small'
+												onClick={() =>
+												{
+													if (micState === 'off')
+														roomClient.enableMic();
+													else if (micState === 'on')
+														roomClient.muteMic();
+													else
+														roomClient.unmuteMic();
+												}}
+											>
+												{ micState === 'on' ?
+													<MicIcon />
+													:
+													<MicOffIcon />
+												}
+											</IconButton>
+										</div>
 										:
-										<Fab
-											aria-label={intl.formatMessage({
-												id             : 'device.muteAudio',
-												defaultMessage : 'Mute audio'
-											})}
-											className={classes.fab}
-											disabled={!me.canSendMic || me.audioInProgress}
-											color={micState === 'on' ? 'default' : 'secondary'}
-											size='large'
-											onClick={() =>
-											{
-												if (micState === 'off')
-													roomClient.enableMic();
-												else if (micState === 'on')
-													roomClient.muteMic();
-												else
-													roomClient.unmuteMic();
-											}}
-										>
-											{ micState === 'on' ?
-												<MicIcon />
-												:
-												<MicOffIcon />
-											}
-										</Fab>
+										<div>
+											<Fab
+												aria-label={intl.formatMessage({
+													id             : 'device.muteAudio',
+													defaultMessage : 'Mute audio'
+												})}
+												className={classes.fab}
+												disabled={!me.canSendMic || me.audioInProgress}
+												color={micState === 'on' ? 'default' : 'secondary'}
+												size='large'
+												onClick={() =>
+												{
+													if (micState === 'off')
+														roomClient.enableMic();
+													else if (micState === 'on')
+														roomClient.muteMic();
+													else
+														roomClient.unmuteMic();
+												}}
+											>
+												{ micState === 'on' ?
+													<MicIcon />
+													:
+													<MicOffIcon />
+												}
+											</Fab>
+										</div>
 									}
 								</Tooltip>
 								<Tooltip title={webcamTip} placement='left'>
 									{ smallContainer ?
-										<IconButton
-											aria-label={intl.formatMessage({
-												id             : 'device.startVideo',
-												defaultMessage : 'Start video'
-											})}
-											className={classes.smallContainer}
-											disabled={!me.canSendWebcam || me.webcamInProgress}
-											color={webcamState === 'on' ? 'primary' : 'secondary'}
-											size='small'
-											onClick={() =>
-											{
-												webcamState === 'on' ?
-													roomClient.disableWebcam() :
-													roomClient.enableWebcam();
-											}}
-										>
-											{ webcamState === 'on' ?
-												<VideoIcon />
-												:
-												<VideoOffIcon />
-											}
-										</IconButton>
+										<div>
+											<IconButton
+												aria-label={intl.formatMessage({
+													id             : 'device.startVideo',
+													defaultMessage : 'Start video'
+												})}
+												className={classes.smallContainer}
+												disabled={!me.canSendWebcam || me.webcamInProgress}
+												color={webcamState === 'on' ? 'primary' : 'secondary'}
+												size='small'
+												onClick={() =>
+												{
+													webcamState === 'on' ?
+														roomClient.disableWebcam() :
+														roomClient.enableWebcam();
+												}}
+											>
+												{ webcamState === 'on' ?
+													<VideoIcon />
+													:
+													<VideoOffIcon />
+												}
+											</IconButton>
+										</div>
 										:
-										<Fab
-											aria-label={intl.formatMessage({
-												id             : 'device.startVideo',
-												defaultMessage : 'Start video'
-											})}
-											className={classes.fab}
-											disabled={!me.canSendWebcam || me.webcamInProgress}
-											color={webcamState === 'on' ? 'default' : 'secondary'}
-											size='large'
-											onClick={() =>
-											{
-												webcamState === 'on' ?
-													roomClient.disableWebcam() :
-													roomClient.enableWebcam();
-											}}
-										>
-											{ webcamState === 'on' ?
-												<VideoIcon />
-												:
-												<VideoOffIcon />
-											}
-										</Fab>
+										<div>
+											<Fab
+												aria-label={intl.formatMessage({
+													id             : 'device.startVideo',
+													defaultMessage : 'Start video'
+												})}
+												className={classes.fab}
+												disabled={!me.canSendWebcam || me.webcamInProgress}
+												color={webcamState === 'on' ? 'default' : 'secondary'}
+												size='large'
+												onClick={() =>
+												{
+													webcamState === 'on' ?
+														roomClient.disableWebcam() :
+														roomClient.enableWebcam();
+												}}
+											>
+												{ webcamState === 'on' ?
+													<VideoIcon />
+													:
+													<VideoOffIcon />
+												}
+											</Fab>
+										</div>
 									}
 								</Tooltip>
 								{ me.browser.platform !== 'mobile' &&
 									<Tooltip title={screenTip} placement='left'>
 										{ smallContainer ?
-											<IconButton
-												aria-label={intl.formatMessage({
-													id             : 'device.startScreenSharing',
-													defaultMessage : 'Start screen sharing'
-												})}
-												className={classes.smallContainer}
-												disabled={
-													!canShareScreen ||
+											<div>
+												<IconButton
+													aria-label={intl.formatMessage({
+														id             : 'device.startScreenSharing',
+														defaultMessage : 'Start screen sharing'
+													})}
+													className={classes.smallContainer}
+													disabled={
+														!canShareScreen ||
 													!me.canShareScreen ||
 													me.screenShareInProgress
-												}
-												color='primary'
-												size='small'
-												onClick={() =>
-												{
-													switch (screenState)
-													{
-														case 'on':
-														{
-															roomClient.disableScreenSharing();
-															break;
-														}
-														case 'off':
-														{
-															roomClient.enableScreenSharing();
-															break;
-														}
-														default:
-														{
-															break;
-														}
 													}
-												}}
-											>
-												{ (screenState === 'on' || screenState === 'unsupported') &&
+													color='primary'
+													size='small'
+													onClick={() =>
+													{
+														switch (screenState)
+														{
+															case 'on':
+															{
+																roomClient.disableScreenSharing();
+																break;
+															}
+															case 'off':
+															{
+																roomClient.enableScreenSharing();
+																break;
+															}
+															default:
+															{
+																break;
+															}
+														}
+													}}
+												>
+													{ (screenState === 'on' || screenState === 'unsupported') &&
 													<ScreenOffIcon/>
-												}
-												{ screenState === 'off' &&
+													}
+													{ screenState === 'off' &&
 													<ScreenIcon/>
-												}
+													}

-											</IconButton>
+												</IconButton>
+											</div>
 											:
-											<Fab
-												aria-label={intl.formatMessage({
-													id             : 'device.startScreenSharing',
-													defaultMessage : 'Start screen sharing'
-												})}
-												className={classes.fab}
-												disabled={
-													!canShareScreen ||
+											<div>
+												<Fab
+													aria-label={intl.formatMessage({
+														id             : 'device.startScreenSharing',
+														defaultMessage : 'Start screen sharing'
+													})}
+													className={classes.fab}
+													disabled={
+														!canShareScreen ||
 													!me.canShareScreen ||
 													me.screenShareInProgress
-												}
-												color={screenState === 'on' ? 'primary' : 'default'}
-												size='large'
-												onClick={() =>
-												{
-													switch (screenState)
-													{
-														case 'on':
-														{
-															roomClient.disableScreenSharing();
-															break;
-														}
-														case 'off':
-														{
-															roomClient.enableScreenSharing();
-															break;
-														}
-														default:
-														{
-															break;
-														}
 													}
-												}}
-											>
-												{ (screenState === 'on' || screenState === 'unsupported') &&
+													color={screenState === 'on' ? 'primary' : 'default'}
+													size='large'
+													onClick={() =>
+													{
+														switch (screenState)
+														{
+															case 'on':
+															{
+																roomClient.disableScreenSharing();
+																break;
+															}
+															case 'off':
+															{
+																roomClient.enableScreenSharing();
+																break;
+															}
+															default:
+															{
+																break;
+															}
+														}
+													}}
+												>
+													{ (screenState === 'on' || screenState === 'unsupported') &&
 													<ScreenOffIcon/>
-												}
-												{ screenState === 'off' &&
+													}
+													{ screenState === 'off' &&
 													<ScreenIcon/>
-												}
-											</Fab>
+													}
+												</Fab>
+											</div>
 										}
 									</Tooltip>
 								}
@ -576,6 +610,7 @@ const Me = (props) =>

 					<VideoView
 						isMe
+						VideoView
 						advancedMode={advancedMode}
 						peer={me}
 						displayName={settings.displayName}
@ -584,6 +619,8 @@ const Me = (props) =>
 						videoVisible={videoVisible}
 						audioCodec={micProducer && micProducer.codec}
 						videoCodec={webcamProducer && webcamProducer.codec}
+						audioScore={audioScore}
+						videoScore={videoScore}
 						onChangeDisplayName={(displayName) =>
 						{
 							roomClient.changeDisplayName(displayName);
@ -627,6 +664,18 @@ const Me = (props) =>
 						style={spacingStyle}
 					>
 						<div className={classes.viewContainer} style={style}>
+							<p className={
+								classnames(
+									classes.meTag,
+									hover ? 'hover' : null,
+									smallContainer ? 'smallContainer' : null
+								)}
+							>
+								<FormattedMessage
+									id='room.me'
+									defaultMessage='ME'
+								/>
+							</p>
 							<div
 								className={classnames(
 									classes.controls,
@ -653,48 +702,45 @@ const Me = (props) =>
 									}, 2000);
 								}}
 							>
-								<p className={hover ? 'hover' : null}>
-									<FormattedMessage
-										id='room.me'
-										defaultMessage='ME'
-									/>
-								</p>
-
 								<Tooltip title={webcamTip} placement='left'>
 									{ smallContainer ?
-										<IconButton
-											aria-label={intl.formatMessage({
-												id             : 'device.stopVideo',
-												defaultMessage : 'Stop video'
-											})}
-											className={classes.smallContainer}
-											disabled={!me.canSendWebcam || me.webcamInProgress}
-											size='small'
-											color='primary'
-											onClick={() =>
-											{
-												roomClient.disableExtraVideo(producer.id);
-											}}
-										>
-											<VideoIcon />
+										<div>
+											<IconButton
+												aria-label={intl.formatMessage({
+													id             : 'device.stopVideo',
+													defaultMessage : 'Stop video'
+												})}
+												className={classes.smallContainer}
+												disabled={!me.canSendWebcam || me.webcamInProgress}
+												size='small'
+												color='primary'
+												onClick={() =>
+												{
+													roomClient.disableExtraVideo(producer.id);
+												}}
+											>
+												<VideoIcon />

-										</IconButton>
+											</IconButton>
+										</div>
 										:
-										<Fab
-											aria-label={intl.formatMessage({
-												id             : 'device.stopVideo',
-												defaultMessage : 'Stop video'
-											})}
-											className={classes.fab}
-											disabled={!me.canSendWebcam || me.webcamInProgress}
-											size={smallContainer ? 'small' : 'large'}
-											onClick={() =>
-											{
-												roomClient.disableExtraVideo(producer.id);
-											}}
-										>
-											<VideoIcon />
-										</Fab>
+										<div>
+											<Fab
+												aria-label={intl.formatMessage({
+													id             : 'device.stopVideo',
+													defaultMessage : 'Stop video'
+												})}
+												className={classes.fab}
+												disabled={!me.canSendWebcam || me.webcamInProgress}
+												size={smallContainer ? 'small' : 'large'}
+												onClick={() =>
+												{
+													roomClient.disableExtraVideo(producer.id);
+												}}
+											>
+												<VideoIcon />
+											</Fab>
+										</div>
 									}
 								</Tooltip>
 							</div>
@ -742,40 +788,18 @@ const Me = (props) =>
 					style={spacingStyle}
 				>
 					<div className={classes.viewContainer} style={style}>
-						<div
-							className={classnames(
-								classes.controls,
-								settings.hiddenControls ? 'hide' : null,
-								hover ? 'hover' : null
+						<p className={
+							classnames(
+								classes.meTag,
+								hover ? 'hover' : null,
+								smallContainer ? 'smallContainer' : null
 							)}
-							onMouseOver={() => setHover(true)}
-							onMouseOut={() => setHover(false)}
-							onTouchStart={() =>
-							{
-								if (touchTimeout)
-									clearTimeout(touchTimeout);
-			
-								setHover(true);
-							}}
-							onTouchEnd={() =>
-							{
-
-								if (touchTimeout)
-									clearTimeout(touchTimeout);
-			
-								touchTimeout = setTimeout(() =>
-								{
-									setHover(false);
-								}, 2000);
-							}}
 						>
-							<p className={hover ? 'hover' : null}>
-								<FormattedMessage
-									id='room.me'
-									defaultMessage='ME'
-								/>
-							</p>
-						</div>
+							<FormattedMessage
+								id='room.me'
+								defaultMessage='ME'
+							/>
+						</p>
 						
 						<VideoView
 							isMe
--- a/app/src/components/Containers/Peer.js
+++ b/app/src/components/Containers/Peer.js
@ -394,6 +394,7 @@ const Peer = (props) =>
 					</div>

 					<VideoView
+						showQuality
 						advancedMode={advancedMode}
 						peer={peer}
 						displayName={peer.displayName}
@ -589,6 +590,7 @@ const Peer = (props) =>
 							</div>
 		
 							<VideoView
+								showQuality
 								advancedMode={advancedMode}
 								peer={peer}
 								displayName={peer.displayName}
@ -730,6 +732,7 @@ const Peer = (props) =>
 							</Tooltip>
 						</div>
 						<VideoView
+							showQuality
 							advancedMode={advancedMode}
 							videoContain
 							consumerSpatialLayers={
--- a/app/src/components/Controls/Help.js
+++ b/app/src/components/Controls/Help.js
@ -23,7 +23,8 @@ const shortcuts=[
 	{ key: '1', label: 'label.democratic', defaultMessage: 'Democratic View' },
 	{ key: '2', label: 'label.filmstrip', defaultMessage: 'Filmstrip View' },
 	{ key: 'space', label: 'me.mutedPTT', defaultMessage: 'Push SPACE to talk' },
-	{ key: 'a', label: 'label.advanced', defaultMessage: 'Show advanced information' }
+	{ key: 'a', label: 'label.advanced', defaultMessage: 'Show advanced information' },
+	{ key: `${String.fromCharCode(8592)} ${String.fromCharCode(8594)}`, label: 'room.browsePeersSpotlight', defaultMessage: 'Browse participants into Spotlight' }
 ];
 const styles = (theme) =>
 	({
--- a/app/src/components/MeetingDrawer/ParticipantList/ListPeer.js
+++ b/app/src/components/MeetingDrawer/ParticipantList/ListPeer.js
@ -254,57 +254,57 @@ const ListPeer = (props) =>
 			}
 			{ isModerator && micConsumer &&
 				<Tooltip
-				title={intl.formatMessage({
-					id             : 'tooltip.muteParticipant',
-					defaultMessage : 'Mute globally participant mic'
-				})}
-				placement='bottom'
-			>
-				<IconButton
-					className={classes.buttons}
-					style={{ color: green[500] }}
-					disabled={!isModerator || peer.stopPeerAudioInProgress}
-					onClick={(e) =>
-					{
-						e.stopPropagation();
-
-						roomClient.mutePeer(peer.id);
-					}}
+					title={intl.formatMessage({
+						id             : 'tooltip.muteParticipantAudioModerator',
+						defaultMessage : 'Mute participant audio globally'
+					})}
+					placement='bottom'
 				>
-					{ !micConsumer.remotelyPaused ?
-						<MicIcon />
-						:
-						<MicOffIcon />
-					}
-				</IconButton>
-			</Tooltip>
+					<IconButton
+						className={classes.buttons}
+						style={{ color: green[500] }}
+						disabled={!isModerator || peer.stopPeerAudioInProgress}
+						onClick={(e) =>
+						{
+							e.stopPropagation();
+
+							roomClient.mutePeer(peer.id);
+						}}
+					>
+						{ !micConsumer.remotelyPaused ?
+							<MicIcon />
+							:
+							<MicOffIcon />
+						}
+					</IconButton>
+				</Tooltip>
 			}
 			{ isModerator && webcamConsumer && 
 				<Tooltip
-				title={intl.formatMessage({
-					id             : 'tooltip.muteParticipantVideo',
-					defaultMessage : 'Mute globally participant video'
-				})}
-				placement='bottom'
-			>
-				<IconButton
-					className={classes.buttons}
-					style={{ color: green[500] }}
-					disabled={!isModerator || peer.stopPeerVideoInProgress}
-					onClick={(e) =>
-					{
-						e.stopPropagation();
-
-						roomClient.stopPeerVideo(peer.id);
-					}}
+					title={intl.formatMessage({
+						id             : 'tooltip.muteParticipantVideoModerator',
+						defaultMessage : 'Mute participant video globally'
+					})}
+					placement='bottom'
 				>
-					{ !webcamConsumer.remotelyPaused ?
-						<VideocamIcon />
-						:
-						<VideocamOffIcon />
-					}
-				</IconButton>
-			</Tooltip>
+					<IconButton
+						className={classes.buttons}
+						style={{ color: green[500] }}
+						disabled={!isModerator || peer.stopPeerVideoInProgress}
+						onClick={(e) =>
+						{
+							e.stopPropagation();
+
+							roomClient.stopPeerVideo(peer.id);
+						}}
+					>
+						{ !webcamConsumer.remotelyPaused ?
+							<VideocamIcon />
+							:
+							<VideocamOffIcon />
+						}
+					</IconButton>
+				</Tooltip>
 			}
 			{children}
 		</div>
--- a/app/src/components/Settings/Settings.js
+++ b/app/src/components/Settings/Settings.js
@ -95,7 +95,7 @@ const Settings = ({
 				/>
 				<Tab
 					label={intl.formatMessage({
-						id             : 'label.appearence',
+						id             : 'label.appearance',
 						defaultMessage : 'Appearence'
 					})}
 				/>
--- a/app/src/components/VideoContainers/VideoView.js
+++ b/app/src/components/VideoContainers/VideoView.js
@ -152,6 +152,7 @@ class VideoView extends React.PureComponent
 	{
 		const {
 			isMe,
+			showQuality,
 			isScreen,
 			displayName,
 			showPeerInfo,
@ -177,58 +178,63 @@ class VideoView extends React.PureComponent
 			videoHeight
 		} = this.state;

-		let quality = <SignalCellularOffIcon style={{ color: red[500] }}/>;
+		let quality = null;

-		if (videoScore || audioScore)
+		if (showQuality)
 		{
-			const score = videoScore ? videoScore : audioScore;
+			quality = <SignalCellularOffIcon style={{ color: red[500] }}/>;

-			switch (score.producerScore)
+			if (videoScore || audioScore)
 			{
-				case 0:
-				case 1:
+				const score = videoScore ? videoScore : audioScore;
+	
+				switch (isMe ? score.score : score.producerScore)
 				{
-					quality = <SignalCellular0BarIcon style={{ color: red[500] }}/>;
-
-					break;
-				}
-
-				case 2:
-				case 3:
-				{
-					quality = <SignalCellular1BarIcon style={{ color: red[500] }}/>;
-
-					break;
-				}
-
-				case 4:
-				case 5:
-				case 6:
-				{
-					quality = <SignalCellular2BarIcon style={{ color: orange[500] }}/>;
-
-					break;
-				}
-
-				case 7:
-				case 8:
-				case 9:
-				{
-					quality = <SignalCellular3BarIcon style={{ color: yellow[500] }}/>;
-
-					break;
-				}
-
-				case 10:
-				{
-					quality = null;
-
-					break;
-				}
-
-				default:
-				{
-					break;
+					case 0:
+					case 1:
+					{
+						quality = <SignalCellular0BarIcon style={{ color: red[500] }}/>;
+	
+						break;
+					}
+	
+					case 2:
+					case 3:
+					{
+						quality = <SignalCellular1BarIcon style={{ color: red[500] }}/>;
+	
+						break;
+					}
+	
+					case 4:
+					case 5:
+					case 6:
+					{
+						quality = <SignalCellular2BarIcon style={{ color: orange[500] }}/>;
+	
+						break;
+					}
+	
+					case 7:
+					case 8:
+					case 9:
+					{
+						quality = <SignalCellular3BarIcon style={{ color: yellow[500] }}/>;
+	
+						break;
+					}
+	
+					case 10:
+					{
+						quality = null;
+	
+						break;
+					}
+	
+					default:
+					{
+						break;
+					}
 				}
 			}
 		}
@ -258,7 +264,7 @@ class VideoView extends React.PureComponent
 								<p>{videoWidth}x{videoHeight}</p>
 							}
 						</div>
-						{ !isMe && 
+						{ showQuality &&
 							<div className={classnames(classes.box, 'right')}>
 								{ 
 									quality
@ -438,6 +444,7 @@ class VideoView extends React.PureComponent
 VideoView.propTypes =
 {
 	isMe                           : PropTypes.bool,
+	showQuality                    : PropTypes.bool,
 	isScreen                       : PropTypes.bool,
 	displayName                    : PropTypes.string,
 	showPeerInfo                   : PropTypes.bool,
--- a/app/src/index.js
+++ b/app/src/index.js
@ -31,7 +31,8 @@ import messagesFrench from './translations/fr';
 import messagesGreek from './translations/el';
 import messagesRomanian from './translations/ro';
 import messagesPortuguese from './translations/pt';
-import messagesChinese from './translations/cn';
+import messagesChineseSimplified from './translations/cn';
+import messagesChineseTraditional from './translations/tw';
 import messagesSpanish from './translations/es';
 import messagesCroatian from './translations/hr';
 import messagesCzech from './translations/cs';
@ -49,26 +50,37 @@ const cache = createIntlCache();
 const messages =
 {
 	// 'en' : messagesEnglish,
-	'nb' : messagesNorwegian,
-	'de' : messagesGerman,
-	'hu' : messagesHungarian,
-	'pl' : messagesPolish,
-	'dk' : messagesDanish,
-	'fr' : messagesFrench,
-	'el' : messagesGreek,
-	'ro' : messagesRomanian,
-	'pt' : messagesPortuguese,
-	'zh' : messagesChinese,
-	'es' : messagesSpanish,
-	'hr' : messagesCroatian,
-	'cs' : messagesCzech,
-	'it' : messagesItalian,
-	'uk' : messagesUkrainian,
-	'tr' : messagesTurkish,
-	'lv' : messagesLatvian
+	'nb'      : messagesNorwegian,
+	'de'      : messagesGerman,
+	'hu'      : messagesHungarian,
+	'pl'      : messagesPolish,
+	'dk'      : messagesDanish,
+	'fr'      : messagesFrench,
+	'el'      : messagesGreek,
+	'ro'      : messagesRomanian,
+	'pt'      : messagesPortuguese,
+	'zh-hans' : messagesChineseSimplified,
+	'zh-hant' : messagesChineseTraditional,
+	'es'      : messagesSpanish,
+	'hr'      : messagesCroatian,
+	'cs'      : messagesCzech,
+	'it'      : messagesItalian,
+	'uk'      : messagesUkrainian,
+	'tr'      : messagesTurkish,
+	'lv'      : messagesLatvian
 };

-const locale = navigator.language.split(/[-_]/)[0]; // language without region code
+const browserLanguage = (navigator.language || navigator.browserLanguage).toLowerCase();
+
+let locale = browserLanguage.split(/[-_]/)[0]; // language without region code
+
+if (locale === 'zh')
+{
+	if (browserLanguage === 'zh-cn')
+		locale = 'zh-hans';
+	else
+		locale = 'zh-hant';
+}

 const intl = createIntl({
 	locale,
--- a/app/src/reducers/producers.js
+++ b/app/src/reducers/producers.js
@ -60,6 +60,17 @@ const producers = (state = initialState, action) =>
 			return { ...state, [producerId]: newProducer };
 		}

+		case 'SET_PRODUCER_SCORE':
+		{
+			const { producerId, score } = action.payload;
+
+			const producer = state[producerId];
+
+			const newProducer = { ...producer, score };
+
+			return { ...state, [producerId]: newProducer };
+		}
+
 		default:
 			return state;
 	}
--- a/app/src/translations/cn.json
+++ b/app/src/translations/cn.json
@ -63,6 +63,7 @@
 	"room.help": null,
 	"room.about": null,
 	"room.shortcutKeys": null,
+	"room.browsePeersSpotlight": null,
 	
 	"me.mutedPTT": null,

@ -84,6 +85,9 @@
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
 	"tooltip.muteScreenSharing": null,
+	"tooltip.muteParticipantAudioModerator": null,
+	"tooltip.muteParticipantVideoModerator": null,
+	"tooltip.muteScreenSharingModerator": null,

 	"label.roomName": "房间名称",
 	"label.chooseRoomButton": "继续",
@ -109,7 +113,7 @@
 	"label.ultra": "超高 (UHD)",
 	"label.close": "关闭",
 	"label.media": null,
-	"label.appearence": null,
+	"label.appearance": null,
 	"label.advanced": null,
 	"label.addVideo": null,
 	"label.promoteAllPeers": null,
--- a/app/src/translations/cs.json
+++ b/app/src/translations/cs.json
@ -62,6 +62,7 @@
 	"room.help": null,
 	"room.about": null,
 	"room.shortcutKeys": null,
+	"room.browsePeersSpotlight": null,

 	"me.mutedPTT": null,

@ -83,6 +84,9 @@
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
 	"tooltip.muteScreenSharing": null,
+	"tooltip.muteParticipantAudioModerator": null,
+	"tooltip.muteParticipantVideoModerator": null,
+	"tooltip.muteScreenSharingModerator": null,

 	"label.roomName": "Jméno místnosti",
 	"label.chooseRoomButton": "Pokračovat",
@ -108,7 +112,7 @@
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Zavřít",
 	"label.media": null,
-	"label.appearence": null,
+	"label.appearance": null,
 	"label.advanced": null,
 	"label.addVideo": null,
 	"label.promoteAllPeers": null,
--- a/app/src/translations/de.json
+++ b/app/src/translations/de.json
@ -51,7 +51,7 @@
 	"room.videoPaused": "Video gestoppt",
 	"room.muteAll": "Alle stummschalten",
 	"room.stopAllVideo": "Alle Videos stoppen",
-	"room.closeMeeting": "Meeting schließen",
+	"room.closeMeeting": "Meeting beenden",
 	"room.clearChat": "Liste löschen",
 	"room.clearFileSharing": "Liste löschen",
 	"room.speechUnsupported": "Dein Browser unterstützt keine Spracherkennung",
@ -61,10 +61,11 @@
 	"room.extraVideo": "Video hinzufügen",
 	"room.overRoomLimit": "Der Raum ist voll, probiere es später nochmal",
 	"room.help": "Hilfe",
-	"room.about": "Impressum",
+	"room.about": "Über",
 	"room.shortcutKeys": "Tastaturkürzel",
+	"room.browsePeersSpotlight": null,

-	"me.mutedPTT": "Du bist stummgeschalted, Halte die SPACE-Taste um zu sprechen",
+	"me.mutedPTT": "Du bist stummgeschaltet. Halte die SPACE-Taste um zu sprechen",

 	"roles.gotRole": "Rolle erhalten: {role}",
 	"roles.lostRole": "Rolle entzogen: {role}",
@ -84,6 +85,9 @@
 	"tooltip.muteParticipantVideo": "Video stoppen",
 	"tooltip.raisedHand": "Hand heben",
 	"tooltip.muteScreenSharing": "Stoppe Bildschirmfreigabe",
+	"tooltip.muteParticipantAudioModerator": null,
+	"tooltip.muteParticipantVideoModerator": null,
+	"tooltip.muteScreenSharingModerator": null,

 	"label.roomName": "Name des Raums",
 	"label.chooseRoomButton": "Weiter",
@ -103,16 +107,16 @@
 	"label.democratic": "Demokratisch",
 	"label.filmstrip": "Filmstreifen",
 	"label.low": "Niedrig",
-	"label.medium": "Medium",
+	"label.medium": "Mittel",
 	"label.high": "Hoch (HD)",
 	"label.veryHigh": "Sehr hoch (FHD)",
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Schließen",
 	"label.media": "Audio / Video",
-	"label.appearence": "Erscheinung",
-	"label.advanced": "Erweiter",
+	"label.appearance": "Ansicht",
+	"label.advanced": "Erweitert",
 	"label.addVideo": "Video hinzufügen",
-	"label.promoteAllPeers": "Alle Teinehmer einlassen",
+	"label.promoteAllPeers": "Alle Teilnehmer reinlassen",
 	"label.moreActions": "Weitere Aktionen",

 	"settings.settings": "Einstellungen",
@ -134,7 +138,7 @@
 	"settings.hiddenControls": "Medienwerkzeugleiste automatisch ausblenden",
 	"settings.notificationSounds": "Audiosignal bei Benachrichtigungen",
 	"settings.showNotifications": "Zeige Benachrichtigungen",
-	"settings.buttonControlBar": "Seperate seitliche Medienwerkzeugleiste",
+	"settings.buttonControlBar": "Separate seitliche Medienwerkzeugleiste",
 	"settings.echoCancellation": "Echounterdrückung",
 	"settings.autoGainControl": "Automatische Pegelregelung (Audioeingang)",
 	"settings.noiseSuppression": "Rauschunterdrückung",
--- a/app/src/translations/dk.json
+++ b/app/src/translations/dk.json
@ -63,6 +63,7 @@
 	"room.help": null,
 	"room.about": null,
 	"room.shortcutKeys": null,
+	"room.browsePeersSpotlight": null,

 	"me.mutedPTT": null,

@ -84,6 +85,9 @@
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
 	"tooltip.muteScreenSharing": null,
+	"tooltip.muteParticipantAudioModerator": null,
+	"tooltip.muteParticipantVideoModerator": null,
+	"tooltip.muteScreenSharingModerator": null,

 	"label.roomName": "Værelsesnavn",
 	"label.chooseRoomButton": "Fortsæt",
@ -109,7 +113,7 @@
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Luk",
 	"label.media": null,
-	"label.appearence": null,
+	"label.appearance": null,
 	"label.advanced": null,
 	"label.addVideo": null,
 	"label.promoteAllPeers": null,
--- a/app/src/translations/el.json
+++ b/app/src/translations/el.json
@ -63,6 +63,7 @@
 	"room.help": null,
 	"room.about": null,
 	"room.shortcutKeys": null,
+	"room.browsePeersSpotlight": null,

 	"me.mutedPTT": null,

@ -84,6 +85,9 @@
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
 	"tooltip.muteScreenSharing": null,
+	"tooltip.muteParticipantAudioModerator": null,
+	"tooltip.muteParticipantVideoModerator": null,
+	"tooltip.muteScreenSharingModerator": null,

 	"label.roomName": "Όνομα δωματίου",
 	"label.chooseRoomButton": "Συνέχεια",
@ -109,7 +113,7 @@
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Κλείσιμο",
 	"label.media": null,
-	"label.appearence": null,
+	"label.appearance": null,
 	"label.advanced": null,
 	"label.addVideo": null,
 	"label.promoteAllPeers": null,
--- a/app/src/translations/en.json
+++ b/app/src/translations/en.json
@ -63,6 +63,7 @@
 	"room.help": "Help",
 	"room.about": "About",
 	"room.shortcutKeys": "Shortcut Keys",
+	"room.browsePeersSpotlight": null,

 	"me.mutedPTT": "You are muted, hold down SPACE-BAR to talk",

@ -84,6 +85,9 @@
 	"tooltip.muteParticipantVideo": "Mute participant video",
 	"tooltip.raisedHand": "Raise hand",
 	"tooltip.muteScreenSharing": "Mute participant share",
+	"tooltip.muteParticipantAudioModerator": "Mute participant audio globally",
+	"tooltip.muteParticipantVideoModerator": "Mute participant video globally",
+	"tooltip.muteScreenSharingModerator": "Mute participant screen share globally",

 	"label.roomName": "Room name",
 	"label.chooseRoomButton": "Continue",
@ -109,7 +113,7 @@
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Close",
 	"label.media": "Media",
-	"label.appearence": "Appearence",
+	"label.appearance": "Appearence",
 	"label.advanced": "Advanced",
 	"label.addVideo": "Add video",
 	"label.promoteAllPeers": "Promote all",
--- a/app/src/translations/es.json
+++ b/app/src/translations/es.json
@ -63,6 +63,7 @@
 	"room.help": null,
 	"room.about": null,
 	"room.shortcutKeys": null,
+	"room.browsePeersSpotlight": null,

 	"me.mutedPTT": null,

@ -84,6 +85,9 @@
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
 	"tooltip.muteScreenSharing": null,
+	"tooltip.muteParticipantAudioModerator": null,
+	"tooltip.muteParticipantVideoModerator": null,
+	"tooltip.muteScreenSharingModerator": null,

 	"label.roomName": "Nombre de la sala",
 	"label.chooseRoomButton": "Continuar",
@ -109,7 +113,7 @@
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Cerrar",
 	"label.media": null,
-	"label.appearence": null,
+	"label.appearance": null,
 	"label.advanced": null,
 	"label.addVideo": null,
 	"label.promoteAllPeers": null,
--- a/app/src/translations/fr.json
+++ b/app/src/translations/fr.json
@ -63,6 +63,7 @@
 	"room.help": null,
 	"room.about": null,
 	"room.shortcutKeys": null,
+	"room.browsePeersSpotlight": null,

 	"me.mutedPTT": null,

@ -84,6 +85,9 @@
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
 	"tooltip.muteScreenSharing": null,
+	"tooltip.muteParticipantAudioModerator": null,
+	"tooltip.muteParticipantVideoModerator": null,
+	"tooltip.muteScreenSharingModerator": null,

 	"label.roomName": "Nom de la salle",
 	"label.chooseRoomButton": "Continuer",
@ -109,7 +113,7 @@
 	"label.ultra": "Ultra Haute Définition",
 	"label.close": "Fermer",
 	"label.media": null,
-	"label.appearence": null,
+	"label.appearance": null,
 	"label.advanced": null,
 	"label.addVideo": null,
 	"label.promoteAllPeers": null,
--- a/app/src/translations/hr.json
+++ b/app/src/translations/hr.json
@ -63,6 +63,7 @@
 	"room.help": null,
 	"room.about": null,
 	"room.shortcutKeys": null,
+	"room.browsePeersSpotlight": null,

 	"me.mutedPTT": "Utišani ste, pritisnite i držite SPACE tipku za razgovor",

@ -84,6 +85,9 @@
 	"tooltip.muteParticipantVideo": "Ne primaj video sudionika",
 	"tooltip.raisedHand": "Podigni ruku",
 	"tooltip.muteScreenSharing": null,
+	"tooltip.muteParticipantAudioModerator": null,
+	"tooltip.muteParticipantVideoModerator": null,
+	"tooltip.muteScreenSharingModerator": null,

 	"label.roomName": "Naziv sobe",
 	"label.chooseRoomButton": "Nastavi",
@ -109,7 +113,7 @@
 	"label.ultra": "Ultra visoka (UHD)",
 	"label.close": "Zatvori",
 	"label.media": "Medij",
-	"label.appearence": "Prikaz",
+	"label.appearance": "Prikaz",
 	"label.advanced": "Napredno",
 	"label.addVideo": "Dodaj video",
 	"label.promoteAllPeers": "Promoviraj sve",
--- a/app/src/translations/hu.json
+++ b/app/src/translations/hu.json
@ -63,6 +63,7 @@
 	"room.help": "Segítség",
 	"room.about": "Névjegy",
 	"room.shortcutKeys": "Billentyűparancsok",
+	"room.browsePeersSpotlight": null,

 	"me.mutedPTT": "Némítva vagy, ha beszélnél nyomd le a szóköz billentyűt",

@ -84,6 +85,9 @@
 	"tooltip.muteParticipantVideo": "Résztvevő videóstreamének némítása",
 	"tooltip.raisedHand": "Jelentkezés",
 	"tooltip.muteScreenSharing": "Képernyőmegosztás szüneteltetése",
+	"tooltip.muteParticipantAudioModerator": "Résztvevő hangjának általános némítása",
+	"tooltip.muteParticipantVideoModerator": "Résztvevő videójának általános némítása",
+	"tooltip.muteScreenSharingModerator": "Résztvevő képernyőmegosztásának általános némítása",

 	"label.roomName": "Konferencia",
 	"label.chooseRoomButton": "Tovább",
@ -109,7 +113,7 @@
 	"label.ultra": "Ultra magas (UHD)",
 	"label.close": "Bezár",
 	"label.media": "Média",
-	"label.appearence": "Megjelenés",
+	"label.appearance": "Megjelenés",
 	"label.advanced": "Részletek",
 	"label.addVideo": "Videó hozzáadása",
 	"label.promoteAllPeers": "Mindenkit beengedek",
@ -138,7 +142,7 @@
 	"settings.echoCancellation": "Visszhangelnyomás",
 	"settings.autoGainControl": "Automatikus hangerő",
 	"settings.noiseSuppression": "Zajelnyomás",
-	"settings.drawerOverlayed": null,
+	"settings.drawerOverlayed": "Oldalsáv a tartalom felett",

 	"filesharing.saveFileError": "A file-t nem sikerült elmenteni",
 	"filesharing.startingFileShare": "Fájl megosztása",
--- a/app/src/translations/it.json
+++ b/app/src/translations/it.json
@ -59,10 +59,11 @@
 	"room.raisedHand": "{displayName} ha alzato la mano",
 	"room.loweredHand": "{displayName} ha abbassato la mano",
 	"room.extraVideo": "Video extra",
-	"room.overRoomLimit": null,
-	"room.help": null,
-	"room.about": null,
-	"room.shortcutKeys": null,
+	"room.overRoomLimit": "La stanza è piena, riprova più tardi.",
+	"room.help": "Aiuto",
+	"room.about": "Informazioni su",
+	"room.shortcutKeys": "Scorciatoie da tastiera",
+	"room.browsePeersSpotlight": null,

 	"me.mutedPTT": "Sei mutato, tieni premuto SPAZIO per parlare",

@ -71,7 +72,7 @@

 	"tooltip.login": "Log in",
 	"tooltip.logout": "Log out",
-	"tooltip.admitFromLobby": "Ammetti dalla lobby",
+	"tooltip.admitFromLobby": "Accetta partecipante dalla lobby",
 	"tooltip.lockRoom": "Blocca stanza",
 	"tooltip.unLockRoom": "Sblocca stanza",
 	"tooltip.enterFullscreen": "Modalità schermo intero",
@ -79,10 +80,14 @@
 	"tooltip.lobby": "Mostra lobby",
 	"tooltip.settings": "Mostra impostazioni",
 	"tooltip.participants": "Mostra partecipanti",
+	"tooltip.kickParticipant": "Espelli partecipante",
 	"tooltip.muteParticipant": "Muta partecipante",
 	"tooltip.muteParticipantVideo": "Ferma video partecipante",
 	"tooltip.raisedHand": "Mano alzata",
-	"tooltip.muteScreenSharing": null,
+	"tooltip.muteScreenSharing": "Ferma condivisione schermo partecipante",
+	"tooltip.muteParticipantAudioModerator": "Sospendi audio globale",
+	"tooltip.muteParticipantVideoModerator": "Sospendi video globale",
+	"tooltip.muteScreenSharingModerator": "Sospendi condivisione schermo globale",

 	"label.roomName": "Nome della stanza",
 	"label.chooseRoomButton": "Continua",
@ -96,7 +101,7 @@
 	"label.filesharing": "Condivisione file",
 	"label.participants": "Partecipanti",
 	"label.shareFile": "Condividi file",
-	"label.shareGalleryFile": null,
+	"label.shareGalleryFile": "Condividi immagine",
 	"label.fileSharingUnsupported": "Condivisione file non supportata",
 	"label.unknown": "Sconosciuto",
 	"label.democratic": "Vista Democratica",
@ -108,11 +113,11 @@
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Chiudi",
 	"label.media": "Media",
-	"label.appearence": "Aspetto",
+	"label.appearance": "Aspetto",
 	"label.advanced": "Avanzate",
 	"label.addVideo": "Aggiungi video",
 	"label.promoteAllPeers": "Promuovi tutti",
-	"label.moreActions": null,
+	"label.moreActions": "Altre azioni",

 	"settings.settings": "Impostazioni",
 	"settings.camera": "Videocamera",
@ -132,12 +137,12 @@
 	"settings.lastn": "Numero di video visibili",
 	"settings.hiddenControls": "Controlli media nascosti",
 	"settings.notificationSounds": "Suoni di notifica",
-	"settings.showNotifications": null,
-	"settings.buttonControlBar": null,
-	"settings.echoCancellation": null,
-	"settings.autoGainControl": null,
-	"settings.noiseSuppression": null,
-	"settings.drawerOverlayed": null,
+	"settings.showNotifications": "Mostra notifiche",
+	"settings.buttonControlBar": "Controlli media separati",
+	"settings.echoCancellation": "Cancellazione echo",
+	"settings.autoGainControl": "Controllo guadagno automatico",
+	"settings.noiseSuppression": "Riduzione del rumore",
+	"settings.drawerOverlayed": "Barra laterale sovrapposta",

 	"filesharing.saveFileError": "Impossibile salvare file",
 	"filesharing.startingFileShare": "Tentativo di condivisione file",
@ -153,7 +158,7 @@
 	"devices.devicesChanged": "Il tuo dispositivo è cambiato, configura i dispositivi nel menù di impostazioni",

 	"device.audioUnsupported": "Dispositivo audio non supportato",
-	"device.activateAudio": "Attiva  audio",
+	"device.activateAudio": "Attiva audio",
 	"device.muteAudio": "Silenzia audio",
 	"device.unMuteAudio": "Riattiva audio",

@ -183,4 +188,4 @@
 	"moderator.clearFiles": "Il moderatore ha pulito i file",
 	"moderator.muteAudio": "Il moderatore ha mutato il tuo audio",
 	"moderator.muteVideo": "Il moderatore ha fermato il tuo video"
-}
+}
--- a/app/src/translations/lv.json
+++ b/app/src/translations/lv.json
@ -62,6 +62,7 @@
 	"room.help": null,
 	"room.about": null,
 	"room.shortcutKeys": null,
+	"room.browsePeersSpotlight": null,

 	"me.mutedPTT": "Jūs esat noklusināts. Turiet taustiņu SPACE-BAR, lai runātu",

@ -83,6 +84,9 @@
 	"tooltip.muteParticipantVideo": "Atslēgt dalībnieka video",
 	"tooltip.raisedHand": "Pacelt roku",
 	"tooltip.muteScreenSharing": null,
+	"tooltip.muteParticipantAudioModerator": null,
+	"tooltip.muteParticipantVideoModerator": null,
+	"tooltip.muteScreenSharingModerator": null,

 	"label.roomName": "Sapulces telpas nosaukums (ID)",
 	"label.chooseRoomButton": "Turpināt",
@ -107,7 +111,7 @@
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Aizvērt",
 	"label.media": "Mediji",
-	"label.appearence": "Izskats",
+	"label.appearance": "Izskats",
 	"label.advanced": "Advancēts",
 	"label.addVideo": "Pievienot video",
 	"label.moreActions": null,
--- a/app/src/translations/nb.json
+++ b/app/src/translations/nb.json
@ -63,6 +63,7 @@
 	"room.help": null,
 	"room.about": null,
 	"room.shortcutKeys": null,
+	"room.browsePeersSpotlight": null,

 	"me.mutedPTT": "Du er dempet, hold nede SPACE for å snakke",

@ -84,6 +85,9 @@
 	"tooltip.muteParticipantVideo": "Demp deltakervideo",
 	"tooltip.raisedHand": "Rekk opp hånden",
 	"tooltip.muteScreenSharing": "Demp deltaker skjermdeling",
+	"tooltip.muteParticipantAudioModerator": null,
+	"tooltip.muteParticipantVideoModerator": null,
+	"tooltip.muteScreenSharingModerator": null,

 	"label.roomName": "Møtenavn",
 	"label.chooseRoomButton": "Fortsett",
@ -109,7 +113,7 @@
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Lukk",
 	"label.media": "Media",
-	"label.appearence": "Utseende",
+	"label.appearance": "Utseende",
 	"label.advanced": "Avansert",
 	"label.addVideo": "Legg til video",
 	"label.promoteAllPeers": "Slipp inn alle",
--- a/app/src/translations/pl.json
+++ b/app/src/translations/pl.json
@ -63,6 +63,7 @@
 	"room.help": "Pomoc",
 	"room.about": "O pogramie",
 	"room.shortcutKeys": "Skróty klawiaturowe",
+	"room.browsePeersSpotlight": null,

 	"me.mutedPTT": "Masz wyciszony mikrofon, przytrzymaj spację aby mówić",

@ -84,6 +85,9 @@
 	"tooltip.muteParticipantVideo": "Wyłącz wideo użytkownika",
 	"tooltip.raisedHand": "Podnieś rękę",
 	"tooltip.muteScreenSharing": "Anuluj udostępniania pulpitu przez użytkownika",
+	"tooltip.muteParticipantAudioModerator": null,
+	"tooltip.muteParticipantVideoModerator": null,
+	"tooltip.muteScreenSharingModerator": null,

 	"label.roomName": "Nazwa konferencji",
 	"label.chooseRoomButton": "Kontynuuj",
@ -109,7 +113,7 @@
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Zamknij",
 	"label.media": "Media",
-	"label.appearence": "Wygląd",
+	"label.appearance": "Wygląd",
 	"label.advanced": "Zaawansowane",
 	"label.addVideo": "Dodaj wideo",
 	"label.promoteAllPeers": "Wpuść wszystkich",
--- a/app/src/translations/pt.json
+++ b/app/src/translations/pt.json
@ -63,6 +63,7 @@
 	"room.help": null,
 	"room.about": null,
 	"room.shortcutKeys": null,
+	"room.browsePeersSpotlight": null,

 	"me.mutedPTT": null,

@ -84,6 +85,9 @@
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
 	"tooltip.muteScreenSharing": null,
+	"tooltip.muteParticipantAudioModerator": null,
+	"tooltip.muteParticipantVideoModerator": null,
+	"tooltip.muteScreenSharingModerator": null,

 	"label.roomName": "Nome da sala",
 	"label.chooseRoomButton": "Continuar",
@ -109,7 +113,7 @@
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Fechar",
 	"label.media": null,
-	"label.appearence": null,
+	"label.appearance": null,
 	"label.advanced": null,
 	"label.addVideo": null,
 	"label.promoteAllPeers": null,
--- a/app/src/translations/ro.json
+++ b/app/src/translations/ro.json
@ -63,6 +63,7 @@
 	"room.help": null,
 	"room.about": null,
 	"room.shortcutKeys": null,
+	"room.browsePeersSpotlight": null,

 	"me.mutedPTT": null,

@ -84,6 +85,9 @@
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
 	"tooltip.muteScreenSharing": null,
+	"tooltip.muteParticipantAudioModerator": null,
+	"tooltip.muteParticipantVideoModerator": null,
+	"tooltip.muteScreenSharingModerator": null,

 	"label.roomName": "Numele camerei",
 	"label.chooseRoomButton": "Continuare",
@ -109,7 +113,7 @@
 	"label.ultra": "Rezoluție ultra înaltă (UHD)",
 	"label.close": "Închide",
 	"label.media": null,
-	"label.appearence": null,
+	"label.appearance": null,
 	"label.advanced": null,
 	"label.addVideo": null,
 	"label.promoteAllPeers": null,
--- a/app/src/translations/tr.json
+++ b/app/src/translations/tr.json
@ -63,6 +63,7 @@
 	"room.help": null,
 	"room.about": null,
 	"room.shortcutKeys": null,
+	"room.browsePeersSpotlight": null,

 	"me.mutedPTT": null,

@ -84,6 +85,9 @@
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
 	"tooltip.muteScreenSharing": null,
+	"tooltip.muteParticipantAudioModerator": null,
+	"tooltip.muteParticipantVideoModerator": null,
+	"tooltip.muteScreenSharingModerator": null,

 	"label.roomName": "Oda adı",
 	"label.chooseRoomButton": "Devam",
@ -109,7 +113,7 @@
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Kapat",
 	"label.media": null,
-	"label.appearence": null,
+	"label.appearance": null,
 	"label.advanced": null,
 	"label.addVideo": null,
 	"label.promoteAllPeers": null,
--- a/app/src/translations/tw.json
+++ b/app/src/translations/tw.json
@ -0,0 +1,190 @@
+{
+	"socket.disconnected": "您已斷開連接",
+	"socket.reconnecting": "嘗試重新連接",
+	"socket.reconnected": "您已重新連接",
+	"socket.requestError": "服務器請求錯誤",
+
+	"room.chooseRoom": "選擇您要加入的房間的名稱",
+	"room.cookieConsent": "這個網站使用Cookies來提升您的使用者體驗",
+	"room.consentUnderstand": "了解",
+	"room.joined": "您已加入房間",
+	"room.cantJoin": "無法加入房間",
+	"room.youLocked": "您已鎖定房間",
+	"room.cantLock": "無法鎖定房間",
+	"room.youUnLocked": "您解鎖了房間",
+	"room.cantUnLock": "無法解鎖房間",
+	"room.locked": "房間已鎖定",
+	"room.unlocked": "房間現已解鎖",
+	"room.newLobbyPeer": "新參與者進入大廳",
+	"room.lobbyPeerLeft": "參與者離開大廳",
+	"room.lobbyPeerChangedDisplayName": "大廳的參與者將名稱變更為 {displayName}",
+	"room.lobbyPeerChangedPicture": "大廳的參與者變更了圖片",
+	"room.setAccessCode": "設置房間的進入密碼",
+	"room.accessCodeOn": "房間的進入密碼現已啟用",
+	"room.accessCodeOff": "房間的進入密碼已停用",
+	"room.peerChangedDisplayName": "{oldDisplayName} 已變更名稱為 {displayName}",
+	"room.newPeer": "{displayName} 加入了會議室",
+	"room.newFile": "有新文件",
+	"room.toggleAdvancedMode": "切換進階模式",
+	"room.setDemocraticView": "已更改為使用者佈局",
+	"room.setFilmStripView": "已更改為投影片佈局",
+	"room.loggedIn": "您已登入",
+	"room.loggedOut": "您已登出",
+	"room.changedDisplayName": "您的顯示名稱已變更為 {displayName}",
+	"room.changeDisplayNameError": "更改顯示名稱時發生錯誤",
+	"room.chatError": "無法發送聊天消息",
+	"room.aboutToJoin": "您即將參加會議",
+	"room.roomId": "房間ID: {roomName}",
+	"room.setYourName": "設置您的顯示名稱，並選擇您想加入的方式：",
+	"room.audioOnly": "僅通話",
+	"room.audioVideo": "通話和視訊",
+	"room.youAreReady": "準備完畢！",
+	"room.emptyRequireLogin": "房間是空的！ 您可以登錄以開始會議或等待主持人加入",
+	"room.locketWait": "房間已鎖定！ 請等待其他人允許您進入...",
+	"room.lobbyAdministration": "大廳管理",
+	"room.peersInLobby": "大廳的參與者",
+	"room.lobbyEmpty": "大廳目前沒有人",
+	"room.hiddenPeers": "{hiddenPeersCount, plural, one {participant} other {participants}}",
+	"room.me": "我",
+	"room.spotlights": "Spotlight中的參與者",
+	"room.passive": "被動參與者",
+	"room.videoPaused": "視訊已關閉",
+	"room.muteAll": "全部靜音",
+	"room.stopAllVideo": "關閉全部視訊",
+	"room.closeMeeting": "關閉會議",
+	"room.clearChat": "清除聊天",
+	"room.clearFileSharing": "清除檔案",
+	"room.speechUnsupported": "您的瀏覽器不支援語音辨識",
+	"room.moderatoractions": "管理員動作",
+	"room.raisedHand": "{displayName} 舉手了",
+	"room.loweredHand": "{displayName} 放下了他的手",
+	"room.extraVideo": "其他視訊",
+	"room.overRoomLimit": "房間已滿，請稍後重試",
+	"room.help": "幫助",
+	"room.about": "關於",
+	"room.shortcutKeys": "鍵盤快速鍵",
+	
+	"me.mutedPTT": "您已靜音，請按下 空白鍵 來說話",
+
+	"roles.gotRole": "您已取得身份: {role}",
+	"roles.lostRole": "您的 {role} 身份已被撤銷",
+
+	"tooltip.login": "登入",
+	"tooltip.logout": "登出",
+	"tooltip.admitFromLobby": "從大廳允許",
+	"tooltip.lockRoom": "鎖定房間",
+	"tooltip.unLockRoom": "解鎖房間",
+	"tooltip.enterFullscreen": "進入全螢幕",
+	"tooltip.leaveFullscreen": "退出全螢幕",
+	"tooltip.lobby": "顯示大廳",
+	"tooltip.settings": "顯示設置",
+	"tooltip.participants": "顯示參加者",
+	"tooltip.kickParticipant": "踢出",
+	"tooltip.muteParticipant": "靜音",
+	"tooltip.muteParticipantVideo": "隱藏視訊",
+	"tooltip.raisedHand": "舉手",
+	"tooltip.muteScreenSharing": "隱藏螢幕分享",
+	"tooltip.muteParticipantAudioModerator": "關閉聲音",
+	"tooltip.muteParticipantVideoModerator": "關閉視訊",
+	"tooltip.muteScreenSharingModerator": "關閉螢幕分享",
+
+	"label.roomName": "房間名稱",
+	"label.chooseRoomButton": "繼續",
+	"label.yourName": "您的名字",
+	"label.newWindow": "新視窗",
+	"label.fullscreen": "全螢幕",
+	"label.openDrawer": "打開側邊欄",
+	"label.leave": "離開",
+	"label.chatInput": "輸入聊天訊息",
+	"label.chat": "聊天",
+	"label.filesharing": "文件分享",
+	"label.participants": "參與者",
+	"label.shareFile": "分享文件",
+	"label.shareGalleryFile": "分享圖片",
+	"label.fileSharingUnsupported": "不支援文件分享",
+	"label.unknown": "未知",
+	"label.democratic": "使用者佈局",
+	"label.filmstrip": "投影片佈局",
+	"label.low": "低",
+	"label.medium": "中",
+	"label.high": "高 (HD)",
+	"label.veryHigh": "非常高 (FHD)",
+	"label.ultra": "超高 (UHD)",
+	"label.close": "關閉",
+	"label.media": "媒體",
+	"label.appearance": "外觀",
+	"label.advanced": "進階",
+	"label.addVideo": "新增視訊",
+	"label.promoteAllPeers": "提升全部",
+	"label.moreActions": "更多",
+
+	"settings.settings": "設置",
+	"settings.camera": "視訊來源",
+	"settings.selectCamera": "選擇視訊來源",
+	"settings.cantSelectCamera": "無法選擇此視訊來源",
+	"settings.audio": "音訊來源",
+	"settings.selectAudio": "選擇音訊來源",
+	"settings.cantSelectAudio": "無法選擇音訊來源",
+	"settings.audioOutput": "音訊輸出",
+	"settings.selectAudioOutput": "選擇音訊輸出設備",
+	"settings.cantSelectAudioOutput": "無法選擇音訊輸出設備",
+	"settings.resolution": "選擇視訊解析度",
+	"settings.layout": "房間佈局",
+	"settings.selectRoomLayout": "選擇房間佈局",
+	"settings.advancedMode": "進階模式",
+	"settings.permanentTopBar": "固定頂端列",
+	"settings.lastn": "視訊數量上限",
+	"settings.hiddenControls": "隱藏控制按鈕",
+	"settings.notificationSounds": "通知音效",
+	"settings.showNotifications": "顯示通知",
+	"settings.buttonControlBar": "獨立控制按鈕",
+	"settings.echoCancellation": "回音消除",
+	"settings.autoGainControl": "自動增益控制",
+	"settings.noiseSuppression": "噪音消除",
+	"settings.drawerOverlayed": "側邊欄覆蓋畫面",
+
+	"filesharing.saveFileError": "無法保存文件",
+	"filesharing.startingFileShare": "開始分享文件",
+	"filesharing.successfulFileShare": "文件已成功分享",
+	"filesharing.unableToShare": "無法分享文件",
+	"filesharing.error": "文件分享發生錯誤",
+	"filesharing.finished": "文件分享成功",
+	"filesharing.save": "保存文件",
+	"filesharing.sharedFile": "{displayName} 分享了一個文件",
+	"filesharing.download": "下載文件",
+	"filesharing.missingSeeds": "如果過了很久還是無法下載，則可能沒有人播種了。請讓上傳者重新上傳您想要的文件。",
+
+	"devices.devicesChanged": "您的設備已更改，請在設置中設定您的設備",
+
+	"device.audioUnsupported": "不支援您的音訊格式",
+	"device.activateAudio": "開啟音訊",
+	"device.muteAudio": "靜音",
+	"device.unMuteAudio": "取消靜音",
+
+	"device.videoUnsupported": "不支援您的視訊格式",
+	"device.startVideo": "開啟視訊",
+	"device.stopVideo": "關閉視訊",
+
+	"device.screenSharingUnsupported": "不支援您的螢幕分享格式",
+	"device.startScreenSharing": "開始螢幕分享",
+	"device.stopScreenSharing": "停止螢幕分享",
+
+	"devices.microphoneDisconnected": "麥克風已斷開",
+	"devices.microphoneError": "麥克風發生錯誤",
+	"devices.microphoneMute": "麥克風靜音",
+	"devices.microphoneUnMute": "取消麥克風靜音",
+	"devices.microphoneEnable": "麥克風已啟用",
+	"devices.microphoneMuteError": "無法使麥克風靜音",
+	"devices.microphoneUnMuteError": "無法取消麥克風靜音",
+
+	"devices.screenSharingDisconnected" : "螢幕分享已斷開",
+	"devices.screenSharingError": "螢幕分享時發生錯誤",
+
+	"devices.cameraDisconnected": "相機已斷開連接",
+	"devices.cameraError": "存取相機時發生錯誤",
+
+	"moderator.clearChat": "管理員清除了聊天",
+	"moderator.clearFiles": "管理員清除了所有檔案",
+	"moderator.muteAudio": "您已被管理員靜音",
+	"moderator.muteVideo": "您的視訊已被管理員關閉"
+}
--- a/app/src/translations/uk.json
+++ b/app/src/translations/uk.json
@ -63,6 +63,7 @@
 	"room.help": null,
 	"room.about": null,
 	"room.shortcutKeys": null,
+	"room.browsePeersSpotlight": null,

 	"me.mutedPTT": null,

@ -84,6 +85,9 @@
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
 	"tooltip.muteScreenSharing": null,
+	"tooltip.muteParticipantAudioModerator": null,
+	"tooltip.muteParticipantVideoModerator": null,
+	"tooltip.muteScreenSharingModerator": null,

 	"label.roomName": "Назва кімнати",
 	"label.chooseRoomButton": "Продовжити",
@ -109,7 +113,7 @@
 	"label.ultra": "Ультра (UHD)",
 	"label.close": "Закрити",
 	"label.media": null,
-	"label.appearence": null,
+	"label.appearance": null,
 	"label.advanced": null,
 	"label.addVideo": null,
 	"label.promoteAllPeers": null,