Front: Isolate Metronone Switch for reactive state

front/components/Metronome.tsx

@@ -1,26 +1,56 @@
-import { useEffect, useRef } from 'react';
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { useEffect, useRef, useState } from 'react';
 import { Slider, Switch, Text, View } from 'native-base';
+import { Audio } from 'expo-av';
+
+const MetronomeToggle = (props: { enabled: boolean, onToggle: (stateAfterToggle: boolean) => void }) => {
+	const [isEnabled, setEnabled] = useState(false);
+
+	useEffect(() => {
+		setEnabled(props.enabled)
+	}, [props.enabled])
+	return <Switch value={isEnabled} onToggle={() => {
+		console.log(isEnabled);
+		props.onToggle(!isEnabled);
+		setEnabled(!isEnabled);
+	}} />
+}
 
 export const Metronome = ({ paused = false, bpm }: { paused?: boolean; bpm: number }) => {
-	const ref = useRef<HTMLAudioElement | null>(null);
+	const audio = useRef<Audio.Sound | null>(null);
 	const enabled = useRef<boolean>(false);
 	const volume = useRef<number>(50);
 
+	useEffect(() => {
+		if (!enabled) {
+			return;
+		} else if (!audio.current) {
+			Audio.Sound.createAsync(require('../assets/metronome.mp3')).then((a) => {
+				audio.current = a.sound;
+			});
+		}
+		return () => {
+			audio.current?.unloadAsync();
+		};
+	}, [enabled]);
 	useEffect(() => {
 		if (paused) return;
 		const int = setInterval(() => {
 			if (!enabled.current) return;
-			if (!ref.current) ref.current = new Audio('/assets/metronome.mp3');
-			ref.current.volume = volume.current / 100;
-			ref.current.play();
+			if (!audio.current) return;
+			audio.current?.playAsync();
 		}, 60000 / bpm);
 		return () => clearInterval(int);
 	}, [bpm, paused]);
+
+	useEffect(() => {
+		audio.current?.setVolumeAsync(volume.current / 100);
+	}, [volume.current]);
 	return (
 		<View>
 			<Text>Metronome Settings</Text>
 			<Text>Enabled:</Text>
-			<Switch value={enabled.current} onToggle={() => (enabled.current = !enabled.current)} />
+			<MetronomeToggle enabled={enabled.current} onToggle={(e) => (enabled.current = e)} />
 			<Text>Volume:</Text>
 			<Slider
 				maxWidth={'500px'}

front/package.json

@@ -25,6 +25,7 @@
 		"@react-navigation/native-stack": "^6.9.14",
 		"@reduxjs/toolkit": "^1.9.6",
 		"expo": "~49.0.13",
+		"expo-av": "~13.4.1",
 		"expo-image-picker": "~14.3.2",
 		"expo-linear-gradient": "~12.3.0",
 		"expo-linking": "~5.0.2",

front/yarn.lock

@@ -6056,6 +6056,11 @@ expo-asset@~8.10.1:
     path-browserify "^1.0.0"
     url-parse "^1.5.9"
 
+expo-av@~13.4.1:
+  version "13.4.1"
+  resolved "https://registry.yarnpkg.com/expo-av/-/expo-av-13.4.1.tgz#83029b3202e64bf060f0a7a24591d93bf7ab728c"
+  integrity sha512-0K8QEFzZeNGrppzYUs8wOtjOyPPkxzlVYbEHM6WzIQOG1uYYNOJkJB3aQHVFXHmz+AzoHwMrUjcschofwaMNeg==
+
 expo-constants@~14.4.2:
   version "14.4.2"
   resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-14.4.2.tgz#cac5e8b524069545739b8d8595ce96cc5be6578c"