martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-11 19:19:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding audio file support

Browse Source
This commit is contained in:
balzack 2022-10-03 14:18:47 -07:00
parent 769ce6805f
commit b46d2672e7
10 changed files with 96 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/mobile/ios/Podfile.lock
View File

@ -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

1
app/mobile/package.json
View File

@ -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",

30
app/mobile/src/session/conversation/addTopic/AddTopic.jsx
View File

@ -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.`,
@ -62,7 +82,13 @@ export function AddTopic() {
setPosition={(position) => actions.setVideoPosition(item.key, position)}
/>
)
}
}
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} />

14
app/mobile/src/session/conversation/addTopic/audioFile/AudioFile.jsx Normal file
View File

@ -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>
)
}

23
app/mobile/src/session/conversation/addTopic/audioFile/AudioFile.styled.js Normal file
View File

@ -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,
}
})

5
app/mobile/src/session/conversation/addTopic/imageFile/ImageFile.jsx
View File

@ -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>
);
}

34
app/mobile/src/session/conversation/addTopic/useAddTopic.hook.js
View File

@ -29,27 +29,14 @@ 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) => {
updateState({ assets: state.assets.map((item) => {
if(item.key === key) {
return { ...item, ratio: width / height, duration };
}
return item;
})
});
},
setVideoRef: (key, ref) => {
updateState({ assets: state.assets.map((item) => {
if(item.key === key) {
return { ...item, ref };
}
return item;
})
});
},
addAudio: (data, label) => {
assetId.current++;
const asset = { key: assetId.current, type: 'audio', data: data, label };
updateState({ assets: [ ...state.assets, asset ] });
},
setVideoPosition: (key, position) => {
updateState({ assets: state.assets.map((item) => {
if(item.key === key) {
@ -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))});
},

2
app/mobile/src/session/conversation/addTopic/videoFile/VideoFile.jsx
View File

@ -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>
);

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

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

7
app/mobile/yarn.lock
View File

@ -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"