mirror of https://github.com/jetkvm/kvm.git
69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
import StatusCard from "@components/StatusCards";
|
|
import { m } from "@localizations/messages.js";
|
|
|
|
const PeerConnectionStatusMap = {
|
|
connected: m.peer_connection_connected(),
|
|
connecting: m.peer_connection_connecting(),
|
|
disconnected: m.peer_connection_disconnected(),
|
|
error: m.peer_connection_error(),
|
|
closing: m.peer_connection_closing(),
|
|
failed: m.peer_connection_failed(),
|
|
closed: m.peer_connection_closed(),
|
|
new: m.peer_connection_new(),
|
|
} as Record<RTCPeerConnectionState | "error" | "closing", string>;
|
|
|
|
export type PeerConnections = keyof typeof PeerConnectionStatusMap;
|
|
|
|
type StatusProps = Record<
|
|
PeerConnections,
|
|
{
|
|
statusIndicatorClassName: string;
|
|
}
|
|
>;
|
|
|
|
export default function PeerConnectionStatusCard({
|
|
state,
|
|
title,
|
|
}: {
|
|
state?: RTCPeerConnectionState | null;
|
|
title?: string;
|
|
}) {
|
|
if (!state) return null;
|
|
const StatusCardProps: StatusProps = {
|
|
connected: {
|
|
statusIndicatorClassName: "bg-green-500 border-green-600",
|
|
},
|
|
connecting: {
|
|
statusIndicatorClassName: "bg-slate-300 border-slate-400",
|
|
},
|
|
disconnected: {
|
|
statusIndicatorClassName: "bg-slate-300 border-slate-400",
|
|
},
|
|
error: {
|
|
statusIndicatorClassName: "bg-red-500 border-red-600",
|
|
},
|
|
closing: {
|
|
statusIndicatorClassName: "bg-slate-300 border-slate-400",
|
|
},
|
|
failed: {
|
|
statusIndicatorClassName: "bg-red-500 border-red-600",
|
|
},
|
|
closed: {
|
|
statusIndicatorClassName: "bg-slate-300 border-slate-400",
|
|
},
|
|
["new"]: {
|
|
statusIndicatorClassName: "bg-slate-300 border-slate-400",
|
|
},
|
|
};
|
|
const props = StatusCardProps[state];
|
|
if (!props) return;
|
|
|
|
return (
|
|
<StatusCard
|
|
title={title || "JetKVM Device"}
|
|
status={PeerConnectionStatusMap[state]}
|
|
{...StatusCardProps[state]}
|
|
/>
|
|
);
|
|
}
|