From cc04c36a86f63331faaec89e197fe23486d992be Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 25 Nov 2023 17:32:12 +0800
Subject: [PATCH] perf: hide mobile member button in livekit

---
 .../src/components/lib/ControlBar.tsx                  | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/components/lib/ControlBar.tsx b/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/components/lib/ControlBar.tsx
index e18393c4..7565ce96 100644
--- a/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/components/lib/ControlBar.tsx
+++ b/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/components/lib/ControlBar.tsx
@@ -14,6 +14,8 @@ import { Translate } from '../../translate';
 import { useMediaQuery } from '../../utils/useMediaQuery';
 import { useMeetingContextState } from '../../context/MeetingContext';
 import { Icon } from '@capital/component';
+import { useIsMobile } from '@capital/common';
+import { useEffect, useState } from 'react';
 
 /** @public */
 export type ControlBarControls = {
@@ -48,9 +50,10 @@ export type ControlBarProps = React.HTMLAttributes<HTMLDivElement> & {
  * @public
  */
 export function ControlBar({ variation, controls, ...props }: ControlBarProps) {
-  const [isChatOpen, setIsChatOpen] = React.useState(false);
+  const [isChatOpen, setIsChatOpen] = useState(false);
   const layoutContext = useMaybeLayoutContext();
-  React.useEffect(() => {
+  const isMobile = useIsMobile();
+  useEffect(() => {
     if (layoutContext?.widget.state?.showChat !== undefined) {
       setIsChatOpen(layoutContext?.widget.state?.showChat);
     }
@@ -143,7 +146,8 @@ export function ControlBar({ variation, controls, ...props }: ControlBarProps) {
         </button>
       )}
 
-      {visibleControls.member && (
+      {/* Hide member control in mobile version because of not ready */}
+      {!isMobile && visibleControls.member && (
         <button className="lk-button" onClick={() => setRightPanel('member')}>
           {showIcon && <Icon icon="mdi:account-multiple" />}
           {showText && Translate.member}