From 5f5b50f86e15a92293368514728319b81f7dadf5 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Thu, 5 Jan 2023 23:54:25 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?=E5=99=A8=E7=9A=84=E9=85=8D=E8=89=B2=E6=96=B9=E6=A1=88,=20?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E6=8E=A7=E5=88=B6=E5=99=A8=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E8=BE=A8=E8=AF=86=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/web/src/components/IconBtn.tsx                     | 8 +++++++-
 client/web/tailchat.d.ts                                  | 2 ++
 .../com.msgbyte.agora/src/FloatWindow/Controls.tsx        | 2 ++
 .../web/plugins/com.msgbyte.agora/types/tailchat.d.ts     | 2 ++
 4 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/client/web/src/components/IconBtn.tsx b/client/web/src/components/IconBtn.tsx
index 828d7355..ea3640b3 100644
--- a/client/web/src/components/IconBtn.tsx
+++ b/client/web/src/components/IconBtn.tsx
@@ -21,6 +21,7 @@ interface IconBtnProps extends Omit<ButtonProps, 'shape'> {
   iconClassName?: string;
   shape?: IconBtnShapeType;
   title?: string;
+  active?: boolean;
 }
 export const IconBtn: React.FC<IconBtnProps> = React.memo(
   ({ icon, iconClassName, title, className, ...props }) => {
@@ -32,13 +33,18 @@ export const IconBtn: React.FC<IconBtnProps> = React.memo(
       </span>
     );
 
+    // 默认情况下的背景颜色
+    const normalBg = props.active
+      ? 'bg-black bg-opacity-60'
+      : 'bg-black bg-opacity-20 hover:bg-opacity-60';
+
     const btnEl = (
       <Button
         className={clsx(
           'border-0 text-white text-opacity-80 hover:text-opacity-100',
           props.danger
             ? 'bg-red-600 bg-opacity-80 hover:bg-opacity-100'
-            : 'bg-black bg-opacity-20 hover:bg-opacity-60',
+            : normalBg,
           className
         )}
         {...props}
diff --git a/client/web/tailchat.d.ts b/client/web/tailchat.d.ts
index b93bbba9..29b85e70 100644
--- a/client/web/tailchat.d.ts
+++ b/client/web/tailchat.d.ts
@@ -390,6 +390,8 @@ declare module '@capital/component' {
     shape?: 'circle' | 'square';
     title?: string;
     danger?: boolean;
+    active?: boolean;
+    disabled?: boolean;
     onClick?: React.MouseEventHandler<HTMLElement>;
   }>;
 
diff --git a/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/FloatWindow/Controls.tsx b/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/FloatWindow/Controls.tsx
index 56136f7f..72897f91 100644
--- a/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/FloatWindow/Controls.tsx
+++ b/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/FloatWindow/Controls.tsx
@@ -52,6 +52,7 @@ export const Controls: React.FC<{
       <IconBtn
         icon={mediaPerm.video ? 'mdi:video' : 'mdi:video-off'}
         title={mediaPerm.video ? '关闭摄像头' : '开启摄像头'}
+        active={mediaPerm.video}
         disabled={!ready}
         size="large"
         onClick={() => mute('video')}
@@ -60,6 +61,7 @@ export const Controls: React.FC<{
       <IconBtn
         icon={mediaPerm.audio ? 'mdi:microphone' : 'mdi:microphone-off'}
         title={mediaPerm.audio ? '关闭麦克风' : '开启麦克风'}
+        active={mediaPerm.audio}
         disabled={!ready}
         size="large"
         onClick={() => mute('audio')}
diff --git a/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/types/tailchat.d.ts b/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/types/tailchat.d.ts
index b93bbba9..29b85e70 100644
--- a/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/types/tailchat.d.ts
+++ b/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/types/tailchat.d.ts
@@ -390,6 +390,8 @@ declare module '@capital/component' {
     shape?: 'circle' | 'square';
     title?: string;
     danger?: boolean;
+    active?: boolean;
+    disabled?: boolean;
     onClick?: React.MouseEventHandler<HTMLElement>;
   }>;