Web: Files: fixed conversion progress
This commit is contained in:
parent
83d4bfd7a3
commit
d5989124f3
@ -67,6 +67,7 @@ const FileRow = (props) => {
|
|||||||
item,
|
item,
|
||||||
uploaded,
|
uploaded,
|
||||||
cancelCurrentUpload,
|
cancelCurrentUpload,
|
||||||
|
cancelCurrentFileConversion,
|
||||||
//onMediaClick,
|
//onMediaClick,
|
||||||
currentFileUploadProgress,
|
currentFileUploadProgress,
|
||||||
conversationProgress,
|
conversationProgress,
|
||||||
@ -78,8 +79,11 @@ const FileRow = (props) => {
|
|||||||
|
|
||||||
const onCancelCurrentUpload = (e) => {
|
const onCancelCurrentUpload = (e) => {
|
||||||
//console.log("cancel upload ", e);
|
//console.log("cancel upload ", e);
|
||||||
const id = e.currentTarget.dataset.id;
|
const { id, action, fileId } = e.currentTarget.dataset;
|
||||||
return cancelCurrentUpload(id);
|
|
||||||
|
return action === "convert"
|
||||||
|
? cancelCurrentFileConversion(fileId)
|
||||||
|
: cancelCurrentUpload(id);
|
||||||
};
|
};
|
||||||
|
|
||||||
// const onMediaClick = (id) => {
|
// const onMediaClick = (id) => {
|
||||||
@ -140,6 +144,8 @@ const FileRow = (props) => {
|
|||||||
<div
|
<div
|
||||||
className="upload_panel-icon"
|
className="upload_panel-icon"
|
||||||
data-id={item.uniqueId}
|
data-id={item.uniqueId}
|
||||||
|
data-file-id={item.fileId}
|
||||||
|
data-action={item.action}
|
||||||
onClick={onCancelCurrentUpload}
|
onClick={onCancelCurrentUpload}
|
||||||
>
|
>
|
||||||
<LoadingButton isConversion percent={conversationProgress} />
|
<LoadingButton isConversion percent={conversationProgress} />
|
||||||
@ -199,6 +205,7 @@ export default inject(
|
|||||||
uploaded,
|
uploaded,
|
||||||
primaryProgressDataStore,
|
primaryProgressDataStore,
|
||||||
cancelCurrentUpload,
|
cancelCurrentUpload,
|
||||||
|
cancelCurrentFileConversion,
|
||||||
} = uploadDataStore;
|
} = uploadDataStore;
|
||||||
const { loadingFile: file } = primaryProgressDataStore;
|
const { loadingFile: file } = primaryProgressDataStore;
|
||||||
const isMedia = mediaViewersFormatsStore.isMediaOrImage(ext);
|
const isMedia = mediaViewersFormatsStore.isMediaOrImage(ext);
|
||||||
@ -224,6 +231,7 @@ export default inject(
|
|||||||
loadingFile,
|
loadingFile,
|
||||||
|
|
||||||
cancelCurrentUpload,
|
cancelCurrentUpload,
|
||||||
|
cancelCurrentFileConversion,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
)(observer(FileRow));
|
)(observer(FileRow));
|
||||||
|
@ -3,7 +3,7 @@ import styled, { css, keyframes } from "styled-components";
|
|||||||
|
|
||||||
const backgroundColor = "none";
|
const backgroundColor = "none";
|
||||||
const color = "#2DA7DB";
|
const color = "#2DA7DB";
|
||||||
const convertColor = "#20d21f";
|
const convertColor = "#BCDF7E";
|
||||||
|
|
||||||
const StyledCircleWrap = styled.div`
|
const StyledCircleWrap = styled.div`
|
||||||
width: 16px;
|
width: 16px;
|
||||||
|
@ -28,10 +28,9 @@ import { observer, inject } from "mobx-react";
|
|||||||
import config from "../../../package.json";
|
import config from "../../../package.json";
|
||||||
|
|
||||||
const color = "#2DA7DB";
|
const color = "#2DA7DB";
|
||||||
const convertColor = "#20d21f";
|
const convertColor = "#BCDF7E";
|
||||||
|
|
||||||
//#BCDF7E
|
//#BCDF7E
|
||||||
//#20d21f
|
|
||||||
//#b9d21f
|
//#b9d21f
|
||||||
|
|
||||||
class PureHome extends React.Component {
|
class PureHome extends React.Component {
|
||||||
|
@ -144,6 +144,26 @@ class UploadDataStore {
|
|||||||
this.setUploadData(newUploadData);
|
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) => {
|
convertFile = (file) => {
|
||||||
const alreadyConverting = this.files.some(
|
const alreadyConverting = this.files.some(
|
||||||
(item) => item.fileId === file.fileId
|
(item) => item.fileId === file.fileId
|
||||||
@ -162,9 +182,17 @@ class UploadDataStore {
|
|||||||
};
|
};
|
||||||
|
|
||||||
getNewPercent = (uploadedSize, indexOfFile) => {
|
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 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 =
|
const newPercent =
|
||||||
((uploadedSize + totalUploadedSize) / newTotalSize) * 100;
|
((uploadedSize + totalUploadedSize) / newTotalSize) * 100;
|
||||||
|
|
||||||
@ -209,18 +237,22 @@ class UploadDataStore {
|
|||||||
const conversionFilesLength = this.filesToConversion.length;
|
const conversionFilesLength = this.filesToConversion.length;
|
||||||
return !percent
|
return !percent
|
||||||
? (fileIndex / conversionFilesLength) * 100
|
? (fileIndex / conversionFilesLength) * 100
|
||||||
: percent / conversionFilesLength;
|
: percent / conversionFilesLength + this.primaryProgressDataStore.percent;
|
||||||
};
|
};
|
||||||
|
|
||||||
startConversion = async () => {
|
startConversion = async () => {
|
||||||
this.converted = false;
|
|
||||||
const { convertItem, setConvertItem } = this.dialogsStore;
|
const { convertItem, setConvertItem } = this.dialogsStore;
|
||||||
|
|
||||||
|
runInAction(() => (this.converted = false));
|
||||||
convertItem && setConvertItem(null);
|
convertItem && setConvertItem(null);
|
||||||
|
|
||||||
this.setConversionPercent(0);
|
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 { fileId, toFolderId } = conversionItem;
|
||||||
|
|
||||||
const data = await convertFile(fileId);
|
const data = await convertFile(fileId);
|
||||||
@ -238,7 +270,7 @@ class UploadDataStore {
|
|||||||
|
|
||||||
error = res && res[0] && res[0].error;
|
error = res && res[0] && res[0].error;
|
||||||
if (error.length) {
|
if (error.length) {
|
||||||
const percent = this.getConversationPercent(100 * index);
|
const percent = this.getConversationPercent(100);
|
||||||
this.setConversionPercent(percent, true);
|
this.setConversionPercent(percent, true);
|
||||||
|
|
||||||
runInAction(() => {
|
runInAction(() => {
|
||||||
@ -256,21 +288,22 @@ class UploadDataStore {
|
|||||||
conversionItem.action = "converted";
|
conversionItem.action = "converted";
|
||||||
this.refreshFiles(toFolderId, false);
|
this.refreshFiles(toFolderId, false);
|
||||||
|
|
||||||
const percent = this.getConversationPercent(100 * index);
|
const percent = this.getConversationPercent(100, index);
|
||||||
this.setConversionPercent(percent);
|
this.setConversionPercent(percent);
|
||||||
|
|
||||||
break;
|
break;
|
||||||
} else {
|
} else {
|
||||||
const percent = this.getConversationPercent(
|
const percent = this.getConversationPercent(progress, index);
|
||||||
progress * index,
|
|
||||||
index - 1
|
|
||||||
);
|
|
||||||
this.setConversionPercent(percent);
|
this.setConversionPercent(percent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
index++;
|
index++;
|
||||||
|
filesToConversion = this.filesToConversion;
|
||||||
|
len = filesToConversion.length;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.uploaded) {
|
if (this.uploaded) {
|
||||||
this.finishUploadFiles();
|
this.finishUploadFiles();
|
||||||
} else {
|
} else {
|
||||||
@ -336,10 +369,9 @@ class UploadDataStore {
|
|||||||
|
|
||||||
this.convertFilesSize = convertSize;
|
this.convertFilesSize = convertSize;
|
||||||
|
|
||||||
if (
|
//console.log("this.tempConversionFiles", this.tempConversionFiles);
|
||||||
this.tempConversionFiles.length &&
|
|
||||||
!this.dialogsStore.convertDialogVisible
|
if (this.tempConversionFiles.length)
|
||||||
)
|
|
||||||
this.dialogsStore.setConvertDialogVisible(true);
|
this.dialogsStore.setConvertDialogVisible(true);
|
||||||
|
|
||||||
//const showConvertDialog = uploadStatus === "pending";
|
//const showConvertDialog = uploadStatus === "pending";
|
||||||
@ -350,7 +382,7 @@ class UploadDataStore {
|
|||||||
uploadedFiles: this.uploadedFiles,
|
uploadedFiles: this.uploadedFiles,
|
||||||
percent: this.percent,
|
percent: this.percent,
|
||||||
uploaded: false,
|
uploaded: false,
|
||||||
converted: !this.tempConversionFiles.length,
|
converted: !!this.tempConversionFiles.length,
|
||||||
};
|
};
|
||||||
|
|
||||||
if (this.uploaded && newFiles.length) {
|
if (this.uploaded && newFiles.length) {
|
||||||
@ -477,7 +509,7 @@ class UploadDataStore {
|
|||||||
visible: true,
|
visible: true,
|
||||||
percent: this.percent,
|
percent: this.percent,
|
||||||
icon: "upload",
|
icon: "upload",
|
||||||
alert: false,
|
//alert: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
this.primaryProgressDataStore.setPrimaryProgressBarData(progressData);
|
this.primaryProgressDataStore.setPrimaryProgressBarData(progressData);
|
||||||
|
Loading…
Reference in New Issue
Block a user