diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx index 78728397..28e08ad2 100644 --- a/src/components/ContentPanel.tsx +++ b/src/components/ContentPanel.tsx @@ -224,7 +224,7 @@ const ContentPanel: React.FC = ({ articleIdentifier ) - if (savedPosition && savedPosition.position > 0.05 && savedPosition.position < 0.95) { + if (savedPosition && savedPosition.position > 0.05 && savedPosition.position < 1) { console.log('🎯 [ContentPanel] Restoring position:', Math.round(savedPosition.position * 100) + '%') // Wait for content to be fully rendered before scrolling setTimeout(() => { @@ -240,7 +240,11 @@ const ContentPanel: React.FC = ({ console.log('✅ [ContentPanel] Restored to position:', Math.round(savedPosition.position * 100) + '%', 'scrollTop:', scrollTop) }, 500) // Give content time to render } else if (savedPosition) { - console.log('⏭️ [ContentPanel] Position out of range (5-95%):', Math.round(savedPosition.position * 100) + '%') + if (savedPosition.position === 1) { + console.log('✅ [ContentPanel] Article completed (100%), starting from top') + } else { + console.log('⏭️ [ContentPanel] Position too early (<5%):', Math.round(savedPosition.position * 100) + '%') + } } } catch (error) { console.error('❌ [ContentPanel] Failed to load reading position:', error) diff --git a/src/hooks/useReadingPosition.ts b/src/hooks/useReadingPosition.ts index b9301b85..5530d020 100644 --- a/src/hooks/useReadingPosition.ts +++ b/src/hooks/useReadingPosition.ts @@ -29,11 +29,15 @@ export const useReadingPosition = ({ const scheduleSave = useCallback((currentPosition: number) => { if (!syncEnabled || !onSave) return - // Don't save if position is too low (< 5%) or too high (> 95%) - if (currentPosition < 0.05 || currentPosition > 0.95) return + // Don't save if position is too low (< 5%) + if (currentPosition < 0.05) return // Don't save if position hasn't changed significantly (less than 1%) - if (Math.abs(currentPosition - lastSavedPosition.current) < 0.01) return + // But always save if we've reached 100% (completion) + const hasSignificantChange = Math.abs(currentPosition - lastSavedPosition.current) >= 0.01 + const hasReachedCompletion = currentPosition === 1 && lastSavedPosition.current < 1 + + if (!hasSignificantChange && !hasReachedCompletion) return // Clear existing timer if (saveTimerRef.current) { @@ -57,8 +61,8 @@ export const useReadingPosition = ({ saveTimerRef.current = null } - // Save if position is meaningful - if (position >= 0.05 && position <= 0.95) { + // Save if position is meaningful (>= 5%) + if (position >= 0.05) { lastSavedPosition.current = position onSave(position) } @@ -77,8 +81,13 @@ export const useReadingPosition = ({ const documentHeight = document.documentElement.scrollHeight // Calculate position based on how much of the content has been scrolled through - const scrollProgress = Math.min(scrollTop / (documentHeight - windowHeight), 1) - const clampedProgress = Math.max(0, Math.min(1, scrollProgress)) + // Add a small threshold (5px) to account for rounding and make it easier to reach 100% + const maxScroll = documentHeight - windowHeight + const scrollProgress = maxScroll > 0 ? scrollTop / maxScroll : 0 + + // If we're within 5px of the bottom, consider it 100% + const isAtBottom = scrollTop + windowHeight >= documentHeight - 5 + const clampedProgress = isAtBottom ? 1 : Math.max(0, Math.min(1, scrollProgress)) setPosition(clampedProgress) onPositionChange?.(clampedProgress)