+ {header}
+ {children}
+
+ ) : null,
+}));
+
+const envConfig = {};
+vi.mock('@/context/EnvContext', () => ({
+ useEnv: () => ({ envConfig, appService: { hasHaptics: false } }),
+}));
+
+const viewSettings: Record
+ {values.map((value) => {
+ const active = value === rate;
+ return (
+
+ );
+ })}
+
+ );
+};
+
+export default SpeedChips;
diff --git a/apps/readest-app/src/app/reader/components/tts/TTSBar.tsx b/apps/readest-app/src/app/reader/components/tts/TTSBar.tsx
deleted file mode 100644
index 2c0a8fa9..00000000
--- a/apps/readest-app/src/app/reader/components/tts/TTSBar.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import clsx from 'clsx';
-import {
- MdPlayArrow,
- MdOutlinePause,
- MdFastRewind,
- MdFastForward,
- MdSkipPrevious,
- MdSkipNext,
-} from 'react-icons/md';
-import { Insets } from '@/types/misc';
-import { useEnv } from '@/context/EnvContext';
-import { useReaderStore } from '@/store/readerStore';
-import { useResponsiveSize } from '@/hooks/useResponsiveSize';
-import { useTranslation } from '@/hooks/useTranslation';
-
-type TTSBarProps = {
- bookKey: string;
- isPlaying: boolean;
- onTogglePlay: () => void;
- onBackward: (byMark: boolean) => void;
- onForward: (byMark: boolean) => void;
- gridInsets: Insets;
-};
-
-const TTSBar = ({
- bookKey,
- isPlaying,
- onTogglePlay,
- onBackward,
- onForward,
- gridInsets,
-}: TTSBarProps) => {
- const _ = useTranslation();
- const { appService } = useEnv();
- const { hoveredBookKey, setHoveredBookKey } = useReaderStore();
- const iconSize32 = useResponsiveSize(30);
- const iconSize48 = useResponsiveSize(36);
-
- const isVisible = hoveredBookKey !== bookKey;
-
- return (
- !appService?.isMobile && setHoveredBookKey('')}
- onTouchStart={() => !appService?.isMobile && setHoveredBookKey('')}
- >
-
- );
-};
-
-export default TTSBar;
diff --git a/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx b/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx
index 59c3033a..63f904cf 100644
--- a/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx
+++ b/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx
@@ -1,26 +1,13 @@
import clsx from 'clsx';
-import React, { useState, useRef, useEffect } from 'react';
-import { useEnv } from '@/context/EnvContext';
+import React, { useEffect, useRef, useState } from 'react';
import { useThemeStore } from '@/store/themeStore';
import { useReaderStore } from '@/store/readerStore';
import { useTranslation } from '@/hooks/useTranslation';
-import { useResponsiveSize } from '@/hooks/useResponsiveSize';
import { useTTSControl } from '@/app/reader/hooks/useTTSControl';
-import { getPopupPosition, Position } from '@/utils/sel';
import { Insets } from '@/types/misc';
-import { Overlay } from '@/components/Overlay';
-import Popup from '@/components/Popup';
-import TTSPanel from './TTSPanel';
-import TTSIcon from './TTSIcon';
-import TTSBar from './TTSBar';
-
-const POPUP_WIDTH = 282;
-// The popup is fixed-height and non-scrolling: these must track the panel's
-// content or rows get clipped. The taller variant fits the scrubber row that
-// only timeline-capable (Edge) playback shows.
-const POPUP_HEIGHT = 160;
-const POPUP_HEIGHT_WITH_PROGRESS = 184;
-const POPUP_PADDING = 10;
+import { eventDispatcher } from '@/utils/event';
+import TTSMiniPlayer from './TTSMiniPlayer';
+import TTSPlayerSheet from './TTSPlayerSheet';
interface TTSControlProps {
bookKey: string;
@@ -29,37 +16,21 @@ interface TTSControlProps {
const TTSControl: React.FC
-
-
-
-
-
-
-
-
- )}
- {showPanel && panelPosition && trianglePosition && tts.ttsClientsInited && (
- !appService?.isMobile && setHoveredBookKey('')}
+ onTouchStart={() => !appService?.isMobile && setHoveredBookKey('')}
+ >
+
+ );
+};
+
+export default TTSMiniPlayer;
diff --git a/apps/readest-app/src/app/reader/components/tts/TTSPanel.tsx b/apps/readest-app/src/app/reader/components/tts/TTSPanel.tsx
deleted file mode 100644
index 1ad1577a..00000000
--- a/apps/readest-app/src/app/reader/components/tts/TTSPanel.tsx
+++ /dev/null
@@ -1,571 +0,0 @@
-import clsx from 'clsx';
-import { useState, ChangeEvent, useEffect, useRef, useCallback } from 'react';
-import { MdPlayCircle, MdPauseCircle, MdFastRewind, MdFastForward, MdAlarm } from 'react-icons/md';
-import { TbChevronCompactDown, TbChevronCompactUp } from 'react-icons/tb';
-import { RiVoiceAiFill } from 'react-icons/ri';
-import { MdCheck } from 'react-icons/md';
-import { TTSVoicesGroup } from '@/services/tts';
-import { useEnv } from '@/context/EnvContext';
-import { useReaderStore } from '@/store/readerStore';
-import { TranslationFunc, useTranslation } from '@/hooks/useTranslation';
-import { useSettingsStore } from '@/store/settingsStore';
-import { useDefaultIconSize, useResponsiveSize } from '@/hooks/useResponsiveSize';
-import { getLanguageName } from '@/utils/lang';
-import { formatPlaybackTime } from '@/utils/time';
-import { eventDispatcher } from '@/utils/event';
-
-type TTSPlaybackInfo = {
- position: number;
- duration: number;
- measuredFraction: number;
-};
-
-type TTSPanelProps = {
- bookKey: string;
- ttsLang: string;
- isPlaying: boolean;
- timeoutOption: number;
- timeoutTimestamp: number;
- onTogglePlay: () => void;
- onBackward: () => void;
- onForward: () => void;
- onSetRate: (rate: number) => void;
- onGetVoices: (lang: string) => Promise
+ {hasTimeline && (
+ // E-ink has no legible grey tints: delineate the track with a crisp
+ // 1px hairline, drop the buffer fill, and paint progress solid.
+
+ )}
+
+
+
+ {
+ if (e.key === 'Enter' || e.key === ' ') onExpand();
+ }}
+ aria-label={_('Open Read Aloud player')}
+ className='flex min-w-0 flex-1 cursor-pointer items-center gap-2'
+ >
+ {book?.coverImageUrl ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ) : null}
+
+ {timerLabel && (
+ {timerLabel}
+ )}
+
+ {book?.title ?? ''}
+ {(sectionLabel || timeLabel) && (
+
+ {[sectionLabel, timeLabel].filter(Boolean).join(' · ')}
+
+ )}
+
+
+
+
+
+
+
+
- {elapsedLabel}
- {/* Plain native range, matching the footer's Jump to Location slider:
- thin track, small thumb, visually unmistakable for the chunky rate
- slider above. */}
-
- {remainingLabel}
-
- );
-};
-
-const getTTSTimeoutOptions = (_: TranslationFunc) => {
- return [
- {
- label: _('No Timeout'),
- value: 0,
- },
- {
- label: _('{{value}} minute', { value: 1 }),
- value: 60,
- },
- {
- label: _('{{value}} minutes', { value: 3 }),
- value: 180,
- },
- {
- label: _('{{value}} minutes', { value: 5 }),
- value: 300,
- },
- {
- label: _('{{value}} minutes', { value: 10 }),
- value: 600,
- },
- {
- label: _('{{value}} minutes', { value: 20 }),
- value: 1200,
- },
- {
- label: _('{{value}} minutes', { value: 30 }),
- value: 1800,
- },
- {
- label: _('{{value}} minutes', { value: 45 }),
- value: 2700,
- },
- {
- label: _('{{value}} hour', { value: 1 }),
- value: 3600,
- },
- {
- label: _('{{value}} hours', { value: 2 }),
- value: 7200,
- },
- {
- label: _('{{value}} hours', { value: 3 }),
- value: 10800,
- },
- {
- label: _('{{value}} hours', { value: 4 }),
- value: 14400,
- },
- {
- label: _('{{value}} hours', { value: 6 }),
- value: 21600,
- },
- {
- label: _('{{value}} hours', { value: 8 }),
- value: 28800,
- },
- ];
-};
-
-const getCountdownTime = (timeout: number) => {
- const now = Date.now();
- if (timeout > now) {
- const remainingTime = Math.floor((timeout - now) / 1000);
- const minutes = Math.floor(remainingTime / 3600) * 60 + Math.floor((remainingTime % 3600) / 60);
- const seconds = remainingTime % 60;
- return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
- }
- return '';
-};
-
-const TTSPanel = ({
- bookKey,
- ttsLang,
- isPlaying,
- timeoutOption,
- timeoutTimestamp,
- onTogglePlay,
- onBackward,
- onForward,
- onSetRate,
- onGetVoices,
- onSetVoice,
- onGetVoiceId,
- onSelectTimeout,
- onToogleTTSBar,
- onSeek,
- onGetPlaybackInfo,
- hasTimeline,
-}: TTSPanelProps) => {
- const _ = useTranslation();
- const { envConfig } = useEnv();
- const { getViewSettings, setViewSettings } = useReaderStore();
- const { settings, setSettings, saveSettings } = useSettingsStore();
- const viewSettings = getViewSettings(bookKey);
-
- const [voiceGroups, setVoiceGroups] = useState
-
- );
-};
-
-export default TTSPanel;
diff --git a/apps/readest-app/src/app/reader/components/tts/TTSPlayerSheet.tsx b/apps/readest-app/src/app/reader/components/tts/TTSPlayerSheet.tsx
new file mode 100644
index 00000000..14af68a3
--- /dev/null
+++ b/apps/readest-app/src/app/reader/components/tts/TTSPlayerSheet.tsx
@@ -0,0 +1,394 @@
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
+import {
+ MdAlarm,
+ MdArrowBackIosNew,
+ MdCheck,
+ MdFastForward,
+ MdFastRewind,
+ MdOutlinePause,
+ MdPlayArrow,
+ MdSkipNext,
+ MdSkipPrevious,
+} from 'react-icons/md';
+import { RiVoiceAiFill } from 'react-icons/ri';
+import { TTSVoicesGroup } from '@/services/tts';
+import { useEnv } from '@/context/EnvContext';
+import { useReaderStore } from '@/store/readerStore';
+import { useBookProgress } from '@/store/readerProgressStore';
+import { useBookDataStore } from '@/store/bookDataStore';
+import { useSettingsStore } from '@/store/settingsStore';
+import { TranslationFunc, useTranslation } from '@/hooks/useTranslation';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
+import { getLanguageName } from '@/utils/lang';
+import { formatPlaybackTime } from '@/utils/time';
+import Dialog from '@/components/Dialog';
+import { TTSPlaybackInfo } from './usePlaybackInfo';
+import { useCountdownLabel } from './useCountdownLabel';
+import TTSScrubber from './TTSScrubber';
+import SpeedChips, { formatRate } from './SpeedChips';
+
+type SheetView = 'main' | 'speed' | 'voice' | 'timer';
+
+const getTTSTimeoutOptions = (_: TranslationFunc) => {
+ return [
+ { label: _('No Timeout'), value: 0 },
+ { label: _('{{value}} minute', { value: 1 }), value: 60 },
+ { label: _('{{value}} minutes', { value: 3 }), value: 180 },
+ { label: _('{{value}} minutes', { value: 5 }), value: 300 },
+ { label: _('{{value}} minutes', { value: 10 }), value: 600 },
+ { label: _('{{value}} minutes', { value: 20 }), value: 1200 },
+ { label: _('{{value}} minutes', { value: 30 }), value: 1800 },
+ { label: _('{{value}} minutes', { value: 45 }), value: 2700 },
+ { label: _('{{value}} hour', { value: 1 }), value: 3600 },
+ { label: _('{{value}} hours', { value: 2 }), value: 7200 },
+ { label: _('{{value}} hours', { value: 3 }), value: 10800 },
+ { label: _('{{value}} hours', { value: 4 }), value: 14400 },
+ { label: _('{{value}} hours', { value: 6 }), value: 21600 },
+ { label: _('{{value}} hours', { value: 8 }), value: 28800 },
+ ];
+};
+
+type TTSPlayerSheetProps = {
+ bookKey: string;
+ isOpen: boolean;
+ ttsLang: string;
+ isPlaying: boolean;
+ hasTimeline: boolean;
+ timeoutOption: number;
+ timeoutTimestamp: number;
+ chapterRemainingSec: number | null;
+ onClose: () => void;
+ onTogglePlay: () => void;
+ onBackward: (byMark: boolean) => void;
+ onForward: (byMark: boolean) => void;
+ onSetRate: (rate: number) => void;
+ onGetVoices: (lang: string) => Promise
-
-
- {hasTimeline && (
-
- |
- |
- |
- |
- |
- |
- |
-
-
- {_('Slow')}
-
- 1.0
- 1.5
- 2.0
-
- {_('Fast')}
-
-
-
-
-
-
-
-
-
-
- -
- {timeoutOptions.map((option, index) => (
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-
- onSelectTimeout(bookKey, option.value)}
- >
- - - {timeoutOption === option.value &&-
} - - {option.label} -
- ))}
-
-
-
- -
- {voiceGroups.map((voiceGroup, index) => {
- return (
-
- !voice.disabled && handleSelectVoice(voice.id, voice.lang)}
- >
- - - {selectedVoice === voice.id &&-
} - - - {_(voice.name)} - -
- ))}
-
-
- );
- })}
-
-
-
- {_('{{engine}}: {{count}} voices', {
- engine: _(voiceGroup.name),
- count: voiceGroup.voices.length,
- })}
-
-
- {voiceGroup.voices.map((voice, voiceIndex) => (
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-
-
-
-
+
+
+ );
+
+ return (
+
+ );
+};
+
+export default TTSPlayerSheet;
diff --git a/apps/readest-app/src/app/reader/components/tts/TTSScrubber.tsx b/apps/readest-app/src/app/reader/components/tts/TTSScrubber.tsx
new file mode 100644
index 00000000..852e0eb2
--- /dev/null
+++ b/apps/readest-app/src/app/reader/components/tts/TTSScrubber.tsx
@@ -0,0 +1,100 @@
+import clsx from 'clsx';
+import { ChangeEvent, useRef, useState } from 'react';
+import { useTranslation } from '@/hooks/useTranslation';
+import { formatPlaybackTime } from '@/utils/time';
+import { eventDispatcher } from '@/utils/event';
+import { TTSPlaybackInfo, usePlaybackInfo } from './usePlaybackInfo';
+
+type TTSScrubberProps = {
+ bookKey: string;
+ isEink: boolean;
+ onSeek: (seconds: number) => Promise
+
+ {view === 'speed'
+ ? _('Speed')
+ : view === 'voice'
+ ? _('Select Voice')
+ : _('Set Timeout')}
+
+
+
+ {elapsedLabel}
+
+ {remainingLabel}
+
+ );
+};
+
+export default TTSScrubber;
diff --git a/apps/readest-app/src/app/reader/components/tts/useCountdownLabel.ts b/apps/readest-app/src/app/reader/components/tts/useCountdownLabel.ts
new file mode 100644
index 00000000..0041431c
--- /dev/null
+++ b/apps/readest-app/src/app/reader/components/tts/useCountdownLabel.ts
@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+import { formatCountdown } from '@/utils/time';
+
+// Live M:SS label for an armed sleep timer; empty string when no timer.
+export const useCountdownLabel = (timeoutTimestamp: number) => {
+ const [label, setLabel] = useState('');
+ useEffect(() => {
+ if (!timeoutTimestamp) {
+ setLabel('');
+ return;
+ }
+ const tick = () =>
+ setLabel(timeoutTimestamp > Date.now() ? formatCountdown(timeoutTimestamp - Date.now()) : '');
+ tick();
+ const interval = setInterval(tick, 1000);
+ return () => clearInterval(interval);
+ }, [timeoutTimestamp]);
+ return label;
+};
diff --git a/apps/readest-app/src/app/reader/components/tts/usePlaybackInfo.ts b/apps/readest-app/src/app/reader/components/tts/usePlaybackInfo.ts
new file mode 100644
index 00000000..1d7a9105
--- /dev/null
+++ b/apps/readest-app/src/app/reader/components/tts/usePlaybackInfo.ts
@@ -0,0 +1,102 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { eventDispatcher } from '@/utils/event';
+
+export type TTSPlaybackInfo = {
+ position: number;
+ duration: number;
+ measuredFraction: number;
+};
+
+// Suppress poll updates briefly after a seek so the optimistic thumb never
+// snaps back while the cold-seek fetch completes.
+const SEEK_SUPPRESS_MS = 2000;
+// Small backward drifts come from estimate refinement, not playback — hold the
+// displayed position monotonic; larger jumps are deliberate (seek, chapter).
+const MONOTONIC_SLACK_SEC = 3;
+
+type UsePlaybackInfoOptions = {
+ bookKey: string;
+ isEink: boolean;
+ onGetPlaybackInfo: () => TTSPlaybackInfo | null;
+};
+
+export const usePlaybackInfo = ({ bookKey, isEink, onGetPlaybackInfo }: UsePlaybackInfoOptions) => {
+ const [info, setInfo] = useState