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/settings/FontDropDown.tsx

@@ -57,7 +57,7 @@ const FontDropdown: React.FC<DropdownProps> = ({
               tabIndex={0}
               className={clsx(
                 'dropdown-content bgcolor-base-200 menu rounded-box relative z-[1] overflow-y-scroll shadow',
-                '!mr-5 mb-[-46px] max-h-80 w-[292px]',
+                '!mr-5 mb-[-46px] inline max-h-80 w-[250px] overflow-y-scroll',
               )}
             >
               {moreOptions.map((option) => (

apps/readest-app/src/app/reader/components/settings/SettingsDialog.tsx

@@ -39,7 +39,7 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
 
   return (
     <dialog className='modal modal-open min-w-90 w-full !bg-[rgba(0,0,0,0.2)]'>
-      <div className='modal-box settings-content flex h-[65%] w-1/2 min-w-[540px] max-w-full flex-col p-0'>
+      <div className='modal-box settings-content flex h-[65%] w-1/2 min-w-[480px] max-w-full flex-col p-0'>
         <div className='dialog-header bg-base-100 sticky top-0 z-10 flex items-center justify-center px-4 pt-2'>
           <div className='dialog-tabs flex h-10 max-w-[80%] flex-grow items-center justify-around'>
             <button

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) => (