From 4774f875a392d50db20d6765727c85c7ad4654d1 Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Thu, 5 Sep 2024 16:11:02 +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/components/UserVideo/index.tsx |  6 +-
 src/page/Meeting/index.module.scss |  9 ---
 src/page/Meeting/index.tsx         | 93 +++++++++++++++++++++---------
 src/utils/package/agora.ts         |  4 +-
 4 files changed, 72 insertions(+), 40 deletions(-)

diff --git a/src/components/UserVideo/index.tsx b/src/components/UserVideo/index.tsx
index aca375c..1cbe865 100644
--- a/src/components/UserVideo/index.tsx
+++ b/src/components/UserVideo/index.tsx
@@ -58,9 +58,9 @@ const UserVideo: React.FC = () => {
   }, [from.viewPeopleValue])
 
   useEffect(() => {
-    userList.forEach((item: any) => {
-      agora.destroyRendererByConfig(Number('1' + item.screenShareId))
-      agora.setupRemoteVideoEx({
+    userList.forEach(async (item: any) => {
+      await agora.destroyRendererByConfig(Number('1' + item.screenShareId))
+      await agora.setupRemoteVideoEx({
         uid: Number('1' + item.screenShareId),
         view: document.getElementById(`video-${item.screenShareId}`),
         channelId: state.channelId + 'a',
diff --git a/src/page/Meeting/index.module.scss b/src/page/Meeting/index.module.scss
index 1aca64b..7b753af 100644
--- a/src/page/Meeting/index.module.scss
+++ b/src/page/Meeting/index.module.scss
@@ -209,15 +209,6 @@
           }
         }
 
-        .scrollButton {
-          position: absolute;
-          padding: 4px 10px;
-          transform: translate(0, -50%);
-          cursor: pointer;
-          z-index: 3;
-          color: white;
-          background-color: rgba(0, 0, 0, 0.5);
-        }
 
         // 自由者模式
         .meetingContentBodyLeftFreedomMode {
diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index b92f959..d7172c7 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -192,6 +192,8 @@ const Meeting: React.FC = () => {
     window.addEventListener('customStorageChange', handleCustomStorageChange);
     window.addEventListener('online', handleNetworkChange);
     window.addEventListener('offline', handleNetworkChange);
+    const container = document.getElementById('videoView') as HTMLElement;
+    container.addEventListener('wheel', handleWheelChange);
     time = setInterval(() => {
       setCurrentSeconds(currentSeconds++)
     }, 1000)
@@ -216,6 +218,7 @@ const Meeting: React.FC = () => {
       window.removeEventListener('customStorageChange', handleCustomStorageChange);
       window.removeEventListener('online', handleNetworkChange);
       window.removeEventListener('offline', handleNetworkChange);
+      window.removeEventListener('wheel', handleWheelChange);
       clearInterval(time)
       clearInterval(getDesktopCapturerVideoTime)
     };
@@ -384,11 +387,6 @@ const Meeting: React.FC = () => {
                   type="primary"
                   className='m-ant-btn'
                   onClick={async (e: any) => {
-                    await postRoomManager({
-                      roomId: state.roomId,
-                      roomNum: state.channelId,
-                      userId: item.uid
-                    })
                     let i = e.nativeEvent.path;
                     if (i) {
                       i.forEach((i: any) => {
@@ -396,6 +394,11 @@ const Meeting: React.FC = () => {
                           i.childNodes.forEach((row: any) => {
                             if (row.className === 'ant-notification-notice-close') {
                               row.click()
+                              postRoomManager({
+                                roomId: state.roomId,
+                                roomNum: state.channelId,
+                                userId: item.uid
+                              })
                             }
                           })
                         }
@@ -722,6 +725,15 @@ const Meeting: React.FC = () => {
       message.error('网络已断开!')
     }
   }
+  // 滚动
+  const handleWheelChange = (e: any): void => {
+    const container = document.getElementById('videoView') as HTMLElement;
+    if (e.wheelDeltaY > 0) {
+      container.scrollLeft -= 100
+    } else {
+      container.scrollLeft += 100
+    }
+  }
   // 渲染视频
   const renderVideo = async (uid: string = ''): Promise<void> => {
     if (uid) {
@@ -1298,26 +1310,6 @@ const Meeting: React.FC = () => {
         }
     }
   }
-  // 滚动按钮
-  const getScrollButton = (): any => {
-    switch (meetingMode) {
-      case 'StandardMode':
-        return <div className={`${styles.scrollButton} drag`} style={{ top: '80px', right: '20px' }} title='滚动' onClick={() => {
-          const element = document.getElementById('videoView') as HTMLElement;
-          element.scrollLeft += 100; // 每次点击向右滚动100像素
-        }}>
-          滚动
-        </div>
-      case 'SpeakerMode':
-        return <div className={`${styles.scrollButton} drag`} style={{ bottom: '10px', left: '144px' }} title='滚动' onClick={() => {
-          const element = document.getElementById('videoView') as HTMLElement;
-          element.scrollTop += 100; // 每次点击向下滚动100像素
-        }}>
-          滚动
-        </div>
-    }
-
-  }
   // 加入房间
   const getJoin = async (enableMicr: boolean, enableCamera: boolean): Promise<void> => {
     await GetJoin({
@@ -1413,7 +1405,6 @@ const Meeting: React.FC = () => {
           <div className={styles.meetingContentBody}>
             <div className={`${styles.meetingContentBodyLeft} drag`}>
               {isAdmin && currentLookUserAccount ? getSettingIcon() : null}
-              {roomUserList.length > 6 ? getScrollButton() : null}
               <div className={getMeetingContentBodyLeftModeClass()} id='videoView'>
                 {roomUserList.map((item: any, index: number) => {
                   return (index <= 19 && item.isRoom && item.isAdmin ? <div
@@ -1512,6 +1503,56 @@ const Meeting: React.FC = () => {
                   </div> : null)
                 }
                 )}
+                <div className={`${styles.meetingContentSwiperCard} `}>
+                  <div className={`${styles.meetingContentSwiperCardVdeio}`}>
+
+                  </div>
+                </div>
+                <div className={`${styles.meetingContentSwiperCard} `}>
+                  <div className={`${styles.meetingContentSwiperCardVdeio}`}>
+
+                  </div>
+                </div>
+                <div className={`${styles.meetingContentSwiperCard} `}>
+                  <div className={`${styles.meetingContentSwiperCardVdeio}`}>
+
+                  </div>
+                </div>
+                <div className={`${styles.meetingContentSwiperCard} `}>
+                  <div className={`${styles.meetingContentSwiperCardVdeio}`}>
+
+                  </div>
+                </div>
+                <div className={`${styles.meetingContentSwiperCard} `}>
+                  <div className={`${styles.meetingContentSwiperCardVdeio}`}>
+
+                  </div>
+                </div>
+                <div className={`${styles.meetingContentSwiperCard} `}>
+                  <div className={`${styles.meetingContentSwiperCardVdeio}`}>
+
+                  </div>
+                </div>
+                <div className={`${styles.meetingContentSwiperCard} `}>
+                  <div className={`${styles.meetingContentSwiperCardVdeio}`}>
+
+                  </div>
+                </div>
+                <div className={`${styles.meetingContentSwiperCard} `}>
+                  <div className={`${styles.meetingContentSwiperCardVdeio}`}>
+
+                  </div>
+                </div>
+                <div className={`${styles.meetingContentSwiperCard} `}>
+                  <div className={`${styles.meetingContentSwiperCardVdeio}`}>
+
+                  </div>
+                </div>
+                <div className={`${styles.meetingContentSwiperCard} `}>
+                  <div className={`${styles.meetingContentSwiperCardVdeio}`}>
+
+                  </div>
+                </div>
                 {currentLookUserStatus === 0 && currentLookUserAccount ?
                   <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
                     <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-camera-primary'>
diff --git a/src/utils/package/agora.ts b/src/utils/package/agora.ts
index ad5c49b..eb652ae 100644
--- a/src/utils/package/agora.ts
+++ b/src/utils/package/agora.ts
@@ -286,8 +286,8 @@ export const agora = {
   startCameraCapture: async () => {
     await rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {
       format: {
-        width: 640,
-        height: 360,
+        width: 1280,
+        height: 720,
         fps: 15,
       }
     })