tts: each book view now has its own tts controller (#1411)

apps/readest-app/src/app/reader/components/BooksGrid.tsx

@@ -20,7 +20,6 @@ import Annotator from './annotator/Annotator';
 import FootnotePopup from './FootnotePopup';
 import HintInfo from './HintInfo';
 import DoubleBorder from './DoubleBorder';
-import TTSControl from './tts/TTSControl';
 
 interface BooksGridProps {
   bookKeys: string[];
@@ -188,7 +187,6 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
           </div>
         );
       })}
-      <TTSControl />
     </div>
   );
 };

apps/readest-app/src/app/reader/components/FooterBar.tsx

@@ -23,6 +23,7 @@ import { saveViewSettings } from '../utils/viewSettingsHelper';
 import { PageInfo } from '@/types/book';
 import Button from '@/components/Button';
 import Slider from '@/components/Slider';
+import TTSControl from './tts/TTSControl';
 
 interface FooterBarProps {
   bookKey: string;
@@ -376,6 +377,7 @@ const FooterBar: React.FC<FooterBarProps> = ({
           />
         </div>
       </div>
+      <TTSControl bookKey={bookKey} />
     </>
   );
 };

apps/readest-app/src/app/reader/components/tts/TTSControl.tsx

@@ -20,13 +20,16 @@ const POPUP_WIDTH = 282;
 const POPUP_HEIGHT = 160;
 const POPUP_PADDING = 10;
 
-const TTSControl = () => {
+interface TTSControlProps {
+  bookKey: string;
+}
+
+const TTSControl: React.FC<TTSControlProps> = ({ bookKey }) => {
   const _ = useTranslation();
   const { appService } = useEnv();
   const { getBookData } = useBookDataStore();
   const { getView, getProgress, getViewSettings } = useReaderStore();
   const { setViewSettings, setTTSEnabled } = useReaderStore();
-  const [bookKey, setBookKey] = useState<string>('');
   const [ttsLang, setTtsLang] = useState<string>('en');
   const [isPlaying, setIsPlaying] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
@@ -152,7 +155,9 @@ const TTSControl = () => {
   }, [ttsController, bookKey]);
 
   const handleTTSSpeak = async (event: CustomEvent) => {
-    const { bookKey, range } = event.detail;
+    const { bookKey: ttsBookKey, range } = event.detail;
+    if (bookKey !== ttsBookKey) return;
+
     const view = getView(bookKey);
     const progress = getProgress(bookKey);
     const viewSettings = getViewSettings(bookKey);
@@ -182,7 +187,6 @@ const TTSControl = () => {
     }
 
     const primaryLang = bookData.book.primaryLanguage;
-    setBookKey(bookKey);
 
     if (ttsControllerRef.current) {
       ttsControllerRef.current.stop();
@@ -230,8 +234,8 @@ const TTSControl = () => {
   };
 
   const handleTTSStop = async (event: CustomEvent) => {
-    const { bookKey } = event.detail;
-    if (ttsControllerRef.current) {
+    const { bookKey: ttsBookKey } = event.detail;
+    if (ttsControllerRef.current && bookKey === ttsBookKey) {
       handleStop(bookKey);
     }
   };

apps/readest-app/src/services/tts/TTSController.ts

@@ -138,6 +138,7 @@ export class TTSController extends EventTarget {
       .replace('<break/>', ' ')
       .replace(/\.{3,}/g, '   ')
       .replace(/……/g, '  ')
+      .replace(/\*/g, ' ')
       .replace(/·/g, ' ');
 
     return ssml;