@imposium-hub/components 1.55.0 → 1.56.0

package/dist/cjs/components/publish-wizard/copy.d.ts

@@ -0,0 +1,186 @@
+export declare const assets: {
+    tooltipFilter: string;
+    previewNotAvailable: string;
+    iconTypes: {
+        filter: string;
+        lut: string;
+        all: string;
+        video: string;
+        audio: string;
+        video_composition: string;
+        image: string;
+        image_sequence: string;
+        template: string;
+        static_composition: string;
+        font: string;
+        after_effects: string;
+    };
+    uploads: {
+        noUploads: string;
+        preparePhase: string;
+        autoTagInput: string;
+        assignToStoryInput: string;
+        assignToStoryInfo: string;
+        uploadButton: string;
+        cancelButton: string;
+    };
+    tags: {
+        add: string;
+        duplicated: string;
+    };
+    field: {
+        fieldMismatchError: string;
+        dragPrompt: string;
+        tooltipClear: string;
+        tooltipFilter: string;
+        tooltipFilterAsset: string;
+    };
+    details: string;
+    newDetails: string;
+    name: string;
+    date: string;
+    addTag: string;
+    assetTag: string;
+    sessionExpired: string;
+};
+export declare const previewer: {
+    previewVars: string;
+    time: string;
+    expRunning: string;
+    runExpStart: string;
+    runExpError: string;
+    triggerExpError: string;
+    expId: string;
+    createExpError: string;
+    logDownloadError: string;
+    logURLError: string;
+    btnLog: string;
+    btnRender: string;
+    btnReRender: string;
+    expIdField: string;
+    runExpErrorDes: string;
+};
+export declare const compositions: {
+    name: string;
+    width: string;
+    height: string;
+    rotation: string;
+    color: string;
+    x: string;
+    y: string;
+    wrap: string;
+    fit: string;
+    fillMode: string;
+    hAlign: string;
+    vAlign: string;
+    backgroundColor: string;
+    layers: string;
+    layerText: string;
+    fontType: string;
+    layerImage: string;
+    fontSize: string;
+    lineHeight: string;
+    font: string;
+    letterSpacing: string;
+    wordSpacing: string;
+    tooltipName: string;
+    tooltipBackgroundColor: string;
+    tooltipWidth: string;
+    tooltipHeight: string;
+    tooltipAddLayer: string;
+    tooltipLayerRotation: string;
+    tooltipLayerX: string;
+    tooltipLayerY: string;
+    tooltipLayerWidth: string;
+    tooltipLayerHeight: string;
+    textOptions: string;
+    textLayerContent: string;
+    tooltipTextLayerContent: string;
+};
+export declare const publish: {
+    accessKey: string;
+    tooltipAccessKey: string;
+    publishTitle: string;
+    publishStepTitle: string;
+    publishStepDesc: string;
+    distributeStepTitle: string;
+    distributeStepDesc: string;
+    compositionError: string;
+    btnWebsite: string;
+    webpageTitle: string;
+    webPageHosted: string;
+    webpageDesc: string;
+    sampleWebpage: string;
+    btnEmail: string;
+    exporting: string;
+    emailTitle: string;
+    emailDesc: string;
+    downloadSampleCsvLink: string;
+    uploadCsv: string;
+    generatingLink: string;
+    downloadLink: string;
+    btnDownload: string;
+    generatingLinkDesc: string;
+    missingColumns: string;
+    renderBatchFailed: string;
+    createBatchFailed: string;
+    downloadError: string;
+    embeddedCodeCopyError: string;
+    creatingLinks: string;
+    importingData: string;
+    downloadDesc: string;
+    titleMissingColumns: string;
+    csvMissingColumns: string;
+    csvMatchColumns: string;
+    exportBatchOfVideo: string;
+    btnHubspot: string;
+    hubspotTitle: string;
+    hubspotDesc: string;
+    saveChanges: string;
+    embeddedCode: string;
+    btnAPI: string;
+    btnExport: string;
+    btnCRM: string;
+    btnPublish: string;
+    btnSkip: string;
+    btnBack: string;
+    btnFinished: string;
+    btnCancel: string;
+    btnNext: string;
+    noCompErrorTitle: string;
+    noCompErrorDesc: string;
+};
+export declare const integration: {
+    errorPullingComps: string;
+    errorPullingAEs: string;
+    errorCreatingCreds: string;
+    errorGettingCreds: string;
+    documentation: string;
+    docParagraph: string;
+    js: string;
+    jsSdkLink: string;
+    restLink: string;
+    rest: string;
+    sdkArchiveSuffix: string;
+};
+export declare const header: {
+    publishing: string;
+    working: string;
+    statusError: string;
+    publishJobError: string;
+    publishPollError: string;
+};
+export declare const project: {
+    compName: string;
+    tooltipCompId: string;
+};
+export declare const BATCHES_COPY: {
+    progress: {
+        notRendered: string;
+        rendering: string;
+        rendered: string;
+        cancelled: string;
+        queued: string;
+        malformed: string;
+    };
+};

