main.js

@@ -322,17 +322,19 @@ app.on('ready', () => {
             child.loadURL(config.url)
             childWindow[config.key] = child
             child.once('ready-to-show', () => {
-                child.show()
+                childWindow[config.key].show()
-                if (config.key === 'shareScreenWindow') {
+                windowOperation(config)
-                    const display = screen.getDisplayMatching({ ...child.getBounds() });
-                    const x = Math.round((display.workArea.width - child.getSize()[0]) / 2);
-                    child.setPosition(x, 0);
-                    child.setResizable(false)
-                    child.setMovable(false)
-                    mainWindow.setPosition(-999999, -999999);
-                }
             })
         });
+        // 隐藏窗口
+        ipcMain.handle('closeChildWindow', (event, key) => {
+            childWindow[key].close()
+            childWindow[key] = ""
+            const display = screen.getDisplayMatching({ ...mainWindow.getBounds() });
+            const x = Math.round((display.workArea.width - mainWindow.getSize()[0]) / 2);
+            const y = Math.round((display.workArea.height - mainWindow.getSize()[1]) / 2);
+            mainWindow.setPosition(x, y);
+        });
     }
 });
 // 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写
@@ -401,3 +403,16 @@ function cancleDownloadUpdate() {
 function quitAndInstall() {
     autoUpdater.quitAndInstall();
 }
+
+function windowOperation(config) {
+    const child = childWindow[config.key];
+    if (config.key === 'shareScreenWindow') {
+        const display = screen.getDisplayMatching({ ...child.getBounds() });
+        const x = Math.round((display.workArea.width - child.getSize()[0]) / 2);
+        child.setPosition(x, 0);
+        child.setResizable(false)
+        child.setMovable(false)
+        mainWindow.setPosition(-999999, -999999);
+        child.webContents.openDevTools()
+    }
+}

preload.js

@@ -77,4 +77,8 @@ window.electron = {
     createChildWindow: (config) => {
         ipcRenderer.invoke('createChildWindow', config)
     },
+    // 关闭子窗口
+    closeChildWindow: (key) => {
+        ipcRenderer.invoke('closeChildWindow', key)
+    },
 }

src/page/Meeting/index.tsx

@@ -184,6 +184,7 @@ const Meeting: React.FC = () => {
   const [observer, setObserver] = useState<IntersectionObserver>()
   let userInfo = JSON.parse(storage.getItem('user') as string)
   const msgTips = '您不是管理员或发言人，无法开启此功能！'
+  const channel = new BroadcastChannel('meeting_channel');
   useEffect(() => {
     let time: NodeJS.Timeout;
     // let getDesktopCapturerVideoTime: NodeJS.Timeout;
@@ -199,8 +200,43 @@ const Meeting: React.FC = () => {
     window.addEventListener('customStorageChange', handleCustomStorageChange);
     const container = document.getElementById('videoView') as HTMLElement;
     container.addEventListener('wheel', handleWheelChange);
+    channel.onmessage = async function (event) {
+      const { type, footerListsTitle } = event.data;
+      switch (type) {
+        case 'closeShareScreen':
+          await stopScreenCapture()
+          await allUserLook(userInfo.uid, userInfo.userName)
+          break;
+        case 'footerListsTitle':
+          switch (footerListsTitle) {
+            case '静音':
+            case '解除静音':
+              changeStatusList({
+                title: footerListsTitle
+              }, 0, 1)
+              break;
+            case '关闭视频':
+            case '开启视频':
+              changeStatusList({
+                title: footerListsTitle
+              }, 0, 2)
+              break;
+            case '录制':
+            case '录制中':
+              changeStatusList({
+                title: footerListsTitle
+              }, 1, 3)
+              break;
+          }
+          break;
+      }
+    }
     time = setInterval(() => {
       setCurrentSeconds(currentSeconds++)
+      channel.postMessage({
+        type: 'time',
+        time: changeCurrentSeconds(),
+      });
     }, 1000)
     // getDesktopCapturerVideoTime = setInterval(() => {
     //   setSharedScreenItem((i: any) => {
@@ -639,6 +675,14 @@ const Meeting: React.FC = () => {
         observerObject.observe(element);
       });
     }
+    channel.postMessage({
+      type: 'roomUserList',
+      roomUserList,
+    });
+    channel.postMessage({
+      type: 'footerList',
+      footerList,
+    });
     return () => {
       elements.forEach(element => {
         observer?.unobserve(element);
@@ -1075,12 +1119,12 @@ const Meeting: React.FC = () => {
         await allUserLook(userInfo.uid, userInfo.userName)
         break;
       case '静音':
-        await postOpenMicr(false, user.uid)
+        await postOpenMicr(false, userInfo.uid)
         break;
       case '解除静音':
         await getUserRoomInfo().then(async (res) => {
           if (res) {
-            await postOpenMicr(true, user.uid)
+            await postOpenMicr(true, userInfo.uid)
           } else {
             if (!isClicked) {
               setCurrentRequestSpeakType('audio')
@@ -1092,12 +1136,12 @@ const Meeting: React.FC = () => {
         })
         break;
       case '关闭视频':
-        await postOpenCamera(false, user.uid)
+        await postOpenCamera(false, userInfo.uid)
         break;
       case '开启视频':
         await getUserRoomInfo().then(async (res) => {
           if (res) {
-            await postOpenCamera(true, user.uid)
+            await postOpenCamera(true, userInfo.uid)
           } else {
             if (!isClicked) {
               setCurrentRequestSpeakType('video')
@@ -1259,6 +1303,12 @@ const Meeting: React.FC = () => {
       setIsSharedScreenModal(false)
       await agora.setDesktopCapturerVideo(sharedScreenItem, isComputerAudio, isFluencyPriority)
       await allUserLook(user.screenShareId, user.userName)
+      // window.electron.createChildWindow({
+      //   url: location.origin + `/#/shareScreenWindow`,
+      //   width: 540,
+      //   height: 70,
+      //   key: 'shareScreenWindow',
+      // })
     } else {
       message.error('请选择应用!')
     }
@@ -1301,6 +1351,7 @@ const Meeting: React.FC = () => {
     agora.stopScreenCapture()
     footerListTemplate[1][0].title = '共享屏幕'
     setFooterList(footerListTemplate)
+    window.electron.closeChildWindow('shareScreenWindow')
   }
   // 获取房间用户
   const getRoomUser = async (): Promise<void> => {

src/page/ShareScreenWindow/index.module.scss

@@ -24,13 +24,13 @@
       display: flex;
       flex-grow: 1;
       justify-content: space-between;
-      padding: 0 20px;
 
       >div {
         display: flex;
         flex-direction: column;
         align-items: center;
         cursor: pointer;
+        width: calc(100% / 6);
 
         >img {
           height: 24px;

src/page/ShareScreenWindow/index.tsx

@@ -1,15 +1,12 @@
+import { GetRoomUser, GetRoomUserItem } from '@/api/Meeting';
+import { role } from '@/config/role';
 import styles from '@/page/ShareScreenWindow/index.module.scss'
+import { storage } from '@/utils';
 import ImageUrl from '@/utils/package/imageUrl';
 import { Button } from 'antd';
 import { useEffect, useState } from "react";
-// window.electron.createChildWindow({
-//   url: location.origin + `/#/shareScreenWindow`,
-//   width: 500,
-//   height: 70,
-//   key: 'shareScreenWindow',
-// })
 const ShareScreenWindow: React.FC = () => {
-  const [footerList, setFooterList] = useState<any>([
+  const [footerLists, setFooterLists] = useState<any>([
     {
       title: '静音',
       icon: ImageUrl.icon22,
@@ -54,33 +51,96 @@ const ShareScreenWindow: React.FC = () => {
       select: false,
     },
   ])
+  const [time, setTime] = useState('')
+  const [roomUserLists, setRoomUserLists] = useState<any>([])
+  const channel = new BroadcastChannel('meeting_channel');
+  let userInfo = JSON.parse(storage.getItem('user') as string)
   useEffect(() => {
-
+    getRoomUser()
+    channel.onmessage = function (event) {
+      const { type, time, roomUserList, footerList } = event.data;
+      const footerListTemplate = [...footerLists];
+      switch (type) {
+        case 'time':
+          setTime(time)
+          break;
+        case 'roomUserList':
+          setRoomUserLists(roomUserList)
+          break;
+        case 'footerList':
+          footerListTemplate[0].title = footerList[0][0].active ? '解除静音' : '静音';
+          footerListTemplate[0].active = footerList[0][0].active;
+          footerListTemplate[1].title = footerList[0][1].active ? '开启视频' : '关闭视频';
+          footerListTemplate[1].active = footerList[0][1].active;
+          footerListTemplate[5].title = footerList[1][3].active ? '录制中' : '录制';
+          footerListTemplate[5].active = footerList[1][3].active;
+          setFooterLists(footerListTemplate)
+          break;
+      }
+    }
   }, []);
 
+  // 获取房间用户
+  const getRoomUser = async (): Promise<void> => {
+    const data = JSON.parse(storage.getItem('stateInfo') as string)
+    await GetRoomUserItem(data.channelId, userInfo.uid).then((res: any) => {
+      if (res.code === 200) {
+        const footerListTemplate = [...footerLists];
+        footerListTemplate[0].title = !res.data.enableMicr ? '解除静音' : '静音';
+        footerListTemplate[0].active = !res.data.enableMicr;
+        footerListTemplate[1].title = !res.data.enableCamera ? '开启视频' : '关闭视频';
+        footerListTemplate[1].active = !res.data.enableCamera;
+        setFooterLists(footerListTemplate)
+        GetRoomUser(data.channelId).then(res => {
+          if (res.code === 200) {
+            res.data.forEach((item: any) => {
+              item.isShow = true;
+              item.isRoom = true;
+              item.isAdmin = role.ID.includes(item.roleId) || item.isRoomManager
+            })
+            setRoomUserLists(res.data)
+          }
+        })
+      }
+    })
+  }
   return (
     <>
       <div className={`${styles.shareScreenWindow} drag`}>
-        <div className={styles.shareScreenWindowTitle}>02：38 共享中</div>
+        <div className={styles.shareScreenWindowTitle}>{time} 共享中</div>
         <div className={styles.shareScreenWindowContent}>
           <div className={styles.shareScreenWindowContentList}>
-            {footerList.map((item: any, index: number) => {
+            {footerLists.map((item: any, index: number) => {
               return (
                 <div
                   onClick={() => {
-                    console.log(item, index)
+                    switch (item.title) {
+                      case '静音':
+                      case '解除静音':
+                      case '关闭视频':
+                      case '开启视频':
+                      case '录制':
+                      case '录制中':
+                        channel.postMessage({
+                          type: 'footerListsTitle',
+                          footerListsTitle: item.title
+                        });
+                        break;
+                    }
                   }}
                   key={index}>
                   {item.select ? <img src={item.iconSelect} alt="" /> : <img src={item.active ? item.iconActive : item.icon} alt="" />}
-                  <span>{item.title}</span>
+                  <span>{item.title}{item.title === '成员列表' ? `(${roomUserLists.filter((item: any) => item.isRoom).length})` : ''}</span>
                 </div>
               )
             })}
           </div>
           <Button type="primary" style={{ backgroundColor: '#FF5219', marginRight: '14px' }} onClick={() => {
-
+            channel.postMessage({
+              type: 'closeShareScreen'
+            });
           }}>
-            结束会议
+            结束共享
           </Button>
         </div>
       </div>

src/render.d.ts

@@ -19,6 +19,7 @@ export interface IElectronAPI {
     setRegistry: (uuid: string) => any;
     getRegistry: () => any;
     createChildWindow: (config: any) => void;
+    closeChildWindow: (key: string) => void;
 }
 
 declare global {