TTS UX enhancements (#148)

* Fix toast of PDF unsupported for TTS

* Use vertical scroll for large dropdown menus

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

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { useBookDataStore } from '@/store/bookDataStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { TTSController } from '@/services/tts/TTSController';
@@ -16,6 +17,7 @@ const POPUP_PADDING = 10;
 
 const TTSControl = () => {
   const _ = useTranslation();
+  const { getBookData } = useBookDataStore();
   const { getView, getViewSettings } = useReaderStore();
   const [bookKey, setBookKey] = useState<string>('');
   const [ttsLang, setTtsLang] = useState<string>('en');
@@ -52,7 +54,15 @@ const TTSControl = () => {
     const { bookKey, range } = event.detail;
     const view = getView(bookKey);
     const viewSettings = getViewSettings(bookKey);
-    if (!view || !viewSettings) return;
+    const bookData = getBookData(bookKey);
+    if (!view || !viewSettings || !bookData) return;
+    if (bookData.book?.format === 'PDF') {
+      eventDispatcher.dispatch('toast', {
+        message: _('TTS not supported for PDF'),
+        type: 'warning',
+      });
+      return;
+    }
 
     setBookKey(bookKey);
 
@@ -153,7 +163,7 @@ const TTSControl = () => {
           await ttsController.setRate(rate);
         }
       }
-    }, 2000),
+    }, 3000),
     [],
   );
 
@@ -170,7 +180,7 @@ const TTSControl = () => {
           await ttsController.setVoice(voice);
         }
       }
-    }, 2000),
+    }, 3000),
     [],
   );
 

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

@@ -130,8 +130,8 @@ const TTSPanel = ({
           <ul
             tabIndex={0}
             className={clsx(
-              'dropdown-content bgcolor-base-200 no-triangle menu rounded-box absolute right-0 z-[1] shadow',
-              'mt-4 max-h-96 w-[250px] overflow-y-scroll',
+              'dropdown-content bgcolor-base-200 no-triangle menu menu-vertical rounded-box absolute right-0 z-[1] shadow',
+              'mt-4 inline max-h-96 w-[250px] overflow-y-scroll',
             )}
           >
             {voices.map((voice, index) => (