Providing progress updates

To help the user understand when a file is still in the process of being transferred, we have added some extra code. When a thumbnail first appears it is set to be semi-transparent, and over the top of it we display a number that shows the percentage of this file that has been transferred. The update_file_progress() function that handles this logic is called from the new_file_part signal handler for both the caller and the callee, and it uses values included in the new_file_part signal.

// show the progress of a file transfer
function update_file_progress(id, parts, length) {
  var percentage = Math.round((parts/length)*100);
  if (percentage < 100) {
    document.getElementById("file-progress-"+id).innerHTML = percentage+"%";
    document.getElementById("file-img-"+id).style.opacity = 0.25;
  } else {
    document.getElementById("file-progress-"+id).innerHTML = "";
    document.getElementById("file-img-"+id).style.opacity = 1;
  }
}

First, we take the number...