diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 1e23a22..51e9a39 100644 --- a/src/page/Meeting/index.tsx +++ b/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('') const [recorder, setRecorder] = useState('') + const [contextMenu, setContextMenu] = useState('') + const [contextMenuStyle, setContextMenuStyle] = useState({ + top: 0, + left: 0, + }) const [_currentRequestSpeakType, setCurrentRequestSpeakType] = useState<'video' | 'audio' | ''>('') const [_mediaStream, setMediaStream] = useState([]) const [isShare, setIsShare] = useState(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 ( <> -
+
{ + setContextMenu('') + }}> {isScreenCapture ?
{currentSpeakUser.length ? '正在说话:' + currentSpeakUser.join(';') : '正在说话:'}
{footerList[0][1].active ?
@@ -2265,6 +2277,102 @@ const Meeting: React.FC = () => { }) }}>{isExpand ? '展开' : '收起'}
: null} + {contextMenu ?
+ {contextMenu.isRoomManager || role.ID.includes(contextMenu.roleId) ? : null} + {contextMenu.uid !== user.uid && !role.ID.includes(contextMenu.roleId) ? : null} + {contextMenu.isRoomManager ? : null} + {contextMenu.isRoomManager ? : null} + {contextMenu.uid !== user.uid ? : null} + {contextMenu.uid !== user.uid ? : null} + {contextMenu.uid !== user.uid ? : null} +
: null} {contextHolder}
@@ -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) + } + }} >
@@ -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) }} >设备管理 : null} + {item.uid !== user.uid ? : null} {item.uid !== user.uid ? : null} - {item.uid !== user.uid ? : null}
}>
@@ -2602,22 +2721,23 @@ const Meeting: React.FC = () => { + - +
}> @@ -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) }} >设备管理 : null} @@ -3033,8 +3162,8 @@ const Meeting: React.FC = () => { ) })}
} -
-
+
+
diff --git a/src/utils/package/agora.ts b/src/utils/package/agora.ts index 9a696ac..b901b9d 100644 --- a/src/utils/package/agora.ts +++ b/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,