From 58ad6212c924351f3a2737879cb49028fc18baa7 Mon Sep 17 00:00:00 2001
From: Richard R <me@richardr.dev>
Date: Wed, 3 Jun 2026 19:32:46 -0600
Subject: [PATCH] fix(html): reset TTS text and playback state on document
 changes

Ensure TTS text and playback readiness state are properly reset when
the current document data or name changes, or when clearing or setting
the current document. Update effect dependencies and logic to prevent
stale playback state and improve user experience when switching or
removing documents.
---
 src/app/(app)/html/[id]/useHtmlDocument.ts | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/app/(app)/html/[id]/useHtmlDocument.ts b/src/app/(app)/html/[id]/useHtmlDocument.ts
index 23bcc94..3b91553 100644
--- a/src/app/(app)/html/[id]/useHtmlDocument.ts
+++ b/src/app/(app)/html/[id]/useHtmlDocument.ts
@@ -94,14 +94,18 @@ export function useHtmlDocument(): HtmlDocumentState {
   const lastFedDocRef = useRef<string | null>(null);
   useEffect(() => {
     if (currDocData === undefined) {
+      lastFedDocRef.current = null;
+      setTTSText('');
       setIsPlaybackReady(false);
       return;
     }
     if (!currDocText) {
+      lastFedDocRef.current = null;
+      setTTSText('');
       setIsPlaybackReady(true);
       return;
     }
-    const key = `${currDocData ?? ''}::${currDocText.length}`;
+    const key = `${currDocName ?? ''}::${currDocData ?? ''}::${currDocText.length}`;
     if (lastFedDocRef.current === key) {
       setIsPlaybackReady(true);
       return;
@@ -110,19 +114,22 @@ export function useHtmlDocument(): HtmlDocumentState {
     lastFedDocRef.current = key;
     setTTSText(currDocText);
     setIsPlaybackReady(true);
-  }, [currDocText, currDocData, setTTSText]);
+  }, [currDocName, currDocText, currDocData, setTTSText]);
 
   const clearCurrDoc = useCallback(() => {
     setCurrDocData(undefined);
     setCurrDocName(undefined);
     setIsPlaybackReady(false);
     lastFedDocRef.current = null;
+    setTTSText('');
     stop();
-  }, [stop]);
+  }, [setTTSText, stop]);
 
   const setCurrentDocument = useCallback(async (id: string): Promise<void> => {
     try {
       setIsPlaybackReady(false);
+      lastFedDocRef.current = null;
+      setTTSText('');
       const meta = await getDocumentMetadata(id);
       if (!meta) {
         console.error('Document not found on server');
@@ -141,7 +148,7 @@ export function useHtmlDocument(): HtmlDocumentState {
       console.error('Failed to get HTML document:', error);
       clearCurrDoc();
     }
-  }, [clearCurrDoc]);
+  }, [clearCurrDoc, setTTSText]);
 
   const audiobookAdapter = useMemo(
     () =>