fix build errors

Author: shreyas-jadhav

package.json

@@ -23,6 +23,7 @@
 		"@mui/styles": "^5.8.7",
 		"@mui/x-date-pickers": "^5.0.16",
 		"@react-google-maps/api": "^2.2.0",
+		"@react-google-maps/marker-clusterer": "^2.20.0",
 		"@turf/boolean-point-in-polygon": "^7.1.0",
 		"@turf/center-of-mass": "^6.5.0",
 		"@turf/destination": "^6.5.0",
@@ -41,6 +42,7 @@
 		"i": "^0.3.7",
 		"interweave": "^12.9.0",
 		"lodash": "^4.17.21",
+		"marker-clusterer": "link:@types/@react-google-maps/marker-clusterer",
 		"moment": "^2.29.4",
 		"nanoid": "^4.0.0",
 		"nosleep.js": "^0.12.0",
@@ -53,7 +55,7 @@
 		"react-device-detect": "^2.1.2",
 		"react-dom": "^17.0.2",
 		"react-helmet": "^6.1.0",
-		"react-router": "^5.2.0",
+		"react-router": "^5.3.4",
 		"react-router-dom": "^5.2.0",
 		"react-share": "^4.4.0",
 		"regenerator-runtime": "^0.13.9",
@@ -74,6 +76,7 @@
 		"@types/react": "^17.0.16",
 		"@types/react-dom": "^17.0.9",
 		"@types/react-helmet": "^6.1.2",
+		"@types/react-router": "^5.1.20",
 		"@types/react-router-dom": "^5.1.8",
 		"@types/wavesurfer.js": "^5.2.2",
 		"@vitejs/plugin-react": "^4.3.4",

pnpm-lock.yaml

@@ -1,14 +1,14 @@
-import { GroundOverlay, GroundOverlayProps, useGoogleMap } from '@react-google-maps/api';
+import speakerImage from '@/assets/speaker.png';
+import { useRoundware } from '@/hooks';
+import { speakerPolygonColors as colors, speakerPolygonOptions } from '@/styles/speaker';
+import { GroundOverlay, GroundOverlayProps } from '@react-google-maps/api';
 import getCenterOfMass from '@turf/center-of-mass';
 import destination from '@turf/destination';
 import distance from '@turf/distance';
 import { point, Point, polygon, Position } from '@turf/helpers';
 import midpoint from '@turf/midpoint';
