@imposium-hub/components 1.43.5 → 1.44.1

package/{components → src/components}/service-icon/ServiceIcon.tsx

@@ -11,7 +11,7 @@ import { faUsersCog } from '@fortawesome/free-solid-svg-icons/faUsersCog';
 import { faCogs } from '@fortawesome/free-solid-svg-icons/faCogs';
 import { faPlayCircle } from '@fortawesome/free-solid-svg-icons/faPlayCircle';
 import { faUserLock } from '@fortawesome/free-solid-svg-icons/faUserLock';
-import { faSitemap } from '@fortawesome/free-solid-svg-icons/faSiteMap';
+import { faSitemap } from '@fortawesome/free-solid-svg-icons/faSitemap';
 import { faChartArea } from '@fortawesome/free-solid-svg-icons/faChartArea';
 import { faFileAlt } from '@fortawesome/free-solid-svg-icons/faFileAlt';
 

package/{components → src/components}/shortcut-menu/ShortcutMenu.stories.tsx

@@ -1,16 +1,11 @@
 import * as React from 'react';
-import ShortcutMenu from './ShortcutMenu';
+import { ShortcutMenu } from './ShortcutMenu';
 
 export default {
     title: 'ShortcutMenu',
     component: ShortcutMenu
 };
 
-interface IShortcutMenu {
-    shortcutCopyMap : any;
-    heading? : string;
-}
-
 const shortcuts = {
     'Up': 'Select previous experience',
     'Down': 'Select next experience',

package/{components → src/components}/shortcut-menu/ShortcutMenu.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import HRule from '../h-rule/HRule';
 
-interface IShortcutMenu {
+export interface IShortcutMenu {
     shortcutCopyMap : any;
     heading? : string;
 }
 
-const ShortcutMenu : React.FC<IShortcutMenu> = ({shortcutCopyMap, heading}) => {
+export const ShortcutMenu : React.FC<IShortcutMenu> = ({shortcutCopyMap, heading}) => {
 
     const h = (heading) ? <>
         <h3>{heading}</h3>
@@ -31,5 +31,3 @@ const ShortcutMenu : React.FC<IShortcutMenu> = ({shortcutCopyMap, heading}) => {
         </div>
     );
 };
-
-export default ShortcutMenu;

package/{components → src/components}/text-field/TextField.tsx

@@ -7,7 +7,7 @@ import { filterHotkeys } from '../../Util';
 import { ICON_CHECK, ICON_EDIT, ICON_SEARCH,
     ICON_PLUS, ICON_CLIPBOARD, ICON_TIMES} from '../../constants/icons';
 
-import * as Autosuggest from 'react-autosuggest';
+import Autosuggest from 'react-autosuggest';
 
 interface ITextFieldProps {
     buttons? : any;

package/{components → src/components}/toast-service/ToastService.tsx

@@ -37,7 +37,9 @@ export default class ToastService {
                         ...ToastService.DEFAULT_TOAST_CONFIG,
                         ...ToastService.INFO_STYLE
                     }
-                );
+                ).catch((e)=>{
+                    console.error(e);
+                })
                 return;
             case 'error':
                 cogoToast.error(
@@ -46,7 +48,9 @@ export default class ToastService {
                         ...ToastService.DEFAULT_TOAST_CONFIG,
                         ...ToastService.ERROR_STYLE
                     }
-                );
+                ).catch((e)=>{
+                    console.error(e);
+                })
                 return;
             default:
                 return;

package/{Entry.ts → src/index.ts}

@@ -31,7 +31,7 @@ import Section from './components/section/Section';
 import Spinner from './components/spinner/Spinner';
 import NoAccess from './components/no-access/NoAccess';
 import ServiceIcon from './components/service-icon/ServiceIcon';
-import DeterminateLoader from './components/determinate-loader/DeterminateLoader';
+import { DeterminateLoader } from './components/determinate-loader/DeterminateLoader';
 import AssetsTableDateCell from './components/assets/AssetsTableDateCell';
 import AssetsTablePreviewCell from './components/assets/AssetsTablePreviewCell';
 import AssetsTableDurationCell from './components/assets/AssetsTableDurationCell';
@@ -61,11 +61,8 @@ import ImagePreview from './components/players/ImagePreview';
 import ImageSequencePlayer from './components/players/ImageSequencePlayer';
 import LogViewer from './components/log-viewer/LogViewer';
 import StoryPreviewer from './components/story-previewer/StoryPreviewer';
-import StaticCompositionEditor from './components/compositions/StaticCompositionEditor';
-import StaticCompositionRenderer from './components/compositions/StaticCompositionRenderer';
 import { IStaticComposition } from './constants/compositions';
-import ShortcutMenu from './components/shortcut-menu/ShortcutMenu';
-import TextLayer from './components/compositions/TextLayer';
+import { ShortcutMenu } from './components/shortcut-menu/ShortcutMenu';
 import { ASSET_TYPES } from './constants/assets';
 import Portal from './components/portal/Portal';
 import AssetDetails from './components/asset-details/AssetDetails';
@@ -118,7 +115,6 @@ import Timer from './services/Timer';
  */
 import {getFirstStoryInOrg, string2HexCode, toFixed, padStart, parameterizeServiceUrl, scrapeEmail, fitToContainer,
     filterHotkeys, mimetypeConformsToOverlay, validateAssetMimetype, formatDateDefault, validateAccessLevel, formattedTime} from './Util';
-import CompositionRendererLayer from './components/compositions/CompositionRendererLayer';
 import PublishStatusIndicator from './components/publish-wizard/publish/PublishStatusIndicator';
 
 export {
@@ -188,8 +184,6 @@ export {
     DroppableAssetRenderer,
     PreviewNotAvailable,
 
-    StaticCompositionEditor,
-    StaticCompositionRenderer,
     IStaticComposition,
 
     auth,
@@ -224,7 +218,7 @@ export {
     addAssetTagToList,
     assetTags,
     assetActions,
-    
+
     activeBatch,
     batchActions,
 
@@ -251,9 +245,6 @@ export {
     padStart,
     formatDateDefault,
 
-    TextLayer,
-    CompositionRendererLayer,
-
     ASSET_TYPES,
     PublishWizard,
     publish,

package/{redux → src/redux}/actions/access.ts

@@ -1,4 +1,3 @@
-import * as localForage from 'localforage';
 import SessionService from '../../services/Session';
 
 export const ACCESS_CACHE_KEY : string = 'imposium_access_list';

package/{redux → src/redux}/actions/active-batch.ts

@@ -129,15 +129,12 @@ const parseEGCOptions = (acts : any) : any[] => {
     const actsKeys : string[] = Object.keys(acts);
     const firstAct : any = acts[actsKeys[0]];
 
-    let sceneKeys : string[];
-    let firstVideoScene : any;
-
     if (typeof firstAct === 'undefined') {
         return [];
     }
 
-    sceneKeys = Object.keys(firstAct.scenes);
-    firstVideoScene = firstAct.scenes[sceneKeys[0]];
+    const sceneKeys = Object.keys(firstAct.scenes);
+    const firstVideoScene = firstAct.scenes[sceneKeys[0]];
 
     if (typeof firstVideoScene === 'undefined') {
         return [];

package/{redux → src/redux}/actions/asset-list.ts

@@ -82,7 +82,7 @@ export const addAssetTag = (api : IImposiumAPI, id : string, tags : string, stor
                 ? tags.split(',').filter(String).map((t : string) => (t.trim()))
                 : [tags];
 
-            let promises : Array<Promise<any>>;
+            let promises : Promise<any>[];
 
             if (freshTags.length === 0) {
                 resolve();
@@ -98,7 +98,9 @@ export const addAssetTag = (api : IImposiumAPI, id : string, tags : string, stor
                 Promise.all(promises)
                     .then((errs) => {
                         resolve();
-                    });
+                    }).catch((e)=>{
+                        console.error(e);
+                    })
 
                 dispatch({type: assetActions.ADD_TAG, id, freshTags});
             }

package/{redux → src/redux}/actions/asset-uploads.ts

@@ -113,7 +113,7 @@ export const uploadAssets = (api : IImposiumAPI, files : File[], storyId : strin
 
 const pollAssetJobs = (api, ongoingJobs : any[], timeout : number) : void => {
     timeout = window.setTimeout(() => {
-        const promises : Array<Promise<any | Error>> = ongoingJobs.map((b : any) => (api.getJob(b.jobId)));
+        const promises : Promise<any | Error>[] = ongoingJobs.map((b : any) => (api.getJob(b.jobId)));
 
         Promise.all(promises)
             .then((ongoingJobResults : any[]) => {

package/{redux → src/redux}/reducers/access.ts

@@ -8,7 +8,7 @@ try {
     console.warn('Cached access data was malformed or missing, redirected to login.');
 }
 
-function access(state = initialState, action) {
+const access = (state = initialState, action) => {
     switch (action.type) {
         case actions.SET:
         case actions.STORY_ADDED:

package/{redux → src/redux}/reducers/auth.ts

@@ -17,7 +17,7 @@ try {
     console.warn('Cached credentials were malformed or missing, redirected to login.');
 }
 
-function auth(state = initialState, action) {
+const auth = (state = initialState, action)=>{
     switch (action.type) {
         case actions.LOGIN:
             return {...action.auth};

package/{services → src/services}/Session.ts

@@ -52,7 +52,6 @@ export default class SessionService {
         const {idTokenPayload: {sub, exp}} = freshIdentity;
         const {organizations} = freshAccess;
 
-        let freshSession : IHubSession;
         let cachedOrganizationId : string;
         let cachedStoryId : string;
         let organizationId : string = '';
@@ -105,7 +104,7 @@ export default class SessionService {
             activeStoryId = organizations[0].stories[0].id;
         }
 
-        freshSession = {
+        const freshSession :IHubSession = {
             sub,
             organization_id: organizationId,
             story_id: activeStoryId,

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/cjs",
+        "module": "commonjs",
+        "target": "es5",
+        "jsx": "react",
+        "sourceMap": true,
+        "noImplicitAny": false,
+        "downlevelIteration": true,
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
+        "lib": ["es6", "dom", "es2016", "es2017"],
+        "declaration": true,
+        "moduleResolution": "node",
+        "suppressImplicitAnyIndexErrors": true,
+    },
+    "include": ["src"],
+    "exclude": ["node_modules", "dist"]
+}

package/components/compositions/CompositionRendererLayer.tsx

@@ -1,197 +0,0 @@
-import * as React from 'react';
-import Moveable from 'react-moveable';
-import hotkeys from 'hotkeys-js';
-import TextLayer from './TextLayer';
-
-interface ICompositionRendererLayerProps {
-    layer : any;
-    selected : boolean;
-    inventory : any;
-    onClick(id : string) : void;
-    onReady() : void;
-    onUpdate(l : any) : void;
-}
-
-interface ICompositionRendererLayerState {
-    lockRatio : boolean;
-}
-
-class CompositionRendererLayer extends React.PureComponent<ICompositionRendererLayerProps, ICompositionRendererLayerState> {
-
-    private evtHandlers;
-    private moveable;
-    private layerRefMount = (e) => this.onRefMount(e);
-    private layerRef;
-
-    constructor(props) {
-
-        super(props);
-
-        this.evtHandlers = {
-            onDrag: (e) => this.handleDrag(e),
-            onResize: (e) => this.handleResize(e),
-            onRotate: (e) => this.handleRotate(e),
-            onClick: (e) => this.layerClicked(e),
-            onShift: (e) => this.onShift(e),
-            onLeft: (e) => this.move(e, -1, 0),
-            onRight: (e) => this.move(e, 1, 0),
-            onUp: (e) => this.move(e, 0, -1),
-            onDown: (e) => this.move(e, 0, 1),
-        };
-
-        this.moveable = React.createRef();
-
-        this.state = {
-            lockRatio: false
-        };
-    }
-
-    private move(e, x, y) {
-
-        if (this.props.selected) {
-            const shiftX = (e.shiftKey) ? x * 10 : x;
-            const shiftY = (e.shiftKey) ? y * 10 : y;
-
-            const newLayer = {...this.props.layer};
-            newLayer.x = newLayer.x + shiftX;
-            newLayer.y = newLayer.y + shiftY;
-
-            this.props.onUpdate(newLayer);
-        }
-    }
-
-    private onShift(e) {
-
-        if (e.key === 'Shift' && e.keyCode === 16 && this.props.selected) {
-            const lockRatio = (e.type === 'keydown') ? true : false;
-            this.setState({
-                lockRatio
-            });
-        }
-    }
-
-    public componentDidUpdate() {
-
-        const moveable = this.moveable.current;
-        if (moveable) {
-            moveable.updateRect();
-        }
-    }
-
-    public componentDidMount() {
-
-        hotkeys('*', {keyup: true}, this.evtHandlers.onShift);
-        hotkeys('left, shift+left', this.evtHandlers.onLeft);
-        hotkeys('right, shift+right', this.evtHandlers.onRight);
-        hotkeys('up, shift+up', this.evtHandlers.onUp);
-        hotkeys('down, shift+down', this.evtHandlers.onDown);
-    }
-
-    public componentWillUnmount() {
-
-        hotkeys.unbind('*', this.evtHandlers.onShift);
-        hotkeys.unbind('left, shift+left', this.evtHandlers.onLeft);
-        hotkeys.unbind('right, shift+right', this.evtHandlers.onRight);
-        hotkeys.unbind('up, shift+up', this.evtHandlers.onUp);
-        hotkeys.unbind('down, shift+down', this.evtHandlers.onDown);
-    }
-
-    private handleDrag(e) {
-
-        const newLayer = {...this.props.layer};
-        newLayer.x = Math.round(e.left);
-        newLayer.y = Math.round(e.top);
-
-        this.props.onUpdate(newLayer);
-    }
-
-    private handleResize(e) {
-
-        const {drag: {beforeDelta}, width, height} = e;
-
-        const newLayer = {...this.props.layer};
-        newLayer.width = Math.round(width);
-        newLayer.height = Math.round(height);
-        newLayer.x = Math.round(newLayer.x + beforeDelta[0]);
-        newLayer.y = Math.round(newLayer.y + beforeDelta[1]);
-
-        this.props.onUpdate(newLayer);
-    }
-
-    private handleRotate(e) {
-
-        const newLayer = {...this.props.layer};
-        newLayer.rotation = Math.round(e.beforeDelta + newLayer.rotation);
-
-        this.props.onUpdate(newLayer);
-    }
-
-    private layerClicked(e) {
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        this.props.onClick(this.props.layer.id);
-    }
-
-    // Call forceUpdate() so that Moveable can find it's div on mount...
-    // TODO: find a better way to do this. This is trash.
-    private onRefMount(e) {
-
-        this.layerRef = e;
-        this.forceUpdate();
-    }
-
-    private renderLayerContent() {
-
-        const {layer, inventory} = this.props;
-
-        return <TextLayer
-            onReady = {this.props.onReady}
-            inventory = {inventory}
-            options = {layer}/>;
-    }
-
-    public render() {
-
-        const { selected, layer } = this.props;
-        const { lockRatio } = this.state;
-
-        const layerClass = `comp-layer-${layer.id}`;
-        const layerStyle : any = {
-            top: `${layer.y}px`,
-            left: `${layer.x}px`,
-            width: `${layer.width}px`,
-            height: `${layer.height}px`,
-            transform: `rotate(${layer.rotation}deg)`
-        };
-
-        const moveable = (selected) ?  <Moveable
-            ref = {this.moveable}
-            target = {document.querySelector(`.${layerClass}`)}
-            onDrag = {this.evtHandlers.onDrag}
-            onDragEnd = {this.evtHandlers.onDragEnd}
-            onResize = {this.evtHandlers.onResize}
-            onResizeEnd = {this.evtHandlers.onResizeEnd}
-            onRotate = {this.evtHandlers.onRotate}
-            onRotateEnd = {this.evtHandlers.onRotateEnd}
-            keepRatio = {lockRatio}
-            resizable = {true}
-            rotatable = {true}
-            origin = {false}
-            draggable = {true}/> : null;
-
-        return <>
-           {moveable}
-            <div
-                ref = {this.layerRefMount}
-                className = {`composition-renderer-layer ${layerClass}`}
-                onClick = {this.evtHandlers.onClick}
-                style = {layerStyle}>
-                {this.renderLayerContent()}
-            </div>
-        </>;
-    }
-}
-
-export default CompositionRendererLayer;

package/components/compositions/StaticCompositionConfig.tsx

@@ -1,143 +0,0 @@
-import * as React from 'react';
-import { compositions as copy } from '../../constants/copy';
-import { IStaticComposition } from '../../constants/compositions';
-import TextField from '../text-field/TextField';
-import NumberField from '../number-field/NumberField';
-import ColorField from '../color-field/ColorField';
-import FieldWrapper from '../field-wrapper/FieldWrapper';
-import ButtonMenu from '../button-menu/ButtonMenu';
-import Button from '../button/Button';
-import ButtonMenuItem from '../button-menu/ButtonMenuItem';
-import { getNewCompositionLayer } from '../../constants/compositions';
-import { ICON_PLUS, ICON_IMAGE, ICON_FONT } from '../../constants/icons';
-import TextLayerOptions from './TextLayerOptions';
-
-interface IStaticCompositionConfigProps {
-    storyId : string;
-    api : any;
-    composition : IStaticComposition;
-    selectedLayer : string;
-    onUpdate(c : IStaticComposition) : void;
-    onSelectLayer(id) : void;
-}
-
-class StaticCompositionConfig extends React.PureComponent<IStaticCompositionConfigProps, undefined> {
-
-    private eventHandlers : any;
-    private addLayerMenu : any;
-
-    constructor(props) {
-
-        super(props);
-
-        this.eventHandlers = {
-            inputs: {
-                width: (v) => this.compValueChanged('width', v),
-                height: (v) => this.compValueChanged('height', v),
-                name: (v) => this.compValueChanged('name', v),
-                backgroundColor: (v) => this.bgChanged(v),
-            },
-            selectLayer: (l) => this.props.onSelectLayer(l)
-        };
-
-        this.addLayerMenu = <Button
-            onClick = {() => this.addLayer()}
-            style = 'subtle'
-            size = 'small'
-            color = 'primary'>
-            {ICON_PLUS}
-        </Button>;
-    }
-
-    private addLayer() {
-
-        const layerConfig = getNewCompositionLayer();
-        const comp = {...this.props.composition};
-        const layers = [...comp.layers];
-        layers.push(layerConfig);
-        comp.layers = layers;
-
-        this.props.onUpdate(comp);
-        this.props.onSelectLayer(layerConfig.id);
-    }
-
-    private updateLayer(index, config) {
-
-        const comp = {...this.props.composition};
-        const layers = [...comp.layers];
-        layers[index] = config;
-        comp.layers = layers;
-
-        this.props.onUpdate(comp);
-    }
-
-    private compValueChanged(key, value) {
-
-        const comp = {...this.props.composition};
-        comp[key] = value;
-        this.props.onUpdate(comp);
-    }
-
-    private bgChanged(color) {
-
-        if (color.hex === 'transparent') {
-            this.compValueChanged('background_color', null);
-        } else {
-            const values = color.rgb;
-            this.compValueChanged('background_color', `rgba(${values.r},${values.g},${values.b},${values.a})`);
-        }
-    }
-
-    public render() {
-
-        const {composition, selectedLayer, storyId, api} = this.props;
-        const bg = (composition.background_color) ? composition.background_color : 'transparent';
-        const layerLabel = <span>{copy.layers}&nbsp;{this.addLayerMenu}</span>;
-
-        return (
-            <>
-                <NumberField
-                    label = {copy.width}
-                    tooltip = {copy.tooltipWidth}
-                    value = {composition['width']}
-                    width  = '30%'
-                    labelPosition = 'top'
-                    onChange = {this.eventHandlers.inputs.width}/>
-                <NumberField
-                    label = {copy.height}
-                    tooltip = {copy.tooltipHeight}
-                    value = {composition['height']}
-                    width  = '30%'
-                    labelPosition = 'top'
-                    onChange = {this.eventHandlers.inputs.height}/>
-                <ColorField
-                    label = {copy.backgroundColor}
-                    tooltip = {copy.tooltipBackgroundColor}
-                    enableAlpha = {true}
-                    value = {composition['background_color']}
-                    width  = '40%'
-                    labelPosition = 'top'
-                    pickerPosition = 'right'
-                    onChange = {this.eventHandlers.inputs.backgroundColor}/>
-                <FieldWrapper
-                    label = {layerLabel}
-                    width  = '100%'
-                    labelPosition = 'top'>
-                    {composition.layers.map((layer, i) => {
-                        const selected = (layer.id === selectedLayer);
-                        return <TextLayerOptions
-                            storyId = {storyId}
-                            api = {api}
-                            key = {layer.id}
-                            selected = {selected}
-                            onSelectLayer = {this.eventHandlers.selectLayer}
-                            onUpdate = {(c) => this.updateLayer(i, c)}
-                            options = {layer}/>;
-                    })}
-                </FieldWrapper>
-            </>
-        );
-    }
-}
-
-export default StaticCompositionConfig;