diff --git a/front/API.ts b/front/API.ts index f2be7cf..bb8bdbd 100644 --- a/front/API.ts +++ b/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`; } } diff --git a/front/components/Play/PartitionMagic.tsx b/front/components/Play/PartitionMagic.tsx index ec21253..bf460f6 100644 --- a/front/components/Play/PartitionMagic.tsx +++ b/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], diff --git a/front/views/PlayView.tsx b/front/views/PlayView.tsx index d0f3f0e..efda5b3 100644 --- a/front/views/PlayView.tsx +++ b/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(); // 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={() => {