diff --git a/client/components/upload_queue.js b/client/components/upload_queue.js index 1d3148e0..b5a7740c 100644 --- a/client/components/upload_queue.js +++ b/client/components/upload_queue.js @@ -66,11 +66,18 @@ export class UploadQueue extends React.Component { prior_status: {}, progress: {}, speed: [], + error: null, }); } emphasis(path) { - notify.send(path.split("/").join(" / "), "info"); + if(!path) return; + else if(path[0] === "/") path = path.slice(1); + + if(navigator && navigator.clipboard){ + navigator.clipboard.writeText(path); + notify.send("Copied to clipboard", "info"); + } } runner(id) { @@ -92,8 +99,8 @@ export class UploadQueue extends React.Component { processes.splice(i, 1); this.setState({ processes, - currents: [...this.state.currents, current_process], - }) + currents: [...this.state.currents, current_process] + }); break; } } @@ -107,12 +114,13 @@ export class UploadQueue extends React.Component { ...this.state.prior_status, [current_process.id]: true } - }) + }); } this.setState({ currents: this.state.currents.filter((c) => c.path != current_process.path), finished: [...this.state.finished, current_process], - }) + error: null + }); return this.runner(id); }) .catch((err) => { @@ -122,8 +130,8 @@ export class UploadQueue extends React.Component { currents: this.state.currents.filter((c) => c.path != current_process.path), }); let { message } = err; - if (message !== 'aborted') { - notify.send(err, 'error'); + if (message !== "aborted") { + this.setState({ error: err && err.message }); } return this.runner(id); }); @@ -134,7 +142,7 @@ export class UploadQueue extends React.Component { requestAnimationFrame(() => { done(); }); - }, 250); + }, 200); }); } return waitABit().then(() => this.runner(id)); @@ -168,7 +176,7 @@ export class UploadQueue extends React.Component { abort, }, } - }) + }); } addFiles(path, files) { @@ -210,8 +218,9 @@ export class UploadQueue extends React.Component { this.setState({ processes: [...this.state.processes, process], failed: this.state.failed.filter((c) => c.path != process.path), + error: null, }); - window.setTimeout(() => this.start(), 300); + requestAnimationFrame(() => this.start()); } start() { @@ -219,18 +228,15 @@ export class UploadQueue extends React.Component { window.setTimeout(() => this.calcSpeed(), 500); this.setState({ running: true, + error: null }); - Promise.all(Array.apply(null, Array(MAX_POOL_SIZE)).map((process, index) => { return this.runner(); })).then(() => { - window.setTimeout(() => { - notify.send('Upload completed', 'success'); - }, 300); this.setState({ running: false }); }).catch((err) => { - notify.send(err, 'error'); - this.setState({ running: false }); + notify.send(err, "error"); + this.setState({ running: false, error: err && err.message }); }); } } @@ -247,7 +253,7 @@ export class UploadQueue extends React.Component { if (info && info.percent) { return this.state.progress[path].percent + "%"; } - return "0%" + return "0%"; } calcSpeed() { @@ -260,9 +266,9 @@ export class UploadQueue extends React.Component { curSpeed.push(1000 * bytes / timeMs); } } - let avgSpeed = curSpeed.reduce(function (p, c, i) { return p + (c - p) / (i + 1) }, 0); + let avgSpeed = curSpeed.reduce(function (p, c, i) { return p + (c - p) / (i + 1); }, 0); this.setState({ - speed: [...this.state.speed, avgSpeed].slice(-5), + speed: [...this.state.speed, avgSpeed].slice(-5) }); if (this.state.running) { window.setTimeout(() => this.calcSpeed(), 500); @@ -270,15 +276,15 @@ export class UploadQueue extends React.Component { } getState() { - let avgSpeed = this.state.speed.reduce(function (p, c, i) { return p + (c - p) / (i + 1) }, 0); - let speedStr = "" + let avgSpeed = this.state.speed.reduce(function (p, c, i) { return p + (c - p) / (i + 1); }, 0); + let speedStr = ""; if (avgSpeed > 0) { speedStr = " ~ " + humanFileSize(avgSpeed) + "/s"; } if (this.state.running) { - return "Running..." + speedStr + return "Running..." + speedStr; } - return "Done" + speedStr + return "Done" + speedStr; } onClose() { @@ -290,12 +296,12 @@ export class UploadQueue extends React.Component { running: false, }); this.state.currents.map(p => this.abort(p)); - window.setTimeout(() => this.reset(), 30); + window.requestAnimationFrame(() => this.reset(), 30); }, () => {} ); } else { - this.reset() + this.reset(); } } @@ -324,7 +330,7 @@ export class UploadQueue extends React.Component { let totalFiles = files.length; return ( 0}> -
+

CURRENT UPLOAD
@@ -333,7 +339,7 @@ export class UploadQueue extends React.Component {
this.onClose()} />

-

{this.getState()}

+

{this.state.error ? this.state.error : this.getState()}

{this.renderRows( finished, diff --git a/client/components/upload_queue.scss b/client/components/upload_queue.scss index 678198ac..74654263 100644 --- a/client/components/upload_queue.scss +++ b/client/components/upload_queue.scss @@ -1,13 +1,14 @@ -.component_stats{ +.component_upload_queue{ position: fixed; - bottom: 20px; - right: 20px; + bottom: 0; + right: 00px; z-index: 999; - max-width: 300px; - + width: 100%; + max-width: 550px; box-shadow: 1px 2px 20px rgba(0, 0, 0, 0.1); background: white; - padding: 20px; + padding: 20px 15px 15px 20px; + box-sizing: border-box; h2 { margin: 0 0 5px 0; @@ -29,7 +30,7 @@ .component_icon { cursor: pointer; margin-left: 10px; - width: 32px; + width: 25px; float: right; } } @@ -59,18 +60,14 @@ width: 100%; .file_path { - padding: 5px; - display: flex; - flex-direction: column; - flex-basis: 100%; + padding: 3px 3px 3px 0; flex: 1; - overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file_state { - padding: 5px; + padding: 3px 3px 3px 0; display: flex; flex-direction: column; width: 40px; @@ -84,7 +81,7 @@ } .file_control { - padding: 5px; + padding: 3px 3px 3px 0; display: flex; flex-direction: column; width: 18px; diff --git a/client/helpers/ajax.js b/client/helpers/ajax.js index 7b555f3c..47b9b019 100644 --- a/client/helpers/ajax.js +++ b/client/helpers/ajax.js @@ -43,7 +43,7 @@ export function http_post(url, data, type = 'json', params){ data = JSON.stringify(data); xhr.setRequestHeader('Content-Type', 'application/json'); } - if (params !== undefined && params.progress) { + if (params && params.progress) { xhr.upload.addEventListener("progress", params.progress, false); } xhr.send(data); @@ -68,7 +68,7 @@ export function http_post(url, data, type = 'json', params){ xhr.onerror = function(){ handle_error_response(xhr, err) } - if (params !== undefined && params.abort) { + if (params && params.abort) { params.abort(() => { xhr.abort(); err({ message: 'aborted' });