Added internationalization support, and translated to nb-NO.

app/src/components/Containers/HiddenPeers.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
+import { FormattedMessage } from 'react-intl';
 import * as toolareaActions from '../../actions/toolareaActions';
 import BuddyImage from '../../images/buddy.svg';
 
@@ -95,8 +96,19 @@ class HiddenPeers extends React.PureComponent
 				className={classnames(classes.root, this.state.className)}
 				onClick={() => openUsersTab()}
 			>
-				<p>+{hiddenPeersCount} <br /> participant
-					{(hiddenPeersCount > 1) && 's'}
+				<p>
+					+{hiddenPeersCount} <br />
+					<FormattedMessage
+						id='room.hiddenPeers'
+						defaultMessage={
+							`{hiddenPeersCount, plural,
+							one {participant}
+							other {participants}}`
+						}
+						values={{
+							hiddenPeersCount
+						}}
+					/>
 				</p>
 			</div>
 		);

app/src/components/Containers/Me.js

@@ -7,6 +7,7 @@ import useMediaQuery from '@material-ui/core/useMediaQuery';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import * as appPropTypes from '../appPropTypes';
+import { useIntl, FormattedMessage } from 'react-intl';
 import VideoView from '../VideoContainers/VideoView';
 import Volume from './Volume';
 import Fab from '@material-ui/core/Fab';
@@ -96,6 +97,8 @@ const Me = (props) =>
 {
 	const [ hover, setHover ] = useState(false);
 
+	const intl = useIntl();
+
 	let touchTimeout = null;
 
 	const {
@@ -133,22 +136,34 @@ const Me = (props) =>
 	if (!me.canSendMic)
 	{
 		micState = 'unsupported';
-		micTip = 'Audio unsupported';
+		micTip = intl.formatMessage({
+			id             : 'device.audioUnsupported',
+			defaultMessage : 'Audio unsupported'
+		});
 	}
 	else if (!micProducer)
 	{
 		micState = 'off';
-		micTip = 'Activate audio';
+		micTip = intl.formatMessage({
+			id             : 'device.activateAudio',
+			defaultMessage : 'Activate audio'
+		});
 	}
 	else if (!micProducer.locallyPaused && !micProducer.remotelyPaused)
 	{
 		micState = 'on';
-		micTip = 'Mute audio';
+		micTip = intl.formatMessage({
+			id             : 'device.muteAudio',
+			defaultMessage : 'Mute audio'
+		});
 	}
 	else
 	{
 		micState = 'muted';
-		micTip = 'Unmute audio';
+		micTip = intl.formatMessage({
+			id             : 'device.unMuteAudio',
+			defaultMessage : 'Unmute audio'
+		});
 	}
 
 	let webcamState;
@@ -158,17 +173,26 @@ const Me = (props) =>
 	if (!me.canSendWebcam)
 	{
 		webcamState = 'unsupported';
-		webcamTip = 'Video unsupported';
+		webcamTip = intl.formatMessage({
+			id             : 'device.videoUnsupported',
+			defaultMessage : 'Video unsupported'
+		});
 	}
 	else if (webcamProducer)
 	{
 		webcamState = 'on';
-		webcamTip = 'Stop video';
+		webcamTip = intl.formatMessage({
+			id             : 'device.stopVideo',
+			defaultMessage : 'Stop video'
+		});
 	}
 	else
 	{
 		webcamState = 'off';
-		webcamTip = 'Start video';
+		webcamTip = intl.formatMessage({
+			id             : 'device.startVideo',
+			defaultMessage : 'Start video'
+		});
 	}
 
 	let screenState;
@@ -178,17 +202,26 @@ const Me = (props) =>
 	if (!me.canShareScreen)
 	{
 		screenState = 'unsupported';
-		screenTip = 'Screen sharing not supported';
+		screenTip = intl.formatMessage({
+			id             : 'device.screenSharingUnsupported',
+			defaultMessage : 'Screen sharing not supported'
+		});
 	}
 	else if (screenProducer)
 	{
 		screenState = 'on';
-		screenTip = 'Stop screen sharing';
+		screenTip = intl.formatMessage({
+			id             : 'device.stopScreenSharing',
+			defaultMessage : 'Stop screen sharing'
+		});
 	}
 	else
 	{
 		screenState = 'off';
-		screenTip = 'Start screen sharing';
+		screenTip = intl.formatMessage({
+			id             : 'device.startScreenSharing',
+			defaultMessage : 'Start screen sharing'
+		});
 	}
 
 	const spacingStyle =
@@ -253,11 +286,19 @@ const Me = (props) =>
 							}, 2000);
 						}}
 					>
