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

全屏样式优化

This commit is contained in:
yj 2024-08-26 09:53:44 +08:00
parent 43604de86b
commit 82f1b1759e
2 changed files with 72 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -166,9 +166,23 @@
left: 50%; left: 50%;
transform: translate(-50%, 0%); transform: translate(-50%, 0%);
cursor: pointer; cursor: pointer;
font-size: 25px;
color: #5673f3;
z-index: 3; z-index: 3;
svg {
fill: #fff;
}
&:hover {
svg {
fill: #A0A0A0 !important;
}
}
&:active {
svg {
fill: #3A4E99 !important;
}
}
} }
.speakerModeIcon { .speakerModeIcon {
@ -176,9 +190,23 @@
top: 50%; top: 50%;
transform: translate(0, -50%); transform: translate(0, -50%);
cursor: pointer; cursor: pointer;
font-size: 25px;
color: #5673f3;
z-index: 3; z-index: 3;
svg {
fill: #fff;
}
&:hover {
svg {
fill: #A0A0A0 !important;
}
}
&:active {
svg {
fill: #3A4E99 !important;
}
}
} }
// 自由者模式 // 自由者模式
@ -315,6 +343,15 @@
} }
} }
.meetingContentSwiperCardFullScreenIcon {
position: absolute;
z-index: 3;
right: 20px;
top: 20px;
color: white;
cursor: pointer;
font-size: 20px;
}
} }
.meetingContentBodyLeftBlock { .meetingContentBodyLeftBlock {

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

@ -4,7 +4,7 @@ import Operation from '@/components/Operation';
import SpeakerModeModal from '@/components/SpeakerModeModal'; import SpeakerModeModal from '@/components/SpeakerModeModal';
import InvitingPersonnelModal from '@/components/InvitingPersonnelModal'; import InvitingPersonnelModal from '@/components/InvitingPersonnelModal';
import { Button, Input, Popover, Modal, Checkbox, message, Popconfirm, notification } from "antd"; import { Button, Input, Popover, Modal, Checkbox, message, Popconfirm, notification } from "antd";
import { SearchOutlined, EllipsisOutlined, ExclamationCircleFilled, CaretDownOutlined, CaretUpOutlined, CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons'; import { SearchOutlined, EllipsisOutlined, ExclamationCircleFilled, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import { useLocation, useNavigate } from 'react-router-dom'; import { useLocation, useNavigate } from 'react-router-dom';
import { thumbImageBufferToBase64 } from '@/utils/package/base64' import { thumbImageBufferToBase64 } from '@/utils/package/base64'
import { storage } from '@/utils'; import { storage } from '@/utils';
@ -1227,15 +1227,31 @@ const Meeting: React.FC = () => {
switch (meetingMode) { switch (meetingMode) {
case 'StandardMode': case 'StandardMode':
if (isVideoFullScreen) { if (isVideoFullScreen) {
return <CaretDownOutlined className={`${styles.standardModeIcon} drag`} style={{ top: '-8px' }} title='展开' onClick={() => setIsVideoFullScreen(false)} /> //下 return <div className={`${styles.standardModeIcon} drag`} style={{ top: '-8px' }} title='展开' onClick={() => setIsVideoFullScreen(false)}>
<svg width="22" height="13" viewBox="0 0 22 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.44484 0.435547L0.285156 1.59521L10.9996 12.3075L21.7129 1.59521L20.5532 0.435547L10.9989 9.99002L1.44484 0.435547Z" />
</svg>
</div> //下
} else { } else {
return <CaretUpOutlined className={`${styles.standardModeIcon} drag`} style={{ top: '152px' }} title='收起' onClick={() => setIsVideoFullScreen(true)} /> //上 return <div className={`${styles.standardModeIcon} drag`} style={{ top: '152px' }} title='收起' onClick={() => setIsVideoFullScreen(true)}>
<svg width="22" height="13" viewBox="0 0 22 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.5532 12.3066L21.7129 11.147L10.9984 0.434698L0.285156 11.147L1.44481 12.3066L10.9991 2.75217L20.5532 12.3066Z" />
</svg>
</div> //上
} }
case 'SpeakerMode': case 'SpeakerMode':
if (isVideoFullScreen) { if (isVideoFullScreen) {
return <CaretRightOutlined className={`${styles.speakerModeIcon} drag`} style={{ left: '-8px' }} title='展开' onClick={() => setIsVideoFullScreen(false)} /> //右 return <div className={`${styles.speakerModeIcon} drag`} style={{ left: '-1px' }} title='展开' onClick={() => setIsVideoFullScreen(false)}>
<svg width="12" height="22" viewBox="0 0 12 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.0625 20.5679L1.22216 21.7275L11.9344 11.0131L1.22216 0.299805L0.0625002 1.45946L9.61697 11.0138L0.0625 20.5679Z" />
</svg>
</div> //右
} else { } else {
return <CaretLeftOutlined className={`${styles.speakerModeIcon} drag`} style={{ left: 'calc(18% - 8px)' }} title='收起' onClick={() => setIsVideoFullScreen(true)} /> //左 return <div className={`${styles.speakerModeIcon} drag`} style={{ left: 'calc(18% - 4px)' }} title='收起' onClick={() => setIsVideoFullScreen(true)}>
<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" />
</svg>
</div> //左
} }
} }
} }
@ -1439,6 +1455,8 @@ const Meeting: React.FC = () => {
<img src={ImageUrl.loading} alt="" style={{ width: '50px' }} /> <img src={ImageUrl.loading} alt="" style={{ width: '50px' }} />
</div>} </div>}
</div> </div>
{isVideoFullScreen ? <FullscreenExitOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='还原大小' onClick={() => setIsVideoFullScreen(false)} /> :
<FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
{meetingContentUser(currentLookUserAccount, true)} {meetingContentUser(currentLookUserAccount, true)}
</div> : null} </div> : null}
{currentLookUserStatus === 1 && currentLookUserAccount ? {currentLookUserStatus === 1 && currentLookUserAccount ?
@ -1448,6 +1466,8 @@ const Meeting: React.FC = () => {
<Avatar name={currentLookUserAccount.userName} /> <Avatar name={currentLookUserAccount.userName} />
</div>} </div>}
</div> </div>
{isVideoFullScreen ? <FullscreenExitOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='还原大小' onClick={() => setIsVideoFullScreen(false)} /> :
<FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
{meetingContentUser(currentLookUserAccount, true)} {meetingContentUser(currentLookUserAccount, true)}
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentLookUserAccount)} {currentLookUserAccount.enableCamera ? null : meetingContentError(currentLookUserAccount)}
</div> : null} </div> : null}
@ -1458,6 +1478,8 @@ const Meeting: React.FC = () => {
<Avatar name={currentLookUserAccount.userName} /> <Avatar name={currentLookUserAccount.userName} />
</div> </div>
</div> </div>
{isVideoFullScreen ? <FullscreenExitOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='还原大小' onClick={() => setIsVideoFullScreen(false)} /> :
<FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
{meetingContentUser(currentLookUserAccount, true)} {meetingContentUser(currentLookUserAccount, true)}
</div> : null} </div> : null}
{currentLookUserStatus === 3 && currentLookUserAccount ? {currentLookUserStatus === 3 && currentLookUserAccount ?
@ -1467,6 +1489,8 @@ const Meeting: React.FC = () => {
<Avatar name={currentLookUserAccount.userName} /> <Avatar name={currentLookUserAccount.userName} />
</div> </div>
</div> </div>
{isVideoFullScreen ? <FullscreenExitOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='还原大小' onClick={() => setIsVideoFullScreen(false)} /> :
<FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
{meetingContentUser(currentLookUserAccount, true)} {meetingContentUser(currentLookUserAccount, true)}
</div> : null} </div> : null}
{currentLookUserStatus === 4 && currentLookUserAccount ? {currentLookUserStatus === 4 && currentLookUserAccount ?
@ -1476,6 +1500,8 @@ const Meeting: React.FC = () => {
<Avatar name={currentLookUserAccount.userName} /> <Avatar name={currentLookUserAccount.userName} />
</div> </div>
</div> </div>
{isVideoFullScreen ? <FullscreenExitOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='还原大小' onClick={() => setIsVideoFullScreen(false)} /> :
<FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
{meetingContentUser(currentLookUserAccount, true)} {meetingContentUser(currentLookUserAccount, true)}
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentLookUserAccount)} {currentLookUserAccount.enableCamera ? null : meetingContentError(currentLookUserAccount)}
</div> : null} </div> : null}