From 61d4c0ea63bf5f817cf7b8653078b96eda1641ac Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Fri, 4 Nov 2022 18:29:53 +0000
Subject: [PATCH] File loading progress is now updated

---
 src/core/Utils.mjs              |  4 ++--
 src/web/utils/fileDetails.mjs   | 22 ++++++++++----------
 src/web/waiters/InputWaiter.mjs | 37 ++++++++++++++++-----------------
 3 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/src/core/Utils.mjs b/src/core/Utils.mjs
index e9944868..30b8ee8c 100755
--- a/src/core/Utils.mjs
+++ b/src/core/Utils.mjs
@@ -779,9 +779,9 @@ class Utils {
             "`": "&#x60;"
         };
 
-        return str.replace(/[&<>"'`]/g, function (match) {
+        return str ? str.replace(/[&<>"'`]/g, function (match) {
             return HTML_CHARS[match];
-        });
+        }) : str;
     }
 
 
diff --git a/src/web/utils/fileDetails.mjs b/src/web/utils/fileDetails.mjs
index f8e3003b..0f4237f5 100644
--- a/src/web/utils/fileDetails.mjs
+++ b/src/web/utils/fileDetails.mjs
@@ -18,11 +18,11 @@ class FileDetailsPanel {
      * @param {Object} opts
      */
     constructor(opts) {
-        this.fileDetails = opts.fileDetails;
-        this.progress = opts.progress;
-        this.status = opts.status;
-        this.buffer = opts.buffer;
-        this.renderPreview = opts.renderPreview;
+        this.fileDetails = opts?.fileDetails;
+        this.progress = opts?.progress ?? 0;
+        this.status = opts?.status;
+        this.buffer = opts?.buffer;
+        this.renderPreview = opts?.renderPreview;
         this.dom = this.buildDOM();
         this.renderFileThumb();
     }
@@ -42,20 +42,20 @@ class FileDetailsPanel {
             <table class="file-details-data">
                 <tr>
                     <td>Name:</td>
-                    <td class="file-details-name" title="${Utils.escapeHtml(this.fileDetails.name)}">
-                        ${Utils.escapeHtml(this.fileDetails.name)}
+                    <td class="file-details-name" title="${Utils.escapeHtml(this.fileDetails?.name)}">
+                        ${Utils.escapeHtml(this.fileDetails?.name)}
                     </td>
                 </tr>
                 <tr>
                     <td>Size:</td>
-                    <td class="file-details-size" title="${Utils.escapeHtml(this.fileDetails.size)} bytes">
-                        ${Utils.escapeHtml(this.fileDetails.size)} bytes
+                    <td class="file-details-size" title="${Utils.escapeHtml(this.fileDetails?.size)} bytes">
+                        ${Utils.escapeHtml(this.fileDetails?.size)} bytes
                     </td>
                 </tr>
                 <tr>
                     <td>Type:</td>
-                    <td class="file-details-type" title="${Utils.escapeHtml(this.fileDetails.type)}">
-                        ${Utils.escapeHtml(this.fileDetails.type)}
+                    <td class="file-details-type" title="${Utils.escapeHtml(this.fileDetails?.type)}">
+                        ${Utils.escapeHtml(this.fileDetails?.type)}
                     </td>
                 </tr>
                 <tr>
diff --git a/src/web/waiters/InputWaiter.mjs b/src/web/waiters/InputWaiter.mjs
index f14689d9..d716cd4c 100644
--- a/src/web/waiters/InputWaiter.mjs
+++ b/src/web/waiters/InputWaiter.mjs
@@ -49,6 +49,7 @@ class InputWaiter {
         this.maxTabs = this.manager.tabs.calcMaxTabs();
         this.callbacks = {};
         this.callbackID = 0;
+        this.fileDetails = {};
 
         this.maxWorkers = 1;
         if (navigator.hardwareConcurrency !== undefined &&
@@ -542,15 +543,16 @@ class InputWaiter {
         if (inputNum !== activeTab) return;
 
         // Create file details panel
+        this.fileDetails = {
+            fileDetails: inputData.file,
+            progress: inputData.progress,
+            status: inputData.status,
+            buffer: inputData.buffer,
+            renderPreview: this.app.options.imagePreview
+        };
         this.inputEditorView.dispatch({
             effects: this.inputEditorConf.fileDetailsPanel.reconfigure(
-                fileDetailsPanel({
-                    fileDetails: inputData.file,
-                    progress: inputData.progress,
-                    status: inputData.status,
-                    buffer: inputData.buffer,
-                    renderPreview: this.app.options.imagePreview
-                })
+                fileDetailsPanel(this.fileDetails)
             )
         });
     }
@@ -599,19 +601,16 @@ class InputWaiter {
      * @param {number | string} progress - Either a number or "error"
      */
     updateFileProgress(inputNum, progress) {
-        // const activeTab = this.manager.tabs.getActiveTab("input");
-        // if (inputNum !== activeTab) return;
+        const activeTab = this.manager.tabs.getActiveTab("input");
+        if (inputNum !== activeTab) return;
 
-        // TODO
-
-        // const fileLoaded = document.getElementById("input-file-loaded");
-        // if (progress === "error") {
-        //     fileLoaded.textContent = "Error";
-        //     fileLoaded.style.color = "#FF0000";
-        // } else {
-        //     fileLoaded.textContent = progress + "%";
-        //     fileLoaded.style.color = "";
-        // }
+        this.fileDetails.progress = progress;
+        if (progress === "error") this.fileDetails.status = "error";
+        this.inputEditorView.dispatch({
+            effects: this.inputEditorConf.fileDetailsPanel.reconfigure(
+                fileDetailsPanel(this.fileDetails)
+            )
+        });
     }
 
     /**