357 lines
12 KiB
TypeScript
357 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useRef, useCallback } from 'react';
|
|
import { StoryWithCollectionContext } from '../../types/api';
|
|
import { storyApi, getImageUrl } from '../../lib/api';
|
|
import Button from '../ui/Button';
|
|
import TagDisplay from '../tags/TagDisplay';
|
|
import Link from 'next/link';
|
|
|
|
interface CollectionReadingViewProps {
|
|
data: StoryWithCollectionContext;
|
|
onNavigate: (storyId: string) => void;
|
|
onBackToCollection: () => void;
|
|
}
|
|
|
|
export default function CollectionReadingView({
|
|
data,
|
|
onNavigate,
|
|
onBackToCollection
|
|
}: CollectionReadingViewProps) {
|
|
const { story, collection } = data;
|
|
const [hasScrolledToPosition, setHasScrolledToPosition] = useState(false);
|
|
const [readingPercentage, setReadingPercentage] = useState(0);
|
|
const contentRef = useRef<HTMLDivElement>(null);
|
|
const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
// Convert scroll position to approximate character position in the content
|
|
const getCharacterPositionFromScroll = useCallback((): number => {
|
|
if (!contentRef.current || !story) return 0;
|
|
|
|
const content = contentRef.current;
|
|
const scrolled = window.scrollY;
|
|
const contentTop = content.offsetTop;
|
|
const contentHeight = content.scrollHeight;
|
|
const windowHeight = window.innerHeight;
|
|
|
|
// Calculate how far through the content we are (0-1)
|
|
const scrollRatio = Math.min(1, Math.max(0,
|
|
(scrolled - contentTop + windowHeight * 0.3) / contentHeight
|
|
));
|
|
|
|
// Convert to character position in the plain text content
|
|
const textLength = story.contentPlain?.length || story.contentHtml?.length || 0;
|
|
return Math.floor(scrollRatio * textLength);
|
|
}, [story]);
|
|
|
|
// Calculate reading percentage from character position
|
|
const calculateReadingPercentage = useCallback((currentPosition: number): number => {
|
|
if (!story) return 0;
|
|
|
|
const totalLength = story.contentPlain?.length || story.contentHtml?.length || 0;
|
|
if (totalLength === 0) return 0;
|
|
|
|
return Math.round((currentPosition / totalLength) * 100);
|
|
}, [story]);
|
|
|
|
// Convert character position back to scroll position for auto-scroll
|
|
const scrollToCharacterPosition = useCallback((position: number) => {
|
|
if (!contentRef.current || !story || hasScrolledToPosition) return;
|
|
|
|
const textLength = story.contentPlain?.length || story.contentHtml?.length || 0;
|
|
if (textLength === 0 || position === 0) return;
|
|
|
|
const ratio = position / textLength;
|
|
const content = contentRef.current;
|
|
const contentTop = content.offsetTop;
|
|
const contentHeight = content.scrollHeight;
|
|
const windowHeight = window.innerHeight;
|
|
|
|
// Calculate target scroll position
|
|
const targetScroll = contentTop + (ratio * contentHeight) - (windowHeight * 0.3);
|
|
|
|
// Smooth scroll to position
|
|
window.scrollTo({
|
|
top: Math.max(0, targetScroll),
|
|
behavior: 'smooth'
|
|
});
|
|
|
|
setHasScrolledToPosition(true);
|
|
}, [story, hasScrolledToPosition]);
|
|
|
|
// Debounced function to save reading position
|
|
const saveReadingPosition = useCallback(async (position: number) => {
|
|
if (!story || position === story.readingPosition) {
|
|
console.log('Collection view - skipping save - no story or position unchanged:', { story: !!story, position, current: story?.readingPosition });
|
|
return;
|
|
}
|
|
|
|
console.log('Collection view - saving reading position:', position, 'for story:', story.id);
|
|
try {
|
|
await storyApi.updateReadingProgress(story.id, position);
|
|
console.log('Collection view - reading position saved successfully');
|
|
} catch (error) {
|
|
console.error('Collection view - failed to save reading position:', error);
|
|
}
|
|
}, [story]);
|
|
|
|
// Debounced version of saveReadingPosition
|
|
const debouncedSavePosition = useCallback((position: number) => {
|
|
if (saveTimeoutRef.current) {
|
|
clearTimeout(saveTimeoutRef.current);
|
|
}
|
|
|
|
saveTimeoutRef.current = setTimeout(() => {
|
|
saveReadingPosition(position);
|
|
}, 2000);
|
|
}, [saveReadingPosition]);
|
|
|
|
// Auto-scroll to saved reading position when story content is loaded
|
|
useEffect(() => {
|
|
if (story && !hasScrolledToPosition) {
|
|
const timeout = setTimeout(() => {
|
|
console.log('Collection view - initializing reading position tracking, saved position:', story.readingPosition);
|
|
if (story.readingPosition && story.readingPosition > 0) {
|
|
console.log('Collection view - auto-scrolling to saved position:', story.readingPosition);
|
|
const initialPercentage = calculateReadingPercentage(story.readingPosition);
|
|
setReadingPercentage(initialPercentage);
|
|
scrollToCharacterPosition(story.readingPosition);
|
|
} else {
|
|
console.log('Collection view - no saved position, starting fresh tracking');
|
|
setReadingPercentage(0);
|
|
setHasScrolledToPosition(true);
|
|
}
|
|
}, 500);
|
|
|
|
return () => clearTimeout(timeout);
|
|
}
|
|
}, [story, scrollToCharacterPosition, calculateReadingPercentage, hasScrolledToPosition]);
|
|
|
|
// Track reading progress and save position
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
if (hasScrolledToPosition) {
|
|
const characterPosition = getCharacterPositionFromScroll();
|
|
const percentage = calculateReadingPercentage(characterPosition);
|
|
console.log('Collection view - scroll detected, character position:', characterPosition, 'percentage:', percentage);
|
|
setReadingPercentage(percentage);
|
|
debouncedSavePosition(characterPosition);
|
|
} else {
|
|
console.log('Collection view - scroll detected but not ready for tracking yet');
|
|
}
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
if (saveTimeoutRef.current) {
|
|
clearTimeout(saveTimeoutRef.current);
|
|
}
|
|
};
|
|
}, [hasScrolledToPosition, getCharacterPositionFromScroll, calculateReadingPercentage, debouncedSavePosition]);
|
|
|
|
const handlePrevious = () => {
|
|
if (collection.previousStoryId) {
|
|
onNavigate(collection.previousStoryId);
|
|
}
|
|
};
|
|
|
|
const handleNext = () => {
|
|
if (collection.nextStoryId) {
|
|
onNavigate(collection.nextStoryId);
|
|
}
|
|
};
|
|
|
|
const renderRatingStars = (rating?: number) => {
|
|
if (!rating) return null;
|
|
|
|
return (
|
|
<div className="flex items-center">
|
|
{[1, 2, 3, 4, 5].map((star) => (
|
|
<span
|
|
key={star}
|
|
className={`text-sm ${
|
|
star <= rating ? 'text-yellow-400' : 'text-gray-300'
|
|
}`}
|
|
>
|
|
★
|
|
</span>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto">
|
|
{/* Collection Context Header */}
|
|
<div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={onBackToCollection}
|
|
className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
|
|
title="Back to Collection"
|
|
>
|
|
← Back
|
|
</button>
|
|
<div>
|
|
<h2 className="font-semibold text-blue-900 dark:text-blue-100">
|
|
Reading from: {collection.name}
|
|
</h2>
|
|
<p className="text-sm text-blue-700 dark:text-blue-300">
|
|
Story {collection.currentPosition} of {collection.totalStories}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Progress Bar */}
|
|
<div className="flex items-center gap-4">
|
|
{/* Reading percentage indicator */}
|
|
<div className="text-sm text-blue-700 dark:text-blue-300 font-mono bg-blue-100 dark:bg-blue-900 px-2 py-1 rounded">
|
|
{readingPercentage}%
|
|
</div>
|
|
|
|
<div className="w-32 bg-blue-200 dark:bg-blue-800 rounded-full h-2">
|
|
<div
|
|
className="bg-blue-600 dark:bg-blue-400 h-2 rounded-full transition-all duration-300"
|
|
style={{
|
|
width: `${(collection.currentPosition / collection.totalStories) * 100}%`
|
|
}}
|
|
/>
|
|
</div>
|
|
<span className="text-sm text-blue-700 dark:text-blue-300 font-mono">
|
|
{collection.currentPosition}/{collection.totalStories}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Story Header */}
|
|
<div className="theme-card p-6 mb-6">
|
|
<div className="flex flex-col md:flex-row gap-6">
|
|
{/* Story Cover */}
|
|
{story.coverPath && (
|
|
<div className="flex-shrink-0">
|
|
<img
|
|
src={getImageUrl(story.coverPath)}
|
|
alt={`${story.title} cover`}
|
|
className="w-32 h-40 object-cover rounded-lg mx-auto md:mx-0"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Story Info */}
|
|
<div className="flex-1">
|
|
<h1 className="text-3xl font-bold theme-header mb-2">
|
|
{story.title}
|
|
</h1>
|
|
|
|
<div className="flex flex-wrap items-center gap-4 mb-4 text-sm theme-text opacity-70">
|
|
<Link
|
|
href={`/stories/${story.id}`}
|
|
className="hover:underline"
|
|
>
|
|
by {story.authorName}
|
|
</Link>
|
|
<span>{story.wordCount?.toLocaleString()} words</span>
|
|
{story.rating && (
|
|
<div className="flex items-center gap-1">
|
|
{renderRatingStars(story.rating)}
|
|
</div>
|
|
)}
|
|
{story.seriesName && (
|
|
<span>
|
|
{story.seriesName}
|
|
{story.volume && ` #${story.volume}`}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{story.summary && (
|
|
<p className="theme-text mb-4 italic">
|
|
{story.summary}
|
|
</p>
|
|
)}
|
|
|
|
{/* Tags */}
|
|
{story.tags && story.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-2">
|
|
{story.tags.map((tag) => (
|
|
<TagDisplay
|
|
key={tag.id}
|
|
tag={tag}
|
|
size="sm"
|
|
clickable={false}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation Controls */}
|
|
<div className="flex justify-between items-center mb-6">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={handlePrevious}
|
|
disabled={!collection.previousStoryId}
|
|
className="flex items-center gap-2"
|
|
>
|
|
← Previous Story
|
|
</Button>
|
|
|
|
<div className="text-sm theme-text opacity-70">
|
|
Story {collection.currentPosition} of {collection.totalStories}
|
|
</div>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
onClick={handleNext}
|
|
disabled={!collection.nextStoryId}
|
|
className="flex items-center gap-2"
|
|
>
|
|
Next Story →
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Story Content */}
|
|
<div className="theme-card p-8">
|
|
<div
|
|
ref={contentRef}
|
|
className="prose prose-lg max-w-none theme-text"
|
|
dangerouslySetInnerHTML={{ __html: story.contentHtml }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Bottom Navigation */}
|
|
<div className="flex justify-between items-center mt-8 p-4 theme-card">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={handlePrevious}
|
|
disabled={!collection.previousStoryId}
|
|
className="flex items-center gap-2"
|
|
>
|
|
← Previous
|
|
</Button>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
onClick={onBackToCollection}
|
|
className="flex items-center gap-2"
|
|
>
|
|
Back to Collection
|
|
</Button>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
onClick={handleNext}
|
|
disabled={!collection.nextStoryId}
|
|
className="flex items-center gap-2"
|
|
>
|
|
Next →
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |