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
+ }
+ }
}