added dynamic system for ws connection to handle secure context and s… (#128)

* added dynamic system for ws connection to handle secure context and special web rules

* Front: Fix Play on end

* fix build and ws reverse proxy

---------

Co-authored-by: Arthi-chaud <arthur.jamet@gmail.com>

front/Dockerfile

@@ -6,7 +6,7 @@ WORKDIR /app
 COPY package.json yarn.lock ./
 RUN yarn install
 # install expo cli
-RUN yarn global add expo-cli
+RUN yarn global add expo-cli@6.0.5
 # add sharp-cli (^2.1.0) for faster image processing
 RUN yarn global add sharp-cli@^2.1.0
 COPY . .

front/nginx.conf

@@ -11,4 +11,12 @@ server {
 	location /api/ {
 		proxy_pass http://back:3000/;
 	}
+
+	location /ws/ {
+		proxy_pass http://scorometer:6543/;
+		proxy_http_version 1.1;
+		proxy_set_header Upgrade $http_upgrade;
+		proxy_set_header Connection "Upgrade";
+		proxy_set_header Host $host;
+	}
 }

front/views/PlayView.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { SafeAreaView, Text } from 'react-native';
+import { SafeAreaView, Text, Platform } from 'react-native';
 import * as ScreenOrientation from 'expo-screen-orientation';
 import {  Box, Center, Column, IconButton, Progress, Row, View, useToast } from 'native-base';
 import { Ionicons } from "@expo/vector-icons";
@@ -17,6 +17,18 @@ type PlayViewProps = {
 	songId: number
 }
 
+
+// this a hot fix this should be reverted soon
+let scoroBaseApiUrl = Constants.manifest?.extra?.scoroUrl;
+
+if (process.env.NODE_ENV != 'development' && Platform.OS === 'web') {
+	if (location.protocol !== 'https:') {
+		scoroBaseApiUrl = "wss://" + location.host + "/ws";
+	} else {
+		scoroBaseApiUrl = "ws://" + location.host + "/ws";
+	}
+}
+
 const PlayView = ({ songId }: PlayViewProps) => {
 	const navigation = useNavigation();
 	const queryClient = useQueryClient();
@@ -25,7 +37,7 @@ const PlayView = ({ songId }: PlayViewProps) => {
 	const webSocket = useRef<WebSocket>();
 	const timer = useStopwatch({ autoStart: false });
 	const [paused, setPause] = useState<boolean>(true);
-	const [midiPlayer, setMidiPlayer] = useState();
+	const [midiPlayer, setMidiPlayer] = useState<MidiPlayer.Player>();
 	
 	const partitionRessources = useQuery(["partition", songId], () =>
 		API.getPartitionRessources(songId)
@@ -53,7 +65,7 @@ const PlayView = ({ songId }: PlayViewProps) => {
 	}
 	const onEnd = () => {
 		webSocket.current?.close();
-		midiPlayer?.destroy();
+		midiPlayer?.pause();
 	}
 
 	const onMIDISuccess = (access) => {
@@ -65,7 +77,7 @@ const PlayView = ({ songId }: PlayViewProps) => {
 		}
 		toast.show({ description: `MIDI ready!`, placement: 'top' });
 		let inputIndex = 0;
-		webSocket.current = new WebSocket(Constants.manifest?.extra?.scoroUrl);
+		webSocket.current = new WebSocket(scoroBaseApiUrl);
 		webSocket.current.onopen = () => {
 			webSocket.current!.send(JSON.stringify({
 				type: "start",
@@ -104,14 +116,15 @@ const PlayView = ({ songId }: PlayViewProps) => {
 			queryClient.fetchQuery(['song', songId, 'midi'], () => API.getSongMidi(songId)),
 			SoundFont.instrument(new AudioContext(), 'electric_piano_1'),
 		]).then(([midiFile, audioController]) => {
-				const player = new MidiPlayer.Player((event) => {
-					if (event['noteName']) {
-						audioController.play(event['noteName']);
-					}
-				});
-				player.loadArrayBuffer(midiFile);
-				setMidiPlayer(player);
-			})
+			const player = new MidiPlayer.Player((event) => {
+				if (event['noteName']) {
+					console.log(event);
+					audioController.play(event['noteName']);
+				}
+			});
+			player.loadArrayBuffer(midiFile);
+			setMidiPlayer(player);
+		});
 	}
 	const onMIDIFailure = () => {
 		toast.show({ description: `Failed to get MIDI access` });
@@ -166,7 +179,10 @@ const PlayView = ({ songId }: PlayViewProps) => {
 						<IconButton size='sm' colorScheme='coolGray' variant='solid' _icon={{
 						    as: Ionicons,
 						    name: "stop"
-						}} onPress={() => navigation.navigate('Score')}/>
+						}} onPress={() => {
+							onEnd();
+							navigation.navigate('Score')
+						}}/>
 					</Row>
 				</Row>
 			</Box>

musics/Chopin - Nocturne Op 9 No 2 (E Flat Major)/Chopin - Nocturne Op 9 No 2 (E Flat Major).ini

@@ -0,0 +1,21 @@
+
+[Metadata]
+Name=Chopin - Nocturne Op 9 No 2 (E Flat Major)
+Artist=Frédéric Chopin
+Genre=Classical
+Album=e
+	
+[Difficulties]
+TwoHands=0
+Rhythm=0
+NoteCombo=0
+Arpeggio=0
+Distance=0
+LeftHand=0
+RightHand=0
+LeadHandChange=0
+ChordComplexity=0
+ChordTiming=0
+Length=0
+PedalPoint=0
+Precision=0

musics/Prelude I in C major, BWV 846 - Well Tempered Clavier [First Book]/Prelude I in C major, BWV 846 - Well Tempered Clavier [First Book].ini

@@ -0,0 +1,21 @@
+
+[Metadata]
+Name=Prelude I in C major, BWV 846 - Well Tempered Clavier [First Book]
+Artist=Johann Sebastian Bach
+Genre=Classical
+Album=e
+	
+[Difficulties]
+TwoHands=0
+Rhythm=0
+NoteCombo=0
+Arpeggio=0
+Distance=0
+LeftHand=0
+RightHand=0
+LeadHandChange=0
+ChordComplexity=0
+ChordTiming=0
+Length=0
+PedalPoint=0
+Precision=0

musics/Rachmaninoff - Rhapsody on a theme of Paganini, Variation 18, Solo Piano/Rachmaninoff - Rhapsody on a theme of Paganini, Variation 18, Solo Piano.ini

@@ -0,0 +1,21 @@
+
+[Metadata]
+Name=Rachmaninoff - Rhapsody on a theme of Paganini, Variation 18, Solo Piano
+Artist=Sergei Rachmaninoff
+Genre=Classical
+Album=e
+	
+[Difficulties]
+TwoHands=0
+Rhythm=0
+NoteCombo=0
+Arpeggio=0
+Distance=0
+LeftHand=0
+RightHand=0
+LeadHandChange=0
+ChordComplexity=0
+ChordTiming=0
+Length=0
+PedalPoint=0
+Precision=0

musics/Vivaldi's Spring from the Four Seasons, Piano Transcription/Vivaldi's Spring from the Four Seasons, Piano Transcription.ini

@@ -0,0 +1,21 @@
+
+[Metadata]
+Name=Vivaldi's Spring from the Four Seasons, Piano Transcription
+Artist=Antonio Vivaldi
+Genre=Classical
+Album=e
+	
+[Difficulties]
+TwoHands=0
+Rhythm=0
+NoteCombo=0
+Arpeggio=0
+Distance=0
+LeftHand=0
+RightHand=0
+LeadHandChange=0
+ChordComplexity=0
+ChordTiming=0
+Length=0
+PedalPoint=0
+Precision=0

musics/Vivaldi's Spring from the Four Seasons, Piano Transcription/Vivaldi's Spring from the Four Seasons, Piano Transcription/META-INF/container.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<container>
+  <rootfiles>
+    <rootfile full-path="score.xml">
+      </rootfile>
+    </rootfiles>
+  </container>