From 04d1c7e20c2e33c05029e8a551d08fd8475b1366 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Sun, 28 Aug 2022 11:22:17 +0200
Subject: [PATCH] [mirotalk] - UI

---
 public/js/client.js            | 2 ++
 public/js/speechRecognition.js | 2 ++
 public/views/client.html       | 2 +-
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/public/js/client.js b/public/js/client.js
index 6154e70e..d5cdb260 100644
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -331,6 +331,7 @@ let videoAudioCloseBtn;
 let videoUrlIframe;
 let videoAudioUrlElement;
 // speech recognition
+let speechRecognitionIcon;
 let speechRecognitionStart;
 let speechRecognitionStop;
 
@@ -461,6 +462,7 @@ function getHtmlElementsById() {
     videoUrlIframe = getId('videoUrlIframe');
     videoAudioUrlElement = getId('videoAudioUrlElement');
     // speech recognition
+    speechRecognitionIcon = getId('speechRecognitionIcon');
     speechRecognitionStart = getId('speechRecognitionStart');
     speechRecognitionStop = getId('speechRecognitionStop');
 }
diff --git a/public/js/speechRecognition.js b/public/js/speechRecognition.js
index 8be714cf..09e02f5d 100644
--- a/public/js/speechRecognition.js
+++ b/public/js/speechRecognition.js
@@ -91,6 +91,7 @@ if (speechRecognition) {
         console.log('Start speech recognition');
         speechRecognitionStart.style.display = 'none';
         speechRecognitionStop.style.display = 'block';
+        setColor(speechRecognitionIcon, 'lime');
     };
 
     // Detect the said words
@@ -119,6 +120,7 @@ if (speechRecognition) {
         // if (recognitionRunning) recognition.start();
         speechRecognitionStop.style.display = 'none';
         speechRecognitionStart.style.display = 'block';
+        setColor(speechRecognitionIcon, 'white');
     };
 
     isWebkitSpeechRecognitionSupported = true;
diff --git a/public/views/client.html b/public/views/client.html
index 826cd02e..b7741f83 100755
--- a/public/views/client.html
+++ b/public/views/client.html
@@ -192,7 +192,7 @@ access to use this app.
 
                 <main id="captionChat" class="msger-chat"></main>
                 <div class="msger-inputarea">
-                    <button id="speechRecognitionIcon"><i class="fas fa-microphone-alt"></i></button>
+                    <button id="speechRecognitionIcon" class="fas fa-microphone-alt"></button>
                     <select id="recognitionLanguage"></select>
                     <select id="recognitionDialect"></select>
                     <button type="button" id="speechRecognitionStart"><i class="fas fa-play"></i>&nbsp;Start</button>