Added toggle for advanced mode. Show more info and diagnostics.

app/lib/components/Me.jsx

@@ -29,6 +29,7 @@ class Me extends React.Component
 		const {
 			connected,
 			me,
+			advancedMode,
 			micProducer,
 			webcamProducer,
 			onChangeDisplayName,
@@ -104,6 +105,7 @@ class Me extends React.Component
 
 				<PeerView
 					isMe
+					advancedMode={advancedMode}
 					peer={me}
 					audioTrack={micProducer ? micProducer.track : null}
 					videoTrack={webcamProducer ? webcamProducer.track : null}
@@ -159,6 +161,7 @@ class Me extends React.Component
 Me.propTypes =
 {
 	connected           : PropTypes.bool.isRequired,
+	advancedMode        : PropTypes.bool,
 	me                  : appPropTypes.Me.isRequired,
 	micProducer         : appPropTypes.Producer,
 	webcamProducer      : appPropTypes.Producer,

app/lib/components/Peer.jsx

@@ -9,6 +9,7 @@ import PeerView from './PeerView';
 const Peer = (props) =>
 {
 	const {
+		advancedMode,
 		peer,
 		micConsumer,
 		webcamConsumer,
@@ -86,6 +87,7 @@ const Peer = (props) =>
 			}
 
 			<PeerView
+				advancedMode={advancedMode}
 				peer={peer}
 				audioTrack={micConsumer ? micConsumer.track : null}
 				videoTrack={webcamConsumer ? webcamConsumer.track : null}
@@ -104,6 +106,7 @@ const Peer = (props) =>
 
 Peer.propTypes =
 {
+	advancedMode    : PropTypes.bool,
 	peer            : appPropTypes.Peer.isRequired,
 	micConsumer     : appPropTypes.Consumer,
 	webcamConsumer  : appPropTypes.Consumer,

app/lib/components/PeerView.jsx

@@ -45,6 +45,7 @@ export default class PeerView extends React.Component
 	{
 		const {
 			isMe,
+			advancedMode,
 			peer,
 			videoVisible,
 			videoProfile,
@@ -67,42 +68,45 @@ export default class PeerView extends React.Component
 		return (
 			<div data-component='PeerView'>
 				<div className='info'>
-					<div className={classnames('media', { 'is-me': isMe })}>
-						{screenVisible ?
-							<div className='box'>
-								{audioCodec ?
-									<p className='codec'>{audioCodec}</p>
-									:null
-								}
+					{advancedMode ?
+						<div className={classnames('media', { 'is-me': isMe })}>
+							{screenVisible ?
+								<div className='box'>
+									{audioCodec ?
+										<p className='codec'>{audioCodec}</p>
+										:null
+									}
 
-								{screenCodec ?
-									<p className='codec'>{screenCodec} {screenProfile}</p>
-									:null
-								}
+									{screenCodec ?
+										<p className='codec'>{screenCodec} {screenProfile}</p>
+										:null
+									}
 
-								{(screenVisible && screenWidth !== null) ?
-									<p className='resolution'>{screenWidth}x{screenHeight}</p>
-									:null
-								}
-							</div>
-							:<div className='box'>
-								{audioCodec ?
-									<p className='codec'>{audioCodec}</p>
-									:null
-								}
+									{(screenVisible && screenWidth !== null) ?
+										<p className='resolution'>{screenWidth}x{screenHeight}</p>
+										:null
+									}
+								</div>
+								:<div className='box'>
+									{audioCodec ?
+										<p className='codec'>{audioCodec}</p>
+										:null
+									}
 
-								{videoCodec ?
-									<p className='codec'>{videoCodec} {videoProfile}</p>
-									:null
-								}
+									{videoCodec ?
+										<p className='codec'>{videoCodec} {videoProfile}</p>
+										:null
+									}
 
-								{(videoVisible && videoWidth !== null) ?
-									<p className='resolution'>{videoWidth}x{videoHeight}</p>
-									:null
-								}
-							</div>
-						}
-					</div>
+									{(videoVisible && videoWidth !== null) ?
+										<p className='resolution'>{videoWidth}x{videoHeight}</p>
+										:null
+									}
+								</div>
+							}
+						</div>
+						:null
+					}
 
 					<div className={classnames('peer', { 'is-me': isMe })}>
 						{isMe ?
@@ -126,14 +130,17 @@ export default class PeerView extends React.Component
 							</span>
 						}
 
-						<div className='row'>
-							<span
-								className={classnames('device-icon', peer.device.flag)}
-							/>
-							<span className='device-version'>
-								{peer.device.name} {Math.floor(peer.device.version) || null}
-							</span>
-						</div>
+						{advancedMode ?
+							<div className='row'>
+								<span
+									className={classnames('device-icon', peer.device.flag)}
+								/>
+								<span className='device-version'>
+									{peer.device.name} {Math.floor(peer.device.version) || null}
+								</span>
+							</div>
+							:null
+						}
 					</div>
 				</div>
 
@@ -307,8 +314,9 @@ export default class PeerView extends React.Component
 
 PeerView.propTypes =
 {
-	isMe : PropTypes.bool,
-	peer : PropTypes.oneOfType(
+	isMe         : PropTypes.bool,
+	advancedMode : PropTypes.bool,
+	peer         : PropTypes.oneOfType(
 		[ appPropTypes.Me, appPropTypes.Peer ]).isRequired,
 	audioTrack          : PropTypes.any,
 	videoTrack          : PropTypes.any,

app/lib/components/Peers.jsx

@@ -8,9 +8,9 @@ import Peer from './Peer';
 
 class Peers extends React.Component
 {
-	constructor()
+	constructor(props)
 	{
-		super();
+		super(props);
 		this.state = {
 			peerWidth  : 400,
 			peerHeight : 300,
@@ -81,6 +81,7 @@ class Peers extends React.Component
 	render()
 	{
 		const {
+			advancedMode,
 			activeSpeakerName,
 			peers
 		} = this.props;
@@ -103,7 +104,10 @@ class Peers extends React.Component
 										'active-speaker' : peer.name === activeSpeakerName
 									})} style={style}
 								>
-									<Peer name={peer.name} />
+									<Peer
+										advancedMode={advancedMode}
+										name={peer.name}
+									/>
 								</div>
 							</Appear>
 						);
@@ -116,6 +120,7 @@ class Peers extends React.Component
 
 Peers.propTypes =
 {
+	advancedMode      : PropTypes.bool,
 	peers             : PropTypes.arrayOf(appPropTypes.Peer).isRequired,
 	activeSpeakerName : PropTypes.string
 };

app/lib/components/Room.jsx

@@ -99,14 +99,18 @@ class Room extends React.Component
 						</div>
 					</div>
 
-					<Peers />
+					<Peers
+						advancedMode={room.advancedMode}
+					/>
 
 					<div
 						className={classnames('me-container', {
 							'active-speaker' : amActiveSpeaker
 						})}
 					>
-						<Me />
+						<Me
+							advancedMode={room.advancedMode}
+						/>
 					</div>
 
 					<div className='sidebar'>

app/lib/components/Settings.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import * as appPropTypes from './appPropTypes';
 import * as requestActions from '../redux/requestActions';
+import * as stateActions from '../redux/stateActions';
 import PropTypes from 'prop-types';
 import { Appear } from './transitions';
 import Dropdown from 'react-dropdown';
@@ -20,7 +21,8 @@ class Settings extends React.Component
 			me,
 			handleChangeWebcam,
 			handleChangeAudioDevice,
-			onToggleSettings
+			onToggleSettings,
+			onToggleAdvancedMode
 		} = this.props;
 
 		if (!room.showSettings)
@@ -72,6 +74,12 @@ class Settings extends React.Component
 								onChange={handleChangeAudioDevice}
 								placeholder={audioDevicesText}
 							/>
+							<input
+								type='checkbox'
+								defaultChecked={room.advancedMode}
+								onChange={onToggleAdvancedMode}
+							/>
+							<span>Advanced mode</span>
 						</div>
 						<div className='footer'>
 							<span
@@ -94,7 +102,8 @@ Settings.propTypes =
 	room                    : appPropTypes.Room.isRequired,
 	onToggleSettings        : PropTypes.func.isRequired,
 	handleChangeWebcam      : PropTypes.func.isRequired,
-	handleChangeAudioDevice : PropTypes.func.isRequired
+	handleChangeAudioDevice : PropTypes.func.isRequired,
+	onToggleAdvancedMode    : PropTypes.func.isRequired
 };
 
 const mapStateToProps = (state) =>
@@ -115,6 +124,10 @@ const mapDispatchToProps = (dispatch) =>
 		handleChangeAudioDevice : (device) =>
 		{
 			dispatch(requestActions.changeAudioDevice(device.value));
+		},
+		onToggleAdvancedMode : () =>
+		{
+			dispatch(stateActions.toggleAdvancedMode());
 		}
 	};
 };

app/lib/redux/reducers/room.js

@@ -3,9 +3,8 @@ const initialState =
 	url               : null,
 	state             : 'new', // new/connecting/connected/disconnected/closed,
 	activeSpeakerName : null,
-	peerHeight        : 300,
-	peerWidth         : 400,
-	showSettings      : false
+	showSettings      : false,
+	advancedMode      : false
 };
 
 const room = (state = initialState, action) =>
@@ -36,13 +35,6 @@ const room = (state = initialState, action) =>
 			return { ...state, activeSpeakerName: peerName };
 		}
 
-		case 'SET_COMPONENT_SIZE':
-		{
-			const { peerWidth, peerHeight } = action.payload;
-
-			return { ...state, peerWidth: peerWidth, peerHeight: peerHeight };
-		}
-
 		case 'TOGGLE_SETTINGS':
 		{
 			const showSettings = !state.showSettings;
@@ -50,6 +42,13 @@ const room = (state = initialState, action) =>
 			return { ...state, showSettings };
 		}
 
+		case 'TOGGLE_ADVANCED_MODE':
+		{
+			const advancedMode = !state.advancedMode;
+
+			return { ...state, advancedMode };
+		}
+
 		default:
 			return state;
 	}

app/lib/redux/stateActions.js

@@ -22,14 +22,6 @@ export const setRoomActiveSpeaker = (peerName) =>
 	};
 };
 
