Added support for moving video to new window. Fixed various bugs.

app/lib/RoomClient.js

@@ -16,7 +16,7 @@ import {
 
 const logger = new Logger('RoomClient');
 
-const ROOM_OPTIONS =
+let ROOM_OPTIONS =
 {
 	requestTimeout   : requestTimeout,
 	transportOptions : transportOptions,
@@ -71,6 +71,9 @@ export default class RoomClient
 		// Socket.io peer connection
 		this._signalingSocket = io(signalingUrl);
 
+		if (this._device.flag === 'firefox')
+			ROOM_OPTIONS = Object.assign({ iceTransportPolicy: 'relay' }, ROOM_OPTIONS);
+
 		// mediasoup-client Room instance.
 		this._room = new mediasoupClient.Room(ROOM_OPTIONS);
 		this._room.roomId = roomId;
@@ -160,6 +163,21 @@ export default class RoomClient
 					{
 						this._dispatch(stateActions.toggleAdvancedMode());
 						this.notify('Toggled advanced mode.');
+						break;
+					}
+
+					case '1': // Set democratic view
+					{
+						this._dispatch(stateActions.setDisplayMode('democratic'));
+						this.notify('Changed layout to democratic view.');
+						break;
+					}
+
+					case '2': // Set filmstrip view
+					{
+						this._dispatch(stateActions.setDisplayMode('filmstrip'));
+						this.notify('Changed layout to filmstrip view.');
+						break;
 					}
 				}
 			}
@@ -213,9 +231,9 @@ export default class RoomClient
 				if (called)
 					return;
 				called = true;
-				callback(new Error('Callback timeout'));
+				callback(new Error('Request timeout.'));
 			},
-			5000
+			ROOM_OPTIONS.requestTimeout
 		);
 
 		return (...args) =>

app/lib/components/Chat/Chat.jsx

@@ -58,7 +58,7 @@ Chat.propTypes =
 Chat.defaultProps =
 {
 	senderPlaceHolder : 'Type a message...',
-	autofocus         : true,
+	autofocus         : false,
 	displayName       : null
 };
 

app/lib/components/FullScreenView.jsx

@@ -56,7 +56,6 @@ const FullScreenView = (props) =>
 				videoTrack={consumer ? consumer.track : null}
 				videoVisible={consumerVisible}
 				videoProfile={consumerProfile}
-				toggleFullscreen={() => toggleConsumerFullscreen(consumer)}
 			/>
 		</div>
 	);

app/lib/components/FullView.jsx

@@ -84,8 +84,7 @@ export default class FullView extends React.Component
 
 FullView.propTypes =
 {
-	videoTrack       : PropTypes.any,
-	videoVisible     : PropTypes.bool,
-	videoProfile     : PropTypes.string,
-	toggleFullscreen : PropTypes.func.isRequired
+	videoTrack   : PropTypes.any,
+	videoVisible : PropTypes.bool,
+	videoProfile : PropTypes.string
 };

app/lib/components/Peer.jsx

@@ -39,6 +39,7 @@ class Peer extends Component
 			onMuteMic,
 			onUnmuteMic,
 			toggleConsumerFullscreen,
+			toggleConsumerWindow,
 			style
 		} = this.props;
 
@@ -126,6 +127,15 @@ class Peer extends Component
 							}}
 						/>
 
+						<div
+							className={classnames('button', 'newwindow')}
+							onClick={(e) =>
+							{
+								e.stopPropagation();
+								toggleConsumerWindow(webcamConsumer);
+							}}
+						/>
+
 						<div
 							className={classnames('button', 'fullscreen')}
 							onClick={(e) =>
@@ -155,6 +165,15 @@ class Peer extends Component
 								visible : this.state.controlsVisible
 							})}
 						>
+							<div
+								className={classnames('button', 'newwindow')}
+								onClick={(e) =>
+								{
+									e.stopPropagation();
+									toggleConsumerWindow(screenConsumer);
+								}}
+							/>
+
 							<div
 								className={classnames('button', 'fullscreen')}
 								onClick={(e) =>
@@ -190,7 +209,8 @@ Peer.propTypes =
 	onUnmuteMic              : PropTypes.func.isRequired,
 	streamDimensions         : PropTypes.object,
 	style                    : PropTypes.object,
-	toggleConsumerFullscreen : PropTypes.func.isRequired
+	toggleConsumerFullscreen : PropTypes.func.isRequired,
+	toggleConsumerWindow     : PropTypes.func.isRequired
 };
 
 const mapStateToProps = (state, { name }) =>
@@ -228,6 +248,11 @@ const mapDispatchToProps = (dispatch) =>
 		{
 			if (consumer)
 				dispatch(stateActions.toggleConsumerFullscreen(consumer.id));
+		},
+		toggleConsumerWindow : (consumer) =>
+		{
+			if (consumer)
+				dispatch(stateActions.toggleConsumerWindow(consumer.id));
 		}
 	};
 };

app/lib/components/Room.jsx

