merge

1 files changed, 24 insertions, 3 deletions

diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx
index acf728ebb..8c5255f80 100644
--- a/src/client/views/nodes/LoadingBox.tsx
+++ b/src/client/views/nodes/LoadingBox.tsx
@@ -1,7 +1,10 @@
+import { action, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import ReactLoading from 'react-loading';
+import { Doc } from '../../../fields/Doc';
 import { StrCast } from '../../../fields/Types';
+import { Networking } from '../../Network';
 import { ViewBoxAnnotatableComponent } from '../DocComponent';
 import { FieldView, FieldViewProps } from './FieldView';
 import './LoadingBox.scss';
@@ -33,13 +36,31 @@ export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return FieldView.LayoutString(LoadingBox, fieldKey);
     }
 
+    _timer: any;
+    @observable progress = '';
+    componentDidMount() {
+        if (!Doc.CurrentlyLoading?.includes(this.rootDoc)) {
+            this.rootDoc.loadingError = 'Upload interrupted, please try again';
+        } else {
+            const updateFunc = async () => {
+                const result = await Networking.QueryYoutubeProgress(StrCast(this.rootDoc.title));
+                runInAction(() => (this.progress = result.progress));
+                this._timer = setTimeout(updateFunc, 1000);
+            };
+            this._timer = setTimeout(updateFunc, 1000);
+        }
+    }
+    componentWillUnmount() {
+        clearTimeout(this._timer);
+    }
+
     render() {
         return (
-            <div className="loadingBoxContainer" style={{ background: this.rootDoc.isLoading ? '' : 'red' }}>
+            <div className="loadingBoxContainer" style={{ background: !this.rootDoc.loadingError ? '' : 'red' }}>
                 <div className="textContainer">
-                    <p className="headerText">{this.rootDoc.isLoading ? 'Loading (can take several minutes):' : StrCast(this.rootDoc.errorMessage, 'Error Loading File:')}</p>
+                    <p className="headerText">{StrCast(this.rootDoc.loadingError, 'Loading ' + (this.progress.replace('[download]', '') || '(can take several minutes)'))}</p>
                     <span className="text">{StrCast(this.rootDoc.title)}</span>
-                    {!this.rootDoc.isLoading ? null : <ReactLoading type={'spinningBubbles'} color={'blue'} height={100} width={100} />}
+                    {this.rootDoc.loadingError ? null : <ReactLoading type={'spinningBubbles'} color={'blue'} height={100} width={100} />}
                 </div>
             </div>
         );