From a224ac602eb0288557c6e340e438a309c9e9ac6d Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 18 Jul 2023 15:38:47 +0800
Subject: [PATCH] fix: added forceUploadOriginImage to force specify whether to
 enable image compression

---
 .../src/components/ChatBox/ChatInputBox/utils.tsx   |  4 ++++
 .../src/components/modals/ImageUploadPreviewer.tsx  | 13 +++++++++++--
 client/web/src/utils/image-helper.ts                | 11 +++++++++++
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/client/web/src/components/ChatBox/ChatInputBox/utils.tsx b/client/web/src/components/ChatBox/ChatInputBox/utils.tsx
index 70ea6ec0..b8d65875 100644
--- a/client/web/src/components/ChatBox/ChatInputBox/utils.tsx
+++ b/client/web/src/components/ChatBox/ChatInputBox/utils.tsx
@@ -1,6 +1,7 @@
 import { closeModal, openModal } from '@/components/Modal';
 import { ImageUploadPreviewer } from '@/components/modals/ImageUploadPreviewer';
 import { compressImage, fileToDataUrl } from '@/utils/file-helper';
+import { canImageCompression } from '@/utils/image-helper';
 import React from 'react';
 import { uploadFile } from 'tailchat-shared';
 
@@ -17,6 +18,9 @@ export function uploadMessageImage(image: File): Promise<{
       const key = openModal(
         <ImageUploadPreviewer
           imageUrl={imageLocalUrl}
+          forceUploadOriginImage={
+            canImageCompression(image.type) ? undefined : true
+          }
           onCancel={() => {
             closeModal(key);
           }}
diff --git a/client/web/src/components/modals/ImageUploadPreviewer.tsx b/client/web/src/components/modals/ImageUploadPreviewer.tsx
index f9e65f37..4fe9fd99 100644
--- a/client/web/src/components/modals/ImageUploadPreviewer.tsx
+++ b/client/web/src/components/modals/ImageUploadPreviewer.tsx
@@ -12,6 +12,12 @@ interface ImageSize {
 
 interface ImageUploadPreviewerProps {
   imageUrl: string;
+  /**
+   * 是否强制指定是否上传原图
+   *
+   * 如果传入undefined则视为用户自行选择
+   */
+  forceUploadOriginImage?: boolean;
   onConfirm: (imageUploadInfo: {
     size: ImageSize;
     uploadOriginImage: boolean;
@@ -20,9 +26,11 @@ interface ImageUploadPreviewerProps {
 }
 export const ImageUploadPreviewer: React.FC<ImageUploadPreviewerProps> =
   React.memo((props) => {
-    const { imageUrl } = props;
+    const { imageUrl, forceUploadOriginImage } = props;
     const imageSizeRef = useRef<ImageSize>({ width: 0, height: 0 });
-    const [uploadOriginImage, setUploadOriginImage] = useState(false);
+    const [uploadOriginImage, setUploadOriginImage] = useState(
+      forceUploadOriginImage ?? false
+    );
 
     const [{ loading }, handleConfirm] = useAsyncFn(async () => {
       if (
@@ -93,6 +101,7 @@ export const ImageUploadPreviewer: React.FC<ImageUploadPreviewerProps> =
             <div className="w-full">
               <div className="text-left">
                 <Switch
+                  disabled={typeof forceUploadOriginImage !== 'undefined'}
                   checked={uploadOriginImage}
                   onChange={(checked) => setUploadOriginImage(checked)}
                 />
diff --git a/client/web/src/utils/image-helper.ts b/client/web/src/utils/image-helper.ts
index adacdadb..8b96945d 100644
--- a/client/web/src/utils/image-helper.ts
+++ b/client/web/src/utils/image-helper.ts
@@ -57,3 +57,14 @@ export async function fetchImagePrimaryColor(imageUrl: string) {
     a,
   };
 }
+
+/**
+ * 判断传入的文件类型是否可以进行图片压缩
+ */
+export function canImageCompression(imageType: string): boolean {
+  if (['image/gif'].includes(imageType)) {
+    return false;
+  }
+
+  return true;
+}