@imposium-hub/components 2.9.0-5 → 2.9.0-6

package/src/index.ts

@@ -154,7 +154,6 @@ 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';
-import { ConfirmModal, IConfirmModalProps } from './components/confirm-modal/ConfirmModal';
 import AssetsTableAssetIdCell from './components/assets/AssetsTableAssetIdCell';
 import { resetStoryFilter, updateStoryFilter } from './redux/actions/story-filter';
 import storyFilter from './redux/reducers/story-filter';
@@ -163,7 +162,8 @@ import { AppWrapper } from './components/app-wrapper/AppWrapper';
 import { pushRoute, replaceRoute } from './utils/routing';
 import { ProjectDropdown } from './components/header/ProjectDropdown';
 import { EditGuideModal, IEditGuideModalProps } from './components/edit-guide-modal/EditGuideModal';
-import { openConfirmModal } from './utils/modal';
+import { openConfirmModal, openReplaceFilesModal } from './utils/modal';
+import { ConfirmModal, IConfirmModalProps } from './components/confirm-modal/ConfirmModal';
 
 export {
     ProjectDropdown,
@@ -260,6 +260,7 @@ export {
     updateAssetData,
     doAssetTableHydration,
     uploadAssets,
+    openReplaceFilesModal,
     replaceAsset,
     selectAsset,
     deselectAsset,

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

@@ -4,6 +4,7 @@ import axios from 'axios';
 
 const assetUploadsActions: any = {
     ADD_UPLOAD: 'assetUploads/ADD_UPLOAD',
+    UPDATE_APPLY_ALL: 'assetUploads/UPDATE_APPY_ALL',
     UPDATE_UPLOAD: 'assetUploads/UPDATE_UPLOAD',
     UPDATE_PERCENT_UPLOADED: 'assetUploads/UPDATE_PERCENT_UPLOADED',
     ADD_UPLOAD_ASSET_ID: 'assetUploads/ADD_UPLOAD_ASSET_ID',
@@ -16,6 +17,35 @@ const POLL_INTERVAL: number = 5000;
 let uploadFiles: File[] = [];
 let setBindToOverlay;
 
+const getUploadMeta = (filename, file, editor) => {
+    const {
+        assetUploads: { tagByFileName, tagByDelimiter, delimiter, tagManually, manualTags }
+    } = editor;
+
+    let tags = [];
+    let assetId;
+
+    const name = file.name.slice(0, file.name.lastIndexOf('.'));
+
+    if (file.assetId) {
+        assetId = file.assetId;
+    } else {
+        if (tagByFileName) {
+            tags = tags.concat(name);
+        }
+
+        if (tagByDelimiter) {
+            const tag = name.split(delimiter);
+            tags = [...new Set([...tags, ...tag])];
+        }
+
+        if (tagManually) {
+            tags = [...new Set([...tags, ...manualTags])];
+        }
+    }
+    return { filename, percent: 0, tags, assetId };
+};
+
 export const uploadAssets = (
     api: IImposiumAPI,
     files: File[],
@@ -24,17 +54,14 @@ export const uploadAssets = (
     return (dispatch, getStore) => {
         const {
             assetUploads: { uploads },
-            editor: {
-                showUploadsMenu,
-                showUploadsDropdown,
-                assetUploads: { tagByFileName, tagByDelimiter, delimiter, tagManually, manualTags }
-            }
+            editor,
+            editor: { showUploadsMenu, showUploadsDropdown }
         } = getStore();
 
         uploadFiles.push(...files);
         setBindToOverlay = bindToOverlay;
 
-        files.map((file: File) => {
+        files.map((file: any) => {
             const uploadsWithSameName: any[] = uploads.filter((u: any) =>
                 u.filename.includes(file.name)
             );
@@ -43,22 +70,7 @@ export const uploadAssets = (
                     ? `${file.name} (${uploadsWithSameName.length})`
                     : 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 };
+            const uploadMeta: any = getUploadMeta(filename, file, editor);
 
             dispatch({ type: assetUploadsActions.ADD_UPLOAD, uploadMeta });
         });
@@ -71,38 +83,13 @@ export const uploadAssets = (
 
 export const updateUploadTags = (): any => {
     return (dispatch, getStore) => {
-        const {
-            editor: {
-                assetUploads: { tagByFileName, tagByDelimiter, delimiter, tagManually, manualTags }
-            }
-        } = getStore();
+        const { editor } = getStore();
         const uploadMetaArray = [];
 
         if (uploadFiles.length > 0) {
-            uploadFiles.map((file: File) => {
+            uploadFiles.map((file: any) => {
                 const filename: string = file.name;
-
-                let tags = [];
-
-                if (tagByFileName) {
-                    const tagsByFileName = tags.concat(
-                        file.name.slice(0, file.name.lastIndexOf('.'))
-                    );
-                    const trimmedTags = tagsByFileName.map((str) => str.trim());
-                    tags = [...new Set([...tags, ...trimmedTags])];
-                }
-
-                if (tagByDelimiter) {
-                    const tag = file.name.slice(0, file.name.lastIndexOf('.')).split(delimiter);
-                    const trimmedTags = tag.map((str) => str.trim());
-                    tags = [...new Set([...tags, ...trimmedTags])];
-                }
-
-                if (tagManually) {
-                    tags = [...new Set([...tags, ...manualTags])];
-                }
-
-                const uploadMeta: any = { filename, percent: 0, tags };
+                const uploadMeta: any = getUploadMeta(filename, file, editor);
 
                 uploadMetaArray.push(uploadMeta);
             });
@@ -121,16 +108,10 @@ export const uploadingAsset = (api: IImposiumAPI): any => {
 const uploadAssetHandler = (api: IImposiumAPI, dispatch, getStore) => {
     const {
         project: { storyId },
+        editor,
         editor: {
             fromCrM,
-            assetUploads: {
-                assignToStory,
-                tagByFileName,
-                tagByDelimiter,
-                delimiter,
-                tagManually,
-                manualTags
-            }
+            assetUploads: { assignToStory }
         },
         assetUploads: { uploads }
     } = getStore();
@@ -142,27 +123,9 @@ const uploadAssetHandler = (api: IImposiumAPI, dispatch, getStore) => {
     const sId = (assignToStory || fromCrM) && storyId ? storyId : null;
 
     if (uploadFiles.length > 0) {
-        const uploadBlobs: any[] = uploadFiles.map((file: File) => {
+        const uploadBlobs: any[] = uploadFiles.map((file: any) => {
             const filename: string = file.name;
 
-            let tags = [];
-
-            if (tagByFileName) {
-                const tagsByFileName = tags.concat(file.name.slice(0, file.name.lastIndexOf('.')));
-                const trimmedTags = tagsByFileName.map((str) => str.trim());
-                tags = [...new Set([...tags, ...trimmedTags])];
-            }
-
-            if (tagByDelimiter) {
-                const tag = file.name.slice(0, file.name.lastIndexOf('.')).split(delimiter);
-                const trimmedTags = tag.map((str) => str.trim());
-                tags = [...new Set([...tags, ...trimmedTags])];
-            }
-
-            if (tagManually) {
-                tags = [...new Set([...tags, ...manualTags])];
-            }
-
             const onUploadProgress = (progress: any): void => {
                 dispatch({
                     type: assetUploadsActions.UPDATE_PERCENT_UPLOADED,
@@ -172,10 +135,12 @@ const uploadAssetHandler = (api: IImposiumAPI, dispatch, getStore) => {
                 });
             };
 
-            const uploadMeta: any = { filename, percent: 0, tags };
+            const uploadMeta: any = getUploadMeta(filename, file, editor);
 
             uploadMetaArray.push(uploadMeta);
 
+            const { tags } = uploadMeta;
+
             return { file, tags, filename, onUploadProgress };
         });
 
@@ -189,79 +154,155 @@ const uploadAssetHandler = (api: IImposiumAPI, dispatch, getStore) => {
             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);
+                if (uploadBlobs[activeIndex].file.assetId) {
+                    api.replaceAsset(
+                        uploadBlobs[activeIndex].file.assetId,
+                        uploadBlobs[activeIndex].file,
+                        uploadBlobs[activeIndex].onUploadProgress,
+                        uploadBlobs[activeIndex].filename
+                    )
+                        .then((result) => {
+                            const filename = uploadBlobs.find((b) =>
+                                b.filename.includes(result.name)
+                            ).filename;
+
+                            uploadFiles = uploadFiles.filter((f) => f.name !== filename);
+                            dispatch({
+                                type: assetUploadsActions.ADD_UPLOAD_ASSET_ID,
+                                assetId: result.id,
+                                filename
+                            });
+                            const currentOngoingJobs = () => {
+                                if (setBindToOverlay) {
+                                    setBindToOverlay(result);
                                 }
+                                return {
+                                    footageId: result.id,
+                                    jobId: result.job_id,
+                                    filename: uploadBlobs[activeIndex].filename,
+                                    onProcessed: () => {
+                                        const fileName = ongoingJobs.filter(
+                                            (job: any) => job.jobId === result.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);
-                        } else {
-                            const error: any = { ...e };
-                            const errorMsg = error.response.data.error.split(':')[0];
+                        })
+                        .catch((e: Error[]) => {
+                            if (axios.isCancel(e) && currentQueue !== queueLength - 1) {
+                                currentQueue = currentQueue + 1;
+                                createPromise(currentQueue);
+                            } else {
+                                const error: any = { ...e };
+                                const errorMsg = error.response.data.error.split(':')[0];
+                                dispatch({
+                                    type: assetUploadsActions.ERROR,
+                                    filename: uploadBlobs[activeIndex].filename,
+                                    errorMsg
+                                });
+                                doAssetTableHydration(api, storyId);
+                            }
+                        });
+                } else {
+                    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.ERROR,
-                                filename: uploadBlobs[activeIndex].filename,
-                                errorMsg
+                                type: assetUploadsActions.ADD_UPLOAD_ASSET_ID,
+                                assetId: result[0].id,
+                                filename
                             });
-                            doAssetTableHydration(api, storyId);
-                        }
-                    });
+                            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);
+                                    }
+                                    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);
+                            } else {
+                                const error: any = { ...e };
+                                const errorMsg = error.response.data.error.split(':')[0];
+                                dispatch({
+                                    type: assetUploadsActions.ERROR,
+                                    filename: uploadBlobs[activeIndex].filename,
+                                    errorMsg
+                                });
+                                doAssetTableHydration(api, storyId);
+                            }
+                        });
+                }
             }
         };
 
@@ -274,49 +315,39 @@ const uploadAssetHandler = (api: IImposiumAPI, dispatch, getStore) => {
 
 export const replaceAsset = (
     api: IImposiumAPI,
-    assetId: any,
     files: File[],
     storyId: string,
+    assetId?: any,
     bindToOverlay?: (f: any) => any
 ): any => {
-    return (dispatch, getStore) => {
+    return (dispatch) => {
         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 uploadMeta: any = { filename: file.name, percent: 0 };
 
                 const onUploadProgress = (progress: any): void => {
                     dispatch({
                         type: assetUploadsActions.UPDATE_PERCENT_UPLOADED,
                         percent: Math.floor((progress.loaded * 100) / progress.total),
-                        filename
+                        filename: file.name
                     });
                 };
 
                 dispatch({ type: assetUploadsActions.ADD_UPLOAD, uploadMeta });
 
-                return { file, filename, onUploadProgress };
+                return { file, filename: file.name, onUploadProgress };
             });
 
             const createPromise = (activeIndex: number) => {
                 const queueLength: number = replacedFileBlobs.length;
                 const processingTimeout: number = -1;
+                const id = assetId ? assetId : replacedFileBlobs[activeIndex].file.assetId;
                 api.replaceAsset(
-                    assetId,
+                    id,
                     replacedFileBlobs[activeIndex].file,
                     replacedFileBlobs[activeIndex].onUploadProgress,
                     replacedFileBlobs[activeIndex].filename

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

@@ -1,7 +1,8 @@
 import assetUploadsActions from '../actions/asset-uploads';
 
 const initialState: any = {
-    uploads: []
+    uploads: [],
+    applyAll: false
 };
 
 const assetUploads = (state = initialState, action): any => {

package/src/utils/modal.ts

@@ -1,7 +1,19 @@
 import { IConfirmModalProps } from '../components/confirm-modal/ConfirmModal';
+import { IReplaceFilesModalProps } from '../components/replace-files-modal/ReplaceFilesModal';
+
+export const replaceFilesModalEvent = 'openreplacefilesmodal';
+export const confirmModalEvent = 'openconfirmmodal';
 
 export const openConfirmModal = (detail: IConfirmModalProps) => {
-    const event = new CustomEvent('openconfirmmodal', {
+    const event = new CustomEvent(confirmModalEvent, {
+        detail
+    });
+
+    window.dispatchEvent(event);
+};
+
+export const openReplaceFilesModal = (detail: IReplaceFilesModalProps) => {
+    const event = new CustomEvent(replaceFilesModalEvent, {
         detail
     });
 

package/dist/cjs/components/app-wrapper/AppWrapperV2.d.ts

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { IImposiumAPI } from '../../services/API';
-export interface IAppWrapperProps {
-    auth0: any;
-    auth0Code: string;
-    baseUrl: string;
-    api: IImposiumAPI;
-    children: React.ReactChildren;
-    organizationId: string;
-    serviceId: number;
-    access: any;
-    setAccessData(accessData: any): any;
-    onAuthenticated: (activeOrgId: string, activeStoryId: string) => any;
-    onStoryChange(storyId: string): any;
-    onOrganizationChange(orgId: string, storyId: string): any;
-    storyId?: string;
-    CrMLink?: string;
-    hideStoryPicker?: boolean;
-    hideDocs?: boolean;
-    hideOrgPicker?: boolean;
-}
-export interface IAppWrapperState {
-    blockRender: boolean;
-}
-declare const _default: React.ComponentType<Omit<import("@auth0/auth0-react").WithAuth0Props, "auth0">>;
-export default _default;