yangjie #51
|
|
@ -105,33 +105,6 @@
|
|||
top: 0;
|
||||
z-index: 3000;
|
||||
|
||||
.meetingAbsoluteVideoView {
|
||||
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;
|
||||
|
|
@ -142,8 +115,7 @@
|
|||
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 {
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
agora.setupLocalVideo({
|
||||
uid: Number(user.uid),
|
||||
view: document.getElementById(`meeting-absolute-video-${item.uid}`),
|
||||
view: document.getElementById(`meetingAbsoluteVideo`) as HTMLElement,
|
||||
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
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [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);
|
||||
const elements = document.querySelectorAll('.intersectionObserver-view');
|
||||
if (elements.length && currentVideoId) {
|
||||
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 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<void> => {
|
||||
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 ? <div className={`${styles.meetingAbsolute}`}>
|
||||
{isScreenCapture ? <div className={`${styles.meetingAbsolute}`} id='meetingAbsoluteVideo'>
|
||||
<div style={{ top: '0px' }} className={`${styles.meetingAbsoluteText}`}>{currentSpeakUser.length ? '正在说话:' + currentSpeakUser.join(';') : '正在说话:'}</div>
|
||||
<div
|
||||
className={`${styles.meetingAbsoluteVideoView}`}
|
||||
id='meetingAbsoluteVideoView'
|
||||
style={{
|
||||
overflowY: roomUserList.filter((item: any) => 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) => (
|
||||
<div id={`meeting-absolute-video-${item.uid}`} style={{
|
||||
margin: !isExpand ? '0' : '0 auto 5px',
|
||||
width: !isExpand ? '100%' : '96%',
|
||||
}} data-uid={item.uid} className={`intersectionAbsoluteObserver-view`}>
|
||||
{isExpand ? <div className={styles.meetingAbsoluteUser}>{item.userName}</div> : null}
|
||||
{item.enableCamera ? null : <div className={styles.meetingAbsoluteLoading}>
|
||||
<Avatar name={item.userName} />
|
||||
</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{footerList[0][1].active ? <div className={styles.meetingAbsoluteLoading}>
|
||||
<Avatar name={user.userName} />
|
||||
</div> : null}
|
||||
<div style={{ bottom: '0px' }} className={`${styles.meetingAbsoluteText} drag`} onClick={() => {
|
||||
setIsExpand(!isExpand)
|
||||
window.electron.setChildWindow({
|
||||
height: !isExpand ? 4 * 160 + (15 + 20) : 160,
|
||||
height: isExpand ? 160 : 40,
|
||||
key: 'main'
|
||||
})
|
||||
}}><span>{isExpand ? '收起' : '查看参会者'}</span></div>
|
||||
}}><span>{isExpand ? '展开' : '收起'}</span></div>
|
||||
</div> : null}
|
||||
{contextMenu ? <div className={styles.meetingContentSwiperCardPopover} style={
|
||||
{
|
||||
|
|
@ -2966,7 +2919,7 @@ const Meeting: React.FC = () => {
|
|||
<div className={getMeetingContentBodyLeftModeClass(isAdmin)} id='videoView' style={meetingMode === 'SpeakerMode' && isVideoFullScreen ? { width: '0' } : {}}>
|
||||
{roomUserList.map((item: any, index: number) => {
|
||||
return (item.isRoom && item.isAdmin ? <div
|
||||
data-uid={item.uid}
|
||||
id={item.uid}
|
||||
className={`${styles.meetingContentSwiperCard} intersectionObserver-view`}
|
||||
key={index}
|
||||
onClick={() => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue