Add internationalisation to progress strings in room export dialog (#7385)

Author: t3chguy

src/components/views/dialogs/ExportDialog.tsx

@@ -53,7 +53,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
     const [sizeLimit, setSizeLimit] = useState<number | null>(8);
     const sizeLimitRef = useRef<Field>();
     const messageCountRef = useRef<Field>();
-    const [exportProgressText, setExportProgressText] = useState("Processing...");
+    const [exportProgressText, setExportProgressText] = useState(_t("Processing..."));
     const [displayCancel, setCancelWarning] = useState(false);
     const [exportCancelled, setExportCancelled] = useState(false);
     const [exportSuccessful, setExportSuccessful] = useState(false);

src/i18n/strings/en_EN.json

@@ -740,6 +740,11 @@
     "Share your public space": "Share your public space",
     "Unknown App": "Unknown App",
     "Are you sure you want to exit during this export?": "Are you sure you want to exit during this export?",
+    "Generating a ZIP": "Generating a ZIP",
+    "Fetched %(count)s events out of %(total)s|other": "Fetched %(count)s events out of %(total)s",
+    "Fetched %(count)s events out of %(total)s|one": "Fetched %(count)s event out of %(total)s",
+    "Fetched %(count)s events so far|other": "Fetched %(count)s events so far",
+    "Fetched %(count)s events so far|one": "Fetched %(count)s event so far",
     "HTML": "HTML",
     "JSON": "JSON",
     "Plain Text": "Plain Text",
@@ -752,7 +757,18 @@
     "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.": "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.",
     "Topic: %(topic)s": "Topic: %(topic)s",
     "Error fetching file": "Error fetching file",
+    "Processing event %(number)s out of %(total)s": "Processing event %(number)s out of %(total)s",
+    "Starting export...": "Starting export...",
+    "Fetched %(count)s events in %(seconds)ss|other": "Fetched %(count)s events in %(seconds)ss",
+    "Fetched %(count)s events in %(seconds)ss|one": "Fetched %(count)s event in %(seconds)ss",
+    "Creating HTML...": "Creating HTML...",
+    "Export successful!": "Export successful!",
+    "Exported %(count)s events in %(seconds)s seconds|other": "Exported %(count)s events in %(seconds)s seconds",
+    "Exported %(count)s events in %(seconds)s seconds|one": "Exported %(count)s event in %(seconds)s seconds",
     "File Attached": "File Attached",
+    "Starting export process...": "Starting export process...",
+    "Fetching events...": "Fetching events...",
+    "Creating output...": "Creating output...",
     "Enable": "Enable",
     "That's fine": "That's fine",
     "Stop": "Stop",
@@ -2477,6 +2493,7 @@
     "End Poll": "End Poll",
     "Are you sure you want to end this poll? This will show the final results of the poll and stop people from being able to vote.": "Are you sure you want to end this poll? This will show the final results of the poll and stop people from being able to vote.",
     "An error has occurred.": "An error has occurred.",
+    "Processing...": "Processing...",
     "Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
     "Size can only be a number between %(min)s MB and %(max)s MB": "Size can only be a number between %(min)s MB and %(max)s MB",
     "Number of messages can only be a number between %(min)s and %(max)s": "Number of messages can only be a number between %(min)s and %(max)s",

src/utils/exportUtils/Exporter.ts

@@ -22,7 +22,7 @@ import { saveAs } from "file-saver";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { MatrixClientPeg } from "../../MatrixClientPeg";
-import { IExportOptions, ExportType } from "./exportUtils";
+import { ExportType, IExportOptions } from "./exportUtils";
 import { decryptFile } from "../DecryptFile";
 import { mediaFromContent } from "../../customisations/Media";
 import { formatFullDateNoDay } from "../../DateUtils";
@@ -83,7 +83,7 @@ export default abstract class Exporter {
 
         const zip = new JSZip();
         // Create a writable stream to the directory
-        if (!this.cancelled) this.updateProgress("Generating a ZIP");
+        if (!this.cancelled) this.updateProgress(_t("Generating a ZIP"));
         else return this.cleanUp();
 
         for (const file of this.files) zip.file(filenameWithoutExt + "/" + file.name, file.blob);
@@ -172,11 +172,18 @@ export default abstract class Exporter {
                 // }
                 events.push(mxEv);
             }
-            this.updateProgress(
-                ("Fetched " + events.length + " events ") + (this.exportType === ExportType.LastNMessages
-                    ? `out of ${this.exportOptions.numberOfMessages}`
-                    : "so far"),
-            );
+
+            if (this.exportType === ExportType.LastNMessages) {
+                this.updateProgress(_t("Fetched %(count)s events out of %(total)s", {
+                    count: events.length,
+                    total: this.exportOptions.numberOfMessages,
+                }));
+            } else {
+                this.updateProgress(_t("Fetched %(count)s events so far", {
+                    count: events.length,
+                }));
+            }
+
             prevToken = res.end;
         }
         // Reverse the events so that we preserve the order

src/utils/exportUtils/HtmlExport.tsx

@@ -395,7 +395,10 @@ export default class HTMLExporter extends Exporter {
         let prevEvent = null;
         for (let i = start; i < Math.min(start + 1000, events.length); i++) {
             const event = events[i];
-            this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true);
+            this.updateProgress(_t("Processing event %(number)s out of %(total)s", {
+                number: i + 1,
+                total: events.length,
+            }), false, true);
             if (this.cancelled) return this.cleanUp();
             if (!haveTileForEvent(event)) continue;
 
@@ -411,15 +414,18 @@ export default class HTMLExporter extends Exporter {
     }
 
     public async export() {
-        this.updateProgress("Starting export...");
+        this.updateProgress(_t("Starting export..."));
 
         const fetchStart = performance.now();
         const res = await this.getRequiredEvents();
         const fetchEnd = performance.now();
 
-        this.updateProgress(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`, true, false);
+        this.updateProgress(_t("Fetched %(count)s events in %(seconds)ss", {
+            count: res.length,
+            seconds: (fetchEnd - fetchStart) / 1000,
+        }), true, false);
 
-        this.updateProgress("Creating HTML...");
+        this.updateProgress(_t("Creating HTML..."));
 
         const usedClasses = new Set<string>();
         for (let page = 0; page < res.length / 1000; page++) {
@@ -442,8 +448,11 @@ export default class HTMLExporter extends Exporter {
         if (this.cancelled) {
             logger.info("Export cancelled successfully");
         } else {
-            this.updateProgress("Export successful!");
-            this.updateProgress(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+            this.updateProgress(_t("Export successful!"));
+            this.updateProgress(_t("Exported %(count)s events in %(seconds)s seconds", {
+                count: res.length,
+                seconds: (exportEnd - fetchStart) / 1000,
+            }));
         }
 
         this.cleanUp();

src/utils/exportUtils/JSONExport.ts

@@ -23,6 +23,7 @@ import Exporter from "./Exporter";
 import { formatFullDateNoDay, formatFullDateNoDayNoTime } from "../../DateUtils";
 import { haveTileForEvent } from "../../components/views/rooms/EventTile";
 import { ExportType, IExportOptions } from "./exportUtils";
+import { _t } from "../../languageHandler";
 
 export default class JSONExporter extends Exporter {
     protected totalSize = 0;
@@ -79,7 +80,10 @@ export default class JSONExporter extends Exporter {
     protected async createOutput(events: MatrixEvent[]) {
         for (let i = 0; i < events.length; i++) {
             const event = events[i];
-            this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true);
+            this.updateProgress(_t("Processing event %(number)s out of %(total)s", {
+                number: i + 1,
+                total: events.length,
+            }), false, true);
             if (this.cancelled) return this.cleanUp();
             if (!haveTileForEvent(event)) continue;
             this.messages.push(await this.getJSONString(event));

src/utils/exportUtils/PlainTextExport.ts

@@ -107,7 +107,10 @@ export default class PlainTextExporter extends Exporter {
         let content = "";
         for (let i = 0; i < events.length; i++) {
             const event = events[i];
-            this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true);
+            this.updateProgress(_t("Processing event %(number)s out of %(total)s", {
+                number: i + 1,
+                total: events.length,
+            }), false, true);
             if (this.cancelled) return this.cleanUp();
             if (!haveTileForEvent(event)) continue;
             const textForEvent = await this.plainTextForEvent(event);
@@ -117,16 +120,16 @@ export default class PlainTextExporter extends Exporter {
     }
 
     public async export() {
-        this.updateProgress("Starting export process...");
-        this.updateProgress("Fetching events...");
+        this.updateProgress(_t("Starting export process..."));
+        this.updateProgress(_t("Fetching events..."));
 
         const fetchStart = performance.now();
         const res = await this.getRequiredEvents();
         const fetchEnd = performance.now();
 
         logger.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
 
-        this.updateProgress("Creating output...");
+        this.updateProgress(_t("Creating output..."));
         const text = await this.createOutput(res);
 
         if (this.files.length) {