Anthony/News-reader-pro
1
0
Fork 0
mirror of https://github.com/Tony0410/News-reader-pro.git synced 2026-05-24 21:31:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Segment article text for improved playback

Browse Source 
Splits article content into smaller audio segments. This allows for more granular control over playback, faster processing, and improved user experience by enabling auto-scrolling to the currently read segment.

Updates `types.ts` to include `AudioSegment` interface and modify `Article` to hold `segments`, `currentSegmentIndex`, and `audioUrl` per segment.

Introduces `segmentText` utility in `services/textUtils.ts` for robust text segmentation logic.

Modifies `App.tsx` to utilize the new segmentation approach for fetching and processing audio.

Enhances `components/ReaderView.tsx` to display and auto-scroll through segmented text, highlighting the current segment during playback.
This commit is contained in:
Anthony
2025-11-19 19:57:43 +08:00
parent 0775104b69
commit 78f1e0e93c
4 changed files with 345 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
components/ReaderView.tsx
View File

@@ -1,4 +1,5 @@
import React from 'react';
import React, { useEffect, useRef } from 'react';
import { Article } from '../types';
import { FileText } from 'lucide-react';
@@ -7,6 +8,18 @@ interface ReaderViewProps {
}
export const ReaderView: React.FC<ReaderViewProps> = ({ article }) => {
const scrollRef = useRef<HTMLDivElement>(null);
// Auto-scroll to active segment
useEffect(() => {
if (!article || article.status !== 'PLAYING') return;
const activeEl = document.getElementById(`segment-${article.currentSegmentIndex}`);
if (activeEl && scrollRef.current) {
activeEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}, [article?.currentSegmentIndex, article?.status]);
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">
@@ -17,11 +30,6 @@ export const ReaderView: React.FC<ReaderViewProps> = ({ article }) => {
);
}
// Split text by newlines to create paragraphs
const paragraphs = article.text
? article.text.split('\n').filter(p => p.trim().length > 0)
: [];
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">
@@ -38,18 +46,34 @@ export const ReaderView: React.FC<ReaderViewProps> = ({ article }) => {
</a>
</div>
<div className="flex-grow overflow-y-auto p-6 sm:p-8 space-y-6 custom-scrollbar bg-white">
{paragraphs.length > 0 ? (
paragraphs.map((paragraph, idx) => (
<p key={idx} className="text-lg text-slate-700 leading-relaxed font-serif">
{paragraph}
</p>
))
<div ref={scrollRef} className="flex-grow overflow-y-auto p-6 sm:p-8 space-y-6 custom-scrollbar bg-white">
{article.segments.length > 0 ? (
article.segments.map((segment, idx) => {
const isActive = article.currentSegmentIndex === idx;
return (
<p
key={segment.id}
id={`segment-${idx}`}
className={`text-lg leading-relaxed font-serif transition-colors duration-300 ${
isActive
? 'text-slate-900 bg-blue-50 p-2 rounded-lg -mx-2 border-l-4 border-blue-500'
: 'text-slate-700'
}`}
>
{segment.text}
</p>
);
})
) : (
// Loading State skeleton
<div className="space-y-4 animate-pulse">
<div className="h-4 bg-slate-100 rounded w-3/4"></div>
<div className="h-4 bg-slate-100 rounded w-full"></div>
<div className="h-4 bg-slate-100 rounded w-5/6"></div>
{[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>
))}
<p className="text-slate-400 italic mt-4">Extracting article content...</p>
</div>
)}