Use onIdle(), move pause button, quick resume without using the promise

ui/index.html

@@ -29,8 +29,6 @@
             </h1>
         </div>
         <div id="server-status">
-	    <button id="pause"  style="background: var(--accent-color);"><i class="fa-solid fa-pause"></i> Pause</button>
-	    <button id="resume" style="background: var(--accent-color);display: none;"><i class="fa-solid fa-play"></i> Resume</button>
             <div id="server-status-color">●</div>
             <span id="server-status-msg">Stable Diffusion is starting..</span>
         </div>
@@ -102,7 +100,11 @@
                 </div>
 
                 <button id="makeImage" class="primaryButton">Make Image</button>
+		<div id="render-buttons">
 		   <button id="stopImage" class="secondaryButton">Stop All</button>
+		   <button id="pause"><i class="fa-solid fa-pause"></i> Pause All</button>
+		   <button id="resume"><i class="fa-solid fa-play"></i> Resume</button>
+		</div>
             </div>
 
             <span class="line-separator"></span>

ui/media/css/main.css

@@ -191,15 +191,29 @@ code {
     background: rgb(132, 8, 0);
     border: 2px solid rgb(122, 29, 0);
     color: rgb(255, 221, 255);
-    width: 100%;
     height: 30pt;
     border-radius: 6px;
-    display: none;
+    flex-grow: 2;
-    margin-top: 2pt;
 }
 #stopImage:hover {
     background: rgb(177, 27, 0);
 }
+
+div#render-buttons {
+    gap: 3px;
+    margin-top: 4px;
+    display: none;
+}
+button#pause {
+    flex-grow: 1;
+    background: var(--accent-color);
+}
+button#resume {
+    flex-grow: 1;
+    background: var(--accent-color);
+    display: none;
+}
+
 .flex-container {
     display: flex;
     width: 100%;

ui/media/js/engine.js

@@ -437,9 +437,6 @@
          * @memberof Task
          */
         async post(url, timeout=-1) {
-	    if (typeof pauseClient != 'undefined' && pauseClient===true && typeof resumeClient === 'function') {
-	        await resumeClient()
-	    }
             if(this.status !== TaskStatus.init && this.status !== TaskStatus.pending) {
                 throw new Error(`Task status ${this.status} is not valid for post.`)
             }

ui/media/js/main.js

@@ -47,6 +47,7 @@ let makeImageBtn = document.querySelector('#makeImage')
 let stopImageBtn = document.querySelector('#stopImage')
 let pauseBtn = document.querySelector('#pause')
 let resumeBtn = document.querySelector('#resume')
+let renderButtons = document.querySelector('#render-buttons')
 
 let imagesContainer = document.querySelector('#current-images')
 let initImagePreviewContainer = document.querySelector('#init_image_preview_container')
@@ -477,6 +478,10 @@ function makeImage() {
 
 async function onIdle() {
     const serverCapacity = SD.serverCapacity
+    if (pauseClient===true) {
+        await resumeClient()
+    }
+
     for (const taskEntry of getUncompletedTaskEntries()) {
         if (SD.activeTasks.size >= serverCapacity) {
             break
@@ -669,7 +674,7 @@ function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) {
         return
     }
 
-    stopImageBtn.style.display = 'none'
+    renderButtons.style.display = 'none'
     renameMakeImageButton()
 
     if (isSoundEnabled()) {
@@ -754,7 +759,7 @@ async function onTaskStart(task) {
     )
 
     setStatus('request', 'fetching..')
-    stopImageBtn.style.display = 'block'
+    renderButtons.style.display = 'flex'
     renameMakeImageButton()
     previewTools.style.display = 'block'
 }
@@ -1405,17 +1410,12 @@ let pauseClient = false
 
 function resumeClient() {
     if (pauseClient) {
-        resumeBtn.style.display = "inline"
         document.body.classList.remove('wait-pause')
         document.body.classList.add('pause')
     }
     return new Promise(resolve => {
         let playbuttonclick = function () {
             resumeBtn.removeEventListener("click", playbuttonclick);
-            resumeBtn.style.display = "none"
-            pauseBtn.style.display = "inline"
-            document.body.classList.remove('pause')
-            pauseClient = false
             resolve("resolved");
         }
         resumeBtn.addEventListener("click", playbuttonclick)
@@ -1425,9 +1425,18 @@ function resumeClient() {
 pauseBtn.addEventListener("click", function () {
     pauseClient = true
     pauseBtn.style.display="none"
+    resumeBtn.style.display = "inline"
     document.body.classList.add('wait-pause')
 })
 
+resumeBtn.addEventListener("click", function () {
+    pauseClient = false
+    resumeBtn.style.display = "none"
+    pauseBtn.style.display = "inline"
+    document.body.classList.remove('pause')
+    document.body.classList.remove('wait-pause')
+})
+
 document.querySelectorAll(".tab").forEach(linkTabContents)
 
 window.addEventListener("beforeunload", function(e) {