package/dist/cjs/components/publish-wizard/copy.js

@@ -0,0 +1,199 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BATCHES_COPY = exports.project = exports.header = exports.integration = exports.publish = exports.compositions = exports.previewer = exports.assets = void 0;
+exports.assets = {
+    tooltipFilter: 'Filter by Asset type',
+    previewNotAvailable: 'Preview Not Available for this Asset Type',
+    iconTypes: {
+        filter: 'Filter By Type',
+        lut: 'LUT',
+        all: 'All Types',
+        video: 'Video Files',
+        audio: 'Audio Files',
+        video_composition: 'Composition',
+        image: 'Image Files',
+        image_sequence: 'Image Sequences (Archive)',
+        template: 'Custom Template',
+        static_composition: 'Template',
+        font: 'Font Files',
+        after_effects: 'After Effects'
+    },
+    uploads: {
+        noUploads: 'There are currently no assets uploading...',
+        preparePhase: 'Preparing asset...',
+        autoTagInput: 'Tag by filename',
+        assignToStoryInput: 'Assign to Story',
+        assignToStoryInfo: 'If selected, any assets uploaded will only be available to use with the currently selected story.',
+        uploadButton: 'Upload',
+        cancelButton: 'Cancel'
+    },
+    tags: {
+        add: 'Add new tag',
+        duplicated: 'Duplicated Tags: "[dupedTags]" will not be added.'
+    },
+    field: {
+        fieldMismatchError: 'Asset Type mismatch. Field only accepts "[accepts]" assets.',
+        dragPrompt: 'Drag Asset Here',
+        tooltipClear: 'Clear the selected Asset',
+        tooltipFilter: 'Filter assets to match Asset type',
+        tooltipFilterAsset: 'Filter assets to the selected Asset'
+    },
+    details: 'Asset Details',
+    newDetails: 'New Asset Details',
+    name: 'Name',
+    date: 'Date Created',
+    addTag: 'Add Tag',
+    assetTag: 'Tags',
+    sessionExpired: 'Your session has expired, please log in again to continue.'
+};
+exports.previewer = {
+    previewVars: 'Preview Variables',
+    time: 'Time Elapsed:',
+    expRunning: 'Rendering Experience',
+    runExpStart: 'Creating Experience',
+    runExpError: 'Error running experience - ID: [expId]',
+    triggerExpError: 'Error triggering experience - ID: [expId]',
+    expId: 'Running Experience - ID: [expId]',
+    createExpError: 'Error creating experience',
+    logDownloadError: 'Could not download log of Job: [jobId]',
+    logURLError: 'Could not retrieve log URL of Job: [jobId]',
+    btnLog: 'Job Log',
+    btnRender: 'Render',
+    btnReRender: 'Re-Render',
+    expIdField: 'Exp. ID',
+    runExpErrorDes: 'Sorry, there was a problem creating your video. Please try again.'
+};
+exports.compositions = {
+    name: 'Name',
+    width: 'Width',
+    height: 'Height',
+    rotation: 'Rotation',
+    color: 'Color',
+    x: 'X',
+    y: 'Y',
+    wrap: 'Wrap',
+    fit: 'Fit',
+    fillMode: 'Fill Mode',
+    hAlign: 'H. Align',
+    vAlign: 'V. Align',
+    backgroundColor: 'Background',
+    layers: 'Layers',
+    layerText: 'Text',
+    fontType: 'Font Type',
+    layerImage: 'Image',
+    fontSize: 'Font Size',
+    lineHeight: 'Line Height',
+    font: 'Font',
+    letterSpacing: 'Letter Spacing',
+    wordSpacing: 'Word Spacing',
+    tooltipName: 'Display name of this composition.',
+    tooltipBackgroundColor: 'Background color of this composition. Can also be transparent.',
+    tooltipWidth: 'Width of the composition, in pixels',
+    tooltipHeight: 'Height of the composition, in pixels',
+    tooltipAddLayer: 'Add a new layer to the composition',
+    tooltipLayerRotation: 'Rotation angle of the layer, in degrees',
+    tooltipLayerX: 'Layer X position.',
+    tooltipLayerY: 'Layer Y position',
+    tooltipLayerWidth: 'Layer width, in pixels.',
+    tooltipLayerHeight: 'Layer height, in pixels',
+    textOptions: 'Text Options',
+    textLayerContent: 'Content',
+    tooltipTextLayerContent: 'The copy rendered in this layer. Wrap variables like so: {{variable_id}}.'
+};
+exports.publish = {
+    accessKey: 'Access Key',
+    tooltipAccessKey: 'API access key to use for this video distribution.',
+    publishTitle: 'Publish & Deliver',
+    // publish
+    publishStepTitle: 'STEP 1: Publish your Project',
+    publishStepDesc: "Your project needs to be published before your changes can be seen. If you haven't made any changes since the last time you published, you can skip to the next step.",
+    // distribute
+    distributeStepTitle: 'STEP 2: How do you want your users to view their video?',
+    distributeStepDesc: 'Select which Composition you want to deliver, access credentials you want to use, and distribution channel.',
+    compositionError: 'Please Select Composition',
+    // webpage
+    btnWebsite: 'Webpage',
+    webpageTitle: 'STEP 3: Webpage',
+    webPageHosted: 'Webpage hosted on Imposium',
+    webpageDesc: 'You can share a demo page that is hosted on Imposium or you can download a sample webpage you can customize and use to generate videos. Please ensure you include a column for every variable on your story.',
+    sampleWebpage: 'Download sample webpage',
+    // email
+    btnEmail: 'Email',
+    exporting: 'Exporting CSV... (please wait)',
+    emailTitle: 'STEP 3: Upload a CSV file with your user information in it.',
+    emailDesc: 'You can download a sample CSV with fields to populate as a starting point. Or you can upload one that already has the data in it.',
+    downloadSampleCsvLink: 'Download Sample CSV',
+    uploadCsv: 'Upload Your CSV',
+    generatingLink: 'STEP 4: Generating embed links',
+    downloadLink: 'STEP 5: Download Your CSV file',
+    btnDownload: 'Download CSV',
+    generatingLinkDesc: 'Please wait while we generate the link for your users. This may take few minutes.',
+    missingColumns: 'Error: missing required columns',
+    renderBatchFailed: 'Error: Failed to render batch',
+    createBatchFailed: 'Error: Failed to create batch',
+    downloadError: 'Error downloading sample CSV.',
+    embeddedCodeCopyError: 'Error copying embed code.',
+    creatingLinks: 'Creating User Links... (please wait)',
+    importingData: 'Importing Data... (please wait)',
+    downloadDesc: 'Your CSV data file is ready to download with an embed code you can import into your email platform to send out.',
+    titleMissingColumns: 'Warning: ',
+    csvMissingColumns: 'Some of your column names did not match up with the variables in the story. Please ensure these variables line up and then re-upload the csv: ',
+    csvMatchColumns: 'Please match the column(s) provided to the story variables:',
+    // export
+    exportBatchOfVideo: 'Export batch of videos',
+    // hubspot
+    btnHubspot: 'Hubspot',
+    hubspotTitle: 'STEP 3: Copy Hubspot code snippet',
+    hubspotDesc: 'Copy the provided embed code into HubSpot. Replace the placeholder variable values with HubSpot template strings, to splice in your user data.',
+    saveChanges: 'Save Changes',
+    embeddedCode: 'Embed Url: ',
+    // api
+    btnAPI: 'API integration',
+    // export
+    btnExport: 'Export',
+    btnCRM: 'Flashtalking Creative Manager',
+    // global
+    btnPublish: 'Publish',
+    btnSkip: 'Skip',
+    btnBack: 'Back',
+    btnFinished: 'Done',
+    btnCancel: 'Cancel',
+    btnNext: 'Next',
+    noCompErrorTitle: 'No Compositions Found',
+    noCompErrorDesc: "You must have at least 1 composition on your story to render and distribute videos."
+};
+exports.integration = {
+    errorPullingComps: ' Error getting composition IDs, contact your Imposium admin for support.',
+    errorPullingAEs: ' Error getting After Effect IDs, contact your Imposium admin for support.',
+    errorCreatingCreds: ' Error creating credentials, contact your Imposium admin for support.',
+    errorGettingCreds: ' Error getting credentials, contact your Imposium admin for support.',
+    documentation: 'Documentation',
+    docParagraph: 'Use the links below for more information on integrating Imposium into your application.',
+    js: 'JavaScript SDK',
+    jsSdkLink: 'https://docs.imposium.com/js-sdk/#/',
+    restLink: 'https://docs.imposium.com',
+    rest: 'REST API',
+    sdkArchiveSuffix: ' - JS SDK Integration.zip'
+};
+exports.header = {
+    publishing: 'Publishing...',
+    working: 'Using Working Copy',
+    statusError: 'Error getting story status',
+    publishJobError: 'Error creating publish story job',
+    publishPollError: 'Error polling publish job status'
+};
+exports.project = {
+    compName: 'Composition',
+    tooltipCompId: 'Unique ID of the selected composition. Used to render that specific composition via the API and Imposium JS-SDK.'
+};
+exports.BATCHES_COPY = {
+    progress: {
+        notRendered: 'not rendered',
+        rendering: 'rendering',
+        rendered: 'rendered',
+        cancelled: 'cancelled',
+        queued: 'queued',
+        malformed: 'unknown'
+    }
+};
+//# sourceMappingURL=copy.js.map

