remove react-progress-bar for react-bootstrap progressbar

js/components/ascribe_media/media_player.js

@@ -200,7 +200,8 @@ let MediaPlayer = React.createClass({
                         <br />You can leave this page and check back on the status later.</em>
                     </p>
                     <ProgressBar now={this.props.encodingStatus}
-                        label='%(percent)s%' />
+                        label="%(percent)s%"
+                        className="ascribe-progress-bar" />
                 </div>
             );
         } else {

js/components/ascribe_uploader/file_drag_and_drop.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import ProgressBar from 'react-progressbar';
+import ProgressBar from 'react-bootstrap/lib/ProgressBar';
 
 import FileDragAndDropDialog from './file_drag_and_drop_dialog';
 import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator';
@@ -171,10 +171,12 @@ let FileDragAndDrop = React.createClass({
                 <div className={className}>
                     <p>{getLangText('Computing hash(es)... This may take a few minutes.')}</p>
                     <p>
-                        <span>{Math.ceil(this.props.hashingProgress)}%</span>
                         <a onClick={this.props.handleCancelHashing}> {getLangText('Cancel hashing')}</a>
                     </p>
-                    <ProgressBar completed={this.props.hashingProgress} color="#48DACB"/>
+                    <ProgressBar
+                        now={Math.ceil(this.props.hashingProgress)}
+                        label="%(percent)s%"
+                        className="ascribe-progress-bar"/>
                 </div>
             );
         } else {

js/components/ascribe_uploader/file_drag_and_drop_preview_image.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import ProgressBar from 'react-progressbar';
+import ProgressBar from 'react-bootstrap/lib/ProgressBar';
 
 import AppConstants from '../../constants/application_constants';
 import { getLangText } from '../../utils/lang_utils.js';
@@ -60,7 +60,9 @@ let FileDragAndDropPreviewImage = React.createClass({
             <div
                 className="file-drag-and-drop-preview-image"
                 style={imageStyle}>
-                    <ProgressBar completed={this.props.progress} color="black"/>
+                    <ProgressBar
+                        now={Math.ceil(this.props.progress)}
+                        className="ascribe-progress-bar ascribe-progress-bar-xs"/>
                     {actionSymbol}
             </div>
         );

js/components/ascribe_uploader/file_drag_and_drop_preview_other.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import ProgressBar from 'react-progressbar';
+import ProgressBar from 'react-bootstrap/lib/ProgressBar';
 
 import AppConstants from '../../constants/application_constants';
 import { getLangText } from '../../utils/lang_utils.js';
@@ -55,7 +55,9 @@ let FileDragAndDropPreviewOther = React.createClass({
         return (
             <div
                 className="file-drag-and-drop-preview">
-                <ProgressBar completed={this.props.progress} color="black"/>
+                <ProgressBar
+                    now={Math.ceil(this.props.progress)}
+                    className="ascribe-progress-bar ascribe-progress-bar-xs"/>
                 <div className="file-drag-and-drop-preview-table-wrapper">
                     <div className="file-drag-and-drop-preview-other">
                         {actionSymbol}

js/components/ascribe_uploader/file_drag_and_drop_preview_progress.js

@@ -2,6 +2,8 @@
 
 import React from 'react';
 
+import ProgressBar from 'react-bootstrap/lib/ProgressBar';
+
 let FileDragAndDropPreviewProgress = React.createClass({
     propTypes: {
         files: React.PropTypes.array
@@ -10,7 +12,7 @@ let FileDragAndDropPreviewProgress = React.createClass({
     calcOverallProgress() {
         let overallProgress = 0;
         let sizeOfAllFiles = 0;
-        let files = this.props.files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
+        let files = this.props.files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.status !== 'online');
 
         for(let i = 0; i < files.length; i++) {
             sizeOfAllFiles += files[i].size;
@@ -29,10 +31,10 @@ let FileDragAndDropPreviewProgress = React.createClass({
 
         if(overallProgress !== 0) {
             return (
-                <span
+                <ProgressBar
-                    className="file-drag-and-drop-progress-time">
+                    now={Math.ceil(overallProgress)}
-                    Overall progress: {overallProgress.toFixed(2)}%
+                    label="Overall progress: %(percent)s%"
-                </span>
+                    className="ascribe-progress-bar" />
             );
         } else {
             return null;

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -161,7 +161,7 @@ var ReactS3FineUploader = React.createClass({
                 }
                 return name;
             },
-            multiple: false,
+            multiple: true,
             defaultErrorMessage: getLangText('Unexpected error. Please contact us if this happens repeatedly.')
         };
     },

package.json

@@ -73,9 +73,8 @@
     "q": "^1.4.1",
     "raven-js": "^1.1.19",
     "react": "^0.13.2",
-    "react-bootstrap": "^0.24.3",
+    "react-bootstrap": "^0.25.1",
     "react-datepicker": "^0.12.0",
-    "react-progressbar": "^1.1.0",
     "react-router": "^0.13.3",
     "react-router-bootstrap": "~0.16.0",
     "react-star-rating": "~1.3.2",

sass/main.scss

@@ -422,3 +422,14 @@ hr {
     padding-bottom: 30%;
     text-align: center;
 }
+
+.ascribe-progress-bar {
+    margin-bottom: 0;
+    > .progress-bar {
+        background-color: $ascribe-color-green;
+    }
+}
+
+.ascribe-progress-bar-xs {
+    height: 12px;
+}