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.
56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
|
|
export enum VoiceName {
|
|
Puck = 'Puck',
|
|
Charon = 'Charon',
|
|
Kore = 'Kore',
|
|
Fenrir = 'Fenrir',
|
|
Zephyr = 'Zephyr',
|
|
}
|
|
|
|
export enum PlaybackStatus {
|
|
IDLE = 'IDLE',
|
|
LOADING_TEXT = 'LOADING_TEXT',
|
|
LOADING_AUDIO = 'LOADING_AUDIO',
|
|
READY = 'READY',
|
|
PLAYING = 'PLAYING',
|
|
PAUSED = 'PAUSED',
|
|
ERROR = 'ERROR',
|
|
COMPLETED = 'COMPLETED'
|
|
}
|
|
|
|
export interface AudioSegment {
|
|
id: string;
|
|
text: string;
|
|
audioUrl?: string; // Blob URL for this specific segment
|
|
isLoading: boolean;
|
|
hasError: boolean;
|
|
}
|
|
|
|
export interface Article {
|
|
id: string;
|
|
url: string;
|
|
title: string;
|
|
// We keep the full text for display/reference
|
|
text: string;
|
|
// We split content into segments for faster playback
|
|
segments: AudioSegment[];
|
|
currentSegmentIndex: number;
|
|
status: PlaybackStatus;
|
|
errorMessage?: string;
|
|
}
|
|
|
|
export interface PlayerState {
|
|
isPlaying: boolean;
|
|
playbackRate: number;
|
|
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;
|
|
}
|