视频折叠展开
This commit is contained in:
parent
d365b319a1
commit
736a958747
|
|
@ -161,6 +161,26 @@
|
|||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.standardModeIcon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0%);
|
||||
cursor: pointer;
|
||||
font-size: 30px;
|
||||
color: white;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.speakerModeIcon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
cursor: pointer;
|
||||
font-size: 30px;
|
||||
color: white;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
// 自由者模式
|
||||
.meetingContentBodyLeftFreedomMode {
|
||||
width: 100%;
|
||||
|
|
@ -236,6 +256,12 @@
|
|||
left: 0;
|
||||
height: calc(100% - 160px) !important;
|
||||
width: 100% !important;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
// 标准模式视频全部
|
||||
.meetingContentSwiperCardStandardModeFullScreen {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
// 演讲者模式视频
|
||||
|
|
@ -245,6 +271,12 @@
|
|||
bottom: 0;
|
||||
height: 100% !important;
|
||||
width: calc(100% - 18%) !important;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
// 标准模式视频全部
|
||||
.meetingContentSwiperCardSpeakerModeFullScreen {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.meetingContentSwiperCard {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import Operation from '@/components/Operation';
|
|||
import SpeakerModeModal from '@/components/SpeakerModeModal';
|
||||
import InvitingPersonnelModal from '@/components/InvitingPersonnelModal';
|
||||
import { Button, Input, Popover, Modal, Checkbox, message, Popconfirm, notification } from "antd";
|
||||
import { SearchOutlined, EllipsisOutlined, ExclamationCircleFilled } from '@ant-design/icons';
|
||||
import { SearchOutlined, EllipsisOutlined, ExclamationCircleFilled, CaretDownOutlined, CaretUpOutlined, CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { thumbImageBufferToBase64 } from '@/utils/package/base64'
|
||||
import { storage } from '@/utils';
|
||||
|
|
@ -148,6 +148,7 @@ const Meeting: React.FC = () => {
|
|||
threshold: 3
|
||||
}
|
||||
});
|
||||
const [isVideoFullScreen, setIsVideoFullScreen] = useState<boolean>(false)
|
||||
let userInfo = JSON.parse(storage.getItem('user') as string)
|
||||
const msgTips = '您不是管理员或发言人，无法开启此功能！'
|
||||
useEffect(() => {
|
||||
|
|
@ -1163,6 +1164,33 @@ const Meeting: React.FC = () => {
|
|||
}
|
||||
return ''
|
||||
}
|
||||
// 视频是否全屏
|
||||
const setMeetingContentSwiperCardFullScreenClass = (): string => {
|
||||
switch (meetingMode) {
|
||||
case 'StandardMode':
|
||||
return isVideoFullScreen ? styles.meetingContentSwiperCardStandardModeFullScreen : ''
|
||||
case 'SpeakerMode':
|
||||
return isVideoFullScreen ? styles.meetingContentSwiperCardSpeakerModeFullScreen : ''
|
||||
}
|
||||
return ''
|
||||
}
|
||||
// 获取展开折叠按钮
|
||||
const getSettingIcon = (): any => {
|
||||
switch (meetingMode) {
|
||||
case 'StandardMode':
|
||||
if (isVideoFullScreen) {
|
||||
return <CaretDownOutlined className={`${styles.standardModeIcon} drag`} style={{ top: '-10px' }} title='展开' onClick={() => setIsVideoFullScreen(false)} /> //下
|
||||
} else {
|
||||
return <CaretUpOutlined className={`${styles.standardModeIcon} drag`} style={{ top: '148px' }} title='收起' onClick={() => setIsVideoFullScreen(true)} /> //上
|
||||
}
|
||||
case 'SpeakerMode':
|
||||
if (isVideoFullScreen) {
|
||||
return <CaretRightOutlined className={`${styles.speakerModeIcon} drag`} style={{ left: '-10px' }} title='展开' onClick={() => setIsVideoFullScreen(false)} /> //右
|
||||
} else {
|
||||
return <CaretLeftOutlined className={`${styles.speakerModeIcon} drag`} style={{ left: 'calc(18% - 12px)' }} title='收起' onClick={() => setIsVideoFullScreen(true)} /> //左
|
||||
}
|
||||
}
|
||||
}
|
||||
// 加入房间
|
||||
const getJoin = async (enableMicr: boolean, enableCamera: boolean): Promise<void> => {
|
||||
await GetJoin({
|
||||
|
|
@ -1257,6 +1285,7 @@ const Meeting: React.FC = () => {
|
|||
<div className={styles.meetingContent}>
|
||||
<div className={styles.meetingContentBody}>
|
||||
<div className={`${styles.meetingContentBodyLeft} drag`}>
|
||||
{currentLookUserAccount ? getSettingIcon() : null}
|
||||
<div className={getMeetingContentBodyLeftModeClass()} id='videoView'>
|
||||
{roomUserList.map((item: any, index: number) => {
|
||||
return (index <= 19 && item.isRoom && item.isAdmin ? <div
|
||||
|
|
@ -1271,7 +1300,7 @@ const Meeting: React.FC = () => {
|
|||
}
|
||||
}}
|
||||
>
|
||||
<div className={`${styles.meetingContentSwiperCardVdeio} ${item.uid === currentVideoId ? styles.active : ''} ${item.roleId === '1' || item.isRoomManager ? styles.boxShadow : ''}`} id={`video-${item.uid}`}>
|
||||
<div className={`${styles.meetingContentSwiperCardVdeio} ${(item.uid === currentVideoId) && !isVideoFullScreen ? styles.active : ''} ${(item.roleId === '1' || item.isRoomManager) && !isVideoFullScreen ? styles.boxShadow : ''}`} id={`video-${item.uid}`}>
|
||||
<div className={styles.meetingContentSwiperCardVdeioLoading}>
|
||||
<Avatar name={item.userName} />
|
||||
</div>
|
||||
|
|
@ -1356,7 +1385,7 @@ const Meeting: React.FC = () => {
|
|||
}
|
||||
)}
|
||||
{currentLookUserStatus === 0 && currentLookUserAccount ?
|
||||
<div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()}`}>
|
||||
<div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
|
||||
<div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-camera-primary'>
|
||||
{<div className={styles.meetingContentSwiperCardVdeioLoading}>
|
||||
<Avatar name={currentLookUserAccount.userName} />
|
||||
|
|
@ -1365,7 +1394,7 @@ const Meeting: React.FC = () => {
|
|||
{meetingContentUser(currentLookUserAccount, true)}
|
||||
</div> : null}
|
||||
{currentLookUserStatus === 1 && currentLookUserAccount ?
|
||||
<div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()}`}>
|
||||
<div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
|
||||
<div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-camera-primary'>
|
||||
{<div className={styles.meetingContentSwiperCardVdeioLoading}>
|
||||
<Avatar name={currentLookUserAccount.userName} />
|
||||
|
|
@ -1375,7 +1404,7 @@ const Meeting: React.FC = () => {
|
|||
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentLookUserAccount)}
|
||||
</div> : null}
|
||||
{currentLookUserStatus === 2 && currentLookUserAccount ?
|
||||
<div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()}`}>
|
||||
<div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
|
||||
<div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-screen'>
|
||||
<div className={styles.meetingContentSwiperCardVdeioLoading}>
|
||||
<Avatar name={currentLookUserAccount.userName} />
|
||||
|
|
@ -1384,7 +1413,7 @@ const Meeting: React.FC = () => {
|
|||
{meetingContentUser(currentLookUserAccount, true)}
|
||||
</div> : null}
|
||||
{currentLookUserStatus === 3 && currentLookUserAccount ?
|
||||
<div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()}`}>
|
||||
<div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
|
||||
<div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-remote-screen'>
|
||||
<div className={styles.meetingContentSwiperCardVdeioLoading}>
|
||||
<Avatar name={currentLookUserAccount.userName} />
|
||||
|
|
@ -1393,7 +1422,7 @@ const Meeting: React.FC = () => {
|
|||
{meetingContentUser(currentLookUserAccount, true)}
|
||||
</div> : null}
|
||||
{currentLookUserStatus === 4 && currentLookUserAccount ?
|
||||
<div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()}`}>
|
||||
<div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
|
||||
<div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-remote-camera'>
|
||||
<div className={styles.meetingContentSwiperCardVdeioLoading}>
|
||||
<Avatar name={currentLookUserAccount.userName} />
|
||||
|
|
|
|||
Loading…
Reference in New Issue