From efe8836d77cc7c9953e1ed02e45b2990363e0404 Mon Sep 17 00:00:00 2001 From: Neeraj Baid Date: Fri, 17 Apr 2015 15:55:16 -0700 Subject: [PATCH 1/8] Keep Object of all peers and their associated progress. --- client/stores/UploadStore.js | 33 ++++++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/client/stores/UploadStore.js b/client/stores/UploadStore.js index ebf99fd..544ce31 100644 --- a/client/stores/UploadStore.js +++ b/client/stores/UploadStore.js @@ -13,8 +13,7 @@ export default alt.createStore(class UploadStore { this.token = null this.file = null - this.inProgress = 0 - this.completed = 0 + this.peerProgress = {} } onUploadFile(file) { @@ -45,15 +44,39 @@ export default alt.createStore(class UploadStore { let i = 0 let sendNextChunk = () => { + this.peerProgress[peerID] = i/totalChunks if (i === totalChunks) return let packet = this.file.getChunk(i) conn.send(packet) i++ + this.peerProgress[peerID] = i/totalChunks + } + + let numInProgess = () => { + var keys = Object.keys(this.peerProgress) + var num = 0 + for (var k = 0; k < keys.length; k++) { + if (this.peerProgress[keys[k]] < 1) { + num++ + } + } + return num + } + + let numCompleted = () => { + var keys = Object.keys(this.peerProgress) + var num = 0 + for (var k = 0; k < keys.length; k++) { + if (this.peerProgress[keys[k]] == 1) { + num++ + } + } + return num } conn.on('open', () => { - this.setState({ inProgress: this.inProgress + 1 }) sendNextChunk() + this.setState({ inProgress: numInProgess()}) }) conn.on('data', (data) => { @@ -62,8 +85,8 @@ export default alt.createStore(class UploadStore { conn.on('close', () => { this.setState({ - inProgress: this.inProgress - 1, - completed: this.completed + (i === totalChunks ? 1 : 0) + inProgress: numInProgess(), + completed: numCompleted() }) }) } From 8679143a3451b4b6ce8f033ffc3faebb3a9083a2 Mon Sep 17 00:00:00 2001 From: Neeraj Baid Date: Fri, 17 Apr 2015 16:36:04 -0700 Subject: [PATCH 2/8] Show one progress bar for each peer. --- client/components/ProgressBar.js | 10 ++++++++-- client/components/UploadPage.js | 17 +++++++++++++++-- client/stores/UploadStore.js | 32 +++----------------------------- css/index.styl | 11 +++++++++++ 4 files changed, 37 insertions(+), 33 deletions(-) diff --git a/client/components/ProgressBar.js b/client/components/ProgressBar.js index ee25037..730cae3 100644 --- a/client/components/ProgressBar.js +++ b/client/components/ProgressBar.js @@ -10,7 +10,8 @@ export default class ProgressBar extends React.Component { render() { const failed = this.props.value < 0; const classes = classnames('progress-bar', { - 'progress-bar-failed': failed + 'progress-bar-failed': failed, + 'progress-bar-small': this.props.small }) const formatted = formatProgress(this.props.value) @@ -30,5 +31,10 @@ export default class ProgressBar extends React.Component { } ProgressBar.propTypes = { - value: React.PropTypes.number.isRequired + value: React.PropTypes.number.isRequired, + small: React.PropTypes.boolean +} + +ProgressBar.defaultProps = { + small: false } diff --git a/client/components/UploadPage.js b/client/components/UploadPage.js index 0397435..a53d717 100644 --- a/client/components/UploadPage.js +++ b/client/components/UploadPage.js @@ -1,5 +1,6 @@ import Spinner from './Spinner' import DropZone from './DropZone' +import ProgressBar from './ProgressBar' import React from 'react' import Tempalink from './Tempalink' import UploadActions from '../actions/UploadActions' @@ -59,6 +60,17 @@ export default class UploadPage extends React.Component { case 'uploading': + var keys = Object.keys(this.state.peerProgress) + var numInProgress = 0 + var numCompleted = 0 + for (var k = 0; k < keys.length; k++) { + if (this.state.peerProgress[keys[k]] < 1) { + numInProgress++ + } else { + numCompleted++ + } + } + return
@@ -68,8 +80,9 @@ export default class UploadPage extends React.Component {

This link will work as long as this page is open.

-
In Progress: {this.state.inProgress}
-
Completed: {this.state.completed}
+ { Object.keys(this.state.peerProgress).map((key) => { + return + })}
diff --git a/client/stores/UploadStore.js b/client/stores/UploadStore.js index 544ce31..848ce97 100644 --- a/client/stores/UploadStore.js +++ b/client/stores/UploadStore.js @@ -12,7 +12,6 @@ export default alt.createStore(class UploadStore { this.status = 'ready' this.token = null this.file = null - this.peerProgress = {} } @@ -44,7 +43,6 @@ export default alt.createStore(class UploadStore { let i = 0 let sendNextChunk = () => { - this.peerProgress[peerID] = i/totalChunks if (i === totalChunks) return let packet = this.file.getChunk(i) conn.send(packet) @@ -52,42 +50,18 @@ export default alt.createStore(class UploadStore { this.peerProgress[peerID] = i/totalChunks } - let numInProgess = () => { - var keys = Object.keys(this.peerProgress) - var num = 0 - for (var k = 0; k < keys.length; k++) { - if (this.peerProgress[keys[k]] < 1) { - num++ - } - } - return num - } - - let numCompleted = () => { - var keys = Object.keys(this.peerProgress) - var num = 0 - for (var k = 0; k < keys.length; k++) { - if (this.peerProgress[keys[k]] == 1) { - num++ - } - } - return num - } - conn.on('open', () => { sendNextChunk() - this.setState({ inProgress: numInProgess()}) + this.setState({ peerProgress: this.peerProgress }) }) conn.on('data', (data) => { if (data === 'more') sendNextChunk() + this.setState({ peerProgress: this.peerProgress }) }) conn.on('close', () => { - this.setState({ - inProgress: numInProgess(), - completed: numCompleted() - }) + this.setState({ peerProgress: this.peerProgress }) }) } diff --git a/css/index.styl b/css/index.styl index f05c192..363dafe 100644 --- a/css/index.styl +++ b/css/index.styl @@ -199,4 +199,15 @@ p { margin-right: 0 } } + + &.progress-bar-small { + height: 30px + width: 50% + margin: 8px auto + border-radius: 5px + + .progress-bar-text { + line-height: 30px + } + } } From d2386356e5b632d571e150aaa2288afc6286154c Mon Sep 17 00:00:00 2001 From: Neeraj Baid Date: Fri, 17 Apr 2015 16:41:23 -0700 Subject: [PATCH 3/8] Store failed connections in peerProgress too. --- client/stores/UploadStore.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/client/stores/UploadStore.js b/client/stores/UploadStore.js index 848ce97..07f2198 100644 --- a/client/stores/UploadStore.js +++ b/client/stores/UploadStore.js @@ -61,6 +61,9 @@ export default alt.createStore(class UploadStore { }) conn.on('close', () => { + if (this.peerProgress[peerID] < 1) { + this.peerProgress[peerID] = -1 + } this.setState({ peerProgress: this.peerProgress }) }) } From 43feff759d7edeb0fffbbde15e7a616c1af4e773 Mon Sep 17 00:00:00 2001 From: Neeraj Baid Date: Fri, 17 Apr 2015 16:55:49 -0700 Subject: [PATCH 4/8] Yellow progress bar while download is in progress. --- client/components/ProgressBar.js | 2 ++ client/components/UploadPage.js | 4 ++-- css/index.styl | 13 +++++++++++++ 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/client/components/ProgressBar.js b/client/components/ProgressBar.js index 730cae3..0ec874a 100644 --- a/client/components/ProgressBar.js +++ b/client/components/ProgressBar.js @@ -9,8 +9,10 @@ export default class ProgressBar extends React.Component { render() { const failed = this.props.value < 0; + const inProgress = this.props.value < 1 && this.props.value > 0; const classes = classnames('progress-bar', { 'progress-bar-failed': failed, + 'progress-bar-in-progress': inProgress, 'progress-bar-small': this.props.small }) diff --git a/client/components/UploadPage.js b/client/components/UploadPage.js index a53d717..4b118c6 100644 --- a/client/components/UploadPage.js +++ b/client/components/UploadPage.js @@ -70,7 +70,7 @@ export default class UploadPage extends React.Component { numCompleted++ } } - + keys.reverse() return
@@ -80,7 +80,7 @@ export default class UploadPage extends React.Component {

This link will work as long as this page is open.

- { Object.keys(this.state.peerProgress).map((key) => { + { keys.map((key) => { return })}
diff --git a/css/index.styl b/css/index.styl index 363dafe..b5986e9 100644 --- a/css/index.styl +++ b/css/index.styl @@ -6,6 +6,7 @@ light-blue = #40C0CB light-gray = #EEE light-green = #AEE239 light-red = #E23430 +light-yellow = #FFE476 red = #C40D08 @keyframes rotate { @@ -200,6 +201,18 @@ p { } } + &.progress-bar-in-progress { + + .progress-bar-inner { + background: #FFCC00 + box-shadow: inset 0 1px 1px light-yellow + } + + .progress-bar-text { + color: black + } + } + &.progress-bar-small { height: 30px width: 50% From c981de56123cb4fa4450ac440b940e58212f1bfc Mon Sep 17 00:00:00 2001 From: Neeraj Baid Date: Fri, 17 Apr 2015 17:05:03 -0700 Subject: [PATCH 5/8] Show DONE status when download is complete. --- client/components/ProgressBar.js | 5 +++-- css/index.styl | 13 ++++++++----- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/client/components/ProgressBar.js b/client/components/ProgressBar.js index 0ec874a..bcad106 100644 --- a/client/components/ProgressBar.js +++ b/client/components/ProgressBar.js @@ -21,13 +21,14 @@ export default class ProgressBar extends React.Component { return
{failed ?
Failed
- :
{formatted}
-
} +
+ :
Done
}
} } diff --git a/css/index.styl b/css/index.styl index b5986e9..9d7abc4 100644 --- a/css/index.styl +++ b/css/index.styl @@ -172,7 +172,7 @@ p { .progress-bar { height: 60px overflow: hidden - background: beige + background: green .progress-bar-inner { float: left @@ -183,10 +183,12 @@ p { } .progress-bar-text { - float: right + float: none + margin-right: 0 + font: 14px/60px "Quicksand", sans-serif color: white - margin-right: 5px + text-align: center text-transform: uppercase } @@ -197,12 +199,11 @@ p { .progress-bar-text { float: none text-align: center - margin-right: 0 } } &.progress-bar-in-progress { - + background: beige .progress-bar-inner { background: #FFCC00 box-shadow: inset 0 1px 1px light-yellow @@ -210,6 +211,8 @@ p { .progress-bar-text { color: black + float: right + margin-right: 5px } } From ff34ef02fa268b63b0223f416490df98e097785f Mon Sep 17 00:00:00 2001 From: Neeraj Baid Date: Fri, 17 Apr 2015 17:06:15 -0700 Subject: [PATCH 6/8] Minor cleanup. --- css/index.styl | 4 ---- 1 file changed, 4 deletions(-) diff --git a/css/index.styl b/css/index.styl index 9d7abc4..4f68b2d 100644 --- a/css/index.styl +++ b/css/index.styl @@ -183,9 +183,6 @@ p { } .progress-bar-text { - float: none - margin-right: 0 - font: 14px/60px "Quicksand", sans-serif color: white text-align: center @@ -197,7 +194,6 @@ p { box-shadow: inset 0 1px 1px light-red, 0 1px 1px light-gray .progress-bar-text { - float: none text-align: center } } From 890ea58065afd1fb27375dbc3b2a0bcacbe63490 Mon Sep 17 00:00:00 2001 From: Neeraj Baid Date: Fri, 17 Apr 2015 17:09:34 -0700 Subject: [PATCH 7/8] Remove unused code. --- client/components/UploadPage.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/client/components/UploadPage.js b/client/components/UploadPage.js index 4b118c6..362e03a 100644 --- a/client/components/UploadPage.js +++ b/client/components/UploadPage.js @@ -61,15 +61,6 @@ export default class UploadPage extends React.Component { case 'uploading': var keys = Object.keys(this.state.peerProgress) - var numInProgress = 0 - var numCompleted = 0 - for (var k = 0; k < keys.length; k++) { - if (this.state.peerProgress[keys[k]] < 1) { - numInProgress++ - } else { - numCompleted++ - } - } keys.reverse() return
From 95bc5695e3767a6371a84d496d28201c4f613387 Mon Sep 17 00:00:00 2001 From: Neeraj Baid Date: Fri, 17 Apr 2015 17:17:09 -0700 Subject: [PATCH 8/8] Title the progress bars. --- client/components/UploadPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/components/UploadPage.js b/client/components/UploadPage.js index 362e03a..0999192 100644 --- a/client/components/UploadPage.js +++ b/client/components/UploadPage.js @@ -63,13 +63,13 @@ export default class UploadPage extends React.Component { var keys = Object.keys(this.state.peerProgress) keys.reverse() return
- -

Send someone this link to download.

This link will work as long as this page is open.

+ + {keys.length > 0 ?

People Downloading Your File

:

}
{ keys.map((key) => { return