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

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;