From 38bbe6ae56e533f4c418d4caa0b9c2b4284e121a Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Sat, 6 Jul 2024 19:29:14 +0200
Subject: [PATCH] [mirotalksfu] - improve VideoAI settings UI

---
 app/src/Server.js       |  2 +-
 package.json            |  2 +-
 public/css/Room.css     | 23 +++++++++++++++--------
 public/js/Room.js       |  4 ++--
 public/js/RoomClient.js |  2 +-
 public/views/Room.html  |  5 ++---
 6 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/app/src/Server.js b/app/src/Server.js
index fde8275a..18e08a1f 100644
--- a/app/src/Server.js
+++ b/app/src/Server.js
@@ -44,7 +44,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.86
+ * @version 1.4.87
  *
  */
 
diff --git a/package.json b/package.json
index b8cbe850..d1713cd3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.4.86",
+    "version": "1.4.87",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {
diff --git a/public/css/Room.css b/public/css/Room.css
index 422828db..d2f70f91 100644
--- a/public/css/Room.css
+++ b/public/css/Room.css
@@ -1421,12 +1421,16 @@ hr {
 --------------------------------------------------------------*/
 
 .avatarsVideoAI {
-    min-height: 480px;
-    max-height: 600px;
-    color: white;
-    overflow: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 10px;
+    width: 100%;
+    /* height: 100%; */
+    color: #ffffff;
     justify-content: center; /* Center horizontally */
     align-items: center; /* Center vertically */
+    overflow: auto;
 }
 
 .container-flex {
@@ -1437,26 +1441,25 @@ hr {
 /* Custom avatar audio UI */
 
 #audio-container {
-    background: var(--select-bg);
+    margin-top: 10px;
     color: #fff;
-    padding: 10px;
     border-radius: 5px;
 }
 
 #audio-container audio {
-    width: 100%;
+    width: 320px;
     outline: none;
 }
 
 #audio-container audio::-webkit-media-controls-panel {
     background: var(--body-bg);
-    border-radius: 5px;
     padding: 5px;
 }
 
 #audio-container audio::-webkit-media-controls-timeline {
     background: var(--body-bg);
     border-radius: 5px;
+    margin: 5px;
 }
 
 /* Styling for the audio volume controls */
@@ -1485,6 +1488,10 @@ hr {
     color: #fff;
 }
 
+#avatarVideoAIStart {
+    margin-bottom: 5px;
+}
+
 /*
 z-index:
     - 1 videoMediaContainer
diff --git a/public/js/Room.js b/public/js/Room.js
index 4ce19475..514b200c 100644
--- a/public/js/Room.js
+++ b/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.86
+ * @version 1.4.87
  *
  */
 
@@ -4092,7 +4092,7 @@ function showAbout() {
         imageUrl: image.about,
         customClass: { image: 'img-about' },
         position: 'center',
-        title: 'WebRTC SFU v1.4.86',
+        title: 'WebRTC SFU v1.4.87',
         html: `
         <br />
         <div id="about">
diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js
index 1274de6f..83ba1c00 100644
--- a/public/js/RoomClient.js
+++ b/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.86
+ * @version 1.4.87
  *
  */
 
diff --git a/public/views/Room.html b/public/views/Room.html
index 5ae94bc0..976b9359 100644
--- a/public/views/Room.html
+++ b/public/views/Room.html
@@ -914,12 +914,11 @@ <h1>Loading</h1>
                                     name="avatarVoiceIDs"
                                     class="form-select text-light bg-dark"
                                 >
-                                    <option value="">Select Avatar Voice</option></select
-                                ><br />
+                                    <option value="">Select Avatar Voice</option>
+                                </select>
                                 <div id="audio-container">
                                     <audio id="avatarPreviewAudio" controls></audio>
                                 </div>
-                                <br />
                                 <button id="avatarVideoAIStart" class="btn-custom">
                                     <i class="fas fa-play"></i> Start Avatar Session
                                 </button>