yangjie #47
|
|
@ -4,6 +4,7 @@ import styles from '@/page/Meeting/ShareScreenWindow/index.module.scss'
|
|||
import { storage } from '@/utils';
|
||||
import ImageUrl from '@/utils/package/imageUrl';
|
||||
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
|
||||
import { RtcStats } from 'agora-electron-sdk';
|
||||
import { Button } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { useEffect, useState } from "react";
|
||||
|
|
@ -50,6 +51,12 @@ const ShareScreenWindow: React.FC = () => {
|
|||
const [timeStr, setTimeStr] = useState(0)
|
||||
const [isExpand, setIsExpand] = useState(false)
|
||||
const [roomUserLists, setRoomUserLists] = useState<any>([])
|
||||
const [currentEffective, setCurrentEffective] = useState(3)
|
||||
const [networkOther, setNetworkOther] = useState<RtcStats>({})
|
||||
const [networkQuality, setNetworkQuality] = useState({
|
||||
level: '佳',
|
||||
text: '网络质量极好'
|
||||
})
|
||||
const channel = new BroadcastChannel('meeting_channel');
|
||||
const userInfo = JSON.parse(storage.getItem('user') as string)
|
||||
let timeout: NodeJS.Timeout;
|
||||
|
|
@ -97,6 +104,11 @@ const ShareScreenWindow: React.FC = () => {
|
|||
case 'roomUserList':
|
||||
setRoomUserLists(data.parmes.roomUserList)
|
||||
break;
|
||||
case 'nnetworkStatus':
|
||||
setCurrentEffective(data.parmes.currentEffective)
|
||||
setNetworkQuality(data.parmes.networkQuality)
|
||||
setNetworkOther(data.parmes.networkOther)
|
||||
break;
|
||||
}
|
||||
})
|
||||
return () => {
|
||||
|
|
@ -141,13 +153,19 @@ const ShareScreenWindow: React.FC = () => {
|
|||
<>
|
||||
<div className={styles.shareScreenWindow} style={{ width: isExpand ? '100%' : '100%' }}>
|
||||
<div className={styles.shareScreenWindowTitle}>
|
||||
<span>{changeCurrentSeconds(timeStr)} 共享中</span>
|
||||
{isExpand ? <span className='drag' onClick={() => {
|
||||
<span>{changeCurrentSeconds(timeStr)} 共享中
|
||||
{networkIcon(currentEffective)}
|
||||
<span style={{ color: 'white', marginLeft: '30px' }}>
|
||||
<span style={{ marginRight: '10px' }}>网络质量：{networkQuality.level}</span>
|
||||
<span>延迟：{networkOther.lastmileDelay}ms</span>
|
||||
</span>
|
||||
</span>
|
||||
{isExpand ? <span className='drag' style={{ flexShrink: 0 }} onClick={() => {
|
||||
channel.postMessage({
|
||||
type: 'shareScreenWindowClose',
|
||||
shareScreenWindowClose: timeStr
|
||||
});
|
||||
}}>结束共享</span> : <span style={{ visibility: 'hidden' }}>结束共享</span>}
|
||||
}}>结束共享</span> : <span style={{ visibility: 'hidden', flexShrink: 0 }}>结束共享</span>}
|
||||
</div>
|
||||
{isExpand ? null : <div className={`${styles.shareScreenWindowContent} drag`}>
|
||||
<div className={styles.shareScreenWindowContentList}>
|
||||
|
|
@ -217,4 +235,60 @@ const ShareScreenWindow: React.FC = () => {
|
|||
)
|
||||
}
|
||||
|
||||
const networkIcon = (network: number) => {
|
||||
switch (network) {
|
||||
case 0:
|
||||
return <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg" className='drag' style={{ transform: 'scale(0.5)', position: 'absolute', top: '-4px' }}>
|
||||
<g clip-path="url(#clip0_21262_3609)">
|
||||
<path d="M4.44094 32C3.03695 32 1.90039 31.15 1.90039 30.1V15.3C1.90039 14.25 3.03695 13.4 4.44094 13.4C5.84492 13.4 6.98149 14.25 6.98149 15.3V30.1C6.98149 31.15 5.84492 32 4.44094 32ZM17.01 32C15.606 32 14.4694 31.15 14.4694 30.1V8.9C14.4694 7.85 15.606 7 17.01 7C18.4139 7 19.5505 7.85 19.5505 8.9V30.1C19.5505 31.15 18.4139 32 17.01 32ZM29.579 32C28.175 32 27.0384 31.15 27.0384 30.1V1.9C27.0384 0.85 28.175 0 29.579 0C30.983 0 32.1195 0.85 32.1195 1.9V30.1C32.1195 31.15 30.983 32 29.579 32Z" fill="#7C8280" />
|
||||
<path d="M7.00124 2.11509L5.01758 4.09875L3.03391 2.11509C2.77629 1.85747 2.35122 1.85747 2.0936 2.11509C1.83599 2.37271 1.83599 2.79778 2.0936 3.0554L4.07727 5.03906L2.0936 7.02273C1.83599 7.28035 1.83599 7.70542 2.0936 7.96304C2.35122 8.22065 2.77629 8.22065 3.03391 7.96304L5.01758 5.97937L7.00124 7.96304C7.25886 8.22065 7.68393 8.22065 7.94155 7.96304C8.19917 7.70542 8.19917 7.28035 7.94155 7.02273L5.95789 5.03906L7.94155 3.0554C8.19917 2.79778 8.19917 2.37271 7.94155 2.11509C7.68393 1.85747 7.25886 1.85747 7.00124 2.11509Z" fill="#F90000" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_21262_3609">
|
||||
<rect width="32" height="32" fill="white" transform="translate(0.119141)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
case 1:
|
||||
return <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg" className='drag' style={{ transform: 'scale(0.5)', position: 'absolute', top: '-4px' }}>
|
||||
<g clip-path="url(#clip0_21262_3615)">
|
||||
<path d="M26.9316 30.1C26.9316 31.15 28.0918 32 29.5249 32C30.9581 32 32.1182 31.15 32.1182 30.1V1.9C32.1182 0.85 30.9581 0 29.5249 0C28.0918 0 26.9316 0.85 26.9316 1.9V30.1Z" fill="#7C8280" />
|
||||
<path d="M14.1035 30.1C14.1035 31.15 15.2637 32 16.6968 32C18.1299 32 19.2901 31.15 19.2901 30.1V8.9C19.2901 7.85 18.1299 7 16.6968 7C15.2637 7 14.1035 7.85 14.1035 8.9V30.1Z" fill="#7C8280" />
|
||||
<path d="M1.27344 30.1004C1.27344 31.1504 2.4336 32.0004 3.86673 32.0004C5.29986 32.0004 6.46002 31.1504 6.46002 30.1004V15.3004C6.46002 14.2504 5.29986 13.4004 3.86673 13.4004C2.4336 13.4004 1.27344 14.2504 1.27344 15.3004V30.1004Z" fill="#FF800B" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_21262_3615">
|
||||
<rect width="32" height="32" fill="white" transform="translate(0.119141)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
case 2:
|
||||
return <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg" className='drag' style={{ transform: 'scale(0.5)', position: 'absolute', top: '-4px' }}>
|
||||
<g clip-path="url(#clip0_21262_3621)">
|
||||
<path d="M26.9316 30.1C26.9316 31.15 28.0918 32 29.5249 32C30.9581 32 32.1182 31.15 32.1182 30.1V1.9C32.1182 0.85 30.9581 0 29.5249 0C28.0918 0 26.9316 0.85 26.9316 1.9V30.1Z" fill="#7C8280" />
|
||||
<path d="M14.1035 30.1C14.1035 31.15 15.2637 32 16.6968 32C18.1299 32 19.2901 31.15 19.2901 30.1V8.9C19.2901 7.85 18.1299 7 16.6968 7C15.2637 7 14.1035 7.85 14.1035 8.9V30.1Z" fill="#FF800B" />
|
||||
<path d="M1.27344 30.1004C1.27344 31.1504 2.4336 32.0004 3.86673 32.0004C5.29986 32.0004 6.46002 31.1504 6.46002 30.1004V15.3004C6.46002 14.2504 5.29986 13.4004 3.86673 13.4004C2.4336 13.4004 1.27344 14.2504 1.27344 15.3004V30.1004Z" fill="#FF800B" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_21262_3621">
|
||||
<rect width="32" height="32" fill="white" transform="translate(0.119141)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
case 3:
|
||||
return <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg" className='drag' style={{ transform: 'scale(0.5)', position: 'absolute', top: '-4px' }}>
|
||||
<g clip-path="url(#clip0_21262_3625)">
|
||||
<path d="M26.9316 30.1C26.9316 31.15 28.0918 32 29.5249 32C30.9581 32 32.1182 31.15 32.1182 30.1V1.9C32.1182 0.85 30.9581 0 29.5249 0C28.0918 0 26.9316 0.85 26.9316 1.9V30.1Z" fill="#02B188" />
|
||||
<path d="M14.1035 30.1C14.1035 31.15 15.2637 32 16.6968 32C18.1299 32 19.2901 31.15 19.2901 30.1V8.9C19.2901 7.85 18.1299 7 16.6968 7C15.2637 7 14.1035 7.85 14.1035 8.9V30.1Z" fill="#02B188" />
|
||||
<path d="M1.27344 30.1004C1.27344 31.1504 2.4336 32.0004 3.86673 32.0004C5.29986 32.0004 6.46002 31.1504 6.46002 30.1004V15.3004C6.46002 14.2504 5.29986 13.4004 3.86673 13.4004C2.4336 13.4004 1.27344 14.2504 1.27344 15.3004V30.1004Z" fill="#02B188" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_21262_3625">
|
||||
<rect width="32" height="32" fill="white" transform="translate(0.119141)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
}
|
||||
}
|
||||
|
||||
export default ShareScreenWindow
|
||||
|
|
|
|||
|
|
@ -530,6 +530,20 @@ const Meeting: React.FC = () => {
|
|||
text: '网络质量极好'
|
||||
})
|
||||
setCurrentEffective(3)
|
||||
window.electron.windowHandleMessage({
|
||||
key: 'shareScreenWindow',
|
||||
parmes: {
|
||||
currentEffective: 3,
|
||||
networkQuality: {
|
||||
level: '佳',
|
||||
text: '网络质量极好'
|
||||
},
|
||||
networkOther: {
|
||||
lastmileDelay: data.lastmileDelay
|
||||
},
|
||||
type: 'nnetworkStatus'
|
||||
}
|
||||
})
|
||||
} else if (data.lastmileDelay > 500) {
|
||||
setNetworkQuality({
|
||||
level: '非常差',
|
||||
|
|
@ -537,6 +551,20 @@ const Meeting: React.FC = () => {
|
|||
})
|
||||
setIsNetworkQuality(true)
|
||||
setCurrentEffective(1)
|
||||
window.electron.windowHandleMessage({
|
||||
key: 'shareScreenWindow',
|
||||
parmes: {
|
||||
currentEffective: 1,
|
||||
networkQuality: {
|
||||
level: '非常差',
|
||||
text: '完全无法沟通'
|
||||
},
|
||||
networkOther: {
|
||||
lastmileDelay: data.lastmileDelay
|
||||
},
|
||||
type: 'nnetworkStatus'
|
||||
}
|
||||
})
|
||||
} else if (data.lastmileDelay < 500 && data.lastmileDelay > 100) {
|
||||
setNetworkQuality({
|
||||
level: '差',
|
||||
|
|
@ -544,6 +572,20 @@ const Meeting: React.FC = () => {
|
|||
})
|
||||
setIsNetworkQuality(true)
|
||||
setCurrentEffective(2)
|
||||
window.electron.windowHandleMessage({
|
||||
key: 'shareScreenWindow',
|
||||
parmes: {
|
||||
currentEffective: 2,
|
||||
networkQuality: {
|
||||
level: '差',
|
||||
text: '勉强能沟通但不顺畅'
|
||||
},
|
||||
networkOther: {
|
||||
lastmileDelay: data.lastmileDelay
|
||||
},
|
||||
type: 'nnetworkStatus'
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
setNetworkQuality({
|
||||
|
|
@ -551,6 +593,21 @@ const Meeting: React.FC = () => {
|
|||
text: '网络连接断开'
|
||||
})
|
||||
setCurrentEffective(0)
|
||||
window.electron.windowHandleMessage({
|
||||
key: 'shareScreenWindow',
|
||||
parmes: {
|
||||
currentEffective: 0,
|
||||
networkQuality: {
|
||||
level: '断开连接',
|
||||
text: '网络连接断开'
|
||||
},
|
||||
networkOther: {
|
||||
lastmileDelay: data.lastmileDelay
|
||||
},
|
||||
type: 'nnetworkStatus'
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}, [networkOther]);
|
||||
|
|
|
|||
Loading…
Reference in New Issue