src/page/Meeting/index.tsx

@@ -13,7 +13,7 @@ import ImageUrl from '@/utils/package/imageUrl'
 import { agora } from '@/utils/package/agora'
 import dayjs from 'dayjs';
 import durationPlugin from 'dayjs/plugin/duration';
-import { AudioVolumeInfo, ConnectionChangedReasonType, ConnectionStateType, LocalVideoStreamReason, LocalVideoStreamState, QualityType, RtcConnection, RtcStats, UserOfflineReasonType, VideoSourceType, VideoStreamType } from 'agora-electron-sdk';
+import { AudioVolumeInfo, ConnectionChangedReasonType, ConnectionStateType, LocalVideoStreamReason, LocalVideoStreamState, QualityType, RenderModeType, RtcConnection, RtcStats, UserOfflineReasonType, VideoSourceType, VideoStreamType } from 'agora-electron-sdk';
 import Avatar from '@/components/Avatar';
 import SharedFilesModel from '@/components/SharedFilesModel';
 import StupWizard from '@/components/StupWizard';
@@ -184,6 +184,11 @@ const Meeting: React.FC = () => {
   const [noViewChatList, setNoViewChatList] = useState(0)
   const [currentLookUserAccount, setCurrentLookUserAccount] = useState<any>('')
   const [recorder, setRecorder] = useState<any>('')
+  const [contextMenu, setContextMenu] = useState<any>('')
+  const [contextMenuStyle, setContextMenuStyle] = useState({
+    top: 0,
+    left: 0,
+  })
   const [_currentRequestSpeakType, setCurrentRequestSpeakType] = useState<'video' | 'audio' | ''>('')
   const [_mediaStream, setMediaStream] = useState<any>([])
   const [isShare, setIsShare] = useState<any>(null)
@@ -1110,6 +1115,7 @@ const Meeting: React.FC = () => {
                 view: document.getElementById(`video-${connection.localUid}`),
                 channelId: connection.channelId,
                 sourceType: VideoSourceType.VideoSourceCameraPrimary,
+                renderMode: RenderModeType.RenderModeFit
               })
             }, 1000);
             getShowUser();
@@ -1126,6 +1132,7 @@ const Meeting: React.FC = () => {
                 uid: Number(remoteUid),
                 view: document.getElementById(`video-${remoteUid}`),
                 channelId: connection.channelId,
+                renderMode: RenderModeType.RenderModeFit
               })
             }, 1000);
           }
@@ -1141,6 +1148,7 @@ const Meeting: React.FC = () => {
             uid: Number(remoteUid),
             view: null,
             channelId: connection.channelId,
+            renderMode: RenderModeType.RenderModeFit
           });
         }
       },
@@ -1324,12 +1332,14 @@ const Meeting: React.FC = () => {
         view: document.getElementById(`video-${userItem.uid}`),
         channelId: state.channelId,
         sourceType: VideoSourceType.VideoSourceCameraPrimary,
+        renderMode: RenderModeType.RenderModeFit
       })
     } else {
       await agora.setupRemoteVideoJoin({
         uid: Number(userItem.uid),
         view: document.getElementById(`video-${userItem.uid}`),
         channelId: state.channelId,
+        renderMode: RenderModeType.RenderModeFit
       })
     }
   }
@@ -2251,7 +2261,9 @@ const Meeting: React.FC = () => {
   }
   return (
     <>
-      <div className={styles.meeting}>
+      <div className={styles.meeting} onClick={() => {
+        setContextMenu('')
+      }}>
         {isScreenCapture ? <div className={`${styles.meetingAbsolute}`} id='meetingAbsoluteVideo'>
           <div style={{ top: '0px' }} className={`${styles.meetingAbsoluteText}`}>{currentSpeakUser.length ? '正在说话:' + currentSpeakUser.join(';') : '正在说话:'}</div>
           {footerList[0][1].active ? <div className={styles.meetingAbsoluteLoading}>
@@ -2265,6 +2277,102 @@ const Meeting: React.FC = () => {
             })
           }}><span>{isExpand ? '展开' : '收起'}</span></div>
         </div> : null}
