From da044017d7c27aa3fc8f32b7dfab224c654cd139 Mon Sep 17 00:00:00 2001
From: "Aaron D. Lee" <aaron.daniel.lee@mgial.com>
Date: Sun, 4 Jan 2026 22:44:05 -0500
Subject: [PATCH] Add elapsed time counter to encode/decode buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shows running timer (e.g., "Encoding... 1:23") so users know
the operation is still working and not frozen.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontends/web/static/js/stegasoo.js | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/frontends/web/static/js/stegasoo.js b/frontends/web/static/js/stegasoo.js
index aa11294..556b69d 100644
--- a/frontends/web/static/js/stegasoo.js
+++ b/frontends/web/static/js/stegasoo.js
@@ -919,7 +919,16 @@ const Stegasoo = {
             }
             if (btn) {
                 btn.disabled = true;
-                btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Encoding...';
+                const startTime = Date.now();
+                const updateTimer = () => {
+                    const elapsed = Math.floor((Date.now() - startTime) / 1000);
+                    const mins = Math.floor(elapsed / 60);
+                    const secs = elapsed % 60;
+                    const timeStr = mins > 0 ? `${mins}:${secs.toString().padStart(2, '0')}` : `${secs}s`;
+                    btn.innerHTML = `<span class="spinner-border spinner-border-sm me-2"></span>Encoding... ${timeStr}`;
+                };
+                updateTimer();
+                setInterval(updateTimer, 1000);
             }
         });
     },
@@ -952,7 +961,16 @@ const Stegasoo = {
             const selectedMode = document.querySelector('input[name="embed_mode"]:checked')?.value || 'auto';
             if (btn) {
                 btn.disabled = true;
-                btn.innerHTML = `<span class="spinner-border spinner-border-sm me-2"></span>Decoding (${selectedMode.toUpperCase()})...`;
+                const startTime = Date.now();
+                const updateTimer = () => {
+                    const elapsed = Math.floor((Date.now() - startTime) / 1000);
+                    const mins = Math.floor(elapsed / 60);
+                    const secs = elapsed % 60;
+                    const timeStr = mins > 0 ? `${mins}:${secs.toString().padStart(2, '0')}` : `${secs}s`;
+                    btn.innerHTML = `<span class="spinner-border spinner-border-sm me-2"></span>Decoding (${selectedMode.toUpperCase()})... ${timeStr}`;
+                };
+                updateTimer();
+                setInterval(updateTimer, 1000);
             }
         });
     },