优化

src/components/Avatar/index.tsx

@@ -8,8 +8,8 @@ const Avatar = forwardRef((props: any, ref: any) => {
   }))
   return (
     <>
-      <div className={styles.avatar}>
-        {props.name ? props.name.slice(-2) : '访客'}
+      <div className={styles.avatar} style={{ fontSize: props.name ? '14px' : '6px' }}>
+        {props.name ? props.name.slice(-2) : '加载中...'}
       </div>
     </>
   )

src/page/Meeting/index.module.scss

@@ -634,6 +634,35 @@
       }
     }
   }
+
+  .modePopover {
+    >div {
+      width: 140px;
+      height: 30px;
+      line-height: 30px;
+      border-radius: 5px;
+      color: #EEEEEE;
+      text-align: center;
+      margin-bottom: 8px;
+      cursor: pointer;
+
+      &:last-child {
+        margin: 0;
+      }
+    }
+
+    >div {
+      background-color: #101418;
+
+      &:hover {
+        background-color: lighten(#101418, 4%);
+      }
+
+      &:active {
+        background-color: darken(#101418, 4%);
+      }
+    }
+  }
 }
 
 // 共享屏幕

src/page/Meeting/index.tsx

@@ -109,12 +109,15 @@ const Meeting: React.FC = () => {
   let [currentSeconds, setCurrentSeconds] = useState(0)
   const [currentEffective, setCurrentEffective] = useState(0)
   const [open, setOpen] = useState(false)
+  const [modeOpen, setModeOpen] = useState(false)
   const [meetingMode, setMeetingMode] = useState('')
   const [userSearchValue, setUserSearchValue] = useState('')
   const [noViewChatList, setNoViewChatList] = useState(0)
-  const [currentLookUserAccount, setCurrentLookUserAccount] = useState<string>('')
+  const [currentLookUserAccount, setCurrentLookUserAccount] = useState<any>('')
   const [currentLookUserStatus, setCurrentLookUserStatus] = useState<1 | 2 | 3>(1)
   let userInfo = JSON.parse(storage.getItem('user') as string)
+  let allUserListArr = [] as any;
+  let currentLookUserAccountId = '' as string;
   useEffect(() => {
     let time = null as any;
     setUser(userInfo)
@@ -290,7 +293,9 @@ const Meeting: React.FC = () => {
   const getShowUser = async (): Promise<void> => {
     await GetShowUser(state.channelId).then(async (res) => {
       if (res.code === 200 && res.data) {
-        setCurrentLookUserAccount(res.data)
+        let userItem = allUserListArr.find((item: any) => item.uid === res.data)
+        currentLookUserAccountId = res.data
+        setCurrentLookUserAccount(userItem)
         if (res.data === userInfo.uid) {
           if (String(res.data).length === 9) {
             // 共享屏幕
@@ -494,13 +499,11 @@ const Meeting: React.FC = () => {
       })
     ]).then(res => {
       if (res[0].code === 200 && res[1].code === 200) {
-        setRoomUserList(res[0].data.map((item: any) => {
-          return {
-            ...item,
-            isShow: true,
-            uid: item.id,
-          }
-        }))
+        res[0].data.forEach((item: any) => {
+          item.isShow = true;
+          item.uid = item.id;
+        })
+        setRoomUserList(res[0].data)
         res[1].data.items.forEach((item: any) => {
           item.uid = item.id;
           const itemUser = res[0].data.find((row: any) => row.id === item.id)
@@ -517,6 +520,11 @@ const Meeting: React.FC = () => {
             item.isRoom = false;
           }
         });
+        allUserListArr = res[0].data
+        if (currentLookUserAccountId) {
+          let userItem = allUserListArr.find((item: any) => item.uid === currentLookUserAccountId)
+          setCurrentLookUserAccount(userItem)
+        }
         setAllUserList(res[1].data.items);
       }
     })
@@ -637,7 +645,27 @@ const Meeting: React.FC = () => {
           </div>
           <div>会议号：{state.channelId}</div>
           <div className='drag'>
-            <div className={styles.meetingGrayButton} onClick={changeSpeakerMode}>{getMeetingContentBodyLeftModeText()}</div>
+            <Popover
+              content={
+                <div className='modePopover'>
+                  <div onClick={() => {
+                    setModeOpen(false)
+                    storage.setItem('meetingMode', 'StandardMode')
+                  }}>标准模式</div>
+                  <div onClick={() => {
+                    setModeOpen(false)
+                    storage.setItem('meetingMode', 'SpeakerMode')
+                  }}>演讲者模式</div>
+                </div>
+              }
+              title=""
+              trigger="click"
+              open={modeOpen}
+              onOpenChange={() => setModeOpen(true)}
+            >
+              <div className={styles.meetingGrayButton}>{getMeetingContentBodyLeftModeText()}</div>
+            </Popover>
+            {/* <div className={styles.meetingGrayButton} onClick={changeSpeakerMode}>{getMeetingContentBodyLeftModeText()}</div> */}
             <Operation></Operation>
           </div>
         </div>
@@ -670,20 +698,32 @@ const Meeting: React.FC = () => {
                   )
                 }
                 )}
-                {currentLookUserStatus === 1 ? <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount, true)}`}>
+                {currentLookUserStatus === 1 ? <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount.uid, true)}`}>
                   <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-camera-primary'>
-                    <span style={{ color: 'white', position: 'absolute', transform: 'translate(-50%,-50%)', left: '50%', top: '50%' }}>暂无视频</span>
+                    {<div className={styles.meetingContentSwiperCardVdeioLoading}>
+                      <Avatar name={currentLookUserAccount.userName} />
+                    </div>}
                   </div>
+                  {meetingContentUser(currentLookUserAccount)}
+                  {currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount)}
                 </div> : null}
-                {currentLookUserStatus === 2 ? <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount, true)}`}>
+                {currentLookUserStatus === 2 ? <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount.uid, true)}`}>
                   <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-screen'>
-                    <span style={{ color: 'white', position: 'absolute', transform: 'translate(-50%,-50%)', left: '50%', top: '50%' }}>暂无视频</span>
+                    <div className={styles.meetingContentSwiperCardVdeioLoading}>
+                      <Avatar name={currentLookUserAccount.userName} />
                     </div>
+                  </div>
+                  {meetingContentUser(currentLookUserAccount)}
+                  {currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount)}
                 </div> : null}
-                {currentLookUserStatus === 3 ? <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount, true)}`}>
+                {currentLookUserStatus === 3 ? <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount.uid, true)}`}>
                   <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-remote'>
-                    <span style={{ color: 'white', position: 'absolute', transform: 'translate(-50%,-50%)', left: '50%', top: '50%' }}>暂无视频</span>
+                    <div className={styles.meetingContentSwiperCardVdeioLoading}>
+                      <Avatar name={currentLookUserAccount.userName} />
                     </div>
+                  </div>
+                  {meetingContentUser(currentLookUserAccount)}
+                  {currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount)}
                 </div> : null}
               </div>
             </div>