diff --git a/main.js b/main.js index 446d0ae..7079b02 100644 --- a/main.js +++ b/main.js @@ -334,7 +334,7 @@ app.on('ready', () => { ipcMain.handle('closeChildWindow', (event, key) => { if (key === 'shareScreenWindow') { for (const k in childWindow) { - if (childWindow[k]){ + if (childWindow[k]) { childWindow[k].close() childWindow[k] = "" } @@ -424,12 +424,20 @@ function quitAndInstall() { function windowOperation(config) { const child = childWindow[config.key]; + const display = screen.getDisplayMatching({ ...child.getBounds() }); + const { width, height } = display.size + let x, y; child.setResizable(false) - 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); - mainWindowHide() + switch (config.key) { + case 'shareScreenWindow': + x = Math.round((display.workArea.width - child.getSize()[0]) / 2); + child.setPosition(x, 0); + mainWindowHide() + break; + case 'chatSmallWindow': + y = height - child.getSize()[1]; + child.setPosition(40, y - 200); + break; } } // 主窗口居中 diff --git a/src/App.tsx b/src/App.tsx index 8cdedbe..1066a1d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -20,6 +20,7 @@ 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"; const fs = require('fs').promises; const { exec } = require('child_process'); const App: React.FC = () => { @@ -34,7 +35,7 @@ const App: React.FC = () => { }); const [spinning, setSpinning] = useState(false); const [isState, setIsState] = useState(true); - const urlHashArr = ['#/userListWindow', '#/shareScreenWindow'] + const urlHashArr = ['#/userListWindow', '#/shareScreenWindow', '#/chatSmallWindow'] if (urlHashArr.indexOf(location.hash) == -1) { useEffect(() => { let userInfo = JSON.parse(storage.getItem('user') as string) @@ -249,6 +250,7 @@ const App: React.FC = () => { } /> } /> } /> + } /> } /> diff --git a/src/page/Meeting/ChatSmallWindow/index.module.scss b/src/page/Meeting/ChatSmallWindow/index.module.scss new file mode 100644 index 0000000..dc71b19 --- /dev/null +++ b/src/page/Meeting/ChatSmallWindow/index.module.scss @@ -0,0 +1,80 @@ +.chatSmallWindow { + color: white; + width: 100%; + display: flex; + flex-direction: column; + height: 100%; + + >div:nth-child(1) { + flex-grow: 1; + overflow-y: hidden; + height: 80%; + padding: 4px; + box-sizing: border-box; + overflow-y: auto; + + .chatSmallWindowContentLeft { + display: flex; + flex-direction: column; + align-items: flex-start; + + >div:nth-child(1) { + display: flex; + align-items: center; + + >span { + font-size: 14px; + color: black; + margin-left: 4px; + } + + >div {} + } + + >div:nth-child(2) { + background-color: #5575F2; + color: #F3F3F5; + padding: 4px; + box-sizing: border-box; + border-radius: 0 15px 15px 15px; + margin: 0 0 10px 40px; + font-size: 12px; + } + } + + .chatSmallWindowContentRight { + display: flex; + flex-direction: column; + align-items: flex-end; + + >div:nth-child(1) { + display: flex; + align-items: center; + flex-direction: row-reverse; + + >span { + font-size: 14px; + color: black; + } + + >div { + margin-left: 4px; + } + } + + >div:nth-child(2) { + background-color: #464E6B; + color: #F3F3F5; + padding: 4px; + box-sizing: border-box; + border-radius: 15px 0 15px 15px; + margin: 0 40px 10px 0; + font-size: 14px; + } + } + } + + >div:nth-child(2) { + flex-shrink: 0; + } +} \ No newline at end of file diff --git a/src/page/Meeting/ChatSmallWindow/index.tsx b/src/page/Meeting/ChatSmallWindow/index.tsx new file mode 100644 index 0000000..13e1c16 --- /dev/null +++ b/src/page/Meeting/ChatSmallWindow/index.tsx @@ -0,0 +1,84 @@ +import styles from '@/page/Meeting/ChatSmallWindow/index.module.scss' +import { Input } from 'antd'; +import { useEffect, useState } from "react"; +import Avatar from '@/components/Avatar'; +import { storage } from '@/utils'; +const ChatSmallWindow: React.FC = () => { + const [inputValue, setInputValue] = useState('') + const [chatLists, setChatLists] = useState([]) + const userInfo = JSON.parse(storage.getItem('user') as string) + const channel = new BroadcastChannel('meeting_channel'); + useEffect(() => { + channel.onmessage = function (event) { + const { type, chatList } = event.data; + switch (type) { + case 'chatList': + setChatLists(chatList) + const chatSmallWindowView = document.getElementById('chatSmallWindowView') as HTMLElement; + if (chatSmallWindowView) { + chatSmallWindowView.scrollTop = chatSmallWindowView.scrollHeight; + } + break; + } + } + }, []); + + + return ( + <> +
+
+ {chatLists.map((item: any) => +
+
+
+ {item.userName} +
+
{item.message}
+
+ )} +
+
+ { + setInputValue(e.target.value) + }} + onPressEnter={() => { + if (inputValue) { + channel.postMessage({ + type: 'chatSmallWindowSendChannelMsg', + chatSmallWindowSendChannelMsg: { + msg: inputValue, + } + }); + setInputValue('') + } + }} + suffix={ + { + if (inputValue) { + channel.postMessage({ + type: 'chatSmallWindowSendChannelMsg', + chatSmallWindowSendChannelMsg: { + msg: inputValue, + } + }); + setInputValue('') + } + }} + >发送 + + } + /> +
+
+ + ) +} + +export default ChatSmallWindow diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 56bbaec..345fab2 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -195,6 +195,7 @@ const Meeting: React.FC = () => { window.electron.setViewStatus('maximize') } }) + setKeyOpenChildWindow('shareScreenWindow', false) setMeetingMode('StandardMode'); agoraInit() storage.setItem('noViewChatList', 0) @@ -210,7 +211,8 @@ const Meeting: React.FC = () => { userListWindowDeleteRoomManager, userListWindowPostRoomManager, userListWindowGetRoomKickout, - shareScreenWindowEquipmentManagement + shareScreenWindowEquipmentManagement, + chatSmallWindowSendChannelMsg } = event.data; switch (type) { case 'shareScreenWindowClose': @@ -273,6 +275,9 @@ const Meeting: React.FC = () => { equipmentManagement(shareScreenWindowEquipmentManagement.uid, shareScreenWindowEquipmentManagement.userName) window.electron.mainWindowCenter() break; + case 'chatSmallWindowSendChannelMsg': + sendMsg(chatSmallWindowSendChannelMsg.msg) + break; } } time = setInterval(() => { @@ -342,6 +347,15 @@ const Meeting: React.FC = () => { } }, [currentEffective]); + useEffect(() => { + if (chatList.length) { + channel.postMessage({ + type: 'chatList', + chatList, + }); + } + }, [chatList]); + useEffect(() => { let currentVideoUserItem = roomUserList.find((item: any) => item.uid === currentVideoId || item.screenShareId === currentVideoId) if (currentVideoUserItem) { @@ -1355,6 +1369,12 @@ const Meeting: React.FC = () => { height: 70, key: 'shareScreenWindow', }) + window.electron.createChildWindow({ + url: location.origin + `/#/chatSmallWindow`, + width: 200, + height: 300, + key: 'chatSmallWindow', + }) setKeyOpenChildWindow('shareScreenWindow', true) } } else { @@ -1458,8 +1478,8 @@ const Meeting: React.FC = () => { msg: msg, }) setChatList((newChatList: any) => [...newChatList, { - uid: user.uid, - userName: user.userName, + uid: userInfo.uid, + userName: userInfo.userName, message: msg, timestamp: +new Date() }])