From fbad72611e267e315356a4d0f2ed790ec0a6c7e0 Mon Sep 17 00:00:00 2001
From: Prash <prashanth@slice.com>
Date: Wed, 9 May 2018 23:35:33 -0700
Subject: [PATCH 1/3] fix soundcheck reload, css, add separate modal, add dev
 env bypass

---
 src/client/redux/sagas/soundcheck.js          |  5 +--
 src/client/ui-components/modal/index.css      |  3 ++
 src/client/ui-components/modal/index.js       | 35 +++++++++++++++++++
 src/client/ui-components/soundcheck/index.css |  3 ++
 src/client/ui-components/soundcheck/index.js  | 11 +++---
 .../soundcheck/soundcheck-wrapper.js          | 14 +++-----
 .../ui-components/toggle-button/index.css     |  4 +--
 src/client/utils/window.js                    |  1 +
 src/server/services/auth.js                   | 15 ++++++--
 9 files changed, 71 insertions(+), 20 deletions(-)
 create mode 100644 src/client/ui-components/modal/index.css
 create mode 100644 src/client/ui-components/modal/index.js
 create mode 100644 src/client/ui-components/soundcheck/index.css

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/ui-components/modal/index.css b/src/client/ui-components/modal/index.css
new file mode 100644
index 0000000..2001fc2
--- /dev/null
+++ b/src/client/ui-components/modal/index.css
@@ -0,0 +1,3 @@
+.modal-header {
+  color: #337ab7;
+}
\ No newline at end of file
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 (
+      <Modal
+        show={this.props.show}
+        onHide={this.props.onClose}
+      >
+        <Modal.Header
+          className='modal-header'
+          closeButton
+        >
+          {this.props.header}
+        </Modal.Header>
+        <Modal.Body>
+          {this.props.content}
+        </Modal.Body>
+      </Modal>
+    )
+  }
+}
+
+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..89e7aff 100644
--- a/src/client/ui-components/soundcheck/index.js
+++ b/src/client/ui-components/soundcheck/index.js
@@ -3,6 +3,7 @@ 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 './index.css'
 
 const getDevices = (devices, kind) => filter(devices, (device, deviceId) => device.kind === kind)
 const getVideoInputDevices = devices => getDevices(devices, 'videoinput')
