@imposium-hub/components 1.59.3 → 1.60.0

package/src/components/story-previewer/StoryPreviewer.tsx

@@ -22,6 +22,7 @@ import Timer from '../../services/Timer';
 import LogViewer from '../log-viewer/LogViewer';
 import { connect } from 'react-redux';
 import { ICON_DOWNLOAD, ICON_CLIPBOARD } from '../../constants/icons';
+import AudioPlayer from '../players/AudioPlayer';
 
 interface IStoryPreviewerProps {
     api: IImposiumAPI;
@@ -254,12 +255,14 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         } = this.state;
         const videos = output.videos;
         const images = output.images;
+        const audios = output.audio;
 
         if (videos) {
             for (const key in videos) {
                 if (videos.hasOwnProperty(key)) {
+                    const name: string = videos[key].name ? videos[key].name : videos[key].format;
                     const v = {
-                        label: `Video: ${key}`,
+                        label: `Video: ${name}`,
                         value: `${OUTPUT_TYPES.VIDEO}.${key}`
                     };
                     opts.push(v);
@@ -271,7 +274,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
             for (const key in images) {
                 if (images.hasOwnProperty(key)) {
                     const i = {
-                        label: `Image: ${key}`,
+                        label: `Image: ${images[key].name}`,
                         value: `${OUTPUT_TYPES.IMAGE}.${key}`
                     };
                     opts.push(i);
@@ -279,6 +282,18 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
             }
         }
 
+        if (audios) {
+            for (const key in audios) {
+                if (audios.hasOwnProperty(key)) {
+                    const a = {
+                        label: `Audio: ${audios[key].name}`,
+                        value: `${OUTPUT_TYPES.AUDIO}.${key}`
+                    };
+                    opts.push(a);
+                }
+            }
+        }
+
         return opts;
     }
 
@@ -395,6 +410,8 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     private getFirstOutput(experience: IExperience) {
         const videos = experience.output.videos;
         const images = experience.output.images;
+        const audios = experience.output.audio;
+
         if (videos) {
             for (const key in videos) {
                 if (videos.hasOwnProperty(key)) {
@@ -407,6 +424,12 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                     return `${OUTPUT_TYPES.IMAGE}.${key}`;
                 }
             }
+        } else if (audios) {
+            for (const key in audios) {
+                if (audios.hasOwnProperty(key)) {
+                    return `${OUTPUT_TYPES.AUDIO}.${key}`;
+                }
+            }
         } else {
             return null;
         }
@@ -624,18 +647,27 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         } else if (experience && activeOutput) {
             let player;
             let url;
+
             const outputArr = activeOutput.split('.');
             const type = outputArr[0];
             const key = outputArr[1];
 
             if (type === OUTPUT_TYPES.IMAGE) {
-                url = experience.output.images[key];
+                url = experience.output.images[key].url;
                 player = (
                     <ImagePlayer
                         url={url}
                         active={true}
                     />
                 );
+            } else if (type === OUTPUT_TYPES.AUDIO) {
+                url = experience.output.audio[key].url;
+                player = (
+                    <AudioPlayer
+                        url={url}
+                        active={true}
+                    />
+                );
             } else if (type === OUTPUT_TYPES.VIDEO) {
                 const output: any = experience.output.videos[key];
                 const mWidth = output.width !== undefined ? parseInt(output.width, 10) : null;
@@ -758,6 +790,8 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
 
             if (type === OUTPUT_TYPES.IMAGE) {
                 url = experience.output.images[key];
+            } else if (type === OUTPUT_TYPES.AUDIO) {
+                url = experience.output.audio[key].url;
             } else if (type === OUTPUT_TYPES.VIDEO) {
                 url = experience.output.videos[key].url;
             }

package/src/components/text-field/TextField.tsx

@@ -111,7 +111,8 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
 
         if (submittable && suggestions) {
             this.textAreaRef.onkeydown = (e) => {
-                if (e.key === 'Enter') {
+                if (e.key === 'Enter' && internalValue !== '') {
+                    hotkeys.unbind('enter', this.evtHandlers.submittable);
                     this.props.doSubmit(internalValue);
                 }
             };
@@ -240,6 +241,7 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
         const { internalValue } = this.state;
 
         if (!clear && internalValue !== '') {
+            console.log('forceSubmit', internalValue);
             this.props.doSubmit(internalValue);
 
             if (this.props.submittableType === 'add') {

package/src/constants/previewer.ts

@@ -1,5 +1,6 @@
 export const OUTPUT_TYPES: any = {
     LOG: 'log',
     IMAGE: 'image',
-    VIDEO: 'video'
+    VIDEO: 'video',
+    AUDIO: 'audio'
 };

package/src/index.ts

@@ -101,7 +101,7 @@ import {
     updateAssetStory
 } from './redux/actions/asset-list';
 import { getAssetTagList, addAssetTagToList } from './redux/actions/asset-tags';
-import { toggleAutoTag, uploadAssets } from './redux/actions/asset-uploads';
+import { cancelAssetUpload, toggleAutoTag, uploadAssets } from './redux/actions/asset-uploads';
 import { selectAsset, deselectAsset, resetSelection } from './redux/actions/selected-assets';
 import assetFilters from './redux/reducers/asset-filters';
 import assetList from './redux/reducers/asset-list';
@@ -278,5 +278,6 @@ export {
     HEADER_HEIGHT,
     decoupleAssets,
     updateAssetStory,
-    FontPicker
+    FontPicker,
+    cancelAssetUpload
 };

package/src/interfaces/experience.ts

@@ -7,11 +7,17 @@ export interface IOutputVideos {
 }
 
 export interface IOutputImages {
-    [s: string]: string;
+    [s: string]: IExperienceImage;
 }
+
+export interface IOutputAudios {
+    [s: string]: IExperienceAudio;
+}
+
 export interface IOutput {
     videos: IOutputVideos;
     images: IOutputImages;
+    audio: IOutputAudios;
 }
 
 export interface IExperienceVideo {
@@ -24,6 +30,24 @@ export interface IExperienceVideo {
     width?: number | string;
 }
 
+export interface IExperienceImage {
+    format: string;
+    url: string;
+    name?: string;
+    height?: number | string;
+    width?: number | string;
+    poster: boolean;
+}
+
+export interface IExperienceAudio {
+    format: string;
+    url: string;
+    name: string;
+    bitrate: number;
+    sample_rate: number;
+    channels: number;
+}
+
 export interface IExperience {
     date_created: number;
     id: string;

package/src/services/API.ts

@@ -141,7 +141,7 @@ export default class API {
                 baseURL,
                 headers: {
                     'Authorization': `Bearer ${idToken}`,
-                    'X-Imposium-API-Version': '2.0.0',
+                    'X-Imposium-API-Version': '2.0.2',
                     'X-Imposium-Account-Id': organizationId || ''
                 }
             });