From 92aea0a5455747b856069f9e2526e8dd20347091 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Sat, 2 Nov 2024 20:23:17 +0100
Subject: [PATCH] [mirotalksfu] - change icon for extra buttons

---
 app/src/Server.js       |  2 +-
 package.json            |  2 +-
 public/css/Room.css     |  4 ++++
 public/js/Room.js       | 15 ++++++++++-----
 public/js/RoomClient.js |  2 ++
 public/views/Room.html  |  2 +-
 6 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/app/src/Server.js b/app/src/Server.js
index ce534801..cadeac46 100644
--- a/app/src/Server.js
+++ b/app/src/Server.js
@@ -55,7 +55,7 @@ dev 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.6.16
+ * @version 1.6.17
  *
  */
 
diff --git a/package.json b/package.json
index 1eab2f4c..15502865 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.6.16",
+    "version": "1.6.17",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {
diff --git a/public/css/Room.css b/public/css/Room.css
index 621c0a62..e4ab3dd7 100644
--- a/public/css/Room.css
+++ b/public/css/Room.css
@@ -209,6 +209,10 @@ body {
     color: red;
 }
 
+#toggleExtraButton {
+    color: #66beff;
+}
+
 /*--------------------------------------------------------------
 # Bottom buttons
 --------------------------------------------------------------*/
diff --git a/public/js/Room.js b/public/js/Room.js
index 05f0a978..e265fadf 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.6.16
+ * @version 1.6.17
  *
  */
 
@@ -3216,6 +3216,7 @@ function showButtons() {
         (rc.isMobileDevice && rc.isMySettingsOpen)
     )
         return;
+    toggleExtraButton.innerHTML = icons.down;
     bottomButtons.style.display = 'flex';
     isButtonsVisible = true;
 }
@@ -3223,6 +3224,7 @@ function showButtons() {
 function checkButtonsBar() {
     if (!isButtonsBarOver) {
         control.style.display = 'none';
+        toggleExtraButton.innerHTML = icons.up;
         bottomButtons.style.display = 'none';
         isButtonsVisible = false;
     }
@@ -3232,9 +3234,12 @@ function checkButtonsBar() {
 }
 
 function toggleExtraButtons() {
-    control.style.display === 'none' || control.style.display === ''
-        ? elemDisplay('control', true, 'flex')
-        : elemDisplay('control', false);
+    const isControlHidden = control.style.display === 'none' || control.style.display === '';
+    const displayValue = isControlHidden ? 'flex' : 'none';
+    const iconHtml = isControlHidden ? icons.up : icons.down;
+
+    elemDisplay('control', isControlHidden, displayValue);
+    toggleExtraButton.innerHTML = iconHtml;
     hideClassElements('videoMenuBar');
 }
 
@@ -4555,7 +4560,7 @@ function showAbout() {
         imageUrl: image.about,
         customClass: { image: 'img-about' },
         position: 'center',
-        title: 'WebRTC SFU v1.6.16',
+        title: 'WebRTC SFU v1.6.17',
         html: `
         <br />
         <div id="about">
diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js
index 836bcace..ac8fef35 100644
--- a/public/js/RoomClient.js
+++ b/public/js/RoomClient.js
@@ -73,6 +73,8 @@ const icons = {
     recSync: '<i class="fa-solid fa-cloud-arrow-up"></i>',
     refresh: '<i class="fas fa-rotate"></i>',
     editor: '<i class="fas fa-pen-to-square"></i>',
+    up: '<i class="fas fa-chevron-up"></i>',
+    down: '<i class="fas fa-chevron-down"></i>',
 };
 
 const image = {
diff --git a/public/views/Room.html b/public/views/Room.html
index b9810b8f..e4d9cf17 100644
--- a/public/views/Room.html
+++ b/public/views/Room.html
@@ -200,7 +200,7 @@ access to use this app.
         </div>
 
         <div id="bottomButtons" class="fadein">
-            <button id="toggleExtraButton" class="hidden"><i class="fas fa-bars"></i></button>
+            <button id="toggleExtraButton" class="hidden"><i class="fas fa-chevron-down"></i></button>
             <button id="startAudioButton" class="hidden"><i class="fas fa-microphone-slash"></i></button>
             <button id="stopAudioButton" class="hidden"><i class="fas fa-microphone"></i></button>
             <button id="startVideoButton" class="hidden"><i class="fas fa-video-slash"></i></button>