@imposium-hub/components 1.42.3 → 1.42.4

package/components/story-previewer/StoryPreviewer.tsx

@@ -46,13 +46,14 @@ interface IStoryPreviewerState {
     rendering : boolean;
     activeOutput : string;
     timeElapsed : number;
+    isTimeOut : boolean;
 }
 
 class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPreviewerState> {
 
     private timer : Timer;
     private evtHandlers : any;
-
+    private TIMEOUT : string = '02:00';
     constructor(props) {
 
         super(props);
@@ -68,7 +69,8 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
             experience: null,
             timeElapsed: 0,
             activeOutput: '',
-            rendering: false
+            rendering: false,
+            isTimeOut: false,
         };
 
         this.timer = new Timer({
@@ -207,6 +209,25 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                 inventory
             });
         }
+
+        if (prevState.timeElapsed !== this.state.timeElapsed) {
+            if (formattedTime(this.state.timeElapsed) === this.TIMEOUT && !this.state.experience) {
+
+                const {onError, api} = this.props;
+                const {experienceId} = this.state;
+
+                api.cancelExperiencePolling()
+                    .then(() => {
+
+                        onError(copy.runExpError.replace('[expId]', experienceId));
+
+                        this.resetState(true, () => {
+                            this.setState({isTimeOut: true});
+                        });
+
+                    });
+            }
+        }
     }
 
     private variableInputChanged(key, value) {
@@ -395,7 +416,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                             this.setState({
                                 rendering: false,
                                 activeOutput: this.getFirstOutput(resVideo),
-                                experience: resVideo
+                                experience: resVideo,
                             });
                         };
 
@@ -408,7 +429,11 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                         }).catch((e) => {
                             this.resetState();
                             if (onError) {
-                                onError(copy.runExpError.replace('[expId]', experienceId));
+                                if (e.error) {
+                                  onError(e.error);
+                                } else {
+                                    onError(copy.runExpError.replace('[expId]', experienceId));
+                                }
                             }
                         });
 
@@ -436,7 +461,6 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                     };
 
                     api.getExperience(experienceId, true).then((resVideo) => {
-
                         if (this.evtHandlers.gotExperience) {
                             this.evtHandlers.gotExperience(resVideo);
                         }
@@ -444,7 +468,11 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                     }).catch((e) => {
                         this.resetState();
                         if (onError) {
-                            onError(copy.runExpError.replace('[expId]', experienceId));
+                          if (e.error) {
+                            onError(e.error);
+                          } else {
+                              onError(copy.runExpError.replace('[expId]', experienceId));
+                          }
                         }
                     });
                 }
@@ -456,9 +484,10 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
 
         const {storyId, onNotification, onError, api, onExperienceCreated, compositionId, useWorkingCopy} = this.props;
 
-        this.resetState(() => {
+        this.resetState(false, () => {
             this.setState({
-                rendering: true
+                rendering: true,
+                isTimeOut: false,
             }, () => {
 
                 this.timer.start();
@@ -492,15 +521,16 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         });
     }
 
-    private resetState(callback?) {
+    private resetState(isTimeOut? : boolean, callback?) {
         this.timer.stop();
         this.setState({
             rendering: false,
             experienceId: null,
             experience: null,
             jobId: null,
-            timeElapsed: 0,
+            timeElapsed: !isTimeOut ? 0 : this.state.timeElapsed,
             activeOutput: null,
+            isTimeOut
         }, () => {
             if (callback) {
                 callback();
@@ -510,7 +540,8 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
 
     private renderViewerContent() {
 
-        const {rendering, experience, timeElapsed, activeOutput } = this.state;
+        const {rendering, experience, timeElapsed, activeOutput, isTimeOut } = this.state;
+
         const { api, onError } = this.props;
 
         if (rendering) {
@@ -519,6 +550,13 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                 <h1>&nbsp; {copy.expRunning }</h1>
                 <p>{copy.time}&nbsp;{formattedTime(timeElapsed)}</p>
             </div>;
+        } else if (isTimeOut || isTimeOut === undefined) {
+            return  (
+                <div className = 'running-prompt error-wrapper'>
+                    <h1>&nbsp; {copy.runExpErrorDes}</h1>
+                    <p>{copy.time}&nbsp;{formattedTime(timeElapsed)}</p>
+                </div>
+            );
         } else if (experience && activeOutput) {
 
             let player;

package/constants/copy.ts

@@ -55,7 +55,8 @@ export const previewer = {
     btnLog: 'Job Log',
     btnRender: 'Render',
     btnReRender: 'Re-Render',
-    expIdField: 'Exp. ID'
+    expIdField: 'Exp. ID',
+    runExpErrorDes: 'Sorry, there was a problem creating your video. Please try again.'
 };
 
 export const compositions = {