wip

front/API.ts

@@ -72,6 +72,7 @@ function getBaseAPIUrl() {
 		}
 		return '/api';
 	}
+	console.log(process.env.EXPO_PUBLIC_API_URL);
 	if (process.env.EXPO_PUBLIC_API_URL) {
 		return process.env.EXPO_PUBLIC_API_URL;
 	}
@@ -781,6 +782,7 @@ export default class API {
 	}
 
 	public static getPartitionMelodyUrl(songId: number): string {
+		// return 'https://cdn.discordapp.com/attachments/717080637038788731/1193948941914488862/Short1.mp3?ex=65ae929a&is=659c1d9a&hm=ea21e4b67f8f04388b67fe70e8de11e0110a1ac5c9b13714e21d921a08300992&';
 		return `${API.baseUrl}/song/${songId}/assets/melody`;
 	}
 }

front/components/Play/PartitionMagic.tsx

@@ -10,7 +10,6 @@ import LoadingComponent from '../Loading';
 
 // note we are also using timestamp in a context
 export type ParitionMagicProps = {
-	timestamp: number;
 	songID: number;
 	shouldPlay: boolean;
 	onEndReached: () => void;
@@ -79,6 +78,8 @@ const PartitionMagic = ({
 		if (!melodySound.current) {
 			Audio.Sound.createAsync({
 				uri: API.getPartitionMelodyUrl(songID),
+			}, {
+				progressUpdateIntervalMillis: 200,
 			}).then((track) => {
 				melodySound.current = track.sound;
 			});
@@ -102,16 +103,27 @@ const PartitionMagic = ({
 	}, [onError, isError]);
 
 	React.useEffect(() => {
-		if (onReady && isPartitionSvgLoaded && !isLoading && melodySound.current?._loaded) {
+		if (isPartitionSvgLoaded && !isLoading && melodySound.current?._loaded) {
 			onReady();
 		}
-	}, [onReady, isPartitionSvgLoaded, isLoading, melodySound.current?._loaded]);
+	}, [isPartitionSvgLoaded, isLoading, melodySound.current?._loaded]);
 
 	React.useEffect(() => {
 		if (!melodySound.current || !melodySound.current._loaded) {
 			return;
 		}
 		if (shouldPlay) {
+			melodySound.current.getStatusAsync().then((status) => {
+				const lastCur = data!.cursors[data!.cursors.length - 1]!;
+				const maxTs = lastCur.timestamp + lastCur.timing;
+				const newRate = status.durationMillis! / maxTs;
+				console.log('newRate', newRate);
+				if (newRate < 0 || newRate > 2) {
+					console.error('wrong rate');
+				} else {
+					melodySound.current?.setRateAsync(newRate, false);
+				}
+			});
 			melodySound.current.playAsync().then(onPlay).catch(console.error);
 		} else {
 			melodySound.current.pauseAsync().then(onPause).catch(console.error);
@@ -131,13 +143,14 @@ const PartitionMagic = ({
 		if (data?.cursors.length === 0) return;
 
 		melodySound.current.setOnPlaybackStatusUpdate((status) => {
+			//@ts-expect-error positionMillis is not in the type
 			const timestamp = status?.positionMillis ?? 0;
 			getCursorToPlay(
-				data?.cursors ?? [],
+				data!.cursors,
 				currentCurIdx.current,
-				timestamp - transitionDuration,
+				timestamp + transitionDuration,
 				(cursor, idx) => {
-					console.log('cursor', cursor, idx);
+					console.log('cursor', cursor, status);
 					currentCurIdx.current = idx;
 					partitionOffset.value = withTiming(
 						-(cursor.x - data!.cursors[0]!.x) / partitionDims[0],

front/views/PlayView.tsx

@@ -73,6 +73,7 @@ const PlayView = ({ songId }: PlayViewProps) => {
 	const songHistory = useQuery(API.getSongHistory(songId));
 	const [score, setScore] = useState(0); // Between 0 and 100
 	const getElapsedTime = () => stopwatch.getElapsedRunningTime();
+	const [readyToPlay, setReadyToPlay] = useState(false);
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	const [midiKeyboardFound, setMidiKeyboardFound] = useState<boolean>();
 	// first number is the note, the other is the time when pressed on release the key is removed
@@ -396,6 +397,10 @@ const PlayView = ({ songId }: PlayViewProps) => {
 						onError={() => {
 							console.log('error from partition magic');
 						}}
+						onReady={() => {
+							console.log('ready from partition magic');
+							setReadyToPlay(true);
+						}}
 						onPlay={onResume}
 						onPause={onPause}
 					/>
@@ -404,6 +409,7 @@ const PlayView = ({ songId }: PlayViewProps) => {
 					score={score}
 					time={time}
 					paused={paused}
+					disabled={playType == null || !readyToPlay}
 					song={song.data}
 					onEnd={onEnd}
 					onPause={() => {