├── assets
    ├── images
    │   ├── icon.png
    │   ├── favicon.png
    │   ├── splash.png
    │   └── adaptive-icon.png
    └── fonts
    │   └── SpaceMono-Regular.ttf
├── tsconfig.json
├── babel.config.js
├── .gitignore
├── components
    ├── StyledText.tsx
    ├── __tests__
    │   └── StyledText-test.js
    ├── Themed.tsx
    ├── FrequencySlider.tsx
    ├── EditScreenInfo.tsx
    ├── EQTest.tsx
    └── AudioPlayer.tsx
├── constants
    ├── Layout.ts
    └── Colors.ts
├── README.md
├── .expo-shared
    └── assets.json
├── hooks
    ├── useColorScheme.ts
    └── useCachedResources.ts
├── App.tsx
├── screens
    ├── TabTwoScreen.tsx
    ├── NotFoundScreen.tsx
    ├── ModalScreen.tsx
    └── TabOneScreen.tsx
├── app.json
├── navigation
    ├── LinkingConfiguration.ts
    └── index.tsx
├── api
    └── api.ts
├── types.tsx
└── package.json


/assets/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/i/ear-training-app/master/assets/images/icon.png


--------------------------------------------------------------------------------
/assets/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/i/ear-training-app/master/assets/images/favicon.png


--------------------------------------------------------------------------------
/assets/images/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/i/ear-training-app/master/assets/images/splash.png


--------------------------------------------------------------------------------
/assets/images/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/i/ear-training-app/master/assets/images/adaptive-icon.png


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "expo/tsconfig.base",
3 |   "compilerOptions": {
4 |     "strict": true
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/assets/fonts/SpaceMono-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/i/ear-training-app/master/assets/fonts/SpaceMono-Regular.ttf


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo']
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/
 2 | .expo/
 3 | dist/
 4 | npm-debug.*
 5 | *.jks
 6 | *.p8
 7 | *.p12
 8 | *.key
 9 | *.mobileprovision
10 | *.orig.*
11 | web-build/
12 | 
13 | # macOS
14 | .DS_Store
15 | 


--------------------------------------------------------------------------------
/components/StyledText.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | 
3 | import { Text, TextProps } from './Themed';
4 | 
5 | export function MonoText(props: TextProps) {
6 |   return <Text {...props} style={[props.style, { fontFamily: 'space-mono' }]} />;
7 | }
8 | 


--------------------------------------------------------------------------------
/constants/Layout.ts:
--------------------------------------------------------------------------------
 1 | import { Dimensions } from 'react-native';
 2 | 
 3 | const width = Dimensions.get('window').width;
 4 | const height = Dimensions.get('window').height;
 5 | 
 6 | export default {
 7 |   window: {
 8 |     width,
 9 |     height,
10 |   },
11 |   isSmallDevice: width < 375,
12 | };
13 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Ear training app
 2 | ================
 3 | 
 4 | The client for the ear training app.
 5 | 
 6 | ## Setup
 7 | 
 8 | This app is built using expo. To get it up and running download you need
 9 | expo-cli. `npm i -g expo-cli`.
10 | 
11 | Run `expo start` to start the app.
12 | 
13 | 
14 | ## Structure
15 | 
16 | no idea yet
17 | 


--------------------------------------------------------------------------------
/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 |   "e997a5256149a4b76e6bfd6cbf519c5e5a0f1d278a3d8fa1253022b03c90473b": true,
3 |   "af683c96e0ffd2cf81287651c9433fa44debc1220ca7cb431fe482747f34a505": true,
4 |   "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
5 |   "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
6 | }
7 | 


--------------------------------------------------------------------------------
/components/__tests__/StyledText-test.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import renderer from 'react-test-renderer';
 3 | 
 4 | import { MonoText } from '../StyledText';
 5 | 
 6 | it(`renders correctly`, () => {
 7 |   const tree = renderer.create(<MonoText>Snapshot test!</MonoText>).toJSON();
 8 | 
 9 |   expect(tree).toMatchSnapshot();
10 | });
11 | 


--------------------------------------------------------------------------------
/hooks/useColorScheme.ts:
--------------------------------------------------------------------------------
1 | import { ColorSchemeName, useColorScheme as _useColorScheme } from 'react-native';
2 | 
3 | // The useColorScheme value is always either light or dark, but the built-in
4 | // type suggests that it can be null. This will not happen in practice, so this
5 | // makes it a bit easier to work with.
6 | export default function useColorScheme(): NonNullable<ColorSchemeName> {
7 |   return _useColorScheme() as NonNullable<ColorSchemeName>;
8 | }
9 | 


--------------------------------------------------------------------------------
/constants/Colors.ts:
--------------------------------------------------------------------------------
 1 | const tintColorLight = '#2f95dc';
 2 | const tintColorDark = '#fff';
 3 | 
 4 | export default {
 5 |   light: {
 6 |     text: '#000',
 7 |     background: '#fff',
 8 |     tint: tintColorLight,
 9 |     tabIconDefault: '#ccc',
10 |     tabIconSelected: tintColorLight,
11 |   },
12 |   dark: {
13 |     text: '#fff',
14 |     background: '#000',
15 |     tint: tintColorDark,
16 |     tabIconDefault: '#ccc',
17 |     tabIconSelected: tintColorDark,
18 |   },
19 | };
20 | 


