优化

main.js

@@ -255,11 +255,11 @@ app.on('ready', () => {
         }
         // 设置窗口尺寸
         mainWindow.setSize(config.width, config.height)
-        // // 设置窗口位置使其居中于当前屏幕
+        // 设置窗口位置使其居中于当前屏幕
-        // const display = screen.getDisplayMatching({...mainWindow.getBounds()});
+        const display = screen.getDisplayMatching({...mainWindow.getBounds()});
-        // const x = Math.round((display.workArea.width - mainWindow.getSize()[0]) / 2);
+        const x = Math.round((display.workArea.width - mainWindow.getSize()[0]) / 2);
-        // const y = Math.round((display.workArea.height - mainWindow.getSize()[1]) / 2);
+        const y = Math.round((display.workArea.height - mainWindow.getSize()[1]) / 2);
-        // mainWindow.setPosition(x, y);
+        mainWindow.setPosition(x, y);
     });
 });
 

src/App.tsx

@@ -134,25 +134,6 @@ const App: React.FC = () => {
         }, 3000);
     }, [])
 
-    useEffect(() => {
-        try {
-            if (location.hash.indexOf('/login') !== -1) {
-                onStop()
-                window.electron.setMainWindowSize({
-                    width: 752,
-                    height: 520,
-                    key: 'login'
-                })
-            } else {
-                window.electron.setMainWindowSize({
-                    width: 1200,
-                    height: 800,
-                })
-            }
-        } catch {
-        }
-    }, [location.hash])
-
     useEffect(() => {
         onReconnected(async () => {
             storage.setItem('reconnect', true)
@@ -217,10 +198,20 @@ const App: React.FC = () => {
     const toSrc = (path: string): void => {
         switch (path) {
             case '/login':
+                onStop()
+                window.electron.setMainWindowSize({
+                    width: 752,
+                    height: 520,
+                    key: 'login'
+                })
                 storage.removeItem('user')
                 navigate('/login')
                 break;
             case '/home':
+                window.electron.setMainWindowSize({
+                    width: 1200,
+                    height: 800,
+                })
                 navigate('/home')
                 break;
 

src/components/JoinSetting/index.module.scss

@@ -24,14 +24,26 @@
   >div:nth-child(2) {
     margin: 10px 0;
     height: 260px;
+    width: 100%;
     background-color: #1E1E1F;
+    overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
+    position: relative;
 
-    >div {
+    >div:nth-child(1) {
       transform: scale(2);
     }
+
+    >div:nth-child(2) {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+    }
   }
 
   >div:nth-child(3) {

src/components/JoinSetting/index.tsx

@@ -3,10 +3,11 @@ import { storage } from '@/utils';
 import ImageUrl from '@/utils/package/ImageUrl';
 import { GetCheckoutRoomNum, GetRoomRtcToken, GetRoomInfo } from '@/api/Home/Index';
 import { Button, Modal, message } from 'antd';
-import { useState, useImperativeHandle, forwardRef } from "react";
+import { useState, useImperativeHandle, forwardRef, useEffect } from "react";
 import { PostRefresh } from '@/api/Login';
 import Avatar from '@/components/Avatar';
 import { useNavigate } from 'react-router-dom';
+import agora from '@/utils/package/agora';
 const JoinSetting = forwardRef((_props: any, ref: any) => {
   useImperativeHandle(ref, () => ({
     changeModal: (roomNum: string = '') => {
@@ -17,6 +18,9 @@ const JoinSetting = forwardRef((_props: any, ref: any) => {
         ...joinRoomSettingForm,
         roomNum,
       })
+      if (location.hash.indexOf('/meeting') === -1) {
+        agora.init()
+      }
     }
   }))
   const navigate = useNavigate();
@@ -63,7 +67,14 @@ const JoinSetting = forwardRef((_props: any, ref: any) => {
   }
   return (
     <>
-      <Modal title="" open={joinRoomSettingModal} footer={null} centered width={'500px'} onCancel={() => setJoinRoomSettingModal(false)}>
+      <Modal title="
+      " open={joinRoomSettingModal}
+        footer={null} centered
+        width={'500px'}
+        onCancel={() => {
+          agora.release()
+          setJoinRoomSettingModal(false)
+        }}>
         <div className={styles.joinRoomSettingModal}>
           <div>
             <span>请输入会议号</span>
@@ -84,18 +95,26 @@ const JoinSetting = forwardRef((_props: any, ref: any) => {
           </div>
           <div>
             <Avatar name={user.userName} />
+            {joinRoomSettingForm.list[1].active ? <div id='videoPreview'>
+
+            </div> : null}
           </div>
           <div>
             <div>
               {
                 joinRoomSettingForm.list.map((item, index) => {
-                  return <div key={index} onClick={() => {
+                  return <div key={index} onClick={async () => {
                     const list = [...joinRoomSettingForm.list]
                     list[index].active = !list[index].active
                     setJoinRoomSettingForm({
                       ...joinRoomSettingForm,
                       list
                     })
+                    if (index === 1) {
+                      if (list[index].active) {
+                        await agora.startPreview('videoPreview', Number(user.account))
+                      }
+                    }
                   }}>
                     <img src={item.active ? item.icon : item.iconActive} alt="" />
                   </div>
@@ -116,8 +135,9 @@ const JoinSetting = forwardRef((_props: any, ref: any) => {
                         if (token) {
                           postRefresh(() => {
                             setJoinRoomSettingModal(false)
-                            GetRoomInfo(joinRoomSettingForm.roomNum).then(res => {
+                            GetRoomInfo(joinRoomSettingForm.roomNum).then(async (res) => {
                               if (res.code === 200) {
+                                await agora.release()
                                 navigate(`/meeting`, {
                                   state: {
                                     channelId: joinRoomSettingForm.roomNum,

src/utils/package/agora.ts

@@ -126,8 +126,8 @@ const agora = {
     );
   },
   // 销毁
-  release: () => {
+  release: async () => {
-    rtcEngine.release()
+    await rtcEngine.release()
   },
   // 离开频道
   leaveChannel: async () => {
@@ -264,7 +264,7 @@ const agora = {
     rtcEngine.startPreview();
     await GetRoomRtcToken(`${+new Date()}`).then(async (res) => {
       await rtcEngine.joinChannelEx(res.data, {
-        channelId: `${+new Date()}`,
+        channelId: `${+new Date() + uid}`,
         localUid: uid,
       }, {
         channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,

src/utils/request/request.ts

@@ -61,37 +61,21 @@ class Request {
           }
         }
         if (resData.code === 1403) {
-          storage.removeItem('user')
+          toLogin()
-          location.href = location.origin + '/#/login'
         }
         return resData
       },
       (err: any) => {
-        function toLogin() {
+
-          let user = JSON.parse(storage.getItem('user') as string);
-          if (user) {
-            PostRefresh(user.refresh_token).then((res) => {
-              if (res.code == 200) {
-                storage.setItem('user', JSON.stringify(res.data))
-              } else {
-                storage.removeItem('user')
-                location.href = location.origin + '/#/login'
-              }
-            })
-          } else {
-            storage.removeItem('user')
-            location.href = location.origin + '/#/login'
-          }
-        }
         // 根据自己业务/接口返回做相应调整
         if (err.response) {
           const { status } = err.response
           switch (status) {
             case 401:
-              toLogin()
+              updatePostRefresh()
               break
             case 403:
-              toLogin()
+              updatePostRefresh()
               break
             default:
               message.error(err.message)
@@ -127,5 +111,27 @@ class Request {
     })
   }
 }
-
+function toLogin() {
+  window.electron.setMainWindowSize({
+    width: 752,
+    height: 520,
+    key: 'login'
+  })
+  storage.removeItem('user')
+  location.href = location.origin + '/#/login'
+}
+function updatePostRefresh() {
+  let user = JSON.parse(storage.getItem('user') as string);
+  if (user) {
+    PostRefresh(user.refresh_token).then((res) => {
+      if (res.code == 200) {
+        storage.setItem('user', JSON.stringify(res.data))
+      } else {
+        toLogin()
+      }
+    })
+  } else {
+    toLogin()
+  }
+}
 export default Request