@imposium-hub/components 2.2.46-0 → 2.3.0

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

@@ -3,36 +3,84 @@ 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;
 
-let uploadFiles: File[] = [];
-let setBindToOverlay;
+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
+});
 
 export const uploadAssets = (
     api: IImposiumAPI,
     files: File[],
+    storyId: string,
     bindToOverlay?: (f: any) => any
 ): any => {
     return (dispatch, getStore) => {
         const {
-            assetUploads: { uploads },
-            editor: {
-                showUploadsMenu,
-                assetUploads: { tagByFileName, tagByDelimiter, delimiter, tagManually, manualTags }
+            assetUploads: {
+                uploads,
+                assignToStory,
+                tagByFileName,
+                tagByDelimiter,
+                delimiter,
+                tagManually,
+                manualTags
             }
         } = getStore();
+        let currentQueue: number = 0;
+        let ongoingJobs: any[] = [];
+        const filesLength = files.length > 5 ? 4 : files.length - 1;
 
-        uploadFiles.push(...files);
-        setBindToOverlay = bindToOverlay;
-
-        files.map((file: File) => {
+        const uploadBlobs: any[] = files.map((file: File) => {
             const uploadsWithSameName: any[] = uploads.filter((u: any) =>
                 u.filename.includes(file.name)
             );
@@ -44,11 +92,11 @@ export const uploadAssets = (
             let tags = [];
 
             if (tagByFileName) {
-                tags = tags.concat(file.name.slice(0, file.name.lastIndexOf('.')));
+                tags = tags.concat(file.name.substr(0, file.name.lastIndexOf('.')));
             }
 
             if (tagByDelimiter) {
-                const tag = file.name.slice(0, file.name.lastIndexOf('.')).split(delimiter);
+                const tag = file.name.substr(0, file.name.lastIndexOf('.')).split(delimiter);
                 tags = [...new Set([...tags, ...tag])];
             }
 
@@ -56,100 +104,7 @@ export const uploadAssets = (
                 tags = [...new Set([...tags, ...manualTags])];
             }
 
-            const uploadMeta: any = { filename, percent: 0, tags };
-
-            dispatch({ type: assetUploadsActions.ADD_UPLOAD, uploadMeta });
-        });
-
-        if (!showUploadsMenu) {
-            uploadAssetHandler(api, dispatch, getStore);
-        }
-    };
-};
-
-export const updateUploadTags = (): any => {
-    return (dispatch, getStore) => {
-        const {
-            editor: {
-                assetUploads: { tagByFileName, tagByDelimiter, delimiter, tagManually, manualTags }
-            }
-        } = getStore();
-        const uploadMetaArray = [];
-
-        if (uploadFiles) {
-            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) {
-        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 uploadMeta: any = { filename, percent: 0 };
 
             const onUploadProgress = (progress: any): void => {
                 dispatch({
@@ -159,96 +114,76 @@ const uploadAssetHandler = (api: IImposiumAPI, dispatch, getStore) => {
                 });
             };
 
-            const uploadMeta: any = { filename, percent: 0, tags };
-
-            uploadMetaArray.push(uploadMeta);
+            dispatch({ type: assetUploadsActions.ADD_UPLOAD, 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;
-            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]);
+            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);
                             }
-                            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);
-                                }
-                                return jobIdExists;
-                            });
-                            if (ongoingJobs.length > 0) {
-                                pollAssetJobs(api, ongoingJobs, processingTimeout);
+                    };
+                    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);
-                        }
-                    });
-            }
+                    }
+                })
+                .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 = (
@@ -258,103 +193,95 @@ export const replaceAsset = (
     storyId: string
 ): any => {
     return (dispatch, getStore) => {
-        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 {
+            assetUploads: { uploads }
+        } = getStore();
+        let currentQueue: number = 0;
+        let ongoingJobs: any[] = [];
+        const filesLength = files.length > 5 ? 4 : files.length - 1;
 
-            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 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;
 
-                        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 uploadMeta: any = { filename, percent: 0 };
 
-                        resolve(result);
-                    })
-                    .catch((e: Error[]) => {
-                        if (axios.isCancel(e) && currentQueue !== queueLength - 1) {
-                            currentQueue = currentQueue + 1;
-                            createPromise(currentQueue);
-                        }
-                    });
+            const onUploadProgress = (progress: any): void => {
+                dispatch({
+                    type: assetUploadsActions.UPDATE_PERCENT_UPLOADED,
+                    percent: Math.floor((progress.loaded * 100) / progress.total),
+                    filename
+                });
             };
 
-            for (let i = 0; i <= filesLength; i++) {
-                createPromise(i);
-                currentQueue = i;
-            }
+            dispatch({ type: assetUploadsActions.ADD_UPLOAD, uploadMeta });
+
+            return { file, filename, onUploadProgress };
         });
+
+        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;
+        }
     };
 };
 
@@ -395,40 +322,13 @@ 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 => {
+export const cancelAssetUpload = (fileName: string, api: IImposiumAPI): any => {
     return (dispatch) => {
-        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);
-                }
-            }
-        }
+        api.cancelUploadAssets(fileName);
+        dispatch({
+            type: assetUploadsActions.REMOVE_UPLOAD,
+            filename: fileName
+        });
     };
 };
 

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

@@ -1,11 +1,59 @@
 import assetUploadsActions from '../actions/asset-uploads';
 
 const initialState: any = {
+    tagByDelimiter: true,
+    delimiter: '_',
+    tagManually: false,
+    manualTags: [],
+    tagByFileName: false,
+    assignToStory: true,
     uploads: []
 };
 
 const assetUploads = (state = initialState, action): any => {
     switch (action.type) {
+        case assetUploadsActions.TOGGLE_TAG_BY_FILENAME:
+            return {
+                ...state,
+                tagByFileName: action.toggle
+            };
+        case assetUploadsActions.TOGGLE_TAG_BY_DELIMITER:
+            return {
+                ...state,
+                tagByDelimiter: action.toggle
+            };
+        case assetUploadsActions.SET_DELIMITER:
+            return {
+                ...state,
+                delimiter: action.delimiter
+            };
+        case assetUploadsActions.TOGGLE_MANUAL_TAGGING:
+            return {
+                ...state,
+                tagManually: action.toggle
+            };
+        case assetUploadsActions.ADD_MANUAL_TAG:
+            const newManualTags = [...state.manualTags];
+            newManualTags.push(action.tag);
+            return {
+                ...state,
+                manualTags: newManualTags
+            };
+        case assetUploadsActions.DELETE_MANUAL_TAG:
+            return {
+                ...state,
+                manualTags: state.manualTags.filter((t: string) => t !== action.tag)
+            };
+        case assetUploadsActions.DELETE_MANUAL_TAGS:
+            return {
+                ...state,
+                manualTags: []
+            };
+        case assetUploadsActions.TOGGLE_ASSIGN_TO_STORY:
+            return {
+                ...state,
+                assignToStory: action.toggle
+            };
         case assetUploadsActions.ADD_UPLOAD:
             return {
                 ...state,
@@ -24,19 +72,6 @@ const assetUploads = (state = initialState, action): any => {
                 ...state,
                 uploads: newUploads
             };
-        case assetUploadsActions.ADD_UPLOAD_ASSET_ID:
-            const updateUploads = state.uploads.map((u: any) => {
-                if (u.filename === action.filename) {
-                    return { ...u, assetId: action.assetId };
-                }
-
-                return u;
-            });
-
-            return {
-                ...state,
-                uploads: updateUploads
-            };
         case assetUploadsActions.REMOVE_UPLOAD:
             return {
                 ...state,