[mirotalksfu] - improve recording

public/css/Room.css

@@ -347,6 +347,14 @@ body {
     color: white;
 }
 
+#recImage {
+    width: 128px;
+    height: auto;
+    margin-bottom: 10px;
+    margin-top: 5px;
+    cursor: pointer;
+}
+
 /*--------------------------------------------------------------
 # Settings Table
 --------------------------------------------------------------*/

public/js/Room.js

@@ -172,6 +172,7 @@ function initClient() {
         setTippy('switchShare', "Show 'Share Room' popup on join", 'right');
         setTippy('roomId', 'Room name (click to copy)', 'right');
         setTippy('sessionTime', 'Session time', 'right');
+        setTippy('recImage', 'Toggle recording', 'right');
         setTippy('roomRecording', 'Only the host (presenter) has the capability to record the meeting', 'bottom');
         setTippy('whiteboardGhostButton', 'Toggle transparent background', 'bottom');
         setTippy('wbBackgroundColorEl', 'Background color', 'bottom');
@@ -1271,6 +1272,9 @@ function handleButtons() {
     fullScreenButton.onclick = () => {
         rc.toggleFullScreen();
     };
+    recImage.onclick = () => {
+        isRecording ? stopRecButton.click() : startRecButton.click();
+    };
     startRecButton.onclick = () => {
         rc.startRecording();
     };

public/views/Room.html

@@ -583,7 +583,7 @@ access to use this app.
                     </div>
 
                     <div id="tabRecording" class="tabcontent">
-                        <br />
+                        <img id="recImage" src="../images/recording.png" />
                         <div id="roomRecording" class="hidden">
                             <table class="settingsTable">
                                 <tr>