From 8305b0250d9662e8d10ca64136d128fd86365a80 Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Fri, 5 Jul 2024 15:37:50 +0200 Subject: [PATCH] [mirotalksfu] - improve file-transfer, update dep --- app/src/Server.js | 10 +++++++- package.json | 4 +-- public/css/Room.css | 2 ++ public/js/Room.js | 7 ++++-- public/js/RoomClient.js | 54 ++++++++++++++++++++++++++++++++++------- public/views/Room.html | 1 + 6 files changed, 64 insertions(+), 14 deletions(-) diff --git a/app/src/Server.js b/app/src/Server.js index 4bf17fa8..728c5d72 100644 --- a/app/src/Server.js +++ b/app/src/Server.js @@ -44,7 +44,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.84 + * @version 1.4.85 * */ @@ -1922,6 +1922,14 @@ function startServer() { roomList.get(socket.room_id).broadCast(socket.id, 'fileAbort', data); }); + socket.on('receiveFileAbort', (dataObject) => { + if (!roomList.has(socket.room_id)) return; + + const data = checkXSS(dataObject); + + roomList.get(socket.room_id).broadCast(socket.id, 'receiveFileAbort', data); + }); + socket.on('shareVideoAction', (dataObject) => { if (!roomList.has(socket.room_id)) return; diff --git a/package.json b/package.json index 3aed1aa6..a7ab5bb5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mirotalksfu", - "version": "1.4.84", + "version": "1.4.85", "description": "WebRTC SFU browser-based video calls", "main": "Server.js", "scripts": { @@ -56,7 +56,7 @@ }, "dependencies": { "@sentry/integrations": "7.114.0", - "@sentry/node": "8.14.0", + "@sentry/node": "8.15.0", "axios": "^1.7.2", "body-parser": "1.20.2", "colors": "1.4.0", diff --git a/public/css/Room.css b/public/css/Room.css index 382b2518..95d9ebda 100644 --- a/public/css/Room.css +++ b/public/css/Room.css @@ -1127,6 +1127,7 @@ button:hover { } #sendAbortBtn, +#receiveAbortBtn, #receiveHideBtn { padding: 5px; border-radius: 5px; @@ -1135,6 +1136,7 @@ button:hover { } #sendAbortBtn:hover, +#receiveAbortBtn:hover, #receiveHideBtn:hover { color: rgb(255, 0, 0); transform: var(--btns-hover-scale); diff --git a/public/js/Room.js b/public/js/Room.js index 964b2b66..9885a733 100644 --- a/public/js/Room.js +++ b/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.84 + * @version 1.4.85 * */ @@ -1741,6 +1741,9 @@ function handleButtons() { sendAbortBtn.onclick = () => { rc.abortFileTransfer(); }; + receiveAbortBtn.onclick = () => { + rc.abortReceiveFileTransfer(); + }; receiveHideBtn.onclick = () => { rc.hideFileTransfer(); }; @@ -4089,7 +4092,7 @@ function showAbout() { imageUrl: image.about, customClass: { image: 'img-about' }, position: 'center', - title: 'WebRTC SFU v1.4.84', + title: 'WebRTC SFU v1.4.85', html: `
diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js index 0b2b86b1..8146a879 100644 --- a/public/js/RoomClient.js +++ b/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.84 + * @version 1.4.85 * */ @@ -855,6 +855,7 @@ class RoomClient { this.socket.on('file', this.handleFileData); this.socket.on('shareVideoAction', this.handleShareVideoAction); this.socket.on('fileAbort', this.handleFileAbortData); + this.socket.on('receiveFileAbort', this.handleReceiveFileAbortData); this.socket.on('wbCanvasToJson', this.handleWbCanvasToJson); this.socket.on('whiteboardAction', this.handleWhiteboardAction); this.socket.on('audioVolume', this.handleAudioVolumeData); @@ -973,6 +974,10 @@ class RoomClient { this.handleFileAbort(data); }; + handleReceiveFileAbortData = (data) => { + this.handleReceiveFileAbort(data); + }; + handleWbCanvasToJson = (data) => { console.log('SocketOn Received whiteboard canvas JSON'); JsonToWbCanvas(data); @@ -3187,7 +3192,7 @@ class RoomClient { this.setTippy(fsId, 'Full screen', 'bottom'); btnFs.addEventListener('click', () => { if (videoPlayer.classList.contains('videoCircle')) { - return userLog('info', 'Full Screen not allowed if video on privacy mode', 'top-end'); + return this.userLog('info', 'Full Screen not allowed if video on privacy mode', 'top-end'); } videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none'; this.toggleFullScreen(videoPlayer); @@ -3197,7 +3202,7 @@ class RoomClient { if (videoPlayer) { videoPlayer.addEventListener('click', () => { if (videoPlayer.classList.contains('videoCircle')) { - return userLog('info', 'Full Screen not allowed if video on privacy mode', 'top-end'); + return this.userLog('info', 'Full Screen not allowed if video on privacy mode', 'top-end'); } if (!videoPlayer.hasAttribute('controls')) { if ((this.isMobileDevice && this.isVideoOnFullScreen) || !this.isMobileDevice) { @@ -4790,6 +4795,9 @@ class RoomClient { } sendFileInformations(file, peer_id, broadcast = false) { + if (this.isFileReaderRunning()) { + return this.userLog('warning', 'File transfer in progress. Please wait until it completes', 'top-end'); + } this.fileToSend = file; // if (this.fileToSend && this.fileToSend.size > 0) { @@ -4860,6 +4868,7 @@ class RoomClient {
`, @@ -4936,7 +4945,7 @@ class RoomClient { } abortFileTransfer() { - if (this.fileReader && this.fileReader.readyState === 1) { + if (this.isFileReaderRunning()) { this.fileReader.abort(); sendFileDiv.style.display = 'none'; this.sendInProgress = false; @@ -4946,10 +4955,33 @@ class RoomClient { } } + abortReceiveFileTransfer() { + const data = { peer_name: this.peer_name }; + this.socket.emit('receiveFileAbort', data); + setTimeout(() => { + this.handleFileAbort(data); + }, 1000); + } + hideFileTransfer() { receiveFileDiv.style.display = 'none'; } + isFileReaderRunning() { + return this.fileReader && this.fileReader.readyState === 1; + } + + handleReceiveFileAbort(data) { + if (this.isFileReaderRunning()) { + this.userLog('info', data.peer_name + ' ⚠️ aborted file transfer', 'top-end'); + this.fileReader.abort(); + sendFileDiv.style.display = 'none'; + this.sendInProgress = false; + } else { + this.handleFileAbort(data); + } + } + handleFileAbort(data) { this.receiveBuffer = []; this.incomingFileData = []; @@ -4957,7 +4989,7 @@ class RoomClient { this.receiveInProgress = false; receiveFileDiv.style.display = 'none'; console.log(data.peer_name + ' aborted the file transfer'); - userLog('info', data.peer_name + ' ⚠️ aborted the file transfer', 'top-end'); + this.userLog('info', data.peer_name + ' ⚠️ aborted the file transfer', 'top-end'); } handleFile(data) { @@ -5400,20 +5432,24 @@ class RoomClient { break; case 'showChat': active - ? userLog('info', `${icons.chat} Chat will be shown, when you receive a message`, 'top-end') - : userLog('info', `${icons.chat} Chat not will be shown, when you receive a message`, 'top-end'); + ? this.userLog('info', `${icons.chat} Chat will be shown, when you receive a message`, 'top-end') + : this.userLog( + 'info', + `${icons.chat} Chat not will be shown, when you receive a message`, + 'top-end', + ); break; case 'speechMessages': this.userLog('info', `${icons.speech} Speech incoming messages ${status}`, 'top-end'); break; case 'transcriptShowOnMsg': active - ? userLog( + ? this.userLog( 'info', `${icons.transcript} Transcript will be shown, when you receive a message`, 'top-end', ) - : userLog( + : this.userLog( 'info', `${icons.transcript} Transcript not will be shown, when you receive a message`, 'top-end', diff --git a/public/views/Room.html b/public/views/Room.html index e7da8c30..5ae94bc0 100644 --- a/public/views/Room.html +++ b/public/views/Room.html @@ -1175,6 +1175,7 @@ access to use this app.
+