Merge branch 'master' of https://gitea.23544.com/marking/WGShare.Client.Electron

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;

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,11 @@ const Meeting: React.FC = () => {
   }
   // 渲染视频
   const renderVideo = async (uid: string): Promise<void> => {
-    if (currentVideoId === uid) {
+    if (currentVideoId === uid || clickCurrentLookUserStatus === false) {
-      // message.error('您已经在看这个视频了。')
+
       return
     }
+    setClickCurrentLookUserStatus(false)
     setCurrentLookUserStatus(0)
     setRoomUserList((res: any) => {
       let item = res.find((item: any) => item.uid === uid || item.screenShareId === uid)
@@ -475,46 +477,50 @@ const Meeting: React.FC = () => {
         if (String(uid).length === 9) {
           // 共享屏幕
           setCurrentLookUserStatus(2)
-          setTimeout(() => {
+          setTimeout(async () => {
-            agora.setupLocalVideo({
+            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(() => {
+          setTimeout(async () => {
-            agora.setupLocalVideo({
+            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(() => {
+          setTimeout(async () => {
-            agora.setupRemoteVideoJoin({
+            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(() => {
+          setTimeout(async () => {
-            agora.setupRemoteVideoJoin({
+            await agora.setupRemoteVideoJoin({
               uid: Number(uid),
               view: document.getElementById(`video-source-remote-screen`) as HTMLElement,
               channelId: state.channelId,
             })
+            setClickCurrentLookUserStatus(true)
           }, 1000);
         }
       }
@@ -969,7 +975,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 +1076,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 +1095,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 +1405,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>
     </>