diff --git a/app/src/RoomClient.js b/app/src/RoomClient.js index f6f4764..a88a449 100644 --- a/app/src/RoomClient.js +++ b/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() - { - 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() + async join({ joinVideo }) { 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) { diff --git a/app/src/actions/stateActions.js b/app/src/actions/stateActions.js index 52ba00d..5690669 100644 --- a/app/src/actions/stateActions.js +++ b/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', diff --git a/app/src/components/JoinDialog.js b/app/src/components/JoinDialog.js new file mode 100644 index 0000000..5a99b3f --- /dev/null +++ b/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 ( + + { window.config.logo ? + Logo + :null + } + You are about to join a meeting, how would you like to join? + + + + + + ); +}; + +JoinDialog.propTypes = +{ + roomClient : PropTypes.any.isRequired, + classes : PropTypes.object.isRequired +}; + +export default withRoomContext(withStyles(styles)(JoinDialog)); \ No newline at end of file diff --git a/app/src/components/Room.js b/app/src/components/Room.js index 8a503b7..3b36826 100644 --- a/app/src/components/Room.js +++ b/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) - { - return ( -
- - - This webpage required sound and video to play, please click to allow. - - - -
- ); - } - else if (room.lockedOut) + if (room.lockedOut) { return (
@@ -274,6 +248,10 @@ class Room extends React.PureComponent
); } + else if (!room.joined) + { + return (); + } else { return ( diff --git a/app/src/reducers/room.js b/app/src/reducers/room.js index 446b350..e7c01a2 100644 --- a/app/src/reducers/room.js +++ b/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;