feat: Introduce reader settings and dark mode support
Adds a new `ReaderSettings` type to manage user preferences such as dark mode, font size, line height, font family, and auto-scroll behavior. Implements dark mode styling for various UI components including the `VoiceSelector` and `QueueItem`, enhancing visual consistency. Enhances the `ReaderView` component to respect the `autoScroll` setting and introduces basic text styling options based on the new settings.
This commit is contained in:
Anthony
527
App.tsx
527
App.tsx
@@ -1,9 +1,9 @@
|
||||
|
||||
import React, { useState, useRef, useEffect, useCallback } from 'react';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { Plus, Play, Pause, SkipForward, SkipBack, Volume2, Gauge, Layout } from 'lucide-react';
|
||||
import { Article, PlaybackStatus, PlayerState, VoiceName, AudioSegment } from './types';
|
||||
import { AVAILABLE_VOICES, MIN_SPEED, MAX_SPEED, SPEED_STEP } from './constants';
|
||||
import { Plus, Play, Pause, SkipForward, SkipBack, Volume2, Gauge, Settings, Moon, Sun, Type, Keyboard } from 'lucide-react';
|
||||
import { Article, PlaybackStatus, PlayerState, VoiceName, AudioSegment, ReaderSettings } from './types';
|
||||
import { MIN_SPEED, MAX_SPEED, SPEED_STEP } from './constants';
|
||||
import { extractArticleContent, generateSpeechFromText } from './services/geminiService';
|
||||
import { base64ToUint8Array, createWavBlob } from './services/audioUtils';
|
||||
import { segmentText } from './services/textUtils';
|
||||
@@ -15,8 +15,8 @@ export default function App() {
|
||||
// -- State --
|
||||
const [inputUrl, setInputUrl] = useState('');
|
||||
const [queue, setQueue] = useState<Article[]>([]);
|
||||
// Selected article for viewing text (separate from playing)
|
||||
const [viewId, setViewId] = useState<string | null>(null);
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
|
||||
const [playerState, setPlayerState] = useState<PlayerState>({
|
||||
isPlaying: false,
|
||||
@@ -25,9 +25,16 @@ export default function App() {
|
||||
selectedVoice: VoiceName.Puck,
|
||||
});
|
||||
|
||||
const [settings, setSettings] = useState<ReaderSettings>({
|
||||
isDarkMode: false,
|
||||
fontSize: 'lg',
|
||||
lineHeight: 'relaxed',
|
||||
fontFamily: 'serif',
|
||||
autoScroll: true
|
||||
});
|
||||
|
||||
// -- Refs --
|
||||
const audioRef = useRef<HTMLAudioElement>(new Audio());
|
||||
// Track active processing to prevent duplicate fetch calls
|
||||
const processingRef = useRef<Set<string>>(new Set());
|
||||
|
||||
// -- Helpers --
|
||||
@@ -49,20 +56,15 @@ export default function App() {
|
||||
const updateSegment = (articleId: string, segmentId: string, updates: Partial<AudioSegment>) => {
|
||||
setQueue(prev => prev.map(article => {
|
||||
if (article.id !== articleId) return article;
|
||||
|
||||
const newSegments = article.segments.map(seg =>
|
||||
seg.id === segmentId ? { ...seg, ...updates } : seg
|
||||
);
|
||||
|
||||
return { ...article, segments: newSegments };
|
||||
}));
|
||||
};
|
||||
|
||||
// -- Audio Generation Pipeline --
|
||||
|
||||
/**
|
||||
* Fetches audio for a specific segment.
|
||||
*/
|
||||
const processSegmentAudio = useCallback(async (articleId: string, segmentId: string, text: string, voice: VoiceName) => {
|
||||
const uniqueKey = `${articleId}-${segmentId}`;
|
||||
if (processingRef.current.has(uniqueKey)) return;
|
||||
@@ -75,7 +77,6 @@ export default function App() {
|
||||
const pcmData = base64ToUint8Array(base64Audio);
|
||||
const wavBlob = createWavBlob(pcmData);
|
||||
const audioUrl = URL.createObjectURL(wavBlob);
|
||||
|
||||
updateSegment(articleId, segmentId, { audioUrl, isLoading: false });
|
||||
} catch (error) {
|
||||
console.error("Segment generation failed", error);
|
||||
@@ -85,18 +86,12 @@ export default function App() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Manages the buffer. ensure current segment + next N are ready.
|
||||
* We buffer 5 segments ahead because the first few are very small (fast),
|
||||
* so we need to be fetching the larger later ones while the small ones play.
|
||||
*/
|
||||
const manageBuffer = useCallback(async (article: Article) => {
|
||||
const currentIndex = article.currentSegmentIndex;
|
||||
const segmentsToBuffer = article.segments.slice(currentIndex, currentIndex + 5);
|
||||
|
||||
for (const seg of segmentsToBuffer) {
|
||||
if (!seg.audioUrl && !seg.isLoading && !seg.hasError) {
|
||||
// No await here - fire in background
|
||||
processSegmentAudio(article.id, seg.id, seg.text, playerState.selectedVoice);
|
||||
}
|
||||
}
|
||||
@@ -124,13 +119,10 @@ export default function App() {
|
||||
|
||||
try {
|
||||
const { title, text } = await extractArticleContent(newArticle.url);
|
||||
|
||||
// 1. Split text into segments (Progressive: Small -> Large)
|
||||
const segments = segmentText(text);
|
||||
|
||||
// Add title as the very first segment (Super fast interaction)
|
||||
if (title) {
|
||||
const titleSegment = segmentText(title)[0]; // Re-use segment logic for title
|
||||
const titleSegment = segmentText(title)[0];
|
||||
if (titleSegment) segments.unshift(titleSegment);
|
||||
}
|
||||
|
||||
@@ -141,17 +133,13 @@ export default function App() {
|
||||
status: PlaybackStatus.LOADING_AUDIO
|
||||
});
|
||||
|
||||
// 2. Trigger audio for the first batch immediately
|
||||
if (segments.length > 0) {
|
||||
const initialLoadCount = Math.min(segments.length, 5);
|
||||
|
||||
for(let i = 0; i < initialLoadCount; i++) {
|
||||
processSegmentAudio(id, segments[i].id, segments[i].text, playerState.selectedVoice);
|
||||
}
|
||||
|
||||
updateArticle(id, { status: PlaybackStatus.READY });
|
||||
|
||||
// Auto-play logic
|
||||
setQueue(prev => {
|
||||
const current = prev.find(a => a.id === id);
|
||||
if (current && !playerState.isPlaying) {
|
||||
@@ -187,23 +175,71 @@ export default function App() {
|
||||
}
|
||||
}, [playerState.currentArticleId]);
|
||||
|
||||
const skipSegment = useCallback((direction: 'next' | 'prev') => {
|
||||
setQueue(prevQueue => {
|
||||
const currentId = playerState.currentArticleId;
|
||||
if (!currentId) return prevQueue;
|
||||
|
||||
const article = prevQueue.find(a => a.id === currentId);
|
||||
if (!article) return prevQueue;
|
||||
|
||||
let newIndex = direction === 'next'
|
||||
? article.currentSegmentIndex + 1
|
||||
: article.currentSegmentIndex - 1;
|
||||
|
||||
// Boundary checks
|
||||
if (newIndex < 0) newIndex = 0;
|
||||
if (newIndex >= article.segments.length) {
|
||||
// If skipping past end, just stop for now (or go to next article logic)
|
||||
newIndex = article.segments.length - 1;
|
||||
}
|
||||
|
||||
return prevQueue.map(a => a.id === currentId ? { ...a, currentSegmentIndex: newIndex } : a);
|
||||
});
|
||||
}, [playerState.currentArticleId]);
|
||||
|
||||
// -- Keyboard Shortcuts --
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
// Ignore shortcuts if typing in input
|
||||
if (document.activeElement instanceof HTMLInputElement || document.activeElement instanceof HTMLTextAreaElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (e.code) {
|
||||
case 'Space':
|
||||
e.preventDefault();
|
||||
if (playerState.isPlaying) pausePlayback();
|
||||
else if (playerState.currentArticleId) playArticle(playerState.currentArticleId);
|
||||
else if (queue.length > 0) playArticle(queue[0].id);
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
skipSegment('next');
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
skipSegment('prev');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [playerState.isPlaying, playerState.currentArticleId, queue, playArticle, pausePlayback, skipSegment]);
|
||||
|
||||
// -- Effects --
|
||||
|
||||
// 1. Audio Player Loop
|
||||
useEffect(() => {
|
||||
const article = queue.find(a => a.id === playerState.currentArticleId);
|
||||
if (!article || !playerState.isPlaying) return;
|
||||
|
||||
const currentSegment = article.segments[article.currentSegmentIndex];
|
||||
|
||||
// If finished all segments
|
||||
if (!currentSegment) {
|
||||
updateArticle(article.id, { status: PlaybackStatus.COMPLETED });
|
||||
setPlayerState(prev => ({ ...prev, isPlaying: false }));
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if audio is ready
|
||||
if (currentSegment.audioUrl) {
|
||||
const audioEl = audioRef.current;
|
||||
const currentSrc = audioEl.getAttribute('data-current-src');
|
||||
@@ -217,36 +253,27 @@ export default function App() {
|
||||
audioEl.play().catch(e => console.warn("Resume failed", e));
|
||||
}
|
||||
} else {
|
||||
// If current segment is missing, ensure it's loading
|
||||
if (!currentSegment.isLoading && !currentSegment.hasError) {
|
||||
processSegmentAudio(article.id, currentSegment.id, currentSegment.text, playerState.selectedVoice);
|
||||
}
|
||||
}
|
||||
|
||||
// Always try to buffer ahead
|
||||
manageBuffer(article);
|
||||
|
||||
}, [queue, playerState.currentArticleId, playerState.isPlaying, playerState.playbackRate, playerState.selectedVoice, manageBuffer, processSegmentAudio]);
|
||||
|
||||
|
||||
// 2. Handle 'Ended' event to advance segment
|
||||
useEffect(() => {
|
||||
const audio = audioRef.current;
|
||||
|
||||
const handleEnded = () => {
|
||||
const currentId = playerState.currentArticleId;
|
||||
|
||||
setQueue(prevQueue => {
|
||||
const article = prevQueue.find(a => a.id === currentId);
|
||||
if (!article) return prevQueue;
|
||||
|
||||
const nextIndex = article.currentSegmentIndex + 1;
|
||||
|
||||
// If we have a next segment, advance index
|
||||
if (nextIndex < article.segments.length) {
|
||||
return prevQueue.map(a => a.id === currentId ? { ...a, currentSegmentIndex: nextIndex } : a);
|
||||
} else {
|
||||
// Article finished
|
||||
const artIndex = prevQueue.findIndex(a => a.id === currentId);
|
||||
if (artIndex !== -1 && artIndex < prevQueue.length - 1) {
|
||||
setTimeout(() => playArticle(prevQueue[artIndex + 1].id), 100);
|
||||
@@ -258,12 +285,10 @@ export default function App() {
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
audio.addEventListener('ended', handleEnded);
|
||||
return () => audio.removeEventListener('ended', handleEnded);
|
||||
}, [playerState.currentArticleId, playArticle]);
|
||||
|
||||
// 3. Handle Speed Change
|
||||
const handleSpeedChange = (newSpeed: number) => {
|
||||
const speed = Math.max(MIN_SPEED, Math.min(MAX_SPEED, newSpeed));
|
||||
setPlayerState(prev => ({ ...prev, playbackRate: speed }));
|
||||
@@ -272,195 +297,273 @@ export default function App() {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// -- Render --
|
||||
|
||||
const currentArticle = getCurrentArticle();
|
||||
const viewingArticle = getViewingArticle();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-slate-50 pb-32">
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-slate-200 px-6 py-4 sticky top-0 z-20 shadow-sm">
|
||||
<div className="max-w-7xl mx-auto flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="bg-blue-600 text-white p-2 rounded-lg">
|
||||
<Volume2 className="w-6 h-6" />
|
||||
</div>
|
||||
<h1 className="text-xl font-bold text-slate-900 tracking-tight hidden sm:block">NewsCaster AI</h1>
|
||||
</div>
|
||||
|
||||
<VoiceSelector
|
||||
selectedVoice={playerState.selectedVoice}
|
||||
onVoiceChange={(v) => setPlayerState(prev => ({ ...prev, selectedVoice: v }))}
|
||||
disabled={playerState.isPlaying}
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-grow px-4 py-6 max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
<div className={`${settings.isDarkMode ? 'dark' : ''} transition-colors duration-300`}>
|
||||
<div className="min-h-screen flex flex-col bg-slate-50 dark:bg-slate-950 pb-32 transition-colors duration-300">
|
||||
|
||||
{/* Left Column: Controls & Queue */}
|
||||
<div className="lg:col-span-5 space-y-6">
|
||||
{/* Input */}
|
||||
<div className="bg-white p-1 rounded-2xl shadow-sm border border-slate-200 flex gap-2 items-center pl-4">
|
||||
<input
|
||||
type="url"
|
||||
placeholder="Paste article URL here..."
|
||||
className="flex-grow py-3 outline-none text-slate-700 bg-transparent placeholder:text-slate-400 min-w-0"
|
||||
value={inputUrl}
|
||||
onChange={(e) => setInputUrl(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleAddUrl()}
|
||||
/>
|
||||
<button
|
||||
onClick={handleAddUrl}
|
||||
disabled={!inputUrl.trim()}
|
||||
className="bg-slate-900 hover:bg-slate-800 disabled:bg-slate-300 text-white px-4 sm:px-6 py-3 rounded-xl font-medium transition-all flex items-center gap-2 flex-shrink-0"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">Queue</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Queue List */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between px-1">
|
||||
<h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wider">Up Next</h2>
|
||||
<span className="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded-full">{queue.length} articles</span>
|
||||
{/* Header */}
|
||||
<header className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 px-6 py-4 sticky top-0 z-20 shadow-sm transition-colors duration-300">
|
||||
<div className="max-w-7xl mx-auto flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="bg-blue-600 text-white p-2 rounded-lg shadow-md">
|
||||
<Volume2 className="w-6 h-6" />
|
||||
</div>
|
||||
<h1 className="text-xl font-bold text-slate-900 dark:text-white tracking-tight hidden sm:block">NewsCaster AI</h1>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{queue.length === 0 ? (
|
||||
<div className="text-center py-12 border-2 border-dashed border-slate-200 rounded-2xl text-slate-400 bg-white">
|
||||
<p>No articles queued.</p>
|
||||
</div>
|
||||
) : (
|
||||
queue.map(article => (
|
||||
<div key={article.id} onClick={() => setViewId(article.id)} className="cursor-pointer">
|
||||
<QueueItem
|
||||
article={article}
|
||||
isActive={article.id === playerState.currentArticleId}
|
||||
isPlaying={playerState.isPlaying}
|
||||
onPlay={() => playArticle(article.id)}
|
||||
onPause={pausePlayback}
|
||||
onRemove={() => {
|
||||
if (playerState.currentArticleId === article.id) {
|
||||
pausePlayback();
|
||||
setPlayerState(prev => ({ ...prev, currentArticleId: null }));
|
||||
}
|
||||
setQueue(prev => prev.filter(a => a.id !== article.id));
|
||||
if (viewId === article.id) setViewId(null);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
<div className="flex items-center gap-4">
|
||||
<VoiceSelector
|
||||
selectedVoice={playerState.selectedVoice}
|
||||
onVoiceChange={(v) => setPlayerState(prev => ({ ...prev, selectedVoice: v }))}
|
||||
disabled={playerState.isPlaying}
|
||||
/>
|
||||
<button
|
||||
onClick={() => setShowSettings(!showSettings)}
|
||||
className="p-2 rounded-lg text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
<Settings className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Reader View */}
|
||||
<div className="lg:col-span-7 h-full hidden lg:block">
|
||||
<ReaderView article={viewingArticle} />
|
||||
</div>
|
||||
|
||||
<div className="lg:hidden block">
|
||||
{viewingArticle && (
|
||||
<div className="mt-8">
|
||||
<h3 className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-2">Article Reader</h3>
|
||||
<div className="h-[500px]">
|
||||
<ReaderView article={viewingArticle} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Player Bar */}
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur-lg border-t border-slate-200 p-4 pb-6 shadow-[0_-4px_20px_rgba(0,0,0,0.05)] z-30">
|
||||
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center gap-4 sm:gap-8">
|
||||
|
||||
<div className="flex-grow w-full sm:w-auto min-w-0 text-center sm:text-left">
|
||||
{currentArticle ? (
|
||||
<div>
|
||||
<h4 className="font-bold text-slate-900 truncate">{currentArticle.title}</h4>
|
||||
{/* Progress Bar for current segment */}
|
||||
<div className="w-full h-1 bg-slate-200 rounded-full mt-2 overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-blue-500 transition-all duration-300"
|
||||
style={{ width: `${((currentArticle.currentSegmentIndex + 1) / Math.max(1, currentArticle.segments.length)) * 100}%`}}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 truncate mt-1">
|
||||
Playing segment {currentArticle.currentSegmentIndex + 1} of {currentArticle.segments.length}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-slate-400 text-sm font-medium">Ready to play</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="hidden sm:flex items-center gap-2 group relative">
|
||||
<Gauge className="w-4 h-4 text-slate-400" />
|
||||
<div className="flex items-center gap-2 bg-slate-100 rounded-lg p-1">
|
||||
<button
|
||||
className="w-6 h-6 flex items-center justify-center hover:bg-white rounded text-xs font-bold text-slate-600 transition-colors"
|
||||
onClick={() => handleSpeedChange(playerState.playbackRate - SPEED_STEP)}
|
||||
>-</button>
|
||||
<span className="text-xs font-mono w-8 text-center font-bold text-blue-600">{playerState.playbackRate.toFixed(1)}x</span>
|
||||
<button
|
||||
className="w-6 h-6 flex items-center justify-center hover:bg-white rounded text-xs font-bold text-slate-600 transition-colors"
|
||||
onClick={() => handleSpeedChange(playerState.playbackRate + SPEED_STEP)}
|
||||
>+</button>
|
||||
</div>
|
||||
{/* Settings Menu */}
|
||||
{showSettings && (
|
||||
<div className="absolute right-4 top-16 bg-white dark:bg-slate-900 rounded-xl shadow-xl border border-slate-200 dark:border-slate-800 p-6 w-80 z-50 animate-in fade-in slide-in-from-top-4">
|
||||
<h3 className="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-4 flex items-center gap-2">
|
||||
<Settings className="w-4 h-4" /> Reader Preferences
|
||||
</h3>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Theme */}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-slate-700 dark:text-slate-300 text-sm font-medium">Theme</span>
|
||||
<div className="flex bg-slate-100 dark:bg-slate-800 rounded-lg p-1">
|
||||
<button
|
||||
onClick={() => setSettings(s => ({...s, isDarkMode: false}))}
|
||||
className={`p-2 rounded-md transition-all ${!settings.isDarkMode ? 'bg-white shadow text-blue-600' : 'text-slate-400'}`}
|
||||
>
|
||||
<Sun className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSettings(s => ({...s, isDarkMode: true}))}
|
||||
className={`p-2 rounded-md transition-all ${settings.isDarkMode ? 'bg-slate-700 shadow text-blue-400' : 'text-slate-400'}`}
|
||||
>
|
||||
<Moon className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Font Size */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-slate-700 dark:text-slate-300 font-medium">Text Size</span>
|
||||
</div>
|
||||
<input
|
||||
type="range" min="0" max="4" step="1"
|
||||
value={['sm','base','lg','xl','2xl'].indexOf(settings.fontSize)}
|
||||
onChange={(e) => {
|
||||
const sizes = ['sm','base','lg','xl','2xl'] as const;
|
||||
setSettings(s => ({...s, fontSize: sizes[parseInt(e.target.value)]}));
|
||||
}}
|
||||
className="w-full h-2 bg-slate-200 dark:bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-600"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-slate-400">
|
||||
<span>Aa</span>
|
||||
<span>Aa</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Font Family */}
|
||||
<div className="space-y-2">
|
||||
<span className="text-slate-700 dark:text-slate-300 text-sm font-medium block">Font Family</span>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{['serif', 'sans', 'mono'].map((font) => (
|
||||
<button
|
||||
key={font}
|
||||
onClick={() => setSettings(s => ({...s, fontFamily: font as any}))}
|
||||
className={`px-3 py-2 text-sm border rounded-lg transition-all capitalize ${
|
||||
settings.fontFamily === font
|
||||
? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
|
||||
: 'border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400'
|
||||
}`}
|
||||
>
|
||||
{font}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Shortcuts Hint */}
|
||||
<div className="pt-4 border-t border-slate-100 dark:border-slate-800">
|
||||
<p className="text-xs text-slate-400 flex items-center gap-2">
|
||||
<Keyboard className="w-3 h-3" />
|
||||
Shortcuts: Space (Play), Arrows (Skip)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-grow px-4 py-6 max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
|
||||
{/* Left Column: Controls & Queue */}
|
||||
<div className="lg:col-span-5 space-y-6">
|
||||
{/* Input */}
|
||||
<div className="bg-white dark:bg-slate-900 p-1 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 flex gap-2 items-center pl-4 transition-colors duration-300">
|
||||
<input
|
||||
type="url"
|
||||
placeholder="Paste article URL here..."
|
||||
className="flex-grow py-3 outline-none text-slate-700 dark:text-slate-200 bg-transparent placeholder:text-slate-400 min-w-0"
|
||||
value={inputUrl}
|
||||
onChange={(e) => setInputUrl(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleAddUrl()}
|
||||
/>
|
||||
<button
|
||||
onClick={handleAddUrl}
|
||||
disabled={!inputUrl.trim()}
|
||||
className="bg-slate-900 hover:bg-slate-800 dark:bg-blue-600 dark:hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed text-white px-4 sm:px-6 py-3 rounded-xl font-medium transition-all flex items-center gap-2 flex-shrink-0 shadow-lg"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">Queue</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Queue List */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between px-1">
|
||||
<h2 className="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Up Next</h2>
|
||||
<span className="text-xs bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 px-2 py-1 rounded-full">{queue.length} articles</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{queue.length === 0 ? (
|
||||
<div className="text-center py-12 border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl text-slate-400 dark:text-slate-600 bg-white dark:bg-slate-900/50">
|
||||
<p>No articles queued.</p>
|
||||
</div>
|
||||
) : (
|
||||
queue.map(article => (
|
||||
<div key={article.id} onClick={() => setViewId(article.id)} className="cursor-pointer">
|
||||
<QueueItem
|
||||
article={article}
|
||||
isActive={article.id === playerState.currentArticleId}
|
||||
isPlaying={playerState.isPlaying}
|
||||
onPlay={() => playArticle(article.id)}
|
||||
onPause={pausePlayback}
|
||||
onRemove={() => {
|
||||
if (playerState.currentArticleId === article.id) {
|
||||
pausePlayback();
|
||||
setPlayerState(prev => ({ ...prev, currentArticleId: null }));
|
||||
}
|
||||
setQueue(prev => prev.filter(a => a.id !== article.id));
|
||||
if (viewId === article.id) setViewId(null);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Reader View */}
|
||||
<div className="lg:col-span-7 h-full hidden lg:block">
|
||||
<ReaderView
|
||||
article={viewingArticle}
|
||||
settings={settings}
|
||||
onToggleAutoScroll={() => setSettings(s => ({...s, autoScroll: !s.autoScroll}))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="lg:hidden block">
|
||||
{viewingArticle && (
|
||||
<div className="mt-8">
|
||||
<h3 className="text-sm font-semibold text-slate-500 mb-2">Article Reader</h3>
|
||||
<div className="h-[500px]">
|
||||
<ReaderView
|
||||
article={viewingArticle}
|
||||
settings={settings}
|
||||
onToggleAutoScroll={() => setSettings(s => ({...s, autoScroll: !s.autoScroll}))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Player Bar */}
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-white/90 dark:bg-slate-900/90 backdrop-blur-lg border-t border-slate-200 dark:border-slate-800 p-4 pb-6 shadow-[0_-4px_20px_rgba(0,0,0,0.05)] z-30 transition-colors duration-300">
|
||||
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center gap-4 sm:gap-8">
|
||||
|
||||
<div className="flex-grow w-full sm:w-auto min-w-0 text-center sm:text-left">
|
||||
{currentArticle ? (
|
||||
<div>
|
||||
<h4 className="font-bold text-slate-900 dark:text-white truncate">{currentArticle.title}</h4>
|
||||
{/* Progress Bar */}
|
||||
<div className="w-full h-1 bg-slate-200 dark:bg-slate-700 rounded-full mt-2 overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-blue-500 transition-all duration-300"
|
||||
style={{ width: `${((currentArticle.currentSegmentIndex + 1) / Math.max(1, currentArticle.segments.length)) * 100}%`}}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 truncate mt-1">
|
||||
Playing segment {currentArticle.currentSegmentIndex + 1} of {currentArticle.segments.length}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-slate-400 dark:text-slate-500 text-sm font-medium">Ready to play</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
className="p-2 text-slate-400 hover:text-slate-600 transition-colors"
|
||||
onClick={() => {
|
||||
if (currentArticle && currentArticle.currentSegmentIndex > 0) {
|
||||
// Go back one segment
|
||||
setQueue(prev => prev.map(a => a.id === currentArticle.id ? { ...a, currentSegmentIndex: a.currentSegmentIndex - 1 } : a));
|
||||
} else {
|
||||
// Prev article
|
||||
const idx = queue.findIndex(a => a.id === playerState.currentArticleId);
|
||||
if (idx > 0) playArticle(queue[idx - 1].id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SkipBack className="w-5 h-5" />
|
||||
</button>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="hidden sm:flex items-center gap-2 group relative">
|
||||
<Gauge className="w-4 h-4 text-slate-400" />
|
||||
<div className="flex items-center gap-2 bg-slate-100 dark:bg-slate-800 rounded-lg p-1">
|
||||
<button
|
||||
className="w-6 h-6 flex items-center justify-center hover:bg-white dark:hover:bg-slate-700 rounded text-xs font-bold text-slate-600 dark:text-slate-300 transition-colors"
|
||||
onClick={() => handleSpeedChange(playerState.playbackRate - SPEED_STEP)}
|
||||
>-</button>
|
||||
<span className="text-xs font-mono w-8 text-center font-bold text-blue-600 dark:text-blue-400">{playerState.playbackRate.toFixed(1)}x</span>
|
||||
<button
|
||||
className="w-6 h-6 flex items-center justify-center hover:bg-white dark:hover:bg-slate-700 rounded text-xs font-bold text-slate-600 dark:text-slate-300 transition-colors"
|
||||
onClick={() => handleSpeedChange(playerState.playbackRate + SPEED_STEP)}
|
||||
>+</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="w-12 h-12 rounded-full bg-slate-900 hover:bg-slate-800 text-white flex items-center justify-center shadow-lg hover:shadow-xl hover:scale-105 transition-all active:scale-95"
|
||||
onClick={() => {
|
||||
if (playerState.isPlaying) pausePlayback();
|
||||
else if (playerState.currentArticleId) playArticle(playerState.currentArticleId);
|
||||
else if (queue.length > 0) playArticle(queue[0].id);
|
||||
}}
|
||||
disabled={queue.length === 0}
|
||||
>
|
||||
{playerState.isPlaying ? <Pause className="w-5 h-5 fill-current" /> : <Play className="w-5 h-5 fill-current ml-1" />}
|
||||
</button>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
className="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors"
|
||||
onClick={() => skipSegment('prev')}
|
||||
>
|
||||
<SkipBack className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="p-2 text-slate-400 hover:text-slate-600 transition-colors"
|
||||
onClick={() => {
|
||||
if (currentArticle && currentArticle.currentSegmentIndex < currentArticle.segments.length - 1) {
|
||||
// Next segment
|
||||
setQueue(prev => prev.map(a => a.id === currentArticle.id ? { ...a, currentSegmentIndex: a.currentSegmentIndex + 1 } : a));
|
||||
} else {
|
||||
// Next article
|
||||
const idx = queue.findIndex(a => a.id === playerState.currentArticleId);
|
||||
if (idx !== -1 && idx < queue.length - 1) playArticle(queue[idx + 1].id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SkipForward className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
className="w-12 h-12 rounded-full bg-slate-900 hover:bg-slate-800 dark:bg-blue-600 dark:hover:bg-blue-500 text-white flex items-center justify-center shadow-lg hover:shadow-xl hover:scale-105 transition-all active:scale-95"
|
||||
onClick={() => {
|
||||
if (playerState.isPlaying) pausePlayback();
|
||||
else if (playerState.currentArticleId) playArticle(playerState.currentArticleId);
|
||||
else if (queue.length > 0) playArticle(queue[0].id);
|
||||
}}
|
||||
disabled={queue.length === 0}
|
||||
>
|
||||
{playerState.isPlaying ? <Pause className="w-5 h-5 fill-current" /> : <Play className="w-5 h-5 fill-current ml-1" />}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors"
|
||||
onClick={() => skipSegment('next')}
|
||||
>
|
||||
<SkipForward className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Article, PlaybackStatus } from '../types';
|
||||
import { Play, Pause, Loader2, AlertCircle, FileText, Headphones } from 'lucide-react';
|
||||
import { Play, Pause, Loader2, AlertCircle, FileText } from 'lucide-react';
|
||||
|
||||
interface QueueItemProps {
|
||||
article: Article;
|
||||
@@ -35,7 +36,7 @@ export const QueueItem: React.FC<QueueItemProps> = ({
|
||||
<div className="w-1 bg-blue-500 animate-[bounce_0.8s_infinite] h-3"></div>
|
||||
</div>;
|
||||
default:
|
||||
return <FileText className="w-5 h-5 text-slate-400" />;
|
||||
return <FileText className="w-5 h-5 text-slate-400 dark:text-slate-500" />;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -45,8 +46,8 @@ export const QueueItem: React.FC<QueueItemProps> = ({
|
||||
<div className={`
|
||||
relative group flex items-center p-4 rounded-xl border transition-all duration-200
|
||||
${isActive
|
||||
? 'bg-blue-50 border-blue-200 shadow-sm'
|
||||
: 'bg-white border-slate-100 hover:border-slate-300'
|
||||
? 'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800 shadow-sm'
|
||||
: 'bg-white border-slate-100 hover:border-slate-300 dark:bg-slate-800 dark:border-slate-700 dark:hover:border-slate-600'
|
||||
}
|
||||
`}>
|
||||
<div className="flex-shrink-0 mr-4 w-8 flex justify-center">
|
||||
@@ -54,10 +55,10 @@ export const QueueItem: React.FC<QueueItemProps> = ({
|
||||
</div>
|
||||
|
||||
<div className="flex-grow min-w-0">
|
||||
<h3 className={`font-medium truncate ${isActive ? 'text-blue-900' : 'text-slate-900'}`}>
|
||||
<h3 className={`font-medium truncate ${isActive ? 'text-blue-900 dark:text-blue-300' : 'text-slate-900 dark:text-slate-200'}`}>
|
||||
{article.title || article.url}
|
||||
</h3>
|
||||
<p className="text-xs text-slate-500 truncate mt-0.5">
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 truncate mt-0.5">
|
||||
{article.url}
|
||||
</p>
|
||||
{article.errorMessage && (
|
||||
@@ -69,18 +70,18 @@ export const QueueItem: React.FC<QueueItemProps> = ({
|
||||
{isReady && (
|
||||
<button
|
||||
onClick={isActive && isPlaying ? onPause : onPlay}
|
||||
className="p-2 rounded-full bg-slate-100 hover:bg-blue-100 text-slate-700 hover:text-blue-700 transition-colors"
|
||||
className="p-2 rounded-full bg-slate-100 hover:bg-blue-100 dark:bg-slate-700 dark:hover:bg-blue-900/50 text-slate-700 dark:text-slate-200 hover:text-blue-700 dark:hover:text-blue-400 transition-colors"
|
||||
>
|
||||
{isActive && isPlaying ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={onRemove}
|
||||
className="text-xs text-slate-400 hover:text-red-500 underline px-2"
|
||||
className="text-xs text-slate-400 hover:text-red-500 dark:text-slate-500 dark:hover:text-red-400 underline px-2"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,28 +1,65 @@
|
||||
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Article } from '../types';
|
||||
import { FileText } from 'lucide-react';
|
||||
import { Article, ReaderSettings } from '../types';
|
||||
import { FileText, MousePointerClick } from 'lucide-react';
|
||||
|
||||
interface ReaderViewProps {
|
||||
article?: Article | null;
|
||||
settings?: ReaderSettings;
|
||||
onToggleAutoScroll?: () => void;
|
||||
}
|
||||
|
||||
export const ReaderView: React.FC<ReaderViewProps> = ({ article }) => {
|
||||
export const ReaderView: React.FC<ReaderViewProps> = ({ article, settings, onToggleAutoScroll }) => {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Auto-scroll to active segment
|
||||
useEffect(() => {
|
||||
if (!article || article.status !== 'PLAYING') return;
|
||||
if (!article || article.status !== 'PLAYING' || settings?.autoScroll === false) return;
|
||||
|
||||
const activeEl = document.getElementById(`segment-${article.currentSegmentIndex}`);
|
||||
if (activeEl && scrollRef.current) {
|
||||
activeEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}, [article?.currentSegmentIndex, article?.status]);
|
||||
}, [article?.currentSegmentIndex, article?.status, settings?.autoScroll]);
|
||||
|
||||
// Default settings fallback
|
||||
const s = settings || {
|
||||
isDarkMode: false,
|
||||
fontSize: 'lg',
|
||||
lineHeight: 'relaxed',
|
||||
fontFamily: 'serif',
|
||||
autoScroll: true
|
||||
};
|
||||
|
||||
const getFontClass = () => {
|
||||
switch(s.fontFamily) {
|
||||
case 'sans': return 'font-sans';
|
||||
case 'mono': return 'font-mono';
|
||||
default: return 'font-serif';
|
||||
}
|
||||
};
|
||||
|
||||
const getSizeClass = () => {
|
||||
switch(s.fontSize) {
|
||||
case 'sm': return 'text-sm';
|
||||
case 'base': return 'text-base';
|
||||
case 'xl': return 'text-xl';
|
||||
case '2xl': return 'text-2xl';
|
||||
default: return 'text-lg';
|
||||
}
|
||||
};
|
||||
|
||||
const getLeadingClass = () => {
|
||||
switch(s.lineHeight) {
|
||||
case 'normal': return 'leading-normal';
|
||||
case 'loose': return 'leading-loose';
|
||||
default: return 'leading-relaxed';
|
||||
}
|
||||
};
|
||||
|
||||
if (!article) {
|
||||
return (
|
||||
<div className="h-full flex flex-col items-center justify-center text-slate-400 p-12 border-2 border-dashed border-slate-200 rounded-2xl bg-slate-50/50">
|
||||
<div className="h-full flex flex-col items-center justify-center text-slate-400 dark:text-slate-600 p-12 border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl bg-slate-50/50 dark:bg-slate-900/50 transition-colors duration-300">
|
||||
<FileText className="w-12 h-12 mb-4 opacity-50" />
|
||||
<p className="text-lg font-medium">Select an article to read along</p>
|
||||
<p className="text-sm">The text will appear here while you listen.</p>
|
||||
@@ -31,22 +68,40 @@ export const ReaderView: React.FC<ReaderViewProps> = ({ article }) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden h-[calc(100vh-12rem)] flex flex-col">
|
||||
<div className="p-6 border-b border-slate-100 bg-white sticky top-0 z-10">
|
||||
<h2 className="text-2xl font-bold text-slate-900 leading-tight">
|
||||
{article.title}
|
||||
</h2>
|
||||
<a
|
||||
href={article.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-blue-600 hover:underline mt-2 inline-block"
|
||||
<div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden h-[calc(100vh-12rem)] flex flex-col transition-colors duration-300">
|
||||
<div className="p-6 border-b border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 sticky top-0 z-10 flex justify-between items-start">
|
||||
<div className="flex-1 pr-4">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 leading-tight">
|
||||
{article.title}
|
||||
</h2>
|
||||
<a
|
||||
href={article.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-blue-600 dark:text-blue-400 hover:underline mt-2 inline-block"
|
||||
>
|
||||
{new URL(article.url).hostname}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Auto Scroll Toggle */}
|
||||
<button
|
||||
onClick={onToggleAutoScroll}
|
||||
title={s.autoScroll ? "Disable auto-scroll" : "Enable auto-scroll"}
|
||||
className={`p-2 rounded-lg transition-all ${
|
||||
s.autoScroll
|
||||
? 'text-blue-600 bg-blue-50 dark:bg-blue-900/30 dark:text-blue-400'
|
||||
: 'text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800'
|
||||
}`}
|
||||
>
|
||||
{new URL(article.url).hostname}
|
||||
</a>
|
||||
<MousePointerClick className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div ref={scrollRef} className="flex-grow overflow-y-auto p-6 sm:p-8 space-y-6 custom-scrollbar bg-white">
|
||||
<div
|
||||
ref={scrollRef}
|
||||
className={`flex-grow overflow-y-auto p-6 sm:p-8 space-y-6 custom-scrollbar bg-white dark:bg-slate-900 transition-colors duration-300 ${getFontClass()} ${getSizeClass()}`}
|
||||
>
|
||||
{article.segments.length > 0 ? (
|
||||
article.segments.map((segment, idx) => {
|
||||
const isActive = article.currentSegmentIndex === idx;
|
||||
@@ -54,10 +109,10 @@ export const ReaderView: React.FC<ReaderViewProps> = ({ article }) => {
|
||||
<div
|
||||
key={segment.id}
|
||||
id={`segment-${idx}`}
|
||||
className={`text-lg leading-relaxed font-serif transition-colors duration-300 whitespace-pre-wrap ${
|
||||
className={`transition-all duration-300 whitespace-pre-wrap ${getLeadingClass()} ${
|
||||
isActive
|
||||
? 'text-slate-900 bg-blue-50 p-4 rounded-lg -mx-4 border-l-4 border-blue-500'
|
||||
: 'text-slate-700'
|
||||
? 'text-slate-900 dark:text-white bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg -mx-4 border-l-4 border-blue-500 shadow-sm'
|
||||
: 'text-slate-700 dark:text-slate-300'
|
||||
}`}
|
||||
>
|
||||
{segment.text}
|
||||
@@ -69,12 +124,12 @@ export const ReaderView: React.FC<ReaderViewProps> = ({ article }) => {
|
||||
<div className="space-y-4 animate-pulse">
|
||||
{[1,2,3,4].map(i => (
|
||||
<div key={i} className="space-y-2">
|
||||
<div className="h-4 bg-slate-100 rounded w-full"></div>
|
||||
<div className="h-4 bg-slate-100 rounded w-full"></div>
|
||||
<div className="h-4 bg-slate-100 rounded w-3/4"></div>
|
||||
<div className="h-4 bg-slate-100 dark:bg-slate-800 rounded w-full"></div>
|
||||
<div className="h-4 bg-slate-100 dark:bg-slate-800 rounded w-full"></div>
|
||||
<div className="h-4 bg-slate-100 dark:bg-slate-800 rounded w-3/4"></div>
|
||||
</div>
|
||||
))}
|
||||
<p className="text-slate-400 italic mt-4">Extracting article content...</p>
|
||||
<p className="text-slate-400 dark:text-slate-600 italic mt-4">Extracting article content...</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
|
||||
import React from 'react';
|
||||
import { VoiceName } from '../types';
|
||||
import { AVAILABLE_VOICES } from '../constants';
|
||||
@@ -12,12 +13,12 @@ interface VoiceSelectorProps {
|
||||
export const VoiceSelector: React.FC<VoiceSelectorProps> = ({ selectedVoice, onVoiceChange, disabled }) => {
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Mic className="w-4 h-4 text-slate-500" />
|
||||
<Mic className="w-4 h-4 text-slate-500 dark:text-slate-400" />
|
||||
<select
|
||||
value={selectedVoice}
|
||||
onChange={(e) => onVoiceChange(e.target.value as VoiceName)}
|
||||
disabled={disabled}
|
||||
className="bg-white border border-slate-300 text-slate-700 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
className="bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-200 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-300"
|
||||
>
|
||||
{AVAILABLE_VOICES.map((v) => (
|
||||
<option key={v.name} value={v.name}>
|
||||
@@ -27,4 +28,4 @@ export const VoiceSelector: React.FC<VoiceSelectorProps> = ({ selectedVoice, onV
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
8
types.ts
8
types.ts
@@ -45,3 +45,11 @@ export interface PlayerState {
|
||||
currentArticleId: string | null;
|
||||
selectedVoice: VoiceName;
|
||||
}
|
||||
|
||||
export interface ReaderSettings {
|
||||
isDarkMode: boolean;
|
||||
fontSize: 'sm' | 'base' | 'lg' | 'xl' | '2xl';
|
||||
lineHeight: 'normal' | 'relaxed' | 'loose';
|
||||
fontFamily: 'sans' | 'serif' | 'mono';
|
||||
autoScroll: boolean;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user