colorful, updating status message

vocodes/src/modes/video/VideoComponent.tsx

@@ -120,12 +120,40 @@ class VideoComponent extends React.Component<Props, State> {
     let videoResults = <div></div>;
 
     if (this.props.currentVideoJob !== undefined) {
-      let downloadUrl = this.props.currentVideoJob.getVideoDownloadUrl() || "";
+      let videoJob = this.props.currentVideoJob!;
+      let downloadUrl = videoJob.getVideoDownloadUrl() || "";
+
+      let statusTitle = "Waiting";
+      let statusClassName = "message is-primary";
+
+      switch (videoJob.jobStatus) {
+        case VideoJobStatus.Pending:
+          statusTitle = "Waiting In Line";
+          statusClassName = "message is-warning"; // yellow
+          break;
+        case VideoJobStatus.Started:
+          statusTitle = "Now Processing";
+          statusClassName = "message is-info"; // light blue
+          break;
+        case VideoJobStatus.Completed:
+          statusTitle = "Success!";
+          statusClassName = "message is-success"; // green
+          break;
+        case VideoJobStatus.Failed:
+          statusTitle = "Failed :(";
+          statusClassName = "message is-danger"; // red
+          break;
+      }
+
       videoResults = (
-        <article className="message is-warning">
+        <article className={statusClassName}>
+          <div className="message-header">
+            <p>{statusTitle}</p>
+          </div>
           <div className="message-body">
             <p>Your results are currently processing and may take awhile.
             Open this URL in a new tab and keep it open:</p>
+
             <p><a 
               href={downloadUrl} 
               rel="noopener noreferrer"
@@ -149,6 +177,8 @@ class VideoComponent extends React.Component<Props, State> {
 
         <VideoStatsComponent />
 
+        {videoResults}
+
         <div className="content is-size-4">
           <p>
             Upload audio from vo.codes or any other source and pick a video template 
@@ -157,12 +187,10 @@ class VideoComponent extends React.Component<Props, State> {
           </p>
         </div>
 
-        {videoResults}
-
         <form onSubmit={this.handleFormSubmit}>
 
           <div className="upload-box">
-            <div className="file has-name is-boxed is-large">
+            <div className="file has-name is-large">
               <label className="file-label">
                 <input 
                   type="file" 
@@ -175,7 +203,7 @@ class VideoComponent extends React.Component<Props, State> {
                     <i className="fas fa-upload"></i>
                   </span>
                   <span className="file-label">
-                    Choose a file…
+                    Choose a file&hellip;
                   </span>
                 </span>
                 <span className="file-name">

vocodes/src/poller/AbstractPoller.ts

@@ -3,6 +3,7 @@ abstract class AbstractPoller {
 
   private isCurrentlyPolling: boolean;
   private pollingIntervalMillis: number;
+  private timeoutRef?: ReturnType<typeof setTimeout>;
 
   constructor(pollingIntervalMillis: number) {
     this.isCurrentlyPolling = false;
@@ -13,12 +14,16 @@ abstract class AbstractPoller {
   abstract performPollAction() : void;
 
   start() {
+    if (this.isPolling()) return;
     this.isCurrentlyPolling = true;
-    setTimeout(() => this.dispatchPoll(), this.pollingIntervalMillis);
+    this.timeoutRef = setTimeout(() => this.dispatchPoll(), this.pollingIntervalMillis);
   }
 
   stop() {
     this.isCurrentlyPolling = false;
+    if (this.timeoutRef !== undefined) {
+      clearTimeout(this.timeoutRef);
+    }
   }
 
   isPolling() : boolean {
@@ -26,12 +31,11 @@ abstract class AbstractPoller {
   }
 
   private dispatchPoll(): void {
-    if (this.isPolling()) {
-      this.performPollAction();
-    }
-    if (this.isPolling()) {
-      setTimeout(() => this.dispatchPoll(), this.pollingIntervalMillis);
-    }
+    if (!this.isPolling()) return;
+    this.performPollAction();
+
+    if (!this.isPolling()) return;
+    this.timeoutRef = setTimeout(() => this.dispatchPoll(), this.pollingIntervalMillis);
   }
 }