Preloading audio for Edge TTS and other fixes (#138)

* Blacklist some low-quality web tts voices

* Dropdown layout tweaks

* Handle no audio data received in Edge TTS

* Preloading audio for Edge TTS

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

@@ -62,7 +62,7 @@ const FontDropdown: React.FC<DropdownProps> = ({
             >
               {moreOptions.map((option) => (
                 <li key={option} onClick={() => onSelect(option)}>
-                  <div className='flex items-center px-0'>
+                  <div className='flex items-center px-2'>
                     <span style={{ minWidth: '20px' }}>
                       {selected === option && <MdCheck size={20} className='text-base-content' />}
                     </span>

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

@@ -54,6 +54,11 @@ const TTSControl = () => {
 
     setBookKey(bookKey);
 
+    if (ttsControllerRef.current) {
+      ttsControllerRef.current.stop();
+      ttsControllerRef.current = null;
+    }
+
     try {
       const ttsController = new TTSController(view);
       await ttsController.init();
@@ -94,6 +99,8 @@ const TTSControl = () => {
       setIsPlaying(false);
       setIsPaused(true);
     } else if (isPaused) {
+      // start for forward/backward/setvoice-paused
+      // set rate don't pause the tts
       if (ttsController.state === 'paused') {
         ttsController.resume();
       } else {
@@ -163,6 +170,14 @@ const TTSControl = () => {
     return [];
   };
 
+  const handleGetVoiceId = () => {
+    const ttsController = ttsControllerRef.current;
+    if (ttsController) {
+      return ttsController.getVoiceId();
+    }
+    return '';
+  };
+
   const updatePanelPosition = () => {
     if (iconRef.current) {
       const rect = iconRef.current.getBoundingClientRect();
@@ -228,6 +243,7 @@ const TTSControl = () => {
             onSetRate={handleSetRate}
             onGetVoices={handleGetVoices}
             onSetVoice={handleSetVoice}
+            onGetVoiceId={handleGetVoiceId}
           />
         </Popup>
       )}

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

@@ -18,6 +18,7 @@ type TTSPanelProps = {
   onSetRate: (rate: number) => void;
   onGetVoices: (lang: string) => Promise<TTSVoice[]>;
   onSetVoice: (voice: string) => void;
+  onGetVoiceId: () => string;
 };
 
 const TTSPanel = ({
@@ -31,6 +32,7 @@ const TTSPanel = ({
   onSetRate,
   onGetVoices,
   onSetVoice,
+  onGetVoiceId,
 }: TTSPanelProps) => {
   const _ = useTranslation();
   const { getViewSettings, setViewSettings } = useReaderStore();
@@ -58,6 +60,12 @@ const TTSPanel = ({
     setViewSettings(bookKey, viewSettings);
   };
 
+  useEffect(() => {
+    const voiceId = onGetVoiceId();
+    setSelectedVoice(voiceId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     const fetchVoices = async () => {
       const voices = await onGetVoices(ttsLang);
@@ -131,7 +139,7 @@ const TTSPanel = ({
                 key={`${index}-${voice.id}`}
                 onClick={() => !voice.disabled && handleSelectVoice(voice.id)}
               >
-                <div className='flex items-center px-0'>
+                <div className='flex items-center px-2'>
                   <span style={{ minWidth: '20px' }}>
                     {selectedVoice === voice.id && (
                       <MdCheck size={20} className='text-base-content' />