From 4d012289d11a28be59156da4cb77921dd6692ea9 Mon Sep 17 00:00:00 2001
From: Joshua Laymon <joshlaymon@icloud.com>
Date: Thu, 21 Aug 2025 02:30:06 +0000
Subject: [PATCH] Update web/templates/entry_view.html

---
 web/templates/entry_view.html | 58 ++++++++++++++++++++++++-----------
 1 file changed, 40 insertions(+), 18 deletions(-)

diff --git a/web/templates/entry_view.html b/web/templates/entry_view.html
index dea77e1..05a4cf6 100644
--- a/web/templates/entry_view.html
+++ b/web/templates/entry_view.html
@@ -279,20 +279,33 @@
 })();
 </script>
 
+<!-- ===== TTS with play/stop toggle (ONLY this block changed) ===== -->
 <script>
 (function(){
   const ttsBtn = document.getElementById('ttsBtn');
   if (!ttsBtn) return;
 
-  // Provided by the view for staff, or empty for non-staff
-  const TTS_URL = "{{ tts_url|default:'' }}";
+  const TTS_URL = "{{ tts_url|default:'' }}";  // staff-only when present
+  let ttsAudio = null;                         // holds current playback (Audio or shim)
+
+  function stopPlayback(){
+    try {
+      if (window.speechSynthesis) speechSynthesis.cancel();
+    } catch(e){}
+    try {
+      if (ttsAudio && typeof ttsAudio.pause === 'function') {
+        ttsAudio.pause();
+        ttsAudio.currentTime = 0;
+      }
+      if (ttsAudio && typeof ttsAudio.stop === 'function') {
+        ttsAudio.stop();
+      }
+    } catch(e){}
+    ttsAudio = null;
+  }
 
   async function playOpenAITTS() {
-    // fetch audio bytes from your Django endpoint
-    const r = await fetch(TTS_URL, {
-      credentials: 'same-origin',
-      cache: 'no-store'
-    });
+    const r = await fetch(TTS_URL, { credentials: 'same-origin', cache: 'no-store' });
     if (!r.ok) {
       const msg = await r.text().catch(()=> String(r.status));
       throw new Error(`HTTP ${r.status}: ${msg.slice(0,200)}`);
@@ -307,13 +320,10 @@
 
     const audio = new Audio(url);
     audio.preload = 'auto';
-    audio.autoplay = true;
-    audio.setAttribute('playsinline',''); // iOS/Safari
-    try {
-      await audio.play();
-    } finally {
-      audio.onended = () => URL.revokeObjectURL(url);
-    }
+    audio.setAttribute('playsinline','');
+    audio.onended = () => { URL.revokeObjectURL(url); ttsAudio = null; };
+    await audio.play();
+    ttsAudio = audio;
   }
 
   function buildCombinedText(){
@@ -328,19 +338,31 @@
     if (!('speechSynthesis' in window) || !('SpeechSynthesisUtterance' in window)) {
       throw new Error('Browser TTS not supported.');
     }
-    window.speechSynthesis.cancel();
+    speechSynthesis.cancel();
     const u = new SpeechSynthesisUtterance(text);
     u.rate = 1.0; u.pitch = 1.0; u.volume = 1.0;
+    u.onend = () => { ttsAudio = null; };
     speechSynthesis.speak(u);
+
+    // Create a tiny shim so our toggle can "stop" it
+    ttsAudio = {
+      pause: () => speechSynthesis.cancel(),
+      currentTime: 0
+    };
   }
 
   ttsBtn.addEventListener('click', async () => {
     try {
+      // Toggle: if already playing, stop instead
+      if (ttsAudio) {
+        stopPlayback();
+        showToast("Playback stopped");
+        return;
+      }
+
       ttsBtn.disabled = true;
 
-      // Staff users get the OpenAI endpoint; others fall back
-      const usingOpenAI = Boolean(TTS_URL);
-      if (usingOpenAI) {
+      if (TTS_URL) {
         await playOpenAITTS();
         showToast("Using OpenAI TTS");
       } else {