src/page/Meeting/index.module.scss

@@ -257,6 +257,11 @@
           padding: 10px;
           box-sizing: border-box;
 
+          .active {
+            // border: 1px solid rgb(106, 106, 106);
+            box-sizing: border-box;
+          }
+
           .boxShadow {
             box-shadow: 0px 0px 13px 0px #7B96FF;
             border: 2px solid #7B96FF;

src/page/Meeting/index.tsx

@@ -121,7 +121,6 @@ const Meeting: React.FC = () => {
   const [isSharePopConfirm, setIsSharePopConfirm] = useState<any>(false)
   const [isShareUser, setIsShareUser] = useState<any>(null)
   const [currentLookUserStatus, setCurrentLookUserStatus] = useState<0 | 1 | 2 | 3 | 4>(1)
-  const [clickCurrentLookUserStatus, setClickCurrentLookUserStatus] = useState<boolean>(true)
   let userInfo = JSON.parse(storage.getItem('user') as string)
   const msgTips = '您不是管理员或发言人，无法开启此功能！'
   useEffect(() => {
@@ -459,11 +458,10 @@ const Meeting: React.FC = () => {
   }
   // 渲染视频
   const renderVideo = async (uid: string): Promise<void> => {
-    if (currentVideoId === uid || clickCurrentLookUserStatus === false) {
+    if (currentVideoId === uid) {
-
+      // message.error('您已经在看这个视频了。')
       return
     }
-    setClickCurrentLookUserStatus(false)
     setCurrentLookUserStatus(0)
     setRoomUserList((res: any) => {
       let item = res.find((item: any) => item.uid === uid || item.screenShareId === uid)
@@ -477,50 +475,46 @@ const Meeting: React.FC = () => {
         if (String(uid).length === 9) {
           // 共享屏幕
           setCurrentLookUserStatus(2)
-          setTimeout(async () => {
+          setTimeout(() => {
-            await agora.setupLocalVideo({
+            agora.setupLocalVideo({
               uid: Number(uid),
               view: document.getElementById(`video-source-screen`) as HTMLElement,
               channelId: state.channelId,
               sourceType: VideoSourceType.VideoSourceScreen,
             })
-            setClickCurrentLookUserStatus(true)
           }, 1000);
         } else {
           // 摄像头
           setCurrentLookUserStatus(1)
-          setTimeout(async () => {
+          setTimeout(() => {
-            await agora.setupLocalVideo({
+            agora.setupLocalVideo({
               uid: Number(uid),
               view: document.getElementById(`video-source-camera-primary`) as HTMLElement,
               channelId: state.channelId,
               sourceType: VideoSourceType.VideoSourceCameraPrimary,
             })
-            setClickCurrentLookUserStatus(true)
           }, 1000);
         }
       } else {
         if (String(uid).length === 9) {
           // 摄像头
           setCurrentLookUserStatus(3)
-          setTimeout(async () => {
+          setTimeout(() => {
-            await agora.setupRemoteVideoJoin({
+            agora.setupRemoteVideoJoin({
               uid: Number(uid),
               view: document.getElementById(`video-source-remote-camera`) as HTMLElement,
               channelId: state.channelId,
             })
-            setClickCurrentLookUserStatus(true)
           }, 1000);
         } else {
           // 共享屏幕
           setCurrentLookUserStatus(4)
-          setTimeout(async () => {
+          setTimeout(() => {
-            await agora.setupRemoteVideoJoin({
+            agora.setupRemoteVideoJoin({
               uid: Number(uid),
               view: document.getElementById(`video-source-remote-screen`) as HTMLElement,
               channelId: state.channelId,
             })
-            setClickCurrentLookUserStatus(true)
           }, 1000);
         }
       }
@@ -975,7 +969,7 @@ const Meeting: React.FC = () => {
                       }
                     }}
                   >
-                    <div className={`${styles.meetingContentSwiperCardVdeio} ${item.roleId === '1' || item.isRoomManager ? styles.boxShadow : ''}`} id={`video-${item.uid}`}>
+                    <div className={`${styles.meetingContentSwiperCardVdeio} ${currentVideoId === item.uid ? styles.active : ''} ${item.roleId === '1' || item.isRoomManager ? styles.boxShadow : ''}`} id={`video-${item.uid}`}>
                       <div className={styles.meetingContentSwiperCardVdeioLoading}>
                         <Avatar name={item.userName} />
                       </div>
@@ -1076,7 +1070,7 @@ const Meeting: React.FC = () => {
                       </div>}
                     </div>
                     {meetingContentUser(currentLookUserAccount, true)}
-                    {currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount, true)}
+                    {currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount)}
                   </div> : null}
                 {currentLookUserStatus === 2 && currentLookUserAccount ?
                   <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()}`}>
@@ -1095,7 +1089,7 @@ const Meeting: React.FC = () => {
                       </div>
                     </div>
                     {meetingContentUser(currentLookUserAccount, true)}
-                    {currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount, true)}
+                    {currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount)}
                   </div> : null}
                 {currentLookUserStatus === 4 && currentLookUserAccount ?
                   <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()}`}>
@@ -1405,13 +1399,10 @@ const meetingContentUser = (item: any, bool?: boolean) => {
     </>
   )
 }
-const meetingContentError = (currentVideoId: any, item: any, bool?: boolean) => {
+const meetingContentError = (currentVideoId: any, item: any) => {
   return (
     <>
-      <div
+      <div className={`${styles.meetingContentError} ${currentVideoId === item.uid ? styles.active : ''}`}>
-        className={`${styles.meetingContentError} ${currentVideoId === item.uid ? styles.active : ''}`}
-        style={{ left: !bool ? 'calc(50% + 2px)' : '', top: !bool ? 'calc(50% + 2px)' : '' }}
-      >
         <Avatar name={item.userName} />
       </div>
     </>