Placed icon and begun work with code.

app/lib/RoomClient.js

@@ -604,7 +604,7 @@ export default class RoomClient
 					{
 						for (const consumer of peer.consumers)
 						{
-							if (consumer.kind !== 'audio')
+							if (consumer.appData.source !== 'mic')
 								continue;
 
 							consumer.pause('mute-audio');
@@ -640,7 +640,7 @@ export default class RoomClient
 					{
 						for (const consumer of peer.consumers)
 						{
-							if (consumer.kind !== 'audio' || !consumer.supported)
+							if (consumer.appData.source !== 'mic' || !consumer.supported)
 								continue;
 
 							consumer.resume();
@@ -676,7 +676,7 @@ export default class RoomClient
 					{
 						for (const consumer of peer.consumers)
 						{
-							if (consumer.kind !== 'video')
+							if (consumer.appData.source !== 'webcam')
 								continue;
 
 							consumer.pause('pause-video');
@@ -712,7 +712,7 @@ export default class RoomClient
 					{
 						for (const consumer of peer.consumers)
 						{
-							if (consumer.kind !== 'video' || !consumer.supported)
+							if (consumer.appData.source !== 'webcam' || !consumer.supported)
 								continue;
 
 							consumer.resume();

app/lib/components/FullView.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Spinner from 'react-spinner';
+
+export default class FullView extends React.Component
+{
+	constructor(props)
+	{
+		super(props);
+
+		// Latest received video track.
+		// @type {MediaStreamTrack}
+		this._videoTrack = null;
+	}
+
+	render()
+	{
+		const {
+			videoVisible,
+			videoProfile
+		} = this.props;
+
+		return (
+			<div data-component='ScreenView'>
+				<video
+					ref='video'
+					className={classnames({
+						hidden  : !videoVisible,
+						loading : videoProfile === 'none'
+					})}
+					autoPlay
+					muted={Boolean(true)}
+				/>
+
+				{videoProfile === 'none' ?
+					<div className='spinner-container'>
+						<Spinner />
+					</div>
+					:null
+				}
+			</div>
+		);
+	}
+
+	componentDidMount()
+	{
+		const { videoTrack } = this.props;
+
+		this._setTracks(videoTrack);
+	}
+
+	componentWillReceiveProps(nextProps)
+	{
+		const { videoTrack } = nextProps;
+
+		this._setTracks(videoTrack);
+	}
+
+	_setTracks(videoTrack)
+	{
+		if (this._videoTrack === videoTrack)
+			return;
+
+		this._videoTrack = videoTrack;
+
+		const { video } = this.refs;
+
+		if (videoTrack)
+		{
+			const stream = new MediaStream;
+
+			if (videoTrack)
+				stream.addTrack(videoTrack);
+
+			video.srcObject = stream;
+		}
+		else
+		{
+			video.srcObject = null;
+		}
+	}
+}
+
+FullView.propTypes =
+{
+	videoTrack   : PropTypes.any,
+	videoVisible : PropTypes.bool,
+	videoProfile : PropTypes.string
+};

app/lib/components/Me.jsx

@@ -78,6 +78,11 @@ class Me extends React.Component
 		if (!me.displayNameSet)
 			tip = 'Click on your name to change it';
 
+		const style =
+			{
+				'width' : screenProducer ? '40vmin' : ''
+			};
+
 		return (
 			<div
 				data-component='Me'
@@ -85,7 +90,9 @@ class Me extends React.Component
 				data-tip={tip}
 				data-tip-disable={!tip}
 				data-type='dark'
+				style={style}
 			>
+				<div className={classnames('view-container', 'webcam')}>
 					{connected ?
 						<div className='controls'>
 							<div
@@ -122,8 +129,10 @@ class Me extends React.Component
 						videoCodec={webcamProducer ? webcamProducer.codec : null}
 						onChangeDisplayName={(displayName) => onChangeDisplayName(displayName)}
 					/>
+				</div>
 
 				{screenProducer ?
+					<div className={classnames('view-container', 'screen')}>
 						<ScreenView
 							isMe
 							advancedMode={advancedMode}
@@ -131,6 +140,7 @@ class Me extends React.Component
 							screenVisible={screenVisible}
 							screenCodec={screenProducer ? screenProducer.codec : null}
 						/>
+					</div>
 					:null
 				}
 

app/lib/components/Peer.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import * as appPropTypes from './appPropTypes';
 import * as requestActions from '../redux/requestActions';
+import * as stateActions from '../redux/stateActions';
 import PeerView from './PeerView';
 import ScreenView from './ScreenView';
 
@@ -19,6 +20,9 @@ const Peer = (props) =>
 		onUnmuteMic,
 		onDisableWebcam,
 		onEnableWebcam,
+		onDisableScreen,
+		onEnableScreen,
+		toggleConsumerFullscreen,
 		style
 	} = props;
 
@@ -57,6 +61,14 @@ const Peer = (props) =>
 				screen : screenConsumer
 			})}
 		>
+			{videoVisible && !webcamConsumer.supported ?
+				<div className='incompatible-video'>
+					<p>incompatible video</p>
+				</div>
+				:null
+			}
+
+			<div className={classnames('view-container', 'webcam')} style={style}>
 				<div className='controls'>
 					<div
 						className={classnames('button', 'mic', {
@@ -84,16 +96,16 @@ const Peer = (props) =>
 								onDisableWebcam(peer.name) : onEnableWebcam(peer.name);
 						}}
 					/>
-			</div>
 
-			{videoVisible && !webcamConsumer.supported ?
+					<div
-				<div className='incompatible-video'>
+						className={classnames('button', 'fullscreen')}
-					<p>incompatible video</p>
+						onClick={(e) =>
+						{
+							e.stopPropagation();
+							toggleConsumerFullscreen(webcamConsumer);
+						}}
+					/>
 				</div>
-				:null
-			}
-
-			<div className={classnames('view-container', 'webcam')} style={style}>
 				<PeerView
 					advancedMode={advancedMode}
 					peer={peer}
@@ -108,6 +120,30 @@ const Peer = (props) =>
 
 			{screenConsumer ?
 				<div className={classnames('view-container', 'screen')} style={style}>
+					<div className='controls'>
+						<div
+							className={classnames('button', 'screen', {
+								on       : screenVisible,
+								off      : !screenVisible,
+								disabled : peer.peerScreenInProgress
+							})}
+							onClick={(e) =>
+							{
+								e.stopPropagation();
+								screenVisible ?
+									onDisableScreen(peer.name) : onEnableScreen(peer.name);
+							}}
+						/>
+
+						<div
+							className={classnames('button', 'fullscreen')}
+							onClick={(e) =>
+							{
+								e.stopPropagation();
+								toggleConsumerFullscreen(screenConsumer);
+							}}
+						/>
+					</div>
 					<ScreenView
 						advancedMode={advancedMode}
 						screenTrack={screenConsumer ? screenConsumer.track : null}
@@ -134,7 +170,10 @@ Peer.propTypes =
 	onEnableWebcam           : PropTypes.func.isRequired,
 	onDisableWebcam          : PropTypes.func.isRequired,
 	streamDimensions         : PropTypes.object,
-	style            : PropTypes.object
+	style                    : PropTypes.object,
+	onEnableScreen           : PropTypes.func.isRequired,
+	onDisableScreen          : PropTypes.func.isRequired,
+	toggleConsumerFullscreen : PropTypes.func.isRequired
 };
 
 const mapStateToProps = (state, { name }) =>
@@ -176,6 +215,18 @@ const mapDispatchToProps = (dispatch) =>
 		onDisableWebcam : (peerName) =>
 		{
 			dispatch(requestActions.pausePeerVideo(peerName));
+		},
+		onEnableScreen : (peerName) =>
+		{
+			dispatch(requestActions.resumePeerScreen(peerName));
+		},
+		onDisableScreen : (peerName) =>
+		{
+			dispatch(requestActions.pausePeerScreen(peerName));
+		},
+		toggleConsumerFullscreen : (consumer) =>
+		{
+			dispatch(stateActions.toggleConsumerFullscreen(consumer));
 		}
 	};
 };

app/resources/images/icon_fullscreen_black.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
+</svg>

app/resources/images/icon_fullscreen_exit_black.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>
+</svg>

app/stylus/components/Me.styl

@@ -1,17 +1,32 @@
 [data-component='Me'] {
+	flex: 100 100 auto;
+	position: relative;
+	height: 15vmin;
+	width: 20vmin;
+	flex-direction: row;
+	display: flex;
+
+	> .view-container {
 		position: relative;
 		height: 100%;
 		width: 100%;
 
+		&.webcam {
+			order: 2;
+		}
+
+		&.screen {
+			order: 1;
+		}
+
 		> .controls {
 			position: absolute;
-		z-index: 10
+			z-index: 10;
-		top: 0;
-		left: 0;
 			right: 0;
+			top: 0;
 			display: flex;
 			flex-direction:; row;
-		justify-content: flex-end;
+			justify-content: flex-start;
 			align-items: center;
 			padding: 0.4vmin;
 
@@ -61,7 +76,7 @@
 					}
 
 					&.off {
-					background-image: url('/resources/images/icon_mic_white_off.svg');
+						background-image: url('/resources/images/icon_remote_mic_white_off.svg');
 						background-color: rgba(#d42241, 0.7);
 					}
 
@@ -84,6 +99,27 @@
 						background-image: url('/resources/images/icon_webcam_white_unsupported.svg');
 					}
 				}
+
+				&.screen {
+					&.on {
+						background-image: url('/resources/images/share-screen-black.svg');
+					}
+
+					&.off {
+						background-image: url('/resources/images/no-share-screen-white.svg');
+						background-color: rgba(#d42241, 0.7);
+					}
+
+					&.unsupported {
+						background-image: url('/resources/images/no-share-screen-white.svg');
+					}
+				}
+
+				&.fullscreen {
+					background-image: url('/resources/images/icon_fullscreen_black.svg');
+					background-color: rgba(#fff, 0.7);
+				}
+			}
 		}
 	}
 }

app/stylus/components/Peer.styl

@@ -13,6 +13,24 @@
 	&:not(.screen) {
 	}
 
+	+mobile() {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	> .view-container {
+		position: relative;
+
+		&.webcam {
+			order: 2;
+		}
+
+		&.screen {
+			order: 1;
+		}
+
 		> .controls {
 			position: absolute;
 			z-index: 10;
@@ -93,23 +111,27 @@
 						background-image: url('/resources/images/icon_webcam_white_unsupported.svg');
 					}
 				}
-		}
-	}
-
-	+mobile() {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-	}
-
-	> .view-container {
-		&.webcam {
-			order: 2;
-		}
 
 				&.screen {
-			order: 1;
+					&.on {
+						background-image: url('/resources/images/share-screen-black.svg');
+					}
+
+					&.off {
+						background-image: url('/resources/images/no-share-screen-white.svg');
+						background-color: rgba(#d42241, 0.7);
+					}
+
+					&.unsupported {
+						background-image: url('/resources/images/no-share-screen-white.svg');
+					}
+				}
+
+				&.fullscreen {
+					background-image: url('/resources/images/icon_fullscreen_black.svg');
+					background-color: rgba(#fff, 0.7);
+				}
+			}
 		}
 	}
 

app/stylus/components/Room.styl

@@ -153,8 +153,6 @@
 			}
 
 			+desktop() {
-				height: 200px;
-				width: 235px;
 				bottom: 20px;
 				left: 20px;
 				border: 1px solid rgba(#fff, 0.15);