Training update, most of the styles in the old tips were standardized, before all the styles were hardcoded into the tip, the new tips may still have some hardcoded styles but the vast majority only uses standard html or custom ones that are picked up in FormatTip to attribute styles
This commit is contained in:
Carlos Mesquita
@@ -1,19 +1,32 @@
|
||||
import React, {useState, useEffect, useRef, useCallback} from "react";
|
||||
import {animated} from "@react-spring/web";
|
||||
import {FaRegCirclePlay, FaRegCircleStop} from "react-icons/fa6";
|
||||
import HighlightContent from "../HighlightContent";
|
||||
import {ITrainingTip, SegmentRef, TimelineEvent} from "./TrainingInterfaces";
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { animated } from '@react-spring/web';
|
||||
import { FaRegCirclePlay, FaRegCircleStop } from "react-icons/fa6";
|
||||
import HighlightContent from '../HighlightContent';
|
||||
import { ITrainingTip, SegmentRef, TimelineEvent, HighlightConfig, InsertHtmlConfig } from './TrainingInterfaces';
|
||||
import Tip from './Tip';
|
||||
|
||||
interface HtmlState {
|
||||
question: string;
|
||||
additional: string;
|
||||
walkthrough: string;
|
||||
}
|
||||
|
||||
const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
|
||||
const [isAutoPlaying, setIsAutoPlaying] = useState<boolean>(false);
|
||||
const [currentTime, setCurrentTime] = useState<number>(0);
|
||||
const [walkthroughHtml, setWalkthroughHtml] = useState<string>("");
|
||||
const [highlightedPhrases, setHighlightedPhrases] = useState<string[]>([]);
|
||||
const [currentHighlightConfigs, setCurrentHighlightConfigs] = useState<HighlightConfig[]>([]);
|
||||
const [isPlaying, setIsPlaying] = useState<boolean>(false);
|
||||
const [currentSegmentIndex, setCurrentSegmentIndex] = useState<number>(0);
|
||||
const timelineRef = useRef<TimelineEvent[]>([]);
|
||||
const animationRef = useRef<number | null>(null);
|
||||
const segmentsRef = useRef<SegmentRef[]>([]);
|
||||
|
||||
const [questionHtml, setQuestionHtml] = useState(tip.exercise?.question || '');
|
||||
const [additionalHtml, setAdditionalHtml] = useState(tip.exercise?.additional || '');
|
||||
const [walkthroughHtml, setWalkthroughHtml] = useState<string>('');
|
||||
const [htmlStates, setHtmlStates] = useState<HtmlState[]>([]);
|
||||
const lastProcessedInsertTime = useRef<number>(-1);
|
||||
|
||||
const toggleAutoPlay = useCallback(() => {
|
||||
setIsAutoPlaying((prev) => {
|
||||
if (!prev && currentTime === getMaxTime()) {
|
||||
@@ -21,7 +34,6 @@ const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
|
||||
}
|
||||
return !prev;
|
||||
});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [currentTime]);
|
||||
|
||||
const handleAnimationComplete = useCallback(() => {
|
||||
@@ -33,23 +45,24 @@ const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
|
||||
}, []);
|
||||
|
||||
const getMaxTime = (): number => {
|
||||
return (
|
||||
tip.exercise?.segments.reduce((sum, segment) => sum + segment.wordDelay * segment.html.split(/\s+/).length + segment.holdDelay, 0) ?? 0
|
||||
);
|
||||
return tip.exercise?.segments.reduce((sum, segment) =>
|
||||
sum + segment.wordDelay * segment.html.split(/\s+/).length + segment.holdDelay, 0
|
||||
) ?? 0;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const timeline: TimelineEvent[] = [];
|
||||
let currentTimePosition = 0;
|
||||
segmentsRef.current = [];
|
||||
const newHtmlStates: HtmlState[] = [];
|
||||
|
||||
tip.exercise?.segments.forEach((segment, index) => {
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(segment.html, "text/html");
|
||||
const doc = parser.parseFromString(segment.html, 'text/html');
|
||||
const words: string[] = [];
|
||||
const walkTree = (node: Node) => {
|
||||
if (node.nodeType === Node.TEXT_NODE) {
|
||||
words.push(...(node.textContent?.split(/\s+/).filter((word) => word.length > 0) || []));
|
||||
words.push(...(node.textContent?.split(/\s+/).filter(word => word.length > 0) || []));
|
||||
} else if (node.nodeType === Node.ELEMENT_NODE) {
|
||||
Array.from(node.childNodes).forEach(walkTree);
|
||||
}
|
||||
@@ -62,69 +75,116 @@ const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
|
||||
...segment,
|
||||
words: words,
|
||||
startTime: currentTimePosition,
|
||||
endTime: currentTimePosition + textDuration,
|
||||
endTime: currentTimePosition + textDuration
|
||||
});
|
||||
|
||||
timeline.push({
|
||||
type: "text",
|
||||
type: 'text',
|
||||
start: currentTimePosition,
|
||||
end: currentTimePosition + textDuration,
|
||||
segmentIndex: index,
|
||||
segmentIndex: index
|
||||
});
|
||||
|
||||
currentTimePosition += textDuration;
|
||||
|
||||
timeline.push({
|
||||
type: "highlight",
|
||||
type: 'highlight',
|
||||
start: currentTimePosition,
|
||||
end: currentTimePosition + segment.holdDelay,
|
||||
content: segment.highlight,
|
||||
segmentIndex: index,
|
||||
segmentIndex: index
|
||||
});
|
||||
|
||||
if (segment.insertHTML && segment.insertHTML.length > 0) {
|
||||
newHtmlStates.push({
|
||||
question: questionHtml,
|
||||
additional: additionalHtml,
|
||||
walkthrough: walkthroughHtml
|
||||
});
|
||||
timeline.push({
|
||||
type: 'insert',
|
||||
start: currentTimePosition,
|
||||
end: currentTimePosition + segment.holdDelay,
|
||||
segmentIndex: index,
|
||||
content: segment.insertHTML
|
||||
});
|
||||
}
|
||||
|
||||
currentTimePosition += segment.holdDelay;
|
||||
});
|
||||
|
||||
for (let i = 0; i < timeline.length; i++) {
|
||||
if (timeline[i].type === 'insert') {
|
||||
const nextInsertIndex = timeline.findIndex((event, index) => index > i && event.type === 'insert');
|
||||
if (nextInsertIndex !== -1) {
|
||||
timeline[i].end = timeline[nextInsertIndex].start;
|
||||
} else {
|
||||
timeline[i].end = currentTimePosition;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
timelineRef.current = timeline;
|
||||
}, [tip.exercise?.segments]);
|
||||
setHtmlStates(newHtmlStates);
|
||||
}, [tip.exercise?.segments, questionHtml, additionalHtml, walkthroughHtml]);
|
||||
|
||||
const updateText = useCallback(() => {
|
||||
const currentEvent = timelineRef.current.find((event) => currentTime >= event.start && currentTime < event.end);
|
||||
const currentEvents = timelineRef.current.filter(
|
||||
event => currentTime >= event.start && currentTime <= event.end
|
||||
);
|
||||
|
||||
if (currentEvent) {
|
||||
if (currentEvent.type === "text") {
|
||||
if (currentTime < lastProcessedInsertTime.current) {
|
||||
const lastInsertEvent = timelineRef.current
|
||||
.filter(event => event.type === 'insert' && event.start <= currentTime)
|
||||
.pop();
|
||||
|
||||
if (lastInsertEvent) {
|
||||
const stateIndex = timelineRef.current.indexOf(lastInsertEvent);
|
||||
if (stateIndex >= 0 && stateIndex < htmlStates.length) {
|
||||
const previousState = htmlStates[stateIndex];
|
||||
setQuestionHtml(previousState.question);
|
||||
setAdditionalHtml(previousState.additional);
|
||||
setWalkthroughHtml(previousState.walkthrough);
|
||||
}
|
||||
} else {
|
||||
// If no previous insert event, revert to initial state
|
||||
setQuestionHtml(tip.exercise?.question || '');
|
||||
setAdditionalHtml(tip.exercise?.additional || '');
|
||||
setWalkthroughHtml('');
|
||||
}
|
||||
}
|
||||
|
||||
currentEvents.forEach(currentEvent => {
|
||||
if (currentEvent.type === 'text') {
|
||||
const segment = segmentsRef.current[currentEvent.segmentIndex];
|
||||
const elapsedTime = currentTime - currentEvent.start;
|
||||
const wordsToShow = Math.min(Math.floor(elapsedTime / segment.wordDelay), segment.words.length);
|
||||
|
||||
const previousSegmentsHtml = segmentsRef.current
|
||||
.slice(0, currentEvent.segmentIndex)
|
||||
.map((seg) => seg.html)
|
||||
.join("");
|
||||
.map(seg => seg.html)
|
||||
.join('');
|
||||
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(segment.html, "text/html");
|
||||
const doc = parser.parseFromString(segment.html, 'text/html');
|
||||
let wordCount = 0;
|
||||
const walkTree = (node: Node, action: (node: Node) => void): boolean => {
|
||||
if (node.nodeType === Node.TEXT_NODE && node.textContent) {
|
||||
const words = node.textContent.split(/(\s+)/).filter((word) => word.length > 0);
|
||||
if (wordCount + words.filter((w) => !/\s+/.test(w)).length <= wordsToShow) {
|
||||
const words = node.textContent.split(/(\s+)/).filter(word => word.length > 0);
|
||||
if (wordCount + words.filter(w => !/\s+/.test(w)).length <= wordsToShow) {
|
||||
action(node.cloneNode(true));
|
||||
wordCount += words.filter((w) => !/\s+/.test(w)).length;
|
||||
wordCount += words.filter(w => !/\s+/.test(w)).length;
|
||||
} else {
|
||||
const remainingWords = wordsToShow - wordCount;
|
||||
const newTextContent = words.reduce(
|
||||
(acc, word) => {
|
||||
if (!/\s+/.test(word) && acc.nonSpaceWords < remainingWords) {
|
||||
acc.text += word;
|
||||
acc.nonSpaceWords++;
|
||||
} else if (/\s+/.test(word) || acc.nonSpaceWords < remainingWords) {
|
||||
acc.text += word;
|
||||
}
|
||||
return acc;
|
||||
},
|
||||
{text: "", nonSpaceWords: 0},
|
||||
).text;
|
||||
const newTextContent = words.reduce((acc, word) => {
|
||||
if (!/\s+/.test(word) && acc.nonSpaceWords < remainingWords) {
|
||||
acc.text += word;
|
||||
acc.nonSpaceWords++;
|
||||
} else if (/\s+/.test(word) || acc.nonSpaceWords < remainingWords) {
|
||||
acc.text += word;
|
||||
}
|
||||
return acc;
|
||||
}, { text: '', nonSpaceWords: 0 }).text;
|
||||
const newNode = node.cloneNode(false);
|
||||
newNode.textContent = newTextContent;
|
||||
action(newNode);
|
||||
@@ -133,38 +193,79 @@ const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
|
||||
} else if (node.nodeType === Node.ELEMENT_NODE) {
|
||||
const clone = node.cloneNode(false);
|
||||
action(clone);
|
||||
Array.from(node.childNodes).some((child) => {
|
||||
return walkTree(child, (childNode) => (clone as Node).appendChild(childNode));
|
||||
Array.from(node.childNodes).some(child => {
|
||||
return walkTree(child, childNode => (clone as Node).appendChild(childNode));
|
||||
});
|
||||
}
|
||||
return wordCount >= wordsToShow;
|
||||
};
|
||||
const fragment = document.createDocumentFragment();
|
||||
walkTree(doc.body, (node) => fragment.appendChild(node));
|
||||
walkTree(doc.body, node => fragment.appendChild(node));
|
||||
|
||||
const serializer = new XMLSerializer();
|
||||
const currentSegmentHtml = Array.from(fragment.childNodes)
|
||||
.map((node) => serializer.serializeToString(node))
|
||||
.join("");
|
||||
.map(node => serializer.serializeToString(node))
|
||||
.join('');
|
||||
const newHtml = previousSegmentsHtml + currentSegmentHtml;
|
||||
|
||||
setWalkthroughHtml(newHtml);
|
||||
setHighlightedPhrases([]);
|
||||
} else if (currentEvent.type === "highlight") {
|
||||
setCurrentSegmentIndex(currentEvent.segmentIndex);
|
||||
setCurrentHighlightConfigs([]);
|
||||
} else if (currentEvent.type === 'highlight') {
|
||||
const newHtml = segmentsRef.current
|
||||
.slice(0, currentEvent.segmentIndex + 1)
|
||||
.map((seg) => seg.html)
|
||||
.join("");
|
||||
.map(seg => seg.html)
|
||||
.join('');
|
||||
setWalkthroughHtml(newHtml);
|
||||
setHighlightedPhrases(currentEvent.content || []);
|
||||
setCurrentSegmentIndex(currentEvent.segmentIndex);
|
||||
setCurrentHighlightConfigs(currentEvent.content as HighlightConfig[] || []);
|
||||
} else if (currentEvent.type === 'insert') {
|
||||
const insertConfigs = currentEvent.content as InsertHtmlConfig[];
|
||||
insertConfigs.forEach(config => {
|
||||
switch (config.target) {
|
||||
case 'question':
|
||||
setQuestionHtml(prevHtml => insertHtmlContent(prevHtml, config));
|
||||
break;
|
||||
case 'additional':
|
||||
setAdditionalHtml(prevHtml => insertHtmlContent(prevHtml, config));
|
||||
break;
|
||||
case 'segment':
|
||||
setWalkthroughHtml(prevHtml => insertHtmlContent(prevHtml, config));
|
||||
break;
|
||||
}
|
||||
});
|
||||
lastProcessedInsertTime.current = currentTime;
|
||||
}
|
||||
}
|
||||
}, [currentTime]);
|
||||
});
|
||||
}, [currentTime, htmlStates, tip.exercise?.question, tip.exercise?.additional]);
|
||||
|
||||
useEffect(() => {
|
||||
updateText();
|
||||
}, [currentTime, updateText]);
|
||||
|
||||
const insertHtmlContent = (prevHtml: string, config: InsertHtmlConfig): string => {
|
||||
const tempDiv = document.createElement('div');
|
||||
tempDiv.innerHTML = prevHtml;
|
||||
|
||||
const targetElement = tempDiv.querySelector(`#${config.targetId}`);
|
||||
if (targetElement) {
|
||||
switch (config.position) {
|
||||
case 'append':
|
||||
targetElement.insertAdjacentHTML('beforeend', config.html);
|
||||
break;
|
||||
case 'prepend':
|
||||
targetElement.insertAdjacentHTML('afterbegin', config.html);
|
||||
break;
|
||||
case 'replace':
|
||||
targetElement.innerHTML = config.html;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return tempDiv.innerHTML;
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (isAutoPlaying) {
|
||||
const lastEvent = timelineRef.current[timelineRef.current.length - 1];
|
||||
@@ -219,62 +320,81 @@ const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
|
||||
}
|
||||
};
|
||||
|
||||
if (tip.standalone || !tip.exercise) {
|
||||
return (
|
||||
<div className="container mx-auto">
|
||||
<h1 className="text-xl font-bold text-red-600">The exercise for this tip is not available yet!</h1>
|
||||
<div className="tip-container bg-blue-100 p-4 rounded-lg shadow-md mb-4 mt-10">
|
||||
<h3 className="text-xl font-semibold text-blue-800 mb-2">{tip.tipCategory}</h3>
|
||||
<div className="text-gray-700" dangerouslySetInnerHTML={{__html: tip.tipHtml}} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto">
|
||||
<div className="tip-container bg-blue-100 p-4 rounded-lg shadow-md mb-4">
|
||||
<h3 className="text-xl font-semibold text-blue-800 mb-2">{tip.tipCategory}</h3>
|
||||
<div className="text-gray-700" dangerouslySetInnerHTML={{__html: tip.tipHtml}} />
|
||||
</div>
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div className="flex flex-row items-center space-x-4 py-4">
|
||||
<button
|
||||
onClick={toggleAutoPlay}
|
||||
className="p-2 bg-blue-500 text-white rounded-full transition-colors duration-200 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
|
||||
aria-label={isAutoPlaying ? "Pause" : "Play"}>
|
||||
{isAutoPlaying ? <FaRegCircleStop className="w-6 h-6" /> : <FaRegCirclePlay className="w-6 h-6" />}
|
||||
</button>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max={timelineRef.current.length > 0 ? timelineRef.current[timelineRef.current.length - 1].end : 0}
|
||||
value={currentTime}
|
||||
onChange={handleSliderChange}
|
||||
onMouseDown={handleSliderMouseDown}
|
||||
onMouseUp={handleSliderMouseUp}
|
||||
onTouchStart={handleSliderMouseDown}
|
||||
onTouchEnd={handleSliderMouseUp}
|
||||
className="flex-grow"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
|
||||
<div className="flex-1 bg-white p-6 rounded-lg shadow">
|
||||
{/*<h2 className="text-xl font-bold mb-4">Question</h2>*/}
|
||||
<div className="mb-4" dangerouslySetInnerHTML={{__html: tip.exercise.question}} />
|
||||
<HighlightContent html={tip.exercise.highlightable} highlightPhrases={highlightedPhrases} />
|
||||
<div className="container mx-auto py-6">
|
||||
<Tip category={tip.tipCategory} html={tip.tipHtml} />
|
||||
{!tip.standalone && (
|
||||
<div className='flex flex-col space-y-4'>
|
||||
<div className='flex flex-row items-center space-x-4 py-4'>
|
||||
<button
|
||||
onClick={toggleAutoPlay}
|
||||
className="p-2 bg-blue-500 text-white rounded-full transition-colors duration-200 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
|
||||
aria-label={isAutoPlaying ? 'Pause' : 'Play'}
|
||||
>
|
||||
{isAutoPlaying ? (
|
||||
<FaRegCircleStop className="w-6 h-6" />
|
||||
) : (
|
||||
<FaRegCirclePlay className="w-6 h-6" />
|
||||
)}
|
||||
</button>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max={timelineRef.current.length > 0 ? timelineRef.current[timelineRef.current.length - 1].end : 0}
|
||||
value={currentTime}
|
||||
onChange={handleSliderChange}
|
||||
onMouseDown={handleSliderMouseDown}
|
||||
onMouseUp={handleSliderMouseUp}
|
||||
onTouchStart={handleSliderMouseDown}
|
||||
onTouchEnd={handleSliderMouseUp}
|
||||
className='flex-grow'
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="bg-gray-50 rounded-lg shadow">
|
||||
<div className="p-6 space-y-4">
|
||||
<animated.div dangerouslySetInnerHTML={{__html: walkthroughHtml}} />
|
||||
<div className='flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 w-full'>
|
||||
<div className='flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 w-full'>
|
||||
<div className='flex-1 bg-white p-6 rounded-lg shadow space-y-6'>
|
||||
<div className="container mx-auto px-4">
|
||||
<div id="question-container" className="border p-6 rounded-lg shadow-md">
|
||||
<HighlightContent
|
||||
html={questionHtml}
|
||||
highlightConfigs={currentHighlightConfigs}
|
||||
contentType="question"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{tip.exercise?.additional && (<div className="container mx-auto px-4">
|
||||
<div id="additional-container" className="border p-6 rounded-lg shadow-md">
|
||||
<HighlightContent
|
||||
html={additionalHtml}
|
||||
highlightConfigs={currentHighlightConfigs}
|
||||
contentType="additional"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='flex-1'>
|
||||
<div className='bg-gray-50 rounded-lg shadow'>
|
||||
<div id="segment-container" className='p-6 space-y-4'>
|
||||
<animated.div>
|
||||
<HighlightContent
|
||||
html={walkthroughHtml}
|
||||
highlightConfigs={currentHighlightConfigs.filter(config =>
|
||||
config.targets.includes('segment') || config.targets.includes('all')
|
||||
)}
|
||||
contentType="segment"
|
||||
currentSegmentIndex={currentSegmentIndex}
|
||||
/>
|
||||
</animated.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExerciseWalkthrough;
|
||||
export default ExerciseWalkthrough;
|
||||
Reference in New Issue
Block a user