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

优化视频框占比

This commit is contained in:
yj 2025-02-14 14:49:50 +08:00
parent 1b62f6a9ff
commit 7f6c0bffb4
2 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/page/Meeting/index.module.scss
View File

@ -303,7 +303,7 @@
// 演讲者模式 // 演讲者模式
.meetingContentBodyLeftSpeakerMode { .meetingContentBodyLeftSpeakerMode {
width: 18%; width: 270px;
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
@ -312,7 +312,7 @@
} }
.meetingContentSwiperCard { .meetingContentSwiperCard {
height: calc(100% / 6); height: 160px;
} }
} }
@ -379,7 +379,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
height: 100% !important; height: 100% !important;
width: calc(100% - 18%) !important; width: calc(100% - 270px) !important;
z-index: 2; z-index: 2;
} }
@ -390,7 +390,7 @@
.meetingContentSwiperCard { .meetingContentSwiperCard {
height: 160px; height: 160px;
width: calc(100% / 6); width: 270px;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -798,7 +798,7 @@
} }
>img { >img {
height: 50px; height: 35px;
} }
>span { >span {
@ -820,8 +820,8 @@
} }
>label { >label {
height: 50px; height: 35px;
height: 50px; height: 35px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;

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

@ -2376,7 +2376,7 @@ const Meeting: React.FC = () => {
</svg> </svg>
</div> //右 </div> //右
} else { } else {
return <div className={`${styles.speakerModeIcon} drag`} style={{ left: 'calc(18% - 4px)' }} title='收起' onClick={() => setIsVideoFullScreen(true)}> return <div className={`${styles.speakerModeIcon} drag`} style={{ left: 'calc(270px - 4px)' }} title='收起' onClick={() => setIsVideoFullScreen(true)}>
<svg width="12" height="22" viewBox="0 0 12 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="12" height="22" viewBox="0 0 12 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.9355 1.45949L10.7759 0.299805L0.0636029 11.0143L10.7759 21.7275L11.9355 20.5679L2.38107 11.0136L11.9355 1.45949Z" /> <path d="M11.9355 1.45949L10.7759 0.299805L0.0636029 11.0143L10.7759 21.7275L11.9355 20.5679L2.38107 11.0136L11.9355 1.45949Z" />
</svg> </svg>
@ -2415,6 +2415,13 @@ const Meeting: React.FC = () => {
} }
message.success('操作成功') message.success('操作成功')
} }
const hasScrollbar = () => {
let element = document.getElementById('videoView') as HTMLDivElement
if (element) {
return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}
return false
}
// 移出房间 // 移出房间
const getRoomKickout = async (channelId: string, uid: string, userName: string): Promise<void> => { const getRoomKickout = async (channelId: string, uid: string, userName: string): Promise<void> => {
confirm({ confirm({
@ -2769,13 +2776,13 @@ const Meeting: React.FC = () => {
</div> : null) </div> : null)
} }
)} )}
{isAdmin > 6 ? <div> {hasScrollbar() ? <div>
{meetingMode === "StandardMode" ? <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '20px', top: '66px' }} onClick={() => { {meetingMode === "StandardMode" ? <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '20px', top: '66px' }} onClick={() => {
const container = document.getElementById('videoView') as HTMLElement; const container = document.getElementById('videoView') as HTMLElement;
container.scrollLeft -= 100 container.scrollLeft -= 100
}}> }}>
<CaretLeftOutlined /> <CaretLeftOutlined />
</div> : <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '8.2%', top: '20px' }} onClick={() => { </div> : <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '115px', top: '20px' }} onClick={() => {
const container = document.getElementById('videoView') as HTMLElement; const container = document.getElementById('videoView') as HTMLElement;
container.scrollTop -= 100 container.scrollTop -= 100
}}> }}>
@ -2786,7 +2793,7 @@ const Meeting: React.FC = () => {
container.scrollLeft += 100 container.scrollLeft += 100
}}> }}>
<CaretRightOutlined /> <CaretRightOutlined />
</div> : <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '8.2%', bottom: '20px' }} onClick={() => { </div> : <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '115px', bottom: '20px' }} onClick={() => {
const container = document.getElementById('videoView') as HTMLElement; const container = document.getElementById('videoView') as HTMLElement;
container.scrollTop += 100 container.scrollTop += 100
}}> }}>
@ -3494,7 +3501,7 @@ const meetingContentUser = (item: any, bool?: boolean) => {
<> <>
<div className={styles.meetingContentUser}> <div className={styles.meetingContentUser}>
<div className={styles.meetingContentUserName}> <div className={styles.meetingContentUserName}>
{role.ID.includes(item.roleId) || item.isRoomManager ? {role.ID.includes(item.roleId) ?
<div style={{ background: role.ID.includes(item.roleId) ? '#FDC229' : '#3F51B5' }}> <div style={{ background: role.ID.includes(item.roleId) ? '#FDC229' : '#3F51B5' }}>
<img src={ImageUrl.icon32} alt="" /> <img src={ImageUrl.icon32} alt="" />
</div> : null} </div> : null}