-						<p>ME</p>
-						<Tooltip title={micTip} placement={smallScreen ? 'top' : 'right'}>
+						<p>
+							<FormattedMessage
+								id='room.me'
+								defaultMessage='ME'
+							/>
+						</p>
+						<Tooltip title={micTip} placement={smallScreen ? 'top' : 'left'}>
 							<div>
 								<Fab
-									aria-label='Mute mic'
+									aria-label={intl.formatMessage({
+										id             : 'device.muteAudio',
+										defaultMessage : 'Mute audio'
+									})}
 									className={classes.fab}
 									disabled={!me.canSendMic || me.audioInProgress}
 									color={micState === 'on' ? 'default' : 'secondary'}
@@ -280,10 +321,13 @@ const Me = (props) =>
 								</Fab>
 							</div>
 						</Tooltip>
-						<Tooltip title={webcamTip} placement={smallScreen ? 'top' : 'right'}>
+						<Tooltip title={webcamTip} placement={smallScreen ? 'top' : 'left'}>
 							<div>
 								<Fab
-									aria-label='Mute video'
+									aria-label={intl.formatMessage({
+										id             : 'device.startVideo',
+										defaultMessage : 'Start video'
+									})}
 									className={classes.fab}
 									disabled={!me.canSendWebcam || me.webcamInProgress}
 									color={webcamState === 'on' ? 'default' : 'secondary'}
@@ -303,10 +347,13 @@ const Me = (props) =>
 								</Fab>
 							</div>
 						</Tooltip>
-						<Tooltip title={screenTip} placement={smallScreen ? 'top' : 'right'}>
+						<Tooltip title={screenTip} placement={smallScreen ? 'top' : 'left'}>
 							<div>
 								<Fab
-									aria-label='Share screen'
+									aria-label={intl.formatMessage({
+										id             : 'device.startScreenSharing',
+										defaultMessage : 'Start screen sharing'
+									})}
 									className={classes.fab}
 									disabled={!me.canShareScreen || me.screenShareInProgress}
 									color={screenState === 'on' ? 'primary' : 'default'}
@@ -410,7 +457,12 @@ const Me = (props) =>
 								}, 2000);
 							}}
 						>
-							<p>ME</p>
+							<p>
+								<FormattedMessage
+									id='room.me'
+									defaultMessage='ME'
+								/>
+							</p>
 						</div>
 						
 						<VideoView

app/src/components/Containers/Peer.js

@@ -8,7 +8,9 @@ import { withRoomContext } from '../../RoomContext';
 import { withStyles } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import * as roomActions from '../../actions/roomActions';
+import { useIntl, FormattedMessage } from 'react-intl';
 import VideoView from '../VideoContainers/VideoView';
+import Tooltip from '@material-ui/core/Tooltip';
 import Fab from '@material-ui/core/Fab';
 import MicIcon from '@material-ui/icons/Mic';
 import MicOffIcon from '@material-ui/icons/MicOff';
@@ -103,6 +105,8 @@ const Peer = (props) =>
 {
 	const [ hover, setHover ] = useState(false);
 
+	const intl = useIntl();
+
 	let touchTimeout = null;
 
 	const {
@@ -194,7 +198,12 @@ const Peer = (props) =>
 				<div className={classnames(classes.viewContainer)}>
 					{ !videoVisible &&
 						<div className={classes.videoInfo}>
-							<p>this video is paused</p>
+							<p>
+								<FormattedMessage
+									id='room.videoPaused'
+									defaultMessage='This video is paused'
+								/>
+							</p>
 						</div>
 					}
 
@@ -220,56 +229,95 @@ const Peer = (props) =>
 							}, 2000);
 						}}
 					>