@@ -100,7 +101,7 @@ class Soundcheck extends Component {
         <br />
         <Row>
           <Col md={5}>
-            Video Input Source
+            Video Input 🎥
           </Col>
           <Col md={5}>
             {this.renderDropdownMenu(
@@ -126,7 +127,7 @@ class Soundcheck extends Component {
         </Row>
         <Row>
           <Col md={5}>
-            Audio Input Source
+            Audio Input 🎙️
           </Col>
           <Col md={5}>
             {this.renderDropdownMenu(
@@ -153,7 +154,7 @@ class Soundcheck extends Component {
         </Row>
         <Row>
           <Col md={5}>
-            Audio Output Source
+            Audio Output 🔈
           </Col>
           <Col md={5}>
             {this.renderDropdownMenu(
@@ -168,7 +169,9 @@ class Soundcheck extends Component {
           <Col md={2} />
         </Row>
         <Row>
-            <Col md={5} />
+            <Col md={5} className='foot-note'>
+              Note: Your page will reload after save
+            </Col>
             <Col md={5} />
             <Col md={2}>
               <Button
diff --git a/src/client/ui-components/soundcheck/soundcheck-wrapper.js b/src/client/ui-components/soundcheck/soundcheck-wrapper.js
index e0c1263..5401443 100644
--- a/src/client/ui-components/soundcheck/soundcheck-wrapper.js
+++ b/src/client/ui-components/soundcheck/soundcheck-wrapper.js
@@ -1,7 +1,7 @@
 
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Modal } from 'react-bootstrap'
+import Modal from '../modal'
 import Soundcheck from './index'
 import { connect } from 'react-redux'
 import { initializeSoundcheck, onSoundcheckUpdate } from '../../redux/ducks/soundcheck'
@@ -17,12 +17,9 @@ class SoundcheckWrapper extends Component {
     return (
       <Modal
         show={this.props.show}
-        onHide={this.props.onClose}
-      >
-        <Modal.Header closeButton>
-          Audio / Video Settings
-        </Modal.Header>
-        <Modal.Body>
+        onClose={this.props.onClose}
+        header={`Settings - Audio & Video`}
+        content={
           <Soundcheck
             devices={this.props.devices}
             videoEnabled={this.props.videoEnabled}
@@ -33,8 +30,7 @@ class SoundcheckWrapper extends Component {
             onSoundcheckUpdate={this.props.onSoundcheckUpdate}
             onClose={this.props.onClose}
           />
-        </Modal.Body>
-      </Modal>
+        } />
     )
   }
 }
diff --git a/src/client/ui-components/toggle-button/index.css b/src/client/ui-components/toggle-button/index.css
index a489779..3f60306 100644
--- a/src/client/ui-components/toggle-button/index.css
+++ b/src/client/ui-components/toggle-button/index.css
@@ -32,11 +32,11 @@
 }
 
 input:checked + .slider {
-  background-color: #2196F3;
+  background-color: #00E676;
 }
 
 input:focus + .slider {
-  box-shadow: 0 0 1px #2196F3;
+  box-shadow: 0 0 1px #00E676;
 }
 
 input:checked + .slider:before {
diff --git a/src/client/utils/window.js b/src/client/utils/window.js
index 82c1ada..ab87a9e 100644
--- a/src/client/utils/window.js
+++ b/src/client/utils/window.js
@@ -7,3 +7,4 @@ export const goToUrl = (path, title) => {
   window.history.pushState(currentHistoryState, title, path)
   window.location.replace(path)
 }
+export const reload = () => window.location.reload()
diff --git a/src/server/services/auth.js b/src/server/services/auth.js
index 7dd69a2..fae1f92 100644
--- a/src/server/services/auth.js
+++ b/src/server/services/auth.js
@@ -4,6 +4,7 @@ import basicAuth from 'basic-auth'
 import _debug from 'debug'
 
 const debug = _debug('service:auth')
+const ENV = process.env.NODE_ENV && process.env.NODE_ENV.toLowerCase()
 
 class AuthService {
   async authenticateViaCode (code) {
@@ -24,9 +25,17 @@ class AuthService {
     return basicAuth(req)
   }
 
+  isSafe () {
+    return ENV === 'development'
+  }
+
+  isSecretInvalid () {
+    return (!config.auth.secret || config.auth.secret === ':secret')
+  }
+
   async verifyToken (token) {
     return new Promise((resolve, reject) => {
-      if (!config.auth.secret || config.auth.secret === ':secret') return reject('Invalid secret')
+      if (!this.isSafe() && this.isSecretInvalid()) return reject('Invalid secret / secret not set')
       jwt.verify(
         token,
         new Buffer(config.auth.secret, 'base64'),
@@ -40,8 +49,8 @@ class AuthService {
   }
 
   createToken ({ uid }) {
-    if (!config.auth.secret || config.auth.secret === ':secret') {
-      debug('Secret not set')
+    if (!this.isSafe() && this.isSecretInvalid()) {
+      debug('Invalid secret / secret not set')
       return null
     }
     const iat = Math.floor(Date.now() / 1000)

From 29d98f3e57cea018ad4f511b75db7e8cb7e87d7b Mon Sep 17 00:00:00 2001
From: Prash <prashanth@slice.com>
Date: Wed, 9 May 2018 23:49:11 -0700
Subject: [PATCH 2/3] soundcheck enhancements

---
 src/client/ui-components/modal/index.css     |  2 +-
 src/client/ui-components/soundcheck/index.js | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/client/ui-components/modal/index.css b/src/client/ui-components/modal/index.css
index 2001fc2..03c7a5c 100644
--- a/src/client/ui-components/modal/index.css
+++ b/src/client/ui-components/modal/index.css
@@ -1,3 +1,3 @@
 .modal-header {
   color: #337ab7;
-}
\ No newline at end of file
+}
diff --git a/src/client/ui-components/soundcheck/index.js b/src/client/ui-components/soundcheck/index.js
index 89e7aff..ea87057 100644
--- a/src/client/ui-components/soundcheck/index.js
+++ b/src/client/ui-components/soundcheck/index.js
@@ -3,6 +3,8 @@ 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)
@@ -15,6 +17,7 @@ class Soundcheck extends Component {
     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,
@@ -46,6 +49,10 @@ class Soundcheck extends Component {
     })
   }
 
+  onClearSoundcheckCache () {
+    setLocalStorage(config.localStorage.gumConstraints, null)
+  }
+
   onSoundcheckSave (event) {
     event.preventDefault()
     console.log('device changes', this.state)
@@ -169,10 +176,16 @@ class Soundcheck extends Component {
           <Col md={2} />
         </Row>
         <Row>
+            <Col md={5}>
+              <Button
+                onClick={this.onClearSoundcheckCache}
+              >
+                Clear cache
+              </Button>
+            </Col>
             <Col md={5} className='foot-note'>
               Note: Your page will reload after save
             </Col>
-            <Col md={5} />
             <Col md={2}>
               <Button
                 bsStyle='primary'

From 026f88106350325dd044e62c21f075199a7b2e0a Mon Sep 17 00:00:00 2001
From: Prash <prashanth@slice.com>
Date: Thu, 10 May 2018 01:00:10 -0700
Subject: [PATCH 3/3] add next routing support

---
 package.json                                  |  1 +
 src/client/redux/sagas/session.js             |  6 +-
 src/client/route/protected.js                 |  6 +-
 .../join-or-create-room/index.js              | 75 ++++++++++++-------
 src/client/ui-components/soundcheck/index.js  |  7 +-
 src/client/utils/room.js                      | 10 +++
 src/client/utils/window.js                    |  7 ++
 src/client/views/room/index.css               |  1 +
 src/client/views/welcome/index.js             |  8 +-
 yarn.lock                                     | 11 +++
 10 files changed, 98 insertions(+), 34 deletions(-)

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/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
         ? <Component {...props} routes={routes} />
-        : <Redirect to={'/'} />
+        : <Redirect to={nextUrl} />
     }}
   />
 )
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 (
-      <div>
-        <Button
-          bsStyle='primary'
-          onClick={event => {
-            event.preventDefault()
-            this.gotoRoom(generateName())
-          }}
-        >
-          Create New Room
-        </Button>
-        <br /><br />
-        - OR -
-        <br /><br />
-        <Form inline>
-          <FormGroup controlId='room-name'>
-            <FormControl type='text' size={30} placeholder={generateName(false)} onChange={this.onRoomNameChanged} />
-          </FormGroup>{' '}
+    return this.props.roomId
+      ? (
+        <div>
+          Join room
+          &nbsp;
           <Button
-            bsStyle='warning'
+            bsStyle={'primary'}
             onClick={event => {
               event.preventDefault()
-              if (this.state.roomName) {
-                this.gotoRoom(urlSafe(this.state.roomName))
-              }
-            }}>
-            Join Room
+              this.gotoRoom(this.props.roomId)
+            }}
+          >
+            {this.props.roomId}
           </Button>
-        </Form>
-      </div>
-    )
+        </div>
+        )
+      : (
+        <div>
+          <Button
+            bsStyle='primary'
+            onClick={event => {
+              event.preventDefault()
+              this.gotoRoom(generateName())
+            }}
+          >
+            Create New Room
+          </Button>
+          <br /><br />
+          - OR -
+          <br /><br />
+          <Form inline>
+            <FormGroup controlId='room-name'>
+              <FormControl type='text' size={30} placeholder={generateName(false)} onChange={this.onRoomNameChanged} />
+            </FormGroup>{' '}
+            <Button
+              bsStyle='warning'
+              onClick={event => {
+                event.preventDefault()
+                if (this.state.roomName) {
+                  this.gotoRoom(urlSafe(this.state.roomName))
+                }
+              }}>
+              Join Room
+            </Button>
+          </Form>
+        </div>
+      )
   }
 }
+
+JoinOrCreateRoom.propTypes = {
+  roomId: PropTypes.string
+}
diff --git a/src/client/ui-components/soundcheck/index.js b/src/client/ui-components/soundcheck/index.js
index ea87057..bae3424 100644
--- a/src/client/ui-components/soundcheck/index.js
+++ b/src/client/ui-components/soundcheck/index.js
@@ -11,6 +11,7 @@ const getDevices = (devices, kind) => filter(devices, (device, deviceId) => devi
 const getVideoInputDevices = devices => getDevices(devices, 'videoinput')
 const getAudioInputDevices = devices => getDevices(devices, 'audioinput')
 const getAudioOutputDevices = devices => getDevices(devices, 'audiooutput')
+const Emoji = ({ emoji, label }) => <span role='img' aria-label={label}>{emoji}</span>
 
 class Soundcheck extends Component {
   constructor (props) {
@@ -108,7 +109,7 @@ class Soundcheck extends Component {
         <br />
         <Row>
           <Col md={5}>
-            Video Input 🎥
+            Video Input <Emoji emoji='🎥' label='camera' />
           </Col>
           <Col md={5}>
             {this.renderDropdownMenu(
@@ -134,7 +135,7 @@ class Soundcheck extends Component {
         </Row>
         <Row>
           <Col md={5}>
-            Audio Input 🎙️
+            Audio Input <Emoji emoji='🎙️' label='microphone' />
           </Col>
           <Col md={5}>
             {this.renderDropdownMenu(
@@ -161,7 +162,7 @@ class Soundcheck extends Component {
         </Row>
         <Row>
           <Col md={5}>
-            Audio Output 🔈
+            Audio Output <Emoji emoji='🔈' label='speaker' />
           </Col>
           <Col md={5}>
             {this.renderDropdownMenu(
diff --git a/src/client/utils/room.js b/src/client/utils/room.js
index 670cc09..cda458b 100644
--- a/src/client/utils/room.js
+++ b/src/client/utils/room.js
@@ -22,3 +22,13 @@ export const getRandomAvatarUrl = (
   }
   return `${AVATAR_URL_PREFIX}/avatars/face/${features.eyes}/${features.nose}/${features.mouth}/${features.color || 'eeee'}`
 }
+
+export const parseRoomIdFromNextUrl = (nextUrl) => {
+  return nextUrl
+    ? decodeURIComponent(
+        nextUrl
+          .replace('?next=', '')
+      )
+        .replace('/room/', '')
+    : null
+}
diff --git a/src/client/utils/window.js b/src/client/utils/window.js
index ab87a9e..1f8e0bf 100644
--- a/src/client/utils/window.js
+++ b/src/client/utils/window.js
@@ -1,3 +1,10 @@
+import { parse } from 'query-string'
+export const getNextUrl = () => {
+  const urlSearch = parse(window.location.search)
+  return urlSearch && urlSearch.next
+    ? `?next=${encodeURIComponent(urlSearch.next)}`
+    : null
+}
 export const getLocalStorage = (key) => JSON.parse(window.localStorage.getItem(key) || null)
 export const setLocalStorage = (key, val) => window.localStorage.setItem(key, JSON.stringify(val))
 export const existsInLocalStorage = (key) => window.localStorage.getItem(key) !== undefined
diff --git a/src/client/views/room/index.css b/src/client/views/room/index.css
index 82ad0b4..1579358 100644
--- a/src/client/views/room/index.css
+++ b/src/client/views/room/index.css
@@ -1,4 +1,5 @@
 .room-toolbar {
   margin: auto;
   text-align: center;
+  padding-bottom: 10px;
 }
\ No newline at end of file
diff --git a/src/client/views/welcome/index.js b/src/client/views/welcome/index.js
index 24a31f7..a133db8 100644
--- a/src/client/views/welcome/index.js
+++ b/src/client/views/welcome/index.js
@@ -1,10 +1,14 @@
 import React, { Component } from 'react'
 import JoinOrCreateRoom from '../../ui-components/join-or-create-room'
 import { Row, Col, Grid, Jumbotron } from 'react-bootstrap'
+import { getNextUrl } from '../../utils/window'
+import { parseRoomIdFromNextUrl } from '../../utils/room'
 import './index.css'
 
 class Welcome extends Component {
   render () {
+    const next = getNextUrl()
+    const roomId = parseRoomIdFromNextUrl(next)
     return (
       <Grid fluid>
         <Jumbotron className='welcome'>
@@ -43,7 +47,9 @@ class Welcome extends Component {
           <br />
           <Row>
             <Col md={12}>
-              <JoinOrCreateRoom />
+              <JoinOrCreateRoom
+                roomId={roomId}
+              />
             </Col>
           </Row>
         </Jumbotron>
diff --git a/yarn.lock b/yarn.lock
index 6488760..cb11606 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7014,6 +7014,13 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+query-string@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.1.0.tgz#01e7d69f6a0940dac67a937d6c6325647aa4532a"
+  dependencies:
+    decode-uri-component "^0.2.0"
+    strict-uri-encode "^2.0.0"
+
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -8152,6 +8159,10 @@ strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
 
+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+
 string-length@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-1.0.1.tgz#56970fb1c38558e9e70b728bf3de269ac45adfac"