[ADD] Initial logic on rendering => saving feedback + conditional ren…

…dering of spinner component + cleanup
visgl · Jan 5, 2021 · d730a43 · d730a43
1 parent d413403
commit d730a43
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 17 deletions.
diff --git a/modules/react/src/components/export-video/export-video-panel-preview.js b/modules/react/src/components/export-video/export-video-panel-preview.js
@@ -187,16 +187,6 @@ export class ExportVideoPanelPreview extends Component {
       position: 'relative'
     };
 
-    const loaderStyle = {
-      display: rendering === false ? 'none' : 'flex',
-      position: 'absolute',
-      background: 'rgba(0, 0, 0, 0.5)',
-      width: `${exportVideoWidth}px`,
-      height: `${this._getContainerHeight()}px`,
-      alignItems: 'center',
-      justifyContent: 'center'
-    };
-
     return (
       <>
         <div id="deck-canvas" style={containerStyle}>
@@ -224,7 +214,15 @@ export class ExportVideoPanelPreview extends Component {
             )}
           </DeckGL>
         </div>
-        <RenderingSpinner loaderStyle={loaderStyle} adapter={adapter} durationMs={durationMs} />
+        {rendering && (
+          <RenderingSpinner
+            rendering={rendering}
+            exportVideoWidth={exportVideoWidth}
+            _getContainerHeight={this._getContainerHeight()}
+            adapter={adapter}
+            durationMs={durationMs}
+          />
+        )}
       </>
     );
   }

diff --git a/modules/react/src/components/export-video/rendering-spinner.js b/modules/react/src/components/export-video/rendering-spinner.js
@@ -1,21 +1,62 @@
 import {WithKeplerUI} from '../inject-kepler';
 import React from 'react';
 
-export function RenderingSpinner(props) {
+export function RenderingSpinner({
+  rendering,
+  exportVideoWidth,
+  _getContainerHeight,
+  adapter,
+  durationMs
+}) {
+  const startTimer = Date.now();
+
+  const loaderStyle = {
+    display: rendering === false ? 'none' : 'flex',
+    position: 'absolute',
+    background: 'rgba(0, 0, 0, 0.5)',
+    width: `${exportVideoWidth}px`,
+    height: `${_getContainerHeight}px`,
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+
   return (
     <WithKeplerUI>
       {({LoadingSpinner}) => (
-        <div className="loader" style={props.loaderStyle}>
+        <div className="loader" style={loaderStyle}>
           <LoadingSpinner />
           {/* TODO change text styling to match Kepler's */}
           <div
             className="rendering-percent"
             style={{color: 'white', position: 'absolute', top: '175px'}}
           >
-            {/* TODO make conditional 100% and fix video-capture */}
-            {Math.floor((props.adapter.videoCapture.timeMs / props.durationMs) * 100).toFixed(0)} %
-            {/* TODO conditional "Saving..." message after rendering done */}
-            {/* TODO conditional "Saving...Hang Tight" message after 10s */}
+            <div
+              className="rendering-percent"
+              style={{
+                display: adapter.videoCapture._getNextTimeMs() < durationMs ? 'flex' : 'none'
+              }}
+            >
+              {Math.floor((adapter.videoCapture.timeMs / durationMs) * 100).toFixed(0)} %
+            </div>
+            <div
+              className="saving-message"
+              style={{
+                display: adapter.videoCapture._getNextTimeMs() < durationMs ? 'none' : 'flex'
+              }}
+            >
+              Saving...
+            </div>
+            {/* TODO look at usememo for value of startTimer. setTimeout? useEffect hook to run once. Ultimately want a boolean */}
+            <div
+              className="saving-message-delayed"
+              style={{
+                display:
+                  Date.now() - startTimer > 10000 + adapter.videoCapture.timeMs ? 'flex' : 'none'
+              }}
+            >
+              {/* Appears after "Saving..." message has been showing for at least 10s */}
+              Saving...Hang Tight.
+            </div>
           </div>
         </div>
       )}