opensource/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash.git synced 2025-11-02 11:57:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

update (maintenance): small changes from #267

Browse Source
This commit is contained in:
Mickael Kerjean
2020-05-23 18:37:48 +10:00
parent 865ba7ded6
commit f87faab58b
3 changed files with 46 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
client/components/upload_queue.js
View File

@ -66,11 +66,18 @@ export class UploadQueue extends React.Component {
prior_status: {}, prior_status: {},
progress: {}, progress: {},
speed: [], speed: [],
error: null,
}); });
} }
emphasis(path) { 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) { runner(id) {
@ -92,8 +99,8 @@ export class UploadQueue extends React.Component {
processes.splice(i, 1); processes.splice(i, 1);
this.setState({ this.setState({
processes, processes,
currents: [...this.state.currents, current_process], currents: [...this.state.currents, current_process]
}) });
break; break;
} }
} }
@ -107,12 +114,13 @@ export class UploadQueue extends React.Component {
...this.state.prior_status, ...this.state.prior_status,
[current_process.id]: true [current_process.id]: true
} }
}) });
} }
this.setState({ this.setState({
currents: this.state.currents.filter((c) => c.path != current_process.path), currents: this.state.currents.filter((c) => c.path != current_process.path),
finished: [...this.state.finished, current_process], finished: [...this.state.finished, current_process],
}) error: null
});
return this.runner(id); return this.runner(id);
}) })
.catch((err) => { .catch((err) => {
@ -122,8 +130,8 @@ export class UploadQueue extends React.Component {
currents: this.state.currents.filter((c) => c.path != current_process.path), currents: this.state.currents.filter((c) => c.path != current_process.path),
}); });
let { message } = err; let { message } = err;
if (message !== 'aborted') { if (message !== "aborted") {
notify.send(err, 'error'); this.setState({ error: err && err.message });
} }
return this.runner(id); return this.runner(id);
}); });
@ -134,7 +142,7 @@ export class UploadQueue extends React.Component {
requestAnimationFrame(() => { requestAnimationFrame(() => {
done(); done();
}); });
}, 250); }, 200);
}); });
} }
return waitABit().then(() => this.runner(id)); return waitABit().then(() => this.runner(id));
@ -168,7 +176,7 @@ export class UploadQueue extends React.Component {
abort, abort,
}, },
} }
}) });
} }
addFiles(path, files) { addFiles(path, files) {
@ -210,8 +218,9 @@ export class UploadQueue extends React.Component {
this.setState({ this.setState({
processes: [...this.state.processes, process], processes: [...this.state.processes, process],
failed: this.state.failed.filter((c) => c.path != process.path), failed: this.state.failed.filter((c) => c.path != process.path),
error: null,
}); });
window.setTimeout(() => this.start(), 300); requestAnimationFrame(() => this.start());
} }
start() { start() {
@ -219,18 +228,15 @@ export class UploadQueue extends React.Component {
window.setTimeout(() => this.calcSpeed(), 500); window.setTimeout(() => this.calcSpeed(), 500);
this.setState({ this.setState({
running: true, running: true,
error: null
}); });
Promise.all(Array.apply(null, Array(MAX_POOL_SIZE)).map((process, index) => { Promise.all(Array.apply(null, Array(MAX_POOL_SIZE)).map((process, index) => {
return this.runner(); return this.runner();
})).then(() => { })).then(() => {
window.setTimeout(() => {
notify.send('Upload completed', 'success');
}, 300);
this.setState({ running: false }); this.setState({ running: false });
}).catch((err) => { }).catch((err) => {
notify.send(err, 'error'); notify.send(err, "error");
this.setState({ running: false }); this.setState({ running: false, error: err && err.message });
}); });
} }
} }
@ -247,7 +253,7 @@ export class UploadQueue extends React.Component {
if (info && info.percent) { if (info && info.percent) {
return this.state.progress[path].percent + "%"; return this.state.progress[path].percent + "%";
} }
return "0%" return "0%";
} }
calcSpeed() { calcSpeed() {
@ -260,9 +266,9 @@ export class UploadQueue extends React.Component {
curSpeed.push(1000 * bytes / timeMs); 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({ this.setState({
speed: [...this.state.speed, avgSpeed].slice(-5), speed: [...this.state.speed, avgSpeed].slice(-5)
}); });
if (this.state.running) { if (this.state.running) {
window.setTimeout(() => this.calcSpeed(), 500); window.setTimeout(() => this.calcSpeed(), 500);
@ -270,15 +276,15 @@ export class UploadQueue extends React.Component {
} }
getState() { getState() {
let avgSpeed = this.state.speed.reduce(function (p, c, i) { return p + (c - p) / (i + 1) }, 0); let avgSpeed = this.state.speed.reduce(function (p, c, i) { return p + (c - p) / (i + 1); }, 0);
let speedStr = "" let speedStr = "";
if (avgSpeed > 0) { if (avgSpeed > 0) {
speedStr = " ~ " + humanFileSize(avgSpeed) + "/s"; speedStr = " ~ " + humanFileSize(avgSpeed) + "/s";
} }
if (this.state.running) { if (this.state.running) {
return "Running..." + speedStr return "Running..." + speedStr;
} }
return "Done" + speedStr return "Done" + speedStr;
} }
onClose() { onClose() {
@ -290,12 +296,12 @@ export class UploadQueue extends React.Component {
running: false, running: false,
}); });
this.state.currents.map(p => this.abort(p)); this.state.currents.map(p => this.abort(p));
window.setTimeout(() => this.reset(), 30); window.requestAnimationFrame(() => this.reset(), 30);
}, },
() => {} () => {}
); );
} else { } else {
this.reset() this.reset();
} }
} }
@ -324,7 +330,7 @@ export class UploadQueue extends React.Component {
let totalFiles = files.length; let totalFiles = files.length;
return ( return (
<NgIf cond={totalFiles > 0}> <NgIf cond={totalFiles > 0}>
<div className="component_stats"> <div className="component_upload_queue">
<h2> <h2>
CURRENT UPLOAD CURRENT UPLOAD
<div className="count_block"> <div className="count_block">
@ -333,7 +339,7 @@ export class UploadQueue extends React.Component {
</div> </div>
<Icon name="close" onClick={(e) => this.onClose()} /> <Icon name="close" onClick={(e) => this.onClose()} />
</h2> </h2>
<h3>{this.getState()}</h3> <h3>{this.state.error ? this.state.error : this.getState()}</h3>
<div className="stats_content"> <div className="stats_content">
{this.renderRows( {this.renderRows(
finished, finished,

25
client/components/upload_queue.scss
View File

@ -1,13 +1,14 @@
.component_stats{ .component_upload_queue{
position: fixed; position: fixed;
bottom: 20px; bottom: 0;
right: 20px; right: 00px;
z-index: 999; z-index: 999;
max-width: 300px; width: 100%;
max-width: 550px;
box-shadow: 1px 2px 20px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 20px rgba(0, 0, 0, 0.1);
background: white; background: white;
padding: 20px; padding: 20px 15px 15px 20px;
box-sizing: border-box;
h2 { h2 {
margin: 0 0 5px 0; margin: 0 0 5px 0;
@ -29,7 +30,7 @@
.component_icon { .component_icon {
cursor: pointer; cursor: pointer;
margin-left: 10px; margin-left: 10px;
width: 32px; width: 25px;
float: right; float: right;
} }
} }
@ -59,18 +60,14 @@
width: 100%; width: 100%;
.file_path { .file_path {
padding: 5px; padding: 3px 3px 3px 0;
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.file_state { .file_state {
padding: 5px; padding: 3px 3px 3px 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 40px; width: 40px;
@ -84,7 +81,7 @@
} }
.file_control { .file_control {
padding: 5px; padding: 3px 3px 3px 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 18px; width: 18px;

4
client/helpers/ajax.js
View File

@ -43,7 +43,7 @@ export function http_post(url, data, type = 'json', params){
data = JSON.stringify(data); data = JSON.stringify(data);
xhr.setRequestHeader('Content-Type', 'application/json'); xhr.setRequestHeader('Content-Type', 'application/json');
} }
if (params !== undefined && params.progress) { if (params && params.progress) {
xhr.upload.addEventListener("progress", params.progress, false); xhr.upload.addEventListener("progress", params.progress, false);
} }
xhr.send(data); xhr.send(data);
@ -68,7 +68,7 @@ export function http_post(url, data, type = 'json', params){
xhr.onerror = function(){ xhr.onerror = function(){
handle_error_response(xhr, err) handle_error_response(xhr, err)
} }
if (params !== undefined && params.abort) { if (params && params.abort) {
params.abort(() => { params.abort(() => {
xhr.abort(); xhr.abort();
err({ message: 'aborted' }); err({ message: 'aborted' });