shardegger/storycove
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Display and correct calculation of reading progress of a story

Browse Source
This commit is contained in:
Stefan Hardegger
2025-10-31 08:07:12 +01:00
parent 0e1ed7c92e
commit 715fb4e48a
5 changed files with 47 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/app/stories/[id]/page.tsx
View File

@@ -95,20 +95,20 @@ export default function StoryReadingPage() {
// 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,
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;
// Convert to character position in the HTML content (ALWAYS use contentHtml for consistency)
const textLength = story.contentHtml?.length || 0;
return Math.floor(scrollRatio * textLength);
}, [story]);
@@ -116,7 +116,8 @@ export default function StoryReadingPage() {
const calculateReadingPercentage = useCallback((currentPosition: number): number => {
if (!story) return 0;
const totalLength = story.contentPlain?.length || story.contentHtml?.length || 0;
// ALWAYS use contentHtml for consistency with position calculation
const totalLength = story.contentHtml?.length || 0;
if (totalLength === 0) return 0;
return Math.round((currentPosition / totalLength) * 100);
@@ -126,7 +127,8 @@ export default function StoryReadingPage() {
const scrollToCharacterPosition = useCallback((position: number) => {
if (!contentRef.current || !story || hasScrolledToPosition) return;
const textLength = story.contentPlain?.length || story.contentHtml?.length || 0;
// ALWAYS use contentHtml for consistency with position calculation
const textLength = story.contentHtml?.length || 0;
if (textLength === 0 || position === 0) return;
const ratio = position / textLength;