Miha/Kevin Audio Download/Delete

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "git.ignoreLimitWarning": true
 }

App.tsx

@@ -3,7 +3,10 @@ import * as Font from 'expo-font';
 import * as SplashScreen from 'expo-splash-screen';
 import { useCallback, useEffect, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
+
 import RootNavigation from './src/navigation/RootNavigator';
+// import QueriesDemo from './src/firebase/QueriesDemo';
+// import AudioDemos from './src/firebase/AudioDemos';
 
 async function loadResourcesAsync() {
   await Promise.all([
@@ -50,12 +53,14 @@ export default function App() {
       // loading its initial state and rendering its first pixels. So instead,
       // we hide the splash screen once we know the root view has already
       // performed layout.
+
       await SplashScreen.hideAsync();
     }
   }, [resourcesLoaded]);
 
   return !resourcesLoaded ? null : (
     <View style={styles.container} onLayout={onLayoutRootView}>
+      {/* <AudioDemos /> */}
       <RootNavigation />
     </View>
   );

package.json

@@ -12,32 +12,41 @@
     "prettier:fix": "npx prettier --write ."
   },
   "dependencies": {
+    "@expo/webpack-config": "^18.0.1",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-navigation/bottom-tabs": "^6.5.7",
     "@react-navigation/native": "^6.1.4",
     "@react-navigation/native-stack": "^6.9.12",
     "@react-navigation/stack": "^6.3.16",
+    "@types/node": "^18.15.3",
+    "audio": "^1.2.0",
     "dotenv": "^16.0.3",
-    "expo": "~47.0.12",
-    "expo-build-properties": "~0.4.1",
-    "expo-font": "~11.0.1",
-    "expo-splash-screen": "~0.17.5",
-    "expo-status-bar": "~1.4.2",
+    "expo": "^48.0.6",
+    "expo-av": "~13.2.1",
+    "expo-build-properties": "~0.5.1",
+    "expo-file-system": "~15.2.2",
+    "expo-font": "~11.1.1",
+    "expo-splash-screen": "~0.18.1",
+    "expo-status-bar": "~1.4.4",
     "firebase": "^9.17.2",
+    "fs": "^0.0.1-security",
+    "http": "^0.0.1-security",
+    "https": "^1.0.0",
     "i18next": "^22.4.10",
-    "react": "18.1.0",
+    "mediaplayer": "^2.0.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-i18next": "^12.1.5",
-    "react-native": "0.70.5",
+    "react-native": "0.71.6",
     "react-native-dotenv": "^3.4.7",
-    "react-native-gesture-handler": "~2.8.0",
-    "react-native-reanimated": "~2.12.0",
-    "react-native-safe-area-context": "4.4.1",
-    "react-native-screens": "~3.18.0",
+    "react-native-gesture-handler": "~2.9.0",
+    "react-native-reanimated": "~2.14.4",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "~3.20.0",
     "react-native-svg": "13.4.0",
+    "react-native-web": "~0.18.10",
     "react-navigation": "^4.4.4",
-    "react-native-web": "~0.18.9",
-    "react-dom": "18.1.0",
-    "@expo/webpack-config": "^0.17.2"
+    "uri": "^0.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

src/firebase/AudioDemos.tsx

@@ -0,0 +1,57 @@
+/**
+ * Simple demo component that renders a list of all grants.
+ */
+
+import { useState } from 'react';
+import { Button, Text, TextInput, View } from 'react-native';
+import { getInfoAsync } from 'expo-file-system';
+import { Audio } from '../types/schema';
+// import { getAllAudio, getAudioID } from './queries/audioQueries';
+import { downLoadAudio, deleteAudio } from './queries/audioPlayback';
+
+export default function QueriesDemo() {
+  const [audio] = useState<Audio[]>([]);
+  // eslint-disable-next-line camelcase
+  const [audio_id, setAudioId] = useState<string>('');
+  /* fetch all audio on page load */
+  const handlePress = async () => {
+    const audios = await downLoadAudio(audio_id);
+    const didItDownload = await getInfoAsync(audios);
+    // eslint-disable-next-line no-console
+    console.log(didItDownload);
+
+    deleteAudio(audios);
+    const didItDelete = await getInfoAsync(audios);
+    // eslint-disable-next-line no-console
+    console.log(didItDelete);
+  };
+
+  // useEffect(() => {
+  //   const fetchData2 = async () => {
+  //     try {
+  //       console.log('hello');
+  //       const allAudio1 = await downLoadAudio('1420969939');
+  //       console.log(allAudio1);
+  //     } catch (error) {
+  //       // eslint-disable-next-line no-console
+  //       console.error('(useEffect)[AudioDemos]', error);
+  //     }
+  //   };
+  //   fetchData2();
+  // }, []);
+
+  return (
+    <View>
+      <Text>{`All Audio (${audio.length})`}</Text>
+      {audio.map(audios => (
+        <View key={audios.audio_id}>
+          <Text>{`title: ${audios.title} | id: ${audios.audio_id}`}</Text>
+          <Text>{`description: ${audios.description}`}</Text>
+          <Text>{`link: ${audios.gcsLink}`}</Text>
+        </View>
+      ))}
+      <TextInput placeholder="ID to be queried" onChangeText={setAudioId} />
+      <Button title="Download" onPress={() => handlePress()} />
+    </View>
+  );
+}

src/firebase/firebaseApp.ts

@@ -11,5 +11,6 @@ const firebaseConfig = {
 };
 
 const firebaseApp = initializeApp(firebaseConfig);
+// console.log(firebaseConfig);
 
 export default firebaseApp;

src/firebase/queries/audioPlayback.ts

@@ -0,0 +1,24 @@
+import {
+  documentDirectory,
+  createDownloadResumable,
+  deleteAsync,
+} from 'expo-file-system';
+import { getAudioID } from './audioQueries';
+
+export const downLoadAudio = async (audioID: string): Promise<string> => {
+  const name = audioID;
+  const url = (await getAudioID(audioID)).gcsLink;
+  const dir = `${documentDirectory}${name}.mp3`;
+  const downLoadable = createDownloadResumable(url, dir, {});
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const uri = await downLoadable.downloadAsync();
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+  }
+  return dir;
+};
+
+export const deleteAudio = async (audioPath: string): Promise<void> =>
+  deleteAsync(audioPath);

src/firebase/queries/audioQueries.ts

@@ -0,0 +1,64 @@
+import {
+  collection,
+  doc,
+  DocumentSnapshot,
+  getDoc,
+  getDocs,
+  getFirestore,
+} from 'firebase/firestore';
+import { Audio } from '../../types/schema';
+import firebaseApp from '../firebaseApp';
+
+const db = getFirestore(firebaseApp);
+
+const parseAudio = async (docSnap: DocumentSnapshot) => {
+  const data = docSnap.data();
+
+  const audio = {
+    audio_id: data?.audio_id,
+    title: data?.title,
+    description: data?.description,
+    authors: data?.authors,
+    audio_file: data?.audio_file,
+    soundCloud: data?.soundCloud,
+    theme: data?.theme,
+    gcsLink: data?.gcsLink,
+    thumbnail: data?.thumbnail,
+  };
+
+  return audio as Audio;
+};
+
+/**
+ * Get all grants from the `grants` collection.
+ */
+export const getAllAudio = async (): Promise<Audio[]> => {
+  try {
+    const itemsRef = collection(db, 'audio');
+    const promises: Promise<Audio>[] = [];
+    const docSnap = await getDocs(itemsRef);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    docSnap.forEach((audio: any) => {
+      promises.push(parseAudio(audio));
+    });
+    const audio = await Promise.all(promises);
+    return audio;
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn(e);
+    throw e;
+  }
+};
+
+export const getAudioID = async (audioId: string): Promise<Audio> => {
+  try {
+    const docRef = doc(db, 'audio', audioId);
+    const docSnap = await getDoc(docRef);
+    return await parseAudio(docSnap);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+    throw e;
+  }
+};

src/screens/PlayScreen/Play.tsx

@@ -1,9 +1,46 @@
-import { Image, Text, View } from 'react-native';
+// import { Image, Text, View } from 'react-native';
+import { useState } from 'react';
+import { Button, Image, Text, TextInput, View } from 'react-native';
+import { getInfoAsync } from 'expo-file-system';
 import Icon from '../../../assets/icons';
 import Colors from '../../styles/Colors';
 import styles from './styles';
+import { getAudioID } from '../../firebase/queries/audioQueries';
+
+import {
+  downLoadAudio,
+  deleteAudio,
+} from '../../firebase/queries/audioPlayback';
+
+// export const getImage = async (audioID: string): Promise<string> => {
+//    const thumNail =  (await getAudioID(audioID)).thumbnail;
+//       return thumNail
+//  }
 
 function PlayScreen() {
+  const [audioId, setAudioId] = useState<string>('');
+  // eslint-disable-next-line no-var
+  // var a = '';
+  // getImage(audioId).then((holder) => {
+
+  //   a = holder
+  //   console.log('INSIDE');
+  //   console.log(a);
+  // });
+
+  /* fetch all audio on page load */
+  const handlePress = async () => {
+    const audios = await downLoadAudio(audioId);
+    const didItDownload = await getInfoAsync(audios);
+    // eslint-disable-next-line no-console
+    console.log(didItDownload);
+
+    deleteAudio(audios);
+    const didItDelete = await getInfoAsync(audios);
+    // eslint-disable-next-line no-console
+    console.log(didItDelete);
+  };
+
   return (
     <View style={styles.container}>
       <View
@@ -22,7 +59,19 @@ function PlayScreen() {
         </Text>
       </View>
       <View style={styles.container2}>
+        {/* <Image
+          {styles={
+            height: 275,
+            width: 275,
+            backgroundColor: Colors.surfaceGrey,
+            borderRadius: 9.5,
+            marginTop: '3%',
+            marginBottom: '3%',
+          }}
+
+        /> */}
         <Image
+          source={{}}
           style={{
             height: 275,
             width: 275,
@@ -46,6 +95,15 @@ function PlayScreen() {
         <Icon type="play_button" />
         <Icon type="audio_forward" />
       </View>
+      <View
+        style={{
+          paddingBottom: '7%',
+          paddingLeft: '7%',
+        }}
+      >
+        <TextInput placeholder="ID to be queried" onChangeText={setAudioId} />
+        <Button title="Download" onPress={() => handlePress()} />
+      </View>
 
       <View
         style={{

src/types/schema.ts

@@ -13,6 +13,10 @@ export type Audio = {
   authors: string[];
   description: string;
   title: string;
+  soundCloud: string;
+  theme: string;
+  gcsLink: string;
+  thumbnail: string;
 };
 
 export type Grant = {