Add speech speed slider in the TTS panel (#128)

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

@@ -11,7 +11,7 @@ import TTSPanel from './TTSPanel';
 import TTSIcon from './TTSIcon';
 
 const POPUP_WIDTH = 260;
-const POPUP_HEIGHT = 80;
+const POPUP_HEIGHT = 160;
 const POPUP_PADDING = 10;
 
 const TTSControl = () => {
@@ -100,6 +100,14 @@ const TTSControl = () => {
     }
   };
 
+  // rate range: 0.5 - 3, 1.0 is normal speed
+  const handleSetRate = async (rate: number) => {
+    const ttsController = ttsControllerRef.current;
+    if (ttsController) {
+      await ttsController.setRate(rate);
+    }
+  };
+
   const updatePanelPosition = () => {
     if (iconRef.current) {
       const rect = iconRef.current.getBoundingClientRect();
@@ -149,6 +157,7 @@ const TTSControl = () => {
             onBackward={handleBackward}
             onForward={handleForward}
             onStop={handleStop}
+            onSetRate={handleSetRate}
           />
         </Popup>
       )}

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

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useTranslation } from '@/hooks/useTranslation';
 import { MdPlayCircle, MdPauseCircle, MdFastRewind, MdFastForward, MdStop } from 'react-icons/md';
 
 type TTSPanelProps = {
@@ -7,11 +8,55 @@ type TTSPanelProps = {
   onBackward: () => void;
   onForward: () => void;
   onStop: () => void;
+  onSetRate: (rate: number) => void;
 };
 
-const TTSPanel = ({ isPlaying, onTogglePlay, onBackward, onForward, onStop }: TTSPanelProps) => {
+const TTSPanel = ({
+  isPlaying,
+  onTogglePlay,
+  onBackward,
+  onForward,
+  onStop,
+  onSetRate,
+}: TTSPanelProps) => {
+  const _ = useTranslation();
+  const [rate, setRate] = useState(1.0);
+
   return (
-    <div className='flex w-full items-center justify-center rounded-2xl p-4'>
+    <div className='flex w-full flex-col items-center justify-center gap-2 rounded-2xl p-4'>
+      <div className='flex w-full flex-col items-center gap-0.5'>
+        <input
+          type='range'
+          min={0.5}
+          max={3}
+          value={rate}
+          className='range'
+          step='0.1'
+          onChange={(e) => {
+            const newRate = parseFloat(e.target.value);
+            setRate(newRate);
+            onSetRate(newRate);
+          }}
+        />
+        <div className='grid w-full grid-cols-7 text-xs'>
+          <span className='text-center'>|</span>
+          <span className='text-center'>|</span>
+          <span className='text-center'>|</span>
+          <span className='text-center'>|</span>
+          <span className='text-center'>|</span>
+          <span className='text-center'>|</span>
+          <span className='text-center'>|</span>
+        </div>
+        <div className='grid w-full grid-cols-7 text-xs'>
+          <span className='text-center'>{_('Slow')}</span>
+          <span className='text-center'></span>
+          <span className='text-center'>1.0</span>
+          <span className='text-center'>1.5</span>
+          <span className='text-center'>2.0</span>
+          <span className='text-center'></span>
+          <span className='text-center'>{_('Fast')}</span>
+        </div>
+      </div>
       <div className='flex items-center justify-between space-x-4'>
         <button onClick={onBackward} className='hover:bg-base-200/75 rounded-full p-1'>
           <MdFastRewind size={32} />