diff --git a/src/page/Meeting/index.module.scss b/src/page/Meeting/index.module.scss index 261edff..f578201 100644 --- a/src/page/Meeting/index.module.scss +++ b/src/page/Meeting/index.module.scss @@ -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 { diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 7744a00..0570c61 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -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(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 setIsVideoFullScreen(false)} /> //下 + } else { + return setIsVideoFullScreen(true)} /> //上 + } + case 'SpeakerMode': + if (isVideoFullScreen) { + return setIsVideoFullScreen(false)} /> //右 + } else { + return setIsVideoFullScreen(true)} /> //左 + } + } + } // 加入房间 const getJoin = async (enableMicr: boolean, enableCamera: boolean): Promise => { await GetJoin({ @@ -1257,6 +1285,7 @@ const Meeting: React.FC = () => {
+ {currentLookUserAccount ? getSettingIcon() : null}
{roomUserList.map((item: any, index: number) => { return (index <= 19 && item.isRoom && item.isAdmin ?
{ } }} > -
+
@@ -1356,7 +1385,7 @@ const Meeting: React.FC = () => { } )} {currentLookUserStatus === 0 && currentLookUserAccount ? -
+
{
@@ -1365,7 +1394,7 @@ const Meeting: React.FC = () => { {meetingContentUser(currentLookUserAccount, true)}
: null} {currentLookUserStatus === 1 && currentLookUserAccount ? -
+
{
@@ -1375,7 +1404,7 @@ const Meeting: React.FC = () => { {currentLookUserAccount.enableCamera ? null : meetingContentError(currentLookUserAccount)}
: null} {currentLookUserStatus === 2 && currentLookUserAccount ? -
+
@@ -1384,7 +1413,7 @@ const Meeting: React.FC = () => { {meetingContentUser(currentLookUserAccount, true)}
: null} {currentLookUserStatus === 3 && currentLookUserAccount ? -
+
@@ -1393,7 +1422,7 @@ const Meeting: React.FC = () => { {meetingContentUser(currentLookUserAccount, true)}
: null} {currentLookUserStatus === 4 && currentLookUserAccount ? -
+