Reading Progress

frontend/src/components/collections/CollectionReadingView.tsx

@@ -1,6 +1,8 @@
 'use client';
 
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { StoryWithCollectionContext } from '../../types/api';
+import { storyApi } from '../../lib/api';
 import Button from '../ui/Button';
 import Link from 'next/link';
 
@@ -16,6 +18,120 @@ export default function CollectionReadingView({
   onBackToCollection
 }: CollectionReadingViewProps) {
   const { story, collection } = data;
+  const [hasScrolledToPosition, setHasScrolledToPosition] = useState(false);
+  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;
+    return Math.floor(scrollRatio * textLength);
+  }, [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;
+    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);
+          scrollToCharacterPosition(story.readingPosition);
+        } else {
+          console.log('Collection view - no saved position, starting fresh tracking');
+          setHasScrolledToPosition(true);
+        }
+      }, 500);
+      
+      return () => clearTimeout(timeout);
+    }
+  }, [story, scrollToCharacterPosition, hasScrolledToPosition]);
+
+  // Track reading progress and save position
+  useEffect(() => {
+    const handleScroll = () => {
+      if (hasScrolledToPosition) {
+        const characterPosition = getCharacterPositionFromScroll();
+        console.log('Collection view - scroll detected, character position:', characterPosition);
+        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, debouncedSavePosition]);
 
   const handlePrevious = () => {
     if (collection.previousStoryId) {
@@ -180,6 +296,7 @@ export default function CollectionReadingView({
       {/* Story Content */}
       <div className="theme-card p-8">
         <div
+          ref={contentRef}
           className="prose prose-lg max-w-none theme-text"
           dangerouslySetInnerHTML={{ __html: story.contentHtml }}
         />