Front: Play Page: add SlideView

front/Navigation.tsx

@@ -7,7 +7,6 @@ import SongLobbyView from './views/SongLobbyView';
 import AuthenticationView from './views/AuthenticationView';
 import HomeView from './views/HomeView';
 import SearchView from './views/SearchView';
-import PartitionView from './views/PartitionView';
 import SetttingsNavigator from './views/SettingsView';
 import { useQuery } from 'react-query';
 import API from './API';
@@ -27,7 +26,6 @@ export const protectedRoutes = <>
 	<Stack.Screen name="Score" component={ScoreView} options={{ title: translate('score') }} />
 	<Stack.Screen name="Search" component={SearchView} options={{ title: translate('search') }} />
 	<Stack.Screen name="User" component={ProfileView} options={{ title: translate('user') }} />
-	<Stack.Screen name="Partition" component={PartitionView} options={{ title: translate('partition') }} />
 </>;
 
 export const publicRoutes = <React.Fragment>

front/components/PartitionVisualizer/PartitionVisualizer.tsx

@@ -10,9 +10,7 @@ type PartitionVisualizerProps = {
 };
 
 const PartitionVisualizer = ({ songId }: PartitionVisualizerProps) => {
-	const partitionRessources = useQuery(["partition"], () =>
-		API.getPartitionRessources(songId)
-	);
+	
 
 	if (!partitionRessources.data) {
 		return (
@@ -22,7 +20,7 @@ const PartitionVisualizer = ({ songId }: PartitionVisualizerProps) => {
 		);
 	}
 	return (
-		<SlideView sources={partitionRessources.data} speed={200} startAt={0} />
+		
 	);
 };
 

front/components/Translate.tsx

@@ -2,7 +2,6 @@ import { Text } from "native-base";
 import { translate } from "../i18n/i18n";
 import { en } from "../i18n/Translations";
 import { RootState, useSelector } from "../state/Store";
-import { Text } from "native-base";
 
 type TranslateProps = {
 	translationKey: keyof typeof en;

front/views/PartitionView.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { Box } from "native-base";
-import API from "../API";
-import PartitionVisualizer from "../components/PartitionVisualizer/PartitionVisualizer";
-
-const PartitionView = () => {
-
-	return (
-		<Box style={{ padding: 10 }}>
-			<PartitionVisualizer songId={1} />
-		</Box>
-	);
-};
-
-export default PartitionView;

front/views/PlayView.tsx

@@ -9,6 +9,8 @@ import API from '../API';
 import LoadingComponent from '../components/Loading';
 import Constants from 'expo-constants';
 import { useStopwatch } from 'react-timer-hook';
+import PartitionVisualizer from '../components/PartitionVisualizer/PartitionVisualizer';
+import SlideView from '../components/PartitionVisualizer/SlideView';
 
 type PlayViewProps = {
 	songId: number
@@ -21,6 +23,9 @@ const PlayView = ({ songId }: PlayViewProps) => {
 	const webSocket = useRef<WebSocket>();
 	const timer = useStopwatch({ autoStart: false });
 	const [paused, setPause] = useState<boolean>();
+	const partitionRessources = useQuery(["partition"], () =>
+		API.getPartitionRessources(songId)
+	);
 
 	const onPause = () => {
 		timer.pause();
@@ -33,6 +38,7 @@ const PlayView = ({ songId }: PlayViewProps) => {
 	}
 	const onResume = () => {
 		setPause(false);
+		timer.start();
 		webSocket.current?.send(JSON.stringify({
 			type: "pause",
 			paused: false,
@@ -66,11 +72,15 @@ const PlayView = ({ songId }: PlayViewProps) => {
 			timer.start();
 		};
 		webSocket.current.onmessage = (message) => {
-			const data = JSON.parse(message.data);
-			if (data.type == 'end') {
-				navigation.navigate('Score');
-			} else if (data.song_launched == undefined) {
-				toast.show({ description: data, placement: 'top', colorScheme: 'secondary' });
+			try {
+				const data = JSON.parse(message.data);
+				if (data.type == 'end') {
+					navigation.navigate('Score');
+				} else if (data.song_launched == undefined) {
+					toast.show({ description: data, placement: 'top', colorScheme: 'secondary' });
+				}
+			} catch {
+
 			}
 		}
 		setPause(false);
@@ -106,7 +116,7 @@ const PlayView = ({ songId }: PlayViewProps) => {
 	}, [])
 	const score = 20;
 
-	if (!song.data) {
+	if (!song.data || !partitionRessources.data) {
 		return <Center style={{ flexGrow: 1 }}>
 			<LoadingComponent/>
 		</Center>
@@ -114,6 +124,7 @@ const PlayView = ({ songId }: PlayViewProps) => {
 	return (
 		<SafeAreaView style={{ flexGrow: 1, flexDirection: 'column' }}>
 			<View style={{ flexGrow: 1 }}>
+				<SlideView sources={partitionRessources.data} speed={200} startAt={0} />
 			</View>
 			<Box shadow={4} style={{ height: '12%', width:'100%', borderWidth: 0.5, margin: 5 }}>
 				<Row justifyContent='space-between' style={{ flexGrow: 1, alignItems: 'center' }} >