From 0a411fd5c59f8cd1898805e281668f107856ba35 Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Wed, 30 Oct 2024 11:35:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=88=86=E4=BA=AB=E5=B1=8F?=
 =?UTF-8?q?=E5=B9=95=E6=96=AD=E5=BC=80=E7=BD=91=E7=BB=9C=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MeetingDisconnected/index.module.scss     |  4 +++
 src/components/MeetingDisconnected/index.tsx  | 30 +++++++++++++++++++
 src/page/Meeting/index.tsx                    | 21 ++++++++++++-
 src/utils/styles/App.scss                     |  1 +
 4 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 src/components/MeetingDisconnected/index.module.scss
 create mode 100644 src/components/MeetingDisconnected/index.tsx

diff --git a/src/components/MeetingDisconnected/index.module.scss b/src/components/MeetingDisconnected/index.module.scss
new file mode 100644
index 0000000..778e718
--- /dev/null
+++ b/src/components/MeetingDisconnected/index.module.scss
@@ -0,0 +1,4 @@
+.meetingDisconnected {
+  color: white;
+  font-size: 24px;
+}
\ No newline at end of file
diff --git a/src/components/MeetingDisconnected/index.tsx b/src/components/MeetingDisconnected/index.tsx
new file mode 100644
index 0000000..ca25e57
--- /dev/null
+++ b/src/components/MeetingDisconnected/index.tsx
@@ -0,0 +1,30 @@
+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, () => ({
+    changeModal: (bool: boolean) => {
+      setIsMeetingDisconnectedModal(bool)
+    }
+  }))
+  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>
+    </>
+  )
+})
+
+export default MeetingDisconnected
\ No newline at end of file
diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index 50f2cbb..4cbee9c 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -22,6 +22,7 @@ import UserVideo from '@/components/UserVideo';
 import { role } from '@/config/role';
 import { fixWebmDuration } from "webm-duration-fix-buffer";
 import { getKeyOpenChildWindow, setKeyOpenChildWindow } from '@/utils/package/public';
+import MeetingDisconnected from '@/components/MeetingDisconnected';
 const { confirm } = Modal;
 const { exec } = require('child_process');
 const fs = require('fs').promises;
@@ -34,6 +35,7 @@ const Meeting: React.FC = () => {
   const invitingPersonnelRef = useRef<any>();
   const stupWizardRef = useRef<any>();
   const equipmentManagementRef = useRef<any>();
+  const meetingDisconnectedRef = useRef<any>();
   const [isClicked, setIsClicked] = useState(false);
   const [statusList, setStatusList] = useState({
     userList: false,
@@ -166,7 +168,8 @@ const Meeting: React.FC = () => {
   const [_currentRequestSpeakType, setCurrentRequestSpeakType] = useState<'video' | 'audio' | ''>('')
   const [_mediaStream, setMediaStream] = useState<any>('')
   const [isShare, setIsShare] = useState<any>(null)
-  const [isSharePopConfirm, setIsSharePopConfirm] = useState<any>(false)
+  const [isSharePopConfirm, setIsSharePopConfirm] = useState(false)
+  const [_isNetworkDisconnected, setIsNetworkDisconnected] = useState(false)
   const [isShareUser, setIsShareUser] = useState<any>(null)
   const [currentLookUserStatus, setCurrentLookUserStatus] = useState<0 | 1 | 2 | 3 | 4>(1)
   const [clickCurrentLookUserStatus, setClickCurrentLookUserStatus] = useState<boolean>(true)
@@ -1037,6 +1040,14 @@ const Meeting: React.FC = () => {
         const reconnectingCode = [2, 16, 11, 13, 14, 12]
         if (stateNumber === 4 && reconnectingCode.indexOf(reason) >= 0) {
           message.error('网络断开，请检查网络')
+          setIsScreenCapture(bool => {
+            if (bool) {
+              meetingDisconnectedRef.current.changeModal(true)
+              setIsNetworkDisconnected(true)
+              stopScreenCapture()
+            }
+            return bool
+          })
         }
       },
       onLocalVideoStateChanged: async (_source: VideoSourceType, _state: LocalVideoStreamState, reason: LocalVideoStreamReason) => {
@@ -1732,6 +1743,13 @@ const Meeting: React.FC = () => {
                 userId: userInfo.uid
               })
             }
+            setIsNetworkDisconnected(bool => {
+              if (bool) {
+                meetingDisconnectedRef.current.changeModal(false)
+                allUserLook(userItem.screenShareId, userItem.userName)
+              }
+              return false
+            })
             setIsScreenCapture(bool => {
               if (bool) {
                 allUserLook(userItem.screenShareId, userItem.userName)
@@ -2858,6 +2876,7 @@ const Meeting: React.FC = () => {
       <InvitingPersonnelModal ref={invitingPersonnelRef} />
       <StupWizard ref={stupWizardRef} />
       <EquipmentManagement ref={equipmentManagementRef} />
+      <MeetingDisconnected ref={meetingDisconnectedRef} />
     </>
   )
 }
diff --git a/src/utils/styles/App.scss b/src/utils/styles/App.scss
index dc87e74..ab2bc9a 100644
--- a/src/utils/styles/App.scss
+++ b/src/utils/styles/App.scss
@@ -351,6 +351,7 @@ $pagination-hover-background-color: #5575F2;
 // ant-notification
 .ant-notification {
   -webkit-app-region: no-drag;
+
   .ant-notification-notice-wrapper {
     background-color: #1F2022;