diff --git a/bigbluebutton-html5/imports/ui/components/translations/component.jsx b/bigbluebutton-html5/imports/ui/components/translations/component.jsx index e936343b21863354b14403b8d0c378bafe921c74..a723a6e358c43ac90d291184a80ea8b02faa213c 100644 --- a/bigbluebutton-html5/imports/ui/components/translations/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/translations/component.jsx @@ -98,20 +98,22 @@ class Translations extends Component{ } endTranslation = () =>{ - Meeting.clearLanguages() + Meeting.clearLanguages(); this.state.languages = []; this.state.active = false this.state.warning = "" this.setState(this.state) // also remove participants from translation rooms AudioManager.translatorChannelOpen = false; + AudioManager.resetCurrentTranslatorChannelExtension(); } state ={ languages: [], active: false, warning: null, - speechDetectionThreshold: AudioManager.$translatorSpeechDetectionThresholdChanged.value + speechDetectionThreshold: AudioManager.$translatorSpeechDetectionThresholdChanged.value, + channelVolume: AudioManager.translationChannelVolume } componentWillUnmount() { @@ -130,9 +132,13 @@ class Translations extends Component{ pEvent.preventDefault(); } - setLanguageVolume(pExt, pVol) { - console.log("#@# pExt: " + pExt + "pVol: " + pVol); - AudioManager.$translationChannelVolumeChanged.next({ extension: pExt, volume: pVol}); + setTranslationChannelVolume(pEvent) { + if(pEvent.target.dataset.hasOwnProperty("ext")) { + AudioManager.$translationChannelVolumeChanged.next({ + extension: pEvent.target.dataset["ext"], + volume: pEvent.target.value / 100 + }); + } } render() { @@ -170,7 +176,8 @@ class Translations extends Component{ intl={intl} /> }else{ - return <Language + return (<div style={{margin: "0 0 10px 0;"}}> + <Language active={this.state.active} name={language.name} key={index} @@ -178,6 +185,10 @@ class Translations extends Component{ deletionHandler={this.deletionHandler} intl={intl} /> + <div> + <input type="range" data-ext={index} id="volume" name="volume" min="0" max="100" value={this.state.channelVolume[index]} onChange={this.setTranslationChannelVolume.bind(this)}/> + </div> + </div>); } }, this)} {add} @@ -196,12 +207,6 @@ class Translations extends Component{ <input id="speechDetectionThreshold" type="number" value={this.state.speechDetectionThreshold} onChange={this.setThreshold.bind(this)} /> <input type="submit" onClick={ this.updateThreshold.bind(this) } value="Set" /> </form> - - <button onClick={ _ => this.setLanguageVolume(0,.5)}>1,0.5</button> - <button onClick={ _ => this.setLanguageVolume(0,1)}>1,1</button> - <button onClick={ _ => this.setLanguageVolume(1,.5)}>2,0.5</button> - <button onClick={ _ => this.setLanguageVolume(1,1)}>2,1</button> - </div> ); } diff --git a/bigbluebutton-html5/imports/ui/services/audio-manager/index.js b/bigbluebutton-html5/imports/ui/services/audio-manager/index.js index 337528e32117caec79ff03cba024cdeeb55792ba..8bf565272f8c25d12b3148eabc4b6688dfd2ed18 100755 --- a/bigbluebutton-html5/imports/ui/services/audio-manager/index.js +++ b/bigbluebutton-html5/imports/ui/services/audio-manager/index.js @@ -59,6 +59,7 @@ class AudioManager { this.$translatorSpeechDetectionThresholdChanged = new BehaviorSubject(TRANSLATOR_SPEECH_DETECTION_THRESHOLD) this.$translatorSpeakingChanged = new BehaviorSubject(false) + this.$translatorChannelLanguageExtensionChanged = new BehaviorSubject(-1); this.$translationChannelVolumeChanged = new BehaviorSubject({ extension: -1, volume: 0 }); this.translationChannelVolume = []; @@ -107,8 +108,12 @@ class AudioManager { pLang.hasOwnProperty("volume") ) { this.translationChannelVolume[pLang.extension] = pLang.volume; - let audioElement = document.getElementById("translation-media"); - if(audioElement) audioElement.volume = pLang.volume; + + let tCExt = parseInt((this.translationLanguageExtension+ '').charAt(2)); + if(tCExt == pLang.extension) { + let audioElement = document.getElementById("translation-media"); + if(audioElement) audioElement.volume = pLang.volume; + } } }) @@ -825,11 +830,7 @@ class AudioManager { let ac = new AudioContext(); let dest = ac.createMediaStreamDestination(); let audioElement = document.getElementById("translation-media"); - console.log("#@# languageExtension: " + languageExtension); let tIdx = parseInt((languageExtension+ '').charAt(2)); - console.log("#@# tIdx: " + tIdx); - console.log("#@# this.translationChannelVolume: "); - console.log(this.translationChannelVolume); if(audioElement) audioElement.volume = Array.isArray(this.translationChannelVolume) && typeof this.translationChannelVolume[tIdx] !== 'undefined' ? this.translationChannelVolume[tIdx] : 1; @@ -890,6 +891,11 @@ class AudioManager { Meeting.changeTranslatorSpeackState(languageExtension, false); }); + if (this.$translatorChannelLanguageExtensionChanged.value > -1) { + Meeting.changeTranslatorSpeackState(this.$translatorChannelLanguageExtensionChanged.value, false); + } + + this.$translatorChannelLanguageExtensionChanged.next(languageExtension); const callOptions = { isListenOnly: false, extension: null, @@ -955,8 +961,9 @@ class AudioManager { this.muteStateCallbacks.forEach(callback => callback()); } - - + resetCurrentTranslatorChannelExtension() { + this.$translatorChannelLanguageExtensionChanged.next(-1); + } } const audioManager = new AudioManager();