diff --git a/package.json b/package.json index 2f2e677..c7470ba 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "peer": "^0.2.8", "peerjs": "^0.3.14", "prop-types": "^15.6.0", + "query-string": "^6.1.0", "react": "^16.2.0", "react-bootstrap": "^0.32.1", "react-dom": "^16.2.0", diff --git a/src/client/redux/sagas/session.js b/src/client/redux/sagas/session.js index 8076375..6bb8f7a 100644 --- a/src/client/redux/sagas/session.js +++ b/src/client/redux/sagas/session.js @@ -6,7 +6,7 @@ import { } from '../ducks/session' import axios from 'axios' import config from '../../config' -import { goToUrl, setLocalStorage } from '../../utils/window' +import { goToUrl, setLocalStorage, getNextUrl } from '../../utils/window' function* authenticate (action) { try { @@ -22,7 +22,9 @@ function* authenticate (action) { code, auth }) - goToUrl('/welcome', 'Welcome') + const next = getNextUrl() + const nextUrl = `/welcome${next || ''}` + goToUrl(nextUrl, 'Welcome') } catch (error) { console.log('Error authenticating') console.error(error) diff --git a/src/client/redux/sagas/soundcheck.js b/src/client/redux/sagas/soundcheck.js index 2704d74..f72b236 100644 --- a/src/client/redux/sagas/soundcheck.js +++ b/src/client/redux/sagas/soundcheck.js @@ -9,7 +9,7 @@ import { } from '../ducks/soundcheck' import { INITIALIZE_SUCCESS } from '../ducks/room' import { getDevices, getUserMedia } from '../../utils/navigator' -import { setLocalStorage, getLocalStorage } from '../../utils/window' +import { setLocalStorage, getLocalStorage, reload } from '../../utils/window' import config from '../../config' function* soundcheckInitialize () { @@ -88,7 +88,8 @@ function* soundcheckUpdate ({ audioInput, audioOutput, videoInput, audioEnabled, roomId, stream }) - // @todo: TODO: Pass stream updates to all users + // reload to refresh stream updates + reload() } catch (err) { console.log('Error initializing soundcheck') console.error(err) diff --git a/src/client/route/protected.js b/src/client/route/protected.js index c4ec599..874498e 100644 --- a/src/client/route/protected.js +++ b/src/client/route/protected.js @@ -9,9 +9,13 @@ const Protected = ({ component: Component, exact = false, path, isAuthValid, rou exact={exact} path={path} render={props => { + const pathname = props.location.pathname + const nextUrl = pathname && pathname !== '/' + ? `/?next=${encodeURIComponent(pathname)}` + : '/' return isAuthValid ? - : + : }} /> ) diff --git a/src/client/ui-components/join-or-create-room/index.js b/src/client/ui-components/join-or-create-room/index.js index 68e769b..b0c9d1c 100644 --- a/src/client/ui-components/join-or-create-room/index.js +++ b/src/client/ui-components/join-or-create-room/index.js @@ -1,4 +1,5 @@ import React, { Component } from 'react' +import PropTypes from 'prop-types' import { Form, FormGroup, FormControl, Button } from 'react-bootstrap' import { generateName, urlSafe } from '../../utils/room' import { goToUrl } from '../../utils/window' @@ -24,36 +25,56 @@ export default class JoinOrCreateRoom extends Component { goToUrl(path, title) } render () { - return ( -
- -

- - OR - -

-
- - - {' '} + return this.props.roomId + ? ( +
+ Join room +   - -
- ) +
+ ) + : ( +
+ +

+ - OR - +

+
+ + + {' '} + +
+
+ ) } } + +JoinOrCreateRoom.propTypes = { + roomId: PropTypes.string +} diff --git a/src/client/ui-components/modal/index.css b/src/client/ui-components/modal/index.css new file mode 100644 index 0000000..03c7a5c --- /dev/null +++ b/src/client/ui-components/modal/index.css @@ -0,0 +1,3 @@ +.modal-header { + color: #337ab7; +} diff --git a/src/client/ui-components/modal/index.js b/src/client/ui-components/modal/index.js new file mode 100644 index 0000000..a9c72e5 --- /dev/null +++ b/src/client/ui-components/modal/index.js @@ -0,0 +1,35 @@ + +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { Modal } from 'react-bootstrap' +import './index.css' + +class ModalWrapper extends Component { + render () { + return ( + + + {this.props.header} + + + {this.props.content} + + + ) + } +} + +ModalWrapper.propTypes = { + onClose: PropTypes.func, + show: PropTypes.bool, + content: PropTypes.any, + header: PropTypes.string +} + +export default ModalWrapper diff --git a/src/client/ui-components/soundcheck/index.css b/src/client/ui-components/soundcheck/index.css new file mode 100644 index 0000000..c53640b --- /dev/null +++ b/src/client/ui-components/soundcheck/index.css @@ -0,0 +1,3 @@ +.foot-note { + font-size: small; +} diff --git a/src/client/ui-components/soundcheck/index.js b/src/client/ui-components/soundcheck/index.js index dd31bf7..bae3424 100644 --- a/src/client/ui-components/soundcheck/index.js +++ b/src/client/ui-components/soundcheck/index.js @@ -3,17 +3,22 @@ import PropTypes from 'prop-types' import ToggleButton from '../toggle-button' import { Row, Col, FormControl, FormGroup, Button } from 'react-bootstrap' import { map, filter, values } from 'lodash' +import { setLocalStorage } from '../../utils/window' +import config from '../../config' +import './index.css' const getDevices = (devices, kind) => filter(devices, (device, deviceId) => device.kind === kind) const getVideoInputDevices = devices => getDevices(devices, 'videoinput') const getAudioInputDevices = devices => getDevices(devices, 'audioinput') const getAudioOutputDevices = devices => getDevices(devices, 'audiooutput') +const Emoji = ({ emoji, label }) => {emoji} class Soundcheck extends Component { constructor (props) { super(props) this.onDeviceChanged = this.onDeviceChanged.bind(this) this.onSoundcheckSave = this.onSoundcheckSave.bind(this) + this.onClearSoundcheckCache = this.onClearSoundcheckCache.bind(this) this.state = { videoInput: null, audioInput: null, @@ -45,6 +50,10 @@ class Soundcheck extends Component { }) } + onClearSoundcheckCache () { + setLocalStorage(config.localStorage.gumConstraints, null) + } + onSoundcheckSave (event) { event.preventDefault() console.log('device changes', this.state) @@ -100,7 +109,7 @@ class Soundcheck extends Component {
- Video Input Source + Video Input {this.renderDropdownMenu( @@ -126,7 +135,7 @@ class Soundcheck extends Component { - Audio Input Source + Audio Input {this.renderDropdownMenu( @@ -153,7 +162,7 @@ class Soundcheck extends Component { - Audio Output Source + Audio Output {this.renderDropdownMenu( @@ -168,8 +177,16 @@ class Soundcheck extends Component { - - + + + + + Note: Your page will reload after save +