mirror of
https://github.com/jech/galene.git
synced 2024-11-22 16:45:58 +01:00
Better progress indicator for file transfer.
This commit is contained in:
parent
645ba5fb48
commit
dbeb75ee0e
2 changed files with 64 additions and 15 deletions
|
@ -1331,3 +1331,9 @@ header .collapse:hover {
|
||||||
.contextualMenu{
|
.contextualMenu{
|
||||||
z-index: 2999;
|
z-index: 2999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.file-progress {
|
||||||
|
accent-color: #610a86;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
|
@ -2416,12 +2416,15 @@ function gotFileTransfer(f) {
|
||||||
f.cancel();
|
f.cancel();
|
||||||
};
|
};
|
||||||
bno.id = "bno-" + f.fullid();
|
bno.id = "bno-" + f.fullid();
|
||||||
let status = document.createElement('div');
|
let status = document.createElement('span');
|
||||||
status.id = 'status-' + f.fullid();
|
status.id = 'status-' + f.fullid();
|
||||||
if(!f.up) {
|
if(!f.up) {
|
||||||
status.textContent =
|
status.textContent =
|
||||||
'(Choosing "Accept" will disclose your IP address.)';
|
'(Choosing "Accept" will disclose your IP address.)';
|
||||||
}
|
}
|
||||||
|
let statusp = document.createElement('p');
|
||||||
|
statusp.id = 'statusp-' + f.fullid();
|
||||||
|
statusp.appendChild(status);
|
||||||
let div = document.createElement('div');
|
let div = document.createElement('div');
|
||||||
div.id = 'file-' + f.fullid();
|
div.id = 'file-' + f.fullid();
|
||||||
div.appendChild(p);
|
div.appendChild(p);
|
||||||
|
@ -2429,7 +2432,7 @@ function gotFileTransfer(f) {
|
||||||
div.appendChild(byes);
|
div.appendChild(byes);
|
||||||
if(bno)
|
if(bno)
|
||||||
div.appendChild(bno);
|
div.appendChild(bno);
|
||||||
div.appendChild(status);
|
div.appendChild(statusp);
|
||||||
div.classList.add('message');
|
div.classList.add('message');
|
||||||
div.classList.add('message-private');
|
div.classList.add('message-private');
|
||||||
div.classList.add('message-row');
|
div.classList.add('message-row');
|
||||||
|
@ -2441,20 +2444,52 @@ function gotFileTransfer(f) {
|
||||||
/**
|
/**
|
||||||
* @param {TransferredFile} f
|
* @param {TransferredFile} f
|
||||||
* @param {string} status
|
* @param {string} status
|
||||||
|
* @param {number} [value]
|
||||||
*/
|
*/
|
||||||
function setFileStatus(f, status) {
|
function setFileStatus(f, status, value) {
|
||||||
let statusdiv = document.getElementById('status-' + f.fullid());
|
let statuselt = document.getElementById('status-' + f.fullid());
|
||||||
if(!statusdiv)
|
if(!statuselt)
|
||||||
throw new Error("Couldn't find statusdiv");
|
throw new Error("Couldn't find statusp");
|
||||||
statusdiv.textContent = status;
|
statuselt.textContent = status;
|
||||||
|
if(value) {
|
||||||
|
let progress = document.getElementById('progress-' + f.fullid());
|
||||||
|
if(!progress || !(progress instanceof HTMLProgressElement))
|
||||||
|
throw new Error("Couldn't find progress element");
|
||||||
|
progress.value = value;
|
||||||
|
let label = document.getElementById('progresstext-' + f.fullid());
|
||||||
|
let percent = Math.round(100 * value / progress.max);
|
||||||
|
label.textContent = `${percent}%`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {TransferredFile} f
|
||||||
|
* @param {number} [max]
|
||||||
|
*/
|
||||||
|
function createFileProgress(f, max) {
|
||||||
|
let statusp = document.getElementById('statusp-' + f.fullid());
|
||||||
|
if(!statusp)
|
||||||
|
throw new Error("Couldn't find status div");
|
||||||
|
/** @type HTMLProgressElement */
|
||||||
|
let progress = document.createElement('progress');
|
||||||
|
progress.id = 'progress-' + f.fullid();
|
||||||
|
progress.classList.add('file-progress');
|
||||||
|
progress.max = max;
|
||||||
|
progress.value = 0;
|
||||||
|
statusp.appendChild(progress);
|
||||||
|
let progresstext = document.createElement('span');
|
||||||
|
progresstext.id = 'progresstext-' + f.fullid();
|
||||||
|
progresstext.textContent = '0%';
|
||||||
|
statusp.appendChild(progresstext);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {TransferredFile} f
|
* @param {TransferredFile} f
|
||||||
* @param {boolean} delyes
|
* @param {boolean} delyes
|
||||||
* @param {boolean} delno
|
* @param {boolean} delno
|
||||||
|
* @param {boolean} [delprogress]
|
||||||
*/
|
*/
|
||||||
function delFileStatusButtons(f, delyes, delno) {
|
function delFileStatusButtons(f, delyes, delno, delprogress) {
|
||||||
let div = document.getElementById('file-' + f.fullid());
|
let div = document.getElementById('file-' + f.fullid());
|
||||||
if(!div)
|
if(!div)
|
||||||
throw new Error("Couldn't find file div");
|
throw new Error("Couldn't find file div");
|
||||||
|
@ -2468,6 +2503,16 @@ function delFileStatusButtons(f, delyes, delno) {
|
||||||
if(bno)
|
if(bno)
|
||||||
div.removeChild(bno);
|
div.removeChild(bno);
|
||||||
}
|
}
|
||||||
|
if(delprogress) {
|
||||||
|
let statusp = document.getElementById('statusp-' + f.fullid());
|
||||||
|
let progress = document.getElementById('progress-' + f.fullid());
|
||||||
|
let progresstext =
|
||||||
|
document.getElementById('progresstext-' + f.fullid());
|
||||||
|
if(progress)
|
||||||
|
statusp.removeChild(progress);
|
||||||
|
if(progresstext)
|
||||||
|
statusp.removeChild(progresstext);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -2481,17 +2526,15 @@ function gotFileTransferEvent(state, data) {
|
||||||
case 'inviting':
|
case 'inviting':
|
||||||
break;
|
break;
|
||||||
case 'connecting':
|
case 'connecting':
|
||||||
delFileStatusButtons(f, true);
|
delFileStatusButtons(f, true, false);
|
||||||
setFileStatus(f, 'Connecting...');
|
setFileStatus(f, 'Connecting...');
|
||||||
|
createFileProgress(f, f.size);
|
||||||
break;
|
break;
|
||||||
case 'connected':
|
case 'connected':
|
||||||
if(f.up)
|
setFileStatus(f, f.up ? 'Sending...' : 'Receiving...', f.datalen);
|
||||||
setFileStatus(f, `Sending... ${f.datalen}/${f.size}`);
|
|
||||||
else
|
|
||||||
setFileStatus(f, `Receiving... ${f.datalen}/${f.size}`);
|
|
||||||
break;
|
break;
|
||||||
case 'done':
|
case 'done':
|
||||||
delFileStatusButtons(f, true, true);
|
delFileStatusButtons(f, true, true, true);
|
||||||
setFileStatus(f, 'Done.');
|
setFileStatus(f, 'Done.');
|
||||||
if(!f.up) {
|
if(!f.up) {
|
||||||
let url = URL.createObjectURL(data);
|
let url = URL.createObjectURL(data);
|
||||||
|
@ -2505,7 +2548,7 @@ function gotFileTransferEvent(state, data) {
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 'cancelled':
|
case 'cancelled':
|
||||||
delFileStatusButtons(f, true, true);
|
delFileStatusButtons(f, true, true, true);
|
||||||
if(data)
|
if(data)
|
||||||
setFileStatus(f, `Cancelled: ${data.toString()}.`);
|
setFileStatus(f, `Cancelled: ${data.toString()}.`);
|
||||||
else
|
else
|
||||||
|
|
Loading…
Reference in a new issue