Merge pull request #772 from webitel/feature/ringtone-volume-control

fix: ringtone volume control added [WTEL-5024]

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',
   },
 

src/app/locale/ru/ru.js

@@ -70,6 +70,9 @@ export default {
       ringtone: 'Рингтон',
       customRingtone: 'Использовать кастомный рингтон',
     },
+    ringtoneVolume: {
+      title: 'Громкость рингтона',
+    },
     callEnd: 'Звук завершения вызова',
   },
 

src/app/locale/ua/ua.js

@@ -70,6 +70,9 @@ export default {
       ringtone: 'Рінгтон',
       customRingtone: 'Використовувати кастомний рінгтон',
     },
+    ringtoneVolume: {
+      title: 'Гучність рінгтону',
+    },
     callEnd: 'Звук завершення дзвінка',
   },
 

src/modules/settings/components/ringtone-volume-control.vue

@@ -0,0 +1,113 @@
+<template>
+  <section class="ringtone-volume-control settings-section-item">
+    <header class="content-header">
+      <h3 class="content-title">
+        {{ $t('settings.ringtoneVolume.title') }}
+      </h3>
+    </header>
+    <form>
+      <div class="ringtone-volume-control__wrapper">
+        <wt-slider
+          :value="ringtoneVolume"
+          :min="0"
+          :max="1"
+          :step="0.01"
+          label="Volume"
+          show-input
+          tooltip="auto"
+          debounce
+          @input="handleRingtoneVolume"
+        />
+        <wt-button
+          :disabled="isRingtoneVolumeSaved"
+          @click.prevent="saveRingtoneVolume"
+        >
+          {{ $t('objects.save') }}
+        </wt-button>
+      </div>
+    </form>
+  </section>
+</template>
+
+<script>
+import debounce from '@webitel/ui-sdk/src/scripts/debounce';
+
+export default {
+  data() {
+    return {
+      ringtoneVolume: 0.5, // Default ringtoneVolume level
+      isRingtoneVolumeSaved: false,
+      audioCtx: null, // Audio context will be created upon user interaction
+    };
+  },
+  methods: {
+    handleRingtoneVolume(newVolume) {
+      this.ringtoneVolume = newVolume;
+      this.debouncedPlayBeep(newVolume); // Debounced beep sound with selected ringtoneVolume
+
+      const savedVolume = localStorage.getItem('settings/ringtone-volume');
+      if (!savedVolume|| parseFloat(savedVolume) !== newVolume) {
+        this.isRingtoneVolumeSaved = false;
+      } else {
+        this.isRingtoneVolumeSaved = true;
+      }
+    },
+    saveRingtoneVolume() {
+      // Save the ringtoneVolume to localStorage
+      localStorage.setItem('settings/ringtone-volume', this.ringtoneVolume);
+      this.isRingtoneVolumeSaved = true;
+    },
+    playSignal(ringtoneVolume) {
+      // Initialize the AudioContext if it hasn't been created yet
+      if (!this.audioCtx) {
+        this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+      }
+
+      const oscillator = this.audioCtx.createOscillator();
+
+      oscillator.frequency.setValueAtTime(440, this.audioCtx.currentTime); // Standard A4 note
+
+      const gainNode = this.audioCtx.createGain();
+      gainNode.gain.value = ringtoneVolume; // Set the ringtoneVolume based on the selected value
+
+      oscillator.connect(gainNode);
+      gainNode.connect(this.audioCtx.destination);
+
+      oscillator.start();
+
+      oscillator.stop(this.audioCtx.currentTime + 0.2);
+    },
+    // Use your custom debounce method
+    debouncedPlayBeep: debounce(function (volume) {
+      this.playSignal(volume);
+    }, {}, 300), // Debounce options and 300ms wait time
+  },
+  mounted() {
+    // Load the saved ringtoneVolume from localStorage if it exists
+    const savedVolume = localStorage.getItem('settings/ringtone-volume');
+    if (savedVolume) {
+      this.ringtoneVolume = parseFloat(savedVolume);
+      this.isRingtoneVolumeSaved = true;
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.ringtone-volume-control {
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+  }
+
+  .content-title {
+    @extend %typo-heading-4;
+  }
+
+  .wt-button {
+    display: block;
+    margin: 0 0 0 auto;
+  }
+}
+</style>

src/modules/settings/components/the-settings.vue

@@ -71,6 +71,7 @@
             </form>
           </section>
           <custom-ringtone />
+          <ringtone-volume-control />
         </div>
       </section>
     </template>
@@ -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: () => ({