diff --git a/apps/mobile/app/common/filesystem/compress.js b/apps/mobile/app/common/filesystem/compress.js index 5e3a0ba2a..3695ebbf9 100644 --- a/apps/mobile/app/common/filesystem/compress.js +++ b/apps/mobile/app/common/filesystem/compress.js @@ -16,46 +16,63 @@ GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see . */ -import { Dimensions, Platform } from "react-native"; +import { Dimensions, Image, Platform } from "react-native"; import ImageResizer from "@bam.tech/react-native-image-resizer"; import RNFetchBlob from "react-native-blob-util"; + +console.log("hello world"); /** * Scale down & compress images to screen width * for loading in editor. * @returns */ export async function compressToBase64(path, type) { - const { width, scale } = Dimensions.get("window"); - const response = await ImageResizer.createResizedImage( - path, - width * scale, - 9999, - type, - 80, - 0, - undefined, - true, - { - mode: "contain", - onlyScaleDown: true - } - ); - const base64 = await RNFetchBlob.fs.readFile( - Platform.OS === "ios" ? response.uri?.replace("file://", "") : response.uri, - "base64" - ); - RNFetchBlob.fs.unlink(path.replace("file://", "")).catch(console.log); - RNFetchBlob.fs.unlink(response.uri.replace("file://", "")).catch(console.log); - return base64; + const { width: screenWidth, scale } = Dimensions.get("window"); + console.log("COMPRESSING TO BASE64..."); + return new Promise((resolve) => { + console.log(path, "image path..."); + + Image.getSize(path, async (width) => { + console.log("image width", width); + + const response = await ImageResizer.createResizedImage( + path, + screenWidth * scale, + 99999, + type, + width <= 1920 ? 100 : 90, + 0, + undefined, + true, + { + mode: "contain", + onlyScaleDown: true + } + ); + + const base64 = await RNFetchBlob.fs.readFile( + Platform.OS === "ios" + ? response.uri?.replace("file://", "") + : response.uri, + "base64" + ); + RNFetchBlob.fs.unlink(path.replace("file://", "")).catch(console.log); + RNFetchBlob.fs + .unlink(response.uri.replace("file://", "")) + .catch(console.log); + + resolve(base64); + }); + }); } export async function compressToFile(path, type) { const response = await ImageResizer.createResizedImage( path, - 1080, - 9999, + 1920, + 99999, type, - 85, + 80, 0, undefined, true, diff --git a/apps/mobile/app/common/filesystem/io.js b/apps/mobile/app/common/filesystem/io.js index 49c5935a8..a2a134147 100644 --- a/apps/mobile/app/common/filesystem/io.js +++ b/apps/mobile/app/common/filesystem/io.js @@ -17,13 +17,12 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ -import { Platform } from "react-native"; import Sodium from "@ammarahmed/react-native-sodium"; +import { Platform } from "react-native"; import RNFetchBlob from "react-native-blob-util"; -import { cacheDir, cacheDirOld, getRandomId } from "./utils"; -import { db } from "../database"; -import { compressToBase64 } from "./compress"; import { IOS_APPGROUPID } from "../../utils/constants"; +import { db } from "../database"; +import { cacheDir, cacheDirOld, getRandomId } from "./utils"; export async function readEncrypted(filename, key, cipherData) { await migrateFilesFromCache(); @@ -36,8 +35,6 @@ export async function readEncrypted(filename, key, cipherData) { } const attachment = await db.attachments.attachment(filename); - const isPng = /(png)/g.test(attachment?.mimeType || ""); - const isJpeg = /(jpeg|jpg)/g.test(attachment?.mimeType || ""); console.log("decrypting...."); let output = await Sodium.decryptFile( key, @@ -46,20 +43,9 @@ export async function readEncrypted(filename, key, cipherData) { hash: filename, appGroupId: IOS_APPGROUPID }, - cipherData.outputType === "base64" - ? isPng || isJpeg - ? "cache" - : "base64" - : "text" + cipherData.outputType === "base64" ? "base64" : "text" ); - console.log("file decrypted..."); - if (cipherData.outputType === "base64" && (isPng || isJpeg)) { - const dCachePath = `${cacheDir}/${output}`; - output = await compressToBase64( - `file://${dCachePath}`, - isPng ? "PNG" : "JPEG" - ); - } + console.log("file decrypted...", attachment?.mimeType); return output; } catch (e) { diff --git a/apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx b/apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx index cf63d20a7..8ed903b09 100644 --- a/apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx +++ b/apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx @@ -114,7 +114,7 @@ export default function AttachImage({ }} size={SIZE.sm} > - Compress image (recommended) + Compress (recommended) @@ -131,7 +131,7 @@ export default function AttachImage({ ) : ( 1 ? "Attach Images" : "Attach Image" + }`} type="accent" width="100%" onPress={() => { diff --git a/apps/mobile/app/screens/editor/tiptap/picker.js b/apps/mobile/app/screens/editor/tiptap/picker.js index cdc9d498f..3bac2b1ba 100644 --- a/apps/mobile/app/screens/editor/tiptap/picker.js +++ b/apps/mobile/app/screens/editor/tiptap/picker.js @@ -24,10 +24,8 @@ import RNFetchBlob from "react-native-blob-util"; import DocumentPicker from "react-native-document-picker"; import { launchCamera, launchImageLibrary } from "react-native-image-picker"; import { db } from "../../../common/database"; -import { - compressToBase64, - compressToFile -} from "../../../common/filesystem/compress"; +import filesystem from "../../../common/filesystem"; +import { compressToFile } from "../../../common/filesystem/compress"; import AttachImage from "../../../components/dialogs/attach-image-dialog"; import { ToastManager, @@ -35,11 +33,10 @@ import { presentSheet } from "../../../services/event-manager"; import PremiumService from "../../../services/premium"; +import { useSettingStore } from "../../../stores/use-setting-store"; import { FILE_SIZE_LIMIT, IMAGE_SIZE_LIMIT } from "../../../utils/constants"; import { eCloseSheet } from "../../../utils/events"; import { editorController, editorState } from "./utils"; -import { useSettingStore } from "../../../stores/use-setting-store"; -import filesystem from "../../../common/filesystem"; const showEncryptionSheet = (file) => { presentSheet({ @@ -237,7 +234,7 @@ const handleImageResponse = async (response, options) => { } if (image.fileSize > IMAGE_SIZE_LIMIT) { - ToastEvent.show({ + ToastManager.show({ title: "File too large", message: "The maximum allowed size per image is 50 MB", type: "error" @@ -254,15 +251,6 @@ const handleImageResponse = async (response, options) => { let fileName = image.originalFileName || image.fileName; if (!(await attachFile(uri, hash, image.type, fileName, options))) return; - if (isPng || isJpeg) { - b64 = - `data:${image.type};base64, ` + - (await compressToBase64( - Platform.OS === "ios" ? "file://" + image.uri : image.uri, - isPng ? "PNG" : "JPEG" - )); - } - if (Platform.OS === "ios") await RNFetchBlob.fs.unlink(uri); editorController.current?.commands.insertImage({ @@ -302,7 +290,7 @@ export async function attachFile(uri, hash, type, filename, options) { type: options.type || "url", hash: hash }); - encryptionInfo.type = type; + encryptionInfo.mimeType = type; encryptionInfo.filename = filename; encryptionInfo.alg = "xcha-stream"; encryptionInfo.size = encryptionInfo.length; diff --git a/apps/mobile/app/utils/note-bundle.js b/apps/mobile/app/utils/note-bundle.js index 05d964801..bed9596b3 100644 --- a/apps/mobile/app/utils/note-bundle.js +++ b/apps/mobile/app/utils/note-bundle.js @@ -45,7 +45,7 @@ export async function attachFile(uri, hash, type, filename, options) { hash: hash, appGroupId: options.appGroupId }); - encryptionInfo.type = type; + encryptionInfo.mimeType = type; encryptionInfo.filename = filename; encryptionInfo.alg = "xcha-stream"; encryptionInfo.size = encryptionInfo.length;