-						<Fab
-							aria-label='Mute mic'
-							className={classes.fab}
-							disabled={!micConsumer}
-							color={micEnabled ? 'default' : 'secondary'}
-							size={smallButtons ? 'small' : 'large'}
-							onClick={() =>
-							{
-								micEnabled ?
-									roomClient.modifyPeerConsumer(peer.id, 'mic', true) :
-									roomClient.modifyPeerConsumer(peer.id, 'mic', false);
-							}}
+						<Tooltip
+							title={intl.formatMessage({
+								id             : 'device.muteAudio',
+								defaultMessage : 'Mute audio'
+							})}
+							placement={smallScreen ? 'top' : 'left'}
 						>
-							{ micEnabled ?
-								<MicIcon />
-								:
-								<MicOffIcon />
-							}
-						</Fab>
+							<div>
+								<Fab
+									aria-label={intl.formatMessage({
+										id             : 'device.muteAudio',
+										defaultMessage : 'Mute audio'
+									})}
+									className={classes.fab}
+									disabled={!micConsumer}
+									color={micEnabled ? 'default' : 'secondary'}
+									size={smallButtons ? 'small' : 'large'}
+									onClick={() =>
+									{
+										micEnabled ?
+											roomClient.modifyPeerConsumer(peer.id, 'mic', true) :
+											roomClient.modifyPeerConsumer(peer.id, 'mic', false);
+									}}
+								>
+									{ micEnabled ?
+										<MicIcon />
+										:
+										<MicOffIcon />
+									}
+								</Fab>
+							</div>
+						</Tooltip>
 
 						{ !smallScreen &&
-							<Fab
-								aria-label='New window'
-								className={classes.fab}
-								disabled={
-									!videoVisible ||
-									(windowConsumer === webcamConsumer.id)
-								}
-								size={smallButtons ? 'small' : 'large'}
-								onClick={() =>
-								{
-									toggleConsumerWindow(webcamConsumer);
-								}}
+							<Tooltip
+								title={intl.formatMessage({
+									id             : 'label.newWindow',
+									defaultMessage : 'New window'
+								})}
+								placement={smallScreen ? 'top' : 'left'}
 							>
-								<NewWindowIcon />
-							</Fab>
+								<div>
+									<Fab
+										aria-label={intl.formatMessage({
+											id             : 'label.newWindow',
+											defaultMessage : 'New window'
+										})}
+										className={classes.fab}
+										disabled={
+											!videoVisible ||
+											(windowConsumer === webcamConsumer.id)
+										}
+										size={smallButtons ? 'small' : 'large'}
+										onClick={() =>
+										{
+											toggleConsumerWindow(webcamConsumer);
+										}}
+									>
+										<NewWindowIcon />
+									</Fab>
+								</div>
+							</Tooltip>
 						}
 
-						<Fab
-							aria-label='Fullscreen'
-							className={classes.fab}
-							disabled={!videoVisible}
-							size={smallButtons ? 'small' : 'large'}
-							onClick={() =>
-							{
-								toggleConsumerFullscreen(webcamConsumer);
-							}}
+						<Tooltip
+							title={intl.formatMessage({
+								id             : 'label.fullscreen',
+								defaultMessage : 'Fullscreen'
+							})}
+							placement={smallScreen ? 'top' : 'left'}
 						>
-							<FullScreenIcon />
-						</Fab>
+							<div>
+								<Fab
+									aria-label={intl.formatMessage({
+										id             : 'label.fullscreen',
+										defaultMessage : 'Fullscreen'
+									})}
+									className={classes.fab}
+									disabled={!videoVisible}
+									size={smallButtons ? 'small' : 'large'}
+									onClick={() =>
+									{
+										toggleConsumerFullscreen(webcamConsumer);
+									}}
+								>
+									<FullScreenIcon />
+								</Fab>
+							</div>
+						</Tooltip>
 					</div>
 
 					<VideoView
