@imposium-hub/components 1.45.5 → 1.46.0

package/src/components/story-previewer/StoryPreviewer.tsx

@@ -17,47 +17,44 @@ import MediaVariableField from '../media-variable-field/MediaVariableField';
 import { IExperience } from '../../interfaces/experience';
 import ReactResizeDetector from 'react-resize-detector';
 import { previewer as copy } from '../../constants/copy';
-import {ICON_VIDEO, ICON_IMAGE, ICON_STICKY_NOTE} from '../../constants/icons';
 import { formattedTime } from '../../Util';
 import Timer from '../../services/Timer';
 import LogViewer from '../log-viewer/LogViewer';
 import { connect } from 'react-redux';
 
 interface IStoryPreviewerProps {
-    api : IImposiumAPI;
-    storyId : string;
-    useWorkingCopy ? : boolean;
-    compositionId ? : string;
-    variables : any;
-    experienceId? : string;
-    jobId? : string;
-    onNotification?(n : string) : void;
-    onExperienceCreated?(exp : IExperience) : void;
-    onJobCreated?(expId : string, jobId : string) : void;
-    onExperenceLoaded?(exp : IExperience) : void;
-    onError?(n : string) : void;
-    notifications : any;
+    api: IImposiumAPI;
+    storyId: string;
+    useWorkingCopy?: boolean;
+    compositionId?: string;
+    variables: any;
+    experienceId?: string;
+    jobId?: string;
+    onNotification?(n: string): void;
+    onExperienceCreated?(exp: IExperience): void;
+    onJobCreated?(expId: string, jobId: string): void;
+    onExperenceLoaded?(exp: IExperience): void;
+    onError?(n: string): void;
+    notifications: any;
 }
 
 interface IStoryPreviewerState {
-    inventory : any;
-    inventoryOptions : any;
-    experienceId : string;
-    jobId : string;
-    experience : IExperience;
-    rendering : boolean;
-    activeOutput : string;
-    timeElapsed : number;
-    isTimeOut : boolean;
+    inventory: any;
+    inventoryOptions: any;
+    experienceId: string;
+    jobId: string;
+    experience: IExperience;
+    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';
+    private timer: Timer;
+    private evtHandlers: any;
+    private TIMEOUT: string = '02:00';
     constructor(props) {
-
         super(props);
 
         const inventory = this.getInventoryDefaults();
@@ -72,13 +69,13 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
             timeElapsed: 0,
             activeOutput: '',
             rendering: false,
-            isTimeOut: false,
+            isTimeOut: false
         };
 
         this.timer = new Timer({
             interval: 1000,
             onUpdate: (t) => {
-                this.setState({timeElapsed: t});
+                this.setState({ timeElapsed: t });
             }
         });
 
@@ -90,8 +87,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     }
 
     public componentWillUnmount() {
-        const {api, onError} = this.props;
-        const {experienceId} = this.state;
+        const { api } = this.props;
 
         this.timer.stop();
 
@@ -100,8 +96,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     }
 
     private getInventoryOptions() {
-
-        const {variables} = this.props;
+        const { variables } = this.props;
         const options = {};
 
         for (const i in variables) {
@@ -119,7 +114,6 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     }
 
     private getInventoryDefaults() {
-
         const { variables } = this.props;
         const newInv = {};
 
@@ -134,18 +128,15 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     }
 
     private checkInventoryDefaults(prevVariables) {
-
         const { variables } = this.props;
-        const newInv = {...this.state.inventory};
+        const newInv = { ...this.state.inventory };
 
         for (const i in variables) {
             if (variables.hasOwnProperty(i)) {
-
                 const newVar = variables[i];
                 const prevVar = prevVariables[i];
 
                 if (prevVar) {
-
                     const prevValue = this.getVariableValue(prevVar.previewItem);
                     const newValue = this.getVariableValue(newVar.previewItem);
 
@@ -160,12 +151,14 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     }
 
     private getVariableValue(previewItem) {
-
         if (previewItem && previewItem.type) {
-
             const type = previewItem.type.toLowerCase();
 
-            if (type === VARIABLE_TYPES.IMAGE || type === VARIABLE_TYPES.VIDEO || type === VARIABLE_TYPES.AUDIO) {
+            if (
+                type === VARIABLE_TYPES.IMAGE ||
+                type === VARIABLE_TYPES.VIDEO ||
+                type === VARIABLE_TYPES.AUDIO
+            ) {
                 return previewItem.url;
             } else {
                 return previewItem.src;
@@ -176,27 +169,26 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     }
 
     public componentDidMount() {
-
         // if the experience ID is set when the previewer is mounted, get that experience
         const { experienceId, jobId } = this.props;
         if (experienceId && jobId) {
-
-            this.setState({
-                jobId
-            }, () => {
-                this.getExperience(experienceId);
-            });
+            this.setState(
+                {
+                    jobId
+                },
+                () => {
+                    this.getExperience(experienceId);
+                }
+            );
         }
     }
 
     public componentDidUpdate(prevProps, prevState) {
-
         if (prevProps.storyId !== this.props.storyId) {
             this.evtHandlers.gotExperience = null;
         }
 
         if (prevProps.variables !== this.props.variables) {
-
             let inventory;
             const inventoryOptions = this.getInventoryOptions();
 
@@ -215,38 +207,33 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         if (this.props.notifications) {
             if (this.props.notifications[0]) {
                 if (this.props.notifications[0]['type'] === 'error') {
-                    this.setState({isTimeOut: true});
+                    this.setState({ isTimeOut: true });
                 }
 
                 if (this.props.notifications[0]['type'] === 'info') {
-                    this.setState({isTimeOut: false});
+                    this.setState({ isTimeOut: false });
                 }
             }
         }
 
         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;
 
-                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});
-                        });
+                api.cancelExperiencePolling().then(() => {
+                    onError(copy.runExpError.replace('[expId]', experienceId));
 
+                    this.resetState(true, () => {
+                        this.setState({ isTimeOut: true });
                     });
+                });
             }
         }
     }
 
     private variableInputChanged(key, value) {
-
-        const inventory = {...this.state.inventory};
+        const inventory = { ...this.state.inventory };
         inventory[key] = value;
 
         this.setState({
@@ -255,17 +242,18 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     }
 
     private getViewerOptions() {
-
         const opts = [];
 
-        const {experience: {output}, jobId} = this.state;
+        const {
+            experience: { output },
+            jobId
+        } = this.state;
         const videos = output.videos;
         const images = output.images;
 
         if (videos) {
             for (const key in videos) {
                 if (videos.hasOwnProperty(key)) {
-
                     const v = {
                         label: `Video: ${key}`,
                         value: `${OUTPUT_TYPES.VIDEO}.${key}`
@@ -278,7 +266,6 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         if (images) {
             for (const key in images) {
                 if (images.hasOwnProperty(key)) {
-
                     const i = {
                         label: `Image: ${key}`,
                         value: `${OUTPUT_TYPES.IMAGE}.${key}`
@@ -289,7 +276,6 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         }
 
         if (jobId) {
-
             opts.push({
                 label: copy.btnLog,
                 value: `${OUTPUT_TYPES.LOG}.${jobId}`
@@ -300,7 +286,6 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     }
 
     private renderVariableFields() {
-
         const { inventory, inventoryOptions } = this.state;
         const storyInventory = this.props.variables;
         const fields = [];
@@ -310,60 +295,80 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                 const inv = storyInventory[i];
 
                 switch (inv.type.toLowerCase()) {
-
                     case VARIABLE_TYPES.TEXT:
-                        fields.push(<TextField
-                            label = {inv.name}
-                            key = {inv.id}
-                            value = {inventory[inv.id]}
-                            onChange = {(v) => this.variableInputChanged(inv.id, v)}/>);
+                        fields.push(
+                            <TextField
+                                label={inv.name}
+                                key={inv.id}
+                                value={inventory[inv.id]}
+                                onChange={(v) => this.variableInputChanged(inv.id, v)}
+                            />
+                        );
                         break;
                     case VARIABLE_TYPES.NUMBER:
-                        fields.push(<NumberField
-                            label = {inv.name}
-                            key = {inv.id}
-                            value = {inventory[inv.id]}
-                            onChange = {(v) => this.variableInputChanged(inv.id, v)}/>);
+                        fields.push(
+                            <NumberField
+                                label={inv.name}
+                                key={inv.id}
+                                value={inventory[inv.id]}
+                                onChange={(v) => this.variableInputChanged(inv.id, v)}
+                            />
+                        );
                         break;
                     case VARIABLE_TYPES.ENUM:
-                        fields.push(<SelectField
-                            label = {inv.name}
-                            key = {inv.id}
-                            value = {inventory[inv.id]}
-                            options = {inventoryOptions[inv.id]}
-                            onChange = {(v) => this.variableInputChanged(inv.id, v)}/>);
+                        fields.push(
+                            <SelectField
+                                label={inv.name}
+                                key={inv.id}
+                                value={inventory[inv.id]}
+                                options={inventoryOptions[inv.id]}
+                                onChange={(v) => this.variableInputChanged(inv.id, v)}
+                            />
+                        );
                         break;
-                    case VARIABLE_TYPES.BOOLEAN :
-                        fields.push(<ButtonGroupField
-                            label = {inv.name}
-                            key = {inv.id}
-                            value = {inventory[inv.id]}
-                            options = { BOOLEAN_DEFAULT_OPTIONS }
-                            onChange = {(v) => this.variableInputChanged(inv.id, v)}/>);
+                    case VARIABLE_TYPES.BOOLEAN:
+                        fields.push(
+                            <ButtonGroupField
+                                label={inv.name}
+                                key={inv.id}
+                                value={inventory[inv.id]}
+                                options={BOOLEAN_DEFAULT_OPTIONS}
+                                onChange={(v) => this.variableInputChanged(inv.id, v)}
+                            />
+                        );
                         break;
                     case VARIABLE_TYPES.IMAGE:
-                        fields.push(<FieldWrapper label = {inv.name} key = {inv.id}>
-                            <MediaVariableField
-                                value = {inventory[inv.id]}
-                                type = {inv.type}
-                                onChange = {(v) => this.variableInputChanged(inv.id, v)}/>
-                            </FieldWrapper>);
+                        fields.push(
+                            <FieldWrapper label={inv.name} key={inv.id}>
+                                <MediaVariableField
+                                    value={inventory[inv.id]}
+                                    type={inv.type}
+                                    onChange={(v) => this.variableInputChanged(inv.id, v)}
+                                />
+                            </FieldWrapper>
+                        );
                         break;
                     case VARIABLE_TYPES.VIDEO:
-                        fields.push(<FieldWrapper label = {inv.name} key = {inv.id}>
-                            <MediaVariableField
-                                type = {inv.type}
-                                value = {inventory[inv.id]}
-                                onChange = {(v) => this.variableInputChanged(inv.id, v)}/>
-                            </FieldWrapper>);
+                        fields.push(
+                            <FieldWrapper label={inv.name} key={inv.id}>
+                                <MediaVariableField
+                                    type={inv.type}
+                                    value={inventory[inv.id]}
+                                    onChange={(v) => this.variableInputChanged(inv.id, v)}
+                                />
+                            </FieldWrapper>
+                        );
                         break;
                     case VARIABLE_TYPES.AUDIO:
-                        fields.push(<FieldWrapper label = {inv.name} key = {inv.id}>
-                            <MediaVariableField
-                                type = {inv.type}
-                                value = {inventory[inv.id]}
-                                onChange = {(v) => this.variableInputChanged(inv.id, v)}/>
-                            </FieldWrapper>);
+                        fields.push(
+                            <FieldWrapper label={inv.name} key={inv.id}>
+                                <MediaVariableField
+                                    type={inv.type}
+                                    value={inventory[inv.id]}
+                                    onChange={(v) => this.variableInputChanged(inv.id, v)}
+                                />
+                            </FieldWrapper>
+                        );
                         break;
                 }
             }
@@ -372,8 +377,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         return fields;
     }
 
-    private getFirstOutput(experience : IExperience) {
-
+    private getFirstOutput(experience: IExperience) {
         const videos = experience.output.videos;
         const images = experience.output.images;
         if (videos) {
@@ -393,186 +397,226 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         }
     }
 
-    private getExperience(experienceId, triggerJob = false, compositionId ? : string, useWorkingCopy? : boolean) {
-
+    private getExperience(
+        experienceId,
+        triggerJob = false,
+        compositionId?: string,
+        useWorkingCopy?: boolean
+    ) {
         if (!this.timer.running) {
             this.timer.start();
         }
 
         const { api, onError, onExperenceLoaded, onJobCreated } = this.props;
-        this.setState({
-            rendering: true
-        }, () => {
-
-            this.setState({
-                experienceId
-            }, () => {
-
-                if (triggerJob) {
-                    api.triggerEvent(experienceId, compositionId, useWorkingCopy).then((resTrigger) => {
+        this.setState(
+            {
+                rendering: true
+            },
+            () => {
+                this.setState(
+                    {
+                        experienceId
+                    },
+                    () => {
+                        if (triggerJob) {
+                            api.triggerEvent(experienceId, compositionId, useWorkingCopy)
+                                .then((resTrigger) => {
+                                    this.setState(
+                                        {
+                                            jobId: resTrigger.job_id
+                                        },
+                                        () => {
+                                            if (onJobCreated) {
+                                                onJobCreated(experienceId, resTrigger.job_id);
+                                            }
+
+                                            this.evtHandlers.gotExperience = (resVideo) => {
+                                                this.timer.stop();
+
+                                                if (onExperenceLoaded) {
+                                                    onExperenceLoaded(resVideo);
+                                                }
+
+                                                this.setState({
+                                                    rendering: false,
+                                                    activeOutput: this.getFirstOutput(resVideo),
+                                                    experience: resVideo
+                                                });
+                                            };
+
+                                            api.getExperience(experienceId, true)
+                                                .then((resVideo) => {
+                                                    if (this.evtHandlers.gotExperience) {
+                                                        this.evtHandlers.gotExperience(resVideo);
+                                                    }
+                                                })
+                                                .catch((e) => {
+                                                    this.resetState();
+                                                    if (onError) {
+                                                        if (e.error) {
+                                                            onError(e.error);
+                                                        } else {
+                                                            onError(
+                                                                copy.runExpError.replace(
+                                                                    '[expId]',
+                                                                    experienceId
+                                                                )
+                                                            );
+                                                        }
+                                                    }
+                                                });
+                                        }
+                                    );
+                                })
+                                .catch((e) => {
+                                    this.resetState();
+                                    if (onError) {
+                                        onError(
+                                            copy.triggerExpError.replace('[expId]', experienceId)
+                                        );
+                                    }
+                                });
+                        } else {
+                            this.evtHandlers.gotExperience = (resVideo) => {
+                                this.timer.stop();
 
-                    this.setState({
-                        jobId: resTrigger.job_id
-                    }, () => {
+                                if (onExperenceLoaded) {
+                                    onExperenceLoaded(resVideo);
+                                }
 
-                        if (onJobCreated) {
-                            onJobCreated(experienceId, resTrigger.job_id);
+                                this.setState({
+                                    rendering: false,
+                                    activeOutput: this.getFirstOutput(resVideo),
+                                    experience: resVideo
+                                });
+                            };
+
+                            api.getExperience(experienceId, true)
+                                .then((resVideo) => {
+                                    if (this.evtHandlers.gotExperience) {
+                                        this.evtHandlers.gotExperience(resVideo);
+                                    }
+                                })
+                                .catch((e) => {
+                                    this.resetState();
+                                    if (onError) {
+                                        if (e.error) {
+                                            onError(e.error);
+                                        } else {
+                                            onError(
+                                                copy.runExpError.replace('[expId]', experienceId)
+                                            );
+                                        }
+                                    }
+                                });
                         }
+                    }
+                );
+            }
+        );
+    }
 
-                        this.evtHandlers.gotExperience = (resVideo) => {
-
-                            this.timer.stop();
+    private createExperience() {
+        const {
+            storyId,
+            onNotification,
+            onError,
+            api,
+            onExperienceCreated,
+            compositionId,
+            useWorkingCopy
+        } = this.props;
 
-                            if (onExperenceLoaded) {
-                                onExperenceLoaded(resVideo);
+        this.resetState(false, () => {
+            this.setState(
+                {
+                    rendering: true,
+                    isTimeOut: false
+                },
+                () => {
+                    this.timer.start();
+                    if (onNotification) {
+                        onNotification(copy.runExpStart);
+                    }
+                    api.createExperience(
+                        storyId,
+                        this.state.inventory,
+                        compositionId,
+                        useWorkingCopy
+                    )
+                        .then((resExp) => {
+                            if (onNotification) {
+                                onNotification(copy.expId.replace('[expId]', resExp.id));
                             }
 
-                            this.setState({
-                                rendering: false,
-                                activeOutput: this.getFirstOutput(resVideo),
-                                experience: resVideo,
-                            });
-                        };
-
-                        const pollingPromise = api.getExperience(experienceId, true).then((resVideo) => {
-
-                            if (this.evtHandlers.gotExperience) {
-                                this.evtHandlers.gotExperience(resVideo);
+                            if (onExperienceCreated) {
+                                onExperienceCreated(resExp);
                             }
 
-                        }).catch((e) => {
+                            this.getExperience(resExp.id, true, compositionId, useWorkingCopy);
+                        })
+                        .catch((e) => {
                             this.resetState();
+                            const { data } = e.response;
                             if (onError) {
-                                if (e.error) {
-                                  onError(e.error);
+                                if (data && data.error) {
+                                    onError(`${copy.createExpError}: ${data.error}`);
                                 } else {
-                                    onError(copy.runExpError.replace('[expId]', experienceId));
+                                    onError(`${copy.createExpError}: ${e}`);
                                 }
                             }
                         });
-
-                    });
-                }).catch((e) => {
-                    this.resetState();
-                    if (onError) {
-                        onError(copy.triggerExpError.replace('[expId]', experienceId));
-                    }
-                });
-                } else {
-
-                    this.evtHandlers.gotExperience = (resVideo) => {
-                        this.timer.stop();
-
-                        if (onExperenceLoaded) {
-                            onExperenceLoaded(resVideo);
-                        }
-
-                        this.setState({
-                            rendering: false,
-                            activeOutput: this.getFirstOutput(resVideo),
-                            experience: resVideo
-                        });
-                    };
-
-                    api.getExperience(experienceId, true).then((resVideo) => {
-                        if (this.evtHandlers.gotExperience) {
-                            this.evtHandlers.gotExperience(resVideo);
-                        }
-
-                    }).catch((e) => {
-                        this.resetState();
-                        if (onError) {
-                          if (e.error) {
-                            onError(e.error);
-                          } else {
-                              onError(copy.runExpError.replace('[expId]', experienceId));
-                          }
-                        }
-                    });
                 }
-            });
-        });
-    }
-
-    private createExperience() {
-
-        const {storyId, onNotification, onError, api, onExperienceCreated, compositionId, useWorkingCopy} = this.props;
-
-        this.resetState(false, () => {
-            this.setState({
-                rendering: true,
-                isTimeOut: false,
-            }, () => {
-
-                this.timer.start();
-                if (onNotification) {
-                    onNotification(copy.runExpStart);
-                }
-                api.createExperience(storyId, this.state.inventory, compositionId, useWorkingCopy).then((resExp) => {
-
-                    if (onNotification) {
-                        onNotification(copy.expId.replace('[expId]', resExp.id));
-                    }
-
-                    if (onExperienceCreated) {
-                        onExperienceCreated(resExp);
-                    }
-
-                    this.getExperience(resExp.id, true, compositionId, useWorkingCopy);
-
-                }).catch((e) => {
-                    this.resetState();
-                    const {data, status} = e.response;
-                    if (onError) {
-                        if (data && data.error) {
-                            onError(`${copy.createExpError}: ${data.error}`);
-                        } else {
-                            onError(`${copy.createExpError}: ${e}`);
-                        }
-                    }
-                });
-            });
+            );
         });
     }
 
-    private resetState(isTimeOut? : boolean, callback?) {
+    private resetState(isTimeOut?: boolean, callback?) {
         this.timer.stop();
-        this.setState({
-            rendering: false,
-            experienceId: null,
-            experience: null,
-            jobId: null,
-            timeElapsed: !isTimeOut ? 0 : this.state.timeElapsed,
-            activeOutput: null,
-            isTimeOut: false,
-        }, () => {
-            if (callback) {
-                callback();
+        this.setState(
+            {
+                rendering: false,
+                experienceId: null,
+                experience: null,
+                jobId: null,
+                timeElapsed: !isTimeOut ? 0 : this.state.timeElapsed,
+                activeOutput: null,
+                isTimeOut: false
+            },
+            () => {
+                if (callback) {
+                    callback();
+                }
             }
-        });
+        );
     }
 
     private renderViewerContent() {
-
-        const {rendering, experience, timeElapsed, activeOutput, isTimeOut } = this.state;
+        const { rendering, experience, timeElapsed, activeOutput, isTimeOut } = this.state;
 
         const { api, onError } = this.props;
 
         if (rendering) {
-            return <div className = 'running-prompt'>
-                <Spinner/><br/>
-                <h1>&nbsp; {copy.expRunning }</h1>
-                <p>{copy.time}&nbsp;{formattedTime(timeElapsed)}</p>
-            </div>;
+            return (
+                <div className='running-prompt'>
+                    <Spinner />
+                    <br />
+                    <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'>
+            return (
+                <div className='running-prompt error-wrapper'>
                     <h1>&nbsp; {copy.runExpErrorDes}</h1>
-                    <p>{copy.time}&nbsp;{formattedTime(timeElapsed)}</p>
+                    <p>
+                        {copy.time}&nbsp;{formattedTime(timeElapsed)}
+                    </p>
                 </div>
             );
         } else if (experience && activeOutput) {
-
             let player;
             let url;
             const outputArr = activeOutput.split('.');
@@ -581,97 +625,100 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
 
             if (type === OUTPUT_TYPES.IMAGE) {
                 url = experience.output.images[key];
-                player = <ImagePlayer url = {url} active = {true}/>;
+                player = <ImagePlayer url={url} active={true} />;
             } else if (type === OUTPUT_TYPES.VIDEO) {
-                const output : any = experience.output.videos[key];
-                const mWidth = (output.width !== undefined) ? parseInt(output.width, 10) : null;
-                const mHeight = (output.height !== undefined) ? parseInt(output.height, 10) : null;
+                const output: any = experience.output.videos[key];
+                const mWidth = output.width !== undefined ? parseInt(output.width, 10) : null;
+                const mHeight = output.height !== undefined ? parseInt(output.height, 10) : null;
                 url = output.url;
 
-                player = <VideoPlayer
-                    url = {url}
-                    active = {true}
-                    maxWidth = {mWidth}
-                    allowManualScale = {true}
-                    maxHeight = {mHeight} />;
+                player = (
+                    <VideoPlayer
+                        url={url}
+                        active={true}
+                        maxWidth={mWidth}
+                        allowManualScale={true}
+                        maxHeight={mHeight}
+                    />
+                );
             } else if (type === OUTPUT_TYPES.LOG) {
-                player = <div className = 'log'><LogViewer
-                    api  = {api}
-                    onError = {onError}
-                    jobId = {key}/>
-                </div>;
+                player = (
+                    <div className='log'>
+                        <LogViewer api={api} onError={onError} jobId={key} />
+                    </div>
+                );
             }
 
-            return <ReactResizeDetector handleWidth handleHeight>
-                {player}
-            </ReactResizeDetector>;
+            return (
+                <ReactResizeDetector handleWidth handleHeight>
+                    {player}
+                </ReactResizeDetector>
+            );
         }
 
         return null;
     }
 
     private toggleActiveOutput(e) {
-
         this.setState({
             activeOutput: e
         });
     }
 
     public render() {
-
         const { rendering, experience, activeOutput } = this.state;
-        const renderCopy  = (experience) ? copy.btnReRender : copy.btnRender;
-        const btnRender = (!rendering) ?
-            <Button
-                size = 'large'
-                onClick = {this.evtHandlers.createExp}
-                color = 'primary'
-                style  = 'bold'>{renderCopy}
-            </Button> : null;
+        const renderCopy = experience ? copy.btnReRender : copy.btnRender;
+        const btnRender = !rendering ? (
+            <Button size='large' onClick={this.evtHandlers.createExp} color='primary' style='bold'>
+                {renderCopy}
+            </Button>
+        ) : null;
 
         let viewerButtons;
         let expIdField;
 
         if (experience) {
             const viewerOpts = this.getViewerOptions();
-            viewerButtons = <SelectField
-                width = '130px'
-                options = {viewerOpts}
-                value = {activeOutput}
-                onChange = {this.evtHandlers.toggleOutput}/>;
-            expIdField = <TextField
-                readOnly = {true}
-                width = '360px'
-                label = {copy.expIdField}
-                showCopy = {true}
-                value = {experience.id}/>;
+            viewerButtons = (
+                <SelectField
+                    width='130px'
+                    options={viewerOpts}
+                    value={activeOutput}
+                    onChange={this.evtHandlers.toggleOutput}
+                />
+            );
+            expIdField = (
+                <TextField
+                    readOnly={true}
+                    width='360px'
+                    label={copy.expIdField}
+                    showCopy={true}
+                    value={experience.id}
+                />
+            );
         }
 
-        return <div className = 'story-viewer viewer'>
-            <div className = 'variables'>
-                <h2>{copy.previewVars}</h2>
-                <HRule/>
-                {this.renderVariableFields()}
-            </div>
-            <div className = 'viewer-content'>
-                <div className = 'content-header'>
-                    {btnRender}
-                    <div className = 'output'>
-                        {viewerButtons}
-                    </div>
-                    <div className = 'right-interface'>
-                        {expIdField}
-                    </div>
+        return (
+            <div className='story-viewer viewer'>
+                <div className='variables'>
+                    <h2>{copy.previewVars}</h2>
+                    <HRule />
+                    {this.renderVariableFields()}
                 </div>
-                <div className = 'content-wrapper'>
-                    {this.renderViewerContent()}
+                <div className='viewer-content'>
+                    <div className='content-header'>
+                        {btnRender}
+                        <div className='output'>{viewerButtons}</div>
+                        <div className='right-interface'>{expIdField}</div>
+                    </div>
+                    <div className='content-wrapper'>{this.renderViewerContent()}</div>
                 </div>
             </div>
-        </div>;
+        );
     }
 }
-const mapStateToProps = (state) : any => {
-    return {notifications : state.notifications};
+const mapStateToProps = (state): any => {
+    return { notifications: state.notifications };
 };
 
 export default connect(mapStateToProps, {})(StoryPreviewer);