@imposium-hub/components 1.60.0 → 1.60.1

package/dist/cjs/components/story-previewer/StoryPreviewer_BACKUP_64741.js

@@ -1,670 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
-var variables_1 = require("../../constants/variables");
-var previewer_1 = require("../../constants/previewer");
-var TextField_1 = __importDefault(require("../text-field/TextField"));
-var Button_1 = __importDefault(require("../button/Button"));
-var Spinner_1 = __importDefault(require("../spinner/Spinner"));
-var NumberField_1 = __importDefault(require("../number-field/NumberField"));
-var SelectField_1 = __importDefault(require("../select-field/SelectField"));
-var ButtonGroupField_1 = __importDefault(require("../button-group-field/ButtonGroupField"));
-var FieldWrapper_1 = __importDefault(require("../field-wrapper/FieldWrapper"));
-var HRule_1 = __importDefault(require("../h-rule/HRule"));
-var VideoPlayer_1 = __importDefault(require("../players/VideoPlayer"));
-var ImagePlayer_1 = __importDefault(require("../players/ImagePlayer"));
-var MediaVariableField_1 = __importDefault(require("../media-variable-field/MediaVariableField"));
-var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
-var copy_1 = require("../../constants/copy");
-var Util_1 = require("../../Util");
-var Timer_1 = __importDefault(require("../../services/Timer"));
-var LogViewer_1 = __importDefault(require("../log-viewer/LogViewer"));
-var react_redux_1 = require("react-redux");
-var icons_1 = require("../../constants/icons");
-var StoryPreviewer = /** @class */ (function (_super) {
-    __extends(StoryPreviewer, _super);
-    function StoryPreviewer(props) {
-        var _this = _super.call(this, props) || this;
-        _this.TIMEOUT = '02:00';
-        var inventory = _this.getInventoryDefaults();
-        var inventoryOptions = _this.getInventoryOptions();
-        _this.state = {
-            inventory: inventory,
-            inventoryOptions: inventoryOptions,
-            experienceId: null,
-            jobId: null,
-            experience: null,
-            timeElapsed: 0,
-            activeOutput: '',
-            rendering: false,
-            isTimeOut: false,
-            compositionOptions: [],
-            afterEffectsOptions: [],
-            compositionOverride: null
-        };
-        _this.timer = new Timer_1.default({
-            interval: 1000,
-            onUpdate: function (t) {
-                _this.setState({ timeElapsed: t });
-            }
-        });
-        _this.evtHandlers = {
-            toggleOutput: function (e) { return _this.toggleActiveOutput(e); },
-            createExp: function () { return _this.createExperience(); },
-            compChange: function (c) { return _this.compChanged(c); },
-            gotExperience: null
-        };
-        return _this;
-    }
-    StoryPreviewer.prototype.componentWillUnmount = function () {
-        var api = this.props.api;
-        this.timer.stop();
-        this.evtHandlers.gotExperience = null;
-        api.cancelExperiencePolling();
-    };
-    StoryPreviewer.prototype.addCompOptions = function (assets) {
-        var e_1, _a;
-        var _this = this;
-        var newOpts = __spreadArray([], __read(this.state.compositionOptions), false);
-        var compositionOverride = this.state.compositionOverride;
-        var compositionId = this.props.compositionId;
-        try {
-            for (var assets_1 = __values(assets), assets_1_1 = assets_1.next(); !assets_1_1.done; assets_1_1 = assets_1.next()) {
-                var comp = assets_1_1.value;
-                newOpts.push({ label: comp.name, value: comp.id });
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (assets_1_1 && !assets_1_1.done && (_a = assets_1.return)) _a.call(assets_1);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-        this.setState({ compositionOptions: newOpts }, function () {
-            var firstComp = _this.state.compositionOptions[0];
-            if (firstComp && !compositionId && !compositionOverride) {
-                _this.setState({ compositionOverride: firstComp.value });
-            }
-        });
-    };
-    StoryPreviewer.prototype.checkForCompDropdown = function () {
-        var _this = this;
-        var _a = this.props, api = _a.api, storyId = _a.storyId;
-        api.getAssets({ type: 'video_composition' }, storyId)
-            .then(function (res) { return _this.addCompOptions(res.assets); })
-            .catch(function (e) {
-            console.error('Error pulling comp IDs for composition dropdown');
-        });
-        api.getAssets({ type: 'after_effects' }, storyId)
-            .then(function (res) { return _this.addCompOptions(res.assets); })
-            .catch(function (e) {
-            console.error('Error pulling After Effects IDs for composition dropdown');
-        });
-    };
-    StoryPreviewer.prototype.getInventoryOptions = function () {
-        var variables = this.props.variables;
-        var options = {};
-        for (var i in variables) {
-            if (variables.hasOwnProperty(i)) {
-                var inv = variables[i];
-                if (inv.defaultItem && inv.defaultItem.type) {
-                    if (inv.defaultItem.type.toLowerCase() === variables_1.VARIABLE_TYPES.ENUM) {
-                        options[inv.id] = inv.defaultItem.options;
-                    }
-                }
-            }
-        }
-        return options;
-    };
-    StoryPreviewer.prototype.getInventoryDefaults = function () {
-        var variables = this.props.variables;
-        var newInv = {};
-        for (var i in variables) {
-            if (variables.hasOwnProperty(i)) {
-                var inv = variables[i];
-                newInv[inv.id] = this.getVariableValue(inv.previewItem);
-            }
-        }
-        return newInv;
-    };
-    StoryPreviewer.prototype.checkInventoryDefaults = function (prevVariables) {
-        var variables = this.props.variables;
-        var newInv = __assign({}, this.state.inventory);
-        for (var i in variables) {
-            if (variables.hasOwnProperty(i)) {
-                var newVar = variables[i];
-                var prevVar = prevVariables[i];
-                if (prevVar) {
-                    var prevValue = this.getVariableValue(prevVar.previewItem);
-                    var newValue = this.getVariableValue(newVar.previewItem);
-                    if (newVar.type !== prevVar.type || prevValue !== newValue) {
-                        newInv[i] = newValue;
-                    }
-                }
-            }
-        }
-        return newInv;
-    };
-    StoryPreviewer.prototype.getVariableValue = function (previewItem) {
-        if (previewItem && previewItem.type) {
-            var type = previewItem.type.toLowerCase();
-            if (type === variables_1.VARIABLE_TYPES.IMAGE ||
-                type === variables_1.VARIABLE_TYPES.VIDEO ||
-                type === variables_1.VARIABLE_TYPES.AUDIO) {
-                return previewItem.url;
-            }
-            else {
-                return previewItem.src;
-            }
-        }
-        else {
-            return undefined;
-        }
-    };
-    StoryPreviewer.prototype.componentDidMount = function () {
-        var _this = this;
-        // if the experience ID is set when the previewer is mounted, get that experience
-        var _a = this.props, experienceId = _a.experienceId, jobId = _a.jobId;
-        if (experienceId && jobId) {
-            this.setState({
-                jobId: jobId
-            }, function () {
-                _this.getExperience(experienceId);
-            });
-        }
-        this.checkForCompDropdown();
-    };
-    StoryPreviewer.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _this = this;
-        if (prevProps.storyId !== this.props.storyId) {
-            this.evtHandlers.gotExperience = null;
-            this.setState({ compositionOptions: [], afterEffectsOptions: [] });
-            this.checkForCompDropdown();
-        }
-        if (prevProps.variables !== this.props.variables) {
-            var inventory = void 0;
-            var inventoryOptions = this.getInventoryOptions();
-            if (prevProps.storyId === this.props.storyId) {
-                inventory = this.checkInventoryDefaults(prevProps.variables);
-            }
-            else {
-                inventory = this.getInventoryDefaults();
-            }
-            this.setState({
-                inventoryOptions: inventoryOptions,
-                inventory: inventory
-            });
-        }
-        if (this.props.notifications) {
-            if (this.props.notifications[0]) {
-                if (this.props.notifications[0]['type'] === 'error') {
-                    this.setState({ isTimeOut: true });
-                }
-                if (this.props.notifications[0]['type'] === 'info') {
-                    this.setState({ isTimeOut: false });
-                }
-            }
-        }
-        if (prevState.timeElapsed !== this.state.timeElapsed) {
-            if ((0, Util_1.formattedTime)(this.state.timeElapsed) === this.TIMEOUT && !this.state.experience) {
-                var _a = this.props, onError_1 = _a.onError, api = _a.api;
-                var experienceId_1 = this.state.experienceId;
-                api.cancelExperiencePolling().then(function () {
-                    onError_1(copy_1.previewer.runExpError.replace('[expId]', experienceId_1));
-                    _this.resetState(true, function () {
-                        _this.setState({ isTimeOut: true });
-                    });
-                });
-            }
-        }
-    };
-    StoryPreviewer.prototype.variableInputChanged = function (key, value) {
-        var inventory = __assign({}, this.state.inventory);
-        inventory[key] = value;
-        this.setState({
-            inventory: inventory
-        });
-    };
-    StoryPreviewer.prototype.getViewerOptions = function () {
-        var opts = [];
-        var output = this.state.experience.output;
-        var videos = output.videos;
-        var images = output.images;
-        if (videos) {
-            for (var key in videos) {
-                if (videos.hasOwnProperty(key)) {
-                    var v = {
-                        label: "Video: ".concat(key),
-                        value: "".concat(previewer_1.OUTPUT_TYPES.VIDEO, ".").concat(key)
-                    };
-                    opts.push(v);
-                }
-            }
-        }
-        if (images) {
-            for (var key in images) {
-                if (images.hasOwnProperty(key)) {
-                    var i = {
-                        label: "Image: ".concat(key),
-                        value: "".concat(previewer_1.OUTPUT_TYPES.IMAGE, ".").concat(key)
-                    };
-                    opts.push(i);
-                }
-            }
-        }
-        return opts;
-    };
-    StoryPreviewer.prototype.renderVariableFields = function () {
-        var _this = this;
-        var _a = this.state, inventory = _a.inventory, inventoryOptions = _a.inventoryOptions;
-        var storyInventory = this.props.variables;
-        var fields = [];
-        var _loop_1 = function (i) {
-            if (storyInventory.hasOwnProperty(i)) {
-                var inv_1 = storyInventory[i];
-                switch (inv_1.type.toLowerCase()) {
-                    case variables_1.VARIABLE_TYPES.TEXT:
-                        fields.push(React.createElement(TextField_1.default, { label: inv_1.name, key: inv_1.id, value: inventory[inv_1.id], onChange: function (v) { return _this.variableInputChanged(inv_1.id, v); }, labelPosition: 'top', width: '100%' }));
-                        break;
-                    case variables_1.VARIABLE_TYPES.NUMBER:
-                        fields.push(React.createElement(NumberField_1.default, { label: inv_1.name, key: inv_1.id, value: inventory[inv_1.id], onChange: function (v) { return _this.variableInputChanged(inv_1.id, v); }, labelPosition: 'top', width: '100%' }));
-                        break;
-                    case variables_1.VARIABLE_TYPES.ENUM:
-                        fields.push(React.createElement(SelectField_1.default, { label: inv_1.name, key: inv_1.id, value: inventory[inv_1.id], options: inventoryOptions[inv_1.id], onChange: function (v) { return _this.variableInputChanged(inv_1.id, v); }, labelPosition: 'top', width: '100%' }));
-                        break;
-                    case variables_1.VARIABLE_TYPES.BOOLEAN:
-                        fields.push(React.createElement(ButtonGroupField_1.default, { label: inv_1.name, key: inv_1.id, value: inventory[inv_1.id], options: variables_1.BOOLEAN_DEFAULT_OPTIONS, onChange: function (v) { return _this.variableInputChanged(inv_1.id, v); } }));
-                        break;
-                    case variables_1.VARIABLE_TYPES.IMAGE:
-                        fields.push(React.createElement(FieldWrapper_1.default, { label: inv_1.name, key: inv_1.id, labelPosition: 'top', width: '100%' },
-                            React.createElement(MediaVariableField_1.default, { value: inventory[inv_1.id], type: inv_1.type, onChange: function (v) { return _this.variableInputChanged(inv_1.id, v); } })));
-                        break;
-                    case variables_1.VARIABLE_TYPES.VIDEO:
-                        fields.push(React.createElement(FieldWrapper_1.default, { label: inv_1.name, key: inv_1.id, labelPosition: 'top', width: '100%' },
-                            React.createElement(MediaVariableField_1.default, { type: inv_1.type, value: inventory[inv_1.id], onChange: function (v) { return _this.variableInputChanged(inv_1.id, v); } })));
-                        break;
-                    case variables_1.VARIABLE_TYPES.AUDIO:
-                        fields.push(React.createElement(FieldWrapper_1.default, { label: inv_1.name, key: inv_1.id, labelPosition: 'top', width: '100%' },
-                            React.createElement(MediaVariableField_1.default, { type: inv_1.type, value: inventory[inv_1.id], onChange: function (v) { return _this.variableInputChanged(inv_1.id, v); } })));
-                        break;
-                }
-            }
-        };
-        for (var i in storyInventory) {
-            _loop_1(i);
-        }
-        return fields;
-    };
-    StoryPreviewer.prototype.getFirstOutput = function (experience) {
-        var videos = experience.output.videos;
-        var images = experience.output.images;
-        if (videos) {
-            for (var key in videos) {
-                if (videos.hasOwnProperty(key)) {
-                    return "".concat(previewer_1.OUTPUT_TYPES.VIDEO, ".").concat(key);
-                }
-            }
-        }
-        else if (images) {
-            for (var key in images) {
-                if (images.hasOwnProperty(key)) {
-                    return "".concat(previewer_1.OUTPUT_TYPES.IMAGE, ".").concat(key);
-                }
-            }
-        }
-        else {
-            return null;
-        }
-    };
-    StoryPreviewer.prototype.getExperience = function (experienceId, triggerJob, compositionId, useWorkingCopy) {
-        var _this = this;
-        if (triggerJob === void 0) { triggerJob = false; }
-        if (!this.timer.running) {
-            this.timer.start();
-        }
-        var _a = this.props, api = _a.api, onError = _a.onError, onExperenceLoaded = _a.onExperenceLoaded, onJobCreated = _a.onJobCreated;
-        this.setState({
-            rendering: true
-        }, function () {
-            _this.setState({
-                experienceId: experienceId
-            }, function () {
-                if (triggerJob) {
-                    api.triggerEvent(experienceId, compositionId, useWorkingCopy)
-                        .then(function (resTrigger) {
-                        _this.setState({
-                            jobId: resTrigger.job_id
-                        }, function () {
-                            if (onJobCreated) {
-                                onJobCreated(experienceId, resTrigger.job_id);
-                            }
-                            _this.evtHandlers.gotExperience = function (resVideo) {
-                                _this.timer.stop();
-                                if (onExperenceLoaded) {
-                                    onExperenceLoaded(resVideo);
-                                }
-                                _this.setState({
-                                    rendering: false,
-                                    activeOutput: _this.getFirstOutput(resVideo),
-                                    experience: resVideo
-                                });
-                            };
-                            api.getExperience(experienceId, true)
-                                .then(function (resVideo) {
-                                if (_this.evtHandlers.gotExperience) {
-                                    _this.evtHandlers.gotExperience(resVideo);
-                                }
-                            })
-                                .catch(function (e) {
-                                _this.resetState();
-                                if (onError) {
-                                    if (e.error) {
-                                        onError(e.error);
-                                    }
-                                    else {
-                                        onError(copy_1.previewer.runExpError.replace('[expId]', experienceId));
-                                    }
-                                }
-                            });
-                        });
-                    })
-                        .catch(function (e) {
-                        _this.resetState();
-                        if (onError) {
-                            onError(copy_1.previewer.triggerExpError.replace('[expId]', experienceId));
-                        }
-                    });
-                }
-                else {
-                    _this.evtHandlers.gotExperience = function (resVideo) {
-                        _this.timer.stop();
-                        if (onExperenceLoaded) {
-                            onExperenceLoaded(resVideo);
-                        }
-                        _this.setState({
-                            rendering: false,
-                            activeOutput: _this.getFirstOutput(resVideo),
-                            experience: resVideo
-                        });
-                    };
-                    api.getExperience(experienceId, true)
-                        .then(function (resVideo) {
-                        if (_this.evtHandlers.gotExperience) {
-                            _this.evtHandlers.gotExperience(resVideo);
-                        }
-                    })
-                        .catch(function (e) {
-                        _this.resetState();
-                        if (onError) {
-                            if (e.error) {
-                                onError(e.error);
-                            }
-                            else {
-                                onError(copy_1.previewer.runExpError.replace('[expId]', experienceId));
-                            }
-                        }
-                    });
-                }
-            });
-        });
-    };
-    StoryPreviewer.prototype.createExperience = function () {
-        var _this = this;
-        var _a = this.props, storyId = _a.storyId, onNotification = _a.onNotification, onError = _a.onError, api = _a.api, onExperienceCreated = _a.onExperienceCreated, useWorkingCopy = _a.useWorkingCopy;
-        var compId = this.getCompId();
-        console.log(compId);
-        this.resetState(false, function () {
-            _this.setState({
-                rendering: true,
-                isTimeOut: false
-            }, function () {
-                _this.timer.start();
-                if (onNotification) {
-                    onNotification(copy_1.previewer.runExpStart);
-                }
-                api.createExperience(storyId, _this.state.inventory, compId, useWorkingCopy)
-                    .then(function (resExp) {
-                    if (onNotification) {
-                        onNotification(copy_1.previewer.expId.replace('[expId]', resExp.id));
-                    }
-                    if (onExperienceCreated) {
-                        onExperienceCreated(resExp);
-                    }
-                    _this.getExperience(resExp.id, true, compId, useWorkingCopy);
-                })
-                    .catch(function (e) {
-                    _this.resetState();
-                    var data = e.response.data;
-                    if (onError) {
-                        if (data && data.error) {
-                            onError("".concat(copy_1.previewer.createExpError, ": ").concat(data.error));
-                        }
-                        else {
-                            onError("".concat(copy_1.previewer.createExpError, ": ").concat(e));
-                        }
-                    }
-                });
-            });
-        });
-    };
-    StoryPreviewer.prototype.resetState = function (isTimeOut, callback) {
-        this.timer.stop();
-        this.setState({
-            rendering: false,
-            experienceId: null,
-            experience: null,
-            jobId: null,
-            timeElapsed: !isTimeOut ? 0 : this.state.timeElapsed,
-            activeOutput: null,
-            isTimeOut: false
-        }, function () {
-            if (callback) {
-                callback();
-            }
-        });
-    };
-    StoryPreviewer.prototype.renderViewerContent = function () {
-        var _a = this.state, rendering = _a.rendering, experience = _a.experience, timeElapsed = _a.timeElapsed, activeOutput = _a.activeOutput, isTimeOut = _a.isTimeOut;
-        var _b = this.props, api = _b.api, onError = _b.onError;
-        if (rendering) {
-            return (React.createElement("div", { className: 'running-prompt' },
-                React.createElement(Spinner_1.default, null),
-                React.createElement("br", null),
-                React.createElement("h1", null,
-                    "\u00A0 ",
-                    copy_1.previewer.expRunning),
-                React.createElement("p", null,
-                    copy_1.previewer.time,
-                    "\u00A0",
-                    (0, Util_1.formattedTime)(timeElapsed))));
-        }
-        else if (isTimeOut || isTimeOut === undefined) {
-            return (React.createElement("div", { className: 'running-prompt error-wrapper' },
-                React.createElement("h1", null,
-                    "\u00A0 ",
-                    copy_1.previewer.runExpErrorDes),
-                React.createElement("p", null,
-                    copy_1.previewer.time,
-                    "\u00A0",
-                    (0, Util_1.formattedTime)(timeElapsed))));
-        }
-        else if (experience && activeOutput) {
-            var player = void 0;
-            var url = void 0;
-            var outputArr = activeOutput.split('.');
-            var type = outputArr[0];
-            var key = outputArr[1];
-            if (type === previewer_1.OUTPUT_TYPES.IMAGE) {
-                url = experience.output.images[key];
-                player = (React.createElement(ImagePlayer_1.default, { url: url, active: true }));
-            }
-            else if (type === previewer_1.OUTPUT_TYPES.VIDEO) {
-                var output = experience.output.videos[key];
-                var mWidth = output.width !== undefined ? parseInt(output.width, 10) : null;
-                var mHeight = output.height !== undefined ? parseInt(output.height, 10) : null;
-                url = output.url;
-                player = (React.createElement(VideoPlayer_1.default, { url: url, active: true, maxWidth: mWidth, allowManualScale: true, maxHeight: mHeight }));
-            }
-            else if (type === previewer_1.OUTPUT_TYPES.LOG) {
-                player = (React.createElement("div", { className: 'log' },
-                    React.createElement(LogViewer_1.default, { api: api, onError: onError, jobId: key })));
-            }
-            return (React.createElement(react_resize_detector_1.default, { handleWidth: true, handleHeight: true }, player));
-        }
-        return null;
-    };
-    StoryPreviewer.prototype.toggleActiveOutput = function (e) {
-        this.setState({
-            activeOutput: e
-        });
-    };
-    StoryPreviewer.prototype.compChanged = function (compId) {
-        this.setState({ compositionOverride: compId });
-    };
-    StoryPreviewer.prototype.getCompId = function () {
-        var _a = this.props, allowCompOverride = _a.allowCompOverride, compositionId = _a.compositionId;
-        var compositionOverride = this.state.compositionOverride;
-        return (compositionOverride && allowCompOverride) ? compositionOverride : compositionId;
-    };
-    StoryPreviewer.prototype.render = function () {
-        var _this = this;
-        var allowCompOverride = this.props.allowCompOverride;
-        var _a = this.state, rendering = _a.rendering, experience = _a.experience, activeOutput = _a.activeOutput;
-        var storyId = this.props.storyId;
-        var renderCopy = experience ? copy_1.previewer.btnReRender : copy_1.previewer.btnRender;
-        var compId = this.getCompId();
-        var btnRender = !rendering ? (React.createElement(Button_1.default, { disabled: !compId, size: 'large', onClick: this.evtHandlers.createExp, color: 'primary', style: 'bold' }, renderCopy)) : null;
-        var viewerButtons;
-        var expIdField;
-        if (experience) {
-            var viewerOpts = this.getViewerOptions();
-            var outputArr = activeOutput.split('.');
-            var type = outputArr[0];
-            var key = outputArr[1];
-            var url_1;
-            var fileName_1 = "".concat(storyId, "_").concat(type);
-            if (type === previewer_1.OUTPUT_TYPES.IMAGE) {
-                url_1 = experience.output.images[key];
-            }
-            else if (type === previewer_1.OUTPUT_TYPES.VIDEO) {
-                url_1 = experience.output.videos[key].url;
-            }
-            var downloadBtn = (React.createElement(Button_1.default, { key: 'btn-download', tooltip: 'Download Preview', style: 'subtle', onClick: function () {
-                    _this.download(url_1, fileName_1).catch(function (error) {
-                        return alert("".concat(copy_1.ERROR.download.replace('[error]', error)));
-                    });
-                } }, icons_1.ICON_DOWNLOAD));
-            var copyBtn = (React.createElement(Button_1.default, { key: 'btn-copy-url', tooltip: 'Copy URL to Clipboard', style: 'subtle', onClick: function () { return _this.copyToClipboard(url_1); } }, icons_1.ICON_CLIPBOARD));
-            viewerButtons = (React.createElement(SelectField_1.default, { width: '200px', options: viewerOpts, value: activeOutput, onChange: this.evtHandlers.toggleOutput, buttons: [downloadBtn, copyBtn] }));
-            expIdField = (React.createElement(TextField_1.default, { readOnly: true, width: '360px', label: copy_1.previewer.expIdField, showCopy: true, value: experience.id }));
-        }
-        var compSelect = (allowCompOverride && !rendering) ? React.createElement(SelectField_1.default, { width: '150px', onChange: this.evtHandlers.compChange, options: this.state.compositionOptions, value: compId, label: '' }) : null;
-        return (React.createElement("div", { className: 'story-viewer viewer' },
-            React.createElement("div", { className: 'variables' },
-                React.createElement("h2", null, copy_1.previewer.previewVars),
-                React.createElement(HRule_1.default, null),
-                this.renderVariableFields()),
-            React.createElement("div", { className: 'viewer-content' },
-                React.createElement("div", { className: 'content-header' },
-                    btnRender,
-                    React.createElement("div", { className: 'select-wrapper' }, compSelect),
-                    React.createElement("div", { className: 'output' }, viewerButtons),
-                    React.createElement("div", { className: 'right-interface' }, expIdField)),
-                React.createElement("div", { className: 'content-wrapper' }, this.renderViewerContent()))));
-    };
-    return StoryPreviewer;
-}(React.PureComponent));
-var mapStateToProps = function (state) {
-    return { notifications: state.notifications };
-};
-exports.default = (0, react_redux_1.connect)(mapStateToProps, {})(StoryPreviewer);
-//# sourceMappingURL=StoryPreviewer_BACKUP_64741.js.map