From d5989124f3923eb0b85a1c1859bca525b2824a5b Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 8 Jun 2021 19:09:00 +0300 Subject: [PATCH] Web: Files: fixed conversion progress --- .../components/panels/UploadPanel/FileRow.js | 12 +++- .../panels/UploadPanel/LoadingButton.js | 2 +- .../ASC.Files/Client/src/pages/Home/index.js | 3 +- .../Client/src/store/UploadDataStore.js | 70 ++++++++++++++----- 4 files changed, 63 insertions(+), 24 deletions(-) diff --git a/products/ASC.Files/Client/src/components/panels/UploadPanel/FileRow.js b/products/ASC.Files/Client/src/components/panels/UploadPanel/FileRow.js index 91c8d259e9..384ac77eec 100644 --- a/products/ASC.Files/Client/src/components/panels/UploadPanel/FileRow.js +++ b/products/ASC.Files/Client/src/components/panels/UploadPanel/FileRow.js @@ -67,6 +67,7 @@ const FileRow = (props) => { item, uploaded, cancelCurrentUpload, + cancelCurrentFileConversion, //onMediaClick, currentFileUploadProgress, conversationProgress, @@ -78,8 +79,11 @@ const FileRow = (props) => { const onCancelCurrentUpload = (e) => { //console.log("cancel upload ", e); - const id = e.currentTarget.dataset.id; - return cancelCurrentUpload(id); + const { id, action, fileId } = e.currentTarget.dataset; + + return action === "convert" + ? cancelCurrentFileConversion(fileId) + : cancelCurrentUpload(id); }; // const onMediaClick = (id) => { @@ -140,6 +144,8 @@ const FileRow = (props) => {
@@ -199,6 +205,7 @@ export default inject( uploaded, primaryProgressDataStore, cancelCurrentUpload, + cancelCurrentFileConversion, } = uploadDataStore; const { loadingFile: file } = primaryProgressDataStore; const isMedia = mediaViewersFormatsStore.isMediaOrImage(ext); @@ -224,6 +231,7 @@ export default inject( loadingFile, cancelCurrentUpload, + cancelCurrentFileConversion, }; } )(observer(FileRow)); diff --git a/products/ASC.Files/Client/src/components/panels/UploadPanel/LoadingButton.js b/products/ASC.Files/Client/src/components/panels/UploadPanel/LoadingButton.js index afdcdee6fe..3c995c3c0b 100644 --- a/products/ASC.Files/Client/src/components/panels/UploadPanel/LoadingButton.js +++ b/products/ASC.Files/Client/src/components/panels/UploadPanel/LoadingButton.js @@ -3,7 +3,7 @@ import styled, { css, keyframes } from "styled-components"; const backgroundColor = "none"; const color = "#2DA7DB"; -const convertColor = "#20d21f"; +const convertColor = "#BCDF7E"; const StyledCircleWrap = styled.div` width: 16px; diff --git a/products/ASC.Files/Client/src/pages/Home/index.js b/products/ASC.Files/Client/src/pages/Home/index.js index 2ed6c0d067..c15bfdd95d 100644 --- a/products/ASC.Files/Client/src/pages/Home/index.js +++ b/products/ASC.Files/Client/src/pages/Home/index.js @@ -28,10 +28,9 @@ import { observer, inject } from "mobx-react"; import config from "../../../package.json"; const color = "#2DA7DB"; -const convertColor = "#20d21f"; +const convertColor = "#BCDF7E"; //#BCDF7E -//#20d21f //#b9d21f class PureHome extends React.Component { diff --git a/products/ASC.Files/Client/src/store/UploadDataStore.js b/products/ASC.Files/Client/src/store/UploadDataStore.js index b15114ecc3..793f8e5d71 100644 --- a/products/ASC.Files/Client/src/store/UploadDataStore.js +++ b/products/ASC.Files/Client/src/store/UploadDataStore.js @@ -144,6 +144,26 @@ class UploadDataStore { this.setUploadData(newUploadData); }; + cancelCurrentFileConversion = (fileId) => { + const { convertItem, setConvertItem } = this.dialogsStore; + convertItem && setConvertItem(null); + + const files = this.files.filter((el) => el.fileId + "" !== fileId); + const filesToConversion = this.filesToConversion.filter( + (el) => el.fileId + "" !== fileId + ); + + const newUploadData = { + files, + filesToConversion, + filesSize: this.filesSize, + uploadedFiles: this.uploadedFiles, + percent: this.percent, + }; + + this.setUploadData(newUploadData); + }; + convertFile = (file) => { const alreadyConverting = this.files.some( (item) => item.fileId === file.fileId @@ -162,9 +182,17 @@ class UploadDataStore { }; getNewPercent = (uploadedSize, indexOfFile) => { - const newTotalSize = sumBy(this.files, (f) => (f.file ? f.file.size : 0)); + const newTotalSize = sumBy(this.files, (f) => + f.file && f.action !== "uploaded" && f.action !== "converted" + ? f.file.size + : 0 + ); const totalUploadedFiles = this.files.filter((_, i) => i < indexOfFile); - const totalUploadedSize = sumBy(totalUploadedFiles, (f) => f.file.size); + const totalUploadedSize = sumBy(totalUploadedFiles, (f) => + f.file && f.action !== "uploaded" && f.action !== "converted" + ? f.file.size + : 0 + ); const newPercent = ((uploadedSize + totalUploadedSize) / newTotalSize) * 100; @@ -209,18 +237,22 @@ class UploadDataStore { const conversionFilesLength = this.filesToConversion.length; return !percent ? (fileIndex / conversionFilesLength) * 100 - : percent / conversionFilesLength; + : percent / conversionFilesLength + this.primaryProgressDataStore.percent; }; startConversion = async () => { - this.converted = false; const { convertItem, setConvertItem } = this.dialogsStore; + + runInAction(() => (this.converted = false)); convertItem && setConvertItem(null); - this.setConversionPercent(0); - let index = 1; - for (let conversionItem of this.filesToConversion) { + let index = 0; + let len = this.filesToConversion.length; + let filesToConversion = this.filesToConversion; + + while (index < len) { + const conversionItem = this.filesToConversion[index]; const { fileId, toFolderId } = conversionItem; const data = await convertFile(fileId); @@ -238,7 +270,7 @@ class UploadDataStore { error = res && res[0] && res[0].error; if (error.length) { - const percent = this.getConversationPercent(100 * index); + const percent = this.getConversationPercent(100); this.setConversionPercent(percent, true); runInAction(() => { @@ -256,21 +288,22 @@ class UploadDataStore { conversionItem.action = "converted"; this.refreshFiles(toFolderId, false); - const percent = this.getConversationPercent(100 * index); + const percent = this.getConversationPercent(100, index); this.setConversionPercent(percent); break; } else { - const percent = this.getConversationPercent( - progress * index, - index - 1 - ); + const percent = this.getConversationPercent(progress, index); this.setConversionPercent(percent); } } } + index++; + filesToConversion = this.filesToConversion; + len = filesToConversion.length; } + if (this.uploaded) { this.finishUploadFiles(); } else { @@ -336,10 +369,9 @@ class UploadDataStore { this.convertFilesSize = convertSize; - if ( - this.tempConversionFiles.length && - !this.dialogsStore.convertDialogVisible - ) + //console.log("this.tempConversionFiles", this.tempConversionFiles); + + if (this.tempConversionFiles.length) this.dialogsStore.setConvertDialogVisible(true); //const showConvertDialog = uploadStatus === "pending"; @@ -350,7 +382,7 @@ class UploadDataStore { uploadedFiles: this.uploadedFiles, percent: this.percent, uploaded: false, - converted: !this.tempConversionFiles.length, + converted: !!this.tempConversionFiles.length, }; if (this.uploaded && newFiles.length) { @@ -477,7 +509,7 @@ class UploadDataStore { visible: true, percent: this.percent, icon: "upload", - alert: false, + //alert: false, }; this.primaryProgressDataStore.setPrimaryProgressBarData(progressData);