From c568bca69eea62becb2e830644046c4971a12fc5 Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Sun, 11 Dec 2022 02:31:23 +0100
Subject: [PATCH] Pause button

---
 ui/index.html         |  2 ++
 ui/media/css/main.css | 14 ++++++++++++++
 ui/media/js/engine.js | 17 ++++++++++-------
 ui/media/js/main.js   | 29 +++++++++++++++++++++++++++++
 4 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index d0aef771..a35504b2 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -29,6 +29,8 @@
             </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>
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 6390a229..5090d975 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -1138,3 +1138,17 @@ button#save-system-settings-btn {
     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); }
+}
diff --git a/ui/media/js/engine.js b/ui/media/js/engine.js
index dd34ddb1..ed5ed2d5 100644
--- a/ui/media/js/engine.js
+++ b/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.
@@ -248,7 +248,7 @@
                     setServerStatus('busy', 'rendering..')
                     break
                 default: // Unavailable
-                    console.error('Ping received an unexpedted server status. Status: %s', serverState.status)
+                    console.error('Ping received an unexpected server status. Status: %s', serverState.status)
                     setServerStatus('error', serverState.status.toLowerCase())
                     break
             }
@@ -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) {
@@ -277,7 +277,7 @@
             case ServerStates.online:
                 return true
             default:
-                console.warn('Unexpedted server status. Server could be unavailable... Status: %s', serverState.status)
+                console.warn('Unexpected server status. Server could be unavailable... Status: %s', serverState.status)
                 return false
         }
     }
@@ -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) {
@@ -437,6 +437,9 @@
          * @memberof Task
          */
         async post(url, timeout=-1) {
+	    if (typeof pauseClient != 'undefined' && pauseClient===true) {
+	        await resumeClient()
+	    }
             if(this.status !== TaskStatus.init && this.status !== TaskStatus.pending) {
                 throw new Error(`Task status ${this.status} is not valid for post.`)
             }
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index d16b8b88..4ac29820 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -45,6 +45,8 @@ 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 imagesContainer = document.querySelector('#current-images')
 let initImagePreviewContainer = document.querySelector('#init_image_preview_container')
@@ -1365,6 +1367,33 @@ function linkTabContents(tab) {
     tab.addEventListener("click", event => selectTab(tab.id))
 }
 
+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)
+    })
+}
+
+pauseBtn.addEventListener("click", function () {
+    pauseClient = true
+    pauseBtn.style.display="none"
+    document.body.classList.add('wait-pause')
+})
+
 document.querySelectorAll(".tab").forEach(linkTabContents)
 
 window.addEventListener("beforeunload", function(e) {