From b2996bae68cc0318d8282fa417bde9c502a6302b Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Mon, 19 Aug 2024 10:38:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Meeting/index.module.scss |  5 ----
 src/page/Meeting/index.tsx         | 38 ++++++++++++++++++------------
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/page/Meeting/index.module.scss b/src/page/Meeting/index.module.scss
index 992b35d..836a483 100644
--- a/src/page/Meeting/index.module.scss
+++ b/src/page/Meeting/index.module.scss
@@ -257,11 +257,6 @@
           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;
diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index 6150fb6..8429c27 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -121,6 +121,7 @@ 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(() => {
@@ -458,10 +459,10 @@ const Meeting: React.FC = () => {
   }
   // 渲染视频
   const renderVideo = async (uid: string): Promise<void> => {
-    if (currentVideoId === uid) {
-      message.error('您已经在看这个视频了。')
+    if (currentVideoId === uid || clickCurrentLookUserStatus === false) {
       return
     }
+    setClickCurrentLookUserStatus(false)
     setCurrentLookUserStatus(0)
     setRoomUserList((res: any) => {
       let item = res.find((item: any) => item.uid === uid || item.screenShareId === uid)
@@ -475,46 +476,50 @@ const Meeting: React.FC = () => {
         if (String(uid).length === 9) {
           // 共享屏幕
           setCurrentLookUserStatus(2)
-          setTimeout(() => {
-            agora.setupLocalVideo({
+          setTimeout(async () => {
+            await 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(() => {
-            agora.setupLocalVideo({
+          setTimeout(async () => {
+            await 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(() => {
-            agora.setupRemoteVideoJoin({
+          setTimeout(async () => {
+            await agora.setupRemoteVideoJoin({
               uid: Number(uid),
               view: document.getElementById(`video-source-remote-camera`) as HTMLElement,
               channelId: state.channelId,
             })
+            setClickCurrentLookUserStatus(true)
           }, 1000);
         } else {
           // 共享屏幕
           setCurrentLookUserStatus(4)
-          setTimeout(() => {
-            agora.setupRemoteVideoJoin({
+          setTimeout(async () => {
+            await agora.setupRemoteVideoJoin({
               uid: Number(uid),
               view: document.getElementById(`video-source-remote-screen`) as HTMLElement,
               channelId: state.channelId,
             })
+            setClickCurrentLookUserStatus(true)
           }, 1000);
         }
       }
@@ -969,7 +974,7 @@ const Meeting: React.FC = () => {
                       }
                     }}
                   >
-                    <div className={`${styles.meetingContentSwiperCardVdeio} ${currentVideoId === item.uid ? styles.active : ''} ${item.roleId === '1' || item.isRoomManager ? styles.boxShadow : ''}`} id={`video-${item.uid}`}>
+                    <div className={`${styles.meetingContentSwiperCardVdeio} ${item.roleId === '1' || item.isRoomManager ? styles.boxShadow : ''}`} id={`video-${item.uid}`}>
                       <div className={styles.meetingContentSwiperCardVdeioLoading}>
                         <Avatar name={item.userName} />
                       </div>
@@ -1070,7 +1075,7 @@ const Meeting: React.FC = () => {
                       </div>}
                     </div>
                     {meetingContentUser(currentLookUserAccount, true)}
-                    {currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount)}
+                    {currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount, true)}
                   </div> : null}
                 {currentLookUserStatus === 2 && currentLookUserAccount ?
                   <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()}`}>
@@ -1089,7 +1094,7 @@ const Meeting: React.FC = () => {
                       </div>
                     </div>
                     {meetingContentUser(currentLookUserAccount, true)}
-                    {currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount)}
+                    {currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount, true)}
                   </div> : null}
                 {currentLookUserStatus === 4 && currentLookUserAccount ?
                   <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()}`}>
@@ -1399,10 +1404,13 @@ const meetingContentUser = (item: any, bool?: boolean) => {
     </>
   )
 }
-const meetingContentError = (currentVideoId: any, item: any) => {
+const meetingContentError = (currentVideoId: any, item: any, bool?: boolean) => {
   return (
     <>
-      <div className={`${styles.meetingContentError} ${currentVideoId === item.uid ? styles.active : ''}`}>
+      <div
+        className={`${styles.meetingContentError} ${currentVideoId === item.uid ? styles.active : ''}`}
+        style={{ left: !bool ? 'calc(50% + 2px)' : '', top: !bool ? 'calc(50% + 2px)' : '' }}
+      >
         <Avatar name={item.userName} />
       </div>
     </>