adding mobile support for gif type

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);
+    if ((mime === GIF_TYPE || mime === WEBP_TYPE) && size < SCALE_SIZE) {
-    const base = await RNFS.readFile(thumb.path, 'base64')
+      const base = await RNFS.readFile(file, 'base64')
-    return `data:image/jpeg;base64,${base}`;
+      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 { data, type, mime, size, getEncryptedBlock, position } = file;
-        const thumb = await getThumb(data, type, position);
+        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;

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

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 ] });
     },

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 (
     <TouchableOpacity activeOpacity={1} onPress={onAssetView}>
-      <Image source={{ uri: url }} style={{ opacity: state.loaded ? 1 : 0, borderRadius: 4, width: 92 * state.ratio, height: 92, marginRight: 16 }}
+      <FastImage source={{ uri: url }} style={{ opacity: state.loaded ? 1 : 0, borderRadius: 4, width: 92 * state.ratio, height: 92, marginRight: 16 }}
-          onLoad={actions.loaded} resizeMode={'cover'} />
+          onLoad={actions.loaded} resizeMode={FastImage.resizeMode.contain} />
     </TouchableOpacity>
   );
 

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