mirror of https://github.com/jetkvm/kvm.git
1156 lines
40 KiB
TypeScript
1156 lines
40 KiB
TypeScript
import { lazy, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import {
|
|
Outlet,
|
|
redirect,
|
|
useLoaderData,
|
|
useLocation,
|
|
useNavigate,
|
|
useOutlet,
|
|
useParams,
|
|
useSearchParams,
|
|
} from "react-router";
|
|
import type { LoaderFunction, LoaderFunctionArgs, Params } from "react-router";
|
|
import { useInterval } from "usehooks-ts";
|
|
import { FocusTrap } from "focus-trap-react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import useWebSocket from "react-use-websocket";
|
|
|
|
import { CLOUD_API, DEVICE_API } from "@/ui.config";
|
|
import api from "@/api";
|
|
import { checkAuth, isInCloud, isOnDevice } from "@/main";
|
|
import { usePermissions, Permission } from "@/hooks/usePermissions";
|
|
import { cx } from "@/cva.config";
|
|
import {
|
|
KeyboardLedState,
|
|
KeysDownState,
|
|
NetworkState,
|
|
OtaState,
|
|
USBStates,
|
|
useHidStore,
|
|
useNetworkStateStore,
|
|
User,
|
|
useRTCStore,
|
|
useSettingsStore,
|
|
useUiStore,
|
|
useUpdateStore,
|
|
useVideoStore,
|
|
VideoState,
|
|
} from "@/hooks/stores";
|
|
import WebRTCVideo from "@components/WebRTCVideo";
|
|
import UnifiedSessionRequestDialog from "@components/UnifiedSessionRequestDialog";
|
|
import NicknameModal from "@components/NicknameModal";
|
|
import AccessDeniedOverlay from "@components/AccessDeniedOverlay";
|
|
import PendingApprovalOverlay from "@components/PendingApprovalOverlay";
|
|
import DashboardNavbar from "@components/Header";
|
|
const ConnectionStatsSidebar = lazy(() => import('@/components/sidebar/connectionStats'));
|
|
const Terminal = lazy(() => import('@components/Terminal'));
|
|
const UpdateInProgressStatusCard = lazy(() => import("@/components/UpdateInProgressStatusCard"));
|
|
import Modal from "@/components/Modal";
|
|
import { JsonRpcRequest, JsonRpcResponse, RpcMethodNotFound, useJsonRpc } from "@/hooks/useJsonRpc";
|
|
import {
|
|
ConnectionFailedOverlay,
|
|
LoadingConnectionOverlay,
|
|
PeerConnectionDisconnectedOverlay,
|
|
} from "@/components/VideoOverlay";
|
|
import { useDeviceUiNavigation } from "@/hooks/useAppNavigation";
|
|
import { FeatureFlagProvider } from "@/providers/FeatureFlagProvider";
|
|
import { DeviceStatus } from "@routes/welcome-local";
|
|
import { useVersion } from "@/hooks/useVersion";
|
|
import { useSessionManagement } from "@/hooks/useSessionManagement";
|
|
import { useSessionStore, useSharedSessionStore } from "@/stores/sessionStore";
|
|
import { sessionApi } from "@/api/sessionApi";
|
|
|
|
interface LocalLoaderResp {
|
|
authMode: "password" | "noPassword" | null;
|
|
}
|
|
|
|
interface CloudLoaderResp {
|
|
deviceName: string;
|
|
user: User | null;
|
|
iceConfig: {
|
|
iceServers: { credential?: string; urls: string | string[]; username?: string };
|
|
} | null;
|
|
}
|
|
|
|
export type AuthMode = "password" | "noPassword" | null;
|
|
export interface LocalDevice {
|
|
authMode: AuthMode;
|
|
deviceId: string;
|
|
}
|
|
|
|
const deviceLoader = async () => {
|
|
const res = await api
|
|
.GET(`${DEVICE_API}/device/status`)
|
|
.then(res => res.json() as Promise<DeviceStatus>);
|
|
|
|
if (!res.isSetup) return redirect("/welcome");
|
|
|
|
const deviceRes = await api.GET(`${DEVICE_API}/device`);
|
|
if (deviceRes.status === 401) return redirect("/login-local");
|
|
if (deviceRes.ok) {
|
|
const device = (await deviceRes.json()) as LocalDevice;
|
|
return { authMode: device.authMode };
|
|
}
|
|
|
|
throw new Error("Error fetching device");
|
|
};
|
|
|
|
const cloudLoader = async (params: Params<string>): Promise<CloudLoaderResp> => {
|
|
const user = await checkAuth();
|
|
|
|
const iceResp = await api.POST(`${CLOUD_API}/webrtc/ice_config`);
|
|
const iceConfig = await iceResp.json();
|
|
|
|
const deviceResp = await api.GET(`${CLOUD_API}/devices/${params.id}`);
|
|
|
|
if (!deviceResp.ok) {
|
|
if (deviceResp.status === 404) {
|
|
throw new Response("Device not found", { status: 404 });
|
|
}
|
|
|
|
throw new Error("Error fetching device");
|
|
}
|
|
|
|
const { device } = (await deviceResp.json()) as {
|
|
device: { id: string; name: string; user: { googleId: string } };
|
|
};
|
|
|
|
return { user, iceConfig, deviceName: device.name || device.id };
|
|
};
|
|
|
|
const loader: LoaderFunction = ({ params }: LoaderFunctionArgs) => {
|
|
return import.meta.env.MODE === "device" ? deviceLoader() : cloudLoader(params);
|
|
};
|
|
|
|
export default function KvmIdRoute() {
|
|
const loaderResp = useLoaderData() as LocalLoaderResp | CloudLoaderResp;
|
|
// Depending on the mode, we set the appropriate variables
|
|
const user = "user" in loaderResp ? loaderResp.user : null;
|
|
const deviceName = "deviceName" in loaderResp ? loaderResp.deviceName : null;
|
|
const iceConfig = "iceConfig" in loaderResp ? loaderResp.iceConfig : null;
|
|
const authMode = "authMode" in loaderResp ? loaderResp.authMode : null;
|
|
|
|
const params = useParams() as { id: string };
|
|
const { sidebarView, setSidebarView, disableVideoFocusTrap, setDisableVideoFocusTrap } = useUiStore();
|
|
const [ queryParams, setQueryParams ] = useSearchParams();
|
|
|
|
const {
|
|
peerConnection, setPeerConnection,
|
|
peerConnectionState, setPeerConnectionState,
|
|
setMediaStream,
|
|
setRpcDataChannel,
|
|
isTurnServerInUse, setTurnServerInUse,
|
|
rpcDataChannel,
|
|
setTransceiver,
|
|
setRpcHidChannel,
|
|
setRpcHidUnreliableNonOrderedChannel,
|
|
setRpcHidUnreliableChannel,
|
|
} = useRTCStore();
|
|
|
|
const location = useLocation();
|
|
const isLegacySignalingEnabled = useRef(false);
|
|
const [connectionFailed, setConnectionFailed] = useState(false);
|
|
const [showNicknameModal, setShowNicknameModal] = useState(false);
|
|
const [accessDenied, setAccessDenied] = useState(false);
|
|
|
|
const navigate = useNavigate();
|
|
const { otaState, setOtaState, setModalView } = useUpdateStore();
|
|
const { currentSessionId, currentMode, setCurrentSession } = useSessionStore();
|
|
const { nickname, setNickname } = useSharedSessionStore();
|
|
const { setRequireSessionApproval, setRequireSessionNickname } = useSettingsStore();
|
|
const [globalSessionSettings, setGlobalSessionSettings] = useState<{requireApproval: boolean, requireNickname: boolean} | null>(null);
|
|
const { hasPermission } = usePermissions();
|
|
|
|
const [loadingMessage, setLoadingMessage] = useState("Connecting to device...");
|
|
const cleanupAndStopReconnecting = useCallback(
|
|
function cleanupAndStopReconnecting() {
|
|
|
|
setConnectionFailed(true);
|
|
if (peerConnection) {
|
|
setPeerConnectionState(peerConnection.connectionState);
|
|
}
|
|
connectionFailedRef.current = true;
|
|
|
|
peerConnection?.close();
|
|
signalingAttempts.current = 0;
|
|
},
|
|
[peerConnection, setPeerConnectionState],
|
|
);
|
|
|
|
// We need to track connectionFailed in a ref to avoid stale closure issues
|
|
// This is necessary because syncRemoteSessionDescription is a callback that captures
|
|
// the connectionFailed value at creation time, but we need the latest value
|
|
// when the function is actually called. Without this ref, the function would use
|
|
// a stale value of connectionFailed in some conditions.
|
|
//
|
|
// We still need the state variable for UI rendering, so we sync the ref with the state.
|
|
// This pattern is a workaround for what useEvent hook would solve more elegantly
|
|
// (which would give us a callback that always has access to latest state without re-creation).
|
|
const connectionFailedRef = useRef(false);
|
|
useEffect(() => {
|
|
connectionFailedRef.current = connectionFailed;
|
|
}, [connectionFailed]);
|
|
|
|
const signalingAttempts = useRef(0);
|
|
const setRemoteSessionDescription = useCallback(
|
|
async function setRemoteSessionDescription(
|
|
pc: RTCPeerConnection,
|
|
remoteDescription: RTCSessionDescriptionInit,
|
|
) {
|
|
setLoadingMessage("Setting remote description");
|
|
|
|
try {
|
|
await pc.setRemoteDescription(new RTCSessionDescription(remoteDescription));
|
|
setLoadingMessage("Establishing secure connection...");
|
|
} catch (error) {
|
|
console.error(
|
|
"[setRemoteSessionDescription] Failed to set remote description:",
|
|
error,
|
|
);
|
|
cleanupAndStopReconnecting();
|
|
return;
|
|
}
|
|
|
|
// Replace the interval-based check with a more reliable approach
|
|
let attempts = 0;
|
|
const checkInterval = setInterval(() => {
|
|
attempts++;
|
|
|
|
// When vivaldi has disabled "Broadcast IP for Best WebRTC Performance", this never connects
|
|
if (pc.sctp?.state === "connected") {
|
|
clearInterval(checkInterval);
|
|
setLoadingMessage("Connection established");
|
|
} else if (attempts >= 10) {
|
|
console.warn(
|
|
"[setRemoteSessionDescription] Failed to establish connection after 10 attempts",
|
|
{
|
|
connectionState: pc.connectionState,
|
|
iceConnectionState: pc.iceConnectionState,
|
|
},
|
|
);
|
|
cleanupAndStopReconnecting();
|
|
clearInterval(checkInterval);
|
|
}
|
|
}, 1000);
|
|
},
|
|
[cleanupAndStopReconnecting],
|
|
);
|
|
|
|
const ignoreOffer = useRef(false);
|
|
const isSettingRemoteAnswerPending = useRef(false);
|
|
const makingOffer = useRef(false);
|
|
|
|
const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
|
|
|
|
const { sendMessage, getWebSocket } = useWebSocket(
|
|
isOnDevice
|
|
? `${wsProtocol}//${window.location.host}/webrtc/signaling/client`
|
|
: `${CLOUD_API.replace("http", "ws")}/webrtc/signaling/client?id=${params.id}`,
|
|
{
|
|
heartbeat: true,
|
|
retryOnError: true,
|
|
reconnectAttempts: 15,
|
|
reconnectInterval: 1000,
|
|
onReconnectStop: () => {
|
|
cleanupAndStopReconnecting();
|
|
},
|
|
|
|
shouldReconnect(_event) {
|
|
// TODO: Why true?
|
|
return true;
|
|
},
|
|
|
|
onClose(_event) {
|
|
// We don't want to close everything down, we wait for the reconnect to stop instead
|
|
},
|
|
|
|
onError(event) {
|
|
console.error("[Websocket] onError", event);
|
|
// We don't want to close everything down, we wait for the reconnect to stop instead
|
|
},
|
|
onOpen() {
|
|
// Connection established, message handling will begin
|
|
},
|
|
|
|
onMessage: message => {
|
|
if (message.data === "pong") return;
|
|
|
|
/*
|
|
Currently the signaling process is as follows:
|
|
After open, the other side will send a `device-metadata` message with the device version
|
|
If the device version is not set, we can assume the device is using the legacy signaling
|
|
Otherwise, we can assume the device is using the new signaling
|
|
|
|
If the device is using the legacy signaling, we close the websocket connection
|
|
and use the legacy HTTPSignaling function to get the remote session description
|
|
|
|
If the device is using the new signaling, we don't need to do anything special, but continue to use the websocket connection
|
|
to chat with the other peer about the connection
|
|
*/
|
|
|
|
const parsedMessage = JSON.parse(message.data);
|
|
if (parsedMessage.type === "device-metadata") {
|
|
const { deviceVersion, sessionSettings } = parsedMessage.data;
|
|
|
|
// Store session settings if provided
|
|
if (sessionSettings) {
|
|
setGlobalSessionSettings({
|
|
requireNickname: sessionSettings.requireNickname || false,
|
|
requireApproval: sessionSettings.requireApproval || false
|
|
});
|
|
// Also update the settings store for approval handling
|
|
setRequireSessionApproval(sessionSettings.requireApproval || false);
|
|
setRequireSessionNickname(sessionSettings.requireNickname || false);
|
|
}
|
|
|
|
// If the device version is not set, we can assume the device is using the legacy signaling
|
|
if (!deviceVersion) {
|
|
|
|
// Now we don't need the websocket connection anymore, as we've established that we need to use the legacy signaling
|
|
// which does everything over HTTP(at least from the perspective of the client)
|
|
isLegacySignalingEnabled.current = true;
|
|
getWebSocket()?.close();
|
|
} else {
|
|
isLegacySignalingEnabled.current = false;
|
|
}
|
|
|
|
// Always setup peer connection first to establish RPC channel for nickname generation
|
|
setupPeerConnection();
|
|
|
|
// Check if nickname is required and not set - modal will be shown after RPC channel is ready
|
|
const requiresNickname = sessionSettings?.requireNickname || false;
|
|
|
|
if (requiresNickname && !nickname) {
|
|
// Store that we need to show the nickname modal once RPC is ready
|
|
// The useEffect in NicknameModal will handle waiting for RPC channel readiness
|
|
setShowNicknameModal(true);
|
|
setDisableVideoFocusTrap(true);
|
|
}
|
|
}
|
|
|
|
if (!peerConnection) {
|
|
console.warn("[Websocket] Ignoring message because peerConnection is not ready:", parsedMessage.type);
|
|
return;
|
|
}
|
|
if (parsedMessage.type === "answer") {
|
|
const readyForOffer =
|
|
// If we're making an offer, we don't want to accept an answer
|
|
!makingOffer &&
|
|
// If the peer connection is stable or we're setting the remote answer pending, we're ready for an offer
|
|
(peerConnection?.signalingState === "stable" ||
|
|
isSettingRemoteAnswerPending.current);
|
|
|
|
// If we're not ready for an offer, we don't want to accept an offer
|
|
ignoreOffer.current = parsedMessage.type === "offer" && !readyForOffer;
|
|
if (ignoreOffer.current) return;
|
|
|
|
// Set so we don't accept an answer while we're setting the remote description
|
|
isSettingRemoteAnswerPending.current = parsedMessage.type === "answer";
|
|
|
|
const sd = atob(parsedMessage.data);
|
|
const remoteSessionDescription = JSON.parse(sd);
|
|
|
|
if (parsedMessage.sessionId && parsedMessage.mode) {
|
|
handleSessionResponse({
|
|
sessionId: parsedMessage.sessionId,
|
|
mode: parsedMessage.mode
|
|
});
|
|
|
|
// Store sessionId via zustand (persists to sessionStorage for per-tab isolation)
|
|
setCurrentSession(parsedMessage.sessionId, parsedMessage.mode);
|
|
if (parsedMessage.requireNickname !== undefined && parsedMessage.requireApproval !== undefined) {
|
|
setGlobalSessionSettings({
|
|
requireNickname: parsedMessage.requireNickname,
|
|
requireApproval: parsedMessage.requireApproval
|
|
});
|
|
// Also update the settings store for approval handling
|
|
setRequireSessionApproval(parsedMessage.requireApproval);
|
|
setRequireSessionNickname(parsedMessage.requireNickname);
|
|
}
|
|
|
|
// Show nickname modal if:
|
|
// 1. Nickname is required by backend settings
|
|
// 2. We don't already have a nickname
|
|
// This happens even for pending sessions so the nickname is included in approval
|
|
const hasNickname = parsedMessage.nickname && parsedMessage.nickname.length > 0;
|
|
const requiresNickname = parsedMessage.requireNickname || globalSessionSettings?.requireNickname;
|
|
|
|
if (requiresNickname && !hasNickname) {
|
|
setShowNicknameModal(true);
|
|
setDisableVideoFocusTrap(true);
|
|
}
|
|
}
|
|
|
|
setRemoteSessionDescription(
|
|
peerConnection,
|
|
new RTCSessionDescription(remoteSessionDescription),
|
|
);
|
|
|
|
// Reset the remote answer pending flag
|
|
isSettingRemoteAnswerPending.current = false;
|
|
} else if (parsedMessage.type === "new-ice-candidate") {
|
|
const candidate = parsedMessage.data;
|
|
// Always try to add the ICE candidate - the browser will queue it internally if needed
|
|
peerConnection.addIceCandidate(candidate).catch(error => {
|
|
console.warn("[Websocket] Failed to add ICE candidate:", error);
|
|
});
|
|
}
|
|
},
|
|
},
|
|
|
|
// Don't even retry once we declare failure
|
|
!connectionFailed && isLegacySignalingEnabled.current === false,
|
|
);
|
|
|
|
const sendWebRTCSignal = useCallback(
|
|
(type: string, data: unknown) => {
|
|
// Second argument tells the library not to queue the message, and send it once the connection is established again.
|
|
// We have event handlers that handle the connection set up, so we don't need to queue the message.
|
|
const message = JSON.stringify({ type, data });
|
|
const ws = getWebSocket();
|
|
if (ws?.readyState === WebSocket.OPEN) {
|
|
sendMessage(message, false);
|
|
} else {
|
|
console.warn(`[WebSocket] WebSocket not open, queuing message:`, message);
|
|
sendMessage(message, true); // Queue the message
|
|
}
|
|
},
|
|
[sendMessage, getWebSocket],
|
|
);
|
|
|
|
const legacyHTTPSignaling = useCallback(
|
|
async (pc: RTCPeerConnection) => {
|
|
const sd = btoa(JSON.stringify(pc.localDescription));
|
|
|
|
// Legacy mode == UI in cloud with updated code connecting to older device version.
|
|
// In device mode, old devices wont server this JS, and on newer devices legacy mode wont be enabled
|
|
const sessionUrl = `${CLOUD_API}/webrtc/session`;
|
|
|
|
setLoadingMessage(
|
|
`Getting remote session description... ${signalingAttempts.current > 0 ? `(attempt ${signalingAttempts.current + 1})` : ""}`,
|
|
);
|
|
const res = await api.POST(sessionUrl, {
|
|
sd,
|
|
userAgent: navigator.userAgent,
|
|
// When on device, we don't need to specify the device id, as it's already known
|
|
...(isOnDevice ? {} : { id: params.id }),
|
|
});
|
|
|
|
const json = await res.json();
|
|
if (res.status === 401) return navigate(isOnDevice ? "/login-local" : "/login");
|
|
if (!res.ok) {
|
|
console.error("Error getting SDP", { status: res.status, json });
|
|
cleanupAndStopReconnecting();
|
|
return;
|
|
}
|
|
|
|
setLoadingMessage("Setting remote session description...");
|
|
|
|
const decodedSd = atob(json.sd);
|
|
const parsedSd = JSON.parse(decodedSd);
|
|
setRemoteSessionDescription(pc, new RTCSessionDescription(parsedSd));
|
|
},
|
|
[cleanupAndStopReconnecting, navigate, params.id, setRemoteSessionDescription],
|
|
);
|
|
|
|
const setupPeerConnection = useCallback(async () => {
|
|
setConnectionFailed(false);
|
|
setLoadingMessage("Connecting to device...");
|
|
|
|
let pc: RTCPeerConnection;
|
|
try {
|
|
setLoadingMessage("Creating peer connection...");
|
|
pc = new RTCPeerConnection({
|
|
// We only use STUN or TURN servers if we're in the cloud
|
|
...(isInCloud && iceConfig?.iceServers
|
|
? { iceServers: [iceConfig?.iceServers] }
|
|
: {}),
|
|
});
|
|
|
|
setPeerConnectionState(pc.connectionState);
|
|
setLoadingMessage("Setting up connection to device...");
|
|
} catch (e) {
|
|
console.error(`[setupPeerConnection] Error creating peer connection: ${e}`);
|
|
setTimeout(() => {
|
|
cleanupAndStopReconnecting();
|
|
}, 1000);
|
|
return;
|
|
}
|
|
|
|
// Set up event listeners and data channels
|
|
pc.onconnectionstatechange = () => {
|
|
setPeerConnectionState(pc.connectionState);
|
|
};
|
|
|
|
pc.onnegotiationneeded = async () => {
|
|
try {
|
|
makingOffer.current = true;
|
|
|
|
const offer = await pc.createOffer();
|
|
await pc.setLocalDescription(offer);
|
|
const sd = btoa(JSON.stringify(pc.localDescription));
|
|
const isNewSignalingEnabled = isLegacySignalingEnabled.current === false;
|
|
if (isNewSignalingEnabled) {
|
|
// Get nickname and sessionId from zustand stores
|
|
// sessionId is per-tab (sessionStorage), nickname is shared (localStorage)
|
|
const { currentSessionId: storeSessionId } = useSessionStore.getState();
|
|
const { nickname: storeNickname } = useSharedSessionStore.getState();
|
|
|
|
sendWebRTCSignal("offer", {
|
|
sd: sd,
|
|
sessionId: storeSessionId || undefined,
|
|
userAgent: navigator.userAgent,
|
|
sessionSettings: {
|
|
nickname: storeNickname || undefined
|
|
}
|
|
});
|
|
}
|
|
} catch (e) {
|
|
console.error(
|
|
`[setupPeerConnection] Error creating offer: ${e}`,
|
|
new Date().toISOString(),
|
|
);
|
|
cleanupAndStopReconnecting();
|
|
} finally {
|
|
makingOffer.current = false;
|
|
}
|
|
};
|
|
|
|
pc.onicecandidate = ({ candidate }) => {
|
|
if (!candidate) {
|
|
return;
|
|
}
|
|
if (candidate.candidate === "") {
|
|
return;
|
|
}
|
|
sendWebRTCSignal("new-ice-candidate", candidate);
|
|
};
|
|
|
|
pc.onicegatheringstatechange = event => {
|
|
const pc = event.currentTarget as RTCPeerConnection;
|
|
if (pc.iceGatheringState === "complete") {
|
|
setLoadingMessage("ICE Gathering completed");
|
|
|
|
if (isLegacySignalingEnabled.current) {
|
|
// We can now start the https/ws connection to get the remote session description from the KVM device
|
|
legacyHTTPSignaling(pc);
|
|
}
|
|
} else if (pc.iceGatheringState === "gathering") {
|
|
setLoadingMessage("Gathering ICE candidates...");
|
|
}
|
|
};
|
|
|
|
pc.ontrack = function (event) {
|
|
setMediaStream(event.streams[0]);
|
|
};
|
|
|
|
setTransceiver(pc.addTransceiver("video", { direction: "recvonly" }));
|
|
|
|
const rpcDataChannel = pc.createDataChannel("rpc");
|
|
rpcDataChannel.onopen = () => {
|
|
setRpcDataChannel(rpcDataChannel);
|
|
|
|
// Fetch global session settings
|
|
const fetchSettings = () => {
|
|
// Only fetch settings if user has permission to read settings
|
|
if (!hasPermission(Permission.SETTINGS_READ)) {
|
|
return;
|
|
}
|
|
|
|
const id = Math.random().toString(36).substring(2);
|
|
const message = JSON.stringify({ jsonrpc: "2.0", method: "getSessionSettings", params: {}, id });
|
|
|
|
const handler = (event: MessageEvent) => {
|
|
try {
|
|
const response = JSON.parse(event.data);
|
|
if (response.id === id) {
|
|
rpcDataChannel.removeEventListener("message", handler);
|
|
if (response.result) {
|
|
setGlobalSessionSettings(response.result);
|
|
// Also update the settings store for approval handling
|
|
setRequireSessionApproval(response.result.requireApproval);
|
|
setRequireSessionNickname(response.result.requireNickname);
|
|
}
|
|
}
|
|
} catch {
|
|
// Ignore parse errors
|
|
}
|
|
};
|
|
|
|
rpcDataChannel.addEventListener("message", handler);
|
|
rpcDataChannel.send(message);
|
|
|
|
// Clean up after timeout
|
|
setTimeout(() => {
|
|
rpcDataChannel.removeEventListener("message", handler);
|
|
}, 5000);
|
|
};
|
|
|
|
fetchSettings();
|
|
};
|
|
|
|
const rpcHidChannel = pc.createDataChannel("hidrpc");
|
|
rpcHidChannel.binaryType = "arraybuffer";
|
|
rpcHidChannel.onopen = () => {
|
|
setRpcHidChannel(rpcHidChannel);
|
|
};
|
|
|
|
const rpcHidUnreliableChannel = pc.createDataChannel("hidrpc-unreliable-ordered", {
|
|
ordered: true,
|
|
maxRetransmits: 0,
|
|
});
|
|
rpcHidUnreliableChannel.binaryType = "arraybuffer";
|
|
rpcHidUnreliableChannel.onopen = () => {
|
|
setRpcHidUnreliableChannel(rpcHidUnreliableChannel);
|
|
};
|
|
|
|
const rpcHidUnreliableNonOrderedChannel = pc.createDataChannel("hidrpc-unreliable-nonordered", {
|
|
ordered: false,
|
|
maxRetransmits: 0,
|
|
});
|
|
rpcHidUnreliableNonOrderedChannel.binaryType = "arraybuffer";
|
|
rpcHidUnreliableNonOrderedChannel.onopen = () => {
|
|
setRpcHidUnreliableNonOrderedChannel(rpcHidUnreliableNonOrderedChannel);
|
|
};
|
|
|
|
setPeerConnection(pc);
|
|
}, [
|
|
cleanupAndStopReconnecting,
|
|
iceConfig?.iceServers,
|
|
legacyHTTPSignaling,
|
|
sendWebRTCSignal,
|
|
setMediaStream,
|
|
setPeerConnection,
|
|
setPeerConnectionState,
|
|
setRpcDataChannel,
|
|
setRpcHidChannel,
|
|
setRpcHidUnreliableNonOrderedChannel,
|
|
setRpcHidUnreliableChannel,
|
|
setTransceiver,
|
|
hasPermission,
|
|
setRequireSessionApproval,
|
|
setRequireSessionNickname,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
if (peerConnectionState === "failed") {
|
|
console.warn("Connection failed, closing peer connection");
|
|
cleanupAndStopReconnecting();
|
|
}
|
|
}, [peerConnectionState, cleanupAndStopReconnecting]);
|
|
|
|
// Cleanup effect
|
|
const { clearInboundRtpStats, clearCandidatePairStats } = useRTCStore();
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
peerConnection?.close();
|
|
};
|
|
}, [peerConnection]);
|
|
|
|
// For some reason, we have to have this unmount separate from the cleanup effect above
|
|
useEffect(() => {
|
|
return () => {
|
|
clearInboundRtpStats();
|
|
clearCandidatePairStats();
|
|
setSidebarView(null);
|
|
setPeerConnection(null);
|
|
};
|
|
}, [clearCandidatePairStats, clearInboundRtpStats, setPeerConnection, setSidebarView]);
|
|
|
|
// TURN server usage detection
|
|
useEffect(() => {
|
|
if (peerConnectionState !== "connected") return;
|
|
const { localCandidateStats, remoteCandidateStats } = useRTCStore.getState();
|
|
|
|
const lastLocalStat = Array.from(localCandidateStats).pop();
|
|
if (!lastLocalStat?.length) return;
|
|
const localCandidateIsUsingTurn = lastLocalStat[1].candidateType === "relay"; // [0] is the timestamp, which we don't care about here
|
|
|
|
const lastRemoteStat = Array.from(remoteCandidateStats).pop();
|
|
if (!lastRemoteStat?.length) return;
|
|
const remoteCandidateIsUsingTurn = lastRemoteStat[1].candidateType === "relay"; // [0] is the timestamp, which we don't care about here
|
|
|
|
setTurnServerInUse(localCandidateIsUsingTurn || remoteCandidateIsUsingTurn);
|
|
}, [peerConnectionState, setTurnServerInUse]);
|
|
|
|
// TURN server usage reporting
|
|
const lastBytesReceived = useRef<number>(0);
|
|
const lastBytesSent = useRef<number>(0);
|
|
|
|
useInterval(() => {
|
|
// Don't report usage if we're not using the turn server
|
|
if (!isTurnServerInUse) return;
|
|
const { candidatePairStats } = useRTCStore.getState();
|
|
|
|
const lastCandidatePair = Array.from(candidatePairStats).pop();
|
|
const report = lastCandidatePair?.[1];
|
|
if (!report) return;
|
|
|
|
let bytesReceivedDelta = 0;
|
|
let bytesSentDelta = 0;
|
|
|
|
if (report.bytesReceived) {
|
|
bytesReceivedDelta = report.bytesReceived - lastBytesReceived.current;
|
|
lastBytesReceived.current = report.bytesReceived;
|
|
}
|
|
|
|
if (report.bytesSent) {
|
|
bytesSentDelta = report.bytesSent - lastBytesSent.current;
|
|
lastBytesSent.current = report.bytesSent;
|
|
}
|
|
|
|
// Fire and forget
|
|
api.POST(`${CLOUD_API}/webrtc/turn_activity`, {
|
|
bytesReceived: bytesReceivedDelta,
|
|
bytesSent: bytesSentDelta,
|
|
});
|
|
}, 10000);
|
|
|
|
const { setNetworkState} = useNetworkStateStore();
|
|
const { setHdmiState } = useVideoStore();
|
|
const {
|
|
keyboardLedState, setKeyboardLedState,
|
|
keysDownState, setKeysDownState, setUsbState,
|
|
} = useHidStore();
|
|
const setHidRpcDisabled = useRTCStore(state => state.setHidRpcDisabled);
|
|
|
|
const [hasUpdated, setHasUpdated] = useState(false);
|
|
const { navigateTo } = useDeviceUiNavigation();
|
|
|
|
function onJsonRpcRequest(resp: JsonRpcRequest) {
|
|
// Handle session-related events
|
|
if (resp.method === "sessionsUpdated" ||
|
|
resp.method === "modeChanged" ||
|
|
resp.method === "otherSessionConnected" ||
|
|
resp.method === "primaryControlRequested" ||
|
|
resp.method === "primaryControlApproved" ||
|
|
resp.method === "primaryControlDenied" ||
|
|
resp.method === "newSessionPending" ||
|
|
resp.method === "sessionAccessDenied") {
|
|
handleRpcEvent(resp.method, resp.params);
|
|
|
|
// Show access denied overlay if our session was denied
|
|
if (resp.method === "sessionAccessDenied") {
|
|
setAccessDenied(true);
|
|
}
|
|
|
|
// Keep legacy behavior for otherSessionConnected
|
|
if (resp.method === "otherSessionConnected") {
|
|
navigateTo("/other-session");
|
|
}
|
|
}
|
|
|
|
if (resp.method === "usbState") {
|
|
const usbState = resp.params as unknown as USBStates;
|
|
setUsbState(usbState);
|
|
}
|
|
|
|
if (resp.method === "videoInputState") {
|
|
const hdmiState = resp.params as Parameters<VideoState["setHdmiState"]>[0];
|
|
setHdmiState(hdmiState);
|
|
}
|
|
|
|
if (resp.method === "networkState") {
|
|
setNetworkState(resp.params as NetworkState);
|
|
}
|
|
|
|
if (resp.method === "keyboardLedState") {
|
|
const ledState = resp.params as KeyboardLedState;
|
|
setKeyboardLedState(ledState);
|
|
}
|
|
|
|
if (resp.method === "keysDownState") {
|
|
const downState = resp.params as KeysDownState;
|
|
setKeysDownState(downState);
|
|
}
|
|
|
|
if (resp.method === "otaState") {
|
|
const otaState = resp.params as OtaState;
|
|
setOtaState(otaState);
|
|
|
|
if (otaState.updating === true) {
|
|
setHasUpdated(true);
|
|
}
|
|
|
|
if (hasUpdated && otaState.updating === false) {
|
|
setHasUpdated(false);
|
|
|
|
if (otaState.error) {
|
|
setModalView("error");
|
|
navigateTo("/settings/general/update");
|
|
return;
|
|
}
|
|
|
|
const currentUrl = new URL(window.location.href);
|
|
currentUrl.search = "";
|
|
currentUrl.searchParams.set("updateSuccess", "true");
|
|
window.location.href = currentUrl.toString();
|
|
}
|
|
}
|
|
}
|
|
|
|
const { send } = useJsonRpc(onJsonRpcRequest);
|
|
|
|
const {
|
|
handleSessionResponse,
|
|
handleRpcEvent,
|
|
primaryControlRequest,
|
|
handleApprovePrimaryRequest,
|
|
handleDenyPrimaryRequest,
|
|
closePrimaryControlRequest,
|
|
newSessionRequest,
|
|
handleApproveNewSession,
|
|
handleDenyNewSession,
|
|
closeNewSessionRequest
|
|
} = useSessionManagement(send);
|
|
|
|
useEffect(() => {
|
|
if (rpcDataChannel?.readyState !== "open") return;
|
|
if (!hasPermission(Permission.VIDEO_VIEW)) return;
|
|
send("getVideoState", {}, (resp: JsonRpcResponse) => {
|
|
if ("error" in resp) return;
|
|
const hdmiState = resp.result as Parameters<VideoState["setHdmiState"]>[0];
|
|
setHdmiState(hdmiState);
|
|
});
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [rpcDataChannel?.readyState, send, setHdmiState]);
|
|
|
|
const [needLedState, setNeedLedState] = useState(true);
|
|
|
|
// request keyboard led state from the device
|
|
useEffect(() => {
|
|
if (rpcDataChannel?.readyState !== "open") return;
|
|
if (!needLedState) return;
|
|
if (!hasPermission(Permission.VIDEO_VIEW)) return;
|
|
|
|
send("getKeyboardLedState", {}, (resp: JsonRpcResponse) => {
|
|
if ("error" in resp) {
|
|
console.error("Failed to get keyboard led state", resp.error);
|
|
return;
|
|
} else {
|
|
const ledState = resp.result as KeyboardLedState;
|
|
setKeyboardLedState(ledState);
|
|
}
|
|
setNeedLedState(false);
|
|
});
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [rpcDataChannel?.readyState, send, setKeyboardLedState, keyboardLedState, needLedState]);
|
|
|
|
const [needKeyDownState, setNeedKeyDownState] = useState(true);
|
|
|
|
// request keyboard key down state from the device
|
|
useEffect(() => {
|
|
if (rpcDataChannel?.readyState !== "open") return;
|
|
if (!needKeyDownState) return;
|
|
if (!hasPermission(Permission.VIDEO_VIEW)) return;
|
|
|
|
send("getKeyDownState", {}, (resp: JsonRpcResponse) => {
|
|
if ("error" in resp) {
|
|
// -32601 means the method is not supported
|
|
if (resp.error.code === RpcMethodNotFound) {
|
|
// if we don't support key down state, we know key press is also not available
|
|
console.warn("Failed to get key down state, switching to old-school", resp.error);
|
|
setHidRpcDisabled(true);
|
|
} else {
|
|
console.error("Failed to get key down state", resp.error);
|
|
}
|
|
} else {
|
|
const downState = resp.result as KeysDownState;
|
|
setKeysDownState(downState);
|
|
}
|
|
setNeedKeyDownState(false);
|
|
});
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [keysDownState, needKeyDownState, rpcDataChannel?.readyState, send, setKeysDownState, setHidRpcDisabled]);
|
|
|
|
// When the update is successful, we need to refresh the client javascript and show a success modal
|
|
useEffect(() => {
|
|
if (queryParams.get("updateSuccess")) {
|
|
navigateTo("/settings/general/update", { state: { updateSuccess: true } });
|
|
}
|
|
}, [navigate, navigateTo, queryParams, setModalView, setQueryParams]);
|
|
|
|
// System update
|
|
const [kvmTerminal, setKvmTerminal] = useState<RTCDataChannel | null>(null);
|
|
const [serialConsole, setSerialConsole] = useState<RTCDataChannel | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!peerConnection) return;
|
|
if (!kvmTerminal) {
|
|
setKvmTerminal(peerConnection.createDataChannel("terminal"));
|
|
}
|
|
|
|
if (!serialConsole) {
|
|
setSerialConsole(peerConnection.createDataChannel("serial"));
|
|
}
|
|
}, [kvmTerminal, peerConnection, serialConsole]);
|
|
|
|
const outlet = useOutlet();
|
|
const onModalClose = useCallback(() => {
|
|
if (location.pathname !== "/other-session") navigateTo("/");
|
|
}, [navigateTo, location.pathname]);
|
|
|
|
const { appVersion, getLocalVersion} = useVersion();
|
|
|
|
useEffect(() => {
|
|
if (appVersion) return;
|
|
if (!hasPermission(Permission.VIDEO_VIEW)) return;
|
|
|
|
getLocalVersion();
|
|
}, [appVersion, getLocalVersion, hasPermission]);
|
|
|
|
const ConnectionStatusElement = useMemo(() => {
|
|
const hasConnectionFailed =
|
|
connectionFailed || ["failed", "closed"].includes(peerConnectionState ?? "");
|
|
|
|
const isPeerConnectionLoading =
|
|
["connecting", "new"].includes(peerConnectionState ?? "") ||
|
|
peerConnection === null;
|
|
|
|
const isDisconnected = peerConnectionState === "disconnected";
|
|
|
|
const isOtherSession = location.pathname.includes("other-session");
|
|
|
|
if (isOtherSession) return null;
|
|
if (peerConnectionState === "connected") return null;
|
|
if (isDisconnected) {
|
|
return <PeerConnectionDisconnectedOverlay show={true} />;
|
|
}
|
|
|
|
if (hasConnectionFailed)
|
|
return (
|
|
<ConnectionFailedOverlay show={true} setupPeerConnection={setupPeerConnection} />
|
|
);
|
|
|
|
if (isPeerConnectionLoading) {
|
|
return <LoadingConnectionOverlay show={true} text={loadingMessage} />;
|
|
}
|
|
|
|
return null;
|
|
}, [
|
|
connectionFailed,
|
|
loadingMessage,
|
|
location.pathname,
|
|
peerConnection,
|
|
peerConnectionState,
|
|
setupPeerConnection,
|
|
]);
|
|
|
|
return (
|
|
<FeatureFlagProvider appVersion={appVersion}>
|
|
{!outlet && otaState.updating && (
|
|
<AnimatePresence>
|
|
<motion.div
|
|
className="pointer-events-none fixed inset-0 top-16 z-10 mx-auto flex h-full w-full max-w-xl translate-y-8 items-start justify-center"
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -20 }}
|
|
transition={{ duration: 0.3, ease: "easeInOut" }}
|
|
>
|
|
<UpdateInProgressStatusCard />
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
)}
|
|
<div className="relative h-full">
|
|
<FocusTrap
|
|
paused={disableVideoFocusTrap}
|
|
focusTrapOptions={{
|
|
allowOutsideClick: true,
|
|
escapeDeactivates: false,
|
|
fallbackFocus: "#videoFocusTrap",
|
|
}}
|
|
>
|
|
<div className="absolute top-0">
|
|
<button className="absolute top-0" tabIndex={-1} id="videoFocusTrap" />
|
|
</div>
|
|
</FocusTrap>
|
|
|
|
<div className="grid h-full grid-rows-(--grid-headerBody) select-none">
|
|
<DashboardNavbar
|
|
primaryLinks={isOnDevice ? [] : [{ title: "Cloud Devices", to: "/devices" }]}
|
|
showConnectionStatus={true}
|
|
isLoggedIn={authMode === "password" || !!user}
|
|
userEmail={user?.email}
|
|
picture={user?.picture}
|
|
kvmName={deviceName ?? "JetKVM Device"}
|
|
/>
|
|
|
|
|
|
<div className="relative flex h-full w-full overflow-hidden">
|
|
{/* Only show video feed if nickname is set (when required) and not pending approval */}
|
|
{(!showNicknameModal && currentMode !== "pending") ? (
|
|
<>
|
|
<WebRTCVideo />
|
|
<div
|
|
style={{ animationDuration: "500ms" }}
|
|
className="animate-slideUpFade pointer-events-none absolute inset-0 flex items-center justify-center p-4"
|
|
>
|
|
<div className="relative h-full max-h-[720px] w-full max-w-[1280px] rounded-md">
|
|
{!!ConnectionStatusElement && ConnectionStatusElement}
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex-1 bg-slate-900 flex items-center justify-center">
|
|
<div className="text-slate-400 text-center">
|
|
{showNicknameModal && <p>Please set your nickname to continue</p>}
|
|
{currentMode === "pending" && <p>Waiting for session approval...</p>}
|
|
</div>
|
|
</div>
|
|
)}
|
|
<SidebarContainer sidebarView={sidebarView} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="z-50"
|
|
onClick={e => e.stopPropagation()}
|
|
onMouseUp={e => e.stopPropagation()}
|
|
onMouseDown={e => e.stopPropagation()}
|
|
onKeyUp={e => e.stopPropagation()}
|
|
onKeyDown={e => {
|
|
e.stopPropagation();
|
|
if (e.key === "Escape") navigateTo("/");
|
|
}}
|
|
>
|
|
<Modal open={outlet !== null} onClose={onModalClose}>
|
|
{/* The 'used by other session' modal needs to have access to the connectWebRTC function */}
|
|
<Outlet context={{ setupPeerConnection }} />
|
|
</Modal>
|
|
|
|
<NicknameModal
|
|
isOpen={showNicknameModal}
|
|
onSubmit={async (nickname) => {
|
|
setNickname(nickname);
|
|
setShowNicknameModal(false);
|
|
setDisableVideoFocusTrap(false);
|
|
|
|
if (currentSessionId && send) {
|
|
try {
|
|
await sessionApi.updateNickname(send, currentSessionId, nickname);
|
|
} catch (error) {
|
|
console.error("Failed to update nickname:", error);
|
|
}
|
|
}
|
|
}}
|
|
onSkip={() => {
|
|
setShowNicknameModal(false);
|
|
setDisableVideoFocusTrap(false);
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{kvmTerminal && (
|
|
<Terminal type="kvm" dataChannel={kvmTerminal} title="KVM Terminal" />
|
|
)}
|
|
|
|
{serialConsole && (
|
|
<Terminal type="serial" dataChannel={serialConsole} title="Serial Console" />
|
|
)}
|
|
|
|
{/* Unified Session Request Dialog */}
|
|
{(primaryControlRequest || newSessionRequest) && (
|
|
<UnifiedSessionRequestDialog
|
|
request={
|
|
primaryControlRequest
|
|
? {
|
|
id: primaryControlRequest.requestId,
|
|
type: "primary_control",
|
|
source: primaryControlRequest.source,
|
|
identity: primaryControlRequest.identity,
|
|
nickname: primaryControlRequest.nickname,
|
|
}
|
|
: newSessionRequest
|
|
? {
|
|
id: newSessionRequest.sessionId,
|
|
type: "session_approval",
|
|
source: newSessionRequest.source,
|
|
identity: newSessionRequest.identity,
|
|
nickname: newSessionRequest.nickname,
|
|
}
|
|
: null
|
|
}
|
|
onApprove={
|
|
primaryControlRequest
|
|
? handleApprovePrimaryRequest
|
|
: handleApproveNewSession
|
|
}
|
|
onDeny={
|
|
primaryControlRequest
|
|
? handleDenyPrimaryRequest
|
|
: handleDenyNewSession
|
|
}
|
|
onDismiss={
|
|
primaryControlRequest
|
|
? closePrimaryControlRequest
|
|
: closeNewSessionRequest
|
|
}
|
|
onClose={
|
|
primaryControlRequest
|
|
? closePrimaryControlRequest
|
|
: closeNewSessionRequest
|
|
}
|
|
/>
|
|
)}
|
|
|
|
<AccessDeniedOverlay
|
|
show={accessDenied}
|
|
message="Your session access was denied by the primary session"
|
|
onRequestApproval={async () => {
|
|
if (!send) return;
|
|
try {
|
|
await sessionApi.requestSessionApproval(send);
|
|
setAccessDenied(false);
|
|
} catch (error) {
|
|
console.error("Failed to re-request approval:", error);
|
|
}
|
|
}}
|
|
/>
|
|
|
|
<PendingApprovalOverlay
|
|
show={currentMode === "pending"}
|
|
/>
|
|
</FeatureFlagProvider>
|
|
);
|
|
}
|
|
|
|
interface SidebarContainerProps {
|
|
readonly sidebarView: string | null;
|
|
}
|
|
|
|
function SidebarContainer(props: SidebarContainerProps) {
|
|
const { sidebarView } = props;
|
|
return (
|
|
<div
|
|
className={cx(
|
|
"flex shrink-0 border-l border-l-slate-800/20 transition-all duration-500 ease-in-out dark:border-l-slate-300/20",
|
|
{ "border-x-transparent": !sidebarView },
|
|
)}
|
|
style={{ width: sidebarView ? "493px" : 0 }}
|
|
>
|
|
<div className="relative w-[493px] shrink-0">
|
|
<AnimatePresence>
|
|
{sidebarView === "connection-stats" && (
|
|
<motion.div
|
|
className="absolute inset-0"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{
|
|
duration: 0.5,
|
|
ease: "easeInOut",
|
|
}}
|
|
>
|
|
<ConnectionStatsSidebar />
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
KvmIdRoute.loader = loader;
|