@imposium-hub/components 1.59.3 → 1.60.0

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

@@ -0,0 +1,639 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 file_saver_1 = require("file-saver");
+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';
+        _this.download = function (url, fileName) { return __awaiter(_this, void 0, void 0, function () {
+            var res, blob;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, fetch(url, {
+                            cache: 'no-cache'
+                        })];
+                    case 1:
+                        res = _a.sent();
+                        return [4 /*yield*/, res.blob()];
+                    case 2:
+                        blob = _a.sent();
+                        (0, file_saver_1.saveAs)(blob, fileName);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        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
+        };
+        _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(); },
+            gotExperience: null
+        };
+        return _this;
+    }
+    StoryPreviewer.prototype.componentWillUnmount = function () {
+        var api = this.props.api;
+        this.timer.stop();
+        this.evtHandlers.gotExperience = null;
+        api.cancelExperiencePolling();
+    };
+    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);
+            });
+        }
+    };
+    StoryPreviewer.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _this = this;
+        if (prevProps.storyId !== this.props.storyId) {
+            this.evtHandlers.gotExperience = null;
+        }
+        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, compositionId = _a.compositionId, useWorkingCopy = _a.useWorkingCopy;
+        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, compositionId, useWorkingCopy)
+                    .then(function (resExp) {
+                    if (onNotification) {
+                        onNotification(copy_1.previewer.expId.replace('[expId]', resExp.id));
+                    }
+                    if (onExperienceCreated) {
+                        onExperienceCreated(resExp);
+                    }
+                    _this.getExperience(resExp.id, true, compositionId, 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.copyToClipboard = function (text) {
+        var _a = this.props, onNotification = _a.onNotification, onError = _a.onError;
+        navigator.clipboard.writeText(text).then(function () {
+            if (onNotification) {
+                onNotification('Copied to clipboard!');
+            }
+        }, function () {
+            if (onError) {
+                onError('Error copying to clipboard.');
+            }
+        });
+    };
+    StoryPreviewer.prototype.render = function () {
+        var _this = this;
+        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 btnRender = !rendering ? (React.createElement(Button_1.default, { 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 }));
+        }
+        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: '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_REMOTE_64741.js.map