chore: rework change of line height on sound

Author: yaroslav8765

custom/speech_recognition_frontend/AudioLines.vue

@@ -1,97 +1,43 @@
-<template> 
-  <div 
-    class=" bg-white w-[0.2rem] rounded-sm transition-all duration-300 ease-in-out"
-    :class="{
-      'recordingAnimation1' : showAnimation,
-      'h-2': !isRecording,
-      'h-1': isRecording,
-    }"  
+<template>
+  <div
+    v-for="(height, index) in lineHeights"
+    :key="index"
+    class="bg-white w-[0.2rem] rounded-sm transition-all duration-100 ease-out"
+    :style="{ height }"
   />
-  <div 
-    class=" bg-white w-[0.2rem] rounded-sm transition-all duration-300 ease-in-out"
-    :class="{
-      'recordingAnimation2' : showAnimation,
-      'h-4': !isRecording,
-      'h-1': isRecording,
-    }"  
-  />
-  <div 
-    class=" bg-white w-[0.2rem] rounded-sm transition-all duration-300 ease-in-out"
-    :class="{
-      'recordingAnimation3' : showAnimation,
-      'h-3': !isRecording,
-      'h-1': isRecording,
-    }"  
-  />
-  <div 
-    class=" bg-white w-[0.2rem] rounded-sm transition-all duration-300 ease-in-out"
-    :class="{
-      'recordingAnimation4' : showAnimation,
-      'h-2': !isRecording,
-      'h-1': isRecording,
-    }"  
-  />
-  <template v-if="isRecording">
-    <div 
-      class=" bg-white w-[0.2rem] rounded-sm h-1 transition-all duration-300 ease-in-out"
-      :class="{
-        'recordingAnimation5' : showAnimation,
-      }"  
-    />
-    <p class="text-white ml-2">End</p>
-  </template>
+  <p v-if="isRecording" class="text-white ml-2">End</p>
 </template>
 
-
-
 <script setup lang="ts">
+import { computed } from 'vue';
+
+const IDLE_LINE_HEIGHTS = [0.5, 1, 0.75, 0.5];
+const RECORDING_LINE_WEIGHTS = [0.45, 1, 0.75, 0.9, 0.55];
+const MIN_RECORDING_HEIGHT = 0.25;
+const MAX_RECORDING_DELTA = 0.9;
 
 const props = defineProps<{
   showAnimation: boolean;
   isRecording: boolean;
+  amplitude: number;
 }>();
 
-</script>
-
-<style scoped lang="scss">
-  .recordingAnimation1 {
-    animation: recordingAnimation 1s infinite;
-    height: 0.3rem;
-  }
-
-  .recordingAnimation2 {
-    animation: recordingAnimation 1s infinite;
-    animation-delay: 0.2s;
-    height: 0.5rem;
+const normalizedAmplitude = computed(() => {
+  if (!props.isRecording || !props.showAnimation) {
+    return 0;
   }
 
-  .recordingAnimation3 {
-    animation: recordingAnimation 1s infinite;
-    animation-delay: 0.4s;
-    height: 0.4rem;
-  }
-  
-  .recordingAnimation4 {
-    animation: recordingAnimation 1s infinite;
-    animation-delay: 0.6s;
-    height: 0.5rem;
-  }
+  return Math.min(Math.max(props.amplitude, 0), 1);
+});
 
-  .recordingAnimation5 {
-    animation: recordingAnimation 1s infinite;
-    animation-delay: 0.8s;
-    height: 0.3rem;
+const lineHeights = computed(() => {
+  if (!props.isRecording) {
+    return IDLE_LINE_HEIGHTS.map((height) => `${height}rem`);
   }
 
-  @keyframes recordingAnimation {
-    0% {
-      transform: scaleY(1);
-    }
-    50% {
-      transform: scaleY(2);
-    }
-    100% {
-      transform: scaleY(1);
-    }
-  }
-</style>
+  return RECORDING_LINE_WEIGHTS.map((weight) => {
+    const height = MIN_RECORDING_HEIGHT + normalizedAmplitude.value * MAX_RECORDING_DELTA * weight;
+    return `${height}rem`;
+  });
+});
+</script>

custom/speech_recognition_frontend/MicrophoneButon.vue

@@ -8,7 +8,11 @@
   >
     <div class="w-5 h-5 flex items-center justify-center">
       <div v-if="microphoneButtonMode === 'listen' || microphoneButtonMode === 'off'" class="flex justify-evenly items-center gap-[0.1rem]">
-        <AudioLines :showAnimation="showAudioWavesAnimation" :isRecording="microphoneButtonMode === 'listen'" />
+        <AudioLines
+          :showAnimation="showAudioWavesAnimation"
+          :isRecording="microphoneButtonMode === 'listen'"
+          :amplitude="audioAmplitude"
+        />
       </div>
       <div v-else-if="microphoneButtonMode === 'generating'" class="flex items-center justify-center gap-2 text-white text-sm">
         <span class="w-3 h-3 bg-white rounded-sm" />
@@ -39,6 +43,7 @@ const { stopCurrentAudioPlayback } = agentAudio;
 const { agentAudioMode } = storeToRefs(agentAudio);
 const microphoneButtonMode = ref<'off' | 'calibrating' | 'listen' | 'transcribing' | 'generating'>('off');
 const showAudioWavesAnimation = ref(false);
+const audioAmplitude = ref(0);
 const hideAnimationDebounced = debounce(() => {
   showAudioWavesAnimation.value = false;
 }, 100);
@@ -101,12 +106,14 @@ async function onStartRecording() {
 function onStopRecording() {
   agentAudio.playBeep(600);
   stopUserMedia();
+  audioAmplitude.value = 0;
   showAudioWavesAnimation.value = false;
 }
 
 function resetAll() {
   stopGenerationAndAudio();
   microphoneButtonMode.value = 'off';
+  audioAmplitude.value = 0;
   showAudioWavesAnimation.value = false;
   hideAnimationDebounced.cancel();
   sendUserRecordDebounced.cancel();
@@ -125,7 +132,10 @@ function stopRecording() {
 }
 
 function onAnySound(amplitude: number) {
+  audioAmplitude.value = Math.min(Math.max(amplitude, 0), 1);
+
   if(amplitude < 0.01) {
+    audioAmplitude.value = 0;
     showAudioWavesAnimation.value = false;
     return;
   }