Multiple fixes and performance improvements

Author: polius

src/js/script.js

@@ -311,6 +311,11 @@ function generateRoomID() {
 // On document loaded, execute onLoad() method.
 (() => onLoad())();
 
+// Display a confirmation dialog when the user attempts to refresh or navigate away from the page.
+window.addEventListener("beforeunload", (event) => {
+  event.preventDefault();
+});
+
 // Focus the password input after the fade animation
 password_modal.addEventListener('shown.bs.modal', () => {
   password_modal_value.focus()

src/js/webrtc/file.js

@@ -75,6 +75,10 @@ class File {
     return this._in_progress
   }
 
+  set in_progress(value) {
+    this._in_progress = value
+  }
+
   get aborted() {
     return this._aborted
   }
@@ -153,16 +157,19 @@ class File {
     document.getElementById(`file-${this._id}-progress`).innerHTML = '0% | '
 
     // Store peer data
-    this._remotePeers[data.peer_id] = {"user_id": data.requester_id, "user_name": data.requester_name, "peer": null, "conn": null, "online": true, "interval": setInterval(() => this._isAlive(conn.peer), 1000), "progress": 0, "aborted": false}
+    this._remotePeers[data.peer_id] = {"user_id": data.requester_id, "user_name": data.requester_name, "peer": null, "conn": null, "online": true, "interval": null, "progress": 0, "aborted": false}
 
     // Connect to peer_id
     await this.connect(data.peer_id)
 
     // Get connection
     const conn = this._remotePeers[data.peer_id].conn
 
+    // Init interval to check connection status
+    this._remotePeers[data.peer_id].interval = setInterval(() => this._isAlive(conn.peer), 500)
+
     // Define vars for chunk processing
-    const chunkSize = 1024**2 // 1 MB
+    const chunkSize = 65536 // 64 KB
     let offset = 0
 
     // Recursive function to process each chunk
@@ -225,7 +232,6 @@ class File {
       this._chunks = []
       this._transferred = 0
       this._aborted = false
-      this._in_progress = true
     }
   }
 
@@ -305,7 +311,6 @@ class File {
 
       // Update internal parameters
       this._in_progress = false
-      this._zip = false
 
       // Close connection
       conn.close()
@@ -329,17 +334,16 @@ class File {
     // Update UI: Show the overall progress
     document.getElementById(`file-${this._id}-progress`).innerHTML = `${overall_progress}% | `
 
-    if (!this._aborted && onlinePeers.filter(x => !x.aborted).length == 0) {
-      document.getElementById(`file-${this._id}-progress`).innerHTML = `${overall_progress}% | `
-      document.getElementById(`file-${this._id}-icon-loading`).style.display = 'none'
-      document.getElementById(`file-${this._id}-error`).style.display = 'block'
-      document.getElementById(`file-${this._id}-error`).innerHTML = 'All users stopped the file transfer.'
-    }
-    else if (overall_progress == 100) {
+    if (overall_progress == 100) {
       document.getElementById(`file-${this._id}-abort`).style.display = 'none'
       document.getElementById(`file-${this._id}-icon-loading`).style.display = 'none'
       document.getElementById(`file-${this._id}-icon-success`).style.display = 'block'
     }
+    else if (!this._aborted && onlinePeers.filter(x => !x.aborted).length == 0) {
+      document.getElementById(`file-${this._id}-icon-loading`).style.display = 'none'
+      document.getElementById(`file-${this._id}-error`).style.display = 'block'
+      document.getElementById(`file-${this._id}-error`).innerHTML = 'All users stopped the file transfer.'
+    }
   }
 
   _onFileAborted(conn) {

src/js/webrtc/user.js

@@ -297,7 +297,7 @@ class User {
       "file": null,
       "current": 0,
       "sizes": files.map(x => x.size),
-      "interval": setInterval(() => this._downloadAllProgress(), 1000),
+      "interval": setInterval(() => this._downloadAllProgress(), 500),
     };
 
     for (let file of files) {
@@ -314,6 +314,9 @@ class User {
       // Init Peering connection to receive the file
       await file.init()
 
+      // Mark the file to be in progress
+      file.in_progress = true
+
       // State to convert the file in zip, instead of downloading it
       file.zip = true
 
@@ -349,7 +352,7 @@ class User {
     }
 
     // Disable zip mode
-    for (let file of files) file.zip = false
+    for (let file of Object.values(this._files)) file.zip = false
   }
 
   _waitFileTranster(file) {
@@ -359,22 +362,23 @@ class User {
           clearInterval(checkInterval);
           resolve();
         }
-      }, 100);
+      }, 500);
     });
   }
 
   downloadAllCancel() {
     // Abort the downloadAll operation
     this._downloadAll.active = false
     this._downloadAll.aborted = true
+
+    // Update UI
     download_modal_cancel.setAttribute("disabled", "")
     download_modal_cancel_spinner.style.display = 'inline-block'
   }
 
   _downloadAllProgress() {
     // Abort file transfer
     if (!this._downloadAll.active) {
-      this._downloadAll.file.abort()
       clearInterval(this._downloadAll.interval)
     }
 
@@ -387,7 +391,7 @@ class User {
     download_modal_value.innerHTML = `${Math.floor(overallProgress)}%`
     download_modal_active.querySelector('.progress-bar').style.width = `${Math.floor(overallProgress)}%`
 
-    if (this._downloadAll.active && overallProgress == 100) {
+    if (overallProgress == 100) {
       clearInterval(this._downloadAll.interval)
       download_modal_active.style.display = 'none'
       download_modal_success.style.display = 'flex'
@@ -689,7 +693,8 @@ class User {
     }
     // Redirect
     else {
-      this._remotePeers[data.peer_id].conn.send({"webrtc-file-download": data})
+      const owner_id = this._files[data.file_id].owner_id
+      this._remotePeers[owner_id].conn.send({"webrtc-file-download": data})
     }
   }