[mirotalksfu] - popup recording info

public/js/Room.js

@@ -1421,6 +1421,7 @@ function handleRoomClientEvents() {
         hide(startRecButton);
         show(stopRecButton);
         show(pauseRecButton);
+        show(recordingTime);
         startRecordingTimer();
     });
     rc.on(RoomClient.EVENTS.pauseRec, () => {
@@ -1438,6 +1439,7 @@ function handleRoomClientEvents() {
         hide(stopRecButton);
         hide(pauseRecButton);
         hide(resumeRecButton);
+        hide(recordingTime);
         show(startRecButton);
         stopRecordingTimer();
     });
@@ -1698,6 +1700,10 @@ function isImageURL(url) {
     return url.match(/\.(jpeg|jpg|gif|png|tiff|bmp)$/) != null;
 }
 
+function isMobile(userAgent) {
+    return !!/Android|webOS|iPhone|iPad|iPod|BB10|BlackBerry|IEMobile|Opera Mini|Mobile|mobile/i.test(userAgent || '');
+}
+
 function isTablet(userAgent) {
     return /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(
         userAgent,
@@ -1712,6 +1718,13 @@ function openURL(url, blank = false) {
     blank ? window.open(url, '_blank') : (window.location.href = url);
 }
 
+function bytesToSize(bytes) {
+    let sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    if (bytes == 0) return '0 Byte';
+    let i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+    return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
+}
+
 function setCookie(name, value, expDays) {
     let date = new Date();
     date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);

public/js/RoomClient.js

@@ -3235,6 +3235,29 @@ class RoomClient {
             const type = recordedBlobs[0].type.includes('mp4') ? 'mp4' : 'webm';
             const blob = new Blob(recordedBlobs, { type: 'video/' + type });
             const recFileName = `${dateTime}-REC.${type}`;
+            const currentDevice = DetectRTC.isMobileDevice ? 'MOBILE' : 'PC';
+            const blobFileSize = bytesToSize(blob.size);
+            const recTime = document.getElementById('recordingStatus').innerText;
+
+            Swal.fire({
+                background: swalBackground,
+                position: 'center',
+                icon: 'success',
+                title: 'Recording',
+                html: `
+                <div style="text-align: left;">
+                    🔴 &nbsp; Recording Info: <br/><br/>
+                    <ul>
+                        <li>Time: ${recTime}</li>
+                        <li>File: ${recFileName}</li>
+                        <li>Size: ${blobFileSize}</li>
+                    </ul>
+                    <br/>
+                    Please wait to be processed, then will be downloaded to your ${currentDevice} device.
+                </div>`,
+                showClass: { popup: 'animate__animated animate__fadeInDown' },
+                hideClass: { popup: 'animate__animated animate__fadeOutUp' },
+            });
 
             console.log('MediaRecorder Download Blobs');
             const url = window.URL.createObjectURL(blob);

public/views/Room.html

@@ -266,13 +266,15 @@ access to use this app.
                         <i class="far fa-play-circle"></i>
                         <p>Resume recording</p>
                     </button>
-                    <hr style="border: 1px solid grey" />
-                    <table class="settingsTable">
-                        <tr>
-                            <td><i style="color: red" class="fa-solid fa-circle"></i>&nbsp;&nbsp;REC time:</td>
-                            <td id="recordingStatus">0s</td>
-                        </tr>
-                    </table>
+                    <div id="recordingTime" class="hidden">
+                        <hr style="border: 1px solid grey" />
+                        <table class="settingsTable">
+                            <tr>
+                                <td><i style="color: red" class="fa-solid fa-circle"></i>&nbsp;&nbsp;REC time:</td>
+                                <td id="recordingStatus">0s</td>
+                            </tr>
+                        </table>
+                    </div>
                 </div>
 
                 <div id="tabVideoShare" class="tabcontent">