Removed the timestamp partition context to reuse normal props clean up console logs and now displaying a toast to tell is the scorometer crashed

front/components/PartitionCoord.tsx

@@ -8,6 +8,8 @@ type PartitionCoordProps = {
 	file: string;
 	onPartitionReady: () => void;
 	onEndReached: () => void;
+	onResume: () => void;
+	onPause: () => void;
 	// Timestamp of the play session, in milisecond
 	timestamp: number;
 };
@@ -16,6 +18,8 @@ const PartitionCoord = ({
 	file,
 	onPartitionReady,
 	onEndReached,
+	onPause,
+	onResume,
 	timestamp,
 }: PartitionCoordProps) => {
 	const [partitionData, setPartitionData] = React.useState<
@@ -41,6 +45,9 @@ const PartitionCoord = ({
 				<PhaserCanvas
 					partitionB64={partitionData?.[0]}
 					cursorPositions={partitionData?.[1]}
+					timestamp={timestamp}
+					onPause={onPause}
+					onResume={onResume}
 					onEndReached={() => {
 						onEndReached();
 					}}

front/components/PartitionVisualizer/PhaserCanvas.tsx

@@ -1,11 +1,10 @@
 // create a simple phaser effect with a canvas that can be easily imported as a react component
 
 import * as React from 'react';
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import Phaser from 'phaser';
 import useColorScheme from '../../hooks/colorScheme';
-import { PartitionContext } from '../../views/PlayView';
-import store, { RootState, useSelector } from '../../state/Store';
+import { RootState, useSelector } from '../../state/Store';
 import { setSoundPlayer as setSPStore } from '../../state/SoundPlayerSlice';
 import { useDispatch } from 'react-redux';
 import { SplendidGrandPiano, CacheStorage } from 'smplr';
@@ -106,35 +105,34 @@ export type PhaserCanvasProps = {
 	partitionB64: string;
 	cursorPositions: PianoCursorPosition[];
 	onEndReached: () => void;
+	onPause: () => void;
+	onResume: () => void;
+	// Timestamp of the play session, in milisecond
+	timestamp: number;
 };
 
-const PhaserCanvas = ({ partitionB64, cursorPositions, onEndReached }: PhaserCanvasProps) => {
+const PhaserCanvas = ({ partitionB64, cursorPositions, onEndReached, timestamp }: PhaserCanvasProps) => {
 	const colorScheme = useColorScheme();
 	const dispatch = useDispatch();
 	const soundPlayer = useSelector((state: RootState) => state.soundPlayer.soundPlayer);
-	const { timestamp } = React.useContext(PartitionContext);
 	const [game, setGame] = React.useState<Phaser.Game | null>(null);
 
 	globalTimestamp = timestamp;
 
 	useEffect(() => {
 		if (isValidSoundPlayer(soundPlayer)) {
-			console.log('cache soundplayer', soundPlayer);
 			return;
 		}
-		console.log('creating soundplayer');
 		new SplendidGrandPiano(new AudioContext(), {
 			storage: new CacheStorage(),
 		})
 			.loaded()
 			.then((sp) => {
-				console.log('sp', sp);
 				dispatch(setSPStore(sp));
 			});
 	}, []);
 
 	useEffect(() => {
-		console.log('soundPlayer', soundPlayer);
 		if (!isValidSoundPlayer(soundPlayer) || !soundPlayer) return;
 		const pianoScene = getPianoScene(
 			partitionB64,
@@ -152,13 +150,12 @@ const PhaserCanvas = ({ partitionB64, cursorPositions, onEndReached }: PhaserCan
 			scene: pianoScene,
 			scale: {
 				mode: Phaser.Scale.FIT,
-				autoCenter: Phaser.Scale.CENTER_BOTH,
+				autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
 			},
 		};
 
 		setGame(new Phaser.Game(config));
 		return () => {
-			console.log('destroying phaser game sp');
 			if (game) {
 				// currently the condition is always false
 				game.destroy(true);

front/views/PlayView.tsx

@@ -15,19 +15,17 @@ import {
 	HStack,
 } from 'native-base';
 import IconButton from '../components/IconButton';
-import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import { Ionicons } from '@expo/vector-icons';
 import { RouteProps, useNavigation } from '../Navigation';
 import { transformQuery, useQuery } from '../Queries';
 import API from '../API';
 import LoadingComponent, { LoadingView } from '../components/Loading';
 import Constants from 'expo-constants';
-import { strToKey, keyToStr, Note } from '../models/Piano';
 import { useSelector } from 'react-redux';
 import { RootState } from '../state/Store';
 import { translate } from '../i18n/i18n';
 import { ColorSchemeType } from 'native-base/lib/typescript/components/types';
 import { useStopwatch } from 'react-use-precision-timer';
-import PartitionView from '../components/PartitionView';
 import PartitionCoord from '../components/PartitionCoord';
 import TextButton from '../components/TextButton';
 import { MIDIAccess, MIDIMessageEvent, requestMIDIAccess } from '@motiz88/react-native-midi';
@@ -124,8 +122,11 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 		);
 	};
 	const onEnd = () => {
+		stopwatch.stop();
 		if (webSocket.current?.readyState != WebSocket.OPEN) {
-			navigation.navigate('Error');
+			console.warn('onEnd: Websocket not open');
+			navigation.navigate('Home');
+			return;
 		}
 		webSocket.current?.send(
 			JSON.stringify({
@@ -158,7 +159,10 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 		webSocket.current.onclose = () => {
 			console.log('Websocket closed', endMsgReceived);
 			if (!endMsgReceived) {
-				navigation.replace('Error');
+				toast.show({ description: 'Connection lost with Scorometer' });
+				// the special case when the front send the end message succesfully 
+				// but the websocket is closed before the end message is received
+				// is not handled
 				return;
 			}
 		};
@@ -168,7 +172,7 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 				if (data.type == 'end') {
 					endMsgReceived = true;
 					webSocket.current?.close();
-					navigation.replace('Score', { songId: song.data!.id, ...data });
+					navigation.navigate('Score', { songId: song.data!.id, ...data });
 					return;
 				}
 				const points = data.info.score;
@@ -272,11 +276,6 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 	}
 	return (
 		<SafeAreaView style={{ flexGrow: 1, flexDirection: 'column' }}>
-			<PartitionContext.Provider
-				value={{
-					timestamp: time,
-				}}
-			>
 				<HStack
 					width="100%"
 					justifyContent="center"
@@ -293,21 +292,12 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 					</Animated.View>
 				</HStack>
 				<View style={{ flexGrow: 1, justifyContent: 'center' }}>
-					{/* <PartitionView
-					file={musixml.data}
-					onPartitionReady={() => setPartitionRendered(true)}
-					timestamp={Math.max(0, time)}
-					onEndReached={() => {
-						onEnd();
-					}}
-				/> */}
 					<PartitionCoord
 						file={musixml.data}
-						// timestamp={Math.max(0, time)}
-						timestamp={0}
-						onEndReached={() => {
-							onEnd();
-						}}
+						timestamp={time}
+						onEndReached={onEnd}
+						onPause={onPause}
+						onResume={onResume}
 						onPartitionReady={() => setPartitionRendered(true)}
 					/>
 					{!partitionRendered && <LoadingComponent />}
@@ -389,7 +379,6 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 						</Row>
 					</Row>
 				</Box>
-			</PartitionContext.Provider>
 		</SafeAreaView>
 	);
 };