@imposium-hub/components 2.2.45 → 2.2.46-0

package/src/components/assets/AssetField.tsx

@@ -28,12 +28,7 @@ interface IAssetFieldProps {
     tooltip: string;
     onChange: (asset: any) => any;
     updateFilters: (filters: any) => any;
-    uploadAssets: (
-        api: any,
-        files: File[],
-        storyId?: string,
-        bindToOverlay?: (f: any) => any
-    ) => any;
+    uploadAssets: (api: any, files: File[], bindToOverlay?: (f: any) => any) => any;
     accepts?: string | string[];
     labelPosition?: string;
     onError?: (message: string) => void;
@@ -108,14 +103,14 @@ class AssetField extends React.PureComponent<IAssetFieldProps, IAssetFieldState>
     }
 
     private onFileDrop = (i: any, monitor: any): void => {
-        const { accepts, storyId, api } = this.props;
+        const { accepts, api } = this.props;
         if (monitor) {
             const { files } = monitor.getItem();
 
             if (mimetypeConformsToOverlay(accepts, files[0])) {
                 this.setState({ assetUploading: true });
 
-                this.props.uploadAssets(api, [files[0]], storyId, (f: any) => {
+                this.props.uploadAssets(api, [files[0]], (f: any) => {
                     this.setState({ assetName: f.name, error: false }, () => {
                         this.setState({ assetUploading: false });
                         this.props.onChange(f);

package/src/components/assets/AssetsTableDurationCell.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ASSET_TYPES } from '../../constants/assets';
-import { getDuration } from '../../Util';
+import { formatAudioDuration, getDuration } from '../../Util';
 
 interface IAssetsTableDurationCell {
     cell: any;
@@ -30,10 +30,7 @@ const AssetsTableDurationCell: React.FC<IAssetsTableDurationCell> = (
     }
 
     if (type === ASSET_TYPES.AUDIO) {
-        const date = new Date(null);
-        date.setSeconds(original.duration);
-        const timestamp = date.toISOString().slice(11, 19);
-        duration = `${timestamp}.x`;
+        duration = formatAudioDuration(original.duration);
     }
 
     if (duration !== null && duration !== undefined) {

package/src/components/assets/AssetsTableGlobalCell.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ICON_GLOBE } from '../../constants/icons';
+
+interface IAssetsTableGlobalCell {
+    cell: any; // React table cell wrapper
+}
+
+const AssetsTableGlobalCell: React.FC<IAssetsTableGlobalCell> = (p: IAssetsTableGlobalCell) => {
+    return (
+        <div className='asset-global-cell'>{p.cell.row.original.story_id ? null : ICON_GLOBE}</div>
+    );
+};
+
+const AssetsTableGlobalCellMemoized = React.memo(AssetsTableGlobalCell);
+export default AssetsTableGlobalCellMemoized;

package/src/components/assets/AssetsTableNameCell.tsx

@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { IImposiumAPI } from '../../services/API';
 import { DeterminateLoader } from '../determinate-loader/DeterminateLoader';
+import { assets as copy } from '../../constants/copy';
 
 interface IAssetsTableNameCell {
     cell: any;
@@ -50,7 +51,7 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
                     text={name}
                 />
             ) : (
-                <span>Preparing asset...</span>
+                <span>{copy.uploads.preparePhase}</span>
             );
         return loader;
     } else {

package/src/components/assets/AssetsTableRateCell.tsx

@@ -1,20 +1,27 @@
 import * as React from 'react';
+import { ASSET_TYPES } from '../../constants/assets';
 
 interface IAssetsTableRateCell {
     cell: any;
 }
-
 const AssetsTableRateCell: React.FC<IAssetsTableRateCell> = (props: IAssetsTableRateCell) => {
     const {
         cell: {
             row: {
-                original: { rate }
+                original: { type, data, rate }
             }
         }
     } = props;
 
-    if (rate !== null && rate !== undefined) {
-        return <div className='asset-rate-cell'>{Number(rate).toFixed(2)}</div>;
+    let framerate = rate !== null && rate !== undefined ? rate : '';
+
+    if (type === ASSET_TYPES.VIDEO_COMPOSITION && data) {
+        const { rate: frame_rate } = JSON.parse(data);
+        framerate = frame_rate;
+    }
+
+    if (framerate !== null && framerate !== undefined && framerate !== '') {
+        return <div className='asset-rate-cell'>{Number(framerate).toFixed(2)}</div>;
     } else {
         return <div className='asset-rate-cell'></div>;
     }

package/src/components/assets/AssetsTableTypeFilter.tsx

@@ -62,15 +62,14 @@ class AssetsTableTypeFilter extends React.PureComponent<
                     buttonRef={this.typeFilterRef}
                     onClick={() => this.setState({ openMenu: !openMenu })}>
                     <AssetsTypeIcon type={type || 'filter'} />
-
-                    <ImposiumDropdown
-                        show={openMenu}
-                        position='bottomleft'
-                        toggleRef={this.typeFilterRef}
-                        onOutsideClick={() => this.setState({ openMenu: false })}>
-                        {filterButtons}
-                    </ImposiumDropdown>
                 </Button>
+                <ImposiumDropdown
+                    show={openMenu}
+                    position='bottomleft'
+                    toggleRef={this.typeFilterRef}
+                    onOutsideClick={() => this.setState({ openMenu: false })}>
+                    {filterButtons}
+                </ImposiumDropdown>
             </div>
         );
     };

package/src/components/assets/AssetsUploadMenu.tsx

@@ -1,17 +1,11 @@
 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 {
-    toggleAssignToStory,
     cancelAssetUpload,
-    toggleTagFileName,
-    setDelimiter,
-    toggleTagDelimiter,
-    toggleManualTagging,
-    addManualTag,
-    deleteManualTag,
-    deleteManualTags
+    uploadingAsset,
+    updateUploadTags,
+    cancelNonUploadedAssets
 } from '../../redux/actions/asset-uploads';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -24,26 +18,58 @@ import AssetsTableTagsPivot from './AssetsTableTagsPivot';
 import Tag from '../tag/Tag';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEraser } from '@fortawesome/free-solid-svg-icons';
+import { ICON_TIMES, ICON_UPLOAD } from '../../constants/icons';
+import AssetsTableDropzone from './AssetsTableDropzone';
 
 interface IAssetsUploadMenuProps {
+    editor: any;
     assetUploads: any;
     assetTags: string[];
     api: any;
-    toggleAutoTag: (toggle: boolean) => any;
-    toggleTagFileName: (toggle: boolean) => any;
-    toggleAssignToStory: (toggle: boolean) => any;
-    toggleTagDelimiter: (togglle: boolean) => any;
-    setDelimiter: (delimiter: string) => any;
-    toggleManualTagging: (togglle: boolean) => any;
-    addManualTag: (tag: string) => any;
-    deleteManualTag: (tag: string) => any;
-    deleteManualTags: () => void;
     cancelAssetUpload: (fileName: string, api: IImposiumAPI) => any;
+    cancelNonUploadedAssets: (api: IImposiumAPI) => any;
+    updateEditorConfig(c): void;
+    uploadingAsset: (api: IImposiumAPI) => void;
+    updateUploadTags: () => void;
+    onDrop: (i, m) => any;
+    show: boolean;
+    onMenuHover: (o) => void;
+    toggleRef?: any;
+    onOutsideClick: (...args) => any;
+    tableHover: boolean;
 }
 
-class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
+interface IAssetsUploadMenuState {
+    assetOver: boolean;
+}
+
+class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAssetsUploadMenuState> {
+    private menuRef: any = null;
+
+    private clickHandler: any = (e) => this.detectOutsideClick(e);
+
     constructor(props: IAssetsUploadMenuProps) {
         super(props);
+
+        this.state = {
+            assetOver: false
+        };
+
+        this.menuRef = React.createRef();
+    }
+
+    public componentDidUpdate(prevProps: IAssetsUploadMenuProps) {
+        if (this.props.show && !prevProps.show) {
+            window.addEventListener('mousedown', this.clickHandler);
+        }
+
+        if (!this.props.show && prevProps.show) {
+            window.removeEventListener('mousedown', this.clickHandler);
+        }
+    }
+
+    public componentWillUnmount(): void {
+        window.removeEventListener('mousedown', this.clickHandler);
     }
 
     private handleCancelAssetUpload(fileName: string) {
@@ -51,81 +77,180 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
         this.props.cancelAssetUpload(fileName, api);
     }
 
+    private uploadFileHandler() {
+        const { api } = this.props;
+        this.props.uploadingAsset(api);
+        this.props.updateEditorConfig({ showUploadsDropdown: false });
+    }
+
+    private cancelUploadHandler(remove: boolean) {
+        const { api } = this.props;
+        if (!remove) {
+            this.props.cancelNonUploadedAssets(api);
+        }
+        this.props.updateEditorConfig({ showUploadsDropdown: false });
+    }
+
+    private uploadsSetting(state) {
+        const currState = this.props.editor.assetUploads;
+
+        const newState = { ...currState, ...state };
+        this.props.updateEditorConfig({
+            assetUploads: newState
+        });
+        this.props.updateUploadTags();
+    }
+
+    private deleteManualTag(tag) {
+        const { manualTags } = this.props.editor.assetUploads;
+        const updatedManualTags = manualTags.filter((t: string) => t !== tag);
+        this.uploadsSetting({ manualTags: updatedManualTags });
+    }
+
+    private addManualTag(tag) {
+        const { manualTags } = this.props.editor.assetUploads;
+        const updatedManualTags = manualTags ? manualTags : [];
+        updatedManualTags.push(tag);
+        this.uploadsSetting({ manualTags: updatedManualTags });
+    }
+
+    private checkHover(monitor) {
+        const isOver = monitor.isOver();
+        if (isOver !== this.state.assetOver) {
+            this.setState({ assetOver: isOver }, () => this.props.onMenuHover(isOver));
+        }
+    }
+
+    private detectOutsideClick = (e: any): void => {
+        const { toggleRef } = this.props;
+        const { target } = e;
+
+        const isResizing = target.classList.contains('Resizer') ? true : false;
+        const clickInside =
+            this.menuRef.current && this.menuRef.current.contains(target) ? true : false;
+        const clickOnToggle =
+            toggleRef && toggleRef.current && toggleRef.current.contains(target) ? true : false;
+
+        if (!isResizing && !clickInside && !clickOnToggle) {
+            this.cancelRender(true);
+        }
+    };
+
+    private cancelRender = (forced: boolean = false): void => {
+        const { onOutsideClick } = this.props;
+
+        window.removeEventListener('mousedown', this.clickHandler);
+
+        if (forced) {
+            onOutsideClick();
+        }
+    };
+
     public render() {
         const {
-            assetUploads: {
-                uploads,
-                assignToStory,
-                tagByFileName,
-                tagByDelimiter,
-                delimiter,
-                tagManually,
-                manualTags
+            assetUploads: { uploads },
+            editor: {
+                showUploadsMenu,
+                assetUploads: {
+                    tagByDelimiter,
+                    delimiter,
+                    assignToStory,
+                    tagByFileName,
+                    tagManually,
+                    manualTags
+                }
             },
             assetTags
         } = this.props;
+        const disable = uploads.length > 0 ? false : true;
+
         let uploadsListInner;
+        const uploading = [];
         if (uploads.length > 0) {
             uploadsListInner = uploads.map((u: any) => {
-                const { filename, percent } = u;
-                const loader =
-                    percent < 100 ? (
-                        <DeterminateLoader progress={u.percent} />
-                    ) : (
-                        <span>{copy.uploads.preparePhase}</span>
+                const { filename, percent, tags } = u;
+
+                if (percent === 0) {
+                    const closeButton = (
+                        <Button
+                            key='btn-cancel'
+                            onClick={() => this.handleCancelAssetUpload(filename)}
+                            style='subtle'
+                            size='small'>
+                            {ICON_TIMES}
+                        </Button>
                     );
-                const closeButton = percent < 100 && (
-                    <Button
-                        key='btn-cancel'
-                        onClick={() => this.handleCancelAssetUpload(filename)}
-                        style='subtle'
-                        size='small'>
-                        {copy.uploads.cancelButton}
-                    </Button>
-                );
-
-                return (
-                    <div
-                        className='ongoing-upload'
-                        key={filename}>
-                        <div className='ongoing-upload-inner'>
-                            <div className='upload-filename'>{filename}</div>
-                            {closeButton}
+
+                    const fileTags = tags.map((tag: string) => (
+                        <Tag
+                            key={tag}
+                            copy={tag}
+                            colorize={AssetsTableTagsPivot.COLORIZE_TAGS}
+                        />
+                    ));
+                    return (
+                        <div
+                            className='ongoing-upload'
+                            key={filename}>
+                            <div className='ongoing-upload-inner'>
+                                <input
+                                    className='upload-filename'
+                                    value={filename}
+                                    readOnly
+                                />
+                                <div className='tags-column'>{fileTags}</div>
+                                {closeButton}
+                            </div>
                         </div>
-                        {loader}
-                    </div>
-                );
+                    );
+                } else {
+                    uploading.push(true);
+                }
             });
         } else {
             uploadsListInner = <div className='no-ongoing-uploads'>{copy.uploads.noUploads}</div>;
         }
 
+        if (uploading.length === uploads.length) {
+            uploadsListInner = <div className='no-ongoing-uploads'>{copy.uploads.noUploads}</div>;
+        }
+
         const delimiterSelector = tagByDelimiter && (
             <SelectField
                 width='35%'
                 options={DELIMITER_OPTIONS}
                 value={delimiter}
-                onChange={(c) => this.props.setDelimiter(c)}
+                onChange={(c) => {
+                    this.uploadsSetting({ delimiter: c });
+                }}
             />
         );
+
         const tagsArray = [...new Set(manualTags)];
+
         const tagsMarkup = tagsArray.map((tag: string) => (
             <Tag
                 key={tag}
                 copy={tag}
                 colorize={AssetsTableTagsPivot.COLORIZE_TAGS}
-                removeHandler={() => this.props.deleteManualTag(tag)}
+                removeHandler={() => {
+                    this.deleteManualTag(tag);
+                }}
             />
         ));
+
         const removeTagsBtn =
             tagsArray.length > 0 ? (
                 <Button
                     tooltip='Remove All Tags'
                     style='sublte'
-                    onClick={() => this.props.deleteManualTags()}>
+                    onClick={() => {
+                        this.uploadsSetting({ manualTags: [] });
+                    }}>
                     <FontAwesomeIcon icon={faEraser} />
                 </Button>
             ) : null;
+
         const tagsColumn = tagManually && (
             <div className='tags-column'>
                 <TextField
@@ -134,46 +259,103 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
                     suggestions={assetTags}
                     label={copy.tags.add}
                     width={AssetsTableTagsPivot.ADD_TAG_INPUT_WIDTH}
-                    doSubmit={(t) => this.props.addManualTag(t)}
+                    doSubmit={(t) => {
+                        this.addManualTag(t);
+                    }}
                 />
                 {tagsMarkup}
                 {removeTagsBtn}
             </div>
         );
 
+        const modifier = this.state.assetOver ? 'asset-over' : '';
+        const show = this.props.show ? 'show' : '';
+        const tableHover = this.props.tableHover ? 'table-hover' : '';
+        const width = document.getElementsByClassName('assetUploads')[0]?.clientWidth;
+
         return (
-            <div className='uploads-menu'>
-                <div className='uploads-controls'>
-                    <CheckboxField
-                        width='50%'
-                        label={copy.uploads.autoTagDelimiter}
-                        value={tagByDelimiter}
-                        onChange={() => this.props.toggleTagDelimiter(!tagByDelimiter)}
-                    />
-                    {delimiterSelector}
-                    <CheckboxField
-                        width='50%'
-                        label={copy.uploads.manualTagging}
-                        value={tagManually}
-                        onChange={() => this.props.toggleManualTagging(!tagManually)}
-                    />
-                    <CheckboxField
-                        width='50%'
-                        label={copy.uploads.autoTagFilname}
-                        value={tagByFileName}
-                        onChange={() => this.props.toggleTagFileName(!tagByFileName)}
-                    />
-                    <CheckboxField
-                        width='50%'
-                        label={copy.uploads.assignToProjectInput}
-                        info={copy.uploads.assignToProjectInfo}
-                        value={assignToStory}
-                        onChange={() => this.props.toggleAssignToStory(!assignToStory)}
-                    />
+            <AssetsTableDropzone
+                className={`uploads-dropzone ${show} ${tableHover} ${modifier}`}
+                onDrop={(i, m) => {
+                    this.props.onDrop(i, m);
+                }}
+                onExternalCollect={(o) => this.checkHover(o)}>
+                <div className='overlay'>
+                    <p style={{ display: this.state.assetOver ? 'block' : 'none' }}>
+                        {copy.dropAsset}
+                    </p>
                 </div>
-                {tagsColumn}
-                <div className='uploads-list'>{uploadsListInner}</div>
-            </div>
+                <div
+                    className='uploads-menu'
+                    style={{ width }}
+                    ref={this.menuRef}>
+                    <div className='uploads-controls'>
+                        <CheckboxField
+                            width='50%'
+                            label={copy.uploads.autoTagDelimiter}
+                            value={tagByDelimiter}
+                            onChange={() =>
+                                this.uploadsSetting({ tagByDelimiter: !tagByDelimiter })
+                            }
+                        />
+                        {delimiterSelector}
+                        <CheckboxField
+                            width='50%'
+                            label={copy.uploads.manualTagging}
+                            value={tagManually}
+                            onChange={() => this.uploadsSetting({ tagManually: !tagManually })}
+                        />
+                        <CheckboxField
+                            width='50%'
+                            label={copy.uploads.autoTagFilname}
+                            value={tagByFileName}
+                            onChange={() => this.uploadsSetting({ tagByFileName: !tagByFileName })}
+                        />
+                        <CheckboxField
+                            width='50%'
+                            label={copy.uploads.assignToProjectInput}
+                            info={copy.uploads.assignToProjectInfo}
+                            value={!assignToStory}
+                            onChange={() => this.uploadsSetting({ assignToStory: !assignToStory })}
+                        />
+                    </div>
+                    {tagsColumn}
+                    <div className='uploads-list'>{uploadsListInner}</div>
+                    <div className='uploads-confirm'>
+                        <CheckboxField
+                            label={`Don't show again`}
+                            value={!showUploadsMenu}
+                            onChange={() =>
+                                this.props.updateEditorConfig({
+                                    showUploadsMenu: !showUploadsMenu
+                                })
+                            }
+                        />
+                        <Button
+                            key='cancel-upload'
+                            onClick={() => this.cancelUploadHandler(disable)}
+                            customStyles={{
+                                color: 'black'
+                            }}
+                            style='bold'
+                            color='secondary'
+                            width='60px'
+                            size='small'>
+                            Cancel
+                        </Button>
+                        <Button
+                            key='upload-file'
+                            disabled={disable}
+                            onClick={() => this.uploadFileHandler()}
+                            style='bold'
+                            color='primary'
+                            width='80px'
+                            size='small'>
+                            Upload {ICON_UPLOAD}
+                        </Button>
+                    </div>
+                </div>
+            </AssetsTableDropzone>
         );
     }
 }
@@ -181,15 +363,10 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
 const mapDispatchToProps = (dispatch): any => {
     return bindActionCreators(
         {
-            toggleAssignToStory,
-            toggleTagFileName,
             cancelAssetUpload,
-            toggleTagDelimiter,
-            setDelimiter,
-            toggleManualTagging,
-            addManualTag,
-            deleteManualTag,
-            deleteManualTags
+            cancelNonUploadedAssets,
+            uploadingAsset,
+            updateUploadTags
         },
         dispatch
     );
@@ -198,7 +375,8 @@ const mapDispatchToProps = (dispatch): any => {
 const mapStateToProps = (state): any => {
     return {
         assetUploads: state.assetUploads,
-        assetTags: state.assetTags
+        assetTags: state.assetTags,
+        editor: state.editor
     };
 };
 

package/src/components/button-group-field/ButtonGroupField.tsx

@@ -12,7 +12,7 @@ interface IButtonGroupOption {
 }
 
 interface IButtonGroupFieldProps {
-    label?: string;
+    label?: any;
     width?: string | number;
     value: string | boolean;
     options: IButtonGroupOption[];

package/src/components/checkbox-field/CheckboxField.tsx

@@ -4,7 +4,7 @@ import { IToolTipConfig } from '../Tooltip';
 import { ICON_CHECK } from '../../constants/icons';
 
 interface ICheckboxFieldProps {
-    label?: string;
+    label?: any;
     value: boolean;
     width?: string | number;
     tooltip?: IToolTipConfig | string;

package/src/components/color-field/ColorField.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
-import { SketchPicker } from 'react-color';
+import { SketchPicker } from '@imposium-hub/react-color';
 
 interface IColorFieldProps {
     buttons?: any;
-    label?: string;
+    label?: any;
     placeholder?: string;
     readOnly?: boolean;
     value: string;
@@ -29,7 +29,7 @@ class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState>
 
     private picker: any;
 
-    private transparentBg = `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==") left center`;
+    private transparentBg = `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADBJREFUOE9jPHPmzH8GPMDY2BifNAPjqAHDIgz+//+PNx2cPXsWfzoYNYCBceiHAQD1OVMJc/dYeAAAAABJRU5ErkJggg==") left center`;
 
     constructor(props) {
         super(props);