mirror of
https://github.com/dergigi/boris.git
synced 2025-12-19 07:34:28 +01:00
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:
31
src/components/ReadingProgressIndicator.tsx
Normal file
31
src/components/ReadingProgressIndicator.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user