feat(soudcheck): Allow toggle for devices, add local storage support

Author: Prash

src/client/config/index.js

@@ -1,6 +1,11 @@
 import stunServers from './stun'
 const config = {
-  iceServers: stunServers.map(url => ({ urls: url }))
+  iceServers: stunServers.map(url => ({ urls: url })),
+  localStorage: {
+    gumConstraints: 'gum',
+    auth: 'auth',
+    code: 'code'
+  }
 }
 
 export default config

src/client/redux/ducks/soundcheck.js

@@ -45,7 +45,9 @@ const soundcheckReducer = (state = initialState, action) => {
         devices: keyBy(action.devices, device => `${device.kind}-${device.deviceId}`),
         defaultAudioInputId: findDefaultDevice('audioinput', action.devices),
         defaultVideoInputId: findDefaultDevice('videoinput', action.devices),
-        defaultAudioOutputId: findDefaultDevice('audiooutput', action.devices)
+        defaultAudioOutputId: findDefaultDevice('audiooutput', action.devices),
+        audioEnabled: action.audioEnabled,
+        videoEnabled: action.videoEnabled
       }
     case UPDATE_SOUNDCHECK_SUCCESS:
       return {

src/client/redux/sagas/room.js

@@ -2,10 +2,18 @@ import { call, put, fork, takeLatest } from 'redux-saga/effects'
 import { INITIALIZE, INITIALIZE_SUCCESS, INITIALIZE_FAILED, SHUTDOWN } from '../ducks/room'
 import { SOCKET_INITIALIZE, SOCKET_DESTROY } from '../ducks/socket'
 import { getUserMedia } from '../../utils/navigator'
+import { getLocalStorage } from '../../utils/window'
+import config from '../../config'
 
 function* initialize (action) {
   try {
-    const stream = yield call(getUserMedia)
+    const constraints = getLocalStorage(config.localStorage.gumConstraints)
+    let stream
+    if (constraints) {
+      stream = yield call(getUserMedia, constraints)
+    } else {
+      stream = yield call(getUserMedia)
+    }
     yield put({
       type: INITIALIZE_SUCCESS,
       roomId: action.roomId,

src/client/redux/sagas/session.js

@@ -5,6 +5,7 @@ import {
   AUTHENTICATE_FAILED
 } from '../ducks/session'
 import axios from 'axios'
+import config from '../../config'
 import { goToUrl, setLocalStorage } from '../../utils/window'
 
 function* authenticate (action) {
@@ -14,8 +15,8 @@ function* authenticate (action) {
     }))
     const auth = response.data.auth
     const code = response.data.code || action.code
-    setLocalStorage('auth', auth)
-    setLocalStorage('invite-code', code)
+    setLocalStorage(config.localStorage.auth, auth)
+    setLocalStorage(config.localStorage.code, code)
     yield put({
       type: AUTHENTICATE_SUCCESS,
       code,

src/client/redux/sagas/soundcheck.js

@@ -1,21 +1,32 @@
 import { put, fork, takeLatest, call, select } from 'redux-saga/effects'
 import { 
-  INITIALIZE_SOUNDCHECK, 
-  INITIALIZE_SOUNDCHECK_SUCCESS, 
+  INITIALIZE_SOUNDCHECK,
+  INITIALIZE_SOUNDCHECK_SUCCESS,
   INITIALIZE_SOUNDCHECK_FAILED,
   UPDATE_SOUNDCHECK,
   UPDATE_SOUNDCHECK_FAILED,
   UPDATE_SOUNDCHECK_SUCCESS
 } from '../ducks/soundcheck'
 import { INITIALIZE_SUCCESS } from '../ducks/room'
 import { getDevices, getUserMedia } from '../../utils/navigator'
+import { setLocalStorage, getLocalStorage } from '../../utils/window'
+import config from '../../config'
 
 function* soundcheckInitialize () {
   try {
     const devices = yield getDevices()
+    const constraints = getLocalStorage(config.localStorage.gumConstraints)
+    let audioEnabled = true
+    let videoEnabled = true
+    if (constraints) {
+      audioEnabled = constraints.audio && constraints.audio !== false
+      videoEnabled = constraints.video && constraints.video !== false
+    }
     yield put({
       type: INITIALIZE_SOUNDCHECK_SUCCESS,
-      devices
+      devices,
+      audioEnabled,
+      videoEnabled
     })
   } catch (err) {
     console.log('Error initializing soundcheck')
@@ -71,11 +82,13 @@ function* soundcheckUpdate ({ audioInput, audioOutput, videoInput, audioEnabled,
     console.log('scheck-updatesaga: constraints', constraints)
     const stream = yield call(getUserMedia, constraints)
     console.log('scheck-updatasaga: stream', stream, roomId, stream.getVideoTracks())
+    setLocalStorage(config.localStorage.gumConstraints, constraints)
     yield put({
       type: INITIALIZE_SUCCESS,
       roomId,
       stream
     })
+    // @todo: TODO: Pass stream updates to all users
   } catch (err) {
     console.log('Error initializing soundcheck')
     console.error(err)

src/client/redux/selectors/auth.js

@@ -1,6 +1,7 @@
 import { createSelector } from 'reselect'
 import { isTokenValid } from '../../utils/jwt'
 import { getLocalStorage } from '../../utils/window'
+import config from '../../config'
 
 const authSelector = state => state.session && state.session.auth
 
@@ -9,7 +10,7 @@ export const getAuth = createSelector(
   auth => {
     if (auth) return auth
     try {
-      return JSON.parse(getLocalStorage('auth') || null)
+      return getLocalStorage(config.localStorage.auth)
     } catch (error) {
       console.error(error)
     }

src/client/ui-components/soundcheck/index.js

@@ -23,6 +23,21 @@ class Soundcheck extends Component {
     }
   }
 
+  componentWillReceiveProps (nextProps) {
+    if (this.props !== nextProps) {
+      if (this.state.audioEnabled !== nextProps.audioEnabled) {
+        this.setState({
+          audioEnabled: nextProps.audioEnabled
+        })
+      }
+      if (this.state.videoEnabled !== nextProps.videoEnabled) {
+        this.setState({
+          videoEnabled: nextProps.videoEnabled
+        })
+      }
+    }
+  }
+
   onDeviceChanged (stateProperty, event) {
     event.preventDefault()
     this.setState({
@@ -47,8 +62,8 @@ class Soundcheck extends Component {
     return (
       <FormGroup>
         <FormControl 
-          componentClass="select" 
-          placeholder="Select source"
+          componentClass='select' 
+          placeholder='Select source'
           selected={selectedKey}
           onChange={onChange}
         >
@@ -71,6 +86,18 @@ class Soundcheck extends Component {
     if (!this.props.devices) return null
     return (
       <div>
+        <Row>
+          <Col md={5}>
+            Media Type
+          </Col>
+          <Col md={5}>
+            Device
+          </Col>
+          <Col md={2}>
+            On / Off
+          </Col>
+        </Row>
+        <br />
         <Row>
           <Col md={5}>
             Video Input Source

src/client/ui-components/soundcheck/soundcheck-wrapper.js

@@ -20,7 +20,7 @@ class SoundcheckWrapper extends Component {
         onHide={this.props.onClose}
       >
         <Modal.Header closeButton>
-          Soundcheck
+          Audio / Video Settings
         </Modal.Header>
         <Modal.Body>
           <Soundcheck

src/client/ui-components/video-container/index.js

@@ -15,10 +15,6 @@ class VideoContainer extends Component {
     this.playStream = this.playStream.bind(this)
   }
 
-  componentWillReceiveProps (nextProps) {
-    // console.log('new', nextProps)
-  }
-
   playStream (event) {
     event.preventDefault()
     event.target.play()
@@ -49,6 +45,7 @@ class VideoContainer extends Component {
                     }}
                     disableMute={this.props.users[userId].disableMute}
                     muted={this.props.users[userId].muted}
+                    height={750}
                   />
                 </Col>
               ))}

src/client/ui-components/video/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Button, ButtonGroup } from 'react-bootstrap'
+import { getRandomAvatarUrl } from '../../utils/room'
 import './index.css'
 
 class VideoPlayer extends Component {
@@ -44,6 +45,7 @@ class VideoPlayer extends Component {
           </span>
         }
         <video
+          poster={getRandomAvatarUrl()}
           className='video'
           ref={el => { this.videoRef = el }}
           muted={this.props.muted}

src/client/utils/room.js

@@ -5,3 +5,20 @@ import { toLower } from 'lodash'
 
 export const urlSafe = (text) => slug(text)
 export const generateName = (addRandomId = true) => urlSafe(toLower(`${faker.hacker.adjective()}-${faker.random.word()}${addRandomId ? `-${cuid.slug()}` : ''}`))
+
+/**
+ * Get random avatar url to show in video posters
+ * @param {*} key unique id
+ * @param {*} features { face: { eyes: [], nose, mouth }, color: HEXWITHOUTHASH}
+ */
+export const getRandomAvatarUrl = (
+  key,
+  features
+) => {
+  const AVATAR_URL_PREFIX = `https://api.adorable.io`
+  // const ALT_URL_PREFIX = `https://randomuser.me/api/portraits/lego` // lego/[1-9].jpg
+  if (!features) {
+    return `${AVATAR_URL_PREFIX}/avatars/285/${key || cuid.slug()}.png`
+  }
+  return `${AVATAR_URL_PREFIX}/avatars/face/${features.eyes}/${features.nose}/${features.mouth}/${features.color || 'eeee'}`
+}

src/client/utils/window.js

@@ -1,4 +1,4 @@
-export const getLocalStorage = (key) => window.localStorage.getItem(key)
+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
 export const clearLocalStorage = (key) => window.localStorage.clear()