| | |
| | | |
| | | const [mode, setMode] = useState('monitoring'); |
| | | |
| | | const [windowSize, setWindowSize] = React.useState({ |
| | | width: window.innerWidth, |
| | | height: window.innerHeight, |
| | | }); |
| | | |
| | | const theme = useTheme(); |
| | | const themeMode = theme.palette.mode; |
| | | |
| | |
| | | } |
| | | initialize(); |
| | | |
| | | // windows resize |
| | | // resize |
| | | const handleResize = () => { |
| | | setWindowSize({ |
| | | width: window.innerWidth, |
| | | height: window.innerHeight, |
| | | }); |
| | | player.resize(); |
| | | const width = contentRef.current.offsetWidth; |
| | | const height = contentRef.current.offsetHeight; |
| | | |
| | | player.resize(width, height); |
| | | }; |
| | | window.addEventListener('resize', handleResize); |
| | | |
| | |
| | | } |
| | | }; |
| | | }, [themeMode]) |
| | | |
| | | |
| | | const handleModeChange = (event) => { |
| | | setMode(event.target.value); |
| | |
| | | <Box |
| | | ref={contentRef} |
| | | sx={{ |
| | | position: 'relative', |
| | | width: '100%', |
| | | height: '100%', |
| | | backgroundColor: '#e0e0e0', |
| | | }} |
| | | > |
| | | <div ref={mapRef} style={{ |
| | | position: 'absolute', |
| | | top: 0, |
| | | left: 0, |
| | | width: '100%', |
| | | height: '100%', |
| | | }} /> |