@@ -314,7 +362,12 @@ const Peer = (props) =>
 				>
 					{ !screenVisible &&
 						<div className={classes.videoInfo}>
-							<p>this video is paused</p>
+							<p>
+								<FormattedMessage
+									id='room.videoPaused'
+									defaultMessage='This video is paused'
+								/>
+							</p>
 						</div>
 					}
 
@@ -344,35 +397,61 @@ const Peer = (props) =>
 								}}
 							>
 								{ !smallScreen &&
-									<Fab
-										aria-label='New window'
-										className={classes.fab}
-										disabled={
-											!screenVisible ||
-											(windowConsumer === screenConsumer.id)
-										}
-										size={smallButtons ? 'small' : 'large'}
-										onClick={() =>
-										{
-											toggleConsumerWindow(screenConsumer);
-										}}
+									<Tooltip
+										title={intl.formatMessage({
+											id             : 'label.newWindow',
+											defaultMessage : 'New window'
+										})}
+										placement={smallScreen ? 'top' : 'left'}
 									>
-										<NewWindowIcon />
-									</Fab>
+										<div>
+											<Fab
+												aria-label={intl.formatMessage({
+													id             : 'label.newWindow',
+													defaultMessage : 'New window'
+												})}
+												className={classes.fab}
+												disabled={
+													!screenVisible ||
+													(windowConsumer === screenConsumer.id)
+												}
+												size={smallButtons ? 'small' : 'large'}
+												onClick={() =>
+												{
+													toggleConsumerWindow(screenConsumer);
+												}}
+											>
+												<NewWindowIcon />
+											</Fab>
+										</div>
+									</Tooltip>
 								}
 
-								<Fab
-									aria-label='Fullscreen'
-									className={classes.fab}
-									disabled={!screenVisible}
-									size={smallButtons ? 'small' : 'large'}
-									onClick={() =>
-									{
-										toggleConsumerFullscreen(screenConsumer);
-									}}
+								<Tooltip
+									title={intl.formatMessage({
+										id             : 'label.fullscreen',
+										defaultMessage : 'Fullscreen'
+									})}
+									placement={smallScreen ? 'top' : 'left'}
 								>
-									<FullScreenIcon />
-								</Fab>
+									<div>
+										<Fab
+											aria-label={intl.formatMessage({
+												id             : 'label.fullscreen',
+												defaultMessage : 'Fullscreen'
+											})}
+											className={classes.fab}
+											disabled={!screenVisible}
+											size={smallButtons ? 'small' : 'large'}
+											onClick={() =>
+											{
+												toggleConsumerFullscreen(screenConsumer);
+											}}
+										>
+											<FullScreenIcon />
+										</Fab>
+									</div>
+								</Tooltip>
 							</div>
 							<VideoView
 								advancedMode={advancedMode}

app/src/components/Containers/SpeakerPeer.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import * as appPropTypes from '../appPropTypes';
 import { withStyles } from '@material-ui/core/styles';
+import { FormattedMessage } from 'react-intl';
 import VideoView from '../VideoContainers/VideoView';
 import Volume from './Volume';
 
@@ -119,7 +120,12 @@ const SpeakerPeer = (props) =>
 				<div className={classnames(classes.viewContainer)} style={style}>
 					{ !videoVisible &&
 						<div className={classes.videoInfo}>
-							<p>this video is paused</p>
+							<p>
+								<FormattedMessage
+									id='room.videoPaused'
+									defaultMessage='This video is paused'
+								/>
+							</p>
 						</div>
 					}
 
@@ -145,7 +151,12 @@ const SpeakerPeer = (props) =>
 				>
 					{ !screenVisible &&
 						<div className={classes.videoInfo} style={style}>
-							<p>this video is paused</p>
+							<p>
+								<FormattedMessage
+									id='room.videoPaused'
+									defaultMessage='This video is paused'
+								/>
+							</p>
 						</div>
 					}