From 1fc69f8c4b33c6c87bf7f3b5550bf90c1c3ae794 Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Wed, 30 Oct 2024 14:11:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MeetingDisconnected/index.module.scss        |  8 ++++++++
 src/components/MeetingDisconnected/index.tsx     | 16 +++-------------
 src/page/Meeting/index.tsx                       |  4 ++--
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/MeetingDisconnected/index.module.scss b/src/components/MeetingDisconnected/index.module.scss
index 778e718..66be3a7 100644
--- a/src/components/MeetingDisconnected/index.module.scss
+++ b/src/components/MeetingDisconnected/index.module.scss
@@ -1,4 +1,12 @@
 .meetingDisconnected {
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 80px);
+  top: 0;
   color: white;
   font-size: 24px;
+  z-index: 5;
+  background-color: #07090B;
+  padding: 20px 40px;
+  border-radius: 20px;
 }
\ No newline at end of file
diff --git a/src/components/MeetingDisconnected/index.tsx b/src/components/MeetingDisconnected/index.tsx
index ca25e57..077794a 100644
--- a/src/components/MeetingDisconnected/index.tsx
+++ b/src/components/MeetingDisconnected/index.tsx
@@ -1,6 +1,5 @@
 import styles from '@/components/MeetingDisconnected/index.module.scss'
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Modal } from 'antd';
 import { useState, useImperativeHandle, forwardRef } from "react";
 const MeetingDisconnected = forwardRef((props: any, ref: any) => {
   useImperativeHandle(ref, () => ({
@@ -11,18 +10,9 @@ const MeetingDisconnected = forwardRef((props: any, ref: any) => {
   const [isMeetingDisconnectedModal, setIsMeetingDisconnectedModal] = useState(false);
   return (
     <>
-      <Modal
-        title=""
-        open={isMeetingDisconnectedModal}
-        footer={null}
-        centered
-        width={'300px'}
-        closable={false}
-      >
-        <div className={styles.meetingDisconnected}>
-          <InfoCircleOutlined style={{ marginRight: '10px' }} />网络已断开，尝试重新连接中...
-        </div>
-      </Modal>
+      {isMeetingDisconnectedModal ? <div className={styles.meetingDisconnected}>
+        <InfoCircleOutlined style={{ marginRight: '10px', color: '#faad14' }} />网络已断开，尝试重新连接中...
+      </div> : null}
     </>
   )
 })
diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index dc29254..f4b67dd 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -1040,9 +1040,9 @@ const Meeting: React.FC = () => {
         const reconnectingCode = [2, 16, 11, 13, 14, 12]
         if (stateNumber === 4 && reconnectingCode.indexOf(reason) >= 0) {
           message.error('网络断开，请检查网络')
+          meetingDisconnectedRef.current.changeModal(true)
           setIsScreenCapture(bool => {
             if (bool) {
-              meetingDisconnectedRef.current.changeModal(true)
               setIsNetworkDisconnected(true)
               stopScreenCapture()
             }
@@ -1734,6 +1734,7 @@ const Meeting: React.FC = () => {
             enableCamera: !footerList[0][1].active
           })
           message.success('网络已连接。')
+          meetingDisconnectedRef.current.changeModal(false)
           setRoomUserList((res: any) => {
             let userItem = res.find((item: any) => item.uid === userInfo.uid)
             if (userItem.isRoomManager) {
@@ -1745,7 +1746,6 @@ const Meeting: React.FC = () => {
             }
             setIsNetworkDisconnected(bool => {
               if (bool) {
-                meetingDisconnectedRef.current.changeModal(false)
                 allUserLook(userItem.uid, userItem.userName)
               }
               return false