From fb0839172e99e542dda8340852453a5f8d8db804 Mon Sep 17 00:00:00 2001
From: YannAhlgrim <yann@ahlgrim.net>
Date: Thu, 9 Oct 2025 09:49:59 +0200
Subject: [PATCH] audioblob fix

---
 frontend/pages/index.js           | 10 ++++------
 frontend/services/audioService.js |  9 ++++-----
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/frontend/pages/index.js b/frontend/pages/index.js
index 56fc1b8..14b3f00 100644
--- a/frontend/pages/index.js
+++ b/frontend/pages/index.js
@@ -14,7 +14,9 @@ export default function Home() {
   }
 
   function handleStopRecording() {
-    stopRecording(mediaRecorderRef, setRecording)
+    // Immediately stop the recording animation
+    setRecording(false)
+    stopRecording(mediaRecorderRef)
   }
 
   async function handleSendAudio(blob) {
@@ -45,10 +47,6 @@ export default function Home() {
           <h1 className="text-5xl font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent mb-4">
             🎤 Voice Assistant
           </h1>
-          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
-            Experience the future of voice interaction. Press and hold to record your voice,
-            or simply click to toggle recording mode.
-          </p>
         </div>
 
         {/* Main Interface */}
@@ -68,9 +66,9 @@ export default function Home() {
               <button
                 onMouseDown={handleStartRecording}
                 onMouseUp={handleStopRecording}
+                onMouseLeave={handleStopRecording}
                 onTouchStart={handleStartRecording}
                 onTouchEnd={handleStopRecording}
-                onClick={() => (recording ? handleStopRecording() : handleStartRecording())}
                 disabled={isProcessing}
                 className={`record-button w-40 h-40 rounded-full border-none text-white text-lg font-semibold
                   ${recording
diff --git a/frontend/services/audioService.js b/frontend/services/audioService.js
index 5bebfba..71304de 100644
--- a/frontend/services/audioService.js
+++ b/frontend/services/audioService.js
@@ -31,10 +31,9 @@ export async function startRecording(mediaRecorderRef, audioChunksRef, setRecord
   }
 }
 
-export function stopRecording(mediaRecorderRef, setRecording) {
+export function stopRecording(mediaRecorderRef) {
   if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
     mediaRecorderRef.current.stop()
-    setRecording(false)
     return true
   }
   return false
@@ -59,10 +58,10 @@ export async function sendAudioToBackend(audioBlob) {
     }
 
     console.log('Converting response to blob...')
-    const audioBlob = await res.blob()
-    console.log('Audio blob created, size:', audioBlob.size)
+    const responseBlob = await res.blob()
+    console.log('Audio blob created, size:', responseBlob.size)
 
-    return audioBlob
+    return responseBlob
   } catch (error) {
     console.error('Error in sendAudioToBackend:', error)
     throw error