Evo: improve drag & drop file flow

opendatacam · Jun 5, 2020 · 355acc9 · 355acc9
1 parent b3354f7
commit 355acc9
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 8 deletions.
diff --git a/components/MainPage.js b/components/MainPage.js
@@ -22,6 +22,14 @@ import TrackerAccuracyView from './shared/TrackerAccuracyView';
 
 class MainPage extends React.PureComponent {
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      droppedFile: false
+    }
+  }
+
   componentDidMount() {
     this.props.dispatch(initViewportListeners());
     // TODO Handle specifying canvas size + resizing here, copy from beatthetraffic
@@ -34,7 +42,9 @@ class MainPage extends React.PureComponent {
 
   onDrop(event) {
     event.preventDefault();
-    console.log('drop');
+    this.setState({
+      droppedFile: true
+    });
     var formData = new FormData();
     formData.append("video", event.dataTransfer.files[0]);
     axios.post('/files', formData, {
@@ -43,10 +53,16 @@ class MainPage extends React.PureComponent {
         }
     }).then(() => {
       console.log('success');
+      this.setState({
+        droppedFile: false
+      });
       // Todo here
       // Ping API endpoint to restart YOLO on this file
     },(error) => {
       console.log('error')
+      this.setState({
+        droppedFile: false
+      });
     })
   }
 
@@ -62,9 +78,18 @@ class MainPage extends React.PureComponent {
           <AskLandscape />
         }
         {!this.props.isListeningToYOLO &&
-          <InitializingView requestedFileRecording={this.props.requestedFileRecording} />
+          <InitializingView
+            requestedFileRecording={this.props.requestedFileRecording}
+            droppedFile={this.state.droppedFile}
+          />
+        }
+        {this.props.isListeningToYOLO && this.state.droppedFile &&
+          <InitializingView
+            requestedFileRecording={this.props.requestedFileRecording}
+            droppedFile={this.state.droppedFile}
+          />
         }
-        {this.props.isListeningToYOLO &&
+        {this.props.isListeningToYOLO && !this.state.droppedFile &&
           <>
             <UIControls />
             {this.props.showMenu &&  

diff --git a/components/shared/InitializingView.js b/components/shared/InitializingView.js
@@ -33,12 +33,15 @@ class InitializingView extends Component {
   render () {
     return (
       <div className="initializing-view pt-20 pb-20 pr-12 pl-12">
-        {!this.props.requestedFileRecording &&
-          <h2 className="text-white text-3xl font-bold">Initializing Open Data Cam</h2>
+        {!this.props.requestedFileRecording && !this.props.droppedFile &&
+          <h2 className="text-white text-3xl font-bold">Initializing OpenDataCam</h2>
         }
         {this.props.requestedFileRecording &&
           <h2 className="text-white text-3xl font-bold">Restarting to process video file {this.props.fileName.split("/").pop()}</h2>
         }
+        {this.props.droppedFile &&
+          <h2 className="text-white text-3xl font-bold">Uploading and restarting on dropped video file</h2>
+        }
         <div className="w-1/5 mt-5 h-5 progress-bar rounded overflow-hidden">
           <div className="shadow w-full h-full bg-gray-900">
             <div

diff --git a/server.js b/server.js
@@ -978,24 +978,30 @@ app.prepare()
         res.sendStatus(500);
         return;
       }
-  
+
       // Everything went fine.
       console.log('File upload done');
 
+
       // Restart YOLO
       console.log('Stop YOLO');
+      Opendatacam.stopRecording();
       YOLO.stop().then(() => {
         console.log('YOLO stopped');
-        // TODO set run on file 
+        // TODO set run on file
         console.log(req.file.path);
         YOLO.init(false, req.file.path);
         YOLO.start();
+        Opendatacam.recordingStatus.filename = req.file.filename;
       },(error) => {
         console.log('YOLO does not stop')
         console.log(error);
       });
 
       res.json(req.file.path);
+
+
+
     })
   })
 

diff --git a/server/Opendatacam.js b/server/Opendatacam.js
@@ -328,7 +328,7 @@ module.exports = {
     if(Opendatacam.recordingStatus.isRecording) {
       // Only record from frame 25 for files, we can't be sure darknet has hooked to opendatacam before
       if(Opendatacam.recordingStatus.filename.length > 0 && frameId < 25) {
-        console.log('do not persist yet for file, wait for frameId 25')
+        // console.log('do not persist yet for file, wait for frameId 25')
         // console.log(frameId);
       } else {
         // and send bad JSON objects