@imposium-hub/components 2.2.44-4 → 2.2.44-6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.2.44-4",
+    "version": "2.2.44-6",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -34,6 +34,7 @@
     },
     "homepage": "https://github.com/NickelMedia/Imposium-Hub-Components#readme",
     "dependencies": {
+        "@imposium-hub/react-color": "^2.19.4",
         "ansi_up": "^5.1.0",
         "auth0-js": "^9.11.3",
         "cogo-toast": "^4.2.3",
@@ -43,7 +44,6 @@
         "js-cookie": "^2.2.1",
         "lodash": "^4.17.21",
         "moment": "^2.29.1",
-        "@imposium-hub/react-color": "^2.19.4",
         "react-merge-refs": "^1.1.0",
         "react-moveable": "^0.26.1",
         "react-transition-group": "^4.4.5"
@@ -68,7 +68,7 @@
         "react-resize-detector": "^6.7.1",
         "react-spinners": "^0.6.1",
         "react-table": "^7.7.0",
-        "react-tooltip": "^4.2.21",
+        "react-tooltip": "^5.27.0",
         "smpte-timecode": "^1.2.3"
     },
     "devDependencies": {
@@ -118,7 +118,7 @@
         "react-resize-detector": "^6.7.1",
         "react-spinners": "^0.6.1",
         "react-table": "^7.7.0",
-        "react-tooltip": "^4.2.21",
+        "react-tooltip": "^5.27.1",
         "run-sequence": "^2.2.1",
         "sb": "^6.4.22",
         "smpte-timecode": "^1.2.3",

package/src/Util.ts

@@ -347,6 +347,16 @@ export const formattedTime = (millis: number) => {
     return `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
 };
 
+export const formatAudioDuration = (duration: number) => {
+    const hours: any = Math.floor(duration / 3600);
+    const minutes: any = Math.floor((duration % 3600) / 60);
+    const seconds: any = duration % 60;
+
+    return `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${
+        seconds < 10 ? '0' : ''
+    }${seconds.toFixed(2)}`;
+};
+
 export const s3Url = (cloudFrontUrl: string, distro, origin): string => {
     if (cloudFrontUrl) {
         return cloudFrontUrl.replace(distro, origin);

package/src/components/Tooltip.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import ReactTooltip, { Place } from 'react-tooltip';
+import { Tooltip as ReactTooltip, PlacesType } from 'react-tooltip';
 
 export interface IToolTipConfig {
     content: string;
-    position?: Place;
+    position?: PlacesType;
     theme?: string;
 }
 
@@ -12,8 +12,8 @@ export const renderTooltipProps = (id: string, config: IToolTipConfig | string):
     if (config) {
         const content = typeof config === 'object' ? config.content : config;
         return {
-            'data-tip': content,
-            'data-for': id
+            'data-tooltip-content': content,
+            'data-tooltip-id': id
         };
     } else {
         return {};
@@ -25,7 +25,7 @@ export const renderTooltip = (id: string, config: IToolTipConfig | string): any
 
     if (config && tooltipLayer) {
         let theme = 'light';
-        let place: Place = 'top';
+        let place: PlacesType = 'top';
 
         if (typeof config === 'object') {
             theme = config.theme ? config.theme : 'light';
@@ -34,12 +34,12 @@ export const renderTooltip = (id: string, config: IToolTipConfig | string): any
 
         const tooltipComponent = (
             <ReactTooltip
-                place={place}
-                offset={{ top: 0, right: 0, bottom: 0, left: 0 }}
+                data-tooltip-place={place}
+                data-tooltip-offset={{ top: 0, right: 0, bottom: 0, left: 0 }}
                 id={id}
                 className={`imposium-button-tooltip-${theme}`}
-                delayShow={1000}
-                effect='solid'
+                delayShow={500}
+                noArrow={true}
             />
         );
 

package/src/components/advanced-number-field/AdvancedNumberField.tsx

@@ -5,7 +5,7 @@ import { IToolTipConfig } from '../Tooltip';
 
 interface IAdvancedNumberFieldProps {
     buttons?: any;
-    label?: string;
+    label?: any;
     placeholder?: string;
     readOnly?: boolean;
     value: number;

package/src/components/anchor-field/AnchorField.tsx

@@ -21,7 +21,7 @@ interface IAnchorFieldProps {
     labelPosition?: string;
     tooltip?: IToolTipConfig | string;
     width?: string | number;
-    label?: string;
+    label?: any;
     labelWidth?: string | number;
 }
 

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/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

@@ -98,7 +98,6 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
         this.props.updateEditorConfig({
             assetUploads: newState
         });
-
         this.props.updateUploadTags();
     }
 
@@ -167,7 +166,6 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
 
         let uploadsListInner;
         const uploading = [];
-
         if (uploads.length > 0) {
             uploadsListInner = uploads.map((u: any) => {
                 const { filename, percent, tags } = u;
@@ -273,6 +271,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
         const modifier = this.state.assetOver ? 'asset-over' : '';
         const show = this.props.show ? 'show' : '';
         const tableHover = this.props.tableHover ? 'table-hover' : '';
+
         return (
             <AssetsTableDropzone
                 className={`uploads-dropzone ${show} ${tableHover} ${modifier}`}

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

@@ -5,7 +5,7 @@ import { SketchPicker } from '@imposium-hub/react-color';
 
 interface IColorFieldProps {
     buttons?: any;
-    label?: string;
+    label?: any;
     placeholder?: string;
     readOnly?: boolean;
     value: string;

package/src/components/context-menu/ContextMenu.tsx

@@ -19,6 +19,8 @@ const ContextMenu = ({
 }) => {
     const contextMenuEl = useRef(null);
     const [isVisible, setVisible] = useState(false);
+    const [top, setTop] = useState('');
+    const [left, setLeft] = useState('');
     const [clientPosition, setClientPosition] = useState(null);
 
     const showMenu = (e) => {
@@ -107,8 +109,8 @@ const ContextMenu = ({
             if (windowInnerHeight < clientY + elemHeight) newClientY = clientY - elemHeight;
             if (windowInnerWidth < clientX + elemWidth) newClientX = clientX - elemWidth;
 
-            contextMenuEl.current.style.top = `${newClientY + 2}px`;
-            contextMenuEl.current.style.left = `${newClientX + 2}px`;
+            setTop(`${newClientY + 2}px`);
+            setLeft(`${newClientX + 2}px`);
 
             if (onShow) onShow();
         }
@@ -118,15 +120,18 @@ const ContextMenu = ({
         React.cloneElement(child, { id })
     );
 
-    const ContextComponent = () => (
-        <div
-            className={`contextmenu`}
-            ref={contextMenuEl}
-            onMouseLeave={handleMouseLeave}
-            {...attributes}>
-            {childrenWithProps}
-        </div>
-    );
+    const ContextComponent = () => {
+        return (
+            <div
+                className={`contextmenu`}
+                ref={contextMenuEl}
+                style={{ top, left }}
+                onMouseLeave={handleMouseLeave}
+                {...attributes}>
+                {childrenWithProps}
+            </div>
+        );
+    };
 
     const PortalContextComponent = () =>
         ReactDOM.createPortal(<ContextComponent />, document.querySelector(appendTo));

package/src/components/copy-prop-id-button/CopyPropIdButton.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ICON_CLIPBOARD } from '../../constants/icons';
+import Button from '../button/Button';
+import { compositions as copy } from '../../constants/copy';
+
+interface ICopyPropIdButtonProps {
+    copyPropId: string;
+    onNotification?(e): void;
+    onError?(e): void;
+}
+
+class CopyPropIdButton extends React.PureComponent<ICopyPropIdButtonProps, undefined> {
+    private clickHandler = () => this.copyPropId();
+
+    private copyPropId() {
+        const { onNotification, onError, copyPropId } = this.props;
+        navigator.clipboard.writeText(copyPropId).then(
+            () => {
+                if (onNotification) {
+                    onNotification(`Property ID copied to clipboard.`);
+                }
+            },
+            () => {
+                if (onError) {
+                    onError('Error copying property ID to clipboard.');
+                }
+            }
+        );
+    }
+
+    public render() {
+        return (
+            <Button
+                tooltip={copy.tooltipPropId}
+                onClick={this.clickHandler}
+                size='small'
+                style='subtle'>
+                {ICON_CLIPBOARD}
+            </Button>
+        );
+    }
+}
+
+export default CopyPropIdButton;

package/src/components/header/Header.tsx

@@ -557,7 +557,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                         {storyToggle}
                         {accountDropdownToggle}
                         <a
-                            href='https://flashtalkingus.atlassian.net/wiki/spaces/CPPW/pages/3296723007/IMPOSIUM+Dynamic+Video+Tool'
+                            href='https://support.flashtalking.com/hc/en-us/sections/25515903148819-Imposium'
                             target='_blank'>
                             <div className='btn-help'>{ICON_HELP}</div>
                         </a>

package/src/components/list-field/ListField.tsx

@@ -10,7 +10,7 @@ import { ICON_PLUS } from '../../constants/icons';
 interface IListFieldProps {
     buttons?: any;
     disabled?: boolean;
-    label?: string;
+    label?: any;
     options: any;
     placeholder?: string;
     tooltip?: IToolTipConfig | string;

package/src/components/number-field/NumberField.tsx

@@ -4,7 +4,7 @@ import { IToolTipConfig } from '../Tooltip';
 
 interface INumberFieldProps {
     buttons?: any;
-    label?: string;
+    label?: any;
     placeholder?: string;
     readOnly?: boolean;
     value: number;

package/src/components/publish-wizard/PublishWizard.tsx

@@ -66,6 +66,7 @@ interface IPublishWizardProps {
     renderBatch: (batchId: string, postRenderActions?: any) => any;
     publishData: any;
     onDeleteBatch?: (batchId: string) => any;
+    onBackBtn?: () => void;
 }
 
 export interface ICredential {
@@ -349,13 +350,20 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     size={'large'}
                     key='btn-back'
                     onClick={() =>
-                        this.setState({
-                            screenIndex: backIndex,
-                            next: false,
-                            nextStep: false,
-                            error: false,
-                            done: false
-                        })
+                        this.setState(
+                            {
+                                screenIndex: backIndex,
+                                next: false,
+                                nextStep: false,
+                                error: false,
+                                done: false
+                            },
+                            () => {
+                                if (this.props.onBackBtn) {
+                                    this.props.onBackBtn();
+                                }
+                            }
+                        )
                     }
                     color='primary'>
                     {copy.publish.btnBack}

package/src/components/publish-wizard/publish/EmailWorkflow.tsx

@@ -488,12 +488,7 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
     }
 
     public renderLabel() {
-        const {
-            isExport,
-            batchJobs,
-            publishDataset,
-            batchesList: { error }
-        } = this.props;
+        const { isExport, batchJobs, publishDataset } = this.props;
         const { renderedBatch, selectedBatchId, uploading, uploadComplete } = this.state;
 
         if (
@@ -512,10 +507,6 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
             );
         }
 
-        if (batchJobs.failed && error[selectedBatchId]) {
-            return <>{error[selectedBatchId].error}</>;
-        }
-
         if (uploading) {
             const uploadingCopy = isExport
                 ? copy.publish.importingData
@@ -670,9 +661,14 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
             batchError,
             creativeManagerOverrides
         } = this.state;
+
         const {
             isExport,
             batchJobs: { missing, renders, failed },
+            batchesList: {
+                error,
+                selected: { name }
+            },
             isCrM,
             publishDataset
         } = this.props;
@@ -776,13 +772,49 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         const title = publishDataset
             ? copy.publish.datasetTitle.replace('[dataset_name]', this.props.activeDataset?.name)
             : copy.publish.emailTitle;
+
         const desc = publishDataset ? '' : copy.publish.emailDesc;
 
+        const showBatchError = () => {
+            if (failed && error[selectedBatchId]) {
+                let errorMsg: JSX.Element = <></>;
+                let errorExpMsg: JSX.Element = <></>;
+                if (error[selectedBatchId]) {
+                    const { experience } = error[selectedBatchId];
+                    errorMsg = <span className='error-title'>{error[selectedBatchId].error}</span>;
+                    errorExpMsg = experience?.error ? <div>{experience.error}</div> : <></>;
+                }
+
+                return (
+                    <div className='batch-job-error'>
+                        <h2>{`Batch "${name}" stopped due to errors.`}</h2>
+                        <table>
+                            <thead></thead>
+                            <tbody>
+                                <tr>
+                                    <td>Batch ID:</td>
+                                    <td>{selectedBatchId}</td>
+                                </tr>
+                                <tr>
+                                    <td>First Error:</td>
+                                    <td>
+                                        {errorMsg}
+                                        <br />
+                                        {errorExpMsg}
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                );
+            }
+        };
         const uploadCSV = (
             <div>
                 <h2>{title}</h2>
                 <HRule />
                 <p>{desc}</p>
+                {showBatchError()}
                 <input
                     type='file'
                     style={{ display: 'none' }}

package/src/components/select-field/SelectField.tsx

@@ -7,7 +7,7 @@ import { copying } from '../../constants/copy';
 
 interface ISelectFieldProps {
     buttons?: any;
-    label?: string;
+    label?: any;
     selectRef?: any;
     options: any;
     disable?: boolean;
@@ -61,6 +61,9 @@ class SelectField extends React.PureComponent<ISelectFieldProps> {
         }
 
         this.props.onChange(val);
+        if (this.props.selectRef?.current) {
+            this.props.selectRef.current.blur();
+        }
     }
 
     public render() {

package/src/components/slider-field/SliderField.tsx

@@ -3,7 +3,7 @@ import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
 
 interface ISliderFieldProps {
-    label?: string;
+    label?: any;
     value: number;
     width?: string | number;
     min: number;

package/src/components/smpte-field/SMPTEField.tsx

@@ -5,7 +5,7 @@ import { TIMECODE } from '../../constants/timecode';
 import { getSMPTE } from '../../Util';
 
 interface ISMPTEFieldProps {
-    label?: string;
+    label?: any;
     placeholder?: string;
     readOnly?: boolean;
     tooltip?: IToolTipConfig | string;

package/src/components/text-area-field/TextAreaField.tsx

@@ -9,7 +9,7 @@ interface ITextAreaFieldProps {
     buttons?: any;
     controlled?: boolean;
     disabled?: boolean;
-    label?: string;
+    label?: any;
     placeholder?: string;
     readOnly?: boolean;
     value: string;

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

@@ -23,7 +23,7 @@ interface ITextFieldProps {
     disabled?: boolean;
     submittable?: boolean;
     focusOnMount?: boolean;
-    label?: string;
+    label?: any;
     placeholder?: string;
     readOnly?: boolean;
     value?: string;

package/src/constants/copy.ts

@@ -77,6 +77,7 @@ export const previewer = {
 };
 
 export const compositions = {
+    tooltipPropId: 'Copy Property ID',
     name: 'Name',
     width: 'Width',
     height: 'Height',

package/src/index.ts

@@ -156,6 +156,7 @@ import AssetsTableRateCell from './components/assets/AssetsTableRateCell';
 import ContextMenu from './components/context-menu/ContextMenu';
 import ContextMenuItem from './components/context-menu/ContextMenuItem';
 import ContextMenuTrigger from './components/context-menu/ContextMenuTrigger';
+import CopyPropIdButton from './components/copy-prop-id-button/CopyPropIdButton';
 import Submenu from './components/context-menu/SubMenu';
 
 export {
@@ -309,5 +310,6 @@ export {
     ContextMenu,
     ContextMenuItem,
     ContextMenuTrigger,
-    Submenu
+    Submenu,
+    CopyPropIdButton
 };

package/src/redux/actions/asset-uploads.ts

@@ -12,7 +12,7 @@ const assetUploadsActions: any = {
 
 const POLL_INTERVAL: number = 5000;
 
-const uploadFiles: File[] = [];
+let uploadFiles: File[] = [];
 let setBindToOverlay;
 
 export const uploadAssets = (
@@ -394,21 +394,23 @@ const pollAssetJobs = (api, ongoingJobs: any[], timeout: number): void => {
     }, POLL_INTERVAL);
 };
 
+const removeUploadHander = (fileName: string, api: IImposiumAPI, dispatch): any => {
+    uploadFiles = uploadFiles.filter((f) => f.name !== fileName);
+    api.cancelUploadAssets(fileName);
+    dispatch({
+        type: assetUploadsActions.REMOVE_UPLOAD,
+        filename: fileName
+    });
+};
+
 export const cancelAssetUpload = (fileName: string, api: IImposiumAPI, assetId: string): any => {
     return (dispatch) => {
-        uploadFiles.filter((f) => {
-            return f.name !== fileName;
-        });
-        api.cancelUploadAssets(fileName);
         if (assetId) {
             api.deleteAsset(assetId)
                 .then()
                 .catch((e) => console.error(e));
         }
-        dispatch({
-            type: assetUploadsActions.REMOVE_UPLOAD,
-            filename: fileName
-        });
+        removeUploadHander(fileName, api, dispatch);
     };
 };
 
@@ -418,15 +420,11 @@ export const cancelNonUploadedAssets = (api: IImposiumAPI): any => {
             assetUploads: { uploads }
         } = getStore();
 
-        if (uploadFiles.length > 0) {
-            for (const file of uploadFiles) {
-                const percent = uploads.find((f) => f.filename === file.name).percent;
-                if (percent === 0) {
-                    api.cancelUploadAssets(file.name);
-                    dispatch({
-                        type: assetUploadsActions.REMOVE_UPLOAD,
-                        filename: file.name
-                    });
+        if (uploads.length > 0) {
+            for (const file of uploads) {
+                const upload = uploads.find((f) => f.filename === file.filename);
+                if (upload.percent === 0) {
+                    removeUploadHander(file.filename, api, dispatch);
                 }
             }
         }