diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
index 769d2c6f8f30d8df0cc67da6a993bce4a82f63a3..ab36427920a7d08a3892d4bb579ae40e513f634d 100755
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
@@ -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();}}
/>
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx
index d2e381d4712cce0db47a1d0077922e5275bfb8e7..2a542fd7800b0b44958e1634442b3186ed90a918 100755
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx
@@ -1,8 +1,8 @@
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) {
@@ -10,8 +10,12 @@ class ActionsBarContainer extends Component {
}
render() {
+ const handleJoinListenOnly = () => joinListenOnly();
+
return (
- <ActionsBar {...this.props}>
+ <ActionsBar
+ handleJoinListenOnly={handleJoinListenOnly}
+ {...this.props}>
{this.props.children}
</ActionsBar>
);
diff --git a/bigbluebutton-html5/imports/ui/components/audio-modal/audio-settings/component.jsx b/bigbluebutton-html5/imports/ui/components/audio-modal/audio-settings/component.jsx
index 1ba2600ec2c461c1e15da6b47c061bb3bd561f14..fe4f36ca0596e95a5662c4243c70cc2b4ceaaf82 100755
--- a/bigbluebutton-html5/imports/ui/components/audio-modal/audio-settings/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/audio-modal/audio-settings/component.jsx
@@ -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>
diff --git a/bigbluebutton-html5/imports/ui/components/audio-modal/component.jsx b/bigbluebutton-html5/imports/ui/components/audio-modal/component.jsx
index 2606418967541bd3c856db2418e2464cc5538a3a..87d3d74157765e1eb6fb8b2eea783e20bc283543 100755
--- a/bigbluebutton-html5/imports/ui/components/audio-modal/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/audio-modal/component.jsx
@@ -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;
diff --git a/bigbluebutton-html5/imports/ui/components/audio-modal/join-audio/component.jsx b/bigbluebutton-html5/imports/ui/components/audio-modal/join-audio/component.jsx
index b370798af87a79b4bac9ca9afd66ad895629d6aa..ff70de6df9b80efdfd8c496322ea4e475f75789e 100755
--- a/bigbluebutton-html5/imports/ui/components/audio-modal/join-audio/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/audio-modal/join-audio/component.jsx
@@ -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() {
diff --git a/bigbluebutton-html5/imports/ui/components/audio-modal/styles.scss b/bigbluebutton-html5/imports/ui/components/audio-modal/styles.scss
index bdf658529933d123f3b6d066dbeb17e4e2b93b80..35409891dd9bd9cb60540d8385ac6b16736201e9 100755
--- a/bigbluebutton-html5/imports/ui/components/audio-modal/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio-modal/styles.scss
@@ -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;
}
diff --git a/bigbluebutton-html5/imports/ui/components/enter-audio/component.jsx b/bigbluebutton-html5/imports/ui/components/enter-audio/component.jsx
index 457879ec1e90b1928e75cdffea12a90721626e55..1ce2815a4cb7e3ae677a2a50ade8ba7b855bcb52 100755
--- a/bigbluebutton-html5/imports/ui/components/enter-audio/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/enter-audio/component.jsx
@@ -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'}
diff --git a/bigbluebutton-html5/imports/ui/components/settings/styles.scss b/bigbluebutton-html5/imports/ui/components/settings/styles.scss
index bb1bfcac95f1c392afde5f8fad2798bf6f169e70..8f9f3f0524227d9d6b85a705afc8f78355985bbc 100755
--- a/bigbluebutton-html5/imports/ui/components/settings/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/settings/styles.scss
@@ -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;
}