[mirotalk] - improve file transfer & UI

public/css/client.css

@@ -1148,16 +1148,11 @@ video:fullscreen {
 # Send File
 --------------------------------------------------------------*/
 
-#sendFileDiv {
+#sendFileDiv,
+#receiveFileDiv {
     z-index: 17;
     display: none;
     min-width: 320px;
-    /* center */
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    /* gui */
     background-color: rgba(0, 0, 0, 0.7);
     border-radius: 5px;
     margin: auto;
@@ -1165,20 +1160,11 @@ video:fullscreen {
     padding: 10px;
     color: white;
     font-size: 1rem;
-    /* fade in */
-    -webkit-animation: fadeIn ease-in 1;
-    -moz-animation: fadeIn ease-in 1;
-    animation: fadeIn ease-in 1;
-    -webkit-animation-fill-mode: forwards;
-    -moz-animation-fill-mode: forwards;
-    animation-fill-mode: forwards;
-    -webkit-animation-duration: 1s;
-    -moz-animation-duration: 1s;
-    animation-duration: 1s;
     overflow: hidden;
 }
 
-#sendAbortBtn {
+#sendAbortBtn,
+#receiveHideBtn {
     padding: 5px;
     border-radius: 5px;
     font-size: 1rem;
@@ -1187,7 +1173,8 @@ video:fullscreen {
     transition: background 0.23s;
 }
 
-#sendAbortBtn:hover {
+#sendAbortBtn:hover,
+#receiveHideBtn:hover {
     color: rgb(255, 0, 0);
     transform: var(--btns-hover-scale);
     transition: all 0.3s ease-in-out;
@@ -1198,7 +1185,8 @@ progress {
     min-width: 100%;
 }
 
-#imgShare:hover {
+#imgShareSend:hover,
+#imgShareReceive:hover {
     cursor: move;
 }
 
@@ -1362,6 +1350,13 @@ progress {
     transform: translate(-50%, -50%);
 }
 
