[FIX] discuss: fix slider values in call settings

* Adds text values for the call settings sliders.
* Replaces `onChange` events with `onInput` events so that the values
 respect the position of the sliders.
* Debounces some functions to handle the increased amount of calls
due to the swap to the `onInput` listener.
* Changes the default value of `voiceActiveDuration` from `0` to `200`
to match the minimum value of the input.

closes #159693

X-original-commit: 6f12d0a
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

addons/mail/models/res_users_settings.py

@@ -13,7 +13,7 @@ class ResUsersSettings(models.Model):
     # RTC
     push_to_talk_key = fields.Char(string="Push-To-Talk shortcut", help="String formatted to represent a key with modifiers following this pattern: shift.ctrl.alt.key, e.g: truthy.1.true.b")
     use_push_to_talk = fields.Boolean(string="Use the push to talk feature", default=False)
-    voice_active_duration = fields.Integer(string="Duration of voice activity in ms", help="How long the audio broadcast will remain active after passing the volume threshold")
+    voice_active_duration = fields.Integer(string="Duration of voice activity in ms", default=200, help="How long the audio broadcast will remain active after passing the volume threshold")
     volume_settings_ids = fields.One2many('res.users.settings.volumes', 'user_setting_id', string="Volumes of other partners")
 
     @api.model

addons/mail/static/src/core/common/settings_model.js

@@ -2,12 +2,19 @@
 
 import { browser } from "@web/core/browser/browser";
 import { Record } from "./record";
