[mirotalksfu] - improve file transfer UI

public/css/Room.css

@@ -524,6 +524,13 @@ emoji-picker {
     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;
@@ -626,14 +633,16 @@ button:hover {
     overflow: hidden;
 }
 
-#sendAbortBtn {
+#sendAbortBtn,
+#receiveHideBtn {
     padding: 5px;
     border-radius: 5px;
     color: white;
     background: transparent;
 }
 
-#sendAbortBtn:hover {
+#sendAbortBtn:hover,
+#receiveHideBtn:hover {
     color: rgb(255, 0, 0);
     transform: var(--btns-hover-scale);
     transition: all 0.3s ease-in-out;
@@ -644,6 +653,11 @@ progress {
     min-width: 100%;
 }
 
+#imgShareSend:hover,
+#imgShareReceive:hover {
+    cursor: move;
+}
+
 /*--------------------------------------------------------------
 # Whiteboard
 --------------------------------------------------------------*/

public/js/Room.js

@@ -481,6 +481,8 @@ function roomIsReady() {
         rc.makeDraggable(mySettings, mySettingsHeader);
         rc.makeDraggable(participants, participantsHeader);
         rc.makeDraggable(whiteboard, whiteboardHeader);
+        rc.makeDraggable(sendFileDiv, imgShareSend);
+        rc.makeDraggable(receiveFileDiv, imgShareReceive);
         if (navigator.getDisplayMedia || navigator.mediaDevices.getDisplayMedia) {
             show(startScreenButton);
         }

public/js/RoomClient.js

@@ -25,6 +25,7 @@ const image = {
     user: '../images/participant.png',
     youtube: '../images/youtube.png',
     message: '../images/message.png',
+    share: '../images/share.png',
 };
 
 const mediaType = {
@@ -1778,6 +1779,8 @@ class RoomClient {
         Swal.fire({
             allowOutsideClick: false,
             background: swalBackground,
+            imageAlt: 'mirotalksfu-file-sharing',
+            imageUrl: image.share,
             position: 'center',
             title: 'Share the file',
             input: 'file',

public/view/Room.html

@@ -256,6 +256,7 @@ access to use this app.
         <div id="remoteAudios"></div>
 
         <div id="sendFileDiv" class="fadein center">
+            <img id="imgShareSend" src="../images/share.png" alt="mirotalksfu-share-send" class="center-img" /><br />
             <div id="sendFileInfo"></div>
             <div id="sendFilePercentage"></div>
             <progress id="sendProgress" max="0" value="0"></progress>
@@ -263,6 +264,12 @@ access to use this app.
         </div>
 
         <div id="receiveFileDiv" class="fadein center">
+            <img
+                id="imgShareReceive"
+                src="../images/share.png"
+                alt="mirotalksfu-share-receive"
+                class="center-img"
+            /><br />
             <div id="receiveFileInfo"></div>
             <div id="receiveFilePercentage"></div>
             <progress id="receiveProgress" max="0" value="0"></progress>