From b2a0c194abe44751b2ba44664178357c3fc1ddd1 Mon Sep 17 00:00:00 2001 From: balzack Date: Thu, 2 Jan 2025 12:17:51 -0800 Subject: [PATCH] support upload sealed image --- app/client/mobile/ios/Podfile.lock | 6 ++++++ app/client/mobile/package.json | 1 + app/client/mobile/src/StagingFiles.ts | 2 +- .../mobile/src/conversation/useConversation.hook.ts | 10 ++++++---- app/client/mobile/yarn.lock | 11 +++++++++++ 5 files changed, 25 insertions(+), 5 deletions(-) diff --git a/app/client/mobile/ios/Podfile.lock b/app/client/mobile/ios/Podfile.lock index c38d58e9..d7e78a14 100644 --- a/app/client/mobile/ios/Podfile.lock +++ b/app/client/mobile/ios/Podfile.lock @@ -956,6 +956,8 @@ PODS: - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - Yoga + - react-native-image-resizer (3.0.11): + - React-Core - react-native-rsa-native (2.0.5): - React - react-native-safe-area-context (4.14.0): @@ -1438,6 +1440,7 @@ DEPENDENCIES: - React-logger (from `../node_modules/react-native/ReactCommon/logger`) - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`) - "react-native-blur (from `../node_modules/@react-native-community/blur`)" + - "react-native-image-resizer (from `../node_modules/@bam.tech/react-native-image-resizer`)" - react-native-rsa-native (from `../node_modules/react-native-rsa-native`) - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) - react-native-sqlite-storage (from `../node_modules/react-native-sqlite-storage`) @@ -1544,6 +1547,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon" react-native-blur: :path: "../node_modules/@react-native-community/blur" + react-native-image-resizer: + :path: "../node_modules/@bam.tech/react-native-image-resizer" react-native-rsa-native: :path: "../node_modules/react-native-rsa-native" react-native-safe-area-context: @@ -1649,6 +1654,7 @@ SPEC CHECKSUMS: React-logger: fa92ba4d3a5d39ac450f59be2a3cec7b099f0304 React-Mapbuffer: 9f68550e7c6839d01411ac8896aea5c868eff63a react-native-blur: 30d91a67da86a4d4d924b0c7c36f6e01479a246b + react-native-image-resizer: 6260ba497fb8d1a593c1c92ccd593f570df6f5b7 react-native-rsa-native: 12132eb627797529fdb1f0d22fd0f8f9678df64a react-native-safe-area-context: 4532f1a0c5d34a46b9324ccaaedcb5582a302b7d react-native-sqlite-storage: f6d515e1c446d1e6d026aa5352908a25d4de3261 diff --git a/app/client/mobile/package.json b/app/client/mobile/package.json index 3b715e5c..5a230ca1 100644 --- a/app/client/mobile/package.json +++ b/app/client/mobile/package.json @@ -11,6 +11,7 @@ "test": "jest" }, "dependencies": { + "@bam.tech/react-native-image-resizer": "^3.0.11", "@react-native-clipboard/clipboard": "^1.14.2", "@react-native-community/blur": "^4.4.0", "@react-navigation/drawer": "^6.7.2", diff --git a/app/client/mobile/src/StagingFiles.ts b/app/client/mobile/src/StagingFiles.ts index b176776c..697b6156 100644 --- a/app/client/mobile/src/StagingFiles.ts +++ b/app/client/mobile/src/StagingFiles.ts @@ -16,7 +16,7 @@ export class StagingFiles implements Staging { public async read(source: any): Promise<{ size: number, getData: (position: number, length: number)=>Promise, close: ()=>Promise }> { const path = source; const stat = await RNFS.stat(path); - const size = state.size; + const size = stat.size; const getData = async (position: number, length: number) => { return await RNFS.read(path, length, position, 'base64'); } diff --git a/app/client/mobile/src/conversation/useConversation.hook.ts b/app/client/mobile/src/conversation/useConversation.hook.ts index df2e1e36..a1ca8ad9 100644 --- a/app/client/mobile/src/conversation/useConversation.hook.ts +++ b/app/client/mobile/src/conversation/useConversation.hook.ts @@ -4,16 +4,18 @@ import { DisplayContext } from '../context/DisplayContext' import { Focus, FocusDetail, Topic, Profile, Card, AssetType, AssetSource, HostingMode, TransformType } from 'databag-client-sdk' import { ContextType } from '../context/ContextType' import { placeholder } from '../constants/Icons'; +import RNFS from 'react-native-fs'; +import ImageResizer from '@bam.tech/react-native-image-resizer'; const IMAGE_SCALE_SIZE = (128 * 1024); const GIF_TYPE = 'image/gif'; const WEBP_TYPE = 'image/webp'; const LOAD_DEBOUNCE = 1000; -function getImageThumb(file: File) { - return new Promise((resolve, reject) => { - resolve(''); - }); +async function getImageThumb(path: string) { + const thumb = await ImageResizer.createResizedImage(path, 192, 192, "JPEG", 50, 0, null); + const base = await RNFS.readFile(thumb.path, 'base64') + return `data:image/jpeg;base64,${base}`; } function getVideoThumb(file: File, position?: number) { diff --git a/app/client/mobile/yarn.lock b/app/client/mobile/yarn.lock index bbde2bc1..3f4d799e 100644 --- a/app/client/mobile/yarn.lock +++ b/app/client/mobile/yarn.lock @@ -1677,6 +1677,16 @@ __metadata: languageName: node linkType: hard +"@bam.tech/react-native-image-resizer@npm:^3.0.11": + version: 3.0.11 + resolution: "@bam.tech/react-native-image-resizer@npm:3.0.11" + peerDependencies: + react: "*" + react-native: "*" + checksum: 0d9e95c625f8ef3a5d7195721d8ac6463a08468c9474f2627a1a85cefa509efc06bd160bd9108d1cce1fa05751a4b69871dce975659571009149d258cf9ddd8b + languageName: node + linkType: hard + "@bcoe/v8-coverage@npm:^0.2.3": version: 0.2.3 resolution: "@bcoe/v8-coverage@npm:0.2.3" @@ -3416,6 +3426,7 @@ __metadata: "@babel/core": ^7.20.0 "@babel/preset-env": ^7.20.0 "@babel/runtime": ^7.20.0 + "@bam.tech/react-native-image-resizer": ^3.0.11 "@react-native-clipboard/clipboard": ^1.14.2 "@react-native-community/blur": ^4.4.0 "@react-native/babel-preset": 0.74.85