优化视频框占比

src/page/Meeting/index.module.scss

@@ -303,7 +303,7 @@
 
         // 演讲者模式
         .meetingContentBodyLeftSpeakerMode {
-          width: 18%;
+          width: 270px;
           overflow-y: auto;
           height: 100%;
 
@@ -312,7 +312,7 @@
           }
 
           .meetingContentSwiperCard {
-            height: calc(100% / 6);
+            height: 160px;
           }
         }
 
@@ -379,7 +379,7 @@
           right: 0;
           bottom: 0;
           height: 100% !important;
-          width: calc(100% - 18%) !important;
+          width: calc(100% - 270px) !important;
           z-index: 2;
         }
 
@@ -390,7 +390,7 @@
 
         .meetingContentSwiperCard {
           height: 160px;
-          width: calc(100% / 6);
+          width: 270px;
           border-radius: 10px;
           overflow: hidden;
           position: relative;
@@ -798,7 +798,7 @@
           }
 
           >img {
-            height: 50px;
+            height: 35px;
           }
 
           >span {
@@ -820,8 +820,8 @@
           }
 
           >label {
-            height: 50px;
-            height: 50px;
+            height: 35px;
+            height: 35px;
             cursor: pointer;
             position: relative;
 

src/page/Meeting/index.tsx

@@ -2376,7 +2376,7 @@ const Meeting: React.FC = () => {
             </svg>
           </div> //右
         } else {
-          return <div className={`${styles.speakerModeIcon} drag`} style={{ left: 'calc(18% - 4px)' }} title='收起' onClick={() => setIsVideoFullScreen(true)}>
+          return <div className={`${styles.speakerModeIcon} drag`} style={{ left: 'calc(270px - 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>
@@ -2415,6 +2415,13 @@ const Meeting: React.FC = () => {
     }
     message.success('操作成功')
   }
+  const hasScrollbar = () => {
+    let element = document.getElementById('videoView') as HTMLDivElement
+    if (element) {
+      return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+    }
+    return false
+  }
   // 移出房间
   const getRoomKickout = async (channelId: string, uid: string, userName: string): Promise<void> => {
     confirm({
@@ -2769,13 +2776,13 @@ const Meeting: React.FC = () => {
                   </div> : null)
                 }
                 )}
-                {isAdmin > 6 ? <div>
+                {hasScrollbar() ? <div>
                   {meetingMode === "StandardMode" ? <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '20px', top: '66px' }} onClick={() => {
                     const container = document.getElementById('videoView') as HTMLElement;
                     container.scrollLeft -= 100
                   }}>
                     <CaretLeftOutlined />
-                  </div> : <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '8.2%', top: '20px' }} onClick={() => {
+                  </div> : <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '115px', top: '20px' }} onClick={() => {
                     const container = document.getElementById('videoView') as HTMLElement;
                     container.scrollTop -= 100
                   }}>
@@ -2786,7 +2793,7 @@ const Meeting: React.FC = () => {
                     container.scrollLeft += 100
                   }}>
                     <CaretRightOutlined />
-                  </div> : <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '8.2%', bottom: '20px' }} onClick={() => {
+                  </div> : <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '115px', bottom: '20px' }} onClick={() => {
                     const container = document.getElementById('videoView') as HTMLElement;
                     container.scrollTop += 100
                   }}>
@@ -3494,7 +3501,7 @@ const meetingContentUser = (item: any, bool?: boolean) => {
     <>
       <div className={styles.meetingContentUser}>
         <div className={styles.meetingContentUserName}>
-          {role.ID.includes(item.roleId) || item.isRoomManager ?
+          {role.ID.includes(item.roleId) ?
             <div style={{ background: role.ID.includes(item.roleId) ? '#FDC229' : '#3F51B5' }}>
               <img src={ImageUrl.icon32} alt="" />
             </div> : null}