@rails/actiontext 8.0.201 → 8.1.0-beta1

package/app/assets/javascripts/actiontext.esm.js

@@ -672,7 +672,7 @@ class DirectUploadController {
     }));
   }
   uploadRequestDidProgress(event) {
-    const progress = event.loaded / event.total * 100;
+    const progress = event.loaded / event.total * 90;
     if (progress) {
       this.dispatch("progress", {
         progress: progress
@@ -707,6 +707,42 @@ class DirectUploadController {
       xhr: xhr
     });
     xhr.upload.addEventListener("progress", (event => this.uploadRequestDidProgress(event)));
+    xhr.upload.addEventListener("loadend", (() => {
+      this.simulateResponseProgress(xhr);
+    }));
+  }
+  simulateResponseProgress(xhr) {
+    let progress = 90;
+    const startTime = Date.now();
+    const updateProgress = () => {
+      const elapsed = Date.now() - startTime;
+      const estimatedResponseTime = this.estimateResponseTime();
+      const responseProgress = Math.min(elapsed / estimatedResponseTime, 1);
+      progress = 90 + responseProgress * 9;
+      this.dispatch("progress", {
+        progress: progress
+      });
+      if (xhr.readyState !== XMLHttpRequest.DONE && progress < 99) {
+        requestAnimationFrame(updateProgress);
+      }
+    };
+    xhr.addEventListener("loadend", (() => {
+      this.dispatch("progress", {
+        progress: 100
+      });
+    }));
+    requestAnimationFrame(updateProgress);
+  }
+  estimateResponseTime() {
+    const fileSize = this.file.size;
+    const MB = 1024 * 1024;
+    if (fileSize < MB) {
+      return 1e3;
+    } else if (fileSize < 10 * MB) {
+      return 2e3;
+    } else {
+      return 3e3 + fileSize / MB * 50;
+    }
   }
 }
 
@@ -857,7 +893,7 @@ class AttachmentUpload {
   }
   directUploadWillStoreFileWithXHR(xhr) {
     xhr.upload.addEventListener("progress", (event => {
-      const progress = event.loaded / event.total * 100;
+      const progress = event.loaded / event.total * 90;
       this.attachment.setUploadProgress(progress);
       if (progress) {
         this.dispatch("progress", {
@@ -865,6 +901,44 @@ class AttachmentUpload {
         });
       }
     }));
+    xhr.upload.addEventListener("loadend", (() => {
+      this.simulateResponseProgress(xhr);
+    }));
+  }
+  simulateResponseProgress(xhr) {
+    let progress = 90;
+    const startTime = Date.now();
+    const updateProgress = () => {
+      const elapsed = Date.now() - startTime;
+      const estimatedResponseTime = this.estimateResponseTime();
+      const responseProgress = Math.min(elapsed / estimatedResponseTime, 1);
+      progress = 90 + responseProgress * 9;
+      this.attachment.setUploadProgress(progress);
+      this.dispatch("progress", {
+        progress: progress
+      });
+      if (xhr.readyState !== XMLHttpRequest.DONE && progress < 99) {
+        requestAnimationFrame(updateProgress);
+      }
+    };
+    xhr.addEventListener("loadend", (() => {
+      this.attachment.setUploadProgress(100);
+      this.dispatch("progress", {
+        progress: 100
+      });
+    }));
+    requestAnimationFrame(updateProgress);
+  }
+  estimateResponseTime() {
+    const fileSize = this.attachment.file.size;
+    const MB = 1024 * 1024;
+    if (fileSize < MB) {
+      return 1e3;
+    } else if (fileSize < 10 * MB) {
+      return 2e3;
+    } else {
+      return 3e3 + fileSize / MB * 50;
+    }
   }
   directUploadDidComplete(error, attributes) {
     if (error) {

package/app/assets/javascripts/actiontext.js

@@ -661,7 +661,7 @@
       }));
     }
     uploadRequestDidProgress(event) {
-      const progress = event.loaded / event.total * 100;
+      const progress = event.loaded / event.total * 90;
       if (progress) {
         this.dispatch("progress", {
           progress: progress
@@ -696,6 +696,42 @@
         xhr: xhr
       });
       xhr.upload.addEventListener("progress", (event => this.uploadRequestDidProgress(event)));
+      xhr.upload.addEventListener("loadend", (() => {
+        this.simulateResponseProgress(xhr);
+      }));
+    }
+    simulateResponseProgress(xhr) {
+      let progress = 90;
+      const startTime = Date.now();
+      const updateProgress = () => {
+        const elapsed = Date.now() - startTime;
+        const estimatedResponseTime = this.estimateResponseTime();
+        const responseProgress = Math.min(elapsed / estimatedResponseTime, 1);
+        progress = 90 + responseProgress * 9;
+        this.dispatch("progress", {
+          progress: progress
+        });
+        if (xhr.readyState !== XMLHttpRequest.DONE && progress < 99) {
+          requestAnimationFrame(updateProgress);
+        }
+      };
+      xhr.addEventListener("loadend", (() => {
+        this.dispatch("progress", {
+          progress: 100
+        });
+      }));
+      requestAnimationFrame(updateProgress);
+    }
+    estimateResponseTime() {
+      const fileSize = this.file.size;
+      const MB = 1024 * 1024;
+      if (fileSize < MB) {
+        return 1e3;
+      } else if (fileSize < 10 * MB) {
+        return 2e3;
+      } else {
+        return 3e3 + fileSize / MB * 50;
+      }
     }
   }
   const inputSelector = "input[type=file][data-direct-upload-url]:not([disabled])";
