Better UX by blocking unvalid actions

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
mudler · Jun 7, 2024 · 688262c · 688262c
1 parent 3d6a734
commit 688262c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/core/http/static/talk.js b/core/http/static/talk.js
@@ -49,6 +49,7 @@ function toggleRecording() {
 
 async function startRecording() {
     document.getElementById("recording").style.display = "block";
+    document.getElementById("resetButton").style.display = "none";
     if (!navigator.mediaDevices) {
         alert('MediaDevices API not supported!');
         return;
@@ -71,6 +72,8 @@ function stopRecording() {
     mediaRecorder.stop();
     mediaRecorder.onstop = async () => {
         document.getElementById("recording").style.display = "none";
+        document.getElementById("recordButton").style.display = "none";
+
         document.getElementById("loader").style.display = "block";
         const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
         document.getElementById("statustext").textContent = "Processing audio...";
@@ -90,6 +93,8 @@ function stopRecording() {
         recordButton.classList.remove("bg-gray-500");
         isRecording = false;
         document.getElementById("loader").style.display = "none";
+        document.getElementById("recordButton").style.display = "block";
+        document.getElementById("resetButton").style.display = "block";
         document.getElementById("statustext").textContent = "Press the record button to start recording.";
     };
 }

diff --git a/core/http/views/talk.html b/core/http/views/talk.html
@@ -93,7 +93,7 @@
 
       <button id="recordButton"
         class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
-      ><i class="fa-solid fa-microphone pr-2"></i>Record</button>
+      ><i class="fa-solid fa-microphone pr-2"></i>Talk</button>
       <a id="resetButton"
       class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800"
       href="#"