front practice listener and scorometer sending timestamp

front/components/Play/PartitionMagic.tsx

@@ -10,6 +10,7 @@ import LoadingComponent from '../Loading';
 import { SplendidGrandPiano } from 'smplr';
 
 export type ParitionMagicProps = {
+	playType: 'practice' | 'normal' | null
 	timestamp: number;
 	songID: number;
 	shouldPlay: boolean;
@@ -44,6 +45,7 @@ const getCursorToPlay = (
 const transitionDuration = 50;
 
 const PartitionMagic = ({
+	playType,
 	timestamp,
 	songID,
 	shouldPlay,
@@ -79,6 +81,11 @@ const PartitionMagic = ({
 	}
 
 	React.useEffect(() => {
+		// In practice mode, no sound is played so just act as the piano is loaded
+		if (playType == 'practice') {
+			setIsPianoLoaded(true);
+			return;
+		}
 		if (Platform.OS === 'web' && !piano.current) {
 			const audio = new AudioContext();
 			piano.current = new SplendidGrandPiano(audio);

front/views/PlayView.tsx

@@ -171,6 +171,11 @@ const PlayView = ({ songId }: PlayViewProps) => {
 					setEndResult({ songId: song.data!.id, ...data });
 					return;
 				}
+				if (data.type == 'step') {
+					setTime(data.timestamp)
+					//set idx += 1
+					return
+				}
 				console.log(data);
 
 				const points = data.info.score;
@@ -239,7 +244,9 @@ const PlayView = ({ songId }: PlayViewProps) => {
 	useEffect(() => {
 		ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE).catch(() => {});
 		const interval = setInterval(() => {
-			setTime(() => getElapsedTime()); // Countdown
+			if (playType != 'practice') {
+				setTime(() => getElapsedTime());
+			} // Countdown
 		}, 200);
 
 		return () => {
@@ -247,7 +254,7 @@ const PlayView = ({ songId }: PlayViewProps) => {
 			stopwatch.stop();
 			clearInterval(interval);
 		};
-	}, []);
+	}, [playType]);
 
 	useEffect(() => {
 		// Song.data is updated on navigation.navigate (do not know why)
@@ -386,6 +393,7 @@ const PlayView = ({ songId }: PlayViewProps) => {
 					}}
 				>
 					<PartitionMagic
+						playType={playType}
 						shouldPlay={shouldPlay}
 						timestamp={time}
 						songID={song.data.id}