OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Use ref for progress updates

pull/21833/head
Jaiwanth 2021-07-02 16:52:33 +05:30
parent 3dcc7738f6
commit 87c624d085
5 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/views/dialogs/ExportDialog.tsx
View File

@ -29,11 +29,11 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [exportType, setExportType] = useState(exportTypes.TIMELINE); const [exportType, setExportType] = useState(exportTypes.TIMELINE);
const [includeAttachments, setAttachments] = useState(false); const [includeAttachments, setAttachments] = useState(false);
const [isExporting, setExporting] = useState(false); const [isExporting, setExporting] = useState(false);
const [exportProgressText, setExportProgressText] = useState("");
const [numberOfMessages, setNumberOfMessages] = useState<number>(100); const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
const [sizeLimit, setSizeLimit] = useState<number | null>(8); const [sizeLimit, setSizeLimit] = useState<number | null>(8);
const sizeLimitRef = useRef<Field>(); const sizeLimitRef = useRef<Field>();
const messageCountRef = useRef<Field>(); const messageCountRef = useRef<Field>();
const exportProgressRef = useRef<HTMLParagraphElement>();
const [displayCancel, setCancelWarning] = useState(false); const [displayCancel, setCancelWarning] = useState(false);
const [exportCancelled, setExportCancelled] = useState(false); const [exportCancelled, setExportCancelled] = useState(false);
const [exportSuccessful, setExportSuccessful] = useState(false); const [exportSuccessful, setExportSuccessful] = useState(false);
@ -59,7 +59,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room, room,
exportTypes[exportType], exportTypes[exportType],
exportOptions, exportOptions,
setExportProgressText, exportProgressRef,
), ),
); );
break; break;
@ -69,7 +69,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room, room,
exportTypes[exportType], exportTypes[exportType],
exportOptions, exportOptions,
setExportProgressText, exportProgressRef,
), ),
); );
break; break;
@ -79,7 +79,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room, room,
exportTypes[exportType], exportTypes[exportType],
exportOptions, exportOptions,
setExportProgressText, exportProgressRef,
), ),
); );
break; break;
@ -356,7 +356,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
onFinished={onFinished} onFinished={onFinished}
fixedWidth={true} fixedWidth={true}
> >
<p> { exportProgressText } </p> <p ref={exportProgressRef} />
<DialogButtons <DialogButtons
primaryButton={_t("Cancel")} primaryButton={_t("Cancel")}
primaryButtonClass="danger" primaryButtonClass="danger"

5
src/utils/exportUtils/Exporter.ts
View File

