show popup msg on download

This commit is contained in:
Roland Osborne 2024-06-10 13:33:58 -07:00
parent b192e8a939
commit 8d473b342b
9 changed files with 97 additions and 3 deletions

View File

@ -26,6 +26,17 @@ export function AudioAsset({ asset, dismiss }) {
<Icons name="play-circle-outline" size={92} color={Colors.text} />
</TouchableOpacity>
)}
{ state.showDownloaded && (
<View style={styles.downloaded}>
<MatIcons name="folder-download-outline" size={22} color={Colors.white} />
{ Platform.OS === 'ios' && (
<Text style={styles.downloadedLabel}>Documents</Text>
)}
{ Platform.OS !== 'ios' && (
<Text style={styles.downloadedLabel}>Downloads</Text>
)}
</View>
)}
{ state.playing && state.loaded && (
<TouchableOpacity style={styles.control} onPress={actions.pause}>
<Icons name="pause-circle-outline" size={92} color={Colors.text} />

View File

@ -59,5 +59,23 @@ export const styles = StyleSheet.create({
fontSize: 12,
color: '#888888',
},
downloaded: {
top: 0,
position: 'absolute',
marginTop: 8,
display: 'flex',
backgroundColor: Colors.grey,
borderRadius: 4,
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 8,
paddingRight: 8,
paddingTop: 2,
paddingBottom: 2,
},
downloadedLabel: {
color: Colors.white,
paddingLeft: 8,
},
})

View File

@ -13,6 +13,7 @@ export function useAudioAsset(asset) {
playing: false,
loaded: false,
downloaded: false,
showDownloaded: false,
});
const closing = useRef(null);
@ -61,7 +62,8 @@ export function useAudioAsset(asset) {
else {
await RNFS.downloadFile({ fromUrl: state.url, toFile: path }).promise;
}
await RNFS.moveFile(path, `${path}`);
updateState({ showDownloaded: true });
setTimeout(() => { updateState({ showDownloaded: false }) }, 2000);
}
},
play: () => {

View File

@ -19,6 +19,18 @@ export function ImageAsset({ asset, dismiss }) {
style={{ ...styles.main, width: state.imageWidth, height: state.imageHeight }}
resizeMode={FastImage.resizeMode.contain} />
)}
{ state.showDownloaded && (
<View style={styles.downloaded}>
<MatIcons name="folder-download-outline" size={22} color={Colors.white} />
{ Platform.OS === 'ios' && (
<Text style={styles.downloadedLabel}>Documents</Text>
)}
{ Platform.OS !== 'ios' && (
<Text style={styles.downloadedLabel}>Downloads</Text>
)}
</View>
)}
{ state.loaded && state.controls && (
<TouchableOpacity style={styles.share} onPress={actions.download}>
{ state.downloaded && (

View File

@ -60,6 +60,24 @@ export const styles = StyleSheet.create({
padding: 4,
borderRadius: 4,
backgroundColor: Colors.grey,
}
},
downloaded: {
top: 0,
position: 'absolute',
marginTop: 8,
display: 'flex',
backgroundColor: Colors.grey,
borderRadius: 4,
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 8,
paddingRight: 8,
paddingTop: 2,
paddingBottom: 2,
},
downloadedLabel: {
color: Colors.white,
paddingLeft: 8,
},
})

View File

@ -17,6 +17,7 @@ export function useImageAsset(asset) {
failed: false,
controls: false,
downloaded: false,
showDownloaded: false,
});
const conversation = useContext(ConversationContext);
@ -102,6 +103,8 @@ export function useImageAsset(asset) {
if (Platform.OS !== 'ios') {
await RNFS.scanFile(`${path}.${ext}`);
}
updateState({ showDownloaded: true });
setTimeout(() => { updateState({ showDownloaded: false }) }, 2000);
}
},
loaded: () => {

View File

@ -27,6 +27,17 @@ export function VideoAsset({ asset, dismiss }) {
{ (!state.playing || state.controls) && (
<View style={styles.overlay} />
)}
{ state.showDownloaded && (
<View style={styles.downloaded}>
<MatIcons name="folder-download-outline" size={22} color={Colors.white} />
{ Platform.OS === 'ios' && (
<Text style={styles.downloadedLabel}>Documents</Text>
)}
{ Platform.OS !== 'ios' && (
<Text style={styles.downloadedLabel}>Downloads</Text>
)}
</View>
)}
{ !state.playing && state.videoLoaded && (
<TouchableOpacity style={styles.control} onPress={actions.play}>
<Icons name="play-circle-outline" size={92} color={Colors.white} />

View File

@ -67,5 +67,23 @@ export const styles = StyleSheet.create({
fontSize: 12,
color: '#dddddd',
},
downloaded: {
top: 0,
position: 'absolute',
marginTop: 8,
display: 'flex',
backgroundColor: Colors.grey,
borderRadius: 4,
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 8,
paddingRight: 8,
paddingTop: 2,
paddingBottom: 2,
},
downloadedLabel: {
color: Colors.white,
paddingLeft: 8,
},
})

View File

@ -85,10 +85,11 @@ export function useVideoAsset(asset) {
else {
await RNFS.downloadFile({ fromUrl: state.url, toFile: path }).promise;
}
await RNFS.moveFile(path, `${path}`);
if (Platform.OS !== 'ios') {
await RNFS.scanFile(`${path}`);
}
updateState({ showDownloaded: true });
setTimeout(() => { updateState({ showDownloaded: false }) }, 2000);
}
},
setThumbSize: (e) => {