Audio handler & Credit

Author: hmziqrs

app/components/Icon.js

@@ -3,30 +3,36 @@ import PropTypes from 'prop-types';
 import { Animated } from 'react-native';
 import Icons from 'react-native-vector-icons/MaterialIcons';
 import CommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import * as Animatable from 'react-native-animatable';
 
 const CommunityIconsAnimated = Animated.createAnimatedComponent(CommunityIcons);
+const CommunityIconsAnimatable = Animatable.createAnimatableComponent(CommunityIcons);
 const IconsAnimated = Animated.createAnimatedComponent(Icons);
 
-export function Icon({ animated, type, innerRef, ...props }) {
+export function Icon({ animated, animatable, type, innerRef, ...props }) {
   let Comp = Icons;
   if (animated) {
     Comp = IconsAnimated;
   }
-  if (type === 'community' && !animated) {
+  if (type === 'community' && !animated && !animatable) {
     Comp = CommunityIcons;
   } else if (type === 'community' && animated) {
     Comp = CommunityIconsAnimated;
+  } else if (type === 'community' && animatable) {
+    Comp = CommunityIconsAnimatable;
   }
 
   return <Comp ref={innerRef} {...props} />;
 }
 
 Icon.propTypes = {
+  animatable: PropTypes.bool,
   animated: PropTypes.bool,
   type: PropTypes.oneOf(['community']),
   innerRef: PropTypes.func,
 };
 Icon.defaultProps = {
+  animatable: false,
   animated: false,
   type: 'community',
   innerRef: () => {},

app/contexts/Settings/index.js

@@ -1,5 +1,6 @@
-import React, { createContext, useState, useEffect } from 'react';
+import React, { createContext, useState } from 'react';
 import AsyncStorage from '@react-native-community/async-storage';
+import { Player } from '@react-native-community/audio-toolkit';
 import PropTypes from 'prop-types';
 
 export const SettingsContext = createContext();
@@ -8,35 +9,75 @@ const KEYS = {
   MP3: 'default_mp3',
 };
 
-const mp3s = {
+export const MP3S = {
   ambient: 'ambient.mp3',
   forest: 'forest.mp3',
-  paino: 'paino.mp3',
+  paino: 'piano.mp3',
+};
+
+const playerConfig = {
+  continuesToPlayInBackground: false,
+  autoDestroy: false,
 };
 
 export default function SettingsContextProvider({ children }) {
   const [state, setState] = useState({
     init: false,
-    defaultMp3: mp3s.paino,
+    mp3: MP3S.paino,
   });
+  function getNewPlayer(mp3, play = false, cache = false) {
+    const newPlayer = new Player(mp3, playerConfig);
+    newPlayer.looping = true;
+    if (play) {
+      newPlayer.prepare((err) => {
+        if (!err) {
+          newPlayer.play();
+        }
+      });
+    }
+    if (cache) {
+      AsyncStorage.setItem(KEYS.MP3, mp3);
+    }
+    return newPlayer;
+  }
+  const [player, setPlayer] = useState(getNewPlayer(MP3S.paino));
+  const safeSetState = (newState) => setState({ ...state, ...newState });
+  const safeSetPlayer = (mp3, ...p) => {
+    setPlayer(getNewPlayer(mp3, ...p));
+    safeSetState({ mp3 });
+  };
 
   async function initApp() {
     try {
       const cache = await AsyncStorage.getItem(KEYS.MP3);
-      console.log('CACHE', cache);
-      setState({ ...state, init: true });
+      if (cache && cache !== state.mp3) {
+        safeSetState({ ...state, init: true, mp3: cache });
+        safeSetPlayer(cache);
+      } else {
+        safeSetState({ init: true });
+      }
     } catch (e) {
       // e
     }
   }
 
-  useEffect(() => {
-    if (!state.init) {
-      initApp();
-    }
-  }, [state.init]);
+  if (!state.init) {
+    initApp();
+  }
 
-  return <SettingsContext.Provider value={{ ...state }}>{children}</SettingsContext.Provider>;
+  return (
+    <SettingsContext.Provider
+      value={{
+        ...state,
+        player,
+        getPlayer: () => player,
+        setState: safeSetState,
+        setPlayer: safeSetPlayer,
+      }}
+    >
+      {children}
+    </SettingsContext.Provider>
+  );
 }
 
 SettingsContextProvider.propTypes = {

app/engine/index.js

@@ -3,8 +3,6 @@ import { useState, useEffect, useMemo } from 'react';
 import { captureRef } from 'react-native-view-shot';
 import share from 'react-native-share';
 
-// import { initLayout } from 'utils/ui';
-
 import { rotateBox, calculateSuccess, data2Grid } from './utils';
 import * as UI from './utils/ui';
 

app/index.js

@@ -44,11 +44,9 @@ function App() {
   });
 
   return (
-    <>
-      <SettingsContextProvider>
-        <Navigator onNavigationStateChange={onRouteChange} />
-      </SettingsContextProvider>
-    </>
+    <SettingsContextProvider>
+      <Navigator onNavigationStateChange={onRouteChange} />
+    </SettingsContextProvider>
   );
 }
 

app/screens/AboutApp/index.js

@@ -19,6 +19,16 @@ const links = [
     label: 'Original App',
     url: 'https://play.google.com/store/apps/details?id=com.balysv.loop',
   },
+  {
+    icon: 'apple',
+    label: 'Original App',
+    url: 'https://apps.apple.com/us/app/infinity-loop-endless-zen/id977028266',
+  },
+  {
+    icon: 'web',
+    label: 'Orange Free Sounds',
+    url: 'http://www.orangefreesounds.com/',
+  },
 ];
 
 function AboutAppScreen({ navigation }) {
@@ -29,12 +39,15 @@ function AboutAppScreen({ navigation }) {
       <Text style={styles.description2}>
         I crafted this app becuase I wanted to understand how does loop game calculate result &
         figure out a way to implement the game interface in React Native Eco-system as much as
-        possible with all the good animations & themes. So I implemented first 13 levels with clean
-        code, good architecture & no redux.
+        possible with all the good animations & themes. So I implemented few levels with clean code,
+        good architecture & no redux.
       </Text>
       <Text style={styles.note}>
         Original app & Github code&apos;s link is shared below & any peice of code is free to use
       </Text>
+      <Text style={styles.note}>
+        All musics are downloaded from orangefreesounds.com. Link is shared below
+      </Text>
       <View style={styles.buttonsHolder}>
         {links.map((link) => (
           <TouchNative

app/screens/Home/index.js

@@ -1,8 +1,11 @@
-import React from 'react';
+import React, { useEffect, useContext } from 'react';
 import { View, Text } from 'react-native';
+import { useIsFocused } from 'react-navigation-hooks';
 import PropTypes from 'prop-types';
 import { TouchNative } from 'rn-hgl';
 
+import { SettingsContext } from 'contexts/Settings';
+
 import PageView from 'components/PageView';
 
 import styles from './styles';
@@ -15,6 +18,13 @@ const links = [
 ];
 
 function HomeScreen({ navigation }) {
+  const isFocused = useIsFocused();
+  const state = useContext(SettingsContext);
+  useEffect(() => {
+    if (isFocused) {
+      state.player.pause();
+    }
+  }, [isFocused]);
   return (
     <PageView navigation={navigation} style={styles.container}>
       <Text style={styles.title}>Welcome</Text>

app/screens/Level/index.js

@@ -1,8 +1,10 @@
-import React, { useRef } from 'react';
+import React, { useRef, useContext, useEffect } from 'react';
 import { View, StatusBar, Animated } from 'react-native';
 import PropTypes from 'prop-types';
 import { TouchNative } from 'rn-hgl';
 
+import { SettingsContext } from 'contexts/Settings';
+
 import PageView from 'components/PageView';
 import Icon from 'components/Icon';
 
@@ -17,7 +19,7 @@ export default function LevelScreen({ navigation }) {
   const { params } = navigation.state;
   const forceLevel = parseInt(params.level, 10) || 1;
   const { toggle, setToggle } = useToggle();
-
+  const state = useContext(SettingsContext);
   const {
     level,
     size,
@@ -31,12 +33,21 @@ export default function LevelScreen({ navigation }) {
   } = useEngine(forceLevel, toggle);
   const ref = useRef();
 
+  useEffect(() => {
+    if (!state.player.isPlaying) {
+      state.player.play();
+    }
+    return () => {
+      state.player.pause();
+    };
+  }, ['hard-code']);
+
   const bgStyle = { flex: 1, backgroundColor: animateColor('primary', 'primary') };
   return (
-    <Animated.View style={bgStyle}>
+    <Animated.View ref={ref} style={bgStyle}>
       <PageView key={level} navigation={navigation} baseStyle={styles.transparent}>
         <StatusBar animated barStyle={success ? 'light-content' : 'dark-content'} />
-        <View ref={ref} style={[styles.gridContainer]}>
+        <View style={[styles.gridContainer]}>
           <Animated.Text style={[styles.currentLevel, { color: animateColor('accent', 'accent') }]}>
             #{level}
           </Animated.Text>