@imposium-hub/components 1.59.4 → 1.60.1

package/dist/styles.less

@@ -1866,7 +1866,6 @@ body{
 		audio{
 			width:100%;
 			height:100%;
-			outline:1px solid darken(@backgroundDark, 10%);
 		}
 	}
 }

package/less/components/player.less

@@ -21,7 +21,6 @@
 		audio{
 			width:100%;
 			height:100%;
-			outline:1px solid darken(@backgroundDark, 10%);
 		}
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "1.59.4",
+    "version": "1.60.1",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",

package/src/components/assets/AssetField.tsx

@@ -11,6 +11,14 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { ICON_FILTER, ICON_TIMES } from '../../constants/icons';
 
+interface IAssetList {
+    loading: boolean;
+    page: number;
+    total_pages: number;
+    asset_count: number;
+    assets: any[];
+}
+
 interface IAssetFieldProps {
     api: any;
     storyId: string;
@@ -30,6 +38,7 @@ interface IAssetFieldProps {
     labelPosition?: string;
     onError?: (message: string) => void;
     labelWidth?: string | number;
+    assetList: IAssetList;
 }
 
 interface IAssetFieldState {
@@ -39,6 +48,8 @@ interface IAssetFieldState {
 }
 
 class AssetField extends React.PureComponent<IAssetFieldProps, IAssetFieldState> {
+    private loadAssetTimer: any;
+
     constructor(props) {
         super(props);
 
@@ -51,26 +62,24 @@ class AssetField extends React.PureComponent<IAssetFieldProps, IAssetFieldState>
 
     public componentDidMount() {
         const { assetId } = this.props;
-
         // get the asset name from the API
         if (assetId && !this.state.assetName) {
             this.loadAsset();
         }
     }
 
-    public componentDidUpdate(prevProps, prevState) {
-        const { assetId } = this.props;
-
-        if (assetId && assetId !== prevProps.assetId) {
-            this.loadAsset();
-        } else if (!assetId) {
-            this.setState({
-                error: false,
-                assetName: ''
-            });
+    public componentDidUpdate(prevProps) {
+        const { assetList } = this.props;
+        if (assetList !== prevProps.assetList) {
+            clearTimeout(this.loadAssetTimer);
+            this.loadAssetTimer = setTimeout(() => this.loadAsset(), 300);
         }
     }
 
+    public componentWillUnmount(): void {
+        clearTimeout(this.loadAssetTimer);
+    }
+
     private loadAsset() {
         const { assetId, api } = this.props;
 
@@ -242,4 +251,8 @@ const mapDispatchToProps = (dispatch) => {
     return bindActionCreators({ updateFilters, uploadAssets }, dispatch);
 };
 
-export default connect(null, mapDispatchToProps)(AssetField);
+const mapStateToProps = (state): any => {
+    return { assetList: state.assetList };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(AssetField);

package/src/components/assets/AssetsTableDateCell.tsx

@@ -5,9 +5,10 @@ interface IAssetsTableDateCell {
     cell: any;
 }
 
-const AssetsTableDateCell: React.FC<IAssetsTableDateCell> = (p: IAssetsTableDateCell) => (
-    <div>{formatDateDefault(p.cell.row.values.date_created)}</div>
-);
+const AssetsTableDateCell: React.FC<IAssetsTableDateCell> = (p: IAssetsTableDateCell) =>
+    p.cell.row.values.date_created ? (
+        <div>{formatDateDefault(p.cell.row.values.date_created)}</div>
+    ) : null;
 
 const AssetsTableDateCellMemoized = React.memo(AssetsTableDateCell);
 export default AssetsTableDateCellMemoized;

package/src/components/assets/AssetsTableNameCell.tsx

@@ -5,6 +5,7 @@ import { updateAssetName } from '../../redux/actions/asset-list';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { IImposiumAPI } from '../../services/API';
+import { DeterminateLoader } from '../determinate-loader/DeterminateLoader';
 
 interface IAssetsTableNameCell {
     cell: any;
@@ -17,10 +18,11 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
     const {
         cell: {
             row: {
-                original: { name, id }
+                original: { name, id, percent: uploadProgress }
             }
         }
     } = props;
+
     const [localName, setLocalName] = useState('');
 
     const onUpdate = (n) => {
@@ -40,13 +42,26 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
         };
     }, [name]);
 
-    return (
-        <TextField
-            value={localName}
-            width={'100%'}
-            onChange={(n) => onUpdate(n)}
-        />
-    );
+    if (uploadProgress) {
+        const loader: JSX.Element =
+            uploadProgress < 100 ? (
+                <DeterminateLoader
+                    progress={uploadProgress}
+                    text={name}
+                />
+            ) : (
+                <span>Preparing asset...</span>
+            );
+        return loader;
+    } else {
+        return (
+            <TextField
+                value={localName}
+                width={'100%'}
+                onChange={(n) => onUpdate(n)}
+            />
+        );
+    }
 };
 
 const mapDispatchToProps = (dispatch): any => {

package/src/components/assets/AssetsTableSelectCell.tsx

@@ -23,7 +23,13 @@ class AssetsTableSelectCell extends React.PureComponent<IAssetsTableSelectCell>
 
     public render = (): JSX.Element => {
         const { cell, selectedAssets } = this.props;
-        const assetId: string = cell.row.original.id;
+        const {
+            row: {
+                original: { type, id }
+            }
+        } = cell;
+
+        const assetId: string = id;
         const isSelected: boolean = selectedAssets.indexOf(assetId) > -1;
         const selectionHandler = (selected, e) => {
             if (selected) {
@@ -37,14 +43,18 @@ class AssetsTableSelectCell extends React.PureComponent<IAssetsTableSelectCell>
             }
         };
 
-        return (
-            <CheckboxField
-                label=''
-                width='auto'
-                value={isSelected}
-                onChange={(v, e) => selectionHandler(v, e)}
-            />
-        );
+        if (type === 'upload') {
+            return null;
+        } else {
+            return (
+                <CheckboxField
+                    label=''
+                    width='auto'
+                    value={isSelected}
+                    onChange={(v, e) => selectionHandler(v, e)}
+                />
+            );
+        }
     };
 }
 

package/src/components/assets/AssetsTableTagsCell.tsx

@@ -5,15 +5,16 @@ interface IAssetsTableTagsCell {
     onClick(e: any): void;
 }
 
-const AssetsTableTagsCell: React.FC<IAssetsTableTagsCell> = (p: IAssetsTableTagsCell) => (
-    <Button
-        color='secondary'
-        style='subtle'
-        size='small'
-        onClick={p.onClick}>
-        {p.cell.row.values.tags.length}
-    </Button>
-);
+const AssetsTableTagsCell: React.FC<IAssetsTableTagsCell> = (p: IAssetsTableTagsCell) =>
+    p.cell.row.values.tags ? (
+        <Button
+            color='secondary'
+            style='subtle'
+            size='small'
+            onClick={p.onClick}>
+            {p.cell.row.values.tags.length}
+        </Button>
+    ) : null;
 
 const AssetsTableTagsCellMemoized = React.memo(AssetsTableTagsCell);
 export default AssetsTableTagsCellMemoized;

package/src/components/determinate-loader/DeterminateLoader.tsx

@@ -2,20 +2,21 @@ import * as React from 'react';
 
 export interface IDeterminateLoaderProps {
     progress: number; // expects int 0-100 (%)
+    text?: string;
 }
 
 export const DeterminateLoader: React.FC<IDeterminateLoaderProps> = (
     p: IDeterminateLoaderProps
 ) => {
     const transform: string = p.progress ? `scaleX(${p.progress / 100})` : 'scaleX(0)';
-
+    const text = p.text ? p.text : `${Math.round(p.progress)}%`;
     return (
         <div className='determinate-loader'>
             <div
                 className='progress-bg'
                 style={{ transform }}
             />
-            <div className='progress-copy'>{`${Math.round(p.progress)}%`}</div>
+            <div className='progress-copy'>{text}</div>
         </div>
     );
 };

package/src/components/players/AudioPlayer.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { DEFAULT_PADDING } from '../../constants/player';
 import { getPlayerStyle } from './VideoPlayer';
 
-interface IImagePlayerProps {
+interface IAudioPlayerProps {
     url: string;
     height?: number;
     width?: number;
@@ -10,7 +10,7 @@ interface IImagePlayerProps {
     active?: boolean;
 }
 
-class ImagePlayer extends React.PureComponent<IImagePlayerProps, undefined> {
+class AudioPlayer extends React.PureComponent<IAudioPlayerProps, undefined> {
     private audioNode: any;
 
     private width = 1280;
@@ -23,7 +23,7 @@ class ImagePlayer extends React.PureComponent<IImagePlayerProps, undefined> {
         this.audioNode = React.createRef();
     }
 
-    public getImageStyle(): any {
+    public getAudioStyle(): any {
         const { padding, width, height } = this.props;
         const pad = padding !== undefined ? padding : DEFAULT_PADDING;
 
@@ -38,7 +38,7 @@ class ImagePlayer extends React.PureComponent<IImagePlayerProps, undefined> {
                 <div className='media-player'>
                     <div
                         className='inner-viewer'
-                        style={this.getImageStyle()}>
+                        style={this.getAudioStyle()}>
                         <audio
                             controls
                             src={url}
@@ -53,4 +53,4 @@ class ImagePlayer extends React.PureComponent<IImagePlayerProps, undefined> {
     }
 }
 
-export default ImagePlayer;
+export default AudioPlayer;

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/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 || ''
                 }
             });