--------------------------------------------------------------------------------
/App.tsx:
--------------------------------------------------------------------------------
 1 | import { StatusBar } from 'expo-status-bar';
 2 | import React from 'react';
 3 | import { SafeAreaProvider } from 'react-native-safe-area-context';
 4 | 
 5 | import useCachedResources from './hooks/useCachedResources';
 6 | import useColorScheme from './hooks/useColorScheme';
 7 | import Navigation from './navigation';
 8 | 
 9 | export default function App() {
10 |   const isLoadingComplete = useCachedResources();
11 |   const colorScheme = useColorScheme();
12 | 
13 |   if (!isLoadingComplete) {
14 |     return null;
15 |   } else {
16 |     return (
17 |       <SafeAreaProvider>
18 |         <Navigation colorScheme={colorScheme} />
19 |         <StatusBar />
20 |       </SafeAreaProvider>
21 |     );
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/screens/TabTwoScreen.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { StyleSheet, TextInput } from 'react-native';
 3 | 
 4 | import EditScreenInfo from '../components/EditScreenInfo';
 5 | import { Text, View } from '../components/Themed';
 6 | import { MultiAudioPlayer } from '../components/AudioPlayer';
 7 | import { EQTest } from '../components/EQTest';
 8 | 
 9 | export default function TabTwoScreen() {
10 |   return (
11 |     <View style={styles.container}>
12 |       <EQTest />
13 |     </View>
14 |   );
15 | }
16 | 
17 | const styles = StyleSheet.create({
18 |   container: {
19 |     flex: 1,
20 |     alignItems: 'center',
21 |     justifyContent: 'center',
22 |   },
23 |   title: {
24 |     fontSize: 20,
25 |     fontWeight: 'bold',
26 |   },
27 |   separator: {
28 |     marginVertical: 30,
29 |     height: 1,
30 |     width: '80%',
31 |   },
32 | });
33 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "app",
 4 |     "slug": "app",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/images/icon.png",
 8 |     "scheme": "myapp",
 9 |     "userInterfaceStyle": "automatic",
10 |     "splash": {
11 |       "image": "./assets/images/splash.png",
12 |       "resizeMode": "contain",
13 |       "backgroundColor": "#ffffff"
14 |     },
15 |     "updates": {
16 |       "fallbackToCacheTimeout": 0
17 |     },
18 |     "assetBundlePatterns": [
19 |       "**/*"
20 |     ],
21 |     "ios": {
22 |       "supportsTablet": true
23 |     },
24 |     "android": {
25 |       "adaptiveIcon": {
26 |         "foregroundImage": "./assets/images/adaptive-icon.png",
27 |         "backgroundColor": "#ffffff"
28 |       }
29 |     },
30 |     "web": {
31 |       "favicon": "./assets/images/favicon.png"
32 |     }
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/navigation/LinkingConfiguration.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Learn more about deep linking with React Navigation
 3 |  * https://reactnavigation.org/docs/deep-linking
 4 |  * https://reactnavigation.org/docs/configuring-links
 5 |  */
 6 | 
 7 | import { LinkingOptions } from '@react-navigation/native';
 8 | import * as Linking from 'expo-linking';
 9 | 
10 | import { RootStackParamList } from '../types';
11 | 
12 | const linking: LinkingOptions<RootStackParamList> = {
13 |   prefixes: [Linking.makeUrl('/')],
14 |   config: {
15 |     screens: {
16 |       Root: {
17 |         screens: {
18 |           TabOne: {
19 |             screens: {
20 |               TabOneScreen: 'one',
21 |             },
22 |           },
23 |           TabTwo: {
24 |             screens: {
25 |               TabTwoScreen: 'two',
26 |             },
27 |           },
28 |         },
29 |       },
30 |       Modal: 'modal',
31 |       NotFound: '*',
32 |     },
33 |   },
34 | };
35 | 
36 | export default linking;
37 | 


--------------------------------------------------------------------------------
/api/api.ts:
--------------------------------------------------------------------------------
 1 | export class Api {
 2 |   baseUri: string;
 3 | 
 4 |   constructor(baseUri: string) {
 5 |     this.baseUri = baseUri;
 6 |   }
 7 | 
 8 | 
 9 |   public async getTest() {
10 |     try {
11 |       const response = await fetch(this.baseUri + '/test');
12 |       const json =  await response.json();
13 |       json.items.forEach((item) => {
14 |         item.original_audio_url = item.original_audio_url.replace('localhost', '10.21.21.8') + '/download.mp3';
15 |         item.processed_audio_url = item.processed_audio_url.replace('localhost', '10.21.21.8') + '/download.mp3';
16 |       })
17 |       return json;
18 |     } catch (error) {
19 |       // Handle the error.
20 |       console.log(error);
21 |     }
22 |     return null;
23 |   }
24 | 
25 |   public async getAudios() {
26 |     try {
27 |       const response = await fetch(this.baseUri + '/audio');
28 |       return await response.json();
29 |     } catch (error) {
30 |       // Handle the error.
31 |       console.log(error);
32 |     }
33 |     return null;
34 |   }
35 | 
36 | }
37 | 
38 | 


--------------------------------------------------------------------------------
/screens/NotFoundScreen.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { StyleSheet, TouchableOpacity } from 'react-native';
 3 | import { Text, View } from '../components/Themed';
 4 | 
 5 | import { RootStackScreenProps } from '../types';
 6 | 
 7 | export default function NotFoundScreen({ navigation }: RootStackScreenProps<'NotFound'>) {
 8 |   return (
 9 |     <View style={styles.container}>
10 |       <Text style={styles.title}>This screen doesn't exist.</Text>
11 |       <TouchableOpacity onPress={() => navigation.replace('Root')} style={styles.link}>
12 |         <Text style={styles.linkText}>Go to home screen!</Text>
13 |       </TouchableOpacity>
14 |     </View>
15 |   );
16 | }
17 | 
18 | const styles = StyleSheet.create({
19 |   container: {
20 |     flex: 1,
21 |     alignItems: 'center',
22 |     justifyContent: 'center',
23 |     padding: 20,
24 |   },
25 |   title: {
26 |     fontSize: 20,
27 |     fontWeight: 'bold',
28 |   },
29 |   link: {
30 |     marginTop: 15,
31 |     paddingVertical: 15,
32 |   },
33 |   linkText: {
34 |     fontSize: 14,
35 |     color: '#2e78b7',
36 |   },
37 | });
38 | 


--------------------------------------------------------------------------------
/hooks/useCachedResources.ts:
--------------------------------------------------------------------------------
 1 | import { FontAwesome } from '@expo/vector-icons';
 2 | import * as Font from 'expo-font';
 3 | import * as SplashScreen from 'expo-splash-screen';
 4 | import * as React from 'react';
 5 | 
 6 | export default function useCachedResources() {
 7 |   const [isLoadingComplete, setLoadingComplete] = React.useState(false);
 8 | 
 9 |   // Load any resources or data that we need prior to rendering the app
10 |   React.useEffect(() => {
11 |     async function loadResourcesAndDataAsync() {
12 |       try {
13 |         SplashScreen.preventAutoHideAsync();
14 | 
15 |         // Load fonts
16 |         await Font.loadAsync({
17 |           ...FontAwesome.font,
18 |           'space-mono': require('../assets/fonts/SpaceMono-Regular.ttf'),
19 |         });
20 |       } catch (e) {
21 |         // We might want to provide this error information to an error reporting service
22 |         console.warn(e);
23 |       } finally {
24 |         setLoadingComplete(true);
25 |         SplashScreen.hideAsync();
26 |       }
27 |     }
28 | 
29 |     loadResourcesAndDataAsync();
30 |   }, []);
31 | 
32 |   return isLoadingComplete;
33 | }
34 | 


--------------------------------------------------------------------------------
/screens/ModalScreen.tsx:
--------------------------------------------------------------------------------
 1 | import { StatusBar } from 'expo-status-bar';
 2 | import * as React from 'react';
 3 | import { Platform, StyleSheet } from 'react-native';
 4 | 
 5 | import EditScreenInfo from '../components/EditScreenInfo';
 6 | import { Text, View } from '../components/Themed';
 7 | 
 8 | export default function ModalScreen() {
 9 |   return (
10 |     <View style={styles.container}>
11 |       <Text style={styles.title}>Modal</Text>
12 |       <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
13 |       <EditScreenInfo path="/screens/ModalScreen.tsx" />
14 | 
15 |       {/* Use a light status bar on iOS to account for the black space above the modal */}
16 |       <StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
17 |     </View>
18 |   );
19 | }
20 | 
21 | const styles = StyleSheet.create({
22 |   container: {
23 |     flex: 1,
24 |     alignItems: 'center',
25 |     justifyContent: 'center',
26 |   },
27 |   title: {
28 |     fontSize: 20,
29 |     fontWeight: 'bold',
30 |   },
31 |   separator: {
32 |     marginVertical: 30,
33 |     height: 1,
34 |     width: '80%',
35 |   },
36 | });
37 | 


--------------------------------------------------------------------------------
/types.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Learn more about using TypeScript with React Navigation:
 3 |  * https://reactnavigation.org/docs/typescript/
 4 |  */
 5 | 
 6 | import { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
 7 | import { CompositeScreenProps, NavigatorScreenParams } from '@react-navigation/native';
 8 | import { NativeStackScreenProps } from '@react-navigation/native-stack';
 9 | 
10 | declare global {
11 |   namespace ReactNavigation {
12 |     interface RootParamList extends RootStackParamList {}
13 |   }
14 | }
15 | 
16 | export type RootStackParamList = {
17 |   Root: NavigatorScreenParams<RootTabParamList> | undefined;
18 |   Modal: undefined;
19 |   NotFound: undefined;
20 | };
21 | 
22 | export type RootStackScreenProps<Screen extends keyof RootStackParamList> = NativeStackScreenProps<
23 |   RootStackParamList,
24 |   Screen
25 | >;
26 | 
27 | export type RootTabParamList = {
28 |   TabOne: undefined;
29 |   TabTwo: undefined;
30 | };
31 | 
32 | export type RootTabScreenProps<Screen extends keyof RootTabParamList> = CompositeScreenProps<
33 |   BottomTabScreenProps<RootTabParamList, Screen>,
34 |   NativeStackScreenProps<RootStackParamList>
35 | >;
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "app",
 3 |   "version": "1.0.0",
 4 |   "main": "node_modules/expo/AppEntry.js",
 5 |   "scripts": {
 6 |     "start": "expo start",
 7 |     "android": "expo start --android",
 8 |     "ios": "expo start --ios",
 9 |     "web": "expo start --web",
10 |     "eject": "expo eject",
11 |     "test": "jest --watchAll"
12 |   },
13 |   "jest": {
14 |     "preset": "jest-expo"
15 |   },
16 |   "dependencies": {
17 |     "@expo/ngrok": "^2.4.3",
18 |     "@expo/vector-icons": "^12.0.0",
19 |     "@react-navigation/bottom-tabs": "^6.0.5",
20 |     "@react-navigation/native": "^6.0.2",
21 |     "@react-navigation/native-stack": "^6.1.0",
22 |     "cors": "^2.8.5",
23 |     "expo": "~43.0.2",
24 |     "expo-asset": "~8.4.3",
25 |     "expo-av": "~10.1.3",
26 |     "expo-constants": "~12.1.3",
27 |     "expo-font": "~10.0.3",
28 |     "expo-linking": "~2.4.2",
29 |     "expo-splash-screen": "~0.13.5",
30 |     "expo-status-bar": "~1.1.0",
31 |     "expo-web-browser": "~10.0.3",
32 |     "ngrok": "^4.2.2",
33 |     "react": "17.0.1",
34 |     "react-dom": "17.0.1",
35 |     "react-native": "0.64.3",
36 |     "react-native-safe-area-context": "3.3.2",
37 |     "react-native-screens": "~3.8.0",
38 |     "react-native-web": "0.17.1",
39 |     "@react-native-community/slider": "4.1.12"
40 |   },
41 |   "devDependencies": {
42 |     "@babel/core": "^7.12.9",
43 |     "@types/react": "~17.0.21",
44 |     "@types/react-native": "~0.64.12",
45 |     "jest-expo": "~43.0.0",
46 |     "typescript": "~4.3.5"
47 |   },
48 |   "private": true
49 | }
50 | 


--------------------------------------------------------------------------------
/components/Themed.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Learn more about Light and Dark modes:
 3 |  * https://docs.expo.io/guides/color-schemes/
 4 |  */
 5 | 
 6 | import * as React from 'react';
 7 | import { Text as DefaultText, View as DefaultView } from 'react-native';
 8 | 
 9 | import Colors from '../constants/Colors';
10 | import useColorScheme from '../hooks/useColorScheme';
11 | 
12 | export function useThemeColor(
13 |   props: { light?: string; dark?: string },
14 |   colorName: keyof typeof Colors.light & keyof typeof Colors.dark
15 | ) {
16 |   const theme = useColorScheme();
17 |   const colorFromProps = props[theme];
18 | 
19 |   if (colorFromProps) {
20 |     return colorFromProps;
21 |   } else {
22 |     return Colors[theme][colorName];
23 |   }
24 | }
25 | 
26 | type ThemeProps = {
27 |   lightColor?: string;
28 |   darkColor?: string;
29 | };
30 | 
31 | export type TextProps = ThemeProps & DefaultText['props'];
32 | export type ViewProps = ThemeProps & DefaultView['props'];
33 | 
34 | export function Text(props: TextProps) {
35 |   const { style, lightColor, darkColor, ...otherProps } = props;
36 |   const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
37 | 
38 |   return <DefaultText style={[{ color }, style]} {...otherProps} />;
39 | }
40 | 
41 | export function View(props: ViewProps) {
42 |   const { style, lightColor, darkColor, ...otherProps } = props;
43 |   const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
44 | 
45 |   return <DefaultView style={[{ backgroundColor }, style]} {...otherProps} />;
46 | }
47 | 


--------------------------------------------------------------------------------
/components/FrequencySlider.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { Text, View } from '../components/Themed';
 3 | import { Button, StyleSheet, TextInput } from 'react-native';
 4 | import Slider from '@react-native-community/slider';
 5 | 
 6 | export function FrequencySlider(props) {
 7 |   const [freq, setFreq] = React.useState(500);
 8 |   const onSlidingComplete = props.onSlidingComplete;
 9 | 
10 | 
11 |   const onTouchMove = function(val: number) {
12 |     setFreq(logslider(val));
13 |   };
14 | 
15 | 
16 |   const done = function(val: number) {
17 |     const guess = logslider(val);
18 |     onSlidingComplete(freq);
19 |   }
20 | 
21 |   return (
22 |     <View>
23 |       <Text>{freq}</Text>
24 |       <Slider
25 |         style={styles.slider}
26 |         minimumValue={0}
27 |         maximumValue={1}
28 |         value={0.5}
29 |         minimumTrackTintColor="#FFF000"
30 |         maximumTrackTintColor="#000000"
31 |         onValueChange={onTouchMove}
32 |         onSlidingComplete={done}
33 |       />
34 |     </View>
35 |   );
36 | }
37 | 
38 | function logslider(position: number) {
39 |   // position will be between 0 and 100
40 |   var minp = 0.0;
41 |   var maxp = 1.0;
42 | 
43 |   var minv = Math.log(20);
44 |   var maxv = Math.log(20000);
45 | 
46 |   // calculate adjustment factor
47 |   var scale = (maxv-minv) / (maxp-minp);
48 | 
49 |   return Math.ceil(Math.exp(minv + scale*(position-minp)));
50 | }
51 | 
52 | const styles = StyleSheet.create({
53 |   freqSlider: {
54 |     flex: 1,
55 |   },
56 |   slider: {
57 |     width: 200,
58 |     height: 40,
59 |   },
60 | });
61 | 


--------------------------------------------------------------------------------
/components/EditScreenInfo.tsx:
--------------------------------------------------------------------------------
 1 | import * as WebBrowser from 'expo-web-browser';
 2 | import React from 'react';
 3 | import { StyleSheet, TouchableOpacity } from 'react-native';
 4 | 
 5 | import Colors from '../constants/Colors';
 6 | import { MonoText } from './StyledText';
 7 | import { Text, View } from './Themed';
 8 | 
 9 | export default function EditScreenInfo({ path }: { path: string }) {
10 |   return (
11 |     <View>
12 |       <View style={styles.getStartedContainer}>
13 |         <Text
14 |           style={styles.getStartedText}
15 |           lightColor="rgba(0,0,0,0.8)"
16 |           darkColor="rgba(255,255,255,0.8)">
17 |           Open up the code for this screen:
18 |         </Text>
19 | 
20 |         <View
21 |           style={[styles.codeHighlightContainer, styles.homeScreenFilename]}
22 |           darkColor="rgba(255,255,255,0.05)"
23 |           lightColor="rgba(0,0,0,0.05)">
24 |           <MonoText>{path}</MonoText>
25 |         </View>
26 | 
27 |         <Text
28 |           style={styles.getStartedText}
29 |           lightColor="rgba(0,0,0,0.8)"
30 |           darkColor="rgba(255,255,255,0.8)">
31 |           Change any of the text, save the file, and your app will automatically update.
32 |         </Text>
33 |       </View>
34 | 
35 |       <View style={styles.helpContainer}>
36 |         <TouchableOpacity onPress={handleHelpPress} style={styles.helpLink}>
37 |           <Text style={styles.helpLinkText} lightColor={Colors.light.tint}>
38 |             Tap here if your app doesn't automatically update after making changes
39 |           </Text>
40 |         </TouchableOpacity>
41 |       </View>
42 |     </View>
43 |   );
44 | }
45 | 
46 | function handleHelpPress() {
47 |   WebBrowser.openBrowserAsync(
48 |     'https://docs.expo.io/get-started/create-a-new-app/#opening-the-app-on-your-phonetablet'
49 |   );
50 | }
51 | 
52 | const styles = StyleSheet.create({
53 |   getStartedContainer: {
54 |     alignItems: 'center',
55 |     marginHorizontal: 50,
56 |   },
57 |   homeScreenFilename: {
58 |     marginVertical: 7,
59 |   },
60 |   codeHighlightContainer: {
61 |     borderRadius: 3,
62 |     paddingHorizontal: 4,
63 |   },
64 |   getStartedText: {
65 |     fontSize: 17,
66 |     lineHeight: 24,
67 |     textAlign: 'center',
68 |   },
69 |   helpContainer: {
70 |     marginTop: 15,
71 |     marginHorizontal: 20,
72 |     alignItems: 'center',
73 |   },
74 |   helpLink: {
75 |     paddingVertical: 15,
76 |   },
77 |   helpLinkText: {
78 |     textAlign: 'center',
79 |   },
80 | });
81 | 


--------------------------------------------------------------------------------
/screens/TabOneScreen.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | import { useEffect, useState } from 'react';
  3 | import { StyleSheet, Button } from 'react-native';
  4 | import { Audio } from 'expo-av';
  5 | 
  6 | import EditScreenInfo from '../components/EditScreenInfo';
  7 | import { Text, View } from '../components/Themed';
  8 | import { RootTabScreenProps } from '../types';
  9 | 
 10 | 
 11 | function AudioPlayer(props) {
 12 |   var playingIndex = 0;
 13 |   const playing = false;
 14 |   const sounds: Audio.Sound[] = [];
 15 | 
 16 |   const uris = props.uris;
 17 | 
 18 | 
 19 |   console.log(uris);
 20 |   const initialStatus = {
 21 |     shouldPlay: false,
 22 |     rate: 1.0,
 23 |     shouldCorrectPitch: false,
 24 |     volume: 1.0,
 25 |     isMuted: false,
 26 |     isLooping: true,
 27 |   };
 28 | 
 29 | 
 30 |   const makePlay = function(idx: number) {
 31 |     return function() {
 32 |       sounds[playingIndex].stopAsync();
 33 |       sounds[idx].playAsync();
 34 |       playingIndex = idx;
 35 |     };
 36 |   }
 37 | 
 38 |   const parts = [];
 39 | 
 40 |   for (var i = 0; i < uris.length; i++) {
 41 |     const source = { uri: uris[i] };
 42 | 
 43 |     try {
 44 |       sounds[i] = new Audio.Sound();
 45 |       sounds[i].loadAsync(
 46 |         source,
 47 |         initialStatus,
 48 |         false
 49 |       );
 50 | 
 51 |       const title = "BUTTON " + i;
 52 | 
 53 |       parts.push(<Button onPress={makePlay(i)} title={title}/>);
 54 |     } catch (error) {
 55 |       console.log(`An error occurred: ${error}`);
 56 |     }
 57 |   }
 58 | 
 59 | 
 60 | 
 61 |   return parts;
 62 | }
 63 | 
 64 | export default function TabOneScreen({ navigation }: RootTabScreenProps<'TabOne'>) {
 65 |   const [uris, setUris] = useState([]);
 66 | 
 67 |   const getUris = async() => {
 68 |     const api = new Api('http://localhost:8080');
 69 |     const json = await api.getAudios();
 70 |     setUris(json.audios.map((a) => { return "http://localhost:8080/audio/" + a.ID }));
 71 |   };
 72 | 
 73 | 
 74 |   useEffect(() => {
 75 |     getUris();
 76 |   }, []);
 77 | 
 78 |   return (
 79 |     <View style={styles.container}>
 80 |       <Text style={styles.title}>EQ Test</Text>
 81 |       <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
 82 |       <AudioPlayer uris={uris}/>
 83 |       <EditScreenInfo path="/screens/TabOneScreen.tsx" />
 84 |     </View>
 85 |   );
 86 | }
 87 | 
 88 | 
 89 | class TestItem {
 90 |   uri: string;
 91 |   name: string;
 92 | 
 93 |   constructor(name: string, uri: string) {
 94 |     this.name = name;
 95 |     this.uri = uri;
 96 |   }
 97 | }
 98 | 
 99 | const styles = StyleSheet.create({
100 |   container: {
101 |     flex: 1,
102 |     alignItems: 'center',
103 |     justifyContent: 'center',
104 |   },
105 |   title: {
106 |     fontSize: 20,
107 |     fontWeight: 'bold',
108 |   },
109 |   separator: {
110 |     marginVertical: 30,
111 |     height: 1,
112 |     width: '80%',
113 |   },
114 | });
115 | 


--------------------------------------------------------------------------------
/navigation/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * If you are not familiar with React Navigation, refer to the "Fundamentals" guide:
 3 |  * https://reactnavigation.org/docs/getting-started
 4 |  *
 5 |  */
 6 | import { FontAwesome } from '@expo/vector-icons';
 7 | import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 8 | import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
 9 | import { createNativeStackNavigator } from '@react-navigation/native-stack';
10 | import * as React from 'react';
11 | import { ColorSchemeName, Pressable } from 'react-native';
12 | 
13 | import Colors from '../constants/Colors';
14 | import useColorScheme from '../hooks/useColorScheme';
15 | import ModalScreen from '../screens/ModalScreen';
16 | import NotFoundScreen from '../screens/NotFoundScreen';
17 | import TabOneScreen from '../screens/TabOneScreen';
18 | import TabTwoScreen from '../screens/TabTwoScreen';
19 | import { RootStackParamList, RootTabParamList, RootTabScreenProps } from '../types';
20 | import LinkingConfiguration from './LinkingConfiguration';
21 | 
22 | export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
23 |   return (
24 |     <NavigationContainer
25 |       linking={LinkingConfiguration}
26 |       theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
27 |       <RootNavigator />
28 |     </NavigationContainer>
29 |   );
30 | }
31 | 
32 | /**
33 |  * A root stack navigator is often used for displaying modals on top of all other content.
34 |  * https://reactnavigation.org/docs/modal
35 |  */
36 | const Stack = createNativeStackNavigator<RootStackParamList>();
37 | 
38 | function RootNavigator() {
39 |   return (
40 |     <Stack.Navigator>
41 |       <Stack.Screen name="Root" component={BottomTabNavigator} options={{ headerShown: false }} />
42 |       <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
43 |       <Stack.Group screenOptions={{ presentation: 'modal' }}>
44 |         <Stack.Screen name="Modal" component={ModalScreen} />
45 |       </Stack.Group>
46 |     </Stack.Navigator>
47 |   );
48 | }
49 | 
50 | /**
51 |  * A bottom tab navigator displays tab buttons on the bottom of the display to switch screens.
52 |  * https://reactnavigation.org/docs/bottom-tab-navigator
53 |  */
54 | const BottomTab = createBottomTabNavigator<RootTabParamList>();
55 | 
56 | function BottomTabNavigator() {
57 |   const colorScheme = useColorScheme();
58 | 
59 |   return (
60 |     <BottomTab.Navigator
61 |       initialRouteName="TabTwo"
62 |       screenOptions={{
63 |         tabBarActiveTintColor: Colors[colorScheme].tint,
64 |       }}>
65 |       <BottomTab.Screen
66 |         name="TabTwo"
67 |         component={TabTwoScreen}
68 |         options={{
69 |           title: 'EQ Test',
70 |           tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
71 |         }}
72 |       />
73 |     </BottomTab.Navigator>
74 |   );
75 | }
76 | 
77 | /**
78 |  * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
79 |  */
80 | function TabBarIcon(props: {
81 |   name: React.ComponentProps<typeof FontAwesome>['name'];
82 |   color: string;
83 | }) {
84 |   return <FontAwesome size={30} style={{ marginBottom: -3 }} {...props} />;
85 | }
86 | 


--------------------------------------------------------------------------------
/components/EQTest.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | import { Button, StyleSheet, TextInput } from 'react-native';
  3 | import { Text, View } from '../components/Themed';
  4 | 
  5 | import { MultiAudioPlayer } from '../components/AudioPlayer';
  6 | import { FrequencySlider } from '../components/FrequencySlider';
  7 | import Toast from 'react-native-root-toast';
  8 | import { Api } from '../api/api';
  9 | 
 10 | export function EQTest() {
 11 |   const [number, onChangeNumber] = React.useState(null);
 12 |   const [testItems, setTestItems] = React.useState([]);
 13 |   const [testItem, setTestItem] = React.useState(null);
 14 |   const [testItemIdx, setTestItemIdx] = React.useState(0);
 15 | 
 16 |   const api = new Api('http://10.21.21.8:8080');
 17 | 
 18 |   const getTest = function() {
 19 |     const test = api.getTest().then((test) => { setTestItems(test.items); });
 20 |   };
 21 | 
 22 |   const [score, setScore] = React.useState(0);
 23 |   const [lives, setLives] = React.useState(3);
 24 | 
 25 |   const showTestItem = function() {
 26 |     if (testItems.length === 0) { return; }
 27 |     setTestItem(testItems[testItemIdx]);
 28 |   }
 29 | 
 30 |   React.useEffect(getTest, []);
 31 |   React.useEffect(showTestItem, [testItems, testItemIdx]);
 32 | 
 33 | 
 34 | 
 35 |   const makeGuess = function(guessedFrequency: number) {
 36 |     console.log('you guessed', guessedFrequency);
 37 |     const perfectTolerance = testItem.perfect_tolerance * testItem.boosted_frequency;
 38 |     const perfectMin = testItem.boosted_frequency - perfectTolerance;
 39 |     const perfectMax = testItem.boosted_frequency + perfectTolerance;
 40 | 
 41 |     const okTolerance = testItem.tolerance * testItem.boosted_frequency;
 42 |     const okMin = testItem.boosted_frequency - okTolerance;
 43 |     const okMax = testItem.boosted_frequency + okTolerance;
 44 | 
 45 |     if (guessedFrequency > perfectMin && guessedFrequency < perfectMax) {
 46 |       alert('perfect');
 47 |       setScore(score+5);
 48 |     } else if (guessedFrequency > okMin && guessedFrequency < okMax) {
 49 |       setScore(score+1);
 50 |       alert('good');
 51 |     } else {
 52 |       setLives(lives-1);
 53 |       alert('no good');
 54 |     }
 55 | 
 56 |     setTestItemIdx(testItemIdx+1);
 57 |   }
 58 | 
 59 |   //const player = // React.useMemo(() =>
 60 |     //React.createElement(MultiAudioPlayer, {uris: getUris(testItem)}) // , [testItem]);
 61 |   //
 62 | 
 63 |   if (lives < 1) {
 64 |     return (
 65 |       <View style={styles.container}>
 66 |         <Text style={styles.title}>YOU DEAD</Text>
 67 |       </View>
 68 |     )
 69 |   }
 70 | 
 71 |   return (
 72 |     <View style={styles.container}>
 73 |       <Text style={styles.title}>Score: {score}</Text>
 74 |       <Text style={styles.title}>Lives: {lives}</Text>
 75 |       <Text style={styles.title}>Enter the boosted frequency!</Text>
 76 |       <MultiAudioPlayer uris={getUris(testItem)} />
 77 | 
 78 |       <FrequencySlider onSlidingComplete={makeGuess} />
 79 | 
 80 |       <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
 81 |     </View>
 82 |   )
 83 | }
 84 | 
 85 | const styles = StyleSheet.create({
 86 |   container: {
 87 |     flex: 1,
 88 |     alignItems: 'center',
 89 |     justifyContent: 'center',
 90 |   },
 91 |   title: {
 92 |     fontSize: 20,
 93 |     fontWeight: 'bold',
 94 |   },
 95 |   separator: {
 96 |     marginVertical: 30,
 97 |     height: 1,
 98 |     width: '80%',
 99 |   },
100 |   slider: {
101 |     width: 200,
102 |     height: 1,
103 |   },
104 | });
105 | 
106 | function getUris(testItem: any) {
107 |   if (!testItem) {
108 |     return [];
109 |   }
110 | 
111 |   return [
112 |     testItem['original_audio_url'],
113 |     testItem['processed_audio_url'],
114 |   ];
115 | }
116 | 


--------------------------------------------------------------------------------
/components/AudioPlayer.tsx:
--------------------------------------------------------------------------------
  1 | import { Audio, AVPlaybackStatusToSet, AVPlaybackStatus } from 'expo-av';
  2 | import * as React from 'react';
  3 | import { StyleSheet, Button, Text, TextInput } from 'react-native';
  4 | import { View } from '../components/Themed';
  5 | 
  6 | export function MultiAudioPlayer({ uris }) {
  7 |   const [loading, setLoading] = React.useState(false);
  8 | 
  9 |   const initialState = {
 10 |     uris: [],
 11 |     buttons: [],
 12 |     sounds: [],
 13 |     activeIndex: 0,
 14 |   };
 15 | 
 16 |   function reset(state) {
 17 |     console.log('resetting state...');
 18 |     return state;
 19 |   }
 20 | 
 21 |   const [state, dispatch] =  React.useReducer(reducer, initialState, reset);
 22 | 
 23 |   console.log('rerendering');
 24 |   console.log(state);
 25 | 
 26 | 
 27 | 
 28 |   function reducer(state, action) {
 29 |     switch (action.type) {
 30 |       case 'replaceUris':
 31 |         if (loading || action.uris.length === 0) {
 32 |           return state;
 33 |         }
 34 | 
 35 |         if (arraysAreEqual(state.uris, action.uris)) {
 36 |           return state;
 37 |         }
 38 | 
 39 |         console.log(state);
 40 |         setLoading(true);
 41 |         unloadAll(state.sounds);
 42 |         playAllSounds(action.uris);
 43 |         return { ...state, uris: action.uris, activeIndex: 0 };
 44 | 
 45 |       case 'play':
 46 |         startAllSounds(state.sounds)
 47 |         toggleMutes(state.sounds, action.index);
 48 |         //toggleButtons(state.buttons, action.index);
 49 |         return { ...state, activeIndex: action.index };
 50 | 
 51 |       case 'setSounds':
 52 |         setLoading(false);
 53 |         return { ...state,  uris: action.uris, sounds: action.sounds };
 54 | 
 55 |       default:
 56 |         throw(`invalid action type: ${action.type}`);
 57 |     }
 58 |   }
 59 | 
 60 |   function unloadAll(sounds: Array<Audio.Sound>) {
 61 |     for (var i = 0; i < sounds.length; i++) {
 62 |       sounds[i].unloadAsync();
 63 |     }
 64 |   }
 65 | 
 66 | 
 67 |   React.useEffect(() => {
 68 |     dispatch({type: 'replaceUris', uris: uris});
 69 |   }, [uris]);
 70 | 
 71 | 
 72 | 
 73 |   function toggleMutes(sounds: Array<Audio.Sound>, soundIdx: number) {
 74 |     for (var i = 0; i < sounds.length; i++) {
 75 |       var sound = sounds[i];
 76 |       try {
 77 |         //sound.setIsMutedAsync(i != soundIdx);
 78 |         const vol = i == soundIdx ? 1.0 : 0.0;
 79 |         //const vol = 0;
 80 |         console.log('setting', i, 'volume to:', vol);
 81 |         sound.setVolumeAsync(vol);
 82 |       } catch (e) {
 83 |         console.log(e);
 84 |       }
 85 |     }
 86 |   }
 87 | 
 88 |   async function startAllSounds(sounds: Array<Audio.Sound>) {
 89 |     for (var i = 0; i < sounds.length; i++) {
 90 |       const status: AVPlaybackStatus = await sounds[i].getStatusAsync();
 91 |       if (!status.isPlaying)  sounds[i].playAsync();
 92 |     }
 93 |   };
 94 | 
 95 |   const initialStatus = {
 96 |     shouldPlay: true,
 97 |     rate: 1.0,
 98 |     shouldCorrectPitch: false,
 99 |     volume: 1.0,
100 |     isMuted: false,
101 |     isLooping: true,
102 |   };
103 | 
104 |   function makeButtons() {
105 |     const buttons = [];
106 |     for (var i = 0; i < state.uris.length; i++) {
107 |       const idx = i;
108 |       const title = i == 0 ? "PRE-EQ" : "POST-EQ";
109 |       const color = i == state.activeIndex ? colors.activeButtonColor : colors.inactiveButtonColor;
110 |       buttons.push(<Button
111 |         key={i}
112 |         color={color}
113 |         onPress={() => dispatch({type: 'play', index: idx})}
114 |         title={title}
115 |       />);
116 |     }
117 |     return buttons;
118 |   }
119 | 
120 |   async function playAllSounds(uris: Array<string>) {
121 |     console.log('playing sounds: ', uris);
122 |     const sounds: Array<Audio.Sound> = [];
123 | 
124 |     for (var i = 0; i < uris.length; i++) {
125 |       const source = { uri: uris[i] };
126 |       const sound = new Audio.Sound();
127 |       await sound.loadAsync(source, { ...initialStatus, volume: i == 0 ? 1 : 0 }, false);
128 |       sounds.push(sound);
129 | 
130 |       const key = `audio_${i}`;
131 |       const idx = i;
132 |     }
133 |     dispatch({type: 'setSounds', uris, sounds});
134 |   }
135 | 
136 |   if (loading) {
137 |     return (<><Text>Loading...</Text></>);
138 |   }
139 | 
140 |   const buttons = makeButtons();
141 |   console.log(buttons);
142 | 
143 |   return (
144 |     <View>
145 |       <View style={styles.buttons}>
146 |         {makeButtons()}
147 |       </View>
148 |     </View>
149 |   );
150 | }
151 | 
152 | const styles = StyleSheet.create({
153 |   buttons: {
154 |     flexDirection: 'row',
155 |     justifyContent: 'space-evenly',
156 |     flex: 1,
157 |     margin: 5,
158 |   },
159 | });
160 | 
161 | const colors = {
162 |   activeButtonColor: 'green',
163 |   inactiveButtonColor: 'red'
164 | }
165 | 
166 | 
167 | function arraysAreEqual(a: Array<any>, b: Array<any>) {
168 |   if (a.length !== b.length) {
169 |     return false;
170 |   }
171 |   for (var i = 0; i < a.length; i++) {
172 |     if (a[i] !== b[i]) {
173 |       return false;
174 |     }
175 |   }
176 |   return true;
177 | }
178 | 


--------------------------------------------------------------------------------