Added dialog before joining room.

app/src/RoomClient.js

@@ -65,10 +65,6 @@ const VIDEO_ENCODINGS =
 
 let store;
 
-const AudioContext = window.AudioContext // Default
-	|| window.webkitAudioContext // Safari and old versions of Chrome
-	|| false;
-
 export default class RoomClient
 {
 	/**
@@ -119,11 +115,6 @@ export default class RoomClient
 		// Alert sound
 		this._soundAlert = new Audio('/sounds/notify.mp3');
 
-		if (AudioContext)
-		{
-			this._audioContext = new AudioContext();
-		}
-
 		// Socket.io peer connection
 		this._signalingSocket = null;
 
@@ -1056,31 +1047,13 @@ export default class RoomClient
 			stateActions.setMyRaiseHandStateInProgress(false));
 	}
 
-	async resumeAudio()
+	async join({ joinVideo })
-	{
-		logger.debug('resumeAudio()');
-		try
-		{
-			await this._audioContext.resume();
-
-			store.dispatch(
-				stateActions.setAudioSuspended({ audioSuspended: false }));
-
-		}
-		catch (error)
-		{
-			store.dispatch(
-				stateActions.setAudioSuspended({ audioSuspended: true }));
-			logger.error('resumeAudioJoin() failed: %o', error);
-		}
-	}
-
-	async join()
 	{
 		this._signalingSocket = io(this._signalingUrl);
 
 		this._spotlights = new Spotlights(this._maxSpotlights, this._signalingSocket);
 
+		store.dispatch(stateActions.toggleJoined());
 		store.dispatch(stateActions.setRoomState('connecting'));
 
 		this._signalingSocket.on('connect', () =>
@@ -1258,7 +1231,7 @@ export default class RoomClient
 			{
 				case 'roomReady':
 				{
-					await this._joinRoom();
+					await this._joinRoom({ joinVideo });
 
 					break;
 				}
@@ -1514,7 +1487,7 @@ export default class RoomClient
 		});
 	}
 
-	async _joinRoom()
+	async _joinRoom({ joinVideo })
 	{
 		logger.debug('_joinRoom()');
 
@@ -1666,7 +1639,7 @@ export default class RoomClient
 				if (this._mediasoupDevice.canProduce('audio'))
 					await this.enableMic();
 
-				if (this._mediasoupDevice.canProduce('video'))
+				if (joinVideo && this._mediasoupDevice.canProduce('video'))
 					await this.enableWebcam();
 			}
 
@@ -1875,15 +1848,6 @@ export default class RoomClient
 					store.dispatch(stateActions.setPeerVolume(this._peerId, volume));
 				}
 			});
-
-			if (this._audioContext)
-			{
-				// We need to provoke user interaction to get permission from browser to start audio
-				if (this._audioContext.state === 'suspended')
-				{
-					this.resumeAudio();
-				}
-			}
 		}
 		catch (error)
 		{

app/src/actions/stateActions.js

@@ -568,6 +568,11 @@ export const loggedIn = () =>
 		type : 'LOGGED_IN'
 	});
 
+export const toggleJoined = () =>
+	({
+		type : 'TOGGLE_JOINED'
+	});
+
 export const setSelectedPeer = (selectedPeerId) =>
 	({
 		type    : 'SET_SELECTED_PEER',

app/src/components/JoinDialog.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import { withRoomContext } from '../RoomContext';
+import PropTypes from 'prop-types';
+import Dialog from '@material-ui/core/Dialog';
+import Typography from '@material-ui/core/Typography';
+import DialogActions from '@material-ui/core/DialogActions';
+import Button from '@material-ui/core/Button';
+
+const styles = (theme) =>
+	({
+		root :
+		{
+		},
+		dialogPaper :
+		{
+			width                          : '20vw',
+			padding                        : theme.spacing.unit * 2,
+			[theme.breakpoints.down('lg')] :
+			{
+				width : '30vw'
+			},
+			[theme.breakpoints.down('md')] :
+			{
+				width : '40vw'
+			},
+			[theme.breakpoints.down('sm')] :
+			{
+				width : '60vw'
+			},
+			[theme.breakpoints.down('xs')] :
+			{
+				width : '80vw'
+			}
+		},
+		logo :
+		{
+			display : 'block'
+		}
+	});
+
+const JoinDialog = ({
+	roomClient,
+	classes
+}) =>
+{
+	return (
+		<Dialog
+			className={classes.root}
+			open
+			classes={{
+				paper : classes.dialogPaper
+			}}
+		>
+			{ window.config.logo ?
+				<img alt='Logo' className={classes.logo} src={window.config.logo} />
+				:null
+			}
+			<Typography variant='subtitle1'>You are about to join a meeting, how would you like to join?</Typography>
+			<DialogActions>
+				<Button
+					onClick={() =>
+					{
+						roomClient.join({ joinVideo: false });
+					}}
+					variant='contained'
+				>
+					Audio only
+				</Button>
+				<Button
+					onClick={() =>
+					{
+						roomClient.join({ joinVideo: true });
+					}}
+					variant='contained'
+				>
+					Audio and Video
+				</Button>
+			</DialogActions>
+		</Dialog>
+	);
+};
+
+JoinDialog.propTypes =
+{
+	roomClient : PropTypes.any.isRequired,
+	classes    : PropTypes.object.isRequired
+};
+
+export default withRoomContext(withStyles(styles)(JoinDialog));

app/src/components/Room.js

@@ -15,7 +15,6 @@ import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
 import Hidden from '@material-ui/core/Hidden';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import Avatar from '@material-ui/core/Avatar';
@@ -33,6 +32,7 @@ import FullScreenIcon from '@material-ui/icons/Fullscreen';
 import FullScreenExitIcon from '@material-ui/icons/FullscreenExit';
 import SettingsIcon from '@material-ui/icons/Settings';
 import Settings from './Settings/Settings';
+import JoinDialog from './JoinDialog';
 
 const TIMEOUT = 10 * 1000;
 
@@ -176,10 +176,6 @@ class Room extends React.PureComponent
 
 	componentDidMount()
 	{
-		const { roomClient } = this.props;
-
-		roomClient.join();
-
 		if (this.fullscreen.fullscreenEnabled)
 		{
 			this.fullscreen.addEventListener('fullscreenchange', this.handleFullscreenChange);
@@ -242,29 +238,7 @@ class Room extends React.PureComponent
 			democratic : Democratic
 		}[room.mode];
 
-		if (room.audioSuspended)
+		if (room.lockedOut)
-		{
-			return (
-				<div className={classes.root}>
-					<Paper className={classes.message}>
-						<Typography variant='h2'>
-							This webpage required sound and video to play, please click to allow.
-						</Typography>
-						<Button
-							variant='contained'
-							onClick={() =>
-							{
-								roomClient.notify('Joining.');
-								roomClient.resumeAudio();
-							}}
-						>
-							Allow
-						</Button>
-					</Paper>
-				</div>
-			);
-		}
-		else if (room.lockedOut)
 		{
 			return (
 				<div className={classes.root}>
@@ -274,6 +248,10 @@ class Room extends React.PureComponent
 				</div>
 			);
 		}
+		else if (!room.joined)
+		{
+			return (<JoinDialog />);
+		}
 		else
 		{
 			return (

app/src/reducers/room.js

@@ -14,7 +14,8 @@ const initialState =
 	mode               : 'democratic',
 	selectedPeerId     : null,
 	spotlights         : [],
-	settingsOpen       : false
+	settingsOpen       : false,
+	joined             : false
 };
 
 const room = (state = initialState, action) =>
@@ -88,6 +89,13 @@ const room = (state = initialState, action) =>
 			return { ...state, showSettings };
 		}
 
+		case 'TOGGLE_JOINED':
+		{
+			const joined = !state.joined;
+
+			return { ...state, joined };
+		}
+
 		case 'TOGGLE_FULLSCREEN_CONSUMER':
 		{
 			const { consumerId } = action.payload;