2024-11-13 10:41:16 +08:00
8 changed files with 151 additions and 141 deletions
--- a/main.js
+++ b/main.js
@ -551,7 +551,9 @@ app.on('ready', () => {
                        childWindow[k] = ""
                    }
                }
-                mainWindowCenter()
+                mainWindow.setSkipTaskbar(false)
+                mainWindow.setResizable(true)
+                mainWindow.setAlwaysOnTop(false)
            } else {
                childWindow[key].close()
                childWindow[key] = ""
@ -569,6 +571,11 @@ app.on('ready', () => {
                case 'noticeWindow':
                    childWindow[config.key].setBounds({ width: config.width, height: config.height })
                    break;
+                default:
+                    mainWindow.setMinimumSize(250, config.height);
+                    mainWindow.setMaximumSize(250, config.height);
+                    mainWindow.setSize(250, config.height)
+                    break;
            }
        });
        // 隐藏显示子窗口
@ -589,13 +596,18 @@ app.on('ready', () => {
                }
            }
        });
-        // 隐藏主窗口
-        ipcMain.handle('mainWindowHide', () => {
-            mainWindowHide()
-        });
-        // 居中主窗口
-        ipcMain.handle('mainWindowCenter', () => {
-            mainWindowCenter()
+        // 定位主窗口
+        ipcMain.handle('setPosition', (event, data) => {
+            const display = screen.getDisplayMatching({ ...mainWindow.getBounds() });
+            const { width, height } = display.size
+            switch (data) {
+                case 'right':
+                    x = width - mainWindow.getSize()[0];
+                    mainWindow.setPosition(x - 40, 40);
+                    break;
+                default:
+                    break;
+            }
        });
        // 窗口通信
        ipcMain.handle('windowHandleMessage', (event, data) => {
@ -682,16 +694,14 @@ function windowOperation(config) {
        case 'shareScreenWindow':
            x = Math.round((display.workArea.width - child.getSize()[0]) / 2);
            child.setPosition(x, 0);
-            mainWindowHide()
+            mainWindow.setSkipTaskbar(true)
+            mainWindow.setResizable(false)
+            mainWindow.setAlwaysOnTop(true, 'screen-saver')
            break;
        case 'chatSmallWindow':
            y = height - child.getSize()[1];
            child.setPosition(40, y - 200);
            break;
-        case 'currentSpeakUserWindow':
-            x = width - child.getSize()[0];
-            child.setPosition(x - 40, 40);
-            break;
        case 'noticeWindow':
            x = width - child.getSize()[0];
            y = height - child.getSize()[1];
@ -706,10 +716,6 @@ function mainWindowCenter() {
    const y = Math.round((display.workArea.height - mainWindow.getSize()[1]) / 2);
    mainWindow.setPosition(x, y);
 }
-// 主窗口隐藏
-function mainWindowHide() {
-    mainWindow.setPosition(-999999, -999999);
-}

 const startSignalr = async (user) => {
    connection = new signalR.HubConnectionBuilder()
--- a/preload.js
+++ b/preload.js
@ -127,13 +127,9 @@ window.electron = {
    setChildWindowShow: (config) => {
        ipcRenderer.invoke('setChildWindowShow', config)
    },
-    // 隐藏主窗口
-    mainWindowHide: () => {
-        ipcRenderer.invoke('mainWindowHide')
-    },
-    // 居中主窗口
-    mainWindowCenter: () => {
-        ipcRenderer.invoke('mainWindowCenter')
+    // 定位主窗口
+    setPosition: (data) => {
+        ipcRenderer.invoke('setPosition', data)
    },
    // 窗口通信传参
    windowHandleMessage: (data) => {
--- a/src/App.tsx
+++ b/src/App.tsx
@ -16,12 +16,10 @@ import { PostLogin } from "@/api/Login";
 import { agora } from "@/utils/package/agora";
 import QuitTips from "@/components/QuitTips";
 import { GetLeave } from "@/api/Meeting";
-import path from "path";
 import ShareScreenWindow from "@/page/Meeting/ShareScreenWindow";
 import UserListWindow from "@/page/Meeting/UserListWindow";
 import ChatSmallWindow from "@/page/Meeting/ChatSmallWindow";
 import ChatBigWindow from "@/page/Meeting/ChatBigWindow";
-import CurrentSpeakUserWindow from "@/page/Meeting/CurrentSpeakUserWindow";
 import NoticeWindow from "@/page/Meeting/NoticeWindow";
 import { getKeyOpenChildWindow, setKeyOpenChildWindow, storageSeeting } from "./utils/package/public";
 const fs = require('fs').promises;
@ -38,7 +36,7 @@ const App: React.FC = () => {
    });
    const [spinning, setSpinning] = useState(false);
    const [isState, setIsState] = useState(true);
-    const urlHashArr = ['#/userListWindow', '#/shareScreenWindow', '#/chatSmallWindow', '#/chatBigWindow', '#/currentSpeakUserWindow', '#/noticeWindow']
+    const urlHashArr = ['#/userListWindow', '#/shareScreenWindow', '#/chatSmallWindow', '#/chatBigWindow', '#/noticeWindow']
    if (urlHashArr.indexOf(location.hash) == -1) {
        useEffect(() => {
            let userInfo = JSON.parse(storage.getItem('user') as string)
@ -165,6 +163,7 @@ const App: React.FC = () => {
            if (location.href.indexOf('/login') !== -1) {
                window.electron.onStop()
            }
+            message.destroy('cameraTemporarily')
        }, [navigate])
    }
    useEffect(() => {
@ -276,7 +275,6 @@ const App: React.FC = () => {
                <Route path='/userListWindow' element={<UserListWindow />} />
                <Route path='/chatSmallWindow' element={<ChatSmallWindow />} />
                <Route path='/chatBigWindow' element={<ChatBigWindow />} />
-                <Route path='/currentSpeakUserWindow' element={<CurrentSpeakUserWindow />} />
                <Route path='/noticeWindow' element={<NoticeWindow />} />
                <Route path='*' element={<NotFound />} />
            </Routes>
--- a/src/page/Meeting/CurrentSpeakUserWindow/index.module.scss
+++ b/src/page/Meeting/CurrentSpeakUserWindow/index.module.scss
@ -1,19 +0,0 @@
-.currentSpeakUserWindow {
-  color: white;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: #16191E;
-  padding: 4px;
-  box-sizing: border-box;
-
-  >div {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    max-width: 100%;
-    width: fit-content;
-    font-size: 14px;
-  }
-}
--- a/src/page/Meeting/CurrentSpeakUserWindow/index.tsx
+++ b/src/page/Meeting/CurrentSpeakUserWindow/index.tsx
@ -1,36 +0,0 @@
-import styles from '@/page/Meeting/CurrentSpeakUserWindow/index.module.scss'
-import { useEffect, useState } from "react";
-const CurrentSpeakUserWindow: React.FC = () => {
-  const [inputValue, setInputValue] = useState('')
-  const channel = new BroadcastChannel('meeting_channel');
-  useEffect(() => {
-    let time: NodeJS.Timeout;
-    time = setInterval(() => {
-      channel.postMessage({
-        type: 'currentSpeakUserWindowGetUserName'
-      })
-    }, 1000)
-    window.electron.windowHandleMessageCallBack((_e: any, data: any) => {
-      if (data.parmes.currentSpeakUser.length) {
-        setInputValue(data.parmes.currentSpeakUser.join(';'))
-      } else {
-        setInputValue('')
-      }
-    })
-    return () => {
-      clearInterval(time)
-    }
-  }, []);
-
-  return (
-    <>
-      <div className={styles.currentSpeakUserWindow}>
-        <div title={`正在说话: ${inputValue}`}>
-          {`正在说话: ${inputValue}`}
-        </div>
-      </div >
-    </>
-  )
-}
-
-export default CurrentSpeakUserWindow
--- a/src/page/Meeting/index.module.scss
+++ b/src/page/Meeting/index.module.scss
@ -94,6 +94,45 @@
  background-color: #1F2022;
  display: flex;
  flex-direction: column;
+  position: relative;
+
+  .meetingAbsolute {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: #1F2022;
+    left: 0;
+    top: 0;
+    z-index: 3000;
+
+    .meetingAbsoluteLoading {
+      background: black;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 1;
+    }
+
+    .meetingAbsoluteText {
+      position: absolute;
+      width: 100%;
+      left: 0;
+      color: white;
+      text-align: center;
+      z-index: 2;
+      background-color: rgba(0, 0, 0, 0.5);
+      cursor: pointer;
+      font-size: 14px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }

  .meetingHeader {
    display: flex;
@ -597,8 +636,6 @@
                  color: #F3F3F5;
                  margin-left: 4px;
                }
-
-                >div {}
              }

              >div:nth-child(2) {
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@ -146,7 +146,9 @@ const Meeting: React.FC = () => {
  });
  const [roomUserList, setRoomUserList] = useState<any>([])
  const [_speackUid, setSpeackUid] = useState<any>([])
+  const [currentSpeakUser, setCurrentSpeakUser] = useState<any>([])
  const [chatList, setChatList] = useState<any>([])
+  const [isExpand, setIsExpand] = useState(false)
  const [currentVideoId, setCurrentVideoId] = useState('')
  let [currentSeconds, setCurrentSeconds] = useState(0)
  const [currentEffective, setCurrentEffective] = useState(4)
@ -156,7 +158,7 @@ const Meeting: React.FC = () => {
  })
  const [networkOther, setNetworkOther] = useState<RtcStats>({})
  const [isComputerAudio, setIsComputerAudio] = useState(false)
-  const [_isScreenCapture, setIsScreenCapture] = useState(false)
+  const [isScreenCapture, setIsScreenCapture] = useState(false)
  const [isFluencyPriority, setIsFluencyPriority] = useState(false)
  const [open, setOpen] = useState(false)
  const [modeOpen, setModeOpen] = useState(false)
@ -379,33 +381,26 @@ const Meeting: React.FC = () => {
            userId: noticeWindowPostRoomManager.uid
          })
          break;
-        case 'currentSpeakUserWindowGetUserName':
-          setSpeackUid((uids: any) => {
-            const usernames: string[] = [];
-            setRoomUserList((res: any) => {
-              uids.forEach((uid: any) => {
-                const user = res.find((item: any) => item.uid == uid);
-                if (user) {
-                  usernames.push(user.userName);
-                }
-              })
-              window.electron.windowHandleMessage({
-                key: 'currentSpeakUserWindow',
-                parmes: {
-                  currentSpeakUser: usernames,
-                }
-              })
-              return res
-            });
-            return []
-          })
-          break;
      }
    }
    time = setInterval(() => {
      setCurrentSeconds(currentSeconds => {
        return currentSeconds += 1
      })
+      setSpeackUid((uids: any) => {
+        const usernames: string[] = [];
+        setRoomUserList((res: any) => {
+          uids.forEach((uid: any) => {
+            const user = res.find((item: any) => item.uid == uid);
+            if (user) {
+              usernames.push(user.userName);
+            }
+          })
+          setCurrentSpeakUser(usernames)
+          return res
+        });
+        return []
+      })
    }, 1000)
    // 首次加载图标更新
    const firstFooterList = [...footerList]
@ -417,27 +412,32 @@ const Meeting: React.FC = () => {
    setTimeout(async () => {
      const setting = await JSON.parse(storage.getItem('setting') as string);
      const stateInfo = await JSON.parse(storage.getItem('stateInfo') as string);
-      if (stateInfo && setting.isRecordingTips && !recorder) {
+      if (stateInfo && setting.isRecordingTips) {
        setRecorder((data: any) => {
          if (!data) {
-            confirm({
-              title: '提示',
-              icon: <ExclamationCircleFilled />,
-              content: `是否录制本次会议？`,
-              centered: true,
-              okText: '确定',
-              cancelText: '取消',
-              async onOk() {
-                if (stateInfo) {
-                  changeStatusList({
-                    title: '录制'
-                  }, 1, 3)
-                } else {
-                  message.error('当前不在会议室！')
-                }
-              },
-              onCancel() {
+            setIsScreenCapture(bool => {
+              if (!bool) {
+                confirm({
+                  title: '提示',
+                  icon: <ExclamationCircleFilled />,
+                  content: `是否录制本次会议？`,
+                  centered: true,
+                  okText: '确定',
+                  cancelText: '取消',
+                  async onOk() {
+                    if (stateInfo) {
+                      changeStatusList({
+                        title: '录制'
+                      }, 1, 3)
+                    } else {
+                      message.error('当前不在会议室！')
+                    }
+                  },
+                  onCancel() {
+                  }
+                })
              }
+              return bool
            })
          }
          return data
@ -989,9 +989,11 @@ const Meeting: React.FC = () => {
              const percentage = (item.volume / 255) * 100
              dom.style.height = `${percentage}%`
            }
-            if (domMe && !item.uid) {
+            if (!item.uid) {
              const percentage = (item.volume / 255) * 100
-              domMe.style.height = `${percentage}%`
+              if (domMe) {
+                domMe.style.height = `${percentage}%`
+              }
              window.electron.windowHandleMessage({
                key: 'shareScreenWindow',
                parmes: {
@ -1059,6 +1061,14 @@ const Meeting: React.FC = () => {
            }
            return bool
          })
+        } else if (reason === 3 || reason === 4) {
+          message.error({
+            content: <div>请检查摄像头是否正常工作，检查摄像头是否被其他应用占用，或者尝试重新加入频道，<span style={{ color: '#606fc7', cursor: 'pointer' }} onClick={() => {
+              stupWizardRef.current.changeModal(1);
+            }}>前往修改摄像头</span></div>,
+            duration: 60,
+            key: 'cameraTemporarily'
+          });
        }
      }
    })
@ -1597,7 +1607,6 @@ const Meeting: React.FC = () => {
      await allUserLook(user.screenShareId, user.userName)
      const isOpen = await getKeyOpenChildWindow('shareScreenWindow')
      setIsScreenCapture(true)
-      window.electron.setViewStatus('hide')
      if (!isOpen) {
        window.electron.createChildWindow({
          url: location.origin + `/#/noticeWindow`,
@ -1620,13 +1629,6 @@ const Meeting: React.FC = () => {
          key: 'chatSmallWindow',
          show: true,
        })
-        window.electron.createChildWindow({
-          url: location.origin + `/#/currentSpeakUserWindow`,
-          width: 200,
-          height: 30,
-          key: 'currentSpeakUserWindow',
-          show: true,
-        })
        window.electron.createChildWindow({
          url: location.origin + `/#/chatBigWindow`,
          width: 540,
@ -1640,6 +1642,20 @@ const Meeting: React.FC = () => {
          key: 'userListWindow',
        })
        setKeyOpenChildWindow('shareScreenWindow', true)
+        window.electron.setMainWindowSize({
+          width: 250,
+          height: 160,
+        })
+        window.electron.setPosition('right')
+        setTimeout(() => {
+          agora.setupLocalVideo({
+            uid: Number(user.uid),
+            view: document.getElementById(`meetingAbsoluteVideo`) as HTMLElement,
+            channelId: state.channelId,
+            sourceType: VideoSourceType.VideoSourceCameraPrimary,
+            type: true
+          })
+        }, 1500);
      }
    } else {
      message.error('请选择应用!')
@ -2067,10 +2083,23 @@ const Meeting: React.FC = () => {
  return (
    <>
      <div className={styles.meeting}>
+        {isScreenCapture ? <div className={`${styles.meetingAbsolute}`} id='meetingAbsoluteVideo'>
+          <div style={{ top: '0px' }} className={`${styles.meetingAbsoluteText}`}>{currentSpeakUser.length ? '正在说话:' + currentSpeakUser.join(';') : '正在说话:'}</div>
+          {footerList[0][1].active ? <div className={styles.meetingAbsoluteLoading}>
+            <Avatar name={user.userName} />
+          </div> : null}
+          <div style={{ bottom: '0px' }} className={`${styles.meetingAbsoluteText} drag`} onClick={() => {
+            setIsExpand(!isExpand)
+            window.electron.setChildWindow({
+              height: isExpand ? 160 : 40,
+              key: 'main'
+            })
+          }}><span>{isExpand ? '展开' : '收起'}</span></div>
+        </div> : null}
        {contextHolder}
        <div className={styles.meetingHeader}>
          <div>
-            <Popover
+            {isScreenCapture ? null : <Popover
              content={
                <div style={{ color: 'white' }}>
                  <div>
@ -2114,7 +2143,7 @@ const Meeting: React.FC = () => {
                {networkIcon(currentEffective)}
                <span>详情</span>
              </div>
-            </Popover>
+            </Popover>}
            <div>{changeCurrentSeconds()}</div>
          </div>
          <div>会议号：{state.channelId} 会议名称：{state.roomName}</div>
@ -2629,7 +2658,7 @@ const Meeting: React.FC = () => {
              ) : null
            }
          </div>
-          <div className={styles.meetingContentFooter}>
+          {isScreenCapture ? null : <div className={styles.meetingContentFooter}>
            {footerList.map((item: any, itemIndex: number) => {
              return (
                <div key={itemIndex}>
@ -2782,7 +2811,7 @@ const Meeting: React.FC = () => {
                </div>
              )
            })}
-          </div>
+          </div>}
        </div>
      </div>
      <Modal title="共享屏幕" open={isSharedScreenModal} footer={null} closable={false} centered width={'800px'}>
--- a/src/render.d.ts
+++ b/src/render.d.ts
@ -32,8 +32,7 @@ export interface IElectronAPI {
    setChildWindow: (config: any) => void;
    setChildWindowShow: (config: any) => void;
    closeChildWindow: (key: string) => void;
-    mainWindowCenter: () => any;
-    mainWindowHide: () => any;
+    setPosition: (data: ang) => void;
    windowHandleMessage: (data: any) => {}
    windowHandleMessageCallBack: (callBack: Function) => void;
 }