diff --git a/apps/mobile/app/common/filesystem/compress.js b/apps/mobile/app/common/filesystem/compress.js
index 7c6dc9477..5e3a0ba2a 100644
--- a/apps/mobile/app/common/filesystem/compress.js
+++ b/apps/mobile/app/common/filesystem/compress.js
@@ -48,3 +48,22 @@ export async function compressToBase64(path, type) {
RNFetchBlob.fs.unlink(response.uri.replace("file://", "")).catch(console.log);
return base64;
}
+
+export async function compressToFile(path, type) {
+ const response = await ImageResizer.createResizedImage(
+ path,
+ 1080,
+ 9999,
+ type,
+ 85,
+ 0,
+ undefined,
+ true,
+ {
+ mode: "contain",
+ onlyScaleDown: true
+ }
+ );
+ RNFetchBlob.fs.unlink(path.replace("file://", "")).catch(console.log);
+ return response.uri;
+}
diff --git a/apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx b/apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx
new file mode 100644
index 000000000..281e6c352
--- /dev/null
+++ b/apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx
@@ -0,0 +1,173 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+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 React, { useState } from "react";
+import { Image, TouchableOpacity, View } from "react-native";
+import { ImagePickerResponse } from "react-native-image-picker";
+import { useThemeColors } from "../../../../../../packages/theme/dist";
+import { presentSheet } from "../../../services/event-manager";
+import { SIZE } from "../../../utils/size";
+import { Button } from "../../ui/button";
+import { IconButton } from "../../ui/icon-button";
+import { Notice } from "../../ui/notice";
+import Paragraph from "../../ui/typography/paragraph";
+
+export default function AttachImage({
+ response,
+ onAttach,
+ close
+}: {
+ response: ImagePickerResponse;
+ onAttach: ({ compress }: { compress: boolean }) => void;
+ close: ((ctx?: string | undefined) => void) | undefined;
+}) {
+ const { colors } = useThemeColors();
+ const [compress, setCompress] = useState(true);
+ const image = response.assets?.[0];
+ const width = image?.width || 0;
+ const height = image?.height || 0;
+ const ratio = width / height;
+
+ return (
+
+ {image ? (
+
+
+
+ ) : null}
+
+ {
+ setCompress(!compress);
+ }}
+ >
+ {
+ setCompress(!compress);
+ }}
+ />
+
+
+ Compress image (recommended)
+
+
+
+ {!compress ? (
+
+ ) : (
+
+ )}
+
+
+ );
+}
+
+AttachImage.present = (response: ImagePickerResponse) => {
+ return new Promise((resolve) => {
+ let resolved = false;
+ presentSheet({
+ component: (ref, close, update) => (
+ {
+ resolved = true;
+ console.log("closing");
+ resolve(result);
+ close?.();
+ }}
+ />
+ ),
+ onClose: () => {
+ if (resolved) return;
+ resolve(undefined);
+ }
+ });
+ });
+};
diff --git a/apps/mobile/app/components/ui/notice/index.tsx b/apps/mobile/app/components/ui/notice/index.tsx
index 6be51d4f8..492100856 100644
--- a/apps/mobile/app/components/ui/notice/index.tsx
+++ b/apps/mobile/app/components/ui/notice/index.tsx
@@ -17,10 +17,10 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see .
*/
-import { useThemeColors } from "@notesnook/theme";
import React from "react";
-import { View } from "react-native";
import { getContainerBorder } from "../../../utils/colors";
+import { View, ViewStyle } from "react-native";
+import { useThemeColors } from "@notesnook/theme";
import { SIZE } from "../../../utils/size";
import { IconButton } from "../icon-button";
import Paragraph from "../typography/paragraph";
@@ -30,13 +30,15 @@ export interface NoticeProps {
text: string;
size?: "small" | "large";
selectable?: boolean;
+ style?: ViewStyle;
}
export const Notice = ({
type = "alert",
text,
size = "large",
- selectable
+ selectable,
+ style
}: NoticeProps) => {
const { colors } = useThemeColors();
const isSmall = size === "small";
@@ -49,7 +51,8 @@ export const Notice = ({
backgroundColor: colors.secondary.background,
borderRadius: isSmall ? 5 : 10,
alignItems: "flex-start",
- ...getContainerBorder(colors.secondary.background)
+ ...getContainerBorder(colors.secondary.background),
+ ...style
}}
>
{
}
let image = response.assets[0];
+
+ const compress = await AttachImage.present(response);
+
+ const isPng = /(png)/g.test(image.type);
+ const isJpeg = /(jpeg|jpg)/g.test(image.type);
+
+ if (compress && (isPng || isJpeg)) {
+ image.uri = await compressToFile(
+ Platform.OS === "ios" ? "file://" + image.uri : image.uri,
+ isPng ? "PNG" : "JPEG"
+ );
+ const stat = await RNFetchBlob.fs.stat(image.uri.replace("file://", ""));
+ image.fileSize = stat.size;
+ }
+
if (image.fileSize > IMAGE_SIZE_LIMIT) {
ToastManager.show({
title: "File too large",
@@ -242,8 +261,7 @@ const handleImageResponse = async (response, options) => {
});
if (!(await attachFile(uri, hash, image.type, fileName, options))) return;
- const isPng = /(png)/g.test(image.type);
- const isJpeg = /(jpeg|jpg)/g.test(image.type);
+
if (isPng || isJpeg) {
b64 =
`data:${image.type};base64, ` +
diff --git a/apps/mobile/app/utils/note-bundle.js b/apps/mobile/app/utils/note-bundle.js
index 02ee387e5..05d964801 100644
--- a/apps/mobile/app/utils/note-bundle.js
+++ b/apps/mobile/app/utils/note-bundle.js
@@ -23,6 +23,7 @@ import { Platform } from "react-native";
import RNFetchBlob from "react-native-blob-util";
import { DatabaseLogger, db } from "../common/database";
import { IOS_APPGROUPID } from "./constants";
+import { compressToFile } from "../common/filesystem/compress";
const santizeUri = (uri) => {
uri = decodeURI(uri);
@@ -92,10 +93,22 @@ async function createNotes(bundle) {
);
}
}
+ const compress = bundle.compress;
for (const file of bundle.files) {
- const uri =
- Platform.OS === "ios" ? santizeUri(file.value) : `${file.value}`;
+ let uri = Platform.OS === "ios" ? santizeUri(file.value) : `${file.value}`;
+
+ const isPng = /(png)/g.test(file.type);
+ const isJpeg = /(jpeg|jpg)/g.test(file.type);
+
+ if ((isPng || isJpeg) && compress) {
+ console.log(uri, "before compressed");
+ uri = await compressToFile("file://" + uri, isPng ? "PNG" : "JPEG");
+
+ uri = `${uri.replace("file://", "")}`;
+ }
+ console.log(uri, "after compressed");
+
const hash = await Sodium.hashFile({
uri: uri,
type: "cache"
diff --git a/apps/mobile/share/share.js b/apps/mobile/share/share.js
index c15253113..8c1dd065e 100644
--- a/apps/mobile/share/share.js
+++ b/apps/mobile/share/share.js
@@ -33,6 +33,7 @@ import {
SafeAreaView,
ScrollView,
StatusBar,
+ Text,
TouchableOpacity,
View,
useWindowDimensions
@@ -137,6 +138,7 @@ const ShareView = () => {
const [rawFiles, setRawFiles] = useState([]);
const [kh, setKh] = useState(0);
+ const [compress, setCompress] = useState(true);
globalThis["IS_SHARE_EXTENSION"] = true;
const onKeyboardDidShow = (event) => {
let height = Dimensions.get("window").height - event.endCoordinates.screenY;
@@ -294,7 +296,8 @@ const ShareView = () => {
files: rawFiles,
note: _note,
notebooks: useShareStore.getState().selectedNotebooks,
- tags: useShareStore.getState().selectedTags
+ tags: useShareStore.getState().selectedTags,
+ compress
});
try {
@@ -551,6 +554,39 @@ const ShareView = () => {
>
Tap to remove an attachment.
+ {
+ setCompress(!compress);
+ }}
+ >
+
+
+
+ Compress image (recommended)
+
+
) : null}