@imposium-hub/components 1.60.0 → 1.60.1

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

@@ -1,639 +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 __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