From 82f1b1759eac6579f023bd8348c7e18100ee9052 Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Mon, 26 Aug 2024 09:53:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E5=B1=8F=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Meeting/index.module.scss | 45 +++++++++++++++++++++++++++---
 src/page/Meeting/index.tsx         | 36 ++++++++++++++++++++----
 2 files changed, 72 insertions(+), 9 deletions(-)

diff --git a/src/page/Meeting/index.module.scss b/src/page/Meeting/index.module.scss
index ca853ff..e13c3cb 100644
--- a/src/page/Meeting/index.module.scss
+++ b/src/page/Meeting/index.module.scss
@@ -166,9 +166,23 @@
           left: 50%;
           transform: translate(-50%, 0%);
           cursor: pointer;
-          font-size: 25px;
-          color: #5673f3;
           z-index: 3;
+
+          svg {
+            fill: #fff;
+          }
+
+          &:hover {
+            svg {
+              fill: #A0A0A0 !important;
+            }
+          }
+
+          &:active {
+            svg {
+              fill: #3A4E99 !important;
+            }
+          }
         }
 
         .speakerModeIcon {
@@ -176,9 +190,23 @@
           top: 50%;
           transform: translate(0, -50%);
           cursor: pointer;
-          font-size: 25px;
-          color: #5673f3;
           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 {
diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index 8d0b956..93ec00e 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, 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 { thumbImageBufferToBase64 } from '@/utils/package/base64'
 import { storage } from '@/utils';
@@ -1227,15 +1227,31 @@ const Meeting: React.FC = () => {
     switch (meetingMode) {
       case 'StandardMode':
         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 {
-          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':
         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 {
-          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' }} />
                       </div>}
                     </div>
+                    {isVideoFullScreen ? <FullscreenExitOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='还原大小' onClick={() => setIsVideoFullScreen(false)} /> :
+                      <FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
                     {meetingContentUser(currentLookUserAccount, true)}
                   </div> : null}
                 {currentLookUserStatus === 1 && currentLookUserAccount ?
@@ -1448,6 +1466,8 @@ const Meeting: React.FC = () => {
                         <Avatar name={currentLookUserAccount.userName} />
                       </div>}
                     </div>
+                    {isVideoFullScreen ? <FullscreenExitOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='还原大小' onClick={() => setIsVideoFullScreen(false)} /> :
+                      <FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
                     {meetingContentUser(currentLookUserAccount, true)}
                     {currentLookUserAccount.enableCamera ? null : meetingContentError(currentLookUserAccount)}
                   </div> : null}
@@ -1458,6 +1478,8 @@ const Meeting: React.FC = () => {
                         <Avatar name={currentLookUserAccount.userName} />
                       </div>
                     </div>
+                    {isVideoFullScreen ? <FullscreenExitOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='还原大小' onClick={() => setIsVideoFullScreen(false)} /> :
+                      <FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
                     {meetingContentUser(currentLookUserAccount, true)}
                   </div> : null}
                 {currentLookUserStatus === 3 && currentLookUserAccount ?
@@ -1467,6 +1489,8 @@ const Meeting: React.FC = () => {
                         <Avatar name={currentLookUserAccount.userName} />
                       </div>
                     </div>
+                    {isVideoFullScreen ? <FullscreenExitOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='还原大小' onClick={() => setIsVideoFullScreen(false)} /> :
+                      <FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
                     {meetingContentUser(currentLookUserAccount, true)}
                   </div> : null}
                 {currentLookUserStatus === 4 && currentLookUserAccount ?
@@ -1476,6 +1500,8 @@ const Meeting: React.FC = () => {
                         <Avatar name={currentLookUserAccount.userName} />
                       </div>
                     </div>
+                    {isVideoFullScreen ? <FullscreenExitOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='还原大小' onClick={() => setIsVideoFullScreen(false)} /> :
+                      <FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
                     {meetingContentUser(currentLookUserAccount, true)}
                     {currentLookUserAccount.enableCamera ? null : meetingContentError(currentLookUserAccount)}
                   </div> : null}