feat: add reading position tracking with visual progress indicator

- Install position-indicator library for scroll position tracking
- Create useReadingPosition hook for position management
- Add ReadingProgressIndicator component with animated progress bar
- Integrate reading progress in ContentPanel for text content only
- Add CSS styles for fixed progress indicator with shimmer animation
- Track reading completion at 90% threshold
- Exclude video content from position tracking
This commit is contained in:
Gigi
2025-10-13 21:01:44 +02:00
parent 1066c43d6c
commit 96ce12b952
6 changed files with 232 additions and 2 deletions

View File

@@ -0,0 +1,31 @@
import React from 'react'
interface ReadingProgressIndicatorProps {
progress: number // 0 to 100
isComplete?: boolean
showPercentage?: boolean
className?: string
}
export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> = ({
progress,
isComplete = false,
showPercentage = true,
className = ''
}) => {
return (
<div className={`reading-progress-indicator ${className}`}>
<div className="reading-progress-bar">
<div
className={`reading-progress-fill ${isComplete ? 'complete' : ''}`}
style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
/>
</div>
{showPercentage && (
<div className="reading-progress-text">
{isComplete ? '✓ Complete' : `${progress}%`}
</div>
)}
</div>
)
}