-export const onComponentResize = (peerWidth, peerHeight) =>
-{
-	return {
-		type    : 'SET_COMPONENT_SIZE',
-		payload : { peerWidth, peerHeight }
-	};
-};
-
 export const setMe = ({ peerName, displayName, displayNameSet, device }) =>
 {
 	return {
@@ -94,6 +86,13 @@ export const setDisplayName = (displayName) =>
 	};
 };
 
+export const toggleAdvancedMode = () =>
+{
+	return {
+		type : 'TOGGLE_ADVANCED_MODE'
+	};
+};
+
 export const setAudioOnlyState = (enabled) =>
 {
 	return {

app/stylus/components/PeerView.styl

@@ -17,9 +17,9 @@
 
 		position: absolute;
 		z-index: 5
-		top: 0;
+		top: 0.6vmin;
+		left: 0.6vmin;
 		bottom: 0;
-		left: 0;
 		right: 0;
 		display: flex;
 		flex-direction: column;
@@ -31,8 +31,7 @@
 			flex-direction: row;
 
 			> .box {
-				margin: 4px;
-				padding: 2px 4px;
+				padding: 0.4vmin;
 				border-radius: 2px;
 				background-color: rgba(#000, 0.25);
 
@@ -55,15 +54,20 @@
 			display: flex;
 			flex-direction: column;
 			justify-content: flex-end;
+			position: absolute;
+			bottom: 0.6vmin;
+			left: 0;
+			border-radius: 2px;
+			background-color: rgba(#000, 0.25);
 
 			+desktop() {
 				&.is-me {
-					padding: 10px;
+					padding: 1vmin;
 					align-items: flex-start;
 				}
 
 				&:not(.is-me) {
-					padding: 20px;
+					padding: 1vmin;
 					align-items: flex-start;
 				}
 			}