[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 odoo/odoo#151028

Signed-off-by: Sébastien Theys (seb) <seb@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/user_settings_service.js

@@ -2,6 +2,7 @@
 
 import { browser } from "@web/core/browser/browser";
 import { registry } from "@web/core/registry";
+import { debounce } from "@web/core/utils/timing";
 
 export class UserSettings {
     id;
@@ -13,6 +14,12 @@ export class UserSettings {
     constructor(env, services) {
         this.orm = services.orm;
         this.store = services["mail.store"];
+        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();
@@ -48,7 +55,7 @@ export class UserSettings {
     logRtc = false;
     pushToTalkKey;
     usePushToTalk = false;
-    voiceActiveDuration = 0;
+    voiceActiveDuration = 200;
     useBlur = false;
     volumeSettingsTimeouts = new Map();
     /**
@@ -145,10 +152,7 @@ export class UserSettings {
      */
     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

@@ -40,8 +40,9 @@
                     <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="userSettings.voiceActiveDuration" 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="userSettings.voiceActiveDuration" t-on-input="onChangeDelay"/>
+                                <span class="p-1 w-50 text-end"><t t-out="userSettings.voiceActiveDuration"/>ms</span>
                             </div>
                         </label>
                     </div>
@@ -49,8 +50,9 @@
                 <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="userSettings.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="userSettings.voiceActivationThreshold" t-on-input="onChangeThreshold"/>
+                            <span class="p-1 w-50 text-end"><t t-out="Math.floor(userSettings.voiceActivationThreshold * 100)"/>%</span>
                         </div>
                     </label>
                 </div>
@@ -72,17 +74,19 @@
                 <t t-if="userSettings.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="userSettings.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="userSettings.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="userSettings.backgroundBlurAmount" t-on-input="onChangeBackgroundBlurAmount"/>
+                                <span class="p-1 w-50 text-end"><t t-out="Math.floor(userSettings.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="userSettings.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="userSettings.edgeBlurAmount" t-on-input="onChangeEdgeBlurAmount"/>
+                                <span class="p-1 w-50 text-end"><t t-out="Math.floor(userSettings.edgeBlurAmount * 5)"/>%</span>
                             </div>
                         </label>
                     </div>

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

@@ -125,6 +125,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,
@@ -175,9 +176,9 @@ export class Rtc {
                 this.blurManager.backgroundBlur = this.userSettingsService.backgroundBlurAmount;
             }
         });
-        onChange(this.userSettingsService, ["voiceActivationThreshold", "usePushToTalk"], () =>
-            this.linkVoiceActivation()
-        );
+        onChange(this.userSettingsService, ["voiceActivationThreshold", "usePushToTalk"], () => {
+            this.linkVoiceActivationDebounce();
+        });
         onChange(this.userSettingsService, "audioInputDeviceId", async () => {
             if (this.state.selfSession) {
                 await this.resetAudioTrack({ force: true });
@@ -1582,7 +1583,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

@@ -1140,7 +1140,7 @@ class TestDiscussFullPerformance(HttpCase):
                 'livechat_lang_ids': [],
                 'livechat_username': False,
                 'user_id': {'id': self.users[0].id},
-                'voice_active_duration': 0,
+                'voice_active_duration': 200,
                 'volume_settings_ids': [('ADD', [])],
             },
         }