mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-14 17:11:30 +03:00
Display progress
This commit is contained in:
parent
08d886e9d1
commit
6ca664636e
5 changed files with 56 additions and 21 deletions
|
@ -29,6 +29,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
|
|||
const [exportType, setExportType] = useState(exportTypes.TIMELINE);
|
||||
const [includeAttachments, setAttachments] = useState(false);
|
||||
const [isExporting, setExporting] = useState(false);
|
||||
const [exportProgressText, setExportProgressText] = useState("");
|
||||
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
|
||||
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
|
||||
const sizeLimitRef = useRef<Field>();
|
||||
|
@ -58,6 +59,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
|
|||
room,
|
||||
exportTypes[exportType],
|
||||
exportOptions,
|
||||
setExportProgressText,
|
||||
),
|
||||
);
|
||||
break;
|
||||
|
@ -67,6 +69,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
|
|||
room,
|
||||
exportTypes[exportType],
|
||||
exportOptions,
|
||||
setExportProgressText,
|
||||
),
|
||||
);
|
||||
break;
|
||||
|
@ -76,6 +79,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
|
|||
room,
|
||||
exportTypes[exportType],
|
||||
exportOptions,
|
||||
setExportProgressText,
|
||||
),
|
||||
);
|
||||
break;
|
||||
|
@ -352,6 +356,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
|
|||
onFinished={onFinished}
|
||||
fixedWidth={true}
|
||||
>
|
||||
<p> { exportProgressText } </p>
|
||||
<DialogButtons
|
||||
primaryButton={_t("Cancel")}
|
||||
primaryButtonClass="danger"
|
||||
|
|
|
@ -26,7 +26,8 @@ export default abstract class Exporter {
|
|||
protected constructor(
|
||||
protected room: Room,
|
||||
protected exportType: exportTypes,
|
||||
protected exportOptions?: exportOptions,
|
||||
protected exportOptions: exportOptions,
|
||||
protected setProgressText: React.Dispatch<React.SetStateAction<string>>,
|
||||
) {
|
||||
this.cancelled = false;
|
||||
this.files = [];
|
||||
|
@ -40,6 +41,11 @@ export default abstract class Exporter {
|
|||
return e.returnValue = "Are you sure you want to exit during this export?";
|
||||
}
|
||||
|
||||
protected updateProgress(progress: string, log = true, show = true): void {
|
||||
if (log) console.log(progress);
|
||||
if (show) this.setProgressText(progress);
|
||||
}
|
||||
|
||||
protected addFile(filePath: string, blob: Blob): void {
|
||||
const file = {
|
||||
name: filePath,
|
||||
|
@ -57,7 +63,7 @@ export default abstract class Exporter {
|
|||
// Create a writable stream to the directory
|
||||
this.fileStream = streamSaver.createWriteStream(filename);
|
||||
|
||||
if (!this.cancelled) console.info("Generating a ZIP...");
|
||||
if (!this.cancelled) this.updateProgress("Generating a ZIP...");
|
||||
else return this.cleanUp();
|
||||
|
||||
this.writer = this.fileStream.getWriter();
|
||||
|
@ -72,7 +78,7 @@ export default abstract class Exporter {
|
|||
|
||||
if (this.cancelled) return this.cleanUp();
|
||||
|
||||
console.info("Writing to the file system...");
|
||||
this.updateProgress("Writing to the file system...");
|
||||
|
||||
const reader = readableZipStream.getReader();
|
||||
await this.pumpToFileStream(reader);
|
||||
|
@ -172,7 +178,11 @@ export default abstract class Exporter {
|
|||
}
|
||||
events.push(mxEv);
|
||||
}
|
||||
console.log("Fetched " + events.length + " events so far.");
|
||||
this.updateProgress(
|
||||
("Fetched " + events.length + " events ") + (this.exportType === exportTypes.LAST_N_MESSAGES
|
||||
? `out of ${this.exportOptions.numberOfMessages}...`
|
||||
: "so far..."),
|
||||
);
|
||||
prevToken = res.end;
|
||||
}
|
||||
// Reverse the events so that we preserve the order
|
||||
|
|
|
@ -27,8 +27,13 @@ export default class HTMLExporter extends Exporter {
|
|||
protected totalSize: number;
|
||||
protected mediaOmitText: string;
|
||||
|
||||
constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
|
||||
super(room, exportType, exportOptions);
|
||||
constructor(
|
||||
room: Room,
|
||||
exportType: exportTypes,
|
||||
exportOptions: exportOptions,
|
||||
setProgressText: React.Dispatch<React.SetStateAction<string>>,
|
||||
) {
|
||||
super(room, exportType, exportOptions, setProgressText);
|
||||
this.avatars = new Map<string, boolean>();
|
||||
this.permalinkCreator = new RoomPermalinkCreator(this.room);
|
||||
this.totalSize = 0;
|
||||
|
@ -328,6 +333,7 @@ export default class HTMLExporter extends Exporter {
|
|||
let prevEvent = null;
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
const event = events[i];
|
||||
if (i % 100 == 0) this.updateProgress(`Processing event ${i ? i : 1} out of ${events.length}`, false, true);
|
||||
if (this.cancelled) return this.cleanUp();
|
||||
if (!haveTileForEvent(event)) continue;
|
||||
|
||||
|
@ -343,16 +349,16 @@ export default class HTMLExporter extends Exporter {
|
|||
}
|
||||
|
||||
public async export() {
|
||||
console.info("Starting export process...");
|
||||
console.info("Fetching events...");
|
||||
this.updateProgress("Starting export process...", true, false);
|
||||
this.updateProgress("Fetching events...");
|
||||
|
||||
const fetchStart = performance.now();
|
||||
const res = await this.getRequiredEvents();
|
||||
const fetchEnd = performance.now();
|
||||
|
||||
console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
|
||||
this.updateProgress(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`, true, false);
|
||||
|
||||
console.info("Creating HTML...");
|
||||
this.updateProgress("Creating HTML...");
|
||||
const html = await this.createHTML(res);
|
||||
|
||||
this.addFile("index.html", new Blob([html]));
|
||||
|
@ -370,8 +376,8 @@ export default class HTMLExporter extends Exporter {
|
|||
if (this.cancelled) {
|
||||
console.info("Export cancelled successfully");
|
||||
} else {
|
||||
console.info("Export successful!");
|
||||
console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
|
||||
this.updateProgress("Export successful!");
|
||||
this.updateProgress(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
|
||||
}
|
||||
|
||||
this.cleanUp();
|
||||
|
|
|
@ -11,8 +11,13 @@ export default class JSONExporter extends Exporter {
|
|||
protected totalSize: number;
|
||||
protected messages: any[];
|
||||
|
||||
constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
|
||||
super(room, exportType, exportOptions);
|
||||
constructor(
|
||||
room: Room,
|
||||
exportType: exportTypes,
|
||||
exportOptions: exportOptions,
|
||||
setProgressText: React.Dispatch<React.SetStateAction<string>>,
|
||||
) {
|
||||
super(room, exportType, exportOptions, setProgressText);
|
||||
this.totalSize = 0;
|
||||
this.messages = [];
|
||||
}
|
||||
|
@ -55,7 +60,9 @@ export default class JSONExporter extends Exporter {
|
|||
}
|
||||
|
||||
protected async createOutput(events: MatrixEvent[]) {
|
||||
for (const event of events) {
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
const event = events[i];
|
||||
if (i % 100 == 0) this.updateProgress(`Processing event ${i ? i : 1} out of ${events.length}`, false, true);
|
||||
if (this.cancelled) return this.cleanUp();
|
||||
if (!haveTileForEvent(event)) continue;
|
||||
this.messages.push(await this.getJSONString(event));
|
||||
|
|
|
@ -12,8 +12,13 @@ export default class PlainTextExporter extends Exporter {
|
|||
protected totalSize: number;
|
||||
protected mediaOmitText: string;
|
||||
|
||||
constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
|
||||
super(room, exportType, exportOptions);
|
||||
constructor(
|
||||
room: Room,
|
||||
exportType: exportTypes,
|
||||
exportOptions: exportOptions,
|
||||
setProgressText: React.Dispatch<React.SetStateAction<string>>,
|
||||
) {
|
||||
super(room, exportType, exportOptions, setProgressText);
|
||||
this.totalSize = 0;
|
||||
this.mediaOmitText = !this.exportOptions.attachmentsIncluded
|
||||
? _t("Media omitted")
|
||||
|
@ -79,7 +84,9 @@ export default class PlainTextExporter extends Exporter {
|
|||
|
||||
protected async createOutput(events: MatrixEvent[]) {
|
||||
let content = "";
|
||||
for (const event of events) {
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
const event = events[i];
|
||||
if (i % 100 == 0) this.updateProgress(`Processing event ${i ? i : 1} out of ${events.length}`, false, true);
|
||||
if (this.cancelled) return this.cleanUp();
|
||||
if (!haveTileForEvent(event)) continue;
|
||||
const textForEvent = await this._textForEvent(event);
|
||||
|
@ -89,8 +96,8 @@ export default class PlainTextExporter extends Exporter {
|
|||
}
|
||||
|
||||
public async export() {
|
||||
console.info("Starting export process...");
|
||||
console.info("Fetching events...");
|
||||
this.updateProgress("Starting export process...");
|
||||
this.updateProgress("Fetching events...");
|
||||
|
||||
const fetchStart = performance.now();
|
||||
const res = await this.getRequiredEvents();
|
||||
|
@ -98,7 +105,7 @@ export default class PlainTextExporter extends Exporter {
|
|||
|
||||
console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
|
||||
|
||||
console.info("Creating output...");
|
||||
this.updateProgress("Creating output...");
|
||||
const text = await this.createOutput(res);
|
||||
|
||||
if (this.files.length) {
|
||||
|
|
Loading…
Reference in a new issue