diff --git a/src/page/Meeting/index.module.scss b/src/page/Meeting/index.module.scss index 3d38cc8..1f2409d 100644 --- a/src/page/Meeting/index.module.scss +++ b/src/page/Meeting/index.module.scss @@ -105,45 +105,17 @@ top: 0; z-index: 3000; - .meetingAbsoluteVideoView { + .meetingAbsoluteLoading { + background: black; position: absolute; - z-index: 1; - width: 100%; left: 0; top: 0; - - >div { - height: 160px; - position: relative; - - .meetingAbsoluteUser { - position: absolute; - left: 0; - bottom: 0; - font-size: 13px; - color: #EEEEEE; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - background-color: rgba(0, 0, 0, 0.62); - z-index: 1; - padding: 2px 4px; - box-sizing: border-box; - width: 100%; - } - - .meetingAbsoluteLoading { - background: black; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - } - } + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; } .meetingAbsoluteText { @@ -262,6 +234,7 @@ #videoView { position: relative; + border: 1px red solid; } .standardModeIcon { @@ -636,7 +609,7 @@ height: 100%; .meetingUserList { - width: 340px; + width: 300px; height: 100%; padding: 10px 0 20px; box-sizing: border-box; @@ -682,18 +655,11 @@ align-items: center; >span { + font-size: 14px; color: #F3F3F5; margin-left: 4px; display: flex; - flex-direction: column; - - >span:nth-child(1) { - font-size: 13px; - } - - >span:nth-child(2) { - font-size: 12px; - } + align-items: center; } >div { diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index c6d7129..672ea5d 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -1164,26 +1164,13 @@ const Meeting: React.FC = () => { useEffect(() => { if (isScreenCapture) { - roomUserList - .filter((item: any) => item.isRoom && item.isAdmin).forEach(async (item: any) => { - if (user.uid === item.uid) { - await agora.setupLocalVideo({ - uid: Number(user.uid), - view: document.getElementById(`meeting-absolute-video-${item.uid}`), - channelId: state.channelId, - sourceType: VideoSourceType.VideoSourceCameraPrimary, - type: true - }) - } else { - await agora.setupRemoteVideoJoin({ - uid: Number(item.uid), - view: document.getElementById(`meeting-absolute-video-${item.uid}`), - channelId: state.channelId, - renderMode: RenderModeType.RenderModeHidden, - type: true - }) - } - }); + agora.setupLocalVideo({ + uid: Number(user.uid), + view: document.getElementById(`meetingAbsoluteVideo`) as HTMLElement, + channelId: state.channelId, + sourceType: VideoSourceType.VideoSourceCameraPrimary, + type: true + }) } }, [isScreenCapture]); @@ -1296,27 +1283,26 @@ const Meeting: React.FC = () => { }, [applyUserList]); useEffect(() => { - const className = isScreenCapture ? '.intersectionAbsoluteObserver-view' : '.intersectionObserver-view'; - const rootId = isScreenCapture ? 'meetingAbsoluteVideoView' : 'videoView'; - const rootElement = document.getElementById(rootId); - const elements = document.querySelectorAll(className); - elements.forEach(element => { - observer?.unobserve(element); - }); - observer?.disconnect(); - if (elements.length && currentVideoId && rootElement) { - const observerObject = new IntersectionObserver( - (entries: IntersectionObserverEntry[]) => { - entries.forEach(entry => { - const dataUid = (entry.target as HTMLElement).getAttribute('data-uid'); - if (dataUid !== user.uid) { - agora.muteRemoteVideoStreamEx(Number(dataUid), !entry.isIntersecting); + const elements = document.querySelectorAll('.intersectionObserver-view'); + if (elements.length && currentVideoId) { + elements.forEach(element => { + observer?.unobserve(element); + }); + const observerObject = new IntersectionObserver(async (entries: IntersectionObserverEntry[], _observer: IntersectionObserver) => { + setIsScreenCapture((bool: boolean) => { + entries.forEach(async (entry) => { + if (entry.target.id !== user.uid) { + await agora.muteRemoteVideoStreamEx(Number(entry.target.id), bool ? true : !entry.isIntersecting) } }); - }, - { threshold: 0, root: rootElement } - ); - setObserver(observerObject); + return bool + }) + setIsScreenCapture((bool: boolean) => { + agora.muteRemoteVideoStreamEx(Number(currentVideoId), bool) + return bool + }) + }, { threshold: 0, root: document.getElementById('videoView') }); + setObserver(observerObject) elements.forEach(element => { observerObject.observe(element); }); @@ -1348,7 +1334,7 @@ const Meeting: React.FC = () => { }); observer?.disconnect(); } - }, [roomUserList, currentVideoId, footerList, isScreenCapture]); + }, [roomUserList, currentVideoId, footerList]); // 声网初始化 const agoraInit = async () => { @@ -1411,18 +1397,6 @@ const Meeting: React.FC = () => { return res }) }, 1000); - setIsScreenCapture(bool => { - if (bool) { - agora.setupRemoteVideoJoin({ - uid: Number(remoteUid), - view: document.getElementById(`meeting-absolute-video-${remoteUid}`), - channelId: connection.channelId, - renderMode: RenderModeType.RenderModeHidden, - type: true - }) - } - return bool - }) } } }, @@ -2166,7 +2140,6 @@ const Meeting: React.FC = () => { const isOpen = await getKeyOpenChildWindow('shareScreenWindow') setIsScreenCapture(true) if (!isOpen) { - setIsExpand(false) window.electron.createChildWindow('show') setKeyOpenChildWindow('shareScreenWindow', true) window.electron.setMainWindowSize({ @@ -2232,9 +2205,7 @@ const Meeting: React.FC = () => { } // 停止共享 const stopScreenCapture = async (): Promise => { - roomUserList.forEach(async (item: any) => { - await agora.destroyRendererByConfig(Number(item.uid), state.channelId) - }); + await agora.destroyRendererByView(`meetingAbsoluteVideo`) const footerListTemplate = [...footerList] await agora.leaveChannelEx(userInfo.screenShareId) agora.stopScreenCapture() @@ -2728,36 +2699,18 @@ const Meeting: React.FC = () => { } setIsNetworkQuality(false) }}> - {isScreenCapture ?
+ {isScreenCapture ?
{currentSpeakUser.length ? '正在说话:' + currentSpeakUser.join(';') : '正在说话:'}
-
item.isRoom).length > 4 && isExpand ? 'auto' : 'hidden', - height: isExpand ? `calc((4 * 160px) + 15px)` : '100%' - }}> - {roomUserList - .filter((item: any) => item.isRoom && item.isAdmin) - .map((item: any) => ( -
- {isExpand ?
{item.userName}
: null} - {item.enableCamera ? null :
- -
} -
- ))} -
+ {footerList[0][1].active ?
+ +
: null}
{ setIsExpand(!isExpand) window.electron.setChildWindow({ - height: !isExpand ? 4 * 160 + (15 + 20) : 160, + height: isExpand ? 160 : 40, key: 'main' }) - }}>{isExpand ? '收起' : '查看参会者'}
+ }}>{isExpand ? '展开' : '收起'}
: null} {contextMenu ?
{
{roomUserList.map((item: any, index: number) => { return (item.isRoom && item.isAdmin ?
{