diff --git a/src/assets/icon24-select.png b/src/assets/icon24-select.png new file mode 100644 index 0000000..9e1f872 Binary files /dev/null and b/src/assets/icon24-select.png differ diff --git a/src/assets/icon25-select.png b/src/assets/icon25-select.png new file mode 100644 index 0000000..7dbe63e Binary files /dev/null and b/src/assets/icon25-select.png differ diff --git a/src/assets/icon26-select.png b/src/assets/icon26-select.png new file mode 100644 index 0000000..2293f1c Binary files /dev/null and b/src/assets/icon26-select.png differ diff --git a/src/assets/icon27-select.png b/src/assets/icon27-select.png new file mode 100644 index 0000000..1e98f49 Binary files /dev/null and b/src/assets/icon27-select.png differ diff --git a/src/assets/icon28-select.png b/src/assets/icon28-select.png new file mode 100644 index 0000000..6b8b49f Binary files /dev/null and b/src/assets/icon28-select.png differ diff --git a/src/assets/icon29-select.png b/src/assets/icon29-select.png new file mode 100644 index 0000000..47a3f6f Binary files /dev/null and b/src/assets/icon29-select.png differ diff --git a/src/assets/icon30-select.png b/src/assets/icon30-select.png new file mode 100644 index 0000000..e1feb14 Binary files /dev/null and b/src/assets/icon30-select.png differ diff --git a/src/assets/icon31-select.png b/src/assets/icon31-select.png new file mode 100644 index 0000000..19b7c67 Binary files /dev/null and b/src/assets/icon31-select.png differ diff --git a/src/assets/icon48-select.png b/src/assets/icon48-select.png new file mode 100644 index 0000000..cc03429 Binary files /dev/null and b/src/assets/icon48-select.png differ diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index a78189f..08666bf 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -39,75 +39,96 @@ const Meeting: React.FC = () => { const [sharedScreenList, setSharedScreenList] = useState([]); const [sharedScreenItem, setSharedScreenItem] = useState(''); const [textMsg, setTextMsg] = useState(''); - const [footerList, setFooterList] = useState([ + const [footerList, setFooterList] = useState([ [ { title: '静音', icon: ImageUrl.icon22, iconActive: ImageUrl.icon22Active, active: false, + select: false, }, { title: '关闭视频', icon: ImageUrl.icon23, iconActive: ImageUrl.icon23Active, active: false, + select: false, }, { title: '申请发言', icon: ImageUrl.icon47, iconActive: ImageUrl.icon47Active, active: false, + select: false, }, ], [ { title: '共享屏幕', icon: ImageUrl.icon24, + iconSelect: ImageUrl.icon24Select, active: false, + select: false, }, { title: '共享文件', icon: ImageUrl.icon25, + iconSelect: ImageUrl.icon25Select, active: false, + select: false, }, { title: '邀请人员', icon: ImageUrl.icon26, + iconSelect: ImageUrl.icon26Select, active: false, + select: false, }, { title: '会议监控', icon: ImageUrl.icon48, + iconSelect: ImageUrl.icon48Select, active: false, + select: false, }, { title: '录制', icon: ImageUrl.icon27, + iconSelect: ImageUrl.icon27Select, iconActive: ImageUrl.icon27Active, active: false, + select: false, }, { title: '设置', icon: ImageUrl.icon28, + iconSelect: ImageUrl.icon28Select, active: false, + select: false, }, { title: '结束', icon: ImageUrl.icon29, + iconSelect: ImageUrl.icon29Select, active: false, + select: false, }, ], [ { title: '成员列表', icon: ImageUrl.icon30, + iconSelect: ImageUrl.icon30Select, active: false, + select: false, }, { title: '聊天', icon: ImageUrl.icon31, + iconSelect: ImageUrl.icon31Select, active: false, + select: false, }, ], ]) @@ -754,6 +775,15 @@ const Meeting: React.FC = () => { const secondsRemaining = duration.seconds(); // 剩余的秒数 return `${hours > 9 ? hours : '0' + hours}:${minutes > 9 ? minutes : '0' + minutes}:${secondsRemaining > 9 ? secondsRemaining : '0' + secondsRemaining}` } + + const changeFooterListSelect = (row: any, itemIndex: number, rowIndex: number, bool: boolean): void => { + let arr = ['静音', '解除静音', '关闭视频', '开启视频'] + if (arr.indexOf(row.title) === -1) { + const footerListTemplate = [...footerList] + footerListTemplate[itemIndex][rowIndex].select = bool; + setFooterList(footerListTemplate) + } + } // 操作按钮 const changeStatusList = async (row: any, itemIndex: number, rowIndex: number): Promise => { const footerListTemplate = [...footerList] @@ -823,40 +853,40 @@ const Meeting: React.FC = () => { }) break; case '录制': - window.electron.getSources().then((sources: any) => { - const screenId = sources[0].id; - navigator.mediaDevices.getUserMedia({ - audio: { - mandatory: { - chromeMediaSource: 'desktop', - chromeMediaSourceId: screenId, - } - } as any, - video: { - mandatory: { - chromeMediaSource: 'desktop', - chromeMediaSourceId: screenId, - } - } as any - }).then(async (steam) => { - try { - const audioTracks = await navigator.mediaDevices - .getUserMedia({ audio: true, video: false }) - .then(audioStream => audioStream.getAudioTracks()[0]); - steam.addTrack(audioTracks); - } catch (error) { - - } - setMediaStream(steam) - setRecorder(new MediaRecorder(steam)) - }) - }) const setting = await JSON.parse(storage.getItem('setting') as string) try { await fs.access(setting.recordingFilesPath, fs.constants.F_OK) footerListTemplate[itemIndex][rowIndex].title = '录制中' footerListTemplate[itemIndex][rowIndex].active = true setFooterList(footerListTemplate) + window.electron.getSources().then((sources: any) => { + const screenId = sources[0].id; + navigator.mediaDevices.getUserMedia({ + audio: { + mandatory: { + chromeMediaSource: 'desktop', + chromeMediaSourceId: screenId, + } + } as any, + video: { + mandatory: { + chromeMediaSource: 'desktop', + chromeMediaSourceId: screenId, + } + } as any + }).then(async (steam) => { + try { + const audioTracks = await navigator.mediaDevices + .getUserMedia({ audio: true, video: false }) + .then(audioStream => audioStream.getAudioTracks()[0]); + steam.addTrack(audioTracks); + } catch (error) { + + } + setMediaStream(steam) + setRecorder(new MediaRecorder(steam)) + }) + }) } catch (error: any) { if (error.code === 'ENOENT') { message.error('文件夹不存在!') @@ -1723,10 +1753,10 @@ const Meeting: React.FC = () => { }
- {footerList.map((item, itemIndex) => { + {footerList.map((item: any, itemIndex: number) => { return (
- {item.map((row, rowIndex) => { + {item.map((row: any, rowIndex: number) => { switch (row.title) { case '结束': return { open={open} onOpenChange={() => setOpen(true)} > -
- +
changeFooterListSelect(row, itemIndex, rowIndex, true)} + onMouseUp={() => changeFooterListSelect(row, itemIndex, rowIndex, false)} + onMouseLeave={() => changeFooterListSelect(row, itemIndex, rowIndex, false)} + > + {row.select ? : } {row.title}
@@ -1797,17 +1832,40 @@ const Meeting: React.FC = () => { return null case '会议监控': if (user.roleId === '1') { - return
changeStatusList(row, itemIndex, rowIndex)} key={rowIndex}> - + return
changeStatusList(row, itemIndex, rowIndex)} + onMouseDown={() => changeFooterListSelect(row, itemIndex, rowIndex, true)} + onMouseUp={() => changeFooterListSelect(row, itemIndex, rowIndex, false)} + onMouseLeave={() => changeFooterListSelect(row, itemIndex, rowIndex, false)} + key={rowIndex}> + {row.select ? : } {row.title}
} return null - default: - return
changeStatusList(row, itemIndex, rowIndex)} key={rowIndex}> - + case '成员列表': + return
changeStatusList(row, itemIndex, rowIndex)} + onMouseDown={() => changeFooterListSelect(row, itemIndex, rowIndex, true)} + onMouseUp={() => changeFooterListSelect(row, itemIndex, rowIndex, false)} + onMouseLeave={() => changeFooterListSelect(row, itemIndex, rowIndex, false)} + key={rowIndex}> + {statusList.userList ? : row.select ? : } {row.title} {row.title === '成员列表' ?
{roomUserList.filter((item: any) => item.isRoom).length}
: null} +
+ case '聊天': + return
changeStatusList(row, itemIndex, rowIndex)} + onMouseDown={() => changeFooterListSelect(row, itemIndex, rowIndex, true)} + onMouseUp={() => changeFooterListSelect(row, itemIndex, rowIndex, false)} + onMouseLeave={() => changeFooterListSelect(row, itemIndex, rowIndex, false)} + key={rowIndex}> + {statusList.userChatList ? : row.select ? : } + {row.title} {row.title === '聊天' && noViewChatList > 0 ?
{ }} >{noViewChatList}
: null}
+ default: + return
changeStatusList(row, itemIndex, rowIndex)} + onMouseDown={() => changeFooterListSelect(row, itemIndex, rowIndex, true)} + onMouseUp={() => changeFooterListSelect(row, itemIndex, rowIndex, false)} + onMouseLeave={() => changeFooterListSelect(row, itemIndex, rowIndex, false)} + key={rowIndex}> + {row.select ? : } + {row.title} +
} })}
diff --git a/src/utils/package/imageUrl.ts b/src/utils/package/imageUrl.ts index 1fbb2cf..0b0d3a4 100644 --- a/src/utils/package/imageUrl.ts +++ b/src/utils/package/imageUrl.ts @@ -30,14 +30,22 @@ import icon22Active from '@/assets/icon22-active.png' import icon23 from '@/assets/icon23.png' import icon23Active from '@/assets/icon23-active.png' import icon24 from '@/assets/icon24.png' +import icon24Select from '@/assets/icon24-select.png' import icon25 from '@/assets/icon25.png' +import icon25Select from '@/assets/icon25-select.png' import icon26 from '@/assets/icon26.png' +import icon26Select from '@/assets/icon26-select.png' import icon27 from '@/assets/icon27.png' import icon27Active from '@/assets/icon27-active.png' +import icon27Select from '@/assets/icon27-select.png' import icon28 from '@/assets/icon28.png' +import icon28Select from '@/assets/icon28-select.png' import icon29 from '@/assets/icon29.png' +import icon29Select from '@/assets/icon29-select.png' import icon30 from '@/assets/icon30.png' +import icon30Select from '@/assets/icon30-select.png' import icon31 from '@/assets/icon31.png' +import icon31Select from '@/assets/icon31-select.png' import icon32 from '@/assets/icon32.png' import icon33 from '@/assets/icon33.png' import icon34 from '@/assets/icon34.png' @@ -61,6 +69,7 @@ import icon46 from '@/assets/icon46.png' import icon47 from '@/assets/icon47.png' import icon47Active from '@/assets/icon47-active.png' import icon48 from '@/assets/icon48.png' +import icon48Select from '@/assets/icon48-select.png' export default { error, icon, @@ -94,14 +103,22 @@ export default { icon23, icon23Active, icon24, + icon24Select, icon25, + icon25Select, icon26, + icon26Select, icon27, icon27Active, + icon27Select, icon28, + icon28Select, icon29, + icon29Select, icon30, + icon30Select, icon31, + icon31Select, icon32, icon33, icon34, @@ -125,4 +142,5 @@ export default { icon47, icon47Active, icon48, + icon48Select } \ No newline at end of file