From abb3d939e9f229239cd485c119ad2bc7eae7c055 Mon Sep 17 00:00:00 2001
From: shikelong <578622705@qq.com>
Date: Thu, 4 Nov 2021 22:27:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(setting):=20=E7=94=B1=E4=BA=8E=20gif=20?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=20canvas=20=E8=A3=81=E5=89=AA=E5=90=8E?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E4=BF=9D=E7=95=99=E5=8A=A8=E5=9B=BE=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E5=AF=B9=20gif=20=E6=A0=BC=E5=BC=8F=E7=9A=84?=
 =?UTF-8?q?=E5=A4=B4=E5=83=8F=E6=96=87=E4=BB=B6=E8=B7=B3=E8=BF=87=E8=A3=81?=
 =?UTF-8?q?=E5=89=AA=E5=A4=84=E7=90=86=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

没有添加确认的步骤。个人感觉从用户体验上来说，直接设置成功会更好一些。

issue #7
---
 web/src/components/AvatarPicker.tsx | 28 ++++++++++++++++++++--------
 web/src/utils/filetype-helper.ts    |  8 ++++++++
 2 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 web/src/utils/filetype-helper.ts

diff --git a/web/src/components/AvatarPicker.tsx b/web/src/components/AvatarPicker.tsx
index 4f6711f6..61995439 100644
--- a/web/src/components/AvatarPicker.tsx
+++ b/web/src/components/AvatarPicker.tsx
@@ -4,6 +4,7 @@ import { showToasts, t } from 'tailchat-shared';
 import { Avatar } from 'antd';
 import { Icon } from '@iconify/react';
 import { ModalAvatarCropper } from './modals/AvatarCropper';
+import { isGIF } from '@/utils/filetype-helper';
 
 interface AvatarPickerProps {
   className?: string;
@@ -16,10 +17,25 @@ interface AvatarPickerProps {
  */
 export const AvatarPicker: React.FC<AvatarPickerProps> = React.memo((props) => {
   const fileRef = useRef<HTMLInputElement>(null);
-  const [cropUrl, setCropUrl] = useState<string>(props.imageUrl || ''); // 裁剪后并使用的url
+  const [avatarUrl, setAvatarUrl] = useState<string>(props.imageUrl || ''); // 裁剪后并使用的url/或者未经裁剪的 gif url
+
+  const updateAvatar = (imageBlobUrl: string) => {
+    setAvatarUrl(imageBlobUrl);
+
+    if (typeof props.onChange === 'function') {
+      props.onChange(imageBlobUrl);
+    }
+  };
 
   const handleSelectFile = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {
+      const pickedFile = e.target.files[0];
+
+      if (isGIF(pickedFile)) {
+        updateAvatar(URL.createObjectURL(pickedFile));
+        return;
+      }
+
       const reader = new FileReader();
       reader.addEventListener('load', () => {
         if (reader.result) {
@@ -28,11 +44,7 @@ export const AvatarPicker: React.FC<AvatarPickerProps> = React.memo((props) => {
               imageUrl={reader.result.toString()}
               onConfirm={(croppedImageBlobUrl) => {
                 closeModal(key);
-                setCropUrl(croppedImageBlobUrl);
-
-                if (typeof props.onChange === 'function') {
-                  props.onChange(croppedImageBlobUrl);
-                }
+                updateAvatar(croppedImageBlobUrl);
               }}
             />,
             {
@@ -44,7 +56,7 @@ export const AvatarPicker: React.FC<AvatarPickerProps> = React.memo((props) => {
           showToasts(t('文件读取失败'), 'error');
         }
       });
-      reader.readAsDataURL(e.target.files[0]);
+      reader.readAsDataURL(pickedFile);
 
       // 清理选中状态
       e.target.files = null;
@@ -71,7 +83,7 @@ export const AvatarPicker: React.FC<AvatarPickerProps> = React.memo((props) => {
           <Avatar
             size={64}
             icon={<Icon className="anticon" icon="mdi:account" />}
-            src={cropUrl}
+            src={avatarUrl}
           />
         )}
       </div>
diff --git a/web/src/utils/filetype-helper.ts b/web/src/utils/filetype-helper.ts
new file mode 100644
index 00000000..b92643fe
--- /dev/null
+++ b/web/src/utils/filetype-helper.ts
@@ -0,0 +1,8 @@
+/**
+ * Judge GIF File type by mime type
+ * @param file File object
+ * @returns if passed file object is a gif image.
+ */
+export const isGIF = (file: File): boolean => {
+  return file.type === 'image/gif';
+};