-import speakerImage from '@/assets/speaker.png';
-import { useRoundware } from '@/hooks';
-import React, { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { ISpeakerData } from 'roundware-web-framework';
-import { speakerPolygonColors as colors, speakerPolygonOptions } from '@/styles/speaker';
 interface Props {}
 
 const getColorForIndex = (index: number): string => {
@@ -71,7 +71,12 @@ const SpeakerImages = (props: Props) => {
 				const prop: GroundOverlayProps & {
 					key: string;
 				} = {
-					bounds: new google.maps.LatLngBounds(new google.maps.LatLng(squarePoints[2][1], squarePoints[2][0]), new google.maps.LatLng(squarePoints[0][1], squarePoints[0][0])),
+					bounds: {
+						north: squarePoints[0][1],
+						south: squarePoints[2][1],
+						east: squarePoints[0][0],
+						west: squarePoints[2][0],
+					},
 					url: speakerImage,
 					options: {
 						opacity: 0.2,

src/components/ListenPage/Map/Speakers/SpeakerImages.tsx

@@ -12,21 +12,20 @@ const SpeakerLoadingIndicator = (props: Props) => {
 
 	const [loadingSpeakers, setLoadingSpeakers] = useState<{ id: number; value: number }[]>([]);
 	useEffect(() => {
-		roundware.mixer.speakerEngine?.speakerTracks?.forEach((sp) => {
-			const player = sp.player;
-			player.onLoadingProgress((per: number) => {
-				if (per <= 100)
+		roundware.mixer.speakerEngine?.speakers?.forEach((sp) => {
+			sp.request?.addEventListener('progress', (ev) => {
+				if (ev.loaded / ev.total <= 100)
 					setLoadingSpeakers((prev) => [
-						...prev.filter((s) => s.id != sp.speakerId),
+						...prev.filter((s) => s.id != sp.data.id),
 						{
-							id: sp.speakerId,
-							value: per,
+							id: sp.data.id,
+							value: (ev.loaded / ev.total) * 100,
 						},
 					]);
-				else setLoadingSpeakers((prev) => [...prev.filter((s) => s.id != sp.speakerId)]);
+				else setLoadingSpeakers((prev) => [...prev.filter((s) => s.id != sp.data.id)]);
 			});
 		});
-	}, [roundware?.mixer?.speakerEngine?.speakerTracks]);
+	}, [roundware?.mixer?.speakerEngine?.speakers]);
 
 	if (loadingSpeakers.every((s) => s.value == 100)) return null;
 	return (

src/components/ListenPage/Map/Speakers/SpeakerLoadingIndicator.tsx

@@ -9,19 +9,21 @@ const SpeakerReplayButton = (props: Props) => {
 	const [showReplay, setShowReplay] = useState(false);
 	useEffect(() => {
 		setupListener();
-	}, [roundware?.mixer?.speakerEngine?.speakerTracks]);
+	}, [roundware?.mixer?.speakerEngine?.speakers]);
 
 	const setupListener = () => {
-		if (roundware.mixer && Array.isArray(roundware.mixer.speakerEngine?.speakerTracks)) {
-			roundware.mixer.speakerEngine?.onAllSpeakersEnd(() => {
-				setShowReplay(true);
-				console.log(`all ended`);
+		if (roundware.mixer && Array.isArray(roundware.mixer.speakerEngine?.speakers)) {
+			roundware.mixer.speakerEngine?.speakers?.forEach((sp) => {
+				sp.request?.addEventListener('ended', () => {
+					setShowReplay(true);
+					console.log(`all ended`);
+				});
 			});
 		}
 	};
 
 	const handleOnReplay = () => {
-		roundware?.mixer?.speakerEngine?.replay();
+		// roundware?.mixer?.speakerEngine?.replay();
 		setShowReplay(false);
 	};
 	console.log(`show replay`, showReplay);

src/components/ListenPage/Map/Speakers/SpeakerReplayButton.tsx

@@ -48,7 +48,7 @@ const RoundwareMixerControl = () => {
 	}, [roundware]);
 
 	function seek(offset: number): void {
-		(roundware.mixer.speakerEngine as any)?.speakerTracks?.forEach((s: any) => {
+		(roundware.mixer.speakerEngine as any)?.speakers?.forEach((s: any) => {
 			const currentTime = s.player.audio.currentTime;
 			let newTime = currentTime + offset;
 

src/components/ListenPage/RoundwareMixerControl.tsx

@@ -16,14 +16,11 @@ const SpeakerToggle = () => {
 	const { roundware, setHideSpeakerPolygons } = useRoundware();
 	useEffect(() => {
 		if (speakerValues) {
-			roundware.mixer.speakerEngine?.speakerTracks?.forEach((st) => {
-				if (st.speakerId in speakerValues) {
-					if (speakerValues[st.speakerId] === false) {
-						console.log('st', st.player);
-						st.player.fadeOutAndPause();
-						console.log('st', st.player);
+			roundware.mixer.speakerEngine?.speakers?.forEach((st) => {
+				if (st.data.id in speakerValues) {
+					if (speakerValues[st.data.id] === false) {
+						st.fadeOutAndStopBufferSource();
 					} else {
-						st.updateVolume();
 					}
 				}
 			});
@@ -34,7 +31,7 @@ const SpeakerToggle = () => {
 					.map((key) => parseInt(key, 10))
 			);
 		}
-	}, [speakerValues, ...(roundware.mixer.speakerEngine?.speakerTracks?.map((st) => st.calculatedVolume) ?? [])]);
+	}, [speakerValues, ...(roundware.mixer.speakerEngine?.speakers?.map((st) => st.calculatedVolume) ?? [])]);
 
 	return (
 		<CustomMapControl position={window.google.maps.ControlPosition.RIGHT_CENTER}>