视频折叠展开

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 {

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<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} />