feat: add options to customize the style of highlighted text of current sentence of TTS (#2358)

apps/readest-app/src/services/constants.ts

@@ -104,6 +104,7 @@ export const DEFAULT_READSETTINGS: ReadSettings = {
     squiggly: 'blue',
   },
   customHighlightColors: HIGHLIGHT_COLOR_HEX,
+  customTtsHighlightColors: [],
 };
 
 export const DEFAULT_MOBILE_READSETTINGS: Partial<ReadSettings> = {
@@ -219,6 +220,7 @@ export const DEFAULT_TTS_CONFIG: TTSConfig = {
   ttsVoice: '',
   ttsLocation: '',
   showTTSBar: false,
+  ttsHighlightOptions: { style: 'highlight', color: '#808080' },
 };
 
 export const DEFAULT_TRANSLATOR_CONFIG: TranslatorConfig = {

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

@@ -41,6 +41,8 @@ export class TTSController extends EventTarget {
   ttsNativeVoices: TTSVoice[] = [];
   ttsTargetLang: string = '';
 
+  options: TTSHighlightOptions = { style: 'highlight', color: 'gray' };
+
   constructor(appService: AppService | null, view: FoliateView) {
     super();
     this.ttsWebClient = new WebSpeechClient(this);
@@ -80,10 +82,10 @@ export class TTSController extends EventTarget {
     this.ttsEdgeVoices = await this.ttsEdgeClient.getAllVoices();
   }
 
-  #getHighlighter(options: TTSHighlightOptions) {
+  #getHighlighter() {
     return (range: Range) => {
       const { overlayer } = this.view.renderer.getContents()[0] as { overlayer: Overlayer };
-      const { style, color } = options;
+      const { style, color } = this.options;
       overlayer?.remove(HIGHLIGHT_KEY);
       overlayer?.add(HIGHLIGHT_KEY, range, Overlayer[style], { color });
     };
@@ -94,20 +96,23 @@ export class TTSController extends EventTarget {
     overlayer?.remove(HIGHLIGHT_KEY);
   }
 
-  async initViewTTS() {
+  async initViewTTS(options?: TTSHighlightOptions) {
+    if (options) {
+      this.options.style = options.style;
+      this.options.color = options.color;
+    }
     let granularity: TTSGranularity = this.view.language.isCJK ? 'sentence' : 'word';
     const supportedGranularities = this.ttsClient.getGranularities();
     if (!supportedGranularities.includes(granularity)) {
       granularity = supportedGranularities[0]!;
     }
-    const highlightOptions: TTSHighlightOptions = { style: 'highlight', color: 'gray' };
     await this.view.initTTS(
       granularity,
       createRejectFilter({
         tags: ['rt', 'sup'],
         contents: [{ tag: 'a', content: /^\d+$/ }],
       }),
-      this.#getHighlighter(highlightOptions),
+      this.#getHighlighter(),
     );
   }
 

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

@@ -1,7 +1,7 @@
 export type TTSGranularity = 'sentence' | 'word';
 
 export type TTSHighlightOptions = {
-  style: 'highlight' | 'underline' | 'squiggly' | 'outline';
+  style: 'highlight' | 'underline' | 'strikethrough' | 'squiggly' | 'outline';
   color: string;
 };