From f795a32eae45f21a20b42407070a568f83840b4c Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Thu, 20 Jul 2023 17:35:00 -0700 Subject: [PATCH] adding mobile support for gif type --- .../src/context/useUploadContext.hook.js | 21 +++++++++++++------ .../conversation/addTopic/AddTopic.jsx | 2 +- .../conversation/addTopic/useAddTopic.hook.js | 7 +++++-- .../topicItem/imageThumb/ImageThumb.jsx | 5 +++-- .../imageThumb/useImageThumb.hook.js | 2 +- 5 files changed, 25 insertions(+), 12 deletions(-) diff --git a/app/mobile/src/context/useUploadContext.hook.js b/app/mobile/src/context/useUploadContext.hook.js index 7ef066a9..ac4358b8 100644 --- a/app/mobile/src/context/useUploadContext.hook.js +++ b/app/mobile/src/context/useUploadContext.hook.js @@ -5,6 +5,9 @@ import ImageResizer from '@bam.tech/react-native-image-resizer'; import RNFS from 'react-native-fs'; const ENCRYPTED_BLOCK_SIZE = (1024 * 1024); +const SCALE_SIZE = (128 * 1024 * 1024); +const GIF_TYPE = 'image/gif'; +const WEBP_TYPE = 'image/webp'; export function useUploadContext() { @@ -119,11 +122,17 @@ export function useUploadContext() { return { state, actions } } -async function getThumb(file, type, position) { +async function getThumb(file, type, mime, size, position) { if (type === 'image') { - const thumb = await ImageResizer.createResizedImage(file, 192, 192, "JPEG", 50, 0, null); - const base = await RNFS.readFile(thumb.path, 'base64') - return `data:image/jpeg;base64,${base}`; + if ((mime === GIF_TYPE || mime === WEBP_TYPE) && size < SCALE_SIZE) { + const base = await RNFS.readFile(file, 'base64') + return `data:image/jpeg;base64,${base}`; + } + else { + const thumb = await ImageResizer.createResizedImage(file, 192, 192, "JPEG", 50, 0, null); + const base = await RNFS.readFile(thumb.path, 'base64') + return `data:image/jpeg;base64,${base}`; + } } else if (type === 'video') { const shot = await createThumbnail({ url: file, timeStamp: position * 1000 }) @@ -154,8 +163,8 @@ async function upload(entry, update, complete) { entry.active = {}; try { if (file.encrypted) { - const { data, type, size, getEncryptedBlock, position } = file; - const thumb = await getThumb(data, type, position); + const { data, type, mime, size, getEncryptedBlock, position } = file; + const thumb = await getThumb(data, type, mime, size, position); const parts = []; for (let pos = 0; pos < size; pos += ENCRYPTED_BLOCK_SIZE) { const len = pos + ENCRYPTED_BLOCK_SIZE > size ? size - pos : ENCRYPTED_BLOCK_SIZE; diff --git a/app/mobile/src/session/conversation/addTopic/AddTopic.jsx b/app/mobile/src/session/conversation/addTopic/AddTopic.jsx index f1ee75ca..dc80e81f 100644 --- a/app/mobile/src/session/conversation/addTopic/AddTopic.jsx +++ b/app/mobile/src/session/conversation/addTopic/AddTopic.jsx @@ -46,7 +46,7 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) { const addImage = async () => { try { const full = await ImagePicker.openPicker({ mediaType: 'photo' }); - actions.addImage(full.path); + actions.addImage(full.path, full.mime); } catch (err) { console.log(err); diff --git a/app/mobile/src/session/conversation/addTopic/useAddTopic.hook.js b/app/mobile/src/session/conversation/addTopic/useAddTopic.hook.js index 3f7e1804..491c1935 100644 --- a/app/mobile/src/session/conversation/addTopic/useAddTopic.hook.js +++ b/app/mobile/src/session/conversation/addTopic/useAddTopic.hook.js @@ -29,6 +29,7 @@ export function useAddTopic(contentKey) { conflict: false, }); + const SCALE_SIZE = (128 * 1024 * 1024); const assetId = useRef(0); const conversation = useContext(ConversationContext); const account = useContext(AccountContext); @@ -109,7 +110,8 @@ export function useAddTopic(contentKey) { const url = file.startsWith('file:') ? file : `file://${file}`; if (contentKey) { - const scaled = scale ? await scale(url) : url; + const orig = await RNFS.stat(url); + const scaled = (scale && orig.size > SCALE_SIZE) ? await scale(url) : url; const stat = await RNFS.stat(scaled); const getEncryptedBlock = async (pos, len) => { if (pos + len > stat.size) { @@ -129,7 +131,7 @@ export function useAddTopic(contentKey) { setMessage: (message) => { updateState({ message }); }, - addImage: async (data) => { + addImage: async (data, mime) => { assetId.current++; const asset = await setAsset(data, async (file) => { const scaled = await ImageResizer.createResizedImage(file, 512, 512, "JPEG", 90, 0, null); @@ -137,6 +139,7 @@ export function useAddTopic(contentKey) { }); asset.key = assetId.current; asset.type = 'image'; + asset.mime = mime; asset.ratio = 1; updateState({ assets: [ ...state.assets, asset ] }); }, diff --git a/app/mobile/src/session/conversation/topicItem/imageThumb/ImageThumb.jsx b/app/mobile/src/session/conversation/topicItem/imageThumb/ImageThumb.jsx index ee540ca6..4c02e5b8 100644 --- a/app/mobile/src/session/conversation/topicItem/imageThumb/ImageThumb.jsx +++ b/app/mobile/src/session/conversation/topicItem/imageThumb/ImageThumb.jsx @@ -3,14 +3,15 @@ import { TouchableOpacity } from 'react-native-gesture-handler'; import { useImageThumb } from './useImageThumb.hook'; import { styles } from './ImageThumb.styled'; import Colors from 'constants/Colors'; +import FastImage from 'react-native-fast-image' export function ImageThumb({ url, onAssetView }) { const { state, actions } = useImageThumb(); return ( - + ); diff --git a/app/mobile/src/session/conversation/topicItem/imageThumb/useImageThumb.hook.js b/app/mobile/src/session/conversation/topicItem/imageThumb/useImageThumb.hook.js index 147c84bd..1bae12e1 100644 --- a/app/mobile/src/session/conversation/topicItem/imageThumb/useImageThumb.hook.js +++ b/app/mobile/src/session/conversation/topicItem/imageThumb/useImageThumb.hook.js @@ -18,7 +18,7 @@ export function useImageThumb() { const actions = { loaded: (e) => { - const { width, height } = e.nativeEvent.source; + const { width, height } = e.nativeEvent; updateState({ loaded: true, ratio: width / height }); }, };