[mirotalksfu] - fix toggleExtraButtons

public/css/Room.css

@@ -163,7 +163,7 @@ body {
 #control {
     z-index: 3;
     position: absolute;
-    display: flex;
+    display: none;
     padding: 5px;
 
     top: var(--btns-top);

public/js/Room.js

@@ -1809,12 +1809,14 @@ function handleButtons() {
     lowerHandButton.onclick = () => {
         rc.updatePeerInfo(peer_name, socket.id, 'hand', false);
     };
-    toggleExtraButton.onclick = async () => {
+    toggleExtraButton.onclick = () => {
         toggleExtraButtons();
     };
     toggleExtraButton.onmouseover = () => {
-        show(control);
+        if (DetectRTC.isMobileDevice) return;
-        hideClassElements('videoMenuBar');
+        if (control.style.display === 'none') {
+            toggleExtraButtons();
+        }
     };
     startAudioButton.onclick = async () => {
         const moderator = rc.getModerator();
@@ -3213,8 +3215,7 @@ function showButtons() {
 
 function checkButtonsBar() {
     if (!isButtonsBarOver) {
-        // hideClassElements('videoMenuBar');
+        control.style.display = 'none';
-        hide(control);
         bottomButtons.style.display = 'none';
         isButtonsVisible = false;
     }
@@ -3223,6 +3224,13 @@ function checkButtonsBar() {
     }, 10000);
 }
 
+function toggleExtraButtons() {
+    control.style.display === 'none' || control.style.display === ''
+        ? elemDisplay('control', true, 'flex')
+        : elemDisplay('control', false);
+    hideClassElements('videoMenuBar');
+}
+
 function hideClassElements(className) {
     const elements = rc.getEcN(className);
     for (let i = 0; i < elements.length; i++) {
@@ -3238,11 +3246,6 @@ function setCamerasBorderNone() {
     }
 }
 
-function toggleExtraButtons() {
-    control.classList.contains('hidden') ? show(control) : hide(control);
-    hideClassElements('videoMenuBar');
-}
-
 // https://animate.style
 
 function animateCSS(element, animation, prefix = 'animate__') {

public/views/Room.html

@@ -182,7 +182,7 @@ access to use this app.
             <div id="usernameEmoji" class="usernameEmoji fadein center hidden"></div>
         </section>
 
-        <div id="control" class="fadein hidden">
+        <div id="control" class="fadein">
             <button id="shareButton" class="hidden"><i class="fas fa-share-alt"></i></button>
             <button id="startRecButton" class="hidden"><i class="fas fa-record-vinyl"></i></button>
             <button id="stopRecButton" class="hidden"><i class="fas fa-record-vinyl cr"></i></button>