diff --git a/src/assets/icon46.png b/src/assets/icon46.png new file mode 100644 index 0000000..12d0958 Binary files /dev/null and b/src/assets/icon46.png differ diff --git a/src/page/Meeting/index.module.scss b/src/page/Meeting/index.module.scss index 3d55b4a..4b51754 100644 --- a/src/page/Meeting/index.module.scss +++ b/src/page/Meeting/index.module.scss @@ -572,6 +572,15 @@ } } } + + .meetingContentBodyLeftBlock { + position: absolute; + background-color: #1F2022; + z-index: 2; + display: flex; + justify-content: center; + align-items: center; + } } .meetingContentFooter { diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index efd752d..39e5696 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -130,6 +130,7 @@ const Meeting: React.FC = () => { '我要发言', ]) const [roomUserItem, setRoomUserItem] = useState(null) + const [isAdmin, setIsAdmin] = useState(0) const [api, contextHolder] = notification.useNotification({ stack: { threshold: 3 @@ -139,6 +140,7 @@ const Meeting: React.FC = () => { const msgTips = '您不是管理员或发言人,无法开启此功能!' useEffect(() => { let time = null as any; + setSizeAndPosition() setUser(userInfo) setTimeout(() => { window.electron.getIsMaximized().then((res: boolean) => { @@ -215,6 +217,7 @@ const Meeting: React.FC = () => { window.addEventListener('offline', handleNetworkChange); time = setInterval(() => { setCurrentSeconds(currentSeconds++) + setSizeAndPosition() }, 1000) return () => { window.removeEventListener('customStorageChange', handleCustomStorageChange); @@ -442,9 +445,50 @@ const Meeting: React.FC = () => { item.isShow = true; } }); + setIsAdmin(res.filter((item: any) => (item.roleId === '1' || item.isRoomManager) && item.isRoom).length) return res }) } + // 获取dom信息 + const getElementSizeAndPosition = (element: HTMLElement): { width: number; height: number; top: number; left: number } => { + const width = element.offsetWidth; + const height = element.offsetHeight; + const rect = element.getBoundingClientRect(); + const top = rect.top; + const left = rect.left; + return { width, height, top, left }; + } + // 设置dom + const setSizeAndPosition = (): void => { + const meetingContentBodyLeftDom = document.getElementById('meetingContentBodyLeft') as HTMLElement; + const meetingContentBodyLeftBlock = document.getElementById('meetingContentBodyLeftBlock') as HTMLElement; + if (meetingContentBodyLeftDom) { + const info = getElementSizeAndPosition(meetingContentBodyLeftDom); + if (meetingContentBodyLeftBlock) { + meetingContentBodyLeftBlock.style.width = `${info.width}px` + meetingContentBodyLeftBlock.style.height = `${info.height}px` + meetingContentBodyLeftBlock.style.top = `${info.top}px` + meetingContentBodyLeftBlock.style.left = `0` + } + } + } + // 刷新 + const refreshVideoView = async (userItem: any): Promise => { + if (userItem.uid === userInfo.uid) { + await agora.setupLocalVideo({ + uid: Number(userItem.uid), + view: document.getElementById(`video-${userItem.uid}`), + channelId: state.channelId, + sourceType: VideoSourceType.VideoSourceCameraPrimary, + }) + } else { + await agora.setupRemoteVideoJoin({ + uid: Number(userItem.uid), + view: document.getElementById(`video-${userItem.uid}`), + channelId: state.channelId, + }) + } + } // 替换数据 const setAllUserListData = async (key: string, item: any, callBack?: Function): Promise => { switch (key) { @@ -457,6 +501,8 @@ const Meeting: React.FC = () => { for (const key in item.user) { userItem[key] = item.user[key]; } + userItem.isAdmin = item.user.roleId === '1' || item.user.isRoomManager; + refreshVideoView(userItem) } if (key === 'ManagerRefresh') { callBack && callBack() @@ -472,9 +518,13 @@ const Meeting: React.FC = () => { userItem[key] = item.user[key]; } userItem.isRoom = true; + userItem.isAdmin = item.user.roleId === '1' || item.user.isRoomManager; + refreshVideoView(userItem) return [...res] } else { item.user.isRoom = true; + item.user.isAdmin = item.user.roleId === '1' || item.user.isRoomManager; + refreshVideoView(item.user) return [...res, item.user] } }) @@ -484,6 +534,7 @@ const Meeting: React.FC = () => { let userItem = res.find((row: any) => row.uid === item.uid) if (userItem) { userItem.isRoom = false + userItem.isAdmin = false } return res }) @@ -793,6 +844,7 @@ const Meeting: React.FC = () => { res.data.forEach((item: any) => { item.isShow = true; item.isRoom = true; + item.isAdmin = item.roleId === '1' || item.isRoomManager }) setRoomUserList(res.data) getUserRoomInfo().then(async (res) => { @@ -1084,10 +1136,10 @@ const Meeting: React.FC = () => {
-
+
{roomUserList.map((item: any, index: number) => { - return (index <= 19 && item.isRoom ?
{
: null}
+ {isAdmin ? null :
+ +
} { (statusList.userList || statusList.userChatList) ? (
diff --git a/src/utils/package/imageUrl.ts b/src/utils/package/imageUrl.ts index 4c184f5..7cb3918 100644 --- a/src/utils/package/imageUrl.ts +++ b/src/utils/package/imageUrl.ts @@ -57,6 +57,7 @@ import icon43 from '@/assets/icon43.png' import icon44 from '@/assets/icon44.png' import icon45 from '@/assets/icon45.png' import icon45Active from '@/assets/icon45-active.png' +import icon46 from '@/assets/icon46.png' export default { error, icon, @@ -117,4 +118,5 @@ export default { icon44, icon45, icon45Active, + icon46, } \ No newline at end of file