@ -10,6 +10,7 @@ import { MatrixClient } from "matrix-js-sdk";
import streamToZIP from "./ZipStream"; import streamToZIP from "./ZipStream";
import * as ponyfill from "web-streams-polyfill/ponyfill"; import * as ponyfill from "web-streams-polyfill/ponyfill";
import "web-streams-polyfill/ponyfill"; // to support streams API for older browsers import "web-streams-polyfill/ponyfill"; // to support streams API for older browsers
import { MutableRefObject } from "react";
type FileStream = { type FileStream = {
name: string; name: string;
@ -27,7 +28,7 @@ export default abstract class Exporter {
protected room: Room, protected room: Room,
protected exportType: exportTypes, protected exportType: exportTypes,
protected exportOptions: exportOptions, protected exportOptions: exportOptions,
protected setProgressText: React.Dispatch<React.SetStateAction<string>>, protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) { ) {
this.cancelled = false; this.cancelled = false;
this.files = []; this.files = [];
@ -43,7 +44,7 @@ export default abstract class Exporter {
protected updateProgress(progress: string, log = true, show = true): void { protected updateProgress(progress: string, log = true, show = true): void {
if (log) console.log(progress); if (log) console.log(progress);
if (show) this.setProgressText(progress); if (show) this.exportProgressRef.current.innerText = progress;
} }
protected addFile(filePath: string, blob: Blob): void { protected addFile(filePath: string, blob: Blob): void {

8
src/utils/exportUtils/HtmlExport.tsx
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { MutableRefObject } from "react";
import Exporter from "./Exporter"; import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media"; import { mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room"; import { Room } from "matrix-js-sdk/src/models/room";
@ -31,9 +31,9 @@ export default class HTMLExporter extends Exporter {
room: Room, room: Room,
exportType: exportTypes, exportType: exportTypes,
exportOptions: exportOptions, exportOptions: exportOptions,
setProgressText: React.Dispatch<React.SetStateAction<string>>, exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) { ) {
super(room, exportType, exportOptions, setProgressText); super(room, exportType, exportOptions, exportProgressRef);
this.avatars = new Map<string, boolean>(); this.avatars = new Map<string, boolean>();
this.permalinkCreator = new RoomPermalinkCreator(this.room); this.permalinkCreator = new RoomPermalinkCreator(this.room);
this.totalSize = 0; this.totalSize = 0;
@ -333,7 +333,7 @@ export default class HTMLExporter extends Exporter {
let prevEvent = null; let prevEvent = null;
for (let i = 0; i < events.length; i++) { for (let i = 0; i < events.length; i++) {
const event = events[i]; const event = events[i];
if (i % 100 == 0) this.updateProgress(`Processing event ${i ? i : 1} out of ${events.length}`, false, true); this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp(); if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue; if (!haveTileForEvent(event)) continue;

7
src/utils/exportUtils/JSONExport.ts
View File

@ -6,6 +6,7 @@ import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils"; import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils"; import { exportOptions } from "./exportUtils";
import { EventType } from "matrix-js-sdk/src/@types/event"; import { EventType } from "matrix-js-sdk/src/@types/event";
import { MutableRefObject } from "react";
export default class JSONExporter extends Exporter { export default class JSONExporter extends Exporter {
protected totalSize: number; protected totalSize: number;
@ -15,9 +16,9 @@ export default class JSONExporter extends Exporter {
room: Room, room: Room,
exportType: exportTypes, exportType: exportTypes,
exportOptions: exportOptions, exportOptions: exportOptions,
setProgressText: React.Dispatch<React.SetStateAction<string>>, exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) { ) {
super(room, exportType, exportOptions, setProgressText); super(room, exportType, exportOptions, exportProgressRef);
this.totalSize = 0; this.totalSize = 0;
this.messages = []; this.messages = [];
} }
@ -62,7 +63,7 @@ export default class JSONExporter extends Exporter {
protected async createOutput(events: MatrixEvent[]) { protected async createOutput(events: MatrixEvent[]) {
for (let i = 0; i < events.length; i++) { for (let i = 0; i < events.length; i++) {
const event = events[i]; const event = events[i];
if (i % 100 == 0) this.updateProgress(`Processing event ${i ? i : 1} out of ${events.length}`, false, true); this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp(); if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue; if (!haveTileForEvent(event)) continue;
this.messages.push(await this.getJSONString(event)); this.messages.push(await this.getJSONString(event));

7
src/utils/exportUtils/PlainTextExport.ts
View File

@ -7,6 +7,7 @@ import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils"; import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils"; import { exportOptions } from "./exportUtils";
import { textForEvent } from "../../TextForEvent"; import { textForEvent } from "../../TextForEvent";
import { MutableRefObject } from "react";
export default class PlainTextExporter extends Exporter { export default class PlainTextExporter extends Exporter {
protected totalSize: number; protected totalSize: number;
@ -16,9 +17,9 @@ export default class PlainTextExporter extends Exporter {
room: Room, room: Room,
exportType: exportTypes, exportType: exportTypes,
exportOptions: exportOptions, exportOptions: exportOptions,
setProgressText: React.Dispatch<React.SetStateAction<string>>, exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) { ) {
super(room, exportType, exportOptions, setProgressText); super(room, exportType, exportOptions, exportProgressRef);
this.totalSize = 0; this.totalSize = 0;
this.mediaOmitText = !this.exportOptions.attachmentsIncluded this.mediaOmitText = !this.exportOptions.attachmentsIncluded
? _t("Media omitted") ? _t("Media omitted")
@ -86,7 +87,7 @@ export default class PlainTextExporter extends Exporter {
let content = ""; let content = "";
for (let i = 0; i < events.length; i++) { for (let i = 0; i < events.length; i++) {
const event = events[i]; const event = events[i];
if (i % 100 == 0) this.updateProgress(`Processing event ${i ? i : 1} out of ${events.length}`, false, true); this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp(); if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue; if (!haveTileForEvent(event)) continue;
const textForEvent = await this._textForEvent(event); const textForEvent = await this._textForEvent(event);