From 5785dff46a4af66b9aa661f55994040caec0c235 Mon Sep 17 00:00:00 2001
From: Martin Klampfer <martin.klampfer@fairkom.eu>
Date: Tue, 15 Jun 2021 19:15:20 +0200
Subject: [PATCH] added info and explanation tooltip for speech detection
threshold setting
---
.../ui/components/translations/component.jsx | 16 ++++++++----
.../ui/components/translations/styles.scss | 25 +++++++++++++++++++
bigbluebutton-html5/public/locales/de.json | 4 ++-
bigbluebutton-html5/public/locales/en.json | 3 ++-
4 files changed, 41 insertions(+), 7 deletions(-)
diff --git a/bigbluebutton-html5/imports/ui/components/translations/component.jsx b/bigbluebutton-html5/imports/ui/components/translations/component.jsx
index 35534823d2..8f1361c642 100644
--- a/bigbluebutton-html5/imports/ui/components/translations/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/translations/component.jsx
@@ -39,10 +39,15 @@ const intlMessages = defineMessages({
description: 'Label for end translation button',
defaultMessage: 'End Translation',
},
- speechDetectionThreshold: {
- id: 'app.translation.speechDetectionThreshold',
- description: 'Translator speech detection threshold',
- defaultMessage: 'Translator speech detection threshold',
+ speechDetectionThresholdInfo: {
+ id: 'app.translation.speechDetectionThresholdInfo',
+ description: 'Translator speech detection threshold info',
+ defaultMessage: 'Translator speech detection threshold info',
+ },
+ speechDetectionThresholdExplanation: {
+ id: 'app.translation.speechDetectionThresholdExplanation',
+ description: 'Translator speech detection threshold explanation',
+ defaultMessage: 'Translator speech detection threshold explanation',
},
});
@@ -185,7 +190,7 @@ class Translations extends Component{
: null
}
</p>
- <div>{intl.formatMessage(intlMessages.speechDetectionThreshold)}:</div>
+ <div className={styles.thInfo} data-tooltip={intl.formatMessage(intlMessages.speechDetectionThresholdExplanation)}>{intl.formatMessage(intlMessages.speechDetectionThresholdInfo)}:</div>
<form onSubmit={this.handleSubmit}>
<input id="speechDetectionThreshold" type="number" value={this.state.speechDetectionThreshold} onChange={this.setThreshold.bind(this)} />
<input type="submit" onClick={ this.updateThreshold.bind(this) } value="Set" />
@@ -193,6 +198,7 @@ class Translations extends Component{
</div>
);
}
+
}
export default injectIntl(Translations);
diff --git a/bigbluebutton-html5/imports/ui/components/translations/styles.scss b/bigbluebutton-html5/imports/ui/components/translations/styles.scss
index 9f5f91a6a3..0c8c0d029e 100644
--- a/bigbluebutton-html5/imports/ui/components/translations/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/translations/styles.scss
@@ -67,4 +67,29 @@
&:hover {
background-color: var(--color-white);
}
+
+}
+.thInfo {
+ width: 180px;
+}
+
+[data-tooltip]:before {
+ content: attr(data-tooltip);
+ position: absolute;
+ opacity: 0;
+ transition: all 0.15s ease;
+ padding: 10px;
+ color: #333;
+ border-radius: 10px;
+}
+
+[data-tooltip]:hover:before {
+ opacity: 1;
+ background: lightgray;
+ margin-top: -50px;
+ margin-left: 20px;
+}
+
+[data-tooltip]:not([data-tooltip-persistent]):before {
+ pointer-events: none;
}
diff --git a/bigbluebutton-html5/public/locales/de.json b/bigbluebutton-html5/public/locales/de.json
index 575c0d9b26..8158b754af 100644
--- a/bigbluebutton-html5/public/locales/de.json
+++ b/bigbluebutton-html5/public/locales/de.json
@@ -820,6 +820,8 @@
"app.translation.language.connection.settingUp": "...",
"app.translation.filterMarker.languageListening": "hören",
"app.translation.filterMarker.languageTranslating": "sprechen",
- "app.translation.speechDetectionThreshold": "Sprachschwellenwert f. Ãœbersetzer"
+ "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)."
+
}
diff --git a/bigbluebutton-html5/public/locales/en.json b/bigbluebutton-html5/public/locales/en.json
index 1e1bee5d2b..44476c33b3 100755
--- a/bigbluebutton-html5/public/locales/en.json
+++ b/bigbluebutton-html5/public/locales/en.json
@@ -831,6 +831,7 @@
"app.translation.language.connection.settingUp": "...",
"app.translation.filterMarker.languageListening": "listening",
"app.translation.filterMarker.languageTranslating": "speaking",
- "app.translation.speechDetectionThreshold": "Translator speech detection threshold"
+ "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)."
}
--
GitLab