diff --git a/src/components/MeetingDisconnected/index.module.scss b/src/components/MeetingDisconnected/index.module.scss
new file mode 100644
index 0000000..66be3a7
--- /dev/null
+++ b/src/components/MeetingDisconnected/index.module.scss
@@ -0,0 +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
new file mode 100644
index 0000000..077794a
--- /dev/null
+++ b/src/components/MeetingDisconnected/index.tsx
@@ -0,0 +1,20 @@
+import styles from '@/components/MeetingDisconnected/index.module.scss'
+import { InfoCircleOutlined } from '@ant-design/icons';
+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 (
+ <>
+ {isMeetingDisconnectedModal ?
+ 网络已断开,尝试重新连接中...
+
: null}
+ >
+ )
+})
+
+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..f4b67dd 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('网络断开,请检查网络')
+ meetingDisconnectedRef.current.changeModal(true)
+ setIsScreenCapture(bool => {
+ if (bool) {
+ setIsNetworkDisconnected(true)
+ stopScreenCapture()
+ }
+ return bool
+ })
}
},
onLocalVideoStateChanged: async (_source: VideoSourceType, _state: LocalVideoStreamState, reason: LocalVideoStreamReason) => {
@@ -1723,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) {
@@ -1732,9 +1744,15 @@ const Meeting: React.FC = () => {
userId: userInfo.uid
})
}
+ setIsNetworkDisconnected(bool => {
+ if (bool) {
+ allUserLook(userItem.uid, userItem.userName)
+ }
+ return false
+ })
setIsScreenCapture(bool => {
if (bool) {
- allUserLook(userItem.screenShareId, userItem.userName)
+ allUserLook(userItem.uid, userItem.userName)
}
return bool
})
@@ -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;