adding some 4:3 aspect fixes, adding httpserver for serving own static files, adding first working of oauth2.0 / openID Connect

app/gulpfile.js

@@ -206,6 +206,7 @@ gulp.task('livebrowser', (done) =>
 		{
 			open   : 'external',
 			host   : config.domain,
+			port   : 3000,
 			server :
 			{
 				baseDir : OUTPUT_DIR
@@ -226,6 +227,7 @@ gulp.task('browser', (done) =>
 		{
 			open   : 'external',
 			host   : config.domain,
+			port   : 3000,
 			server :
 			{
 				baseDir : OUTPUT_DIR

app/lib/RoomClient.js

@@ -20,9 +20,9 @@ const ROOM_OPTIONS =
 
 const VIDEO_CONSTRAINS =
 {
-	qvga : { width: { ideal: 320 }, height: { ideal: 240 } },
-	vga  : { width: { ideal: 640 }, height: { ideal: 480 } },
-	hd   : { width: { ideal: 1280 }, height: { ideal: 720 } }
+	qvga : { width: { ideal: 320 }, height: { ideal: 240 }, aspectRatio: 1.334 },
+	vga  : { width: { ideal: 640 }, height: { ideal: 480 }, aspectRatio: 1.334 },
+	hd   : { width: { ideal: 800 }, height: { ideal: 600 }, aspectRatio: 1.334 }
 };
 
 export default class RoomClient
@@ -37,6 +37,9 @@ export default class RoomClient
 		const protooUrl = getProtooUrl(peerName, roomId);
 		const protooTransport = new protooClient.WebSocketTransport(protooUrl);
 
+		// window element to external login site
+		this._loginWindow;
+
 		// Closed flag.
 		this._closed = false;
 
@@ -60,6 +63,7 @@ export default class RoomClient
 
 		// mediasoup-client Room instance.
 		this._room = new mediasoupClient.Room(ROOM_OPTIONS);
+		this._room.roomId = roomId;
 
 		// Transport for sending.
 		this._sendTransport = null;
@@ -111,6 +115,18 @@ export default class RoomClient
 		this._dispatch(stateActions.setRoomState('closed'));
 	}
 
+	login()
+	{
+		const url = `/login?roomId=${this._room.roomId}&peerName=${this._peerName}`;
+
+		this._loginWindow = window.open(url, 'loginWindow');
+	}
+
+	closeLoginWindow()
+	{
+		this._loginWindow.close();
+	}
+
 	changeDisplayName(displayName)
 	{
 		logger.debug('changeDisplayName() [displayName:"%s"]', displayName);
@@ -750,6 +766,35 @@ export default class RoomClient
 
 					break;
 				}
+
+				// This means: server wants to change MY displayName
+				case 'auth':
+				{
+					logger.debug('got auth event from server', request.data);
+					accept();
+
+					if (request.data.verified == true)
+					{
+						this.changeDisplayName(request.data.name);
+						this._dispatch(requestActions.notify(
+							{
+								text : `Authenticated successfully: ${request.data}`
+							}
+						));
+					}
+					else
+					{
+						this._dispatch(requestActions.notify(
+							{
+								text : `Authentication failed: ${request.data}`
+							}
+						));
+					}
+					this.closeLoginWindow();
+					break;
+
+				}
+
 				case 'raisehand-message':
 				{
 					accept();

app/lib/components/Peers.jsx

@@ -13,24 +13,23 @@ class Peers extends React.Component
 	{
 		super();
 		this.state = {
-			ratio : 4 / 3
+			ratio : 1.334
 		};
-		
 	}
 	updateDimensions()
 	{
 		const n = this.props.peers.length;
 
-		if (n == 0) 
+		if (n == 0)
 		{
 			return;
 		}
 
 		const width = this.refs.peers.clientWidth;
 		const height = this.refs.peers.clientHeight;
-		
+
 		let x, y, space;
-		
+
 		for (let rows = 1; rows < 100; rows = rows + 1)
 		{
 			x = width / Math.ceil(n / rows);
@@ -43,8 +42,8 @@ class Peers extends React.Component
 			}
 			space = height - (y * (rows));
 			if (space < y)
-			{ 
-				break; 
+			{
+				break;
 			}
 		}
 		if (Math.ceil(this.props.peerWidth) !== Math.ceil(0.9 * x))
@@ -52,17 +51,17 @@ class Peers extends React.Component
 			this.props.onComponentResize(0.9 * x, 0.9 * y);
 		}
 	}
-	
+
 	componentDidMount()
 	{
 		window.addEventListener('resize', this.updateDimensions.bind(this));
 	}
-	
-	componentWillUnmount() 
+
+	componentWillUnmount()
 	{
 		window.removeEventListener('resize', this.updateDimensions.bind(this));
 	}
-	
+
 	render()
 	{
 		const {
@@ -71,15 +70,15 @@ class Peers extends React.Component
 			peerWidth,
 			peerHeight
 		} = this.props;
-		
-		const style = 
+
+		const style =
 			{
 				'width'  : peerWidth,
 				'height' : peerHeight
 			};
 
 		this.updateDimensions();
-		
+
 		return (
 			<div data-component='Peers' ref='peers'>
 				{
@@ -127,7 +126,7 @@ const mapStateToProps = (state) =>
 	// TODO: This is not OK since it's creating a new array every time, so triggering a
 	// component rendering.
 	const peersArray = Object.values(state.peers);
-	
+
 	return {
 		peers             : peersArray,
 		activeSpeakerName : state.room.activeSpeakerName,

app/stylus/components/PeerView.styl

@@ -170,7 +170,7 @@
 		flex: 100 100 auto;
 		height: 100%;
 		width: 100%;
-		object-fit: cover;
+		object-fit: contain;
 		user-select: none;
 		transition-property: opacity;
 		transition-duration: .15s;