Skip to content

Commit 163d413

Browse files
author
Prash
committed
soundcheck-v3
1 parent 31fb253 commit 163d413

File tree

7 files changed

+172
-21
lines changed

7 files changed

+172
-21
lines changed

‎src/client/redux/ducks/soundcheck.js

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,19 @@ export const initializeSoundcheck = () => ({
1111
type: INITIALIZE_SOUNDCHECK
1212
})
1313

14-
export const onSoundcheckUpdate = ({ audioInput, audioOutput, videoInput }) => ({
14+
export const onSoundcheckUpdate = ({ audioInput, audioOutput, videoInput, audioEnabled, videoEnabled }) => ({
1515
type: UPDATE_SOUNDCHECK,
1616
audioInput,
1717
audioOutput,
18-
videoInput
18+
videoInput,
19+
audioEnabled,
20+
videoEnabled
1921
})
2022

2123
const initialState = {
2224
devices: {},
25+
videoEnabled: true,
26+
audioEnabled: true,
2327
defaultVideoInputId: null,
2428
defaultAudioOutputId: null,
2529
defaultAudioInputId: null
@@ -43,6 +47,11 @@ const soundcheckReducer = (state = initialState, action) => {
4347
defaultVideoInputId: findDefaultDevice('videoinput', action.devices),
4448
defaultAudioOutputId: findDefaultDevice('audiooutput', action.devices)
4549
}
50+
case UPDATE_SOUNDCHECK_SUCCESS:
51+
return {
52+
...state,
53+
...action.data
54+
}
4655
default:
4756
return state
4857
}

‎src/client/redux/sagas/soundcheck.js

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import {
44
INITIALIZE_SOUNDCHECK_SUCCESS,
55
INITIALIZE_SOUNDCHECK_FAILED,
66
UPDATE_SOUNDCHECK,
7-
UPDATE_SOUNDCHECK_FAILED
7+
UPDATE_SOUNDCHECK_FAILED,
8+
UPDATE_SOUNDCHECK_SUCCESS
89
} from '../ducks/soundcheck'
910
import { INITIALIZE_SUCCESS } from '../ducks/room'
1011
import { getDevices, getUserMedia } from '../../utils/navigator'
@@ -26,14 +27,46 @@ function* soundcheckInitialize () {
2627
}
2728
}
2829

29-
function* soundcheckUpdate ({ audioInput, audioOutput, videoInput }) {
30+
function* soundcheckUpdate ({ audioInput, audioOutput, videoInput, audioEnabled, videoEnabled }) {
3031
try {
3132
const state = yield select(state => state)
3233
const roomId = state.room.id
3334
const devices = state.soundcheck.devices
35+
let propertiesToUpdate = {}
36+
if (audioInput) {
37+
propertiesToUpdate = {
38+
...propertiesToUpdate,
39+
defaultAudioInputId: audioInput
40+
}
41+
}
42+
43+
if (videoInput) {
44+
propertiesToUpdate = {
45+
...propertiesToUpdate,
46+
defaultVideoInputId: videoInput
47+
}
48+
}
49+
yield put({
50+
type: UPDATE_SOUNDCHECK_SUCCESS,
51+
data: {
52+
audioEnabled,
53+
videoEnabled,
54+
...propertiesToUpdate
55+
}
56+
})
57+
const audioOpts = audioEnabled
58+
? audioInput /* && devices[audioOutput] */
59+
? { deviceId: { exact: devices[audioOutput].deviceId } }
60+
: true
61+
: false
62+
const videoOpts = videoEnabled
63+
? videoInput /* && devices[videoInput] */
64+
? { deviceId: { exact: devices[videoInput].deviceId } }
65+
: true
66+
: false
3467
const constraints = {
35-
audio: audioOutput /* devices[audioOutput] */ ? { deviceId: { exact: devices[audioOutput].deviceId } } : true,
36-
video: videoInput /* && devices[videoInput] */ ? { dviceId: { exact: devices[videoInput].deviceId } } : true
68+
audio: audioOpts,
69+
video: videoOpts
3770
}
3871
console.log('scheck-updatesaga: constraints', constraints)
3972
const stream = yield call(getUserMedia, constraints)

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

Lines changed: 46 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { Component } from 'react'
22
import PropTypes from 'prop-types'
3+
import ToggleButton from '../toggle-button'
34
import { Row, Col, FormControl, FormGroup, Button } from 'react-bootstrap'
45
import { map, filter, values } from 'lodash'
56

@@ -16,7 +17,9 @@ class Soundcheck extends Component {
1617
this.state = {
1718
videoInput: null,
1819
audioInput: null,
19-
audioOutput: null
20+
audioOutput: null,
21+
audioEnabled: this.props.audioEnabled,
22+
videoEnabled: this.props.videoEnabled
2023
}
2124
}
2225

@@ -31,7 +34,11 @@ class Soundcheck extends Component {
3134
event.preventDefault()
3235
console.log('device changes', this.state)
3336
if (filter(values(this.state), value => value !== null).length > 0) {
34-
this.props.onSoundcheckUpdate(this.state)
37+
this.props.onSoundcheckUpdate({
38+
...this.state,
39+
audioEnabled: this.state.audioEnabled !== undefined ? this.state.audioEnabled : this.props.audioEnabled,
40+
videoEnabled: this.state.audioEnabled !== undefined ? this.state.videoEnabled : this.props.videoEnabled,
41+
})
3542
}
3643
this.props.onClose()
3744
}
@@ -65,10 +72,10 @@ class Soundcheck extends Component {
6572
return (
6673
<div>
6774
<Row>
68-
<Col md={6}>
69-
Video Source
75+
<Col md={5}>
76+
Video Input Source
7077
</Col>
71-
<Col md={6}>
78+
<Col md={5}>
7279
{this.renderDropdownMenu(
7380
map(getVideoInputDevices(this.props.devices), device => ({
7481
key: `${device.kind}-${device.deviceId}`,
@@ -78,12 +85,23 @@ class Soundcheck extends Component {
7885
event => this.onDeviceChanged('videoInput', event)
7986
)}
8087
</Col>
88+
<Col md={2}>
89+
<ToggleButton
90+
enabled={this.state.videoEnabled}
91+
onChange={event => {
92+
if (event && event.target.checked !== undefined) {
93+
this.setState({
94+
videoEnabled: event.target.checked
95+
})
96+
}
97+
}} />
98+
</Col>
8199
</Row>
82100
<Row>
83-
<Col md={6}>
101+
<Col md={5}>
84102
Audio Input Source
85103
</Col>
86-
<Col md={6}>
104+
<Col md={5}>
87105
{this.renderDropdownMenu(
88106
map(getAudioInputDevices(this.props.devices), device => ({
89107
key: `${device.kind}-${device.deviceId}`,
@@ -93,12 +111,24 @@ class Soundcheck extends Component {
93111
event => this.onDeviceChanged('audioInput', event)
94112
)}
95113
</Col>
114+
<Col md={2}>
115+
<ToggleButton
116+
enabled={this.state.audioEnabled}
117+
onChange={event => {
118+
if (event && event.target.checked !== undefined) {
119+
this.setState({
120+
audioEnabled: event.target.checked
121+
})
122+
}
123+
}}
124+
/>
125+
</Col>
96126
</Row>
97127
<Row>
98-
<Col md={6}>
128+
<Col md={5}>
99129
Audio Output Source
100130
</Col>
101-
<Col md={6}>
131+
<Col md={5}>
102132
{this.renderDropdownMenu(
103133
map(getAudioOutputDevices(this.props.devices), device => ({
104134
key: `${device.kind}-${device.deviceId}`,
@@ -108,16 +138,18 @@ class Soundcheck extends Component {
108138
event => this.onDeviceChanged('audioOutput', event)
109139
)}
110140
</Col>
141+
<Col md={2} />
111142
</Row>
112143
<Row>
113-
<Col md={6} />
114-
<Col md={6}>
144+
<Col md={5} />
145+
<Col md={5} />
146+
<Col md={2}>
115147
<Button
116148
bsStyle='primary'
117149
onClick={this.onSoundcheckSave}
118150
>
119151
Save
120-
</Button>
152+
</Button>
121153
</Col>
122154
</Row>
123155
</div>
@@ -130,6 +162,8 @@ Soundcheck.propTypes = {
130162
audioInput: PropTypes.object,
131163
audioOutput: PropTypes.object,
132164
videoInput: PropTypes.object,
165+
videoEnabled: PropTypes.bool,
166+
audioEnabled: PropTypes.bool,
133167
onSoundcheckUpdate: PropTypes.func,
134168
onClose: PropTypes.func
135169
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ class SoundcheckWrapper extends Component {
2525
<Modal.Body>
2626
<Soundcheck
2727
devices={this.props.devices}
28+
videoEnabled={this.props.videoEnabled}
29+
audioEnabled={this.props.audioEnabled}
2830
videoInput={this.props.videoInput}
2931
audioInput={this.props.audioInput}
3032
audioOutput={this.props.audioOutput}
@@ -42,6 +44,8 @@ SoundcheckWrapper.propTypes = {
4244
show: PropTypes.bool,
4345
initializeSoundcheck: PropTypes.func,
4446
devices: PropTypes.object,
47+
videoEnabled: PropTypes.bool,
48+
audioEnabled: PropTypes.bool,
4549
videoInput: PropTypes.object,
4650
audioInput: PropTypes.object,
4751
audioOutput: PropTypes.object,
@@ -51,6 +55,8 @@ SoundcheckWrapper.propTypes = {
5155
function mapStateToProps (state) {
5256
return {
5357
devices: state.soundcheck.devices,
58+
videoEnabled: state.soundcheck.videoEnabled,
59+
audioEnabled: state.soundcheck.audioEnabled,
5460
videoInput: {
5561
id: state.soundcheck.defaultVideoInputId,
5662
label: state.soundcheck.devices[state.soundcheck.defaultVideoInputId]

‎src/client/ui-components/toggle-button/index.css

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
.switch {
2+
position: relative;
3+
display: inline-block;
4+
width: 60px;
5+
height: 34px;
6+
}
7+
8+
.switch input {display:none;}
9+
10+
.slider {
11+
position: absolute;
12+
cursor: pointer;
13+
top: 0;
14+
left: 0;
15+
right: 0;
16+
bottom: 0;
17+
background-color: #ccc;
18+
-webkit-transition: .4s;
19+
transition: .4s;
20+
}
21+
22+
.slider:before {
23+
position: absolute;
24+
content: "";
25+
height: 26px;
26+
width: 26px;
27+
left: 4px;
28+
bottom: 4px;
29+
background-color: white;
30+
-webkit-transition: .4s;
31+
transition: .4s;
32+
}
33+
34+
input:checked + .slider {
35+
background-color: #2196F3;
36+
}
37+
38+
input:focus + .slider {
39+
box-shadow: 0 0 1px #2196F3;
40+
}
41+
42+
input:checked + .slider:before {
43+
-webkit-transform: translateX(26px);
44+
-ms-transform: translateX(26px);
45+
transform: translateX(26px);
46+
}
47+
48+
/* Rounded sliders */
49+
.slider.round {
50+
border-radius: 34px;
51+
}
52+
53+
.slider.round:before {
54+
border-radius: 50%;
55+
}

‎src/client/ui-components/toggle-button/index.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
import './index.css'
4+
5+
const ToggleButton = ({ enabled, onChange }) => (
6+
<label className='switch'>
7+
<input type='checkbox' onChange={onChange} checked={enabled} />
8+
<span className='slider round' />
9+
</label>
10+
)
11+
12+
ToggleButton.propTypes = {
13+
enabled: PropTypes.bool,
14+
onChange: PropTypes.func
15+
}
16+
17+
export default ToggleButton

‎src/client/views/welcome/index.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@ import { Row, Col, Grid, Jumbotron } from 'react-bootstrap'
44
import './index.css'
55

66
class Welcome extends Component {
7-
componentWillMount () {
8-
console.log('cwm', this.props.isAuthValid)
9-
}
107
render () {
118
return (
129
<Grid fluid>

0 commit comments

Comments
 (0)