\n {/* Main Controls */}\n

\n \n \n {ttsState.isPlaying ? \"⏸️\" : \"▶️\"}\n \n {ttsState.isPlaying ? \"Pause\" : \"Play\"}\n \n\n \n ⏹️\n Stop\n \n\n \n 🔄\n Restart\n \n\n setShowSettings(!showSettings)}\n className=\"control-button flex items-center space-x-2 px-6 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600\"\n >\n ⚙️\n Settings\n \n

\n\n {/* Status Display */}\n

\n \n \n {ttsState.isPlaying ? \"Playing\" : \n ttsState.isPaused ? \"Paused\" : \"Stopped\"}\n \n {ttsState.currentSentenceIndex >= 0 && (\n \n • Sentence {ttsState.currentSentenceIndex + 1}\n \n )}\n

\n\n {/* Settings Panel */}\n {showSettings && (\n

\n 🎛️ Voice Settings\n

\n\n {/* Speed Control */}\n

\n \n Reading Speed: {ttsSettings.rate}x\n \n \n

\n 0.5x (Slow)\n 1x (Normal)\n 2x (Fast)\n

\n\n {/* Voice Selection */}\n

\n \n Voice\n \n \n \n {availableVoices.map((voice, index) => (\n \n ))}\n \n

\n 🏠 = Local voice, ☁️ = Online voice\n

\n\n {/* Pitch Control */}\n

\n \n Pitch: {ttsSettings.pitch}\n \n \n

\n 0.5 (Low)\n 1 (Normal)\n 2 (High)\n

\n\n {/* Volume Control */}\n

\n \n Volume: {Math.round(ttsSettings.volume * 100)}%\n \n \n

\n 0% (Mute)\n 50%\n 100% (Max)\n

\n\n {/* Quick Presets */}\n

\n \n Quick Presets\n \n

\n onSettingsChange({ rate: 0.8, pitch: 1, volume: 1 })}\n className=\"px-3 py-1 text-xs bg-blue-100 text-blue-700 rounded hover:bg-blue-200\"\n >\n 📚 Study Mode\n \n onSettingsChange({ rate: 1, pitch: 1, volume: 1 })}\n className=\"px-3 py-1 text-xs bg-green-100 text-green-700 rounded hover:bg-green-200\"\n >\n 📖 Normal Reading\n \n onSettingsChange({ rate: 1.5, pitch: 1, volume: 1 })}\n className=\"px-3 py-1 text-xs bg-orange-100 text-orange-700 rounded hover:bg-orange-200\"\n >\n ⚡ Speed Reading\n \n

\n )}\n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/lorens247/Study-with-TTS/code/frontend/components/TTSControls.tsx","extension","actionData","errors"]