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

adding mobile support for gif type

Browse Source
This commit is contained in:
Roland Osborne 2023-07-20 17:35:00 -07:00 committed by balzack
parent af8eccd688
commit f795a32eae
5 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/mobile/src/context/useUploadContext.hook.js
View File

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

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

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

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

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

5
app/mobile/src/session/conversation/topicItem/imageThumb/ImageThumb.jsx
View File

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

2
app/mobile/src/session/conversation/topicItem/imageThumb/useImageThumb.hook.js
View File

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