@imposium-hub/components 1.59.3 → 1.60.0

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

@@ -0,0 +1,670 @@
+"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