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;