@@ -16,6 +16,7 @@ import Notifications from './Notifications';
 import ToolAreaButton from './ToolArea/ToolAreaButton';
 import ToolArea from './ToolArea/ToolArea';
 import FullScreenView from './FullScreenView';
+import VideoWindow from './VideoWindow/VideoWindow';
 import Draggable from 'react-draggable';
 import { idle } from '../utils';
 import Sidebar from './Sidebar';
@@ -88,6 +89,8 @@ class Room extends React.Component
 
 						<FullScreenView advancedMode={room.advancedMode} />
 
+						<VideoWindow advancedMode={room.advancedMode} />
+
 						<div className='room-wrapper'>
 							<div data-component='Logo' />
 							<AudioPeers />

app/lib/components/ScreenView.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Spinner from 'react-spinner';
 
-export default class PeerView extends React.Component
+export default class ScreenView extends React.Component
 {
 	constructor(props)
 	{
@@ -157,7 +157,7 @@ export default class PeerView extends React.Component
 	}
 }
 
-PeerView.propTypes =
+ScreenView.propTypes =
 {
 	isMe          : PropTypes.bool,
 	advancedMode  : PropTypes.bool,

app/lib/components/VideoWindow/VideoWindow.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import NewWindow from 'react-new-window';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import * as appPropTypes from '../appPropTypes';
+import * as stateActions from '../../redux/stateActions';
+import FullView from '../FullView';
+
+const VideoWindow = (props) =>
+{
+	const {
+		advancedMode,
+		consumer,
+		toggleConsumerWindow,
+		toolbarsVisible
+	} = props;
+
+	if (!consumer)
+		return null;
+
+	const consumerVisible = (
+		Boolean(consumer) &&
+		!consumer.locallyPaused &&
+		!consumer.remotelyPaused
+	);
+
+	let consumerProfile;
+
+	if (consumer)
+		consumerProfile = consumer.profile;
+
+	return (
+		<NewWindow onUnload={toggleConsumerWindow}>
+			<div data-component='FullScreenView'>
+				{consumerVisible && !consumer.supported ?
+					<div className='incompatible-video'>
+						<p>incompatible video</p>
+					</div>
+					:null
+				}
+
+				<div className='controls'>
+					<div
+						className={classnames('button', 'fullscreen', 'room-controls', {
+							visible : toolbarsVisible
+						})}
+						onClick={(e) =>
+						{
+							e.stopPropagation();
+							toggleConsumerWindow();
+						}}
+					/>
+				</div>
+
+				<FullView
+					advancedMode={advancedMode}
+					videoTrack={consumer ? consumer.track : null}
+					videoVisible={consumerVisible}
+					videoProfile={consumerProfile}
+				/>
+			</div>
+		</NewWindow>
+	);
+};
+
+VideoWindow.propTypes =
+{
+	advancedMode         : PropTypes.bool,
+	consumer             : appPropTypes.Consumer,
+	toggleConsumerWindow : PropTypes.func.isRequired,
+	toolbarsVisible      : PropTypes.bool
+};
+
+const mapStateToProps = (state) =>
+{
+	return {
+		consumer        : state.consumers[state.room.windowConsumer],
+		toolbarsVisible : state.room.toolbarsVisible
+	};
+};
+
+const mapDispatchToProps = (dispatch) =>
+{
+	return {
+		toggleConsumerWindow : () =>
+		{
+			dispatch(stateActions.toggleConsumerWindow(null));
+		}
+	};
+};
+
+const VideoWindowContainer = connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(VideoWindow);
+
+export default VideoWindowContainer;

app/lib/redux/reducers/room.js

@@ -6,6 +6,7 @@ const initialState =
 	showSettings       : false,
 	advancedMode       : false,
 	fullScreenConsumer : null, // ConsumerID
+	windowConsumer     : null, // ConsumerID
 	toolbarsVisible    : true,
 	mode               : 'democratic',
 	selectedPeerName   : null,
@@ -62,6 +63,17 @@ const room = (state = initialState, action) =>
 			return { ...state, fullScreenConsumer: currentConsumer ? null : consumerId };
 		}
 
+		case 'TOGGLE_WINDOW_CONSUMER':
+		{
+			const { consumerId } = action.payload;
+			const currentConsumer = state.windowConsumer;
+
+			if (currentConsumer === consumerId)
+				return { ...state, windowConsumer: null };
+			else
+				return { ...state, windowConsumer: consumerId };
+		}
+
 		case 'SET_TOOLBARS_VISIBLE':
 		{
 			const { toolbarsVisible } = action.payload;

app/lib/redux/stateActions.js

@@ -389,6 +389,14 @@ export const toggleConsumerFullscreen = (consumerId) =>
 	};
 };
 
+export const toggleConsumerWindow = (consumerId) =>
+{
+	return {
+		type    : 'TOGGLE_WINDOW_CONSUMER',
+		payload : { consumerId }
+	};
+};
+
 export const setToolbarsVisible = (toolbarsVisible) => ({
 	type    : 'SET_TOOLBARS_VISIBLE',
 	payload : { toolbarsVisible }