Merge branch 'nb/individual-progress'

client/components/ProgressBar.js

@@ -9,8 +9,11 @@ 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-failed': failed,
+      'progress-bar-in-progress': inProgress,
+      'progress-bar-small': this.props.small
     })
 
     const formatted = formatProgress(this.props.value)
@@ -18,17 +21,23 @@ export default class ProgressBar extends React.Component {
     return <div className={classes}>
       {failed
         ? <div className="progress-bar-text">Failed</div>
-        : <div
+        : inProgress ? <div
           className="progress-bar-inner"
           style={{width: formatted}}>
           <div className="progress-bar-text">
             {formatted}
           </div>
-        </div>}
+        </div>
+        : <div className="progress-bar-text">Done</div>}
       </div>
   }
 }
 
 ProgressBar.propTypes = {
-  value: React.PropTypes.number.isRequired
+  value: React.PropTypes.number.isRequired,
+  small: React.PropTypes.boolean
+}
+
+ProgressBar.defaultProps = {
+  small: false
 }

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,17 +60,20 @@ export default class UploadPage extends React.Component {
         </div>
 
       case 'uploading':
+        var keys = Object.keys(this.state.peerProgress)
+        keys.reverse()
         return <div className="page">
-
           <Spinner dir="up" animated {...this.state.file} />
 
-          <Tempalink token={this.state.token} />
           <p>Send someone this link to download.</p>
           <p>This link will work as long as this page is open.</p>
+          <Tempalink token={this.state.token} />
 
+          {keys.length > 0 ? <p>People Downloading Your File</p> : <p></p>}
           <div className="data">
-            <div className="datum"><strong>In Progress:</strong> {this.state.inProgress}</div>
-            <div className="datum"><strong>Completed:</strong> {this.state.completed}</div>
+            { keys.map((key) => {
+              return <ProgressBar value={this.state.peerProgress[key]} small />
+            })}
           </div>
 
         </div>

client/stores/UploadStore.js

@@ -12,9 +12,7 @@ export default alt.createStore(class UploadStore {
     this.status = 'ready'
     this.token = null
     this.file = null
-
-    this.inProgress = 0
-    this.completed = 0
+    this.peerProgress = {}
   }
 
   onUploadFile(file) {
@@ -49,22 +47,24 @@ export default alt.createStore(class UploadStore {
       let packet = this.file.getChunk(i)
       conn.send(packet)
       i++
+      this.peerProgress[peerID] = i/totalChunks
     }
 
     conn.on('open', () => {
-      this.setState({ inProgress: this.inProgress + 1 })
       sendNextChunk()
+      this.setState({ peerProgress: this.peerProgress })
     })
 
     conn.on('data', (data) => {
       if (data === 'more') sendNextChunk()
+      this.setState({ peerProgress: this.peerProgress })
     })
 
     conn.on('close', () => {
-      this.setState({
-        inProgress: this.inProgress - 1,
-        completed: this.completed + (i === totalChunks ? 1 : 0)
-      })
+      if (this.peerProgress[peerID] < 1) {
+        this.peerProgress[peerID] = -1
+      }
+      this.setState({ peerProgress: this.peerProgress })
     })
   }
 

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 {
@@ -171,7 +172,7 @@ p {
 .progress-bar {
     height: 60px
     overflow: hidden
-    background: beige
+    background: green
 
     .progress-bar-inner {
         float: left
@@ -182,10 +183,9 @@ p {
     }
 
     .progress-bar-text {
-        float: right
         font: 14px/60px "Quicksand", sans-serif
         color: white
-        margin-right: 5px
+        text-align: center
         text-transform: uppercase
     }
 
@@ -194,9 +194,32 @@ p {
         box-shadow: inset 0 1px 1px light-red, 0 1px 1px light-gray
 
         .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
+        }
+
+        .progress-bar-text {
+            color: black
+            float: right
+            margin-right: 5px
+        }
+    }
+
+    &.progress-bar-small {
+        height: 30px
+        width: 50%
+        margin: 8px auto
+        border-radius: 5px
+
+        .progress-bar-text {
+            line-height: 30px
         }
     }
 }