+        {contextMenu ? <div className={styles.meetingContentSwiperCardPopover} style={
+          {
+            backgroundColor: '#07090B',
+            position: 'absolute',
+            top: contextMenuStyle.top,
+            left: contextMenuStyle.left,
+            zIndex: 4,
+            padding: 5
+          }
+        }>
+          {contextMenu.isRoomManager || role.ID.includes(contextMenu.roleId) ? <Button
+            type="primary"
+            className='m-ant-btn'
+            size={'small'}
+            onClick={(event) => {
+              event.stopPropagation();
+              setContextMenu('')
+              setAllUserLook(contextMenu)
+            }}
+          >全员看Ta</Button> : null}
+          {contextMenu.uid !== user.uid && !role.ID.includes(contextMenu.roleId) ? <Button
+            type="primary"
+            className='m-ant-btn'
+            size={'small'}
+            onClick={(event) => {
+              event.stopPropagation();
+              setContextMenu('')
+              if (contextMenu.isRoomManager) {
+                DeleteRoomManager({
+                  roomId: state.roomId,
+                  roomNum: state.channelId,
+                  userId: contextMenu.uid
+                })
+              } else {
+                postRoomManager({
+                  roomId: state.roomId,
+                  roomNum: state.channelId,
+                  userId: contextMenu.uid
+                })
+              }
+            }}
+          >{contextMenu.isRoomManager ? '取消发言' : '允许发言'}</Button> : null}
+          {contextMenu.isRoomManager ? <Button
+            type="primary"
+            className='m-ant-btn'
+            size={'small'}
+            onClick={(event) => {
+              event.stopPropagation();
+              setContextMenu('')
+              postOpenMicr(!contextMenu.enableMicr, contextMenu.uid)
+            }}
+          >{contextMenu.enableMicr ? '静音' : '解除静音'}</Button> : null}
+          {contextMenu.isRoomManager ? <Button
+            type="primary"
+            className='m-ant-btn'
+            size={'small'}
+            onClick={(event) => {
+              event.stopPropagation();
+              setContextMenu('')
+              postOpenCamera(!contextMenu.enableCamera, contextMenu.uid)
+            }}
+          >{contextMenu.enableCamera ? '关闭视频' : '打开视频'}</Button> : null}
+          {contextMenu.uid !== user.uid ? <Button
+            type="primary"
+            className='m-ant-btn'
+            size={'small'}
+            onClick={(event) => {
+              event.stopPropagation();
+              setContextMenu('')
+              equipmentManagement(contextMenu.uid, contextMenu.userName)
+            }}
+          >设备管理</Button> : null}
+          {contextMenu.uid !== user.uid ? <Button
+            type="primary"
+            className='m-ant-btn'
+            size={'small'}
+            onClick={(event) => {
+              event.stopPropagation();
+              setContextMenu('')
+              userNameRef.current.changeModal({
+                userName: contextMenu.userName,
+                uid: contextMenu.uid
+              })
+            }}
+          >修改用户名</Button> : null}
+          {contextMenu.uid !== user.uid ? <Button
+            type="primary"
+            style={{ backgroundColor: '#EC3C3C' }}
+            size={'small'}
+            onClick={(event) => {
+              event.stopPropagation();
+              setContextMenu('')
+              getRoomKickout(state.channelId, contextMenu.uid, contextMenu.userName)
+            }}
+          >移出会议</Button> : null}
+        </div> : null}
         {contextHolder}
         <div className={styles.meetingHeader}>
           <div>
@@ -2371,6 +2479,15 @@ const Meeting: React.FC = () => {
                         renderVideo(item.uid)
                       }
                     }}
+                    onContextMenu={(e: any) => {
+                      if (role.ID.includes(contextMenu.roleId)) {
+                        setContextMenuStyle({
+                          top: e.clientY,
+                          left: e.clientX,
+                        })
+                        setContextMenu(item)
+                      }
+                    }}
                   >
                     <div className={`${styles.meetingContentSwiperCardVdeio}  ${(item.uid === currentVideoId) && !isVideoFullScreen ? styles.active : ''} ${(role.ID.includes(item.roleId) || item.isRoomManager) && !isVideoFullScreen ? styles.boxShadow : ''}`} id={`video-${item.uid}`}>
                       <div className={styles.meetingContentSwiperCardVdeioLoading}>
@@ -2436,10 +2553,23 @@ const Meeting: React.FC = () => {
                           type="primary"
                           className='m-ant-btn'
                           size={'small'}
-                          onClick={() => {
+                          onClick={(event) => {
+                            event.stopPropagation();
                             equipmentManagement(item.uid, item.userName)
                           }}
                         >设备管理</Button> : null}
+                        {item.uid !== user.uid ? <Button
+                          type="primary"
+                          className='m-ant-btn'
+                          size={'small'}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            userNameRef.current.changeModal({
+                              userName: item.userName,
+                              uid: item.uid
+                            })
+                          }}
+                        >修改用户名</Button> : null}
                         {item.uid !== user.uid ? <Button
                           type="primary"
                           style={{ backgroundColor: '#EC3C3C' }}
@@ -2449,17 +2579,6 @@ const Meeting: React.FC = () => {
                             getRoomKickout(state.channelId, item.uid, item.userName)
                           }}
                         >移出会议</Button> : null}
