[mirotalksfu] - improvements, update dep

app/src/Server.js

@@ -42,7 +42,7 @@ dependencies: {
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.4.41
+ * @version 1.4.42
  *
  */
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.4.41",
+    "version": "1.4.42",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {
@@ -67,7 +67,7 @@
     },
     "devDependencies": {
         "node-fetch": "^3.3.2",
-        "nodemon": "^3.1.1",
+        "nodemon": "^3.1.2",
         "prettier": "3.2.5"
     }
 }

public/css/Room.css

@@ -1333,6 +1333,11 @@ hr {
     align-items: center; /* Center vertically */
 }
 
+.container-flex {
+    display: flex;
+    flex-direction: column;
+}
+
 /* Custom avatar audio UI */
 
 #audio-container {

public/js/Room.js

@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.4.41
+ * @version 1.4.42
  *
  */
 
@@ -1460,6 +1460,9 @@ function handleButtons() {
         showFreeAvatars = e.currentTarget.checked;
         rc.getAvatarList();
     };
+    avatarQuality.onchange = (e) => {
+        VideoAI.quality = e.target.value;
+    };
     refreshVideoDevices.onclick = async () => {
         await refreshMyVideoDevices();
         userLog('info', 'Refreshed video devices', 'top-end');

public/js/RoomClient.js

@@ -9,7 +9,7 @@
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.4.41
+ * @version 1.4.42
  *
  */
 
@@ -3852,11 +3852,13 @@ class RoomClient {
             ? `<span class="message-data-time">${time}, ${getFromName} ( me ) </span>`
             : `<span class="message-data-time">${time}, ${getFromName} </span>`;
 
+        const formatMessage = this.formatMsg(getMsg);
+        console.log('FormatMessage', formatMessage);
         const speechButton = this.isSpeechSynthesisSupported
             ? `<button 
                     id="msg-speech-${chatMessagesId}" 
                     class="mr5" 
-                    onclick="rc.speechMessage(false, '${getFromName}', '${this.formatMsg(getMsg)}')">
+                    onclick="rc.speechText('${formatMessage}')">
                     <i class="fas fa-volume-high"></i>
                 </button>`
             : '';
@@ -4097,10 +4099,14 @@ class RoomClient {
     }
 
     speechText(msg) {
-        const speech = new SpeechSynthesisUtterance();
+        if (VideoAI.active) {
-        speech.text = msg;
+            this.streamingTask(msg);
-        speech.rate = 0.9;
+        } else {
-        window.speechSynthesis.speak(speech);
+            const speech = new SpeechSynthesisUtterance();
+            speech.text = msg;
+            speech.rate = 0.9;
+            window.speechSynthesis.speak(speech);
+        }
     }
 
     chatToggleBg() {

public/views/Room.html

@@ -884,6 +884,7 @@ access to use this app.
                     <div id="tabVideoAI" class="tabcontent">
                         <div class="avatarsVideoAI">
                             <video id="avatarVideoAIPreview" src="" controls="yes"></video>
+                            <hr />
                             <table class="settingsTable">
                                 <tr id="avatars">
                                     <td class=".width-180">
@@ -904,19 +905,29 @@ access to use this app.
                                     </td>
                                 </tr>
                             </table>
-                            <div id="avatarVideoAIcontainer"></div>
+                            <hr />
-                            <div>
+                            <div class="container-flex">
-                                <select id="avatarVoiceIDs" name="avatarVoiceIDs">
+                                <div id="avatarVideoAIcontainer"></div>
+                                <select id="avatarQuality" class="form-select text-light bg-dark">
+                                    <option value="low">Avatar Quality - Low</option>
+                                    <option value="medium" selected>Avatar Quality - Medium</option>
+                                    <option value="hight">Avatar Quality - Hight</option>
+                                </select>
+                                <select
+                                    id="avatarVoiceIDs"
+                                    name="avatarVoiceIDs"
+                                    class="form-select text-light bg-dark"
+                                >
                                     <option value="">Select Avatar Voice</option></select
-                                ><br /><br />
+                                ><br />
                                 <div id="audio-container">
                                     <audio id="avatarPreviewAudio" controls></audio>
                                 </div>
+                                <br />
+                                <button id="avatarVideoAIStart" class="btn-primary">
+                                    <i class="fas fa-play"></i> Start Avatar Session
+                                </button>
                             </div>
-                            <br />
-                            <button id="avatarVideoAIStart" class="btn-primary">
-                                <i class="fas fa-play"></i> Start Video Avatar Session
-                            </button>
                         </div>
                     </div>