203 lines
8.1 KiB
TypeScript
203 lines
8.1 KiB
TypeScript
|
|
import React, { useEffect, useRef } from 'react';
|
|
import { Article, ReaderSettings } from '../types';
|
|
import { FileText, MousePointerClick, Share2, Quote } from 'lucide-react';
|
|
import { getDisplayUrl } from '../utils/url';
|
|
|
|
interface ReaderViewProps {
|
|
article?: Article | null;
|
|
settings?: ReaderSettings;
|
|
onToggleAutoScroll?: () => void;
|
|
onSegmentSelect?: (index: number) => void;
|
|
}
|
|
|
|
export const ReaderView: React.FC<ReaderViewProps> = ({ article, settings, onToggleAutoScroll, onSegmentSelect }) => {
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Auto-scroll to active segment
|
|
useEffect(() => {
|
|
if (!article || article.status !== 'PLAYING' || settings?.autoScroll === false) return;
|
|
|
|
const activeEl = document.getElementById(`segment-${article.currentSegmentIndex}`);
|
|
if (activeEl && scrollRef.current) {
|
|
activeEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
}
|
|
}, [article?.currentSegmentIndex, article?.status, settings?.autoScroll]);
|
|
|
|
// Default settings fallback
|
|
const s = settings || {
|
|
isDarkMode: false,
|
|
fontSize: 'lg',
|
|
lineHeight: 'relaxed',
|
|
fontFamily: 'serif',
|
|
autoScroll: true,
|
|
readingTone: 'clean',
|
|
pageWidth: 'standard',
|
|
zenMode: false
|
|
};
|
|
|
|
const getFontClass = () => {
|
|
switch(s.fontFamily) {
|
|
case 'sans': return 'font-sans';
|
|
case 'mono': return 'font-mono';
|
|
default: return 'font-serif';
|
|
}
|
|
};
|
|
|
|
const getSizeClass = () => {
|
|
switch(s.fontSize) {
|
|
case 'sm': return 'text-sm';
|
|
case 'base': return 'text-base';
|
|
case 'xl': return 'text-xl';
|
|
case '2xl': return 'text-2xl';
|
|
default: return 'text-lg';
|
|
}
|
|
};
|
|
|
|
const getLeadingClass = () => {
|
|
switch(s.lineHeight) {
|
|
case 'normal': return 'leading-normal';
|
|
case 'loose': return 'leading-loose';
|
|
default: return 'leading-relaxed';
|
|
}
|
|
};
|
|
|
|
const getToneClasses = () => {
|
|
switch (s.readingTone) {
|
|
case 'sepia':
|
|
return 'bg-amber-50/60 dark:bg-amber-900/30 border border-amber-100 dark:border-amber-800';
|
|
case 'night':
|
|
return 'bg-slate-900 text-slate-100 border border-slate-800';
|
|
default:
|
|
return 'bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800';
|
|
}
|
|
};
|
|
|
|
const getWidthClass = () => {
|
|
switch (s.pageWidth) {
|
|
case 'cozy':
|
|
return 'max-w-2xl mx-auto';
|
|
case 'wide':
|
|
return 'max-w-6xl mx-auto';
|
|
default:
|
|
return 'max-w-4xl mx-auto';
|
|
}
|
|
};
|
|
|
|
const handleShareMoment = (text: string, index: number) => {
|
|
const base = typeof window !== 'undefined' ? `${window.location.origin}${window.location.pathname}` : '';
|
|
const shareUrl = `${base}?segment=${index}`;
|
|
const payload = `"${text.trim()}"\n${shareUrl}`;
|
|
if (navigator?.clipboard?.writeText) {
|
|
navigator.clipboard.writeText(payload).catch(() => console.warn('Unable to copy share link'));
|
|
}
|
|
};
|
|
|
|
if (!article) {
|
|
return (
|
|
<div className="h-full flex flex-col items-center justify-center text-slate-400 dark:text-slate-600 p-12 border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl bg-slate-50/50 dark:bg-slate-900/50 transition-colors duration-300">
|
|
<FileText className="w-12 h-12 mb-4 opacity-50" />
|
|
<p className="text-lg font-medium">Select an article to read along</p>
|
|
<p className="text-sm">The text will appear here while you listen.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const displayUrl = getDisplayUrl(article.url);
|
|
|
|
return (
|
|
<div className={`${getToneClasses()} ${getWidthClass()} rounded-2xl shadow-sm overflow-hidden h-[calc(100vh-12rem)] flex flex-col transition-colors duration-300`}>
|
|
{!s.zenMode && (
|
|
<div className="p-6 border-b border-slate-100 dark:border-slate-800 bg-transparent sticky top-0 z-10 flex justify-between items-start">
|
|
<div className="flex-1 pr-4">
|
|
<h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 leading-tight">
|
|
{article.title}
|
|
</h2>
|
|
<a
|
|
href={displayUrl.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-sm text-blue-600 dark:text-blue-400 hover:underline mt-2 inline-block"
|
|
>
|
|
{displayUrl.hostname}
|
|
</a>
|
|
</div>
|
|
|
|
{/* Auto Scroll Toggle */}
|
|
<button
|
|
onClick={onToggleAutoScroll}
|
|
title={s.autoScroll ? "Disable auto-scroll" : "Enable auto-scroll"}
|
|
className={`p-2 rounded-lg transition-all ${
|
|
s.autoScroll
|
|
? 'text-blue-600 bg-blue-50 dark:bg-blue-900/30 dark:text-blue-400'
|
|
: 'text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800'
|
|
}`}
|
|
>
|
|
<MousePointerClick className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
ref={scrollRef}
|
|
className={`flex-grow overflow-y-auto p-6 sm:p-8 space-y-3 custom-scrollbar transition-colors duration-300 ${getFontClass()} ${getSizeClass()} ${getLeadingClass()} ${s.zenMode ? 'pt-10' : ''}`}
|
|
>
|
|
{article.segments.length > 0 ? (
|
|
article.segments.map((segment, idx) => {
|
|
const isActive = article.currentSegmentIndex === idx;
|
|
const isBuffering = isActive && article.status === 'PLAYING' && !segment.audioUrl;
|
|
|
|
return (
|
|
<div
|
|
key={segment.id}
|
|
id={`segment-${idx}`}
|
|
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
|
|
${isActive
|
|
? `bg-blue-50 dark:bg-blue-900/20 border-blue-500 shadow-sm ${isBuffering ? 'animate-pulse opacity-70' : 'text-slate-900 dark:text-white'}`
|
|
: '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'
|
|
}
|
|
`}
|
|
>
|
|
<div className="flex justify-between items-start gap-3">
|
|
<p className="flex-1 whitespace-pre-wrap">{segment.text}</p>
|
|
<div className="flex flex-col gap-2 text-xs text-slate-500 dark:text-slate-400">
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); handleShareMoment(segment.text, idx); }}
|
|
className="flex items-center gap-1 px-2 py-1 rounded-full bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
|
|
title="Copy a shareable moment"
|
|
>
|
|
<Share2 className="w-3 h-3" /> Share
|
|
</button>
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); if (navigator?.clipboard?.writeText) navigator.clipboard.writeText(segment.text); }}
|
|
className="flex items-center gap-1 px-2 py-1 rounded-full bg-blue-50 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-800 transition-colors"
|
|
title="Copy this quote"
|
|
>
|
|
<Quote className="w-3 h-3" /> Clip
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
) : (
|
|
// Loading State skeleton
|
|
<div className="space-y-4 animate-pulse">
|
|
{[1,2,3,4].map(i => (
|
|
<div key={i} className="space-y-2">
|
|
<div className="h-4 bg-slate-100 dark:bg-slate-800 rounded w-full"></div>
|
|
<div className="h-4 bg-slate-100 dark:bg-slate-800 rounded w-full"></div>
|
|
<div className="h-4 bg-slate-100 dark:bg-slate-800 rounded w-3/4"></div>
|
|
</div>
|
|
))}
|
|
<p className="text-slate-400 dark:text-slate-600 italic mt-4">Extracting article content...</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|