From f5136ae59b7ff8f6b59b0b2c33f9bb8a22a09c2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Sat, 13 Jan 2024 17:55:37 +0100
Subject: [PATCH] fixed issues with bad state reset and play pause gestion

---
 front/components/Play/PartitionMagic.tsx     | 37 ++++++++++++--------
 front/components/Play/PlayViewControlBar.tsx |  8 +++++
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/front/components/Play/PartitionMagic.tsx b/front/components/Play/PartitionMagic.tsx
index 899b1b8..f21138f 100644
--- a/front/components/Play/PartitionMagic.tsx
+++ b/front/components/Play/PartitionMagic.tsx
@@ -38,6 +38,18 @@ const getCursorToPlay = (
 	}
 };
 
+const startResumePauseWatch = (stopwatch: ReturnType<typeof useStopwatch>, shouldPlay: boolean) => {
+	if (shouldPlay) {
+		if (stopwatch.isPaused()) {
+			stopwatch.resume();
+			return;
+		}
+		stopwatch.start();
+		return;
+	}
+	stopwatch.pause();
+};
+
 const transitionDuration = 200;
 
 const PartitionMagic = ({ songID }: ParitionMagicProps) => {
@@ -83,7 +95,13 @@ const PartitionMagic = ({ songID }: ParitionMagicProps) => {
 	React.useEffect(() => {
 		if (isPartitionSvgLoaded && !isLoading && (melodySound.current?._loaded || isPianoLoaded)) {
 			setPartitionState('ready');
+		} else if (partitionState !== 'loading') {
+			setPartitionState('loading');
 		}
+
+		return () => {
+			setPartitionState('loading');
+		};
 	}, [isPartitionSvgLoaded, isLoading, melodySound.current?._loaded, isPianoLoaded]);
 
 	React.useEffect(() => {
@@ -134,26 +152,17 @@ const PartitionMagic = ({ songID }: ParitionMagicProps) => {
 	React.useEffect(() => {
 		if (Platform.OS === 'web') {
 			if (!piano.current || !isPianoLoaded) return;
-			shouldPlay ? stopwatch.start() : stopwatch.pause();
+			startResumePauseWatch(stopwatch, shouldPlay);
 			setPartitionState(shouldPlay ? 'playing' : 'paused');
 			return;
 		}
 		if (!melodySound.current || !melodySound.current._loaded) return;
-		shouldPlay ? stopwatch.start() : stopwatch.pause();
+		startResumePauseWatch(stopwatch, shouldPlay);
+		setPartitionState(shouldPlay ? 'playing' : 'paused');
 		if (shouldPlay) {
-			melodySound.current
-				.playAsync()
-				.then(() => {
-					setPartitionState('playing');
-				})
-				.catch(console.error);
+			melodySound.current.playAsync().catch(console.error);
 		} else {
-			melodySound.current
-				.pauseAsync()
-				.then(() => {
-					setPartitionState('paused');
-				})
-				.catch(console.error);
+			melodySound.current.pauseAsync().catch(console.error);
 		}
 	}, [shouldPlay]);
 
diff --git a/front/components/Play/PlayViewControlBar.tsx b/front/components/Play/PlayViewControlBar.tsx
index 179ff14..453bf81 100644
--- a/front/components/Play/PlayViewControlBar.tsx
+++ b/front/components/Play/PlayViewControlBar.tsx
@@ -27,6 +27,14 @@ const PlayViewControlBar = ({ song }: PlayViewControlBarProps) => {
 	const textColor = colors.text;
 	const isPlaying = partitionState === 'playing';
 	const disabled = partitionState === 'loading' || partitionState === 'error';
+
+	React.useEffect(() => {
+		return () => {
+			setShouldPlay(false);
+			setShouldEnd(false);
+		};
+	}, []);
+
 	return (
 		<Row
 			style={{