gitea_admin/news-reader-actions-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance article segment navigation

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

20
components/ReaderView.tsx
View File

@@ -7,9 +7,10 @@ interface ReaderViewProps {
article?: Article | null;
settings?: ReaderSettings;
onToggleAutoScroll?: () => void;
onSegmentSelect?: (index: number) => void;
}
export const ReaderView: React.FC<ReaderViewProps> = ({ article, settings, onToggleAutoScroll }) => {
export const ReaderView: React.FC<ReaderViewProps> = ({ article, settings, onToggleAutoScroll, onSegmentSelect }) => {
const scrollRef = useRef<HTMLDivElement>(null);
// Auto-scroll to active segment
@@ -100,7 +101,7 @@ export const ReaderView: React.FC<ReaderViewProps> = ({ article, settings, onTog
<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()}`}
className={`flex-grow overflow-y-auto p-6 sm:p-8 space-y-1 custom-scrollbar bg-white dark:bg-slate-900 transition-colors duration-300 ${getFontClass()} ${getSizeClass()}`}
>
{article.segments.length > 0 ? (
article.segments.map((segment, idx) => {
@@ -109,11 +110,16 @@ export const ReaderView: React.FC<ReaderViewProps> = ({ article, settings, onTog
<div
key={segment.id}
id={`segment-${idx}`}
className={`transition-all duration-300 whitespace-pre-wrap ${getLeadingClass()} ${
isActive
? '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'
}`}
onClick={() => onSegmentSelect?.(idx)}
title="Click to play from here"
className={`
transition-all duration-200 whitespace-pre-wrap rounded-xl p-3 sm:p-4 -mx-2 sm:-mx-4 border-l-4 mb-2
${getLeadingClass()}
${isActive
? 'text-slate-900 dark:text-white bg-blue-50 dark:bg-blue-900/20 border-blue-500 shadow-sm'
: 'text-slate-700 dark:text-slate-300 border-transparent hover:bg-slate-100 dark:hover:bg-slate-800/50 cursor-pointer hover:border-slate-300 dark:hover:border-slate-600'
}
`}
>
{segment.text}
</div>