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) {