Function RdpViewer

frontend/src/components/RdpViewer.jsx:354–858

({ host, isOpen })

);

const RdpViewer = ({ host, isOpen }) => {
	const displayRef = useRef(null);
	const clientRef = useRef(null);
	const tunnelRef = useRef(null);
	const mouseRef = useRef(null);
	const keyboardRef = useRef(null);
	const resizeObserverRef = useRef(null);
	const pasteHandlerRef = useRef(null);

	const [isConnecting, setIsConnecting] = useState(false);
	const [isConnected, setIsConnected] = useState(false);
	const [error, setError] = useState(null); // { code, message } | null
	const [isFullscreen, setIsFullscreen] = useState(false);
	const [requirementsOpen, setRequirementsOpen] = useState(false);
	const [credentials, setCredentials] = useState({
		username: "",
		password: "",
	});

	const clearCredentials = useCallback(() => {
		setCredentials({
			username: "",
			password: "",
		});
	}, []);

	/** Scale the Guacamole display to fit the container */
	const scaleDisplay = useCallback(() => {
		const client = clientRef.current;
		const container = displayRef.current;
		if (!client || !container) return;

		const display = client.getDisplay();
		const displayWidth = display.getWidth();
		const displayHeight = display.getHeight();
		if (!displayWidth || !displayHeight) return;

		const containerWidth = container.offsetWidth;
		const containerHeight = container.offsetHeight;
		const scale = Math.min(
			containerWidth / displayWidth,
			containerHeight / displayHeight,
		);

		display.scale(scale);
	}, []);

	const disconnect = useCallback(
		(options = {}) => {
			if (pasteHandlerRef.current && displayRef.current) {
				displayRef.current.removeEventListener(
					"paste",
					pasteHandlerRef.current,
				);
				pasteHandlerRef.current = null;
			}
			if (resizeObserverRef.current) {
				resizeObserverRef.current.disconnect();