adding audio file support

app/mobile/ios/Podfile.lock

@@ -238,6 +238,8 @@ PODS:
   - React-jsinspector (0.69.5)
   - React-logger (0.69.5):
     - glog
+  - react-native-document-picker (8.1.1):
+    - React-Core
   - react-native-safe-area-context (4.3.3):
     - RCT-Folly
     - RCTRequired
@@ -387,6 +389,7 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
+  - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-sqlite-storage (from `../node_modules/react-native-sqlite-storage`)
   - react-native-video (from `../node_modules/react-native-video`)
@@ -467,6 +470,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   React-logger:
     :path: "../node_modules/react-native/ReactCommon/logger"
+  react-native-document-picker:
+    :path: "../node_modules/react-native-document-picker"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-sqlite-storage:
@@ -535,6 +540,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: e42f0b46de293a026c2fb20e524d4fe09f81f575
   React-jsinspector: e385fb7a1440ae3f3b2cd1a139ca5aadaab43c10
   React-logger: 15c734997c06fe9c9b88e528fb7757601e7a56df
+  react-native-document-picker: f68191637788994baed5f57d12994aa32cf8bf88
   react-native-safe-area-context: b456e1c40ec86f5593d58b275bd0e9603169daca
   react-native-sqlite-storage: f6d515e1c446d1e6d026aa5352908a25d4de3261
   react-native-video: c26780b224543c62d5e1b2a7244a5cd1b50e8253

app/mobile/package.json

@@ -21,6 +21,7 @@
     "react-dom": "18.0.0",
     "react-native": "0.69.5",
     "react-native-base64": "^0.2.1",
+    "react-native-document-picker": "^8.1.1",
     "react-native-gesture-handler": "^2.6.1",
     "react-native-image-crop-picker": "^0.38.0",
     "react-native-reanimated": "^2.10.0",

app/mobile/src/session/conversation/addTopic/AddTopic.jsx

@@ -8,7 +8,14 @@ import Colors from 'constants/Colors';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import ImagePicker from 'react-native-image-crop-picker'
 import { VideoFile } from './videoFile/VideoFile';
+import { AudioFile } from './audioFile/AudioFile';
 import { ImageFile } from './imageFile/ImageFile';
+import DocumentPicker, {
+  DirectoryPickerResponse,
+  DocumentPickerResponse,
+  isInProgress,
+  types,
+} from 'react-native-document-picker'
 
 export function AddTopic() {
 
@@ -34,6 +41,19 @@ export function AddTopic() {
     }
   }
 
