diff --git a/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx b/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx index ff40ba5f..6e750125 100644 --- a/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx +++ b/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx @@ -25,7 +25,8 @@ const TTSControl = () => { const _ = useTranslation(); const { appService } = useEnv(); const { getBookData } = useBookDataStore(); - const { getView, getProgress, getViewSettings, setTTSEnabled } = useReaderStore(); + const { getView, getProgress, getViewSettings } = useReaderStore(); + const { setViewSettings, setTTSEnabled } = useReaderStore(); const [bookKey, setBookKey] = useState(''); const [ttsLang, setTtsLang] = useState('en'); const [isPlaying, setIsPlaying] = useState(false); @@ -118,9 +119,27 @@ const TTSControl = () => { } }; + const handleHighlightMark = (e: Event) => { + const range = (e as CustomEvent).detail; + const view = getView(bookKey); + const progress = getProgress(bookKey); + const viewSettings = getViewSettings(bookKey); + if (!range || !view || !progress || !viewSettings) return; + + const { location } = progress; + const { index } = view.resolveCFI(location); + const cfi = view?.getCFI(index, range); + if (cfi) { + viewSettings.ttsLocation = cfi || ''; + setViewSettings(bookKey, viewSettings); + } + }; + ttsController.addEventListener('tts-speak-mark', handleSpeakMark); + ttsController.addEventListener('tts-highlight-mark', handleHighlightMark); return () => { ttsController.removeEventListener('tts-speak-mark', handleSpeakMark); + ttsController.removeEventListener('tts-highlight-mark', handleHighlightMark); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [ttsController, bookKey]); diff --git a/apps/readest-app/src/app/reader/hooks/useTextSelector.ts b/apps/readest-app/src/app/reader/hooks/useTextSelector.ts index 66963f3e..9042e855 100644 --- a/apps/readest-app/src/app/reader/hooks/useTextSelector.ts +++ b/apps/readest-app/src/app/reader/hooks/useTextSelector.ts @@ -12,7 +12,7 @@ export const useTextSelector = ( handleDismissPopup: () => void, ) => { const { getBookData } = useBookDataStore(); - const { getView, getViewState, getViewSettings, setViewSettings } = useReaderStore(); + const { getView, getViewSettings } = useReaderStore(); const view = getView(bookKey); const bookData = getBookData(bookKey)!; const viewSettings = getViewSettings(bookKey)!; @@ -84,14 +84,6 @@ export const useTextSelector = ( if (isTouchStarted.current && osPlatform === 'android') { makeSelection(sel, index, false); } - if (!isTouchStarted.current && getViewState(bookKey)?.ttsEnabled) { - const viewSettings = getViewSettings(bookKey)!; - const cfi = view?.getCFI(index, sel.getRangeAt(0)); - if (cfi) { - viewSettings.ttsLocation = cfi || ''; - setViewSettings(bookKey, viewSettings); - } - } isUpToPopup.current = true; }; const handlePointerup = (doc: Document, index: number) => { diff --git a/apps/readest-app/src/services/tts/TTSController.ts b/apps/readest-app/src/services/tts/TTSController.ts index ba177d8c..590a26e8 100644 --- a/apps/readest-app/src/services/tts/TTSController.ts +++ b/apps/readest-app/src/services/tts/TTSController.ts @@ -130,7 +130,8 @@ export class TTSController extends EventTarget { return; } if (mark && this.state === 'playing') { - this.view.tts?.setMark(mark); + const range = this.view.tts?.setMark(mark); + this.dispatchEvent(new CustomEvent('tts-highlight-mark', { detail: range })); } lastCode = code; }