feat: Enhance article segment navigation

Implement segment selection in ReaderView for user-driven playback control. This change allows users to click on specific segments within an article to jump to and play that segment directly.

The Gemini service's HTML parsing has also been simplified by removing redundant selectors and focusing on essential tag removal for more efficient text extraction.
This commit is contained in:
Anthony
2025-11-19 20:28:14 +08:00
parent 8e902fd9c1
commit dadebf8cd0
3 changed files with 35 additions and 47 deletions

14
App.tsx
View File

@@ -198,6 +198,18 @@ export default function App() {
});
}, [playerState.currentArticleId]);
const handleSegmentSelect = useCallback((articleId: string, index: number) => {
setPlayerState(prev => ({
...prev,
currentArticleId: articleId,
isPlaying: true
}));
updateArticle(articleId, {
currentSegmentIndex: index,
status: PlaybackStatus.PLAYING
});
}, []);
// -- Keyboard Shortcuts --
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
@@ -478,6 +490,7 @@ export default function App() {
article={viewingArticle}
settings={settings}
onToggleAutoScroll={() => setSettings(s => ({...s, autoScroll: !s.autoScroll}))}
onSegmentSelect={(index) => viewingArticle && handleSegmentSelect(viewingArticle.id, index)}
/>
</div>
@@ -490,6 +503,7 @@ export default function App() {
article={viewingArticle}
settings={settings}
onToggleAutoScroll={() => setSettings(s => ({...s, autoScroll: !s.autoScroll}))}
onSegmentSelect={(index) => viewingArticle && handleSegmentSelect(viewingArticle.id, index)}
/>
</div>
</div>