diff --git a/static/galene.css b/static/galene.css index 035bb3f..82fc007 100644 --- a/static/galene.css +++ b/static/galene.css @@ -1331,3 +1331,9 @@ header .collapse:hover { .contextualMenu{ z-index: 2999; } + +.file-progress { + accent-color: #610a86; + margin-left: 10px; + margin-right: 10px; +} diff --git a/static/galene.js b/static/galene.js index 6c48162..9a449e9 100644 --- a/static/galene.js +++ b/static/galene.js @@ -2416,12 +2416,15 @@ function gotFileTransfer(f) { f.cancel(); }; bno.id = "bno-" + f.fullid(); - let status = document.createElement('div'); + let status = document.createElement('span'); status.id = 'status-' + f.fullid(); if(!f.up) { status.textContent = '(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'); div.id = 'file-' + f.fullid(); div.appendChild(p); @@ -2429,7 +2432,7 @@ function gotFileTransfer(f) { div.appendChild(byes); if(bno) div.appendChild(bno); - div.appendChild(status); + div.appendChild(statusp); div.classList.add('message'); div.classList.add('message-private'); div.classList.add('message-row'); @@ -2441,20 +2444,52 @@ function gotFileTransfer(f) { /** * @param {TransferredFile} f * @param {string} status + * @param {number} [value] */ -function setFileStatus(f, status) { - let statusdiv = document.getElementById('status-' + f.fullid()); - if(!statusdiv) - throw new Error("Couldn't find statusdiv"); - statusdiv.textContent = status; +function setFileStatus(f, status, value) { + let statuselt = document.getElementById('status-' + f.fullid()); + if(!statuselt) + throw new Error("Couldn't find statusp"); + 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 {boolean} delyes * @param {boolean} delno + * @param {boolean} [delprogress] */ -function delFileStatusButtons(f, delyes, delno) { +function delFileStatusButtons(f, delyes, delno, delprogress) { let div = document.getElementById('file-' + f.fullid()); if(!div) throw new Error("Couldn't find file div"); @@ -2468,6 +2503,16 @@ function delFileStatusButtons(f, delyes, delno) { if(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': break; case 'connecting': - delFileStatusButtons(f, true); + delFileStatusButtons(f, true, false); setFileStatus(f, 'Connecting...'); + createFileProgress(f, f.size); break; case 'connected': - if(f.up) - setFileStatus(f, `Sending... ${f.datalen}/${f.size}`); - else - setFileStatus(f, `Receiving... ${f.datalen}/${f.size}`); + setFileStatus(f, f.up ? 'Sending...' : 'Receiving...', f.datalen); break; case 'done': - delFileStatusButtons(f, true, true); + delFileStatusButtons(f, true, true, true); setFileStatus(f, 'Done.'); if(!f.up) { let url = URL.createObjectURL(data); @@ -2505,7 +2548,7 @@ function gotFileTransferEvent(state, data) { } break; case 'cancelled': - delFileStatusButtons(f, true, true); + delFileStatusButtons(f, true, true, true); if(data) setFileStatus(f, `Cancelled: ${data.toString()}.`); else