Permalink
Browse files

Merge pull request #3534 from KDSBrowne/Audio-Join-UI-Revision

JoinAudio Modal UI Update
2 parents 370e78d + ef9c98b commit 0b739ad43ca401fd242608510ddcf9ce8c4a42b3 @antobinary antobinary committed on GitHub Jan 10, 2017
@@ -12,13 +12,15 @@ import MuteAudioContainer from './mute-button/container';
import { exitAudio } from '/imports/api/phone';
import JoinVideo from './video-button/component';
-const openJoinAudio = () => showModal(<Audio />);
-
export default class ActionsBar extends Component {
constructor(props) {
super(props);
}
+ openJoinAudio() {
+ return showModal(<Audio handleJoinListenOnly={this.props.handleJoinListenOnly} />)
+ }
+
renderForPresenter() {
return (
<div className={styles.actionsbar}>
@@ -28,7 +30,7 @@ export default class ActionsBar extends Component {
<div className={styles.center}>
<MuteAudioContainer />
<JoinAudioOptionsContainer
- open={openJoinAudio.bind(this)}
+ open={this.openJoinAudio.bind(this)}
close={() => {exitAudio();}}
/>
@@ -47,7 +49,7 @@ export default class ActionsBar extends Component {
<div className={styles.center}>
<MuteAudioContainer />
<JoinAudioOptionsContainer
- open={openJoinAudio.bind(this)}
+ open={this.openJoinAudio.bind(this)}
close={() => {exitAudio();}}
/>
@@ -1,17 +1,21 @@
import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
-
import ActionsBar from './component';
import Service from './service';
+import { joinListenOnly } from '/imports/api/phone';
class ActionsBarContainer extends Component {
constructor(props) {
super(props);
}
render() {
+ const handleJoinListenOnly = () => joinListenOnly();
+
return (
- <ActionsBar {...this.props}>
+ <ActionsBar
+ handleJoinListenOnly={handleJoinListenOnly}
+ {...this.props}>
{this.props.children}
</ActionsBar>
);
@@ -54,33 +54,31 @@ export default class AudioSettings extends React.Component {
ghost={true}
onClick={this.chooseAudio}
/>
- <Button className={styles.closeBtn}
- label={'Close'}
- icon={'close'}
- size={'lg'}
- circle={true}
- hideLabel={true}
- onClick={this.handleClose}
- />
- <div>
+ <div className={styles.title}>
Choose your audio settings
</div>
</div>
+ <div className={styles.audioNote}>
+ Please note, a dialog will appear in your browser, requiring you to accept sharing your microphone.
+ </div>
<div className={styles.containerLeftHalfContent}>
+ <span className={styles.heading}>Microphone source</span>
<DeviceSelector
className={styles.item}
kind="audioinput"
onChange={this.handleInputChange} />
- <AudioStreamVolume
+ <span className={styles.heading}>Your audio stream volume</span>
+ <AudioStreamVolume
className={styles.item}
deviceId={this.state.inputDeviceId} />
- <DeviceSelector
- className={styles.item}
- kind="audiooutput"
- onChange={this.handleOutputChange} />
- <AudioTestContainer />
</div>
<div className={styles.containerRightHalfContent}>
+ <span className={styles.heading}>Speaker source</span>
+ <DeviceSelector
+ className={styles.item}
+ kind="audiooutput"
+ onChange={this.handleOutputChange} />
+ <AudioTestContainer />
<EnterAudioContainer isFullAudio={true}/>
</div>
</div>
@@ -43,6 +43,7 @@ export default class Audio extends React.Component {
JOIN_AUDIO: this.JOIN_AUDIO,
AUDIO_SETTINGS: this.AUDIO_SETTINGS,
LISTEN_ONLY: this.LISTEN_ONLY,
+ handleJoinListenOnly: this.props.handleJoinListenOnly,
};
const Submenu = this.submenus[curr].componentName;
@@ -22,7 +22,8 @@ export default class JoinAudio extends React.Component {
}
openListen() {
- this.props.changeMenu(this.props.LISTEN_ONLY);
+ this.handleClose();
+ this.props.handleJoinListenOnly();
}
render() {
@@ -117,5 +117,41 @@ div.half label {
.item {
display: block;
margin-bottom: $md-padding-y;
- width: 100%;
+ width: 85%;
+ margin-bottom: 2em;
+ border-bottom: 3px solid;
+ border-top:0px;
+ border-left: 0px;
+ border-right: 0px;
+ outline:0px;
+ border-color: $color-gray-dark;
+ text-decoration-color: $color-gray-dark;
+}
+
+
+.title {
+ color: $color-gray-dark;
+ font-weight: 700;
+ font-size: $font-size-large;
+ margin-top: -1em;
+}
+
+.audioNote {
+ color: $color-text;
+ display: inline-block;
+ margin-top: 1.75em;
+ margin-bottom: 2em;
+}
+
+.heading {
+ font-weight: 700;
+ font-size: $font-size-small;
+ display: inline-block;
+ margin-bottom: .5em;
+}
+
+.joinButton {
+ position: relative;
+ left: 11em;
+ top: 3em;
}
@@ -10,11 +10,6 @@ export default class EnterAudio extends React.Component {
render() {
return (
<div className={styles.half}>
- Please note, a dialog will appear in your browser,
- requiring you to accept sharing your microphone.
- <br />
- <img src='resources/images/allow-mic.png' alt='allow microphone image' width='100%'/>
- <br />
<Button className={styles.enterBtn}
label={'Enter Session'}
size={'md'}
@@ -94,8 +94,14 @@ div.containerLeftHalf label, div.containerRightHalf label {
box-shadow: none;
}
+.enterBtn {
+ position: relative;
+ margin-left: 10em;
+ margin-top: 2.5em;
+}
+
.testAudioBtn {
@extend .defaultBtn;
width: 140px;
- margin-top: 20px;
+ margin-top: 0px;
}

0 comments on commit 0b739ad

Please sign in to comment.