From 0cb8dd269347a839064a5ddeae239a33d0b9d263 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Thu, 30 Nov 2023 00:27:50 +0100
Subject: [PATCH] Added state for metronome and fixed onEndReached for mobile

---
 front/components/Metronome.tsx           |  8 ++--
 front/components/Play/PartitionMagic.tsx | 52 ++++++++++++++----------
 2 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/front/components/Metronome.tsx b/front/components/Metronome.tsx
index f7115d2..9526bb3 100644
--- a/front/components/Metronome.tsx
+++ b/front/components/Metronome.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Slider, Text, View, IconButton, Icon } from 'native-base';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { Audio } from 'expo-av';
@@ -6,7 +6,7 @@ import { VolumeHigh, VolumeSlash } from 'iconsax-react-native';
 
 export const MetronomeControls = ({ paused = false, bpm }: { paused?: boolean; bpm: number }) => {
 	const audio = useRef<Audio.Sound | null>(null);
-	const enabled = useRef<boolean>(false);
+	const [enabled, setEnabled] = useState<boolean>(false);
 	const volume = useRef<number>(50);
 
 	useEffect(() => {
@@ -25,7 +25,7 @@ export const MetronomeControls = ({ paused = false, bpm }: { paused?: boolean; b
 	useEffect(() => {
 		if (paused) return;
 		const int = setInterval(() => {
-			if (!enabled.current) return;
+			if (!enabled) return;
 			if (!audio.current) return;
 			audio.current?.playAsync();
 		}, 60000 / bpm);
@@ -60,7 +60,7 @@ export const MetronomeControls = ({ paused = false, bpm }: { paused?: boolean; b
 							<VolumeHigh size={24} color="white" />
 						)
 					}
-					onPress={() => (enabled.current = !enabled.current)}
+					onPress={() => setEnabled(!enabled)}
 				/>
 				<Slider
 					maxWidth={'500px'}
diff --git a/front/components/Play/PartitionMagic.tsx b/front/components/Play/PartitionMagic.tsx
index 4e38b4a..7e86ebb 100644
--- a/front/components/Play/PartitionMagic.tsx
+++ b/front/components/Play/PartitionMagic.tsx
@@ -41,15 +41,16 @@ const getCursorToPlay = (
 
 const PartitionMagic = ({ songID, onEndReached, onError, onReady }: ParitionMagicProps) => {
 	const { data, isLoading, isError } = useQuery(API.getSongCursorInfos(songID));
-	const [currentCurIdx, setCurrentCurIdx] = React.useState(-1);
+	const currentCurIdx = React.useRef(-1);
+	const [endPartitionReached, setEndPartitionReached] = React.useState(false);
 	const [isPartitionSvgLoaded, setIsPartitionSvgLoaded] = React.useState(false);
 	const partitionOffset = useSharedValue(0);
 	const pianoCC = React.useContext(PianoCC);
-	const pianoSounds = React.useRef<Record<string, Audio.Sound>>();
+	const pianoSounds = React.useRef<Record<string, Audio.Sound> | null>(null);
 	const cursorPaddingVertical = 10;
 	const cursorPaddingHorizontal = 3;
 
-	const cursorDisplayIdx = currentCurIdx === -1 ? 0 : currentCurIdx;
+	const cursorDisplayIdx = currentCurIdx.current === -1 ? 0 : currentCurIdx.current;
 
 	const cursorBorderWidth = (data?.cursors[cursorDisplayIdx]?.width ?? 0) / 6;
 	const cursorWidth = (data?.cursors[cursorDisplayIdx]?.width ?? 0) + cursorPaddingHorizontal * 2;
@@ -57,6 +58,12 @@ const PartitionMagic = ({ songID, onEndReached, onError, onReady }: ParitionMagi
 	const cursorTop = (data?.cursors[cursorDisplayIdx]?.y ?? 0) - cursorPaddingVertical;
 	const cursorLeft = (data?.cursors[0]?.x ?? 0) - cursorPaddingHorizontal;
 
+	if (!endPartitionReached && currentCurIdx.current + 1 === data?.cursors.length) {
+		// weird contraption but the mobile don't want classic functions to be called
+		// with the withTiming function :(
+		setEndPartitionReached(true);
+	}
+
 	// React.useEffect(() => {
 	// 	if (!pianoSounds.current) {
 	// 		Promise.all(
@@ -92,37 +99,40 @@ const PartitionMagic = ({ songID, onEndReached, onError, onReady }: ParitionMagi
 		}
 	}, [isPartitionSvgLoaded, isLoading]);
 
+	React.useEffect(() => {
+		if (endPartitionReached) {
+			onEndReached();
+		}
+	}, [endPartitionReached]);
+
 	const transitionDuration = 200;
 
 	getCursorToPlay(
 		data?.cursors ?? [],
-		currentCurIdx,
+		currentCurIdx.current,
 		pianoCC.timestamp - transitionDuration,
 		(cursor, idx) => {
-			// cursor.notes.forEach(({ note, duration }) => {
-			// 	try {
-			// 		const sound = pianoSounds.current![note]!;
-			// 		sound.playAsync().catch(console.error);
-			// 		setTimeout(() => {
-			// 			sound.stopAsync();
-			// 		}, duration - 10);
-			// 	} catch (e) {
-			// 		console.log(e);
-			// 	}
-			// });
+			currentCurIdx.current = idx;
+			if (pianoSounds.current) {
+				cursor.notes.forEach(({ note, duration }) => {
+					try {
+						const sound = pianoSounds.current![note]!;
+						sound.playAsync().catch(console.error);
+						setTimeout(() => {
+							sound.stopAsync();
+						}, duration - 10);
+					} catch (e) {
+						console.log(e);
+					}
+				});
+			}
 			partitionOffset.value = withTiming(
 				-(cursor.x - data!.cursors[0]!.x) / partitionDims[0],
 				{
 					duration: transitionDuration,
 					easing: Easing.inOut(Easing.ease),
-				},
-				() => {
-					if (idx === data!.cursors.length - 1) {
-						onEndReached();
-					}
 				}
 			);
-			setCurrentCurIdx(idx);
 		}
 	);