Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: update peer connection state handling and improve type definitions across components

This commit is contained in:
Adam Shiervani 2025-03-25 11:43:58 +01:00
parent 12811b23ca
commit 5b3b35ad81
4 changed files with 20 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/Header.tsx
View File

@ -36,7 +36,7 @@ export default function DashboardNavbar({
picture, picture,
kvmName, kvmName,
}: NavbarProps) { }: NavbarProps) {
const peerConnectionState = useRTCStore(state => state.peerConnection?.connectionState); const peerConnectionState = useRTCStore(state => state.peerConnectionState);
const setUser = useUserStore(state => state.setUser); const setUser = useUserStore(state => state.setUser);
const navigate = useNavigate(); const navigate = useNavigate();
const onLogout = useCallback(async () => { const onLogout = useCallback(async () => {

11
ui/src/components/PeerConnectionStatusCard.tsx
View File

@ -9,19 +9,22 @@ const PeerConnectionStatusMap = {
failed: "Connection failed", failed: "Connection failed",
closed: "Closed", closed: "Closed",
new: "Connecting", new: "Connecting",
}; } as Record<RTCPeerConnectionState | "error" | "closing", string>;
export type PeerConnections = keyof typeof PeerConnectionStatusMap; export type PeerConnections = keyof typeof PeerConnectionStatusMap;
type StatusProps = Record<PeerConnections, { type StatusProps = Record<
PeerConnections,
{
statusIndicatorClassName: string; statusIndicatorClassName: string;
}>; }
>;
export default function PeerConnectionStatusCard({ export default function PeerConnectionStatusCard({
state, state,
title, title,
}: { }: {
state?: PeerConnections; state?: RTCPeerConnectionState | null;
title?: string; title?: string;
}) { }) {
if (!state) return null; if (!state) return null;

10
ui/src/components/USBStateStatus.tsx
View File

@ -8,11 +8,14 @@ import { HidState } from "@/hooks/stores";
type USBStates = HidState["usbState"]; type USBStates = HidState["usbState"];
type StatusProps = Record<USBStates, { type StatusProps = Record<
USBStates,
{
icon: React.FC<{ className: string | undefined }>; icon: React.FC<{ className: string | undefined }>;
iconClassName: string; iconClassName: string;
statusIndicatorClassName: string; statusIndicatorClassName: string;
}>; }
>;
const USBStateMap: Record<USBStates, string> = { const USBStateMap: Record<USBStates, string> = {
configured: "Connected", configured: "Connected",
@ -27,9 +30,8 @@ export default function USBStateStatus({
peerConnectionState, peerConnectionState,
}: { }: {
state: USBStates; state: USBStates;
peerConnectionState?: RTCPeerConnectionState; peerConnectionState: RTCPeerConnectionState | null;
}) { }) {
const StatusCardProps: StatusProps = { const StatusCardProps: StatusProps = {
configured: { configured: {
icon: ({ className }) => ( icon: ({ className }) => (

18
ui/src/routes/devices.$id.tsx
View File

@ -126,7 +126,7 @@ export default function KvmIdRoute() {
const setIsTurnServerInUse = useRTCStore(state => state.setTurnServerInUse); const setIsTurnServerInUse = useRTCStore(state => state.setTurnServerInUse);
const peerConnection = useRTCStore(state => state.peerConnection); const peerConnection = useRTCStore(state => state.peerConnection);
const peerConnectionState = useRTCStore(state => state.peerConnectionState);
const setPeerConnectionState = useRTCStore(state => state.setPeerConnectionState); const setPeerConnectionState = useRTCStore(state => state.setPeerConnectionState);
const setMediaMediaStream = useRTCStore(state => state.setMediaStream); const setMediaMediaStream = useRTCStore(state => state.setMediaStream);
const setPeerConnection = useRTCStore(state => state.setPeerConnection); const setPeerConnection = useRTCStore(state => state.setPeerConnection);
@ -264,8 +264,8 @@ export default function KvmIdRoute() {
? { iceServers: [iceConfig?.iceServers] } ? { iceServers: [iceConfig?.iceServers] }
: {}), : {}),
}); });
} catch (error) { } catch (e) {
console.error(`Error creating peer connection: ${error}`); console.error(`Error creating peer connection: ${e}`);
closePeerConnection(); closePeerConnection();
return; return;
} }
@ -325,9 +325,8 @@ export default function KvmIdRoute() {
if (location.pathname.includes("other-session")) return; if (location.pathname.includes("other-session")) return;
// If we're already connected or connecting, we don't need to connect // If we're already connected or connecting, we don't need to connect
if ( // We have to use the state from the store, because the peerConnection.connectionState doesnt trigger a value change, if called manually from .close()
["connected", "connecting", "new"].includes(peerConnection?.connectionState ?? "") if (["connected", "connecting", "new"].includes(peerConnectionState ?? "")) {
) {
return; return;
} }
@ -341,12 +340,7 @@ export default function KvmIdRoute() {
connectWebRTC(); connectWebRTC();
}, 3000); }, 3000);
return () => clearInterval(interval); return () => clearInterval(interval);
}, [ }, [connectWebRTC, connectionFailed, location.pathname, peerConnectionState]);
connectWebRTC,
connectionFailed,
location.pathname,
peerConnection?.connectionState,
]);
// On boot, if the connection state is undefined, we connect to the WebRTC // On boot, if the connection state is undefined, we connect to the WebRTC
useEffect(() => { useEffect(() => {