+.center-img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 50%;
+}
+
 .fadein {
     -webkit-animation: fadeIn ease-in 1;
     -moz-animation: fadeIn ease-in 1;

public/js/client.js

@@ -246,11 +246,19 @@ let receiveBuffer = [];
 let receivedSize = 0;
 let incomingFileInfo;
 let incomingFileData;
+// send form
 let sendFileDiv;
 let sendFileInfo;
 let sendProgress;
 let sendAbortBtn;
 let sendInProgress = false;
+// receive form
+let receiveFileDiv;
+let receiveFileInfo;
+let receiveProgress;
+let receiveHideBtn;
+let receiveFilePercentage;
+let receiveInProgress = false;
 // MTU 1kb to prevent drop.
 // const chunkSize = 1024;
 const chunkSize = 1024 * 16; // 16kb/s
@@ -367,6 +375,12 @@ function getHtmlElementsById() {
     sendFileInfo = getId('sendFileInfo');
     sendProgress = getId('sendProgress');
     sendAbortBtn = getId('sendAbortBtn');
+    // file receive progress
+    receiveFileDiv = getId('receiveFileDiv');
+    receiveFileInfo = getId('receiveFileInfo');
+    receiveProgress = getId('receiveProgress');
+    receiveHideBtn = getId('receiveHideBtn');
+    receiveFilePercentage = getId('receiveFilePercentage');
     // video url player
     videoUrlCont = getId('videoUrlCont');
     videoUrlHeader = getId('videoUrlHeader');
@@ -436,8 +450,9 @@ function setButtonsToolTip() {
     // room actions btn
     setTippy(muteEveryoneBtn, 'MUTE everyone except yourself', 'top');
     setTippy(hideEveryoneBtn, 'HIDE everyone except yourself', 'top');
-    // Suspend File transfer btn
+    // Suspend/Hide File transfer btn
     setTippy(sendAbortBtn, 'ABORT file transfer', 'right-start');
+    setTippy(receiveHideBtn, 'HIDE file transfer', 'right-start');
     // video URL player
     setTippy(videoUrlCloseBtn, 'Close the videoPlayer');
     setTippy(msgerVideoUrlBtn, 'Share YouTube video to all participants');
@@ -1923,7 +1938,11 @@ function setChatRoomBtn() {
 
     // clean chat messages
     msgerClean.addEventListener('click', (e) => {
-        cleanMessages();
+        if (chatMessages.length != 0) {
+            cleanMessages();
+            return;
+        }
+        userLog('info', 'No chat messages to delete');
     });
 
     // save chat messages to file
@@ -2000,7 +2019,11 @@ function setCaptionRoomBtn() {
 
         // clean caption transcripts
         captionClean.addEventListener('click', (e) => {
-            cleanCaptions();
+            if (transcripts.length != 0) {
+                cleanCaptions();
+                return;
+            }
+            userLog('info', 'No captions to delete');
         });
 
         // save caption transcripts to file
@@ -2134,8 +2157,11 @@ function setMyWhiteboardBtn() {
  * File Transfer button event click
  */
 function setMyFileShareBtn() {
-    // make send file div draggable
-    if (!isMobileDevice) dragElement(getId('sendFileDiv'), getId('imgShare'));
+    // make send-receive file div draggable
+    if (!isMobileDevice) {
+        dragElement(getId('sendFileDiv'), getId('imgShareSend'));
+        dragElement(getId('receiveFileDiv'), getId('imgShareReceive'));
+    }
 
     fileShareBtn.addEventListener('click', (e) => {
         //window.open("https://fromsmash.com"); // for Big Data
@@ -2144,6 +2170,9 @@ function setMyFileShareBtn() {
     sendAbortBtn.addEventListener('click', (e) => {
         abortFileTransfer();
     });
+    receiveHideBtn.addEventListener('click', (e) => {
+        hideFileTransfer();
+    });
 }
 
 /**
@@ -4657,13 +4686,14 @@ function createFileSharingDataChannel(peer_id) {
  * @param {*} data
  */
 function handleDataChannelFileSharing(data) {
+    if (!receiveInProgress) return;
     receiveBuffer.push(data);
     receivedSize += data.byteLength;
-
-    // let getPercentage = ((receivedSize / incomingFileInfo.fileSize) * 100).toFixed(2);
-    // console.log("Received progress: " + getPercentage + "%");
-
+    receiveProgress.value = receivedSize;
+    receiveFilePercentage.innerHTML =
+        'Receive progress: ' + ((receivedSize / incomingFileInfo.fileSize) * 100).toFixed(2) + '%';
     if (receivedSize === incomingFileInfo.fileSize) {
+        receiveFileDiv.style.display = 'none';
         incomingFileData = receiveBuffer;
         receiveBuffer = [];
         endDownload();
@@ -4756,10 +4786,19 @@ function handleFileAbort() {
     receiveBuffer = [];
     incomingFileData = [];
     receivedSize = 0;
+    receiveInProgress = false;
+    receiveFileDiv.style.display = 'none';
     console.log('File transfer aborted');
     userLog('toast', '⚠️ File transfer aborted');
 }
 
+/**
+ * Hide incoming file transfer
+ */
+function hideFileTransfer() {
+    receiveFileDiv.style.display = 'none';
+}
+
 /**
  * Select the File to Share
  */
@@ -4829,16 +4868,20 @@ function handleFileInfo(config) {
     let fileToReceiveInfo =
         ' From: ' +
         incomingFileInfo.peerName +
-        '\n' +
-        ' incoming file: ' +
+        '<br />' +
+        ' Incoming file: ' +
         incomingFileInfo.fileName +
-        '\n' +
-        ' size: ' +
+        '<br />' +
+        ' File size: ' +
         bytesToSize(incomingFileInfo.fileSize) +
-        '\n' +
-        ' type: ' +
+        '<br />' +
+        ' File type: ' +
         incomingFileInfo.fileType;
     console.log(fileToReceiveInfo);
+    receiveFileInfo.innerHTML = fileToReceiveInfo;
+    receiveFileDiv.style.display = 'inline';
+    receiveProgress.max = incomingFileInfo.fileSize;
+    receiveInProgress = true;
     userLog('toast', fileToReceiveInfo);
 }
 

public/view/client.html

@@ -341,16 +341,28 @@ access to use this app.
 
         <!-- Start File Send -->
 
-        <div id="sendFileDiv">
-            <img id="imgShare" src="../images/share.png" alt="mirotalk-share" class="center" /><br />
+        <div id="sendFileDiv" class="center fadein">
+            <img id="imgShareSend" src="../images/share.png" alt="mirotalk-share-send" class="center-img" /><br />
             <div id="sendFileInfo"></div>
             <div id="sendFilePercentage"></div>
             <progress id="sendProgress" max="0" value="0"></progress>
-            <button id="sendAbortBtn" class="fas fa-stop-circle">&nbsp;Abort</button>
+            <button id="sendAbortBtn" class="fas fa-stop-circle">&nbsp; Abort</button>
         </div>
 
         <!-- End File Send -->
 
+        <!-- Start File Receive -->
+
+        <div id="receiveFileDiv" class="center fadein">
+            <img id="imgShareReceive" src="../images/share.png" alt="mirotalk-share-receive" class="center-img" /><br />
+            <div id="receiveFileInfo"></div>
+            <div id="receiveFilePercentage"></div>
+            <progress id="receiveProgress" max="0" value="0"></progress>
+            <button id="receiveHideBtn" class="fas fa-eye-slash">&nbsp; Hide</button>
+        </div>
+
+        <!-- Stop File Receive -->
+
         <!-- Start video URL iframe -->
 
         <div id="videoUrlCont">