From 33d822397b668a0b5962d273151ebf6f3af01583 Mon Sep 17 00:00:00 2001 From: balzack Date: Fri, 17 Jan 2025 23:07:18 -0800 Subject: [PATCH] consolodating asset download functionality --- app/client/mobile/src/download.ts | 25 +++++++++++++++++++ .../message/audioAsset/useAudioAsset.hook.ts | 3 ++- .../src/message/binaryAsset/BinaryAsset.tsx | 6 +---- .../binaryAsset/useBinaryAsset.hook.ts | 5 +++- .../message/imageAsset/ImageAsset.styled.ts | 1 - .../src/message/imageAsset/ImageAsset.tsx | 2 +- .../message/imageAsset/useImageAsset.hook.ts | 4 ++- .../message/videoAsset/useVideoAsset.hook.ts | 3 ++- 8 files changed, 38 insertions(+), 11 deletions(-) create mode 100644 app/client/mobile/src/download.ts diff --git a/app/client/mobile/src/download.ts b/app/client/mobile/src/download.ts new file mode 100644 index 00000000..12c3910d --- /dev/null +++ b/app/client/mobile/src/download.ts @@ -0,0 +1,25 @@ +import { Platform, Share } from 'react-native'; +import fileType from 'react-native-file-type' +import RNFS from 'react-native-fs'; +import RNFetchBlob from 'rn-fetch-blob'; + +export async function Download(uri: string, name: string, extension?: string) { + + const options = { fileCache: true, filename: name }; + const download = await RNFetchBlob.config(options).fetch("GET", uri); + const downloadPath = download.path(); + + const type = extension ? extension : (await fileType(downloadPath))?.ext; + +console.log(type, extension); + + const dir = Platform.OS === 'ios' ? RNFS.DocumentDirectoryPath : RNFS.DownloadDirectoryPath; + const sharePath = `${dir}/${name}.${type}`; + if (await RNFS.exists(sharePath)) { + await RNFS.unlink(sharePath); + } + + await RNFS.moveFile(downloadPath, sharePath); + await Share.share({ url: sharePath }); + await RNFS.unlink(sharePath); +} diff --git a/app/client/mobile/src/message/audioAsset/useAudioAsset.hook.ts b/app/client/mobile/src/message/audioAsset/useAudioAsset.hook.ts index 063105b6..b8d5fb99 100644 --- a/app/client/mobile/src/message/audioAsset/useAudioAsset.hook.ts +++ b/app/client/mobile/src/message/audioAsset/useAudioAsset.hook.ts @@ -4,6 +4,7 @@ import { DisplayContext } from '../../context/DisplayContext' import { Focus } from 'databag-client-sdk' import { ContextType } from '../../context/ContextType' import { MediaAsset } from '../../conversation/Conversation'; +import { Download } from '../../download'; export function useAudioAsset(topicId: string, asset: MediaAsset) { const app = useContext(AppContext) as ContextType @@ -33,7 +34,7 @@ export function useAudioAsset(topicId: string, asset: MediaAsset) { download: async () => { try { updateState({ failed: false }); - await Share.share({ url: state.dataUrl }); + await Download(state.dataUrl, topicId); } catch (err) { console.log(err); updateState({ faled: true }); diff --git a/app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx b/app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx index cebfe05c..d70195a6 100644 --- a/app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx +++ b/app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx @@ -7,7 +7,6 @@ import { styles } from './BinaryAsset.styled' import {BlurView} from '@react-native-community/blur'; import Video from 'react-native-video' import thumb from '../../images/binary.png'; -import RNFetchBlob from 'rn-fetch-blob'; export function BinaryAsset({ topicId, asset, loaded, show }: { topicId: string, asset: MediaAsset, loaded: ()=>void, show: boolean }) { const { state, actions } = useBinaryAsset(topicId, asset); @@ -28,10 +27,7 @@ export function BinaryAsset({ topicId, asset, loaded, show }: { topicId: string, const share = async () => { try { setAlert(''); - const extension = asset.binary?.extension || asset.encrypted?.extension; - const options = { fileCache: true, appendExt: extension.toLowerCase() }; - const download = await RNFetchBlob.config(options).fetch("GET", state.dataUrl); - await Share.share({ url: download.path() }); + await actions.download(); } catch (err) { console.log(err); setAlert(state.strings.operationFailed) diff --git a/app/client/mobile/src/message/binaryAsset/useBinaryAsset.hook.ts b/app/client/mobile/src/message/binaryAsset/useBinaryAsset.hook.ts index afe87e2c..cc25baf6 100644 --- a/app/client/mobile/src/message/binaryAsset/useBinaryAsset.hook.ts +++ b/app/client/mobile/src/message/binaryAsset/useBinaryAsset.hook.ts @@ -4,6 +4,7 @@ import { DisplayContext } from '../../context/DisplayContext'; import { Focus } from 'databag-client-sdk' import { ContextType } from '../../context/ContextType' import { MediaAsset } from '../../conversation/Conversation'; +import { Download } from '../../download'; export function useBinaryAsset(topicId: string, asset: MediaAsset) { const app = useContext(AppContext) as ContextType @@ -30,7 +31,9 @@ export function useBinaryAsset(topicId: string, asset: MediaAsset) { download: async () => { try { updateState({ failed: false }); - await Share.share({ url: state.dataUrl }); + const extension = asset.binary?.extension || asset.encrypted?.extension; + const name = asset.binary?.label || asset.encrypted?.label; + await Download(state.dataUrl, name, extension); } catch (err) { console.log(err); updateState({ faled: true }); diff --git a/app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts b/app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts index 903c00c6..4a9598ce 100644 --- a/app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts +++ b/app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts @@ -40,7 +40,6 @@ export const styles = StyleSheet.create({ flexGrow: 1, }, closeIcon: { - backgroundColor: 'transparent', }, progress: { position: 'absolute', diff --git a/app/client/mobile/src/message/imageAsset/ImageAsset.tsx b/app/client/mobile/src/message/imageAsset/ImageAsset.tsx index 2c4bd3ae..44ef7210 100644 --- a/app/client/mobile/src/message/imageAsset/ImageAsset.tsx +++ b/app/client/mobile/src/message/imageAsset/ImageAsset.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect, useRef } from 'react'; -import { SafeAreaView, Share, Modal, Pressable, Animated, View, Image, useAnimatedValue } from 'react-native' +import { SafeAreaView, Modal, Pressable, Animated, View, Image, useAnimatedValue } from 'react-native' import { Text, ProgressBar, IconButton } from 'react-native-paper' import { useImageAsset } from './useImageAsset.hook'; import { MediaAsset } from '../../conversation/Conversation'; diff --git a/app/client/mobile/src/message/imageAsset/useImageAsset.hook.ts b/app/client/mobile/src/message/imageAsset/useImageAsset.hook.ts index dbf4295e..f6c85c19 100644 --- a/app/client/mobile/src/message/imageAsset/useImageAsset.hook.ts +++ b/app/client/mobile/src/message/imageAsset/useImageAsset.hook.ts @@ -1,9 +1,11 @@ import { useState, useContext, useEffect, useRef } from 'react' +import { Share } from 'react-native' import { AppContext } from '../../context/AppContext' import { DisplayContext } from '../../context/DisplayContext' import { Focus } from 'databag-client-sdk' import { ContextType } from '../../context/ContextType' import { MediaAsset } from '../../conversation/Conversation'; +import { Download } from '../../download'; export function useImageAsset(topicId: string, asset: MediaAsset) { const app = useContext(AppContext) as ContextType @@ -62,7 +64,7 @@ export function useImageAsset(topicId: string, asset: MediaAsset) { download: async () => { try { updateState({ failed: false }); - await Share.share({ url: state.dataUrl }); + await Download(state.dataUrl, topicId); } catch (err) { console.log(err); updateState({ faled: true }); diff --git a/app/client/mobile/src/message/videoAsset/useVideoAsset.hook.ts b/app/client/mobile/src/message/videoAsset/useVideoAsset.hook.ts index a7be844d..ca6a39b4 100644 --- a/app/client/mobile/src/message/videoAsset/useVideoAsset.hook.ts +++ b/app/client/mobile/src/message/videoAsset/useVideoAsset.hook.ts @@ -4,6 +4,7 @@ import { DisplayContext } from '../../context/DisplayContext'; import { Focus } from 'databag-client-sdk' import { ContextType } from '../../context/ContextType' import { MediaAsset } from '../../conversation/Conversation'; +import { Download } from '../../download'; export function useVideoAsset(topicId: string, asset: MediaAsset) { const app = useContext(AppContext) as ContextType @@ -56,7 +57,7 @@ export function useVideoAsset(topicId: string, asset: MediaAsset) { download: async () => { try { updateState({ failed: false }); - await Share.share({ url: state.dataUrl }); + await Download(state.dataUrl, topicId); } catch (err) { console.log(err); updateState({ faled: true });