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 1/3] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=88=86=E4=BA=AB?= =?UTF-8?q?=E5=B1=8F=E5=B9=95=E6=96=AD=E5=BC=80=E7=BD=91=E7=BB=9C=E6=98=BE?= =?UTF-8?q?=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 ( + <> + +
+ 网络已断开，尝试重新连接中... +
+ + + ) +}) + +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(); const stupWizardRef = useRef(); const equipmentManagementRef = useRef(); + const meetingDisconnectedRef = useRef(); 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('') const [isShare, setIsShare] = useState(null) - const [isSharePopConfirm, setIsSharePopConfirm] = useState(false) + const [isSharePopConfirm, setIsSharePopConfirm] = useState(false) + const [_isNetworkDisconnected, setIsNetworkDisconnected] = useState(false) const [isShareUser, setIsShareUser] = useState(null) const [currentLookUserStatus, setCurrentLookUserStatus] = useState<0 | 1 | 2 | 3 | 4>(1) const [clickCurrentLookUserStatus, setClickCurrentLookUserStatus] = useState(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 = () => { + ) } 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; From 9b413770550a69aa7305adb9bce8301558a07979 Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Wed, 30 Oct 2024 11:44:14 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/Meeting/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 4cbee9c..dc29254 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -1746,13 +1746,13 @@ const Meeting: React.FC = () => { setIsNetworkDisconnected(bool => { if (bool) { meetingDisconnectedRef.current.changeModal(false) - allUserLook(userItem.screenShareId, userItem.userName) + allUserLook(userItem.uid, userItem.userName) } return false }) setIsScreenCapture(bool => { if (bool) { - allUserLook(userItem.screenShareId, userItem.userName) + allUserLook(userItem.uid, userItem.userName) } return bool }) 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 3/3] =?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 ( <> - -
- 网络已断开，尝试重新连接中... -
- + {isMeetingDisconnectedModal ?
+ 网络已断开，尝试重新连接中... +
: 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