@imposium-hub/components 2.3.5 → 2.3.7

package/src/constants/copy.ts

@@ -1,6 +1,7 @@
 export const assets = {
     tooltipFilter: 'Filter by Asset type',
     previewNotAvailable: 'Preview Not Available for this Asset Type',
+    dropAsset: 'Drop file(s) here.',
     iconTypes: {
         filter: 'Filter By Type',
         lut: 'LUT',
@@ -17,15 +18,15 @@ export const assets = {
         after_effects: 'After Effects'
     },
     uploads: {
-        noUploads: 'There are currently no assets uploading...',
+        noUploads: 'No files selected, drag and drop files here to begin.',
         preparePhase: 'Preparing asset...',
         autoTagFilname: 'Tag by file name',
         autoTagDelimiter: 'Tag by Delimiter',
         delimiterOptions: 'Delimiter Options',
         manualTagging: 'Tag Manually',
-        assignToProjectInput: 'Assign to Project',
+        assignToProjectInput: 'Make Global',
         assignToProjectInfo:
-            'If selected, any assets uploaded will only be available to use with the currently selected project.',
+            'If selected, any assets uploaded will be available to use with all projects on the current organization.',
         uploadButton: 'Upload',
         cancelButton: 'Cancel'
     },

package/src/index.ts

@@ -46,6 +46,7 @@ import AssetsTableTagsFilter from './components/assets/AssetsTableTagsFilter';
 import AssetsTableTagsPivot from './components/assets/AssetsTableTagsPivot';
 import AssetsTableComplexTagCell from './components/assets/AssetsTableComplexTagCell';
 import AssetsTableTypeCell from './components/assets/AssetsTableTypeCell';
+import AssetsTableGlobalCell from './components/assets/AssetsTableGlobalCell';
 import AssetsTableStatusCell from './components/assets/AssetsTableStatusCell';
 import AssetsTableTypeFilter from './components/assets/AssetsTableTypeFilter';
 import AssetsTypeIcon from './components/assets/AssetsTypeIcon';
@@ -103,12 +104,7 @@ import {
     updateAssetStory
 } from './redux/actions/asset-list';
 import { getAssetTagList, addAssetTagToList } from './redux/actions/asset-tags';
-import {
-    cancelAssetUpload,
-    toggleTagFileName,
-    uploadAssets,
-    replaceAsset
-} from './redux/actions/asset-uploads';
+import { cancelAssetUpload, uploadAssets, replaceAsset } 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';
@@ -217,6 +213,7 @@ export {
     AssetsTableSelectCell,
     AssetsTableTypeFilter,
     AssetsTableTypeCell,
+    AssetsTableGlobalCell,
     AssetsTableStatusCell,
     AssetsTableNameFilter,
     AssetsTableNameCell,
@@ -252,7 +249,6 @@ export {
     updateAssetName,
     updateAssetData,
     doAssetTableHydration,
-    toggleTagFileName,
     uploadAssets,
     replaceAsset,
     selectAsset,

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

@@ -3,84 +3,37 @@ import { doAssetTableHydration } from './asset-list';
 import axios from 'axios';
 
 const assetUploadsActions: any = {
-    TOGGLE_AUTO_TAG: 'assetUploads/TOGGLE_AUTO_TAG',
-    TOGGLE_TAG_BY_FILENAME: 'assetUploads/TOGGLE_TAG_BY_FILENAME',
-    TOGGLE_TAG_BY_DELIMITER: 'assetUploads/TOGGLE_TAG_BY_DELIMITER',
-    SET_DELIMITER: 'assetUploads/SET_DELIMITER',
-    TOGGLE_MANUAL_TAGGING: 'assetUploads/TOGGLE_MANUAL_TAGGING',
-    ADD_MANUAL_TAG: 'assetUploads/ADD_MANUAL_TAG',
-    DELETE_MANUAL_TAG: 'assetUploads/DELETE_MANUAL_TAG',
-    DELETE_MANUAL_TAGS: 'assetUploads/DELETE_MANUAL_TAGS',
-    TOGGLE_ASSIGN_TO_STORY: 'assetUploads/TOGGLE_ASSIGN_TO_STORY',
     ADD_UPLOAD: 'assetUploads/ADD_UPLOAD',
+    UPDATE_UPLOAD: 'assetUploads/UPDATE_UPLOAD',
     UPDATE_PERCENT_UPLOADED: 'assetUploads/UPDATE_PERCENT_UPLOADED',
+    ADD_UPLOAD_ASSET_ID: 'assetUploads/ADD_UPLOAD_ASSET_ID',
     REMOVE_UPLOAD: 'assetUploads/REMOVE_UPLOAD'
 };
 
 const POLL_INTERVAL: number = 5000;
 
-export const toggleTagFileName = (toggle: boolean): any => ({
-    type: assetUploadsActions.TOGGLE_TAG_BY_FILENAME,
-    toggle
-});
-
-export const toggleAssignToStory = (toggle: boolean): any => ({
-    type: assetUploadsActions.TOGGLE_ASSIGN_TO_STORY,
-    toggle
-});
-
-export const toggleTagDelimiter = (toggle: boolean): any => ({
-    type: assetUploadsActions.TOGGLE_TAG_BY_DELIMITER,
-    toggle
-});
-
-export const setDelimiter = (delimiter: string): any => ({
-    type: assetUploadsActions.SET_DELIMITER,
-    delimiter
-});
-
-export const toggleManualTagging = (toggle: boolean): any => ({
-    type: assetUploadsActions.TOGGLE_MANUAL_TAGGING,
-    toggle
-});
-
-export const addManualTag = (tag: string): any => ({
-    type: assetUploadsActions.ADD_MANUAL_TAG,
-    tag
-});
-
-export const deleteManualTag = (tag: string): any => ({
-    type: assetUploadsActions.DELETE_MANUAL_TAG,
-    tag
-});
-
-export const deleteManualTags = (): any => ({
-    type: assetUploadsActions.DELETE_MANUAL_TAGS
-});
+let uploadFiles: File[] = [];
+let setBindToOverlay;
 
 export const uploadAssets = (
     api: IImposiumAPI,
     files: File[],
-    storyId: string,
     bindToOverlay?: (f: any) => any
 ): any => {
     return (dispatch, getStore) => {
         const {
-            assetUploads: {
-                uploads,
-                assignToStory,
-                tagByFileName,
-                tagByDelimiter,
-                delimiter,
-                tagManually,
-                manualTags
+            assetUploads: { uploads },
+            editor: {
+                showUploadsMenu,
+                showUploadsDropdown,
+                assetUploads: { tagByFileName, tagByDelimiter, delimiter, tagManually, manualTags }
             }
         } = getStore();
-        let currentQueue: number = 0;
-        let ongoingJobs: any[] = [];
-        const filesLength = files.length > 5 ? 4 : files.length - 1;
 
-        const uploadBlobs: any[] = files.map((file: File) => {
+        uploadFiles.push(...files);
+        setBindToOverlay = bindToOverlay;
+
+        files.map((file: File) => {
             const uploadsWithSameName: any[] = uploads.filter((u: any) =>
                 u.filename.includes(file.name)
             );
@@ -92,11 +45,11 @@ export const uploadAssets = (
             let tags = [];
 
             if (tagByFileName) {
-                tags = tags.concat(file.name.substr(0, file.name.lastIndexOf('.')));
+                tags = tags.concat(file.name.slice(0, file.name.lastIndexOf('.')));
             }
 
             if (tagByDelimiter) {
-                const tag = file.name.substr(0, file.name.lastIndexOf('.')).split(delimiter);
+                const tag = file.name.slice(0, file.name.lastIndexOf('.')).split(delimiter);
                 tags = [...new Set([...tags, ...tag])];
             }
 
@@ -104,7 +57,100 @@ export const uploadAssets = (
                 tags = [...new Set([...tags, ...manualTags])];
             }
 
-            const uploadMeta: any = { filename, percent: 0 };
+            const uploadMeta: any = { filename, percent: 0, tags };
+
+            dispatch({ type: assetUploadsActions.ADD_UPLOAD, uploadMeta });
+        });
+
+        if (!showUploadsMenu && !showUploadsDropdown) {
+            uploadAssetHandler(api, dispatch, getStore);
+        }
+    };
+};
+
+export const updateUploadTags = (): any => {
+    return (dispatch, getStore) => {
+        const {
+            editor: {
+                assetUploads: { tagByFileName, tagByDelimiter, delimiter, tagManually, manualTags }
+            }
+        } = getStore();
+        const uploadMetaArray = [];
+
+        if (uploadFiles.length > 0) {
+            uploadFiles.map((file: File) => {
+                const filename: string = file.name;
+
+                let tags = [];
+
+                if (tagByFileName) {
+                    tags = tags.concat(file.name.slice(0, file.name.lastIndexOf('.')));
+                }
+
+                if (tagByDelimiter) {
+                    const tag = file.name.slice(0, file.name.lastIndexOf('.')).split(delimiter);
+                    tags = [...new Set([...tags, ...tag])];
+                }
+
+                if (tagManually) {
+                    tags = [...new Set([...tags, ...manualTags])];
+                }
+
+                const uploadMeta: any = { filename, percent: 0, tags };
+
+                uploadMetaArray.push(uploadMeta);
+            });
+
+            dispatch({ type: assetUploadsActions.UPDATE_UPLOAD, uploadMetaArray });
+        }
+    };
+};
+
+export const uploadingAsset = (api: IImposiumAPI): any => {
+    return (dispatch, getStore) => {
+        uploadAssetHandler(api, dispatch, getStore);
+    };
+};
+
+const uploadAssetHandler = (api: IImposiumAPI, dispatch, getStore) => {
+    const {
+        project: { storyId },
+        editor: {
+            assetUploads: {
+                assignToStory,
+                tagByFileName,
+                tagByDelimiter,
+                delimiter,
+                tagManually,
+                manualTags
+            }
+        },
+        assetUploads: { uploads }
+    } = getStore();
+
+    let currentQueue: number = 0;
+    let ongoingJobs: any[] = [];
+
+    const uploadMetaArray = [];
+
+    if (uploadFiles.length > 0) {
+        const uploadBlobs: any[] = uploadFiles.map((file: File) => {
+            const filename: string = file.name;
+
+            let tags = [];
+
+            if (tagByFileName) {
+                tags = tags.concat(file.name.slice(0, file.name.lastIndexOf('.')));
+            }
+
+            if (tagByDelimiter) {
+                const tag = file.name.slice(0, file.name.lastIndexOf('.')).split(delimiter);
+                tags = [...new Set([...tags, ...tag])];
+            }
+
+            if (tagManually) {
+                tags = [...new Set([...tags, ...manualTags])];
+            }
 
             const onUploadProgress = (progress: any): void => {
                 dispatch({
@@ -114,76 +160,96 @@ export const uploadAssets = (
                 });
             };
 
-            dispatch({ type: assetUploadsActions.ADD_UPLOAD, uploadMeta });
+            const uploadMeta: any = { filename, percent: 0, tags };
+
+            uploadMetaArray.push(uploadMeta);
 
             return { file, tags, filename, onUploadProgress };
         });
 
+        dispatch({ type: assetUploadsActions.UPDATE_UPLOAD, uploadMetaArray });
+
+        const filesLength = uploadFiles.length > 5 ? 4 : uploadFiles.length - 1;
+
         const createPromise = (activeIndex: number) => {
             const queueLength: number = uploadBlobs.length;
             const sId = assignToStory && storyId ? storyId : null;
             const processingTimeout: number = -1;
-            api.uploadAsset(
-                sId,
-                uploadBlobs[activeIndex].tags,
-                uploadBlobs[activeIndex].file,
-                uploadBlobs[activeIndex].onUploadProgress,
-                uploadBlobs[activeIndex].filename
-            )
-                .then((result) => {
-                    const currentOngoingJobs = () => {
-                        if (bindToOverlay) {
-                            bindToOverlay(result[0]);
-                        }
-                        return {
-                            footageId: result[0].id,
-                            jobId: result[0].job_id,
-                            filename: uploadBlobs[activeIndex].filename,
-                            onProcessed: () => {
-                                const fileName = ongoingJobs.filter(
-                                    (job: any) => job.jobId === result[0].job_id
-                                )[0].filename;
-                                dispatch({
-                                    type: assetUploadsActions.REMOVE_UPLOAD,
-                                    filename: fileName
-                                });
-                                doAssetTableHydration(api, storyId);
+            const isUploading =
+                uploads.find((f) => f.filename === uploadBlobs[activeIndex].filename)?.percent > 0;
+            if (!isUploading) {
+                api.uploadAsset(
+                    sId,
+                    uploadBlobs[activeIndex].tags,
+                    uploadBlobs[activeIndex].file,
+                    uploadBlobs[activeIndex].onUploadProgress,
+                    uploadBlobs[activeIndex].filename
+                )
+                    .then((result) => {
+                        const filename = uploadBlobs.find((b) =>
+                            b.filename.includes(result[0].name)
+                        ).filename;
+                        uploadFiles = uploadFiles.filter((f) => f.name !== filename);
+                        dispatch({
+                            type: assetUploadsActions.ADD_UPLOAD_ASSET_ID,
+                            assetId: result[0].id,
+                            filename
+                        });
+                        const currentOngoingJobs = () => {
+                            if (setBindToOverlay) {
+                                setBindToOverlay(result[0]);
                             }
+                            return {
+                                footageId: result[0].id,
+                                jobId: result[0].job_id,
+                                filename: uploadBlobs[activeIndex].filename,
+                                onProcessed: () => {
+                                    const fileName = ongoingJobs.filter(
+                                        (job: any) => job.jobId === result[0].job_id
+                                    )[0].filename;
+                                    dispatch({
+                                        type: assetUploadsActions.REMOVE_UPLOAD,
+                                        filename: fileName
+                                    });
+                                    doAssetTableHydration(api, storyId);
+                                }
+                            };
                         };
-                    };
-                    ongoingJobs.push(currentOngoingJobs());
-                    if (currentQueue !== queueLength - 1) {
-                        currentQueue = currentQueue + 1;
-                        createPromise(currentQueue);
-                    } else {
-                        ongoingJobs = ongoingJobs.filter((j: any, i: number) => {
-                            const jobIdExists: boolean = typeof j.jobId === 'string';
-                            if (!jobIdExists) {
-                                dispatch({
-                                    type: assetUploadsActions.REMOVE_UPLOAD,
-                                    filename: j.filename
-                                });
-                                doAssetTableHydration(api, storyId);
+                        ongoingJobs.push(currentOngoingJobs());
+                        if (currentQueue !== queueLength - 1) {
+                            currentQueue = currentQueue + 1;
+                            createPromise(currentQueue);
+                        } else {
+                            ongoingJobs = ongoingJobs.filter((j: any, i: number) => {
+                                const jobIdExists: boolean = typeof j.jobId === 'string';
+                                if (!jobIdExists) {
+                                    dispatch({
+                                        type: assetUploadsActions.REMOVE_UPLOAD,
+                                        filename: j.filename
+                                    });
+                                    doAssetTableHydration(api, storyId);
+                                }
+                                return jobIdExists;
+                            });
+                            if (ongoingJobs.length > 0) {
+                                pollAssetJobs(api, ongoingJobs, processingTimeout);
                             }
-                            return jobIdExists;
-                        });
-                        if (ongoingJobs.length > 0) {
-                            pollAssetJobs(api, ongoingJobs, processingTimeout);
                         }
-                    }
-                })
-                .catch((e: Error[]) => {
-                    if (axios.isCancel(e) && currentQueue !== queueLength - 1) {
-                        currentQueue = currentQueue + 1;
-                        createPromise(currentQueue);
-                    }
-                });
+                    })
+                    .catch((e: Error[]) => {
+                        if (axios.isCancel(e) && currentQueue !== queueLength - 1) {
+                            currentQueue = currentQueue + 1;
+                            createPromise(currentQueue);
+                        }
+                    });
+            }
         };
+
         for (let i = 0; i <= filesLength; i++) {
             createPromise(i);
             currentQueue = i;
         }
-    };
+    }
 };
 
 export const replaceAsset = (
@@ -193,95 +259,103 @@ export const replaceAsset = (
     storyId: string
 ): any => {
     return (dispatch, getStore) => {
-        const {
-            assetUploads: { uploads }
-        } = getStore();
-        let currentQueue: number = 0;
-        let ongoingJobs: any[] = [];
-        const filesLength = files.length > 5 ? 4 : files.length - 1;
+        return new Promise<void>((resolve) => {
+            const {
+                assetUploads: { uploads }
+            } = getStore();
+            let currentQueue: number = 0;
+            let ongoingJobs: any[] = [];
+            const filesLength = files.length > 5 ? 4 : files.length - 1;
+
+            const replacedFileBlobs: any[] = files.map((file: File) => {
+                const uploadsWithSameName: any[] = uploads.filter((u: any) =>
+                    u.filename.includes(file.name)
+                );
+                const filename: string =
+                    uploadsWithSameName.length > 0
+                        ? `${file.name} (${uploadsWithSameName.length})`
+                        : file.name;
+
+                const uploadMeta: any = { filename, percent: 0 };
+
+                const onUploadProgress = (progress: any): void => {
+                    dispatch({
+                        type: assetUploadsActions.UPDATE_PERCENT_UPLOADED,
+                        percent: Math.floor((progress.loaded * 100) / progress.total),
+                        filename
+                    });
+                };
+
+                dispatch({ type: assetUploadsActions.ADD_UPLOAD, uploadMeta });
+
+                return { file, filename, onUploadProgress };
+            });
 
-        const uploadBlobs: any[] = files.map((file: File) => {
-            const uploadsWithSameName: any[] = uploads.filter((u: any) =>
-                u.filename.includes(file.name)
-            );
-            const filename: string =
-                uploadsWithSameName.length > 0
-                    ? `${file.name} (${uploadsWithSameName.length})`
-                    : file.name;
+            const createPromise = (activeIndex: number) => {
+                const queueLength: number = replacedFileBlobs.length;
+                const processingTimeout: number = -1;
+                api.replaceAsset(
+                    assetId,
+                    replacedFileBlobs[activeIndex].file,
+                    replacedFileBlobs[activeIndex].onUploadProgress,
+                    replacedFileBlobs[activeIndex].filename
+                )
+                    .then((result) => {
+                        const currentOngoingJobs = () => {
+                            return {
+                                filename: replacedFileBlobs[activeIndex].filename,
+                                onProcessed: () => {
+                                    const fileName = ongoingJobs.filter(
+                                        (job: any) => job.jobId === result[0].job_id
+                                    )[0].filename;
+                                    dispatch({
+                                        type: assetUploadsActions.REMOVE_UPLOAD,
+                                        filename: fileName
+                                    });
+                                    doAssetTableHydration(api, storyId);
+                                }
+                            };
+                        };
 
-            const uploadMeta: any = { filename, percent: 0 };
+                        ongoingJobs.push(currentOngoingJobs());
+
+                        if (currentQueue !== queueLength - 1) {
+                            currentQueue = currentQueue + 1;
+                            createPromise(currentQueue);
+                        } else {
+                            ongoingJobs = ongoingJobs.filter((j: any, i: number) => {
+                                const jobIdExists: boolean = typeof j.jobId === 'string';
+
+                                if (!jobIdExists) {
+                                    dispatch({
+                                        type: assetUploadsActions.REMOVE_UPLOAD,
+                                        filename: j.filename
+                                    });
+                                    doAssetTableHydration(api, storyId);
+                                }
+                                return jobIdExists;
+                            });
+
+                            if (ongoingJobs.length > 0) {
+                                pollAssetJobs(api, ongoingJobs, processingTimeout);
+                            }
+                        }
 
-            const onUploadProgress = (progress: any): void => {
-                dispatch({
-                    type: assetUploadsActions.UPDATE_PERCENT_UPLOADED,
-                    percent: Math.floor((progress.loaded * 100) / progress.total),
-                    filename
-                });
+                        resolve(result);
+                    })
+                    .catch((e: Error[]) => {
+                        if (axios.isCancel(e) && currentQueue !== queueLength - 1) {
+                            currentQueue = currentQueue + 1;
+                            createPromise(currentQueue);
+                        }
+                    });
             };
 
-            dispatch({ type: assetUploadsActions.ADD_UPLOAD, uploadMeta });
-
-            return { file, filename, onUploadProgress };
+            for (let i = 0; i <= filesLength; i++) {
+                createPromise(i);
+                currentQueue = i;
+            }
         });
-
-        const createPromise = (activeIndex: number) => {
-            const queueLength: number = uploadBlobs.length;
-            const processingTimeout: number = -1;
-            api.replaceAsset(
-                assetId,
-                uploadBlobs[activeIndex].file,
-                uploadBlobs[activeIndex].onUploadProgress,
-                uploadBlobs[activeIndex].filename
-            )
-                .then((result) => {
-                    const currentOngoingJobs = () => {
-                        return {
-                            filename: uploadBlobs[activeIndex].filename,
-                            onProcessed: () => {
-                                const fileName = ongoingJobs.filter(
-                                    (job: any) => job.jobId === result[0].job_id
-                                )[0].filename;
-                                dispatch({
-                                    type: assetUploadsActions.REMOVE_UPLOAD,
-                                    filename: fileName
-                                });
-                                doAssetTableHydration(api, storyId);
-                            }
-                        };
-                    };
-                    ongoingJobs.push(currentOngoingJobs());
-                    if (currentQueue !== queueLength - 1) {
-                        currentQueue = currentQueue + 1;
-                        createPromise(currentQueue);
-                    } else {
-                        ongoingJobs = ongoingJobs.filter((j: any, i: number) => {
-                            const jobIdExists: boolean = typeof j.jobId === 'string';
-                            if (!jobIdExists) {
-                                dispatch({
-                                    type: assetUploadsActions.REMOVE_UPLOAD,
-                                    filename: j.filename
-                                });
-                                doAssetTableHydration(api, storyId);
-                            }
-                            return jobIdExists;
-                        });
-                        if (ongoingJobs.length > 0) {
-                            pollAssetJobs(api, ongoingJobs, processingTimeout);
-                        }
-                    }
-                })
-                .catch((e: Error[]) => {
-                    if (axios.isCancel(e) && currentQueue !== queueLength - 1) {
-                        currentQueue = currentQueue + 1;
-                        createPromise(currentQueue);
-                    }
-                });
-        };
-
-        for (let i = 0; i <= filesLength; i++) {
-            createPromise(i);
-            currentQueue = i;
-        }
     };
 };
 
@@ -322,13 +396,40 @@ const pollAssetJobs = (api, ongoingJobs: any[], timeout: number): void => {
     }, POLL_INTERVAL);
 };
 
-export const cancelAssetUpload = (fileName: string, api: IImposiumAPI): any => {
+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) => {
-        api.cancelUploadAssets(fileName);
-        dispatch({
-            type: assetUploadsActions.REMOVE_UPLOAD,
-            filename: fileName
-        });
+        if (assetId) {
+            api.deleteAsset(assetId)
+                .then()
+                .catch((e) => console.error(e));
+        }
+        removeUploadHander(fileName, api, dispatch);
+    };
+};
+
+export const cancelNonUploadedAssets = (api: IImposiumAPI): any => {
+    return (dispatch, getStore) => {
+        const {
+            assetUploads: { uploads }
+        } = getStore();
+
+        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);
+                }
+            }
+        }
     };
 };