@@ -830,7 +866,7 @@
     }
     directUploadWillStoreFileWithXHR(xhr) {
       xhr.upload.addEventListener("progress", (event => {
-        const progress = event.loaded / event.total * 100;
+        const progress = event.loaded / event.total * 90;
         this.attachment.setUploadProgress(progress);
         if (progress) {
           this.dispatch("progress", {
@@ -838,6 +874,44 @@
           });
         }
       }));
+      xhr.upload.addEventListener("loadend", (() => {
+        this.simulateResponseProgress(xhr);
+      }));
+    }
+    simulateResponseProgress(xhr) {
+      let progress = 90;
+      const startTime = Date.now();
+      const updateProgress = () => {
+        const elapsed = Date.now() - startTime;
+        const estimatedResponseTime = this.estimateResponseTime();
+        const responseProgress = Math.min(elapsed / estimatedResponseTime, 1);
+        progress = 90 + responseProgress * 9;
+        this.attachment.setUploadProgress(progress);
+        this.dispatch("progress", {
+          progress: progress
+        });
+        if (xhr.readyState !== XMLHttpRequest.DONE && progress < 99) {
+          requestAnimationFrame(updateProgress);
+        }
+      };
+      xhr.addEventListener("loadend", (() => {
+        this.attachment.setUploadProgress(100);
+        this.dispatch("progress", {
+          progress: 100
+        });
+      }));
+      requestAnimationFrame(updateProgress);
+    }
+    estimateResponseTime() {
+      const fileSize = this.attachment.file.size;
+      const MB = 1024 * 1024;
+      if (fileSize < MB) {
+        return 1e3;
+      } else if (fileSize < 10 * MB) {
+        return 2e3;
+      } else {
+        return 3e3 + fileSize / MB * 50;
+      }
     }
     directUploadDidComplete(error, attributes) {
       if (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/actiontext",
-  "version": "8.0.201",
+  "version": "8.1.0-beta1",
   "description": "Edit and display rich text in Rails applications",
   "module": "app/assets/javascripts/actiontext.esm.js",
   "main": "app/assets/javascripts/actiontext.js",
@@ -22,7 +22,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@rails/activestorage": ">= 8.0.0-alpha"
+    "@rails/activestorage": ">= 8.1.0-alpha"
   },
   "peerDependencies": {
     "trix": "^2.0.0"
@@ -31,6 +31,7 @@
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-node-resolve": "^11.0.1",
     "rollup": "^2.35.1",
+    "rollup-plugin-terser": "^7.0.2",
     "trix": "^2.0.0"
   },
   "scripts": {