+import { debounce } from "@web/core/utils/timing";
 
 export class Settings extends Record {
     id;
 
     setup() {
         super.setup();
+        this.saveVoiceThresholdDebounce = debounce(() => {
+            browser.localStorage.setItem(
+                "mail_user_setting_voice_threshold",
+                this.voiceActivationThreshold.toString()
+            );
+        }, 2000);
         this.hasCanvasFilterSupport =
             typeof document.createElement("canvas").getContext("2d").filter !== "undefined";
         this._loadLocalSettings();
@@ -26,7 +33,7 @@ export class Settings extends Record {
     logRtc = false;
     push_to_talk_key;
     use_push_to_talk = false;
-    voice_active_duration = 0;
+    voice_active_duration = 200;
     useBlur = false;
     volumeSettingsTimeouts = new Map();
     /**
@@ -116,10 +123,7 @@ export class Settings extends Record {
      */
     setThresholdValue(voiceActivationThreshold) {
         this.voiceActivationThreshold = voiceActivationThreshold;
-        browser.localStorage.setItem(
-            "mail_user_setting_voice_threshold",
-            voiceActivationThreshold.toString()
-        );
+        this.saveVoiceThresholdDebounce();
     }
 
     // methods

addons/mail/static/src/discuss/call/common/call_settings.xml

@@ -43,17 +43,19 @@
                     <div class="mb-3 d-flex align-items-center flex-wrap">
                         <label class="d-flex align-items-center flex-wrap mw-100 cursor-pointer" title="Delay after releasing push-to-talk" aria-label="Delay after releasing push-to-talk">
                             <span class="me-2 text-truncate">Delay after releasing push-to-talk</span>
-                            <div class="d-flex w-100">
-                            <input class="flex-grow-2 form-range" type="range" min="200" max="2000" step="1" t-att-value="store.settings.voice_active_duration" t-on-change="onChangeDelay"/>
+                            <div class="d-flex w-100 align-items-center">
+                                <input class="flex-grow-2 form-range" type="range" min="0" max="2000" step="1" t-att-value="store.settings.voice_active_duration" t-on-input="onChangeDelay"/>
+                                <span class="p-1 w-50 text-end"><t t-out="store.settings.voice_active_duration"/>ms</span>
                             </div>
                         </label>
                     </div>
                 </t>
                 <div t-else="" class="mb-3 d-flex align-items-center flex-wrap">
                     <label class="d-flex align-items-center flex-wrap mw-100 cursor-pointer" title="Voice detection threshold" aria-label="Voice detection threshold">
                         <span class="me-2 text-truncate">Voice detection threshold</span>
-                        <div class="d-flex w-100">
-                            <input class="flex-grow-2 form-range" type="range" min="0.001" max="1" step="0.001" t-att-value="store.settings.voiceActivationThreshold" t-on-change="onChangeThreshold"/>
+                        <div class="d-flex w-100 align-items-center">
+                            <input class="flex-grow-2 form-range" type="range" min="0.001" max="1" step="0.001" t-att-value="store.settings.voiceActivationThreshold" t-on-input="onChangeThreshold"/>
+                            <span class="p-1 w-50 text-end"><t t-out="Math.floor(store.settings.voiceActivationThreshold * 100)"/>%</span>
                         </div>
                     </label>
                 </div>
@@ -75,17 +77,19 @@
                 <t t-if="store.settings.useBlur">
                     <div class="mb-3 d-flex align-items-center flex-wrap">
                         <label class="d-flex align-items-center flex-wrap mw-100 cursor-pointer" title="Background blur intensity" aria-label="Background blur intensity">
-                            <span class="me-2 text-truncate">Background blur intensity <t t-esc="store.settings.backgroundBlurAmount"/></span>
-                            <div class="d-flex w-100">
-                                <input class="flex-grow-2 form-range" type="range" min="0" max="20" step="1" t-att-value="store.settings.backgroundBlurAmount" t-on-change="onChangeBackgroundBlurAmount"/>
+                            <span class="me-2 text-truncate">Background blur intensity</span>
+                            <div class="d-flex w-100 align-items-center">
+                                <input class="flex-grow-2 form-range" type="range" min="0" max="20" step="1" t-att-value="store.settings.backgroundBlurAmount" t-on-input="onChangeBackgroundBlurAmount"/>
+                                <span class="p-1 w-50 text-end"><t t-out="Math.floor(store.settings.backgroundBlurAmount * 5)"/>%</span>
                             </div>
                         </label>
                     </div>
                     <div class="mb-3 d-flex align-items-center flex-wrap">
                         <label class="d-flex align-items-center flex-wrap mw-100 cursor-pointer" title="Edge blur intensity" aria-label="Edge blur intensity">
                             <span class="me-2 text-truncate">Edge blur intensity</span>
-                            <div class="d-flex w-100">
-                                <input class="flex-grow-2 form-range" type="range" min="0" max="20" step="1" t-att-value="store.settings.edgeBlurAmount" t-on-change="onChangeEdgeBlurAmount"/>
+                            <div class="d-flex w-100 align-items-center">
+                                <input class="flex-grow-2 form-range" type="range" min="0" max="20" step="1" t-att-value="store.settings.edgeBlurAmount" t-on-input="onChangeEdgeBlurAmount"/>
+                                <span class="p-1 w-50 text-end"><t t-out="Math.floor(store.settings.edgeBlurAmount * 5)"/>%</span>
                             </div>
                         </label>
                     </div>

addons/mail/static/src/discuss/call/common/rtc_service.js

@@ -124,6 +124,7 @@ export class Rtc {
         this.pttExtService = services["discuss.ptt_extension"];
         this._handleSfuClientUpdates = this._handleSfuClientUpdates.bind(this);
         this._handleSfuClientStateChange = this._handleSfuClientStateChange.bind(this);
+        this.linkVoiceActivationDebounce = debounce(this.linkVoiceActivation, 500);
         this.state = reactive({
             connectionType: undefined,
             hasPendingRequest: false,
@@ -174,9 +175,9 @@ export class Rtc {
                 this.blurManager.backgroundBlur = this.store.settings.backgroundBlurAmount;
             }
         });
-        onChange(this.store.settings, ["voiceActivationThreshold", "use_push_to_talk"], () =>
-            this.linkVoiceActivation()
-        );
+        onChange(this.store.settings, ["voiceActivationThreshold", "use_push_to_talk"], () => {
+            this.linkVoiceActivationDebounce();
+        });
         onChange(this.store.settings, "audioInputDeviceId", async () => {
             if (this.state.selfSession) {
                 await this.resetAudioTrack({ force: true });
@@ -1581,7 +1582,7 @@ export class Rtc {
             this.updateAndBroadcast({ isSelfMuted: false });
             audioTrack.enabled = !this.state.selfSession.isMute && this.state.selfSession.isTalking;
             this.state.audioTrack = audioTrack;
-            await this.linkVoiceActivation();
+            this.linkVoiceActivationDebounce();
             if (this.sfuClient) {
                 await this.sfuClient.updateUpload("audio", this.state.audioTrack);
                 return;

addons/test_discuss_full/tests/test_performance.py

@@ -221,7 +221,7 @@ def _get_init_messaging_result(self):
                     "push_to_talk_key": False,
                     "use_push_to_talk": False,
                     "user_id": {"id": self.users[0].id},
-                    "voice_active_duration": 0,
+                    "voice_active_duration": 200,
                     "volumes": [["ADD", []]],
                 },
             },