You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.2 KiB
97 lines
2.2 KiB
import RFB from '@novnc/novnc/core/rfb'; |
|
import { useEffect } from 'react'; |
|
|
|
const rfbConnect: RfbConnectFunction = ({ |
|
background = '', |
|
clipViewport = false, |
|
compressionLevel = 2, |
|
dragViewport = false, |
|
focusOnClick = false, |
|
onConnect, |
|
onDisconnect, |
|
qualityLevel = 6, |
|
resizeSession = true, |
|
rfb, |
|
rfbScreen, |
|
scaleViewport = true, |
|
showDotCursor = false, |
|
url, |
|
viewOnly = false, |
|
}) => { |
|
if (!rfbScreen?.current || rfb?.current) return; |
|
|
|
rfbScreen.current.innerHTML = ''; |
|
|
|
rfb.current = new RFB(rfbScreen.current, url); |
|
|
|
rfb.current.background = background; |
|
rfb.current.clipViewport = clipViewport; |
|
rfb.current.compressionLevel = compressionLevel; |
|
rfb.current.dragViewport = dragViewport; |
|
rfb.current.focusOnClick = focusOnClick; |
|
rfb.current.qualityLevel = qualityLevel; |
|
rfb.current.resizeSession = resizeSession; |
|
rfb.current.scaleViewport = scaleViewport; |
|
rfb.current.showDotCursor = showDotCursor; |
|
rfb.current.viewOnly = viewOnly; |
|
|
|
// RFB extends custom class EventTargetMixin; |
|
// the usual .on or .once doesn't exist. |
|
|
|
if (onConnect) { |
|
rfb.current.addEventListener('connect', onConnect); |
|
} |
|
|
|
if (onDisconnect) { |
|
rfb.current.addEventListener('disconnect', onDisconnect); |
|
} |
|
}; |
|
|
|
const rfbDisconnect: RfbDisconnectFunction = (rfb) => { |
|
if (!rfb?.current) return; |
|
|
|
rfb.current.disconnect(); |
|
rfb.current = null; |
|
}; |
|
|
|
const VncDisplay = (props: VncDisplayProps): JSX.Element => { |
|
const { rfb, rfbConnectPartialArgs, rfbScreen } = props; |
|
|
|
useEffect(() => { |
|
if (rfbConnectPartialArgs) { |
|
rfbConnect({ rfb, rfbScreen, ...rfbConnectPartialArgs }); |
|
} else { |
|
rfbDisconnect(rfb); |
|
} |
|
}, [rfb, rfbConnectPartialArgs, rfbScreen]); |
|
|
|
useEffect( |
|
() => () => { |
|
rfbDisconnect(rfb); |
|
}, |
|
[rfb], |
|
); |
|
|
|
const handleMouseEnter = () => { |
|
if ( |
|
document.activeElement && |
|
document.activeElement instanceof HTMLElement |
|
) { |
|
document.activeElement.blur(); |
|
} |
|
|
|
if (rfb?.current) rfb.current.focus(); |
|
}; |
|
|
|
return ( |
|
<div |
|
style={{ width: '100%', height: '75vh' }} |
|
ref={rfbScreen} |
|
onMouseEnter={handleMouseEnter} |
|
/> |
|
); |
|
}; |
|
|
|
VncDisplay.displayName = 'VncDisplay'; |
|
|
|
export default VncDisplay;
|
|
|