diff --git a/front/views/PlayView.tsx b/front/views/PlayView.tsx index f9999d2..9931bce 100644 --- a/front/views/PlayView.tsx +++ b/front/views/PlayView.tsx @@ -9,7 +9,6 @@ import { useQuery, useQueryClient } from 'react-query'; import API from '../API'; import LoadingComponent from '../components/Loading'; import Constants from 'expo-constants'; -import { useStopwatch } from 'react-timer-hook'; import SlideView from '../components/PartitionVisualizer/SlideView'; import MidiPlayer from 'midi-player-js'; import SoundFont from 'soundfont-player'; @@ -40,8 +39,8 @@ const PlayView = () => { const userProfile = useQuery(['user'], () => API.getUserInfo()); const toast = useToast(); const webSocket = useRef(); - const timer = useStopwatch({ autoStart: false }); const [paused, setPause] = useState(true); + const [time, setTime] = useState(0); const [midiPlayer, setMidiPlayer] = useState(); const [isVirtualPianoVisible, setVirtualPianoVisible] = useState(false); @@ -50,23 +49,21 @@ const PlayView = () => { ); const onPause = () => { - timer.pause(); midiPlayer?.pause(); setPause(true); webSocket.current?.send(JSON.stringify({ type: "pause", paused: true, - time: Date.now() + time: time })); } const onResume = () => { setPause(false); midiPlayer?.play(); - timer.start(); webSocket.current?.send(JSON.stringify({ type: "pause", paused: false, - time: Date.now() + time: time })); } const onEnd = () => { @@ -115,7 +112,7 @@ const PlayView = () => { type: keyIsPressed ? "note_on" : "note_off", note: keyCode, id: song.data!.id, - time: timer.seconds + time: time })) } inputIndex++; @@ -126,7 +123,6 @@ const PlayView = () => { ]).then(([midiFile, audioController]) => { const player = new MidiPlayer.Player((event) => { if (event['noteName']) { - console.log(event); audioController.play(event['noteName']); } }); @@ -137,12 +133,25 @@ const PlayView = () => { const onMIDIFailure = () => { toast.show({ description: `Failed to get MIDI access` }); } + useEffect(() => { + let interval: NodeJS.Timer | undefined = undefined; + + if (!paused) { + interval = setInterval(() => { + setTime((time) => time + 10); + }, 1); + } else { + clearInterval(interval); + } + return () => { + clearInterval(interval); + }; + }, [paused]); useEffect(() => { ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE).catch(() => {}); return () => { ScreenOrientation.unlockAsync().catch(() => {}); - clearInterval(timer); onEnd(); } }, []); @@ -227,7 +236,7 @@ const PlayView = () => { } onPress={() => { setVirtualPianoVisible(!isVirtualPianoVisible); }}/> - {timer.minutes}:{timer.seconds.toString().padStart(2, '0')} + {Math.floor(time / 60000)}:{((time % 60000) / 100).toFixed(0).toString().padStart(2, '0')} } onPress={() => {