From 317c3e5ee980bdbef6fb932158d8283d7d79f8e4 Mon Sep 17 00:00:00 2001
From: gcampes <gabrieldecampes@gmail.com>
Date: Mon, 9 Oct 2017 17:48:10 -0300
Subject: [PATCH] changes to bridge and audio components. WIP
---
.../api/2.0/audio/client/bridge/sip.js | 7 ++++
.../audio/audio-modal/component.jsx | 41 +++++++++----------
.../audio/audio-modal/container.jsx | 1 +
.../audio/audio-settings/component.jsx | 9 ++--
.../audio/audio-settings/styles.scss | 16 +++++---
.../components/audio/audio-test/component.jsx | 21 ++++++----
.../components/audio/audio-test/container.jsx | 30 ++++++--------
.../imports/ui/components/audio/component.jsx | 6 +--
.../imports/ui/components/audio/container.jsx | 3 +-
.../imports/ui/components/audio/service.js | 1 +
.../ui/services/audio-manager/index.js | 12 +++++-
11 files changed, 86 insertions(+), 61 deletions(-)
diff --git a/bigbluebutton-html5/imports/api/2.0/audio/client/bridge/sip.js b/bigbluebutton-html5/imports/api/2.0/audio/client/bridge/sip.js
index 5c595cdf47..47a2156b5a 100644
--- a/bigbluebutton-html5/imports/api/2.0/audio/client/bridge/sip.js
+++ b/bigbluebutton-html5/imports/api/2.0/audio/client/bridge/sip.js
@@ -165,6 +165,13 @@ export default class SIPBridge extends BaseAudioBridge {
resolve();
});
+ currentSession.mediaHandler.on('iceConnectionConnected', () => {
+ console.log('iceConnectionConnected');
+ this.hangup = false;
+ callback({ status: 'started' });
+ resolve();
+ });
+
this.currentSession = currentSession;
})
}
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx
index 5d235edac6..73804874e5 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx
@@ -55,26 +55,22 @@ class AudioModal extends Component {
super(props);
this.state = {
- content: null,
+ content: 'settings',
};
- const {
- isConnecting,
- isConnected,
- isEchoTest,
- inputDeviceId,
- } = this.props;
-
this.handleGoToAudioOptions = this.handleGoToAudioOptions.bind(this);
this.handleGoToAudioSettings = this.handleGoToAudioSettings.bind(this);
this.handleGoToEchoTest = this.handleGoToEchoTest.bind(this);
- this.closeModal = props.closeModal.bind(this);
+ this.closeModal = props.closeModal;
this.handleJoinMicrophone = props.joinMicrophone;
this.handleJoinListenOnly = props.joinListenOnly;
this.joinEchoTest = props.joinEchoTest;
this.exitAudio = props.exitAudio;
this.leaveEchoTest = props.leaveEchoTest;
this.changeInputDevice = props.changeInputDevice;
+ this.changeOutputDevice = props.changeOutputDevice;
+
+ console.log(props);
this.contents = {
echoTest: () => this.renderEchoTest(),
@@ -82,6 +78,17 @@ class AudioModal extends Component {
};
}
+ componentWillUnmount() {
+ const {
+ isConnected,
+ isEchoTest,
+ } = this.props;
+
+ if (isEchoTest) {
+ this.exitAudio();
+ }
+ }
+
handleGoToAudioOptions() {
this.setState({
content: null,
@@ -93,7 +100,7 @@ class AudioModal extends Component {
this.setState({
content: 'settings',
});
- })
+ });
}
handleGoToEchoTest() {
@@ -101,18 +108,7 @@ class AudioModal extends Component {
this.setState({
content: 'echoTest',
});
- })
- }
-
- componentWillUnmount() {
- const {
- isConnected,
- isEchoTest,
- } = this.props;
-
- if (isEchoTest) {
- this.exitAudio();
- }
+ });
}
renderAudioOptions() {
@@ -221,6 +217,7 @@ class AudioModal extends Component {
joinEchoTest={this.joinEchoTest}
exitAudio={this.exitAudio}
changeInputDevice={this.changeInputDevice}
+ changeOutputDevice={this.changeOutputDevice}
isConnecting={isConnecting}
isConnected={isConnected}
isEchoTest={isEchoTest}
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/container.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/container.jsx
index 06e9b0e685..c387fd191d 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/container.jsx
@@ -45,6 +45,7 @@ export default withModalMounter(createContainer(({ mountModal }) =>
return Service.exitAudio();
},
changeInputDevice: (inputDeviceId) => Service.changeInputDevice(inputDeviceId),
+ changeOutputDevice: (outputDeviceId) => Service.changeOutputDevice(outputDeviceId),
joinEchoTest: () => Service.joinEchoTest(),
exitAudio: () => Service.exitAudio(),
isConnecting: Service.isConnecting(),
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx
index b92e680119..c818c8052f 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx
@@ -51,7 +51,7 @@ class AudioSettings extends React.Component {
this.handleRetry = props.handleRetry;
this.exitAudio = props.exitAudio;
this.changeInputDevice = props.changeInputDevice;
-
+ this.changeOutputDevice = props.changeOutputDevice;
console.log('inputDeviceId', props.inputDeviceId);
this.state = {
@@ -76,6 +76,7 @@ class AudioSettings extends React.Component {
handleOutputChange(deviceId, device) {
console.log(`OUTPUT DEVICE CHANGED: ${deviceId}`);
console.log(device);
+ this.changeOutputDevice(deviceId);
this.setState({
outputDeviceId: deviceId,
});
@@ -144,8 +145,10 @@ class AudioSettings extends React.Component {
</div>
</div>
<div className={styles.col}>
- <label className={styles.label}>Â </label>
- <AudioTestContainer />
+ <label className={styles.labelSmall}>
+ Test your speaker volume
+ <AudioTestContainer />
+ </label>
</div>
</div>
</div>
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss
index c223a09435..5ea4ee9c9f 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss
@@ -36,7 +36,10 @@
color: black;
font-size: 0.85rem;
font-weight: 600;
- margin-bottom: 0.5rem;
+
+ & > :first-child {
+ margin-top: 0.5rem;
+ }
}
.formElement {
@@ -47,13 +50,16 @@
}
.select {
- background-color: #fff;
- border: 0;
- border-bottom: 0.1rem solid $color-text;
+ -webkit-appearance: none;
+ -webkit-border-radius: 0px;
+ background: $color-white url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='#667189' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") no-repeat right .35rem center/.4rem .5rem;
+ background-repeat: no-repeat;
+ border: 0.07rem solid $color-gray-light;
+ border-radius: .125rem;
color: $color-text;
width: 100%;
// appearance: none;
- height: 1.75rem;
+ padding: .4rem;
}
.audioMeter {
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-test/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-test/component.jsx
index 33ace85662..da775040f3 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-test/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-test/component.jsx
@@ -1,15 +1,25 @@
import React from 'react';
import Button from '/imports/ui/components/button/component';
-import styles from './styles.scss';
import { defineMessages, injectIntl } from 'react-intl';
+import styles from './styles.scss';
+
+const intlMessages = defineMessages({
+ playSoundLabel: {
+ id: 'app.audio.playSoundLabel',
+ description: 'Play sound button label',
+ },
+});
class AudioTest extends React.Component {
constructor(props) {
super(props);
+
+ this.handlePlayAudioSample = props.handlePlayAudioSample.bind(this);
}
render() {
const {
+ outputDeviceId,
intl,
} = this.props;
@@ -20,17 +30,10 @@ class AudioTest extends React.Component {
icon={'unmute'}
size={'sm'}
color={'primary'}
- onClick={this.props.handlePlayAudioSample}
+ onClick={() => this.handlePlayAudioSample(outputDeviceId)}
/>
);
}
}
-const intlMessages = defineMessages({
- playSoundLabel: {
- id: 'app.audio.playSoundLabel',
- description: 'Play sound button label',
- },
-});
-
export default injectIntl(AudioTest);
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-test/container.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-test/container.jsx
index 37420893af..088fa1c7b3 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-test/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-test/container.jsx
@@ -1,24 +1,20 @@
-import React, { Component } from 'react';
+import React from 'react';
import { createContainer } from 'meteor/react-meteor-data';
+import Service from '/imports/ui/components/audio/service';
import AudioTest from './component';
-class AudioTestContainer extends Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- return (
- <AudioTest {...this.props}>
- {this.props.children}
- </AudioTest>
- );
- }
-}
+const AudioTestContainer = props => (
+ <AudioTest {...props}>
+ {props.children}
+ </AudioTest>
+);
export default createContainer(() => ({
- handlePlayAudioSample: () => {
- const snd = new Audio('resources/sounds/audioSample.mp3');
- snd.play();
+ outputDeviceId: Service.outputDeviceId(),
+ handlePlayAudioSample: (deviceId) => {
+ console.log('handle play audio sample', deviceId);
+ const sound = new Audio('resources/sounds/audioSample.mp3');
+ sound.setSinkId(deviceId);
+ sound.play();
},
}), AudioTestContainer);
diff --git a/bigbluebutton-html5/imports/ui/components/audio/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/component.jsx
index 978cbe9af0..39d0db68bb 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/audio/component.jsx
@@ -1,9 +1,9 @@
import React, { Component } from 'react';
export default class Audio extends Component {
- constructor(props) {
- super(props);
- props.init.call(this);
+ componentDidMount() {
+ console.log('KKKKKKKK');
+ this.props.init.call(this);
}
render() {
diff --git a/bigbluebutton-html5/imports/ui/components/audio/container.jsx b/bigbluebutton-html5/imports/ui/components/audio/container.jsx
index e6fc03db8f..0f4f5fc96d 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/audio/container.jsx
@@ -30,6 +30,7 @@ export default withModalMounter(createContainer(({ mountModal }) => {
return {
init: () => {
Service.init();
+ Service.changeOutputDevice(document.querySelector('#remote-media').sinkId)
if (!autoJoinAudio || didMountAutoJoin) return;
mountModal(<AudioModalContainer />);
didMountAutoJoin = true;
@@ -38,4 +39,4 @@ export default withModalMounter(createContainer(({ mountModal }) => {
}, AudioContainer));
AudioContainer.propTypes = propTypes;
-AudioContainer.defaultProps = defaultProps;
+AudioContainer.d
diff --git a/bigbluebutton-html5/imports/ui/components/audio/service.js b/bigbluebutton-html5/imports/ui/components/audio/service.js
index caec288c29..0168de733c 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/service.js
+++ b/bigbluebutton-html5/imports/ui/components/audio/service.js
@@ -34,6 +34,7 @@ export default {
joinEchoTest: () => AudioManager.joinAudio({ isEchoTest: true }),
toggleMuteMicrophone: () => AudioManager.toggleMuteMicrophone(),
changeInputDevice: (inputDeviceId) => AudioManager.changeInputDevice(inputDeviceId),
+ changeOutputDevice: (outputDeviceId) => AudioManager.changeOutputDevice(outputDeviceId),
isConnected: () => AudioManager.isConnected,
isMuted: () => AudioManager.isMuted,
isConnecting: () => AudioManager.isConnecting,
diff --git a/bigbluebutton-html5/imports/ui/services/audio-manager/index.js b/bigbluebutton-html5/imports/ui/services/audio-manager/index.js
index 2b65fb14de..f4046a85af 100644
--- a/bigbluebutton-html5/imports/ui/services/audio-manager/index.js
+++ b/bigbluebutton-html5/imports/ui/services/audio-manager/index.js
@@ -17,7 +17,9 @@ const ERROR_CODES = {
},
};
-CALL_STATES = {
+const OUTPUT_TAG = '#remote-media';
+
+const CALL_STATES = {
STARTED: 'started',
ENDED: 'ended',
FAILED: 'failed',
@@ -39,6 +41,7 @@ class AudioManager {
})
});
+
this.defineProperties({
isMuted: false,
isConnected: false,
@@ -46,6 +49,7 @@ class AudioManager {
isListenOnly: false,
isEchoTest: false,
error: null,
+ outputDeviceId: null,
});
}
@@ -234,6 +238,12 @@ class AudioManager {
});
}
+ changeOutputDevice(deviceId) {
+ this.outputDeviceId = deviceId;
+ document.querySelector(OUTPUT_TAG).setSinkId(deviceId);
+ console.log('Change id');
+ }
+
get inputStream () {
return this._inputDevice.stream;
}
--
GitLab