marking
/
WGShare.Client.Electron
18
0
Fork 0
Code Pull Requests 1 Actions Releases 4 Activity

优化

This commit is contained in:
yj 2025-01-21 11:43:30 +08:00
parent 75396341eb
commit 9b58afece8
2 changed files with 160 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
src/page/Meeting/index.tsx
View File

@ -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}
@ -3033,8 +3162,8 @@ const Meeting: React.FC = () => {
)
})}
</div>}
</div>
</div>
</div >
</div >
<Modal title="共享屏幕" open={isSharedScreenModal} footer={null} closable={false} centered width={'800px'}>
<div className={styles.sharedScreenModal}>
<div>

10
src/utils/package/agora.ts
View File

@ -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,