Use document event handling for task events

ui/media/js/main.js

@@ -2703,29 +2703,33 @@ let recentResolutionsValues = []
     })
 })()
 
-TASK_CALLBACKS["before_task_start"].push(function(task) {
+document.addEventListener("before_task_start", (e) => {
+    let task = e.detail.task
+
     // Update the seed *before* starting the processing so it's retained if user stops the task
     if (randomSeedField.checked) {
         seedField.value = task.seed
     }
 })
 
-TASK_CALLBACKS["after_task_start"].push(function(task) {
+document.addEventListener("after_task_start", (e) => {
-    // setStatus("request", "fetching..") // no-op implementation
     renderButtons.style.display = "flex"
     renameMakeImageButton()
     updateInitialText()
 })
 
-TASK_CALLBACKS["on_task_step"].push(function(task, reqBody, stepUpdate, outputContainer) {
+document.addEventListener("on_task_step", (e) => {
-    showImages(reqBody, stepUpdate, outputContainer, true)
+    showImages(e.detail.reqBody, e.detail.stepUpdate, e.detail.outputContainer, true)
 })
 
-TASK_CALLBACKS["on_render_task_success"].push(function(task, reqBody, stepUpdate, outputContainer) {
+document.addEventListener("on_render_task_success", (e) => {
-    showImages(reqBody, stepUpdate, outputContainer, false)
+    showImages(e.detail.reqBody, e.detail.stepUpdate, e.detail.outputContainer, false)
 })
 
-TASK_CALLBACKS["on_render_task_fail"].push(function(task, reqBody, stepUpdate, outputContainer) {
+document.addEventListener("on_render_task_fail", (e) => {
+    let task = e.detail.task
+    let stepUpdate = e.detail.stepUpdate
+
     const outputMsg = task["outputMsg"]
     let msg = ""
     if ("detail" in stepUpdate && typeof stepUpdate.detail === "string" && stepUpdate.detail.length > 0) {
@@ -2774,7 +2778,7 @@ TASK_CALLBACKS["on_render_task_fail"].push(function(task, reqBody, stepUpdate, o
     logError(msg, stepUpdate, outputMsg)
 })
 
-TASK_CALLBACKS["on_all_tasks_complete"].push(function() {
+document.addEventListener("on_all_tasks_complete", (e) => {
     renderButtons.style.display = "none"
     renameMakeImageButton()
 

ui/media/js/task-manager.js

@@ -4,15 +4,6 @@ const pauseBtn = document.querySelector("#pause")
 const resumeBtn = document.querySelector("#resume")
 const processOrder = document.querySelector("#process_order_toggle")
 
-let TASK_CALLBACKS = {
-    before_task_start: [],
-    after_task_start: [],
-    on_task_step: [],
-    on_render_task_success: [],
-    on_render_task_fail: [],
-    on_all_tasks_complete: [],
-}
-
 let pauseClient = false
 
 async function onIdle() {
@@ -141,7 +132,7 @@ async function onTaskStart(task) {
     task["instances"].push(instance)
     task.batchesDone++
 
-    TASK_CALLBACKS["before_task_start"].forEach((callback) => callback(task))
+    document.dispatchEvent(new CustomEvent("before_task_start", { detail: { task: task } }))
 
     instance.enqueue(getTaskUpdater(task, newTaskReqBody, outputContainer)).then(
         (renderResult) => {
@@ -152,7 +143,7 @@ async function onTaskStart(task) {
         }
     )
 
-    TASK_CALLBACKS["after_task_start"].forEach((callback) => callback(task))
+    document.dispatchEvent(new CustomEvent("after_task_start", { detail: { task: task } }))
 }
 
 function getTaskUpdater(task, reqBody, outputContainer) {
@@ -242,8 +233,15 @@ function getTaskUpdater(task, reqBody, outputContainer) {
             progressBarInner.style.width = `${percent}%`
 
             if (stepUpdate.output) {
-                TASK_CALLBACKS["on_task_step"].forEach((callback) =>
+                document.dispatchEvent(
-                    callback(task, reqBody, stepUpdate, outputContainer)
+                    new CustomEvent("on_task_step", {
+                        detail: {
+                            task: task,
+                            reqBody: reqBody,
+                            stepUpdate: stepUpdate,
+                            outputContainer: outputContainer,
+                        },
+                    })
                 )
             }
         }
@@ -253,13 +251,27 @@ function getTaskUpdater(task, reqBody, outputContainer) {
 function onRenderTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) {
     if (typeof stepUpdate === "object") {
         if (stepUpdate.status === "succeeded") {
-            TASK_CALLBACKS["on_render_task_success"].forEach((callback) =>
+            document.dispatchEvent(
-                callback(task, reqBody, stepUpdate, outputContainer)
+                new CustomEvent("on_render_task_success", {
+                    detail: {
+                        task: task,
+                        reqBody: reqBody,
+                        stepUpdate: stepUpdate,
+                        outputContainer: outputContainer,
+                    },
+                })
             )
         } else {
             task.isProcessing = false
-            TASK_CALLBACKS["on_render_task_fail"].forEach((callback) =>
+            document.dispatchEvent(
-                callback(task, reqBody, stepUpdate, outputContainer)
+                new CustomEvent("on_render_task_fail", {
+                    detail: {
+                        task: task,
+                        reqBody: reqBody,
+                        stepUpdate: stepUpdate,
+                        outputContainer: outputContainer,
+                    },
+                })
             )
         }
     }
@@ -307,7 +319,11 @@ function onRenderTaskCompleted(task, reqBody, instance, outputContainer, stepUpd
         resumeBtn.click()
     }
 
-    TASK_CALLBACKS["on_all_tasks_complete"].forEach((callback) => callback())
+    document.dispatchEvent(
+        new CustomEvent("on_all_tasks_complete", {
+            detail: {},
+        })
+    )
 }
 
 function resumeClient() {