[mirotalksfu] - change icon for extra buttons

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
  *
  */
 

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": {

public/css/Room.css

@@ -209,6 +209,10 @@ body {
     color: red;
 }
 
+#toggleExtraButton {
+    color: #66beff;
+}
+
 /*--------------------------------------------------------------
 # Bottom buttons
 --------------------------------------------------------------*/

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">

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 = {

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>