Merge pull request #641 from JeLuF/pause

Pause button

ui/index.html

@@ -100,7 +100,11 @@
                 </div>
 
                 <button id="makeImage" class="primaryButton">Make Image</button>
-                <button id="stopImage" class="secondaryButton">Stop All</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;
-    margin-top: 2pt;
+    flex-grow: 2;
 }
 #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%;
@@ -1097,3 +1111,50 @@ button#save-system-settings-btn {
 #ip-info div {
     line-height: 200%;
 }
+
+/* SCROLLBARS */
+:root {
+    --scrollbar-width: 14px;
+    --scrollbar-radius: 10px;
+}
+
+.scrollbar-editor::-webkit-scrollbar {
+    width: 8px;
+}
+
+.scrollbar-editor::-webkit-scrollbar-track {
+    border-radius: 10px;
+}
+
+.scrollbar-editor::-webkit-scrollbar-thumb {
+    background: --background-color2;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar {
+    width: var(--scrollbar-width);
+}
+
+::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px var(--input-border-color);
+    border-radius: var(--input-border-radius);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--background-color2);
+    border-radius: var(--scrollbar-radius);
+}
+
+body.pause {
+    border: solid 12px var(--accent-color);
+}
+
+body.wait-pause {
+    animation: blinker 2s linear infinite;
+}
+
+@keyframes blinker {
+     0% { border: solid 12px var(--accent-color); }
+    50% { border: solid 12px var(--background-color1); }
+   100% { border: solid 12px var(--accent-color); }
+}

ui/media/js/engine.js

@@ -10,8 +10,8 @@
     const IDLE_COOLDOWN = 2500 // ms
     const CONCURRENT_TASK_INTERVAL = 500 // ms
 
-    /** Connects to an endpoint and resumes connexion after reaching end of stream until all data is received.
-     * Allows closing the connexion while the server buffers more data.
+    /** Connects to an endpoint and resumes connection after reaching end of stream until all data is received.
+     * Allows closing the connection while the server buffers more data.
      */
     class ChunkedStreamReader {
         #bufferedString = '' // Data received waiting to be read.
@@ -264,11 +264,11 @@
 
     function isServerAvailable() {
         if (typeof serverState !== 'object') {
-            console.error('serverState not set to a value. Connexion to server could be lost...')
+            console.error('serverState not set to a value. Connection to server could be lost...')
             return false
         }
         if (Date.now() >= serverState.time + SERVER_STATE_VALIDITY_DURATION) {
-            console.warn('SERVER_STATE_VALIDITY_DURATION elapsed. Connexion to server could be lost...')
+            console.warn('SERVER_STATE_VALIDITY_DURATION elapsed. Connection to server could be lost...')
             return false
         }
         switch (serverState.status) {
@@ -306,7 +306,7 @@
                 if (await healthCheck() && isServerAvailable()) { // Force a recheck of server status before failure...
                     continue // Continue waiting if last healthCheck confirmed the server is still alive.
                 }
-                throw new Error('Connexion with server lost.')
+                throw new Error('Connection with server lost.')
             }
         }
         if (Date.now() >= serverState.time + SERVER_STATE_VALIDITY_DURATION) {

ui/media/js/main.js

@@ -45,6 +45,9 @@ let streamImageProgressField = document.querySelector("#stream_image_progress")
 
 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')
@@ -456,6 +459,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
@@ -649,7 +656,7 @@ function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) {
         return
     }
 
-    stopImageBtn.style.display = 'none'
+    renderButtons.style.display = 'none'
     renameMakeImageButton()
 
     if (isSoundEnabled()) {
@@ -734,7 +741,7 @@ async function onTaskStart(task) {
     )
 
     setStatus('request', 'fetching..')
-    stopImageBtn.style.display = 'block'
+    renderButtons.style.display = 'flex'
     renameMakeImageButton()
     previewTools.style.display = 'block'
 }
@@ -1387,6 +1394,37 @@ function linkTabContents(tab) {
     tab.addEventListener("click", event => selectTab(tab.id))
 }
 
+let pauseClient = false
+
+function resumeClient() {
+    if (pauseClient) {
+        document.body.classList.remove('wait-pause')
+        document.body.classList.add('pause')
+    }
+    return new Promise(resolve => {
+        let playbuttonclick = function () {
+            resumeBtn.removeEventListener("click", playbuttonclick);
+            resolve("resolved");
+        }
+        resumeBtn.addEventListener("click", playbuttonclick)
+    })
+}
+
+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) {