45 lines
1021 B
TypeScript
45 lines
1021 B
TypeScript
import React from 'react';
|
|
import { Box, CircularProgress, Typography } from '@mui/material';
|
|
|
|
interface WebRTCStatusProps {
|
|
isNegotiating: boolean;
|
|
connectionState?: string;
|
|
}
|
|
|
|
const WebRTCStatus: React.FC<WebRTCStatusProps> = ({
|
|
isNegotiating,
|
|
connectionState
|
|
}) => {
|
|
if (!isNegotiating && connectionState !== 'connecting') {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
className="webrtc-status"
|
|
sx={{
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
gap: 1,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
|
color: 'white',
|
|
padding: 2,
|
|
borderRadius: 2,
|
|
zIndex: 10
|
|
}}
|
|
>
|
|
<CircularProgress size={24} color="inherit" />
|
|
<Typography variant="caption">
|
|
{isNegotiating ? 'Negotiating WebRTC...' : 'Connecting...'}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default WebRTCStatus;
|