package/dist/cjs/components/publish-wizard/copy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy.js","sourceRoot":"","sources":["../../../../src/components/publish-wizard/copy.ts"],"names":[],"mappings":"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"}

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

@@ -48,6 +48,42 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 };
 };
@@ -65,6 +101,7 @@ 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");
@@ -72,11 +109,29 @@ 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 = {
@@ -88,7 +143,8 @@ var StoryPreviewer = /** @class */ (function (_super) {
             timeElapsed: 0,
             activeOutput: '',
             rendering: false,
-            isTimeOut: false
+            isTimeOut: false,
+            compositionOverride: null
         };
         _this.timer = new Timer_1.default({
             interval: 1000,
@@ -99,6 +155,7 @@ var StoryPreviewer = /** @class */ (function (_super) {
         _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;
@@ -183,9 +240,6 @@ var StoryPreviewer = /** @class */ (function (_super) {
     };
     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();
@@ -415,7 +469,8 @@ var StoryPreviewer = /** @class */ (function (_super) {
     };
     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;
+        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();
         this.resetState(false, function () {
             _this.setState({
                 rendering: true,
@@ -425,7 +480,7 @@ var StoryPreviewer = /** @class */ (function (_super) {
                 if (onNotification) {
                     onNotification(copy_1.previewer.runExpStart);
                 }
-                api.createExperience(storyId, _this.state.inventory, compositionId, useWorkingCopy)
+                api.createExperience(storyId, _this.state.inventory, compId, useWorkingCopy)
                     .then(function (resExp) {
                     if (onNotification) {
                         onNotification(copy_1.previewer.expId.replace('[expId]', resExp.id));
@@ -433,7 +488,7 @@ var StoryPreviewer = /** @class */ (function (_super) {
                     if (onExperienceCreated) {
                         onExperienceCreated(resExp);
                     }
-                    _this.getExperience(resExp.id, true, compositionId, useWorkingCopy);
+                    _this.getExperience(resExp.id, true, compId, useWorkingCopy);
                 })
                     .catch(function (e) {
                     _this.resetState();
@@ -521,17 +576,72 @@ var StoryPreviewer = /** @class */ (function (_super) {
             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, compositionOptions = _a.compositionOptions;
+        var compositionOverride = this.state.compositionOverride;
+        if (allowCompOverride) {
+            if (compositionOverride) {
+                return compositionOverride;
+            }
+            else if (!compositionOverride && compositionOptions[0] && !compositionId) {
+                return compositionOptions[0].value;
+            }
+            else {
+                return compositionId;
+            }
+        }
+        else {
+            return compositionId;
+        }
+    };
+    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 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 btnRender = !rendering ? (React.createElement(Button_1.default, { size: 'large', onClick: this.evtHandlers.createExp, color: 'primary', style: 'bold' }, renderCopy)) : null;
+        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();
-            viewerButtons = (React.createElement(SelectField_1.default, { width: '130px', options: viewerOpts, value: activeOutput, onChange: this.evtHandlers.toggleOutput }));
+            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.props.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),
@@ -540,6 +650,7 @@ var StoryPreviewer = /** @class */ (function (_super) {
             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()))));