From 66f13043601b71ac080094376dc86bc5e05a2c6c Mon Sep 17 00:00:00 2001 From: volodymyr Date: Mon, 16 Sep 2024 14:51:13 +0300 Subject: [PATCH 1/3] fix: ringtone volume control added [WTEL-5024] --- src/app/locale/en/en.js | 3 + src/app/locale/ru/ru.js | 3 + src/app/locale/ua/ua.js | 3 + .../components/ringtone-volume-control.vue | 119 ++++++++++++++++++ .../settings/components/the-settings.vue | 3 + 5 files changed, 131 insertions(+) create mode 100644 src/modules/settings/components/ringtone-volume-control.vue diff --git a/src/app/locale/en/en.js b/src/app/locale/en/en.js index 6ed391734..adc52695e 100644 --- a/src/app/locale/en/en.js +++ b/src/app/locale/en/en.js @@ -70,6 +70,9 @@ export default { ringtone: 'Ringtone', customRingtone: 'Use the custom ringtone', }, + ringtoneVolume: { + title: 'Ringtone volume', + }, callEnd: 'Call end sound', }, diff --git a/src/app/locale/ru/ru.js b/src/app/locale/ru/ru.js index 96ea3343b..fae81a5c2 100644 --- a/src/app/locale/ru/ru.js +++ b/src/app/locale/ru/ru.js @@ -70,6 +70,9 @@ export default { ringtone: 'Рингтон', customRingtone: 'Использовать кастомный рингтон', }, + ringtoneVolume: { + title: 'Громкость рингтона', + }, callEnd: 'Звук завершения вызова', }, diff --git a/src/app/locale/ua/ua.js b/src/app/locale/ua/ua.js index a96a8eacc..4e8a11543 100644 --- a/src/app/locale/ua/ua.js +++ b/src/app/locale/ua/ua.js @@ -70,6 +70,9 @@ export default { ringtone: 'Рінгтон', customRingtone: 'Використовувати кастомний рінгтон', }, + ringtoneVolume: { + title: 'Гучність рінгтону', + }, callEnd: 'Звук завершення дзвінка', }, diff --git a/src/modules/settings/components/ringtone-volume-control.vue b/src/modules/settings/components/ringtone-volume-control.vue new file mode 100644 index 000000000..f277b591a --- /dev/null +++ b/src/modules/settings/components/ringtone-volume-control.vue @@ -0,0 +1,119 @@ + + + + + diff --git a/src/modules/settings/components/the-settings.vue b/src/modules/settings/components/the-settings.vue index 184d2ec63..e1e0eb47c 100644 --- a/src/modules/settings/components/the-settings.vue +++ b/src/modules/settings/components/the-settings.vue @@ -71,6 +71,7 @@ + @@ -83,12 +84,14 @@ import { mapState } from 'vuex'; import { changeWebPhone, getWebPhone } from '../api/settings'; import ChangePassword from './change-password.vue'; import CustomRingtone from './custom-ringtone.vue'; +import RingtoneVolumeControl from './ringtone-volume-control.vue'; export default { name: 'TheSettings', components: { CustomRingtone, ChangePassword, + RingtoneVolumeControl, }, inject: ['$eventBus'], data: () => ({ From 26b3c7c6311f764a4e8a23aafcc1ca94b20366c8 Mon Sep 17 00:00:00 2001 From: volodymyr Date: Mon, 16 Sep 2024 15:00:06 +0300 Subject: [PATCH 2/3] refactor: ringtone volume control naming refactored [WTEL-5024] --- .../components/ringtone-volume-control.vue | 48 ++++++++----------- 1 file changed, 21 insertions(+), 27 deletions(-) diff --git a/src/modules/settings/components/ringtone-volume-control.vue b/src/modules/settings/components/ringtone-volume-control.vue index f277b591a..be67ea4ee 100644 --- a/src/modules/settings/components/ringtone-volume-control.vue +++ b/src/modules/settings/components/ringtone-volume-control.vue @@ -8,7 +8,7 @@
{{ $t('objects.save') }} @@ -35,65 +35,59 @@ import debounce from '@webitel/ui-sdk/src/scripts/debounce'; export default { data() { return { - volume: 0.5, // Default volume level - isVolumeSaved: false, + ringtoneVolume: 0.5, // Default ringtoneVolume level + isRingtoneVolumeSaved: false, audioCtx: null, // Audio context will be created upon user interaction }; }, methods: { - handleVolumeChange(newVolume) { - this.volume = newVolume; - this.debouncedPlayBeep(newVolume); // Debounced beep sound with selected volume + handleRingtoneVolumeChange(newVolume) { + this.ringtoneVolume = newVolume; + this.debouncedPlayBeep(newVolume); // Debounced beep sound with selected ringtoneVolume const savedVolume = localStorage.getItem('settings/ringtone-volume'); if (savedVolume === null || parseFloat(savedVolume) !== newVolume) { - this.isVolumeSaved = false; + this.isRingtoneVolumeSaved = false; } else { - this.isVolumeSaved = true; + this.isRingtoneVolumeSaved = true; } }, - saveVolume() { - // Save the volume to localStorage - localStorage.setItem('settings/ringtone-volume', this.volume); - this.isVolumeSaved = true; + saveRingtoneVolume() { + // Save the ringtoneVolume to localStorage + localStorage.setItem('settings/ringtone-volume', this.ringtoneVolume); + this.isRingtoneVolumeSaved = true; }, - playBeep(volume) { + playBeep(ringtoneVolume) { // Initialize the AudioContext if it hasn't been created yet if (!this.audioCtx) { this.audioCtx = new (window.AudioContext || window.webkitAudioContext)(); } - // Create an oscillator node const oscillator = this.audioCtx.createOscillator(); - // Set the oscillator frequency (Hz) oscillator.frequency.setValueAtTime(440, this.audioCtx.currentTime); // Standard A4 note - // Create a gain node to control the volume const gainNode = this.audioCtx.createGain(); - gainNode.gain.value = volume; // Set the volume based on the selected value + gainNode.gain.value = ringtoneVolume; // Set the ringtoneVolume based on the selected value - // Connect the oscillator to the gain node, then to the audio context's destination (speakers) oscillator.connect(gainNode); gainNode.connect(this.audioCtx.destination); - // Start the oscillator oscillator.start(); - // Stop the oscillator after a short duration (e.g., 200 ms for a beep sound) oscillator.stop(this.audioCtx.currentTime + 0.2); }, // Use your custom debounce method debouncedPlayBeep: debounce(function (volume) { this.playBeep(volume); - }, { leading: false, trailing: true }, 300), // Debounce options and 300ms wait time + }, {}, 300), // Debounce options and 300ms wait time }, mounted() { - // Load the saved volume from localStorage if it exists + // Load the saved ringtoneVolume from localStorage if it exists const savedVolume = localStorage.getItem('settings/ringtone-volume'); if (savedVolume !== null) { - this.volume = parseFloat(savedVolume); - this.isVolumeSaved = true; + this.ringtoneVolume = parseFloat(savedVolume); + this.isRingtoneVolumeSaved = true; } }, }; From 516d4c1805e7e9f4f62c65f0d1c5e07aaf6e876d Mon Sep 17 00:00:00 2001 From: volodymyr Date: Mon, 16 Sep 2024 15:23:37 +0300 Subject: [PATCH 3/3] refactor: refactor due to code review [WTEL-5024] --- .../components/ringtone-volume-control.vue | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/modules/settings/components/ringtone-volume-control.vue b/src/modules/settings/components/ringtone-volume-control.vue index be67ea4ee..91ffcc153 100644 --- a/src/modules/settings/components/ringtone-volume-control.vue +++ b/src/modules/settings/components/ringtone-volume-control.vue @@ -1,12 +1,12 @@