yangjie #22
|
|
@ -1,16 +1,11 @@
|
||||||
import styles from '@/page/Meeting/CurrentSpeakUserWindow/index.module.scss'
|
import styles from '@/page/Meeting/CurrentSpeakUserWindow/index.module.scss'
|
||||||
import { storage } from '@/utils';
|
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
const CurrentSpeakUserWindow: React.FC = () => {
|
const CurrentSpeakUserWindow: React.FC = () => {
|
||||||
const [inputValue, setInputValue] = useState('')
|
const [inputValue, setInputValue] = useState('')
|
||||||
const [user, setUser] = useState<any>({});
|
|
||||||
const [isMeSpeack, setIsMeSpeack] = useState(false)
|
|
||||||
const channel = new BroadcastChannel('meeting_channel');
|
const channel = new BroadcastChannel('meeting_channel');
|
||||||
const userInfo = JSON.parse(storage.getItem('user') as string)
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setUser(userInfo)
|
|
||||||
channel.onmessage = function (event) {
|
channel.onmessage = function (event) {
|
||||||
const { type, currentSpeakUser, uidArr } = event.data;
|
const { type, currentSpeakUser } = event.data;
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'currentSpeakUser':
|
case 'currentSpeakUser':
|
||||||
if (currentSpeakUser.length) {
|
if (currentSpeakUser.length) {
|
||||||
|
|
@ -18,7 +13,6 @@ const CurrentSpeakUserWindow: React.FC = () => {
|
||||||
} else {
|
} else {
|
||||||
setInputValue('')
|
setInputValue('')
|
||||||
}
|
}
|
||||||
setIsMeSpeack(uidArr.find((item: any) => item === 0) === 0 ? true : false)
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -28,8 +22,8 @@ const CurrentSpeakUserWindow: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={styles.currentSpeakUserWindow}>
|
<div className={styles.currentSpeakUserWindow}>
|
||||||
<div title={`正在说话:${isMeSpeack ? user.userName + ';' : ''} ${inputValue}`}>
|
<div title={`正在说话: ${inputValue}`}>
|
||||||
{`正在说话:${isMeSpeack ? user.userName + ';' : ''} ${inputValue}`}
|
{`正在说话: ${inputValue}`}
|
||||||
</div>
|
</div>
|
||||||
</div >
|
</div >
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
|
|
@ -144,6 +144,7 @@ const Meeting: React.FC = () => {
|
||||||
rowIndex: 0,
|
rowIndex: 0,
|
||||||
});
|
});
|
||||||
const [roomUserList, setRoomUserList] = useState<any>([])
|
const [roomUserList, setRoomUserList] = useState<any>([])
|
||||||
|
const [_speackUid, setSpeackUid] = useState<any>([])
|
||||||
const [chatList, setChatList] = useState<any>([])
|
const [chatList, setChatList] = useState<any>([])
|
||||||
const [currentVideoId, setCurrentVideoId] = useState('')
|
const [currentVideoId, setCurrentVideoId] = useState('')
|
||||||
let [currentSeconds, setCurrentSeconds] = useState(0)
|
let [currentSeconds, setCurrentSeconds] = useState(0)
|
||||||
|
|
@ -359,6 +360,24 @@ const Meeting: React.FC = () => {
|
||||||
}
|
}
|
||||||
time = setInterval(() => {
|
time = setInterval(() => {
|
||||||
setCurrentSeconds(currentSeconds++)
|
setCurrentSeconds(currentSeconds++)
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
channel.postMessage({
|
||||||
|
type: 'currentSpeakUser',
|
||||||
|
currentSpeakUser: usernames,
|
||||||
|
});
|
||||||
|
return res
|
||||||
|
});
|
||||||
|
|
||||||
|
return []
|
||||||
|
})
|
||||||
}, 1000)
|
}, 1000)
|
||||||
// 首次加载图标更新
|
// 首次加载图标更新
|
||||||
const firstFooterList = [...footerList]
|
const firstFooterList = [...footerList]
|
||||||
|
|
@ -382,9 +401,13 @@ const Meeting: React.FC = () => {
|
||||||
okText: '确定',
|
okText: '确定',
|
||||||
cancelText: '取消',
|
cancelText: '取消',
|
||||||
async onOk() {
|
async onOk() {
|
||||||
changeStatusList({
|
if (stateInfo) {
|
||||||
title: '录制'
|
changeStatusList({
|
||||||
}, 1, 3)
|
title: '录制'
|
||||||
|
}, 1, 3)
|
||||||
|
} else {
|
||||||
|
message.error('当前不在会议室!')
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onCancel() {
|
onCancel() {
|
||||||
}
|
}
|
||||||
|
|
@ -916,27 +939,10 @@ const Meeting: React.FC = () => {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onAudioVolumeIndication: async (speakers: AudioVolumeInfo[]) => {
|
onAudioVolumeIndication: async (speakers: AudioVolumeInfo[]) => {
|
||||||
function checkUidsInUsers(uids: number[]): string[] {
|
|
||||||
const usernames: string[] = [];
|
|
||||||
setRoomUserList((res: any) => {
|
|
||||||
uids.forEach(uid => {
|
|
||||||
const user = res.find((item: any) => item.uid == uid);
|
|
||||||
if (user) {
|
|
||||||
usernames.push(user.userName);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return res
|
|
||||||
});
|
|
||||||
return usernames
|
|
||||||
}
|
|
||||||
if (speakers.length) {
|
if (speakers.length) {
|
||||||
const uidArr = (speakers.filter((item: any) => item.volume)).map(item => item.uid) as number[];
|
setSpeackUid((res: any) => {
|
||||||
const currentSpeakUser = checkUidsInUsers(uidArr)
|
return [...new Set([...res, ...(speakers.filter((item: any) => item.volume)).map(item => item.uid || userInfo.uid)])]
|
||||||
channel.postMessage({
|
})
|
||||||
type: 'currentSpeakUser',
|
|
||||||
currentSpeakUser,
|
|
||||||
uidArr
|
|
||||||
});
|
|
||||||
speakers.forEach((item: any) => {
|
speakers.forEach((item: any) => {
|
||||||
let domMe = document.getElementById(`micr-item-${userInfo.uid}`);
|
let domMe = document.getElementById(`micr-item-${userInfo.uid}`);
|
||||||
let dom = document.getElementById(`micr-${item.uid ? item.uid : userInfo.uid}`);
|
let dom = document.getElementById(`micr-${item.uid ? item.uid : userInfo.uid}`);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue