[mirotalksfu] - add drag and drop on file share, update dep

app/src/Server.js

@@ -42,7 +42,7 @@ dependencies: {
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.4.48
+ * @version 1.4.49
  *
  */
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.4.48",
+    "version": "1.4.49",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {
@@ -55,19 +55,19 @@
         "jsonwebtoken": "^9.0.2",
         "js-yaml": "^4.1.0",
         "mediasoup": "3.14.7",
-        "mediasoup-client": "3.7.8",
+        "mediasoup-client": "3.7.10",
         "ngrok": "^5.0.0-beta.2",
         "nodemailer": "^6.9.13",
-        "openai": "^4.49.1",
+        "openai": "^4.51.0",
         "qs": "6.12.1",
         "socket.io": "4.7.5",
         "swagger-ui-express": "5.0.1",
-        "uuid": "9.0.1",
+        "uuid": "10.0.0",
         "xss": "^1.0.15"
     },
     "devDependencies": {
         "node-fetch": "^3.3.2",
         "nodemon": "^3.1.3",
-        "prettier": "3.3.1"
+        "prettier": "3.3.2"
     }
 }

public/css/Room.css

@@ -1076,6 +1076,20 @@ progress {
     cursor: move;
 }
 
+#dropArea {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+    border: 2px dashed #ccc;
+    padding: 20px;
+    text-align: center;
+}
+
+#dropArea p {
+    margin: 0;
+}
+
 /*--------------------------------------------------------------
 # Whiteboard
 --------------------------------------------------------------*/

public/js/Room.js

@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.4.48
+ * @version 1.4.49
  *
  */
 

public/js/RoomClient.js

@@ -9,7 +9,7 @@
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.4.48
+ * @version 1.4.49
  *
  */
 
@@ -4675,10 +4675,22 @@ class RoomClient {
             position: 'center',
             title: 'Share file',
             input: 'file',
+            html: `
+            <div id="dropArea">
+                <p>Drag and drop your file here</p>
+            </div>
+            `,
             inputAttributes: {
                 accept: this.fileSharingInput,
                 'aria-label': 'Select file',
             },
+            didOpen: () => {
+                const dropArea = document.getElementById('dropArea');
+                dropArea.addEventListener('dragenter', handleDragEnter);
+                dropArea.addEventListener('dragover', handleDragOver);
+                dropArea.addEventListener('dragleave', handleDragLeave);
+                dropArea.addEventListener('drop', handleDrop);
+            },
             showDenyButton: true,
             confirmButtonText: `Send`,
             denyButtonText: `Cancel`,
@@ -4689,6 +4701,42 @@ class RoomClient {
                 this.sendFileInformations(result.value, peer_id, broadcast);
             }
         });
+
+        function handleDragEnter(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            e.target.style.background = '#f0f0f0';
+        }
+
+        function handleDragOver(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            e.dataTransfer.dropEffect = 'copy';
+        }
+
+        function handleDragLeave(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            e.target.style.background = '';
+        }
+
+        function handleDrop(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            handleFiles(files);
+            e.target.style.background = '';
+        }
+
+        function handleFiles(files) {
+            if (files.length > 0) {
+                const file = files[0];
+                console.log('Selected file:', file);
+                Swal.close();
+                rc.sendFileInformations(file, peer_id, broadcast);
+            }
+        }
     }
 
     sendFileInformations(file, peer_id, broadcast = false) {