优化

src/page/Meeting/index.tsx

@@ -184,6 +184,7 @@ const Meeting: React.FC = () => {
   const [isClickLock, setIsClickLock] = useState(false)
   const [open, setOpen] = useState(false)
   const [modeOpen, setModeOpen] = useState(false)
+  const [showCaret, setShowCaret] = useState(false)
   const [meetingMode, setMeetingMode] = useState('FreedomMode')
   const [userSearchValue, setUserSearchValue] = useState('')
   const [noViewChatList, setNoViewChatList] = useState(0)
@@ -489,7 +490,7 @@ const Meeting: React.FC = () => {
                           title: '录制'
                         }, 1, 3)
                       } else {
-                        message.error('当前不在会议室！')
+                        handleMessage().error('当前不在会议室！')
                       }
                       showSingIn()
                     },
@@ -747,7 +748,7 @@ const Meeting: React.FC = () => {
           try {
             const temp = JSON.parse(item.contentString)
             if (temp.type === 'mode') {
-              temp.msg ? message.success(`管理员已将会议室显示模式更新为${getMeetingContentBodyLeftModeText(temp.mode)}`) : null;
+              temp.msg ? handleMessage().success(`管理员已将会议室显示模式更新为${getMeetingContentBodyLeftModeText(temp.mode)}`) : null;
               setIsScreenCapture(isScreenCaptureValue => {
                 setMeetingMode(isScreenCaptureValue ? 'SpeakerMode' : temp.mode)
                 return isScreenCaptureValue
@@ -759,12 +760,12 @@ const Meeting: React.FC = () => {
           break;
         // 全员离开房间
         case 'AllLeave':
-          message.success('管理员已结束会议!')
+          handleMessage().success('管理员已结束会议!')
           leaveChannel(false)
           break;
         // 移出会议
         case 'ForceExitRoom':
-          message.success('管理员已将你移出会议!')
+          handleMessage().success('管理员已将你移出会议!')
           leaveChannel()
           break;
         // 更新视图模式
@@ -776,9 +777,9 @@ const Meeting: React.FC = () => {
           if (item.operUid && item.operUserName) {
             if (item.operUid !== userInfo.uid) {
               if (item.uid === userInfo.uid) {
-                message.success(`${item.operUserName}设置全员看你`)
+                handleMessage().success(`${item.operUserName}设置全员看你`)
               } else {
-                message.success(`${item.operUserName}设置全员看${item.uname}`)
+                handleMessage().success(`${item.operUserName}设置全员看${item.uname}`)
               }
             }
           }
@@ -800,7 +801,7 @@ const Meeting: React.FC = () => {
         case 'OperMicr':
           if (item.operUid !== userInfo.uid) {
             if (item.user.uid === userInfo.uid) {
-              message.success(item.user.enableMicr ? '管理员已取消你的静音' : '你已被管理员静音')
+              handleMessage().success(item.user.enableMicr ? '管理员已取消你的静音' : '你已被管理员静音')
             }
           }
           setAllUserListData('OperMicr', item)
@@ -809,7 +810,7 @@ const Meeting: React.FC = () => {
         case 'OperCamera':
           if (item.operUid !== userInfo.uid) {
             if (item.user.uid === userInfo.uid) {
-              message.success(item.user.enableCamera ? '管理员已开启你的摄像头' : '管理员已关闭你摄像头')
+              handleMessage().success(item.user.enableCamera ? '管理员已开启你的摄像头' : '管理员已关闭你摄像头')
             }
           }
           setAllUserListData('OperCamera', item)
@@ -828,20 +829,20 @@ const Meeting: React.FC = () => {
             if (item.user.uid === item.uid) {
               if (item.user.uid === userInfo.uid) {
                 await agora.allLeaveChannelEx()
-                message.success(`操作成功`)
+                handleMessage().success(`操作成功`)
                 await agora.updateChannelMediaOptions(item.user.isRoomManager)
                 await postOpenMicrApi(item.user.isRoomManager, userInfo.uid, false)
                 await postOpenCameraApi(false, userInfo.uid) // 不管身份如何改变都关闭摄像头
                 await stopScreenCapture()
               } else {
-                message.success(`${item.user.userName}已结束发言`)
+                handleMessage().success(`${item.user.userName}已结束发言`)
               }
             } else {
               if (item.user.uid === userInfo.uid) {
                 if (item.user.isRoomManager) {
                   await agora.allLeaveChannelEx()
                 }
-                message.success(`管理员${item.user.isRoomManager ? '设置' : '取消'}您为发言人`)
+                handleMessage().success(`管理员${item.user.isRoomManager ? '设置' : '取消'}您为发言人`)
                 await agora.updateChannelMediaOptions(item.user.isRoomManager)
                 setCurrentRequestSpeakType(res => {
                   if (res === 'video') {
@@ -856,7 +857,7 @@ const Meeting: React.FC = () => {
                 })
                 await stopScreenCapture()
               } else {
-                message.success(`管理员${item.user.isRoomManager ? '设置' : '取消'}${item.user.userName}为发言人`)
+                handleMessage().success(`管理员${item.user.isRoomManager ? '设置' : '取消'}${item.user.userName}为发言人`)
               }
             }
           })
@@ -1046,7 +1047,7 @@ const Meeting: React.FC = () => {
     if (recorder) {
       recorder.start()
       recorder.onstart = async () => {
-        message.success('开始录制')
+        handleMessage().success('开始录制')
       }
       recorder.onerror = async () => {
         setRecorder('')
@@ -1055,7 +1056,7 @@ const Meeting: React.FC = () => {
         changeStatusList({
           title: '录制中'
         }, 1, 3)
-        message.error('录制失败，请重新录制！')
+        handleMessage().error('录制失败，请重新录制！')
       }
       recorder.onstop = async () => {
 
@@ -1213,7 +1214,7 @@ const Meeting: React.FC = () => {
   //                   GetApplySpeak(state.channelId).then(res => {
   //                     if (res.code === 200) {
   //                       setIsClicked(true);
-  //                       message.success('申请发言成功')
+  //                       handleMessage().success('申请发言成功')
   //                     }
   //                   })
   //                 },
@@ -1257,7 +1258,7 @@ const Meeting: React.FC = () => {
               } else {
                 item.status--
                 if (item.status <= 0) {
-                  message.error(`设置${user.userName}发言人失败！`)
+                  handleMessage().error(`设置${user.userName}发言人失败！`)
                   newApplyUserList.splice(index, 1)
                 }
               }
@@ -1483,7 +1484,7 @@ const Meeting: React.FC = () => {
             return bool
           })
         } else if (reason === 3 || reason === 4) {
-          message.error({
+          handleMessage().error({
             content: <div>检查摄像头是否正常、未被占用，或尝试重新加入频道。<span style={{ color: '#606fc7', cursor: 'pointer' }} onClick={() => {
               stupWizardRef.current.changeModal(1);
             }}>前往修改摄像头</span></div>,
@@ -1497,7 +1498,7 @@ const Meeting: React.FC = () => {
               uid: userInfo.uid,
               enableCamera: false
             })
-            message.error({
+            handleMessage().error({
               content: <div>检查摄像头是否正常、未被占用，或尝试重新加入频道。<span style={{ color: '#606fc7', cursor: 'pointer' }} onClick={() => {
                 stupWizardRef.current.changeModal(1);
               }}>前往修改摄像头</span></div>,
@@ -1840,7 +1841,7 @@ const Meeting: React.FC = () => {
           GetApplySpeak(state.channelId).then(res => {
             if (res.code === 200) {
               setIsClicked(true);
-              message.success('申请发言成功')
+              handleMessage().success('申请发言成功')
             }
           })
         },
@@ -1884,7 +1885,7 @@ const Meeting: React.FC = () => {
               }
             })
           } else {
-            message.error(msgTips)
+            handleMessage().error(msgTips)
           }
         })
         break;
@@ -1894,7 +1895,7 @@ const Meeting: React.FC = () => {
           if (res) {
             await stopScreenCapture()
           } else {
-            message.error(msgTips)
+            handleMessage().error(msgTips)
           }
         })
         if (row.title === '停止共享') {
@@ -1913,7 +1914,7 @@ const Meeting: React.FC = () => {
               setCurrentRequestSpeakType('audio')
               requestSpeak()
             } else {
-              message.error('申请太频繁了，请稍后重试！');
+              handleMessage().error('申请太频繁了，请稍后重试！');
             }
           }
         })
@@ -1930,7 +1931,7 @@ const Meeting: React.FC = () => {
               setCurrentRequestSpeakType('video')
               requestSpeak()
             } else {
-              message.error('申请太频繁了，请稍后重试！');
+              handleMessage().error('申请太频繁了，请稍后重试！');
             }
           }
         })
@@ -1945,7 +1946,7 @@ const Meeting: React.FC = () => {
           if (res) {
             invitingPersonnelRef.current.changeInvitingPersonnelModal()
           } else {
-            message.error(msgTips)
+            handleMessage().error(msgTips)
           }
         })
         break;
@@ -2001,25 +2002,25 @@ const Meeting: React.FC = () => {
               setRecorder(mediaRecorder);
             });
           } else {
-            message.error('录制太频繁了，请稍后重试！');
+            handleMessage().error('录制太频繁了，请稍后重试！');
           }
         } catch (error: any) {
           if (error.code === 'ENOENT') {
-            message.error({
+            handleMessage().error({
               content: <div>文件夹不存在 <span style={{ color: '#606fc7', cursor: 'pointer' }} onClick={() => {
                 stupWizardRef.current.changeModal(3);
               }}>前往设置</span></div>
             });
             return;
           } else {
-            message.error(error);
+            handleMessage().error(error);
           }
         }
 
         break;
       case '录制中':
         if (isClickedMediaSteam) {
-          message.error('录制时长不足3秒，请稍后重试！');
+          handleMessage().error('录制时长不足3秒，请稍后重试！');
         } else {
           footerListTemplate[itemIndex][rowIndex].title = '录制'
           footerListTemplate[itemIndex][rowIndex].active = false
@@ -2034,7 +2035,7 @@ const Meeting: React.FC = () => {
         if (!isClicked) {
           requestSpeak()
         } else {
-          message.error('申请太频繁了，请稍后重试！');
+          handleMessage().error('申请太频繁了，请稍后重试！');
         }
         break;
       case '会议监控':
@@ -2183,7 +2184,7 @@ const Meeting: React.FC = () => {
   // 设置发言人
   const postRoomManager = async (data: any): Promise<void> => {
     if (isAdmin >= 20) {
-      message.error('设置失败，已达最大发言人20个！')
+      handleMessage().error('设置失败，已达最大发言人20个！')
     } else {
       await PostRoomManager({
         roomId: data.roomId,
@@ -2282,7 +2283,7 @@ const Meeting: React.FC = () => {
         break;
       case 'reconnect':
         if (e.value == true) {
-          message.success('网络已连接。')
+          handleMessage().success('网络已连接。')
           meetingDisconnectedRef.current.changeModal(false)
           setIsAgoraDisconnected(false)
           async function setUserStatus(res: any) {
@@ -2348,7 +2349,7 @@ const Meeting: React.FC = () => {
         return res
       })
     } else {
-      message.error('请输入内容！')
+      handleMessage().error('请输入内容！')
     }
   }
   // 聊天框滚动到底部
@@ -2378,19 +2379,20 @@ const Meeting: React.FC = () => {
             })
           }
           if (msg) {
-            message.error(msg)
+            handleMessage().error(msg)
             return
           }
         }
         if (enableMicr) {
           const enableMicrLenght = roomUserList.filter((item: any) => item.enableMicr).length
           if (enableMicrLenght >= 20) {
-            return message.error('房间内最多20个开启麦克风')
+            handleMessage().error('房间内最多20个开启麦克风')
+            return
           }
         }
         await postOpenMicrApi(enableMicr, uid, isAll, true)
       } else {
-        message.error(msgTips)
+        handleMessage().error(msgTips)
       }
     })
   }
@@ -2418,7 +2420,7 @@ const Meeting: React.FC = () => {
       // })
     }
     if (isMessage) {
-      // message.success('操作成功')
+      // handleMessage().success('操作成功')
     }
   }
   // 开关视频
@@ -2434,18 +2436,19 @@ const Meeting: React.FC = () => {
           })
         }
         if (msg) {
-          message.error(msg)
+          handleMessage().error(msg)
           return
         }
         if (enableCamera) {
           const enableCameraLenght = roomUserList.filter((item: any) => item.enableCamera).length
           if (enableCameraLenght >= 20) {
-            return message.error('房间内最多20个开启摄像头')
+            handleMessage().error('房间内最多20个开启摄像头')
+            return
           }
         }
         await postOpenCameraApi(enableCamera, uid, true)
       } else {
-        message.error(msgTips)
+        handleMessage().error(msgTips)
       }
     })
   }
@@ -2471,7 +2474,7 @@ const Meeting: React.FC = () => {
     //   enableCamera
     // })
     if (isMessage) {
-      // message.success('操作成功')
+      // handleMessage().success('操作成功')
     }
   }
   // 演讲者模式
@@ -2637,21 +2640,24 @@ const Meeting: React.FC = () => {
     } else {
       await allUserLook(item.uid, item.userName)
     }
-    message.success('操作成功')
+    handleMessage().success('操作成功')
   }
   // 设置模式
   const setSyncView = (mode: string) => {
     if (meetingMode === mode) {
       setModeOpen(false)
-      return message.error(`${getMeetingContentBodyLeftModeText(mode)}已开启，请勿重复操作!`)
+      handleMessage().error(`${getMeetingContentBodyLeftModeText(mode)}已开启，请勿重复操作!`)
+      return
     }
     if (isAdmin > 6 && mode === 'FreedomMode') {
       setModeOpen(false)
-      return message.error('发言人数超过6人,无法使用宫格模式!')
+      handleMessage().error('发言人数超过6人,无法使用宫格模式!')
+      return
     }
     if (isShare && mode === 'FreedomMode') {
       setModeOpen(false)
-      return message.error('共享中，无法切换模式')
+      handleMessage().error('共享中，无法切换模式')
+      return
     }
     window.electron.onInvoke('sendOper', {
       roomNum: state.channelId,
@@ -2683,12 +2689,30 @@ const Meeting: React.FC = () => {
       cancelText: '取消',
       async onOk() {
         await GetRoomKickout(channelId, uid)
-        message.success('操作成功')
+        handleMessage().success('操作成功')
       },
       onCancel() {
       },
     });
   }
+  const handleMessage = () => {
+    const displayMessage = (
+      fn: (msg: any) => void,
+      msg: any
+    ) => {
+      setIsScreenCapture(bool => {
+        if (!bool) {
+          fn(msg);
+        }
+        return bool;
+      });
+    };
+
+    return {
+      error: (msg: any) => displayMessage(message.error, msg),
+      success: (msg: any) => displayMessage(message.success, msg)
+    };
+  };
   return (
     <>
       <div className={styles.meeting} onClick={() => {
@@ -2703,7 +2727,7 @@ const Meeting: React.FC = () => {
           <div style={{ bottom: '0px', borderRadius: '0 0 10px 10px' }} className={`${styles.meetingAbsoluteText}`} onClick={() => {
             setIsExpand(!isExpand)
             window.electron.setChildWindow({
-              height: !isExpand ? 160 * 4 : 200,
+              height: !isExpand ? 160 * 4 + 20 : 200,
               width: 250,
               key: 'main'
             })
@@ -2911,7 +2935,11 @@ const Meeting: React.FC = () => {
         </div>}
         <div className={styles.meetingContent}>
           <div className={styles.meetingContentBody}>
-            <div className={`${styles.meetingContentBodyLeft} drag`} style={{ marginTop: isScreenCapture ? '20px' : '0' }}>
+            <div className={`${styles.meetingContentBodyLeft} drag`} style={{
+              marginTop: isScreenCapture ? '20px' : '0',
+              paddingBottom: isScreenCapture ? '40px' : '0'
+            }} onMouseEnter={() => setShowCaret(true)}
+              onMouseLeave={() => setShowCaret(false)}>
               {isAdmin && currentLookUserAccount && !isScreenCapture ? getSettingIcon() : null}
               <div className={getMeetingContentBodyLeftModeClass(isAdmin)} id='videoView' style={meetingMode === 'SpeakerMode' && isVideoFullScreen ? { width: '0' } : {}}>
                 {roomUserList.map((item: any, index: number) => {
@@ -3050,13 +3078,13 @@ const Meeting: React.FC = () => {
                     </div>
                   </div>
                 </div> */}
-                {meetingMode !== "FreedomMode" && hasScrollbar() ? <div>
+                {meetingMode !== "FreedomMode" && hasScrollbar() && showCaret ? <div>
                   {meetingMode === "StandardMode" ? <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '20px', top: '66px' }} onClick={() => {
                     const container = document.getElementById('videoView') as HTMLElement;
                     container.scrollLeft -= 100
                   }}>
                     <CaretLeftOutlined />
-                  </div> : <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: isScreenCapture ? '120px' : '115px', top: '20px' }} onClick={() => {
+                  </div> : <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '115px', top: '20px' }} onClick={() => {
                     const container = document.getElementById('videoView') as HTMLElement;
                     container.scrollTop -= 100
                   }}>
@@ -3067,7 +3095,7 @@ const Meeting: React.FC = () => {
                     container.scrollLeft += 100
                   }}>
                     <CaretRightOutlined />
-                  </div> : <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: isScreenCapture ? '120px' : '115px', bottom: '20px' }} onClick={() => {
+                  </div> : <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '115px', bottom: isScreenCapture ? '50px' : '20px' }} onClick={() => {
                     const container = document.getElementById('videoView') as HTMLElement;
                     container.scrollTop += 100
                   }}>