Miha/Kevin Audio Download/Delete

.vscode/settings.json

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

App.tsx

@@ -3,6 +3,7 @@ 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';
 
 async function loadResourcesAsync() {
@@ -50,6 +51,7 @@ 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]);

package.json

@@ -12,32 +12,42 @@
     "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-network": "~5.2.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/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,53 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  documentDirectory,
+  createDownloadResumable,
+  deleteAsync,
+  readDirectoryAsync,
+  getInfoAsync,
+  makeDirectoryAsync
+} from 'expo-file-system';
+import { getAudioID } from './audioQueries';
+
+const audDir = `${documentDirectory}audio/`;
+
+export const deleteAudio = async (audioPath: string): Promise<void> =>
+  deleteAsync(audioPath);
+
+
+export const dirList = async (dirPath: string): Promise<string[]> =>
+  readDirectoryAsync(dirPath);
+
+export const audioPath =  (audio: string): string =>
+  `${audDir}${audio}`;
+
+
+
+async function ensureDirExists() {
+  const dirInfo = await getInfoAsync(audDir);
+  if (!dirInfo.exists) {
+    // eslint-disable-next-line no-console
+    console.log("Gif directory doesn't exist, creating...");
+    await makeDirectoryAsync(audDir, { intermediates: true });
+  }
+}
+
+export const downLoadAudio = async (audioID: string): Promise<string> => {
+  await ensureDirExists();
+  const name = audioID;
+  const url = (await getAudioID(audioID)).gcsLink;
+  const dir = `${audDir}${name}.mp3`;
+  const fileInfo = await getInfoAsync(dir);
+  if (fileInfo.exists) {
+    return dir;
+  }
+
+  const downLoadable = createDownloadResumable(url, dir, {});
+  try {
+    await downLoadable.downloadAsync();
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+  }
+  return dir;
+};

src/firebase/queries/audioQueries.ts

@@ -0,0 +1,63 @@
+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);
+
+    docSnap.forEach((audio: DocumentSnapshot) => {
+      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

@@ -23,6 +23,7 @@ function PlayScreen() {
       </View>
       <View style={styles.container2}>
         <Image
+          source={{}}
           style={{
             height: 275,
             width: 275,
@@ -46,7 +47,6 @@ function PlayScreen() {
         <Icon type="play_button" />
         <Icon type="audio_forward" />
       </View>
-
       <View
         style={{
           flexDirection: 'row',

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 = {