-                        {item.uid !== user.uid ? <Button
-                          type="primary"
-                          className='m-ant-btn'
-                          size={'small'}
-                          onClick={() => {
-                            userNameRef.current.changeModal({
-                              userName: item.userName,
-                              uid: item.uid
-                            })
-                          }}
-                        >修改用户名</Button> : null}
                       </div>
                     }>
                       <div className={styles.meetingContentOperation}>
@@ -2602,22 +2721,23 @@ const Meeting: React.FC = () => {
                                   <Popover placement="left" title={''} content={
                                     <div style={{ width: '100px' }}>
                                       <Button
+                                        style={{ width: '100%' }}
                                         type="primary"
                                         className='m-ant-btn'
-                                        style={{ width: '100%' }}
+                                        size={'small'}
+                                        onClick={() => {
+                                          setAllUserLook(item)
+                                        }}
+                                      >全员看Ta</Button>
+                                      <Button
+                                        type="primary"
+                                        className='m-ant-btn'
+                                        style={{ width: '100%', marginTop: '10px' }}
                                         size={'small'}
                                         onClick={() => {
                                           equipmentManagement(item.uid, item.userName)
                                         }}
                                       >设备管理</Button>
-                                      <Button
-                                        type="primary"
-                                        style={{ backgroundColor: '#EC3C3C', width: '100%', marginTop: '10px' }}
-                                        size={'small'}
-                                        onClick={() => {
-                                          getRoomKickout(state.channelId, item.uid, item.userName)
-                                        }}
-                                      >移出会议</Button>
                                       <Button
                                         type="primary"
                                         className='m-ant-btn'
@@ -2630,6 +2750,14 @@ const Meeting: React.FC = () => {
                                           })
                                         }}
                                       >修改用户名</Button>
+                                      <Button
+                                        type="primary"
+                                        style={{ backgroundColor: '#EC3C3C', width: '100%', marginTop: '10px' }}
+                                        size={'small'}
+                                        onClick={() => {
+                                          getRoomKickout(state.channelId, item.uid, item.userName)
+                                        }}
+                                      >移出会议哈哈</Button>
                                     </div>
                                   }>
                                     <EllipsisOutlined style={{ color: '#fff', fontSize: '20px' }} />
@@ -2774,7 +2902,8 @@ const Meeting: React.FC = () => {
                                       type="primary"
                                       className='m-ant-btn'
                                       size={'small'}
-                                      onClick={() => {
+                                      onClick={(event) => {
+                                        event.stopPropagation();
                                         equipmentManagement(roomUserItem.uid, roomUserItem.userName)
                                       }}
                                     >设备管理</Button> : null}

src/utils/package/agora.ts

@@ -219,7 +219,7 @@ export const agora = {
     if (String(uid).length === 9) {
       return RenderModeType.RenderModeFit
     } else {
-      return RenderModeType.RenderModeFit
+      return RenderModeType.RenderModeHidden
     }
   },
   // 本地加入
@@ -229,7 +229,7 @@ export const agora = {
         return
       }
       await rtcEngine.setupLocalVideo({
-        renderMode: agora.getRrenderMode(item.uid),
+        renderMode: item.renderMode || agora.getRrenderMode(item.uid),
         sourceType: item.sourceType,
         uid: item.uid,
         view: item.view,
@@ -242,7 +242,7 @@ export const agora = {
     if (item.view?.childNodes.length === 1) {
       await rtcEngine.setupRemoteVideo(
         {
-          renderMode: agora.getRrenderMode(item.uid),
+          renderMode: item.renderMode || agora.getRrenderMode(item.uid),
           sourceType: VideoSourceType.VideoSourceRemote,
           uid: item.uid,
           view: item.view,
@@ -256,7 +256,7 @@ export const agora = {
     if (item.view?.childNodes.length === 1) {
       await rtcEngine.setupRemoteVideoEx(
         {
-          renderMode: agora.getRrenderMode(item.uid),
+          renderMode: item.renderMode || agora.getRrenderMode(item.uid),
           sourceType: VideoSourceType.VideoSourceRemote,
           uid: item.uid,
           view: item.view,
@@ -270,7 +270,7 @@ export const agora = {
   setupRemoteVideo: async (item: any) => {
     await rtcEngine.setupRemoteVideo(
       {
-        renderMode: agora.getRrenderMode(item.uid),
+        renderMode: item.renderMode || agora.getRrenderMode(item.uid),
         sourceType: VideoSourceType.VideoSourceRemote,
         uid: item.uid,
         view: item.view,