diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
index 8283f3f2dde698a5a5460ad0b6db1b8be7d53ba4..1196be6c5f18b4f30ff697d588b509cd49d1b518 100755
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
@@ -122,10 +122,11 @@ class ActionsBar extends PureComponent {
}
}
if (result) {
+ AudioManager.setTranslationFloorVolumeByExt(languageExtension);
// AudioManager.setFloorOutputVolume(FLOOR_TRANSLATION_VOLUME);
- // transaudio.volume = 1
+ transaudio.volume = 1
} else {
- // AudioManager.setFloorOutputVolume(1.0);
+ AudioManager.setFloorOutputVolume(1.0);
}
}
}, 500);
diff --git a/bigbluebutton-html5/imports/ui/components/translations/component.jsx b/bigbluebutton-html5/imports/ui/components/translations/component.jsx
index 07daf538d3258b6c3979ff27783467e1c97573d2..ddd019dade36430c24a3ec6d0bed234b1c7f92f9 100644
--- a/bigbluebutton-html5/imports/ui/components/translations/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/translations/component.jsx
@@ -7,6 +7,7 @@ import { makeCall } from '/imports/ui/services/api';
import Meeting from "/imports/ui/services/meeting";
import Button from '/imports/ui/components/button/component';
import AudioManager from '/imports/ui/services/audio-manager';
+import TranslationManager from '/imports/ui/services/translation-manager';
const intlMessages = defineMessages({
translationsTitle: {
@@ -63,6 +64,10 @@ class Translations extends Component{
})
}
+ componentDidUpdate() {
+ TranslationManager.$languagesChanged.next(null);
+ }
+
createEditForm = () => {
if( this.state.languages.length < 8 ){
this.state.languages.push({name:"?", edit:"true"})
@@ -77,6 +82,7 @@ class Translations extends Component{
this.state.languages[index].name = name;
this.state.languages[index].edit = false;
this.setState(this.state)
+
}
deletionHandler = (index)=>{
@@ -118,7 +124,6 @@ class Translations extends Component{
active: false,
warning: null,
speechDetectionThreshold: AudioManager.$translatorSpeechDetectionThresholdChanged.value,
- channelVolume: AudioManager.translationChannelVolume
}
componentWillUnmount() {
@@ -137,15 +142,6 @@ class Translations extends Component{
pEvent.preventDefault();
}
- setTranslationChannelVolume(pEvent) {
- if(pEvent.target.dataset.hasOwnProperty("ext")) {
- AudioManager.$translationChannelVolumeChanged.next({
- extension: pEvent.target.dataset["ext"],
- volume: pEvent.target.value / 100
- });
- }
- }
-
render() {
const {
intl,
@@ -190,9 +186,7 @@ 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)}
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/component.jsx
index 108e0e14f3e62e1ad1477fd02426f66b5560b251..5441c46c75f29bdc9b0bd14433bca848b7fb6cea 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/component.jsx
@@ -6,6 +6,7 @@ import UserMessages from './user-messages/container';
import UserNotesContainer from './user-notes/container';
import UserCaptionsContainer from './user-captions/container';
import WaitingUsers from './waiting-users/component';
+import TranslationSettings from "./translation-settings/component";
import UserPolls from './user-polls/component';
import Translations from "./translations/component"
import BreakoutRoomItem from './breakout-room/component';
@@ -50,6 +51,7 @@ class UserContent extends PureComponent {
startedChats,
amIModerator,
meetingIsBreakout,
+ hasLanguages
} = this.props;
return (
@@ -95,6 +97,15 @@ class UserContent extends PureComponent {
) : null
}
+ {hasLanguages ? (
+ <TranslationSettings
+ {...{
+ intl,
+ }}
+ />
+ ) : null
+ }
+
{amIModerator && !meetingIsBreakout
? (
<Translations
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/container.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/container.jsx
index 2debb419b1ad9c5304b7733228c896449b88a819..6a6e42644d8e50993e3af59b61c53b5f213079d0 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/container.jsx
@@ -6,6 +6,7 @@ import Storage from '/imports/ui/services/storage/session';
import UserContent from './component';
import GuestUsers from '/imports/api/guest-users/';
import { UsersContext } from '/imports/ui/components/components-data/users-context/context';
+import ActionsBarService from "../../actions-bar/service";
const CLOSED_CHAT_LIST_KEY = 'closedChatList';
const STARTED_CHAT_LIST_KEY = 'startedChatList';
@@ -32,4 +33,6 @@ export default withTracker(() => ({
approved: false,
denied: false,
}).fetch(),
+ hasLanguages: ActionsBarService.hasLanguages(),
+
}))(UserContentContainer);
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/translation-settings/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/translation-settings/component.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..a061beebfcbaf731fc478c3d3305b210cb075c40
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/translation-settings/component.jsx
@@ -0,0 +1,93 @@
+import {styles} from "./styles.scss";
+import {styles as cstyles} from '/imports/ui/components/user-list/user-list-content/styles';
+
+import React, {Component} from 'react';
+import {defineMessages} from 'react-intl';
+import AudioManager from '/imports/ui/services/audio-manager';
+import Meeting from "../../../../services/meeting";
+
+
+const intlMessages = defineMessages({
+ originLanguage: {
+ id: 'app.translation.language.origin',
+ description: 'Name of origin language',
+ defaultMessage: 'Floor',
+ },
+ noneLanguage: {
+ id: 'app.translation.language.none',
+ description: 'Name of none language',
+ defaultMessage: 'None',
+ },
+ originalVolume: {
+ id: 'app.translation.language.originalVolume',
+ description: 'Name of original volume header',
+ defaultMessage: 'None',
+ }
+});
+
+class TranslationSettings extends Component {
+
+ state = {
+ languages: [],
+ translationOriginalVolume: AudioManager.translationOriginalVolume
+ };
+
+ componentDidMount() {
+
+ this.getLanguages();
+ }
+
+ getLanguages() {
+ Meeting.getLanguages().then(languages => {
+ languages.push({
+ name: this.props.intl.formatMessage(this.props.translator ? intlMessages.noneLanguage : intlMessages.originLanguage),
+ extension: -1,
+ });
+
+ this.setState({languages: languages})
+
+ })
+ this.forceUpdate();
+ }
+
+ setTranslationOriginalVolume(pEvent) {
+ if (pEvent.target.dataset.hasOwnProperty("ext")) {
+ AudioManager.$translationOriginalVolumeChanged.next({
+ extension: pEvent.target.dataset["ext"],
+ volume: pEvent.target.value
+ });
+ }
+ }
+
+ render() {
+ const {
+ intl,
+ } = this.props;
+
+ return (
+ <div key={"translation-settings"}>
+ <div className={cstyles.container}>
+ <h2 className={cstyles.smallTitle}>
+ {intl.formatMessage(intlMessages.originalVolume)}
+ </h2>
+ </div>
+ {this.state.languages.map(function (language, index) {
+ if(language.extension >= 0) return (
+ <div className={styles.translationOriginalVolumePanel}>
+ <div>{language.name}:</div>
+
+ <input type="range" data-ext={index} id="volume" name="volume" min="0" max="1" step=".01"
+ defaultValue={this.state.translationOriginalVolume[index]}
+ onChange={this.setTranslationOriginalVolume.bind(this)}/>
+ </div>
+ )
+ }, this)
+ }
+ </div>
+
+
+ );
+ }
+}
+
+export default TranslationSettings;
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/translation-settings/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/translation-settings/styles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fb34f051e86c99c4b964b5ed80491b5b64434841
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/translation-settings/styles.scss
@@ -0,0 +1,5 @@
+@import "../styles.scss";
+
+.translationOriginalVolumePanel {
+ margin: 8px 0 8px 4px;
+}
diff --git a/bigbluebutton-html5/imports/ui/services/audio-manager/index.js b/bigbluebutton-html5/imports/ui/services/audio-manager/index.js
index 09d3b183d8880772fc54e339ba1244b5abbde911..8a8b56090e7e6e5dde73d8110c050cb54916eae9 100755
--- a/bigbluebutton-html5/imports/ui/services/audio-manager/index.js
+++ b/bigbluebutton-html5/imports/ui/services/audio-manager/index.js
@@ -61,8 +61,8 @@ class AudioManager {
this.$translatorSpeakingChanged = new BehaviorSubject(false)
this.$translatorChannelLanguageExtensionChanged = new BehaviorSubject(-1);
- this.$translationChannelVolumeChanged = new BehaviorSubject({ extension: -1, volume: 0 });
- this.translationChannelVolume = [];
+ this.$translationOriginalVolumeChanged = new BehaviorSubject({ extension: -1, volume: 0 });
+ this.translationOriginalVolume = [];
this.defineProperties({
isMuted: false,
@@ -107,22 +107,14 @@ class AudioManager {
}
});
- this.$translationChannelVolumeChanged.subscribe((pLang) => {
+ this.$translationOriginalVolumeChanged.subscribe((pLang) => {
if(
pLang.hasOwnProperty("extension") &&
pLang.hasOwnProperty("volume")
) {
- this.translationChannelVolume[pLang.extension] = pLang.volume;
-
- let tCExt = parseInt((this.translationLanguageExtension+ '').charAt(2));
- if(tCExt == pLang.extension) {
- let audioElement = document.getElementById("remote-media");
- if(audioElement) audioElement.volume = pLang.volume;
- }
+ this.translationOriginalVolume[pLang.extension] = pLang.volume;
}
})
-
-
}
init(userData, audioEventHandler) {
@@ -834,11 +826,6 @@ class AudioManager {
//create a dummy stream that does nothing at all
let ac = new AudioContext();
let dest = ac.createMediaStreamDestination();
- let audioElement = document.getElementById("translation-media");
- let tIdx = parseInt((languageExtension+ '').charAt(2));
- if(audioElement) audioElement.volume =
- Array.isArray(this.translationChannelVolume) && typeof this.translationChannelVolume[tIdx] !== 'undefined' ?
- this.translationChannelVolume[tIdx] : 1;
if (languageExtension >= 0) {
const callOptions = {
@@ -932,6 +919,13 @@ class AudioManager {
}
+ setTranslationFloorVolumeByExt(pExt) {
+ let tIdx = parseInt((pExt+ '').charAt(2));
+ let tVol = Array.isArray(this.translationOriginalVolume) && typeof this.translationOriginalVolume[tIdx] !== 'undefined' ?
+ this.translationOriginalVolume[tIdx] : 1;
+ this.setFloorOutputVolume(tVol);
+ }
+
setFloorOutputVolume(volume) {
const floorMediaElement = document.querySelector(MEDIA_TAG);
floorMediaElement.volume = volume;
diff --git a/bigbluebutton-html5/public/locales/de.json b/bigbluebutton-html5/public/locales/de.json
index 8158b754afc692db1857cbaf41e9d2033d95eb26..cfd63cdd1ec8b0c450958d3b8958ccee7f4fef46 100644
--- a/bigbluebutton-html5/public/locales/de.json
+++ b/bigbluebutton-html5/public/locales/de.json
@@ -821,7 +821,8 @@
"app.translation.filterMarker.languageListening": "hören",
"app.translation.filterMarker.languageTranslating": "sprechen",
"app.translation.speechDetectionThresholdInfo": "Sprachschwellenwert f. Ãœbersetzer (-100 bis 0)",
- "app.translation.speechDetectionThresholdExplanation": "The system tries to recognize when you are actually speaking while interpreting. The volume of the original audio is then lowered for the listeners so they can hear your voice. The center of the mic-symbol in the mute-button turns solid when speech is recognized. Use this feedback to fine-tune the threshold to your current setup. Change this setting from -100 (most sensitive / always on) to 0 (least sensitive / disabled). Click \"set\" to activate the new setting. This affects only you in the current session. Changes are not saved. Tip: Make sure your microphone provides a decent audio-level without clipping (check system mixer-settings)."
+ "app.translation.speechDetectionThresholdExplanation": "The system tries to recognize when you are actually speaking while interpreting. The volume of the original audio is then lowered for the listeners so they can hear your voice. The center of the mic-symbol in the mute-button turns solid when speech is recognized. Use this feedback to fine-tune the threshold to your current setup. Change this setting from -100 (most sensitive / always on) to 0 (least sensitive / disabled). Click \"set\" to activate the new setting. This affects only you in the current session. Changes are not saved. Tip: Make sure your microphone provides a decent audio-level without clipping (check system mixer-settings).",
+ "app.translation.language.originalVolume": "Original-Laustärke"
}
diff --git a/bigbluebutton-html5/public/locales/en.json b/bigbluebutton-html5/public/locales/en.json
index 44476c33b34d9f77bc96191d8980b003bf663f0b..78853232ff63f6e9e955d4b5b1dffc96057a4748 100755
--- a/bigbluebutton-html5/public/locales/en.json
+++ b/bigbluebutton-html5/public/locales/en.json
@@ -832,6 +832,7 @@
"app.translation.filterMarker.languageListening": "listening",
"app.translation.filterMarker.languageTranslating": "speaking",
"app.translation.speechDetectionThresholdInfo": "Speech detection threshold (-100 to 0)",
- "app.translation.speechDetectionThresholdExplanation": "The system tries to recognize when you are actually speaking while interpreting. The volume of the original audio is then lowered for the listeners so they can hear your voice. The center of the mic-symbol in the mute-button turns solid when speech is recognized. Use this feedback to fine-tune the threshold to your current setup. Change this setting from -100 (most sensitive / always on) to 0 (least sensitive / disabled). Click \"set\" to activate the new setting. This affects only you in the current session. Changes are not saved. Tip: Make sure your microphone provides a decent audio-level without clipping (check system mixer-settings)."
+ "app.translation.speechDetectionThresholdExplanation": "The system tries to recognize when you are actually speaking while interpreting. The volume of the original audio is then lowered for the listeners so they can hear your voice. The center of the mic-symbol in the mute-button turns solid when speech is recognized. Use this feedback to fine-tune the threshold to your current setup. Change this setting from -100 (most sensitive / always on) to 0 (least sensitive / disabled). Click \"set\" to activate the new setting. This affects only you in the current session. Changes are not saved. Tip: Make sure your microphone provides a decent audio-level without clipping (check system mixer-settings).",
+ "app.translation.language.originalVolume": "Original Volume"
}