@imposium-hub/components 1.45.4 → 1.46.0

package/src/components/assets/AssetsTableTypeFilter.tsx

@@ -8,18 +8,21 @@ import { bindActionCreators } from 'redux';
 import { ASSET_TYPES } from '../../constants/assets';
 
 interface IAssetsTableTypeFilter {
-    assetFilters : any;
-    updateFilters : (filters : any) => any;
+    assetFilters: any;
+    updateFilters: (filters: any) => any;
 }
 
 interface IAssetsTableTypeState {
-    openMenu : boolean;
+    openMenu: boolean;
 }
 
-class AssetsTableTypeFilter extends React.PureComponent<IAssetsTableTypeFilter, IAssetsTableTypeState> {
-    private readonly typeFilterRef : React.Ref<any>;
+class AssetsTableTypeFilter extends React.PureComponent<
+    IAssetsTableTypeFilter,
+    IAssetsTableTypeState
+> {
+    private readonly typeFilterRef: React.Ref<any>;
 
-    constructor(props : IAssetsTableTypeFilter) {
+    constructor(props: IAssetsTableTypeFilter) {
         super(props);
 
         this.state = {
@@ -29,65 +32,64 @@ class AssetsTableTypeFilter extends React.PureComponent<IAssetsTableTypeFilter,
         this.typeFilterRef = React.createRef();
     }
 
-    private handleFilterChange = (type : string) : void => {
+    private handleFilterChange = (type: string): void => {
+        const freshTypeFilter: string = type !== ASSET_TYPES.ALL ? type : '';
+        this.props.updateFilters({ type: freshTypeFilter, page: 1 });
+    };
 
-        const freshTypeFilter : string = (type !== ASSET_TYPES.ALL) ? type : '';
-        this.props.updateFilters({type: freshTypeFilter, page: 1});
-    }
-
-    public render = () : JSX.Element => {
-        const {openMenu} = this.state;
-        const {assetFilters: {type}} = this.props;
-        const filterButtons : any = [];
+    public render = (): JSX.Element => {
+        const { openMenu } = this.state;
+        const {
+            assetFilters: { type }
+        } = this.props;
+        const filterButtons: any = [];
 
         for (const key in ASSET_TYPES) {
             if (ASSET_TYPES.hasOwnProperty(key)) {
                 const t = ASSET_TYPES[key];
                 filterButtons.push(
                     <div
-                        key = {t}
-                        className = 'asset-filter'
-                        onClick = {() => this.handleFilterChange(t)}
-                    >
-                        <AssetsTypeIcon type = {t} />
+                        key={t}
+                        className='asset-filter'
+                        onClick={() => this.handleFilterChange(t)}>
+                        <AssetsTypeIcon type={t} />
                     </div>
                 );
             }
         }
 
         return (
-            <div className = 'centered cell'>
+            <div className='centered cell'>
                 <Button
-                    tooltip = 'Filter by Asset type'
-                    buttonRef = {this.typeFilterRef}
-                    onClick = {() => this.setState({openMenu: !openMenu})}
-                >
-                    <AssetsTypeIcon type = {type || 'filter'} />
+                    tooltip='Filter by Asset type'
+                    buttonRef={this.typeFilterRef}
+                    onClick={() => this.setState({ openMenu: !openMenu })}>
+                    <AssetsTypeIcon type={type || 'filter'} />
 
                     <ImposiumDropdown
                         fixed
-                        show = {openMenu}
-                        position = 'bottomleft'
-                        toggleRef = {this.typeFilterRef}
-                        onOutsideClick = {() => this.setState({openMenu: false})}
-                    >
+                        show={openMenu}
+                        position='bottomleft'
+                        toggleRef={this.typeFilterRef}
+                        onOutsideClick={() => this.setState({ openMenu: false })}>
                         {filterButtons}
                     </ImposiumDropdown>
                 </Button>
             </div>
         );
-    }
+    };
 }
 
-const mapDispatchToProps = (dispatch) : any => {
-    return bindActionCreators({updateFilters}, dispatch);
+const mapDispatchToProps = (dispatch): any => {
+    return bindActionCreators({ updateFilters }, dispatch);
 };
 
-const mapStateToProps = (state) : any => {
-    return {assetFilters: state.assetFilters};
+const mapStateToProps = (state): any => {
+    return { assetFilters: state.assetFilters };
 };
 
-const AssetsTableTypeFilterMemoized = connect(mapStateToProps, mapDispatchToProps)(
-    React.memo(AssetsTableTypeFilter)
-);
+const AssetsTableTypeFilterMemoized = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(React.memo(AssetsTableTypeFilter));
 export default AssetsTableTypeFilterMemoized;

package/src/components/assets/AssetsTypeIcon.tsx

@@ -2,89 +2,77 @@ import * as React from 'react';
 import { ASSET_COLORS, ASSET_TYPES } from '../../constants/assets';
 import { assets as copy } from '../../constants/copy';
 import {
-    ICON_FILTER, ICON_TIMES, ICON_VIDEO, ICON_AUDIO_TYPE, ICON_FONT, ICON_LAYER_GROUP, ICON_CUBE,
-    ICON_IMAGE, ICON_COPY, ICON_FILE_ARCHIVE, ICON_IMAGE_SEQ_TYPE, ICON_FILE_CODE
+    ICON_FILTER,
+    ICON_TIMES,
+    ICON_VIDEO,
+    ICON_AUDIO_TYPE,
+    ICON_FONT,
+    ICON_LAYER_GROUP,
+    ICON_CUBE,
+    ICON_IMAGE,
+    ICON_FILE_ARCHIVE,
+    ICON_IMAGE_SEQ_TYPE,
+    ICON_FILE_CODE
 } from '../../constants/icons';
 
 interface IAssetsTypeIconProps {
-    type : string;
+    type: string;
 }
 
-const AssetsTypeIcon : React.FC<IAssetsTypeIconProps> = (p : IAssetsTypeIconProps) => {
-
+const AssetsTypeIcon: React.FC<IAssetsTypeIconProps> = (p: IAssetsTypeIconProps) => {
     const style = {
         color: ASSET_COLORS[p.type]
     };
 
     switch (p.type) {
         case 'filter':
-            return (
-                <span>
-                    {ICON_FILTER}
-                </span>
-            );
+            return <span>{ICON_FILTER}</span>;
         case 'all':
-            return (
-                <span title = {copy.iconTypes.all}>
-                    {ICON_TIMES}
-                </span>
-            );
+            return <span title={copy.iconTypes.all}>{ICON_TIMES}</span>;
         case ASSET_TYPES.VIDEO:
             return (
-                <span title = {copy.iconTypes.video} style = {style}>
+                <span title={copy.iconTypes.video} style={style}>
                     {ICON_VIDEO}
                 </span>
             );
         case ASSET_TYPES.AUDIO:
             return (
-                <span title = {copy.iconTypes.audio} style = {style}>
+                <span title={copy.iconTypes.audio} style={style}>
                     {ICON_AUDIO_TYPE}
                 </span>
             );
         case ASSET_TYPES.IMAGE:
             return (
-                <span title = {copy.iconTypes.image} style = {style}>
+                <span title={copy.iconTypes.image} style={style}>
                     {ICON_IMAGE}
                 </span>
             );
         case ASSET_TYPES.IMAGE_SEQUENCE:
             return (
-                <span title = {copy.iconTypes.image_sequence} style = {style}>
+                <span title={copy.iconTypes.image_sequence} style={style}>
                     {ICON_IMAGE_SEQ_TYPE}
                 </span>
             );
         case ASSET_TYPES.TEMPLATE:
             return (
-                <span title = {copy.iconTypes.template} style = {style}>
+                <span title={copy.iconTypes.template} style={style}>
                     {ICON_FILE_ARCHIVE}
                 </span>
             );
         case ASSET_TYPES.VIDEO_COMPOSITION:
             return (
-                <span title = {copy.iconTypes.video_composition} style = {style}>
+                <span title={copy.iconTypes.video_composition} style={style}>
                     {ICON_LAYER_GROUP}
                 </span>
             );
         case ASSET_TYPES.LUT:
-            return (
-                <span title = {copy.iconTypes.lut}>
-                    {ICON_CUBE}
-                </span>
-            );
+            return <span title={copy.iconTypes.lut}>{ICON_CUBE}</span>;
         case ASSET_TYPES.FONT:
-            return (
-                <span title = {copy.iconTypes.font}>
-                    {ICON_FONT}
-                </span>
-            );
+            return <span title={copy.iconTypes.font}>{ICON_FONT}</span>;
         case ASSET_TYPES.STATIC_COMPOSITION:
-            return (
-                <span title = {copy.iconTypes.static_composition}>
-                    {ICON_FILE_CODE}
-                </span>
-            );
+            return <span title={copy.iconTypes.static_composition}>{ICON_FILE_CODE}</span>;
         default:
-            return (null);
+            return null;
     }
 };
 

package/src/components/assets/AssetsUploadMenu.tsx

@@ -2,54 +2,62 @@ import * as React from 'react';
 import { assets as copy } from '../../constants/copy';
 import CheckboxField from '../checkbox-field/CheckboxField';
 import { DeterminateLoader } from '../determinate-loader/DeterminateLoader';
-import { toggleAutoTag, toggleAssignToStory, cancelAssetUpload } from '../../redux/actions/asset-uploads';
+import {
+    toggleAutoTag,
+    toggleAssignToStory,
+    cancelAssetUpload
+} from '../../redux/actions/asset-uploads';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import {ICON_TIMES} from '../../constants/icons';
+import { ICON_TIMES } from '../../constants/icons';
 import Button from '../button/Button';
-import {IImposiumAPI} from '../../services/API';
+import { IImposiumAPI } from '../../services/API';
 
 interface IAssetsUploadMenuProps {
-    assetUploads : any;
-    api : any;
-    toggleAutoTag : (toggle : boolean) => any;
-    toggleAssignToStory : (toggle : boolean) => any;
-    cancelAssetUpload : (fileName : string, api : IImposiumAPI) => any;
+    assetUploads: any;
+    api: any;
+    toggleAutoTag: (toggle: boolean) => any;
+    toggleAssignToStory: (toggle: boolean) => any;
+    cancelAssetUpload: (fileName: string, api: IImposiumAPI) => any;
 }
 
 class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
-    constructor(props : IAssetsUploadMenuProps) {
+    constructor(props: IAssetsUploadMenuProps) {
         super(props);
     }
 
-   private handleCancelAssetUpload(fileName : string) {
-        const {api} = this.props;
+    private handleCancelAssetUpload(fileName: string) {
+        const { api } = this.props;
         this.props.cancelAssetUpload(fileName, api);
     }
 
-    public render = () : JSX.Element => {
-        const {assetUploads: {uploads, autoTag, assignToStory}} = this.props;
-        let uploadsListInner : JSX.Element[] | JSX.Element;
+    public render = (): JSX.Element => {
+        const {
+            assetUploads: { uploads, autoTag, assignToStory }
+        } = this.props;
+        let uploadsListInner: JSX.Element[] | JSX.Element;
         if (uploads.length > 0) {
-            uploadsListInner = uploads.map((u : any) => {
-                const {filename, percent} = u;
-                const loader : JSX.Element = (percent < 100)
-                    ? (<DeterminateLoader progress = {u.percent} />)
-                    : (<span>{copy.uploads.preparePhase}</span>);
-                const closeButton : JSX.Element = (percent < 100) && (
+            uploadsListInner = uploads.map((u: any) => {
+                const { filename, percent } = u;
+                const loader: JSX.Element =
+                    percent < 100 ? (
+                        <DeterminateLoader progress={u.percent} />
+                    ) : (
+                        <span>{copy.uploads.preparePhase}</span>
+                    );
+                const closeButton: JSX.Element = percent < 100 && (
                     <Button
-                        key = 'btn-cancel'
-                        onClick = {() => this.handleCancelAssetUpload(filename)}
-                        style = 'subtle'
-                    >
+                        key='btn-cancel'
+                        onClick={() => this.handleCancelAssetUpload(filename)}
+                        style='subtle'>
                         {ICON_TIMES}
                     </Button>
                 );
 
                 return (
-                    <div className = 'ongoing-upload' key = {filename}>
+                    <div className='ongoing-upload' key={filename}>
                         <div className='ongoing-upload-inner'>
-                            <div className = 'upload-filename'>{filename}</div>
+                            <div className='upload-filename'>{filename}</div>
                             {closeButton}
                         </div>
                         {loader}
@@ -57,39 +65,39 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
                 );
             });
         } else {
-            uploadsListInner = (<div className = 'no-ongoing-uploads'>{copy.uploads.noUploads}</div>);
+            uploadsListInner = <div className='no-ongoing-uploads'>{copy.uploads.noUploads}</div>;
         }
 
         return (
-            <div className = 'uploads-menu'>
-                <div className = 'uploads-controls'>
+            <div className='uploads-menu'>
+                <div className='uploads-controls'>
                     <CheckboxField
-                        width = '50%'
-                        label = {copy.uploads.autoTagInput}
-                        value = {autoTag}
-                        onChange = {() => this.props.toggleAutoTag(!autoTag)}
+                        width='50%'
+                        label={copy.uploads.autoTagInput}
+                        value={autoTag}
+                        onChange={() => this.props.toggleAutoTag(!autoTag)}
                     />
                     <CheckboxField
-                        width = '50%'
-                        label = {copy.uploads.assignToStoryInput}
-                        info = {copy.uploads.assignToStoryInfo}
-                        value = {assignToStory}
-                        onChange = {() => this.props.toggleAssignToStory(!assignToStory)}
+                        width='50%'
+                        label={copy.uploads.assignToStoryInput}
+                        info={copy.uploads.assignToStoryInfo}
+                        value={assignToStory}
+                        onChange={() => this.props.toggleAssignToStory(!assignToStory)}
                     />
                 </div>
 
-                <div className = 'uploads-list'>{uploadsListInner}</div>
+                <div className='uploads-list'>{uploadsListInner}</div>
             </div>
         );
-    }
+    };
 }
 
-const mapDispatchToProps = (dispatch) : any => {
-    return bindActionCreators({toggleAutoTag, toggleAssignToStory, cancelAssetUpload}, dispatch);
+const mapDispatchToProps = (dispatch): any => {
+    return bindActionCreators({ toggleAutoTag, toggleAssignToStory, cancelAssetUpload }, dispatch);
 };
 
-const mapStateToProps = (state) : any => {
-    return {assetUploads: state.assetUploads};
+const mapStateToProps = (state): any => {
+    return { assetUploads: state.assetUploads };
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(AssetsUploadMenu);

package/src/components/assets/DataTableDnDWrapper.tsx

@@ -3,32 +3,31 @@ import { useDrag } from 'react-dnd';
 import mergeRefs from 'react-merge-refs';
 
 interface IDataTableDnDWrapper {
-    children : any;
-    dndType : string;
-    dndName : string;
-    row : any;
-    rowRef : any;
-    rowProps : any;
+    children: any;
+    dndType: string;
+    dndName: string;
+    row: any;
+    rowRef: any;
+    rowProps: any;
 }
 
-const DataTableDndWrapper : React.FC<IDataTableDnDWrapper> = (props : IDataTableDnDWrapper) => {
+const DataTableDndWrapper: React.FC<IDataTableDnDWrapper> = (props: IDataTableDnDWrapper) => {
+    const { dndType, dndName, row } = props;
 
-        const {dndType, dndName, row} = props;
+    const [, drag] = useDrag({
+        type: dndType,
+        item: {
+            name: dndName,
+            rowData: row.original,
+            type: dndType
+        }
+    });
 
-        const [_, drag] = useDrag({
-            type: dndType,
-            item: {
-                name: dndName,
-                rowData: row.original,
-                type: dndType
-            },
-        });
-
-        return (
-            <tr {...props.rowProps} ref={mergeRefs([drag, props.rowRef])}>
-                {props.children}
-            </tr>
-        );
+    return (
+        <tr {...props.rowProps} ref={mergeRefs([drag, props.rowRef])}>
+            {props.children}
+        </tr>
+    );
 };
 
 export default DataTableDndWrapper;

package/src/components/assets/DroppableAssetRenderer.tsx

@@ -3,23 +3,29 @@ import { useDrop } from 'react-dnd';
 import { ASSET_DND_TYPES } from '../../constants/dnd';
 
 interface IDroppableAssetRendererProps {
-    children : any;
-    onDrop : (i, m) => any;
+    children: any;
+    onDrop: (i, m) => any;
 }
 
-const DroppableAssetRenderer : React.FC<IDroppableAssetRendererProps> = (p : IDroppableAssetRendererProps) => {
-    const [{canDrop, isOver}, drop] = useDrop({
+const DroppableAssetRenderer: React.FC<IDroppableAssetRendererProps> = (
+    p: IDroppableAssetRendererProps
+) => {
+    const [{ canDrop, isOver }, drop] = useDrop({
         accept: ASSET_DND_TYPES.ASSET_NAME,
         drop: p.onDrop,
         collect: (monitor) => ({
             isOver: monitor.isOver(),
-            canDrop: monitor.canDrop(),
+            canDrop: monitor.canDrop()
         })
     });
 
-    const border = (canDrop && isOver) ? '1px solid royalblue' : '';
+    const border = canDrop && isOver ? '1px solid royalblue' : '';
 
-    return (<div ref={drop} className = 'asset-target' style={{border}}>{p.children}</div>);
+    return (
+        <div ref={drop} className='asset-target' style={{ border }}>
+            {p.children}
+        </div>
+    );
 };
 
 export default DroppableAssetRenderer;

package/src/components/assets/FontAssetPreview.tsx

@@ -4,41 +4,50 @@ import { getPlayerStyle } from '../players/VideoPlayer';
 import TextLayer from '../compositions/TextLayer';
 
 interface IFontAssetPreviewProps {
-    asset : any;
-    height? : number;
-    width? : number;
-    padding? : number;
-    active? : boolean;
+    asset: any;
+    height?: number;
+    width?: number;
+    padding?: number;
+    active?: boolean;
 }
 
 class FontAssetPreview extends React.PureComponent<IFontAssetPreviewProps, undefined> {
-
-    private defaultSize : number = 600;
+    private defaultSize: number = 600;
 
     constructor(props) {
-
         super(props);
     }
 
-    public getWrapperStyle() : any {
+    public getWrapperStyle(): any {
+        const { padding, width, height } = this.props;
+        const pad = padding !== undefined ? padding : DEFAULT_PADDING;
 
-        const {padding, width, height} = this.props;
-        const pad = (padding !== undefined) ? padding : DEFAULT_PADDING;
-
-        return getPlayerStyle(width, height, this.defaultSize, this.defaultSize, pad, this.defaultSize, this.defaultSize);
+        return getPlayerStyle(
+            width,
+            height,
+            this.defaultSize,
+            this.defaultSize,
+            pad,
+            this.defaultSize,
+            this.defaultSize
+        );
     }
 
     public render() {
-
-        const {active, asset: {name, url, id}, width, height} = this.props;
+        const {
+            active,
+            asset: { name, url, id },
+            width,
+            height
+        } = this.props;
         const wrapperStyle = this.getWrapperStyle();
 
         if (active !== false) {
             return (
-                <div className = 'media-player'>
-                    <div className = 'inner-viewer' style = {wrapperStyle}>
+                <div className='media-player'>
+                    <div className='inner-viewer' style={wrapperStyle}>
                         <TextLayer
-                            options = {{
+                            options={{
                                 width,
                                 height,
                                 x: 0,
@@ -62,7 +71,8 @@ class FontAssetPreview extends React.PureComponent<IFontAssetPreviewProps, undef
                                 vertical_alignment: 'center',
                                 text_wrap: true,
                                 text_fit: true
-                            }}/>
+                            }}
+                        />
                     </div>
                 </div>
             );

package/src/components/assets/PreviewNotAvailable.tsx

@@ -3,18 +3,21 @@ import { ICON_BAN } from '../../constants/icons';
 import { assets } from '../../constants/copy';
 
 interface IPreviewNotAvailableProps {
-    active? : boolean;
+    active?: boolean;
 }
 
-export const PreviewNotAvailable : React.FC<IPreviewNotAvailableProps> = (p : IPreviewNotAvailableProps) => {
-
+export const PreviewNotAvailable: React.FC<IPreviewNotAvailableProps> = (
+    p: IPreviewNotAvailableProps
+) => {
     if (p.active === true || p.active === undefined) {
-        return (<div className = 'preview-not-available'>
-            <div className = 'cta'>
-                <div className = 'icon'>{ICON_BAN}</div>
-                <p>{assets.previewNotAvailable}</p>
+        return (
+            <div className='preview-not-available'>
+                <div className='cta'>
+                    <div className='icon'>{ICON_BAN}</div>
+                    <p>{assets.previewNotAvailable}</p>
+                </div>
             </div>
-        </div>);
+        );
     } else {
         return null;
     }