+  const addAudio = async () => {
+    try {
+        const audio = await DocumentPicker.pickSingle({
+          presentationStyle: 'fullScreen',
+          copyTo: 'cachesDirectory',
+          type: DocumentPicker.types.audio,
+        })
+        actions.addAudio(audio.fileCopyUri, audio.name.replace(/\.[^/.]+$/, ""));
+      } catch (err) {
+        console.log(err);
+      }
+  }
+
   const remove = (item) => {
     Alert.alert(
       `Removing ${item.type} from message.`,
@@ -63,6 +83,12 @@ export function AddTopic() {
         />
       )
     }
+    if (item.type === 'audio') {
+      return (
+        <AudioFile path={item.data} label={item.label} remove={() => remove(item)}
+            setLabel={(label) => actions.setAudioLabel(item.key, label)} />
+      )
+    }
     else {
       return (
         <View style={styles.asset}></View>
@@ -88,7 +114,7 @@ export function AddTopic() {
         <TouchableOpacity style={styles.addButton} onPress={addVideo}>
           <MaterialIcons name="video-outline" size={24} color={Colors.text} />
         </TouchableOpacity>
-        <TouchableOpacity style={styles.addButton}>
+        <TouchableOpacity style={styles.addButton} onPress={addAudio}>
           <MaterialIcons name="music-box-outline" size={20} color={Colors.text} />
         </TouchableOpacity>
         <View style={styles.divider} />

app/mobile/src/session/conversation/addTopic/audioFile/AudioFile.jsx

@@ -0,0 +1,14 @@
+import { Image, View, TextInput } from 'react-native';
+import audio from 'images/audio.png';
+import { styles } from './AudioFile.styled';
+
+export function AudioFile({ path, remove, label, setLabel }) {
+  return (
+    <View style={styles.audio}>
+      <Image source={audio} resizeMode={'cover'} style={styles.image} />
+      <TextInput style={ styles.input } value={ label } onChangeText={setLabel}
+          multiline={true} autoCapitalize={'none'} placeholder="Audio Label" />
+    </View>
+  )
+}
+

app/mobile/src/session/conversation/addTopic/audioFile/AudioFile.styled.js

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'constants/Colors';
+
+export const styles = StyleSheet.create({
+  audio: {
+    width: 92,
+    height: 92,
+    backgroundColor: Colors.white,
+    borderRadius: 4,
+    marginRight: 16,
+  },
+  image: { 
+    width: 92,
+    height: 92,
+  },
+  input: {
+    position: 'absolute',
+    maxHeight: 50,
+    textAlign: 'center',
+    padding: 4,
+  }
+})
+

app/mobile/src/session/conversation/addTopic/imageFile/ImageFile.jsx

@@ -14,11 +14,8 @@ export function ImageFile({ path, setPosition, remove }) {
   }, [path]);
 
   return (
-    <TouchableOpacity onLongPress={remove}>
+    <TouchableOpacity activeOpacity={1} onLongPress={remove}>
       <Image source={{ uri: path }} style={{ width: 92 * state.ratio, height: 92, marginRight: 16 }} resizeMode={'contain'} />
-      <View style={styles.overlay}>
-        <Icons name="picture" size={20} color={Colors.grey} />
-      </View>
     </TouchableOpacity>
   );
 }

app/mobile/src/session/conversation/addTopic/useAddTopic.hook.js

@@ -29,26 +29,13 @@ export function useAddTopic(cardId, channelId) {
     },
     addVideo: (data) => {
       assetId.current++;
-      const asset = { key: assetId.current, type: 'video', data: data, ratio: 1, duration: 0, position: 0, ref: null };
+      const asset = { key: assetId.current, type: 'video', data: data, ratio: 1, duration: 0, position: 0 };
       updateState({ assets: [ ...state.assets, asset ] });
     },
-    setVideoInfo: (key, width, height, duration) => {
+    addAudio: (data, label) => {
-      updateState({ assets: state.assets.map((item) => {
+      assetId.current++;
-          if(item.key === key) {
+      const asset = { key: assetId.current, type: 'audio', data: data, label };
-            return { ...item, ratio: width / height, duration };
+      updateState({ assets: [ ...state.assets, asset ] });
-          }
-          return item;
-        })
-      });
-    },
-    setVideoRef: (key, ref) => {
-      updateState({ assets: state.assets.map((item) => {
-          if(item.key === key) {
-            return { ...item, ref };
-          }
-          return item;
-        })
-      });
     }, 
     setVideoPosition: (key, position) => {
       updateState({ assets: state.assets.map((item) => {
@@ -59,6 +46,15 @@ export function useAddTopic(cardId, channelId) {
         })
       });
     },
+    setAudioLabel: (key, label) => {
+      updateState({ assets: state.assets.map((item) => {
+          if(item.key === key) {
+            return { ...item, label };
+          }
+          return item;
+        })
+      });
+    },
     removeAsset: (key) => {
       updateState({ assets: state.assets.filter(item => (item.key !== key))});
     },

app/mobile/src/session/conversation/addTopic/videoFile/VideoFile.jsx

@@ -26,7 +26,7 @@ export function VideoFile({ path, setPosition, remove }) {
         ref={(ref) => video.current = ref}
       />
       <View style={styles.overlay}>
-        <Icons name="video-outline" size={20} color={Colors.grey} /> 
+        <Icons name="arrow-right" size={20} color={Colors.white} /> 
       </View>  
     </TouchableOpacity>
   );

app/mobile/src/session/conversation/addTopic/videoFile/VideoFile.styled.js

@@ -9,9 +9,6 @@ export const styles = StyleSheet.create({
     right: 0,
     padding: 2,
     borderTopLeftRadius: 4,
-    backgroundColor: Colors.white,
-    borderWidth: 1,
-    borderColor: Colors.divider,
   },
 })
 

app/mobile/yarn.lock

@@ -5520,6 +5520,13 @@ react-native-codegen@^0.69.2:
     jscodeshift "^0.13.1"
     nullthrows "^1.1.1"
 
+react-native-document-picker@^8.1.1:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/react-native-document-picker/-/react-native-document-picker-8.1.1.tgz#642bbe25752cc428b96416318f8dc07cef29ee10"
+  integrity sha512-mH0oghd7ndgU9/1meVJdqts1sAkOfUQW1qbrqTTsvR5f2K9r0BAj/X02dve5IBMOMZvlGd7qWrNVuIFg5AUXWg==
+  dependencies:
+    invariant "^2.2.4"
+
 react-native-gesture-handler@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.6.1.tgz#66c40c8d720eb4729b301836a40fd34d14ec840f"