xenofem/transbeam
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Wiki Activity

nicer display of upload progress info

Browse source
This commit is contained in:
xenofem 2022-05-23 20:44:22 -04:00
parent 8b5e9b76bb
commit c76baec1c1
3 changed files with 54 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
static/css/transbeam.css
View file

@ -27,6 +27,27 @@ body {
margin: 10px auto; margin: 10px auto;
} }
#progress {
display: flex;
align-items: center;
column-gap: 15px;
row-gap: 5px;
flex-wrap: wrap;
}
#progress_percentage {
flex-grow: 1;
}
#progress_size {
flex-grow: 3;
}
#progress_rate {
flex-grow: 2;
}
#progress_eta {
flex-grow: 3;
}
#progress_bar { #progress_bar {
height: 20px; height: 20px;
border-radius: 10px; border-radius: 10px;

7
static/index.html
View file

@ -71,7 +71,12 @@
<div id="copied_message">Link copied!</div> <div id="copied_message">Link copied!</div>
</div> </div>
<div id="progress_container"> <div id="progress_container">
<div id="progress"></div> <div id="progress">
<div id="progress_percentage"></div>
<div id="progress_size"></div>
<div id="progress_rate"></div>
<div id="progress_eta"></div>
</div>
<div id="progress_bar"></div> <div id="progress_bar"></div>
</div> </div>
<table id="file_list"> <table id="file_list">

41
static/js/upload.js
View file

@ -1,7 +1,7 @@
const FILE_CHUNK_SIZE = 16384; const FILE_CHUNK_SIZE = 16384;
const MAX_FILES = 256; const MAX_FILES = 256;
const SAMPLE_WINDOW = 100; const SAMPLE_WINDOW = 100;
const STALL_THRESHOLD = 1; const STALL_THRESHOLD = 1000;
let files = []; let files = [];
@ -22,7 +22,11 @@ let fileList;
let uploadButton; let uploadButton;
let lifetimeInput; let lifetimeInput;
let downloadCode; let downloadCode;
let progress;
let progressPercentage;
let progressSize;
let progressRate;
let progressEta;
let progressBar; let progressBar;
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
@ -34,7 +38,10 @@ document.addEventListener('DOMContentLoaded', () => {
uploadButton = document.getElementById('upload_button'); uploadButton = document.getElementById('upload_button');
lifetimeInput = document.getElementById('lifetime'); lifetimeInput = document.getElementById('lifetime');
downloadCode = document.getElementById('download_code'); downloadCode = document.getElementById('download_code');
progress = document.getElementById('progress'); progressPercentage = document.getElementById('progress_percentage');
progressSize = document.getElementById('progress_size');
progressRate = document.getElementById('progress_rate');
progressEta = document.getElementById('progress_eta');
progressBar = document.getElementById('progress_bar'); progressBar = document.getElementById('progress_bar');
fetch('/upload/limits.json') fetch('/upload/limits.json')
@ -278,22 +285,28 @@ function updateProgress() {
} else { } else {
percentage = `${(bytesSent*100/totalBytes).toFixed(1)}%`; percentage = `${(bytesSent*100/totalBytes).toFixed(1)}%`;
} }
let progressString = `${percentage} - ${displaySize(bytesSent)}/${displaySize(totalBytes)}`; progressPercentage.textContent = percentage;
progressSize.textContent = `${displaySize(bytesSent)}/${displaySize(totalBytes)}`;
if (timestamps.length >= 2) { if (timestamps.length >= 2) {
const start = timestamps.at(0); const start = timestamps.at(0);
const end = timestamps.at(-1); const end = timestamps.at(-1);
if (end[0] - start[0] > 0) { const rate = (end[1] - start[1])/(end[0] - start[0]);
const rate = (end[1] - start[1])/(end[0] - start[0]); progressRate.textContent = `${displaySize(rate)}/s`;
if (rate > STALL_THRESHOLD) {
// Use the value from timestamps rather than bytesSent to avoid awkward UI thrashing if (rate > STALL_THRESHOLD) {
const remaining = (totalBytes - end[1]) / rate; // Use the value from timestamps rather than bytesSent to avoid awkward UI thrashing
progressString += ` - ${displaySize(rate)}/s - ${displayTime(remaining)} remaining`; const remaining = (totalBytes - end[1]) / rate;
} else { progressEta.textContent = `${displayTime(remaining)} remaining`;
progressString += " - stalled"; } else {
} progressEta.textContent = "stalled";
} }
} else {
progressRate.textContent = "???B/s";
progressEta.textContent = "??? remaining";
} }
progress.textContent = progressString;
progressBar.style.backgroundSize = percentage; progressBar.style.backgroundSize = percentage;
const fileEntries = Array.from(fileList.children); const fileEntries = Array.from(fileList.children);