mirror of https://github.com/jetkvm/kvm.git
Merge branch 'dev' into feat/audio-support
This commit is contained in:
Alex P
commit
219c972e33
|
|
@ -1,25 +1,25 @@
|
|||
import Card from "@components/Card";
|
||||
|
||||
export interface CustomTooltipProps {
|
||||
payload: { payload: { date: number; stat: number }; unit: string }[];
|
||||
payload: { payload: { date: number; metric: number }; unit: string }[];
|
||||
}
|
||||
|
||||
export default function CustomTooltip({ payload }: CustomTooltipProps) {
|
||||
if (payload?.length) {
|
||||
const toolTipData = payload[0];
|
||||
const { date, stat } = toolTipData.payload;
|
||||
const { date, metric } = toolTipData.payload;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div className="p-2 text-black dark:text-white">
|
||||
<div className="font-semibold">
|
||||
<div className="px-2 py-1.5 text-black dark:text-white">
|
||||
<div className="text-[13px] font-semibold">
|
||||
{new Date(date * 1000).toLocaleTimeString()}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-x-1">
|
||||
<div className="h-[2px] w-2 bg-blue-700" />
|
||||
<span >
|
||||
{stat} {toolTipData?.unit}
|
||||
<span className="text-[13px]">
|
||||
{metric} {toolTipData?.unit}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ export default function DashboardNavbar({
|
|||
<hr className="h-[20px] w-px self-center border-none bg-slate-800/20 dark:bg-slate-300/20" />
|
||||
<div className="relative inline-block text-left">
|
||||
<Menu>
|
||||
<MenuButton className="h-full">
|
||||
<MenuButton as="div" className="h-full">
|
||||
<Button className="flex h-full items-center gap-x-3 rounded-md border border-slate-800/20 bg-white px-2 py-1.5 dark:border-slate-600 dark:bg-slate-800 dark:text-white">
|
||||
{picture ? (
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -100,15 +100,12 @@ export default function KvmCard({
|
|||
)}
|
||||
</div>
|
||||
<Menu as="div" className="relative inline-block text-left">
|
||||
<div>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
theme="light"
|
||||
TrailingIcon={LuEllipsisVertical}
|
||||
size="MD"
|
||||
></MenuButton>
|
||||
</div>
|
||||
|
||||
<MenuButton
|
||||
as={Button}
|
||||
theme="light"
|
||||
TrailingIcon={LuEllipsisVertical}
|
||||
size="MD"
|
||||
></MenuButton>
|
||||
<MenuItems
|
||||
transition
|
||||
className="data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-leave:duration-75 data-enter:ease-out data-leave:ease-in"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,180 @@
|
|||
/* eslint-disable react-refresh/only-export-components */
|
||||
import { ComponentProps } from "react";
|
||||
import { cva, cx } from "cva";
|
||||
|
||||
import { someIterable } from "../utils";
|
||||
|
||||
import { GridCard } from "./Card";
|
||||
import MetricsChart from "./MetricsChart";
|
||||
|
||||
interface ChartPoint {
|
||||
date: number;
|
||||
metric: number | null;
|
||||
}
|
||||
|
||||
interface MetricProps<T, K extends keyof T> {
|
||||
title: string;
|
||||
description: string;
|
||||
stream?: Map<number, T>;
|
||||
metric?: K;
|
||||
data?: ChartPoint[];
|
||||
gate?: Map<number, unknown>;
|
||||
supported?: boolean;
|
||||
map?: (p: { date: number; metric: number | null }) => ChartPoint;
|
||||
domain?: [number, number];
|
||||
unit: string;
|
||||
heightClassName?: string;
|
||||
referenceValue?: number;
|
||||
badge?: ComponentProps<typeof MetricHeader>["badge"];
|
||||
badgeTheme?: ComponentProps<typeof MetricHeader>["badgeTheme"];
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a chart array from a metrics map and a metric name.
|
||||
*
|
||||
* @param metrics - Expected to be ordered from oldest to newest.
|
||||
* @param metricName - Name of the metric to create a chart array for.
|
||||
*/
|
||||
export function createChartArray<T, K extends keyof T>(
|
||||
metrics: Map<number, T>,
|
||||
metricName: K,
|
||||
) {
|
||||
const result: { date: number; metric: number | null }[] = [];
|
||||
const iter = metrics.entries();
|
||||
let next = iter.next() as IteratorResult<[number, T]>;
|
||||
const nowSeconds = Math.floor(Date.now() / 1000);
|
||||
|
||||
// We want 120 data points, in the chart.
|
||||
const firstDate = Math.min(next.value?.[0] ?? nowSeconds, nowSeconds - 120);
|
||||
|
||||
for (let t = firstDate; t < nowSeconds; t++) {
|
||||
while (!next.done && next.value[0] < t) next = iter.next();
|
||||
const has = !next.done && next.value[0] === t;
|
||||
|
||||
let metric = null;
|
||||
if (has) metric = next.value[1][metricName] as number;
|
||||
result.push({ date: t, metric });
|
||||
|
||||
if (has) next = iter.next();
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
function computeReferenceValue(points: ChartPoint[]): number | undefined {
|
||||
const values = points
|
||||
.filter(p => p.metric != null && Number.isFinite(p.metric))
|
||||
.map(p => Number(p.metric));
|
||||
|
||||
if (values.length === 0) return undefined;
|
||||
|
||||
const sum = values.reduce((acc, v) => acc + v, 0);
|
||||
const mean = sum / values.length;
|
||||
return Math.round(mean);
|
||||
}
|
||||
|
||||
const theme = {
|
||||
light:
|
||||
"bg-white text-black border border-slate-800/20 dark:border dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300",
|
||||
danger: "bg-red-500 dark:border-red-700 dark:bg-red-800 dark:text-red-50",
|
||||
primary: "bg-blue-500 dark:border-blue-700 dark:bg-blue-800 dark:text-blue-50",
|
||||
};
|
||||
|
||||
interface SettingsItemProps {
|
||||
readonly title: string;
|
||||
readonly description: string | React.ReactNode;
|
||||
readonly badge?: string;
|
||||
readonly className?: string;
|
||||
readonly children?: React.ReactNode;
|
||||
readonly badgeTheme?: keyof typeof theme;
|
||||
}
|
||||
|
||||
export function MetricHeader(props: SettingsItemProps) {
|
||||
const { title, description, badge } = props;
|
||||
const badgeVariants = cva({ variants: { theme: theme } });
|
||||
|
||||
return (
|
||||
<div className="space-y-0.5">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<div className="flex w-full items-center justify-between text-base font-semibold text-black dark:text-white">
|
||||
{title}
|
||||
{badge && (
|
||||
<span
|
||||
className={cx(
|
||||
"ml-2 rounded-sm px-2 py-1 font-mono text-[10px] leading-none font-medium",
|
||||
badgeVariants({ theme: props.badgeTheme ?? "light" }),
|
||||
)}
|
||||
>
|
||||
{badge}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-slate-700 dark:text-slate-300">{description}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Metric<T, K extends keyof T>({
|
||||
title,
|
||||
description,
|
||||
stream,
|
||||
metric,
|
||||
data,
|
||||
gate,
|
||||
supported,
|
||||
map,
|
||||
domain = [0, 600],
|
||||
unit = "",
|
||||
heightClassName = "h-[127px]",
|
||||
badge,
|
||||
badgeTheme,
|
||||
}: MetricProps<T, K>) {
|
||||
const ready = gate ? gate.size > 0 : stream ? stream.size > 0 : true;
|
||||
const supportedFinal =
|
||||
supported ??
|
||||
(stream && metric ? someIterable(stream, ([, s]) => s[metric] !== undefined) : true);
|
||||
|
||||
// Either we let the consumer provide their own chartArray, or we create one from the stream and metric.
|
||||
const raw = data ?? ((stream && metric && createChartArray(stream, metric)) || []);
|
||||
|
||||
// If the consumer provides a map function, we apply it to the raw data.
|
||||
const dataFinal: ChartPoint[] = map ? raw.map(map) : raw;
|
||||
|
||||
// Compute the average value of the metric.
|
||||
const referenceValue = computeReferenceValue(dataFinal);
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<MetricHeader
|
||||
title={title}
|
||||
description={description}
|
||||
badge={badge}
|
||||
badgeTheme={badgeTheme}
|
||||
/>
|
||||
|
||||
<GridCard>
|
||||
<div
|
||||
className={`flex ${heightClassName} w-full items-center justify-center text-sm text-slate-500`}
|
||||
>
|
||||
{!ready ? (
|
||||
<div className="flex flex-col items-center space-y-1">
|
||||
<p className="text-slate-700">Waiting for data...</p>
|
||||
</div>
|
||||
) : supportedFinal ? (
|
||||
<MetricsChart
|
||||
data={dataFinal}
|
||||
domain={domain}
|
||||
unit={unit}
|
||||
referenceValue={referenceValue}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex flex-col items-center space-y-1">
|
||||
<p className="text-black">Metric not supported</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</GridCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -12,13 +12,13 @@ import {
|
|||
|
||||
import CustomTooltip, { CustomTooltipProps } from "@components/CustomTooltip";
|
||||
|
||||
export default function StatChart({
|
||||
export default function MetricsChart({
|
||||
data,
|
||||
domain,
|
||||
unit,
|
||||
referenceValue,
|
||||
}: {
|
||||
data: { date: number; stat: number | null | undefined }[];
|
||||
data: { date: number; metric: number | null | undefined }[];
|
||||
domain?: [string | number, string | number];
|
||||
unit?: string;
|
||||
referenceValue?: number;
|
||||
|
|
@ -33,7 +33,7 @@ export default function StatChart({
|
|||
strokeLinecap="butt"
|
||||
stroke="rgba(30, 41, 59, 0.1)"
|
||||
/>
|
||||
{referenceValue && (
|
||||
{referenceValue !== undefined && (
|
||||
<ReferenceLine
|
||||
y={referenceValue}
|
||||
strokeDasharray="3 3"
|
||||
|
|
@ -64,7 +64,7 @@ export default function StatChart({
|
|||
.map(x => x.date)}
|
||||
/>
|
||||
<YAxis
|
||||
dataKey="stat"
|
||||
dataKey="metric"
|
||||
axisLine={false}
|
||||
orientation="right"
|
||||
tick={{
|
||||
|
|
@ -73,6 +73,7 @@ export default function StatChart({
|
|||
fill: "rgba(107, 114, 128, 1)",
|
||||
}}
|
||||
padding={{ top: 0, bottom: 0 }}
|
||||
allowDecimals
|
||||
tickLine={false}
|
||||
unit={unit}
|
||||
domain={domain || ["auto", "auto"]}
|
||||
|
|
@ -87,7 +88,7 @@ export default function StatChart({
|
|||
<Line
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
dataKey="stat"
|
||||
dataKey="metric"
|
||||
stroke="rgb(29 78 216)"
|
||||
strokeLinecap="round"
|
||||
strokeWidth={2}
|
||||
|
|
@ -1,74 +1,40 @@
|
|||
import { useInterval } from "usehooks-ts";
|
||||
|
||||
import SidebarHeader from "@/components/SidebarHeader";
|
||||
import { GridCard } from "@/components/Card";
|
||||
import { useRTCStore, useUiStore } from "@/hooks/stores";
|
||||
import StatChart from "@/components/StatChart";
|
||||
import { someIterable } from "@/utils";
|
||||
|
||||
function createChartArray<T, K extends keyof T>(
|
||||
stream: Map<number, T>,
|
||||
metric: K,
|
||||
): { date: number; stat: T[K] | null }[] {
|
||||
const stat = Array.from(stream).map(([key, stats]) => {
|
||||
return { date: key, stat: stats[metric] };
|
||||
});
|
||||
|
||||
// Sort the dates to ensure they are in chronological order
|
||||
const sortedStat = stat.map(x => x.date).sort((a, b) => a - b);
|
||||
|
||||
// Determine the earliest statistic date
|
||||
const earliestStat = sortedStat[0];
|
||||
|
||||
// Current time in seconds since the Unix epoch
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
|
||||
// Determine the starting point for the chart data
|
||||
const firstChartDate = earliestStat ? Math.min(earliestStat, now - 120) : now - 120;
|
||||
|
||||
// Generate the chart array for the range between 'firstChartDate' and 'now'
|
||||
return Array.from({ length: now - firstChartDate }, (_, i) => {
|
||||
const currentDate = firstChartDate + i;
|
||||
return {
|
||||
date: currentDate,
|
||||
// Find the statistic for 'currentDate', or use the last known statistic if none exists for that date
|
||||
stat: stat.find(x => x.date === currentDate)?.stat ?? null,
|
||||
};
|
||||
});
|
||||
}
|
||||
import { createChartArray, Metric } from "../Metric";
|
||||
import { SettingsSectionHeader } from "../SettingsSectionHeader";
|
||||
|
||||
export default function ConnectionStatsSidebar() {
|
||||
const { sidebarView, setSidebarView } = useUiStore();
|
||||
const {
|
||||
mediaStream,
|
||||
peerConnection,
|
||||
inboundRtpStats,
|
||||
appendInboundRtpStats,
|
||||
candidatePairStats,
|
||||
appendCandidatePairStats,
|
||||
appendLocalCandidateStats,
|
||||
appendRemoteCandidateStats,
|
||||
appendDiskDataChannelStats,
|
||||
mediaStream,
|
||||
peerConnection,
|
||||
inboundRtpStats: inboundVideoRtpStats,
|
||||
appendInboundRtpStats: appendInboundVideoRtpStats,
|
||||
candidatePairStats: iceCandidatePairStats,
|
||||
appendCandidatePairStats,
|
||||
appendLocalCandidateStats,
|
||||
appendRemoteCandidateStats,
|
||||
appendDiskDataChannelStats,
|
||||
} = useRTCStore();
|
||||
|
||||
function isMetricSupported<T, K extends keyof T>(
|
||||
stream: Map<number, T>,
|
||||
metric: K,
|
||||
): boolean {
|
||||
return Array.from(stream).some(([, stat]) => stat[metric] !== undefined);
|
||||
}
|
||||
|
||||
useInterval(function collectWebRTCStats() {
|
||||
(async () => {
|
||||
if (!mediaStream) return;
|
||||
|
||||
const videoTrack = mediaStream.getVideoTracks()[0];
|
||||
if (!videoTrack) return;
|
||||
|
||||
const stats = await peerConnection?.getStats();
|
||||
let successfulLocalCandidateId: string | null = null;
|
||||
let successfulRemoteCandidateId: string | null = null;
|
||||
|
||||
stats?.forEach(report => {
|
||||
if (report.type === "inbound-rtp") {
|
||||
appendInboundRtpStats(report);
|
||||
if (report.type === "inbound-rtp" && report.kind === "video") {
|
||||
appendInboundVideoRtpStats(report);
|
||||
} else if (report.type === "candidate-pair" && report.nominated) {
|
||||
if (report.state === "succeeded") {
|
||||
successfulLocalCandidateId = report.localCandidateId;
|
||||
|
|
@ -91,144 +57,133 @@ export default function ConnectionStatsSidebar() {
|
|||
})();
|
||||
}, 500);
|
||||
|
||||
const jitterBufferDelay = createChartArray(inboundVideoRtpStats, "jitterBufferDelay");
|
||||
const jitterBufferEmittedCount = createChartArray(
|
||||
inboundVideoRtpStats,
|
||||
"jitterBufferEmittedCount",
|
||||
);
|
||||
|
||||
const jitterBufferAvgDelayData = jitterBufferDelay.map((d, idx) => {
|
||||
if (idx === 0) return { date: d.date, metric: null };
|
||||
const prevDelay = jitterBufferDelay[idx - 1]?.metric as number | null | undefined;
|
||||
const currDelay = d.metric as number | null | undefined;
|
||||
const prevCountEmitted =
|
||||
(jitterBufferEmittedCount[idx - 1]?.metric as number | null | undefined) ?? null;
|
||||
const currCountEmitted =
|
||||
(jitterBufferEmittedCount[idx]?.metric as number | null | undefined) ?? null;
|
||||
|
||||
if (
|
||||
prevDelay == null ||
|
||||
currDelay == null ||
|
||||
prevCountEmitted == null ||
|
||||
currCountEmitted == null
|
||||
) {
|
||||
return { date: d.date, metric: null };
|
||||
}
|
||||
|
||||
const deltaDelay = currDelay - prevDelay;
|
||||
const deltaEmitted = currCountEmitted - prevCountEmitted;
|
||||
|
||||
// Guard counter resets or no emitted frames
|
||||
if (deltaDelay < 0 || deltaEmitted <= 0) {
|
||||
return { date: d.date, metric: null };
|
||||
}
|
||||
|
||||
const valueMs = Math.round((deltaDelay / deltaEmitted) * 1000);
|
||||
return { date: d.date, metric: valueMs };
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="grid h-full grid-rows-(--grid-headerBody) shadow-xs">
|
||||
<SidebarHeader title="Connection Stats" setSidebarView={setSidebarView} />
|
||||
<div className="h-full space-y-4 overflow-y-scroll bg-white px-4 py-2 pb-8 dark:bg-slate-900">
|
||||
<div className="space-y-4">
|
||||
{/*
|
||||
The entire sidebar component is always rendered, with a display none when not visible
|
||||
The charts below, need a height and width, otherwise they throw. So simply don't render them unless the thing is visible
|
||||
*/}
|
||||
{sidebarView === "connection-stats" && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-black dark:text-white">
|
||||
Packets Lost
|
||||
</h2>
|
||||
<p className="text-sm text-slate-700 dark:text-slate-300">
|
||||
Number of data packets lost during transmission.
|
||||
</p>
|
||||
</div>
|
||||
<GridCard>
|
||||
<div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
|
||||
{inboundRtpStats.size === 0 ? (
|
||||
<div className="flex flex-col items-center space-y-1">
|
||||
<p className="text-slate-700">Waiting for data...</p>
|
||||
</div>
|
||||
) : isMetricSupported(inboundRtpStats, "packetsLost") ? (
|
||||
<StatChart
|
||||
data={createChartArray(inboundRtpStats, "packetsLost")}
|
||||
domain={[0, 100]}
|
||||
unit=" packets"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex flex-col items-center space-y-1">
|
||||
<p className="text-black">Metric not supported</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</GridCard>
|
||||
<div className="space-y-8">
|
||||
{/* Connection Group */}
|
||||
<div className="space-y-3">
|
||||
<SettingsSectionHeader
|
||||
title="Connection"
|
||||
description="The connection between the client and the JetKVM."
|
||||
/>
|
||||
<Metric
|
||||
title="Round-Trip Time"
|
||||
description="Round-trip time for the active ICE candidate pair between peers."
|
||||
stream={iceCandidatePairStats}
|
||||
metric="currentRoundTripTime"
|
||||
map={x => ({
|
||||
date: x.date,
|
||||
metric: x.metric != null ? Math.round(x.metric * 1000) : null,
|
||||
})}
|
||||
domain={[0, 600]}
|
||||
unit=" ms"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-black dark:text-white">
|
||||
Round-Trip Time
|
||||
</h2>
|
||||
<p className="text-sm text-slate-700 dark:text-slate-300">
|
||||
Time taken for data to travel from source to destination and back
|
||||
</p>
|
||||
</div>
|
||||
<GridCard>
|
||||
<div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
|
||||
{inboundRtpStats.size === 0 ? (
|
||||
<div className="flex flex-col items-center space-y-1">
|
||||
<p className="text-slate-700">Waiting for data...</p>
|
||||
</div>
|
||||
) : isMetricSupported(candidatePairStats, "currentRoundTripTime") ? (
|
||||
<StatChart
|
||||
data={createChartArray(
|
||||
candidatePairStats,
|
||||
"currentRoundTripTime",
|
||||
).map(x => {
|
||||
return {
|
||||
date: x.date,
|
||||
stat: x.stat ? Math.round(x.stat * 1000) : null,
|
||||
};
|
||||
})}
|
||||
domain={[0, 600]}
|
||||
unit=" ms"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex flex-col items-center space-y-1">
|
||||
<p className="text-black">Metric not supported</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</GridCard>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-black dark:text-white">
|
||||
Jitter
|
||||
</h2>
|
||||
<p className="text-sm text-slate-700 dark:text-slate-300">
|
||||
Variation in packet delay, affecting video smoothness.{" "}
|
||||
</p>
|
||||
</div>
|
||||
<GridCard>
|
||||
<div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
|
||||
{inboundRtpStats.size === 0 ? (
|
||||
<div className="flex flex-col items-center space-y-1">
|
||||
<p className="text-slate-700">Waiting for data...</p>
|
||||
</div>
|
||||
) : (
|
||||
<StatChart
|
||||
data={createChartArray(inboundRtpStats, "jitter").map(x => {
|
||||
return {
|
||||
date: x.date,
|
||||
stat: x.stat ? Math.round(x.stat * 1000) : null,
|
||||
};
|
||||
})}
|
||||
domain={[0, 300]}
|
||||
unit=" ms"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</GridCard>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-black dark:text-white">
|
||||
Frames per second
|
||||
</h2>
|
||||
<p className="text-sm text-slate-700 dark:text-slate-300">
|
||||
Number of video frames displayed per second.
|
||||
</p>
|
||||
</div>
|
||||
<GridCard>
|
||||
<div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
|
||||
{inboundRtpStats.size === 0 ? (
|
||||
<div className="flex flex-col items-center space-y-1">
|
||||
<p className="text-slate-700">Waiting for data...</p>
|
||||
</div>
|
||||
) : (
|
||||
<StatChart
|
||||
data={createChartArray(inboundRtpStats, "framesPerSecond").map(
|
||||
x => {
|
||||
return {
|
||||
date: x.date,
|
||||
stat: x.stat ? x.stat : null,
|
||||
};
|
||||
},
|
||||
)}
|
||||
domain={[0, 80]}
|
||||
unit=" fps"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</GridCard>
|
||||
|
||||
{/* Video Group */}
|
||||
<div className="space-y-3">
|
||||
<SettingsSectionHeader
|
||||
title="Video"
|
||||
description="The video stream from the JetKVM to the client."
|
||||
/>
|
||||
|
||||
{/* RTP Jitter */}
|
||||
<Metric
|
||||
title="Network Stability"
|
||||
badge="Jitter"
|
||||
badgeTheme="light"
|
||||
description="How steady the flow of inbound video packets is across the network."
|
||||
stream={inboundVideoRtpStats}
|
||||
metric="jitter"
|
||||
map={x => ({
|
||||
date: x.date,
|
||||
metric: x.metric != null ? Math.round(x.metric * 1000) : null,
|
||||
})}
|
||||
domain={[0, 10]}
|
||||
unit=" ms"
|
||||
/>
|
||||
|
||||
{/* Playback Delay */}
|
||||
<Metric
|
||||
title="Playback Delay"
|
||||
description="Delay added by the jitter buffer to smooth playback when frames arrive unevenly."
|
||||
badge="Jitter Buffer Avg. Delay"
|
||||
badgeTheme="light"
|
||||
data={jitterBufferAvgDelayData}
|
||||
gate={inboundVideoRtpStats}
|
||||
supported={
|
||||
someIterable(
|
||||
inboundVideoRtpStats,
|
||||
([, x]) => x.jitterBufferDelay != null,
|
||||
) &&
|
||||
someIterable(
|
||||
inboundVideoRtpStats,
|
||||
([, x]) => x.jitterBufferEmittedCount != null,
|
||||
)
|
||||
}
|
||||
domain={[0, 30]}
|
||||
unit=" ms"
|
||||
/>
|
||||
|
||||
{/* Packets Lost */}
|
||||
<Metric
|
||||
title="Packets Lost"
|
||||
description="Count of lost inbound video RTP packets."
|
||||
stream={inboundVideoRtpStats}
|
||||
metric="packetsLost"
|
||||
domain={[0, 100]}
|
||||
unit=" packets"
|
||||
/>
|
||||
|
||||
{/* Frames Per Second */}
|
||||
<Metric
|
||||
title="Frames per second"
|
||||
description="Number of inbound video frames displayed per second."
|
||||
stream={inboundVideoRtpStats}
|
||||
metric="framesPerSecond"
|
||||
domain={[0, 80]}
|
||||
unit=" fps"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -116,6 +116,7 @@ if (isOnDevice) {
|
|||
path: "/",
|
||||
errorElement: <ErrorBoundary />,
|
||||
element: <DeviceRoute />,
|
||||
HydrateFallback: () => <div className="p-4">Loading...</div>,
|
||||
loader: DeviceRoute.loader,
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -355,7 +355,7 @@ function UrlView({
|
|||
const popularImages = [
|
||||
{
|
||||
name: "Ubuntu 24.04 LTS",
|
||||
url: "https://releases.ubuntu.com/24.04.2/ubuntu-24.04.2-desktop-amd64.iso",
|
||||
url: "https://releases.ubuntu.com/24.04.3/ubuntu-24.04.3-desktop-amd64.iso",
|
||||
icon: UbuntuIcon,
|
||||
},
|
||||
{
|
||||
|
|
@ -369,8 +369,8 @@ function UrlView({
|
|||
icon: DebianIcon,
|
||||
},
|
||||
{
|
||||
name: "Fedora 41",
|
||||
url: "https://download.fedoraproject.org/pub/fedora/linux/releases/41/Workstation/x86_64/iso/Fedora-Workstation-Live-x86_64-41-1.4.iso",
|
||||
name: "Fedora 42",
|
||||
url: "https://download.fedoraproject.org/pub/fedora/linux/releases/42/Workstation/x86_64/iso/Fedora-Workstation-Live-42-1.1.x86_64.iso",
|
||||
icon: FedoraIcon,
|
||||
},
|
||||
{
|
||||
|
|
@ -385,7 +385,7 @@ function UrlView({
|
|||
},
|
||||
{
|
||||
name: "Arch Linux",
|
||||
url: "https://archlinux.doridian.net/iso/2025.02.01/archlinux-2025.02.01-x86_64.iso",
|
||||
url: "https://archlinux.doridian.net/iso/latest/archlinux-x86_64.iso",
|
||||
icon: ArchIcon,
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { Button } from "@/components/Button";
|
||||
import { TextAreaWithLabel } from "@/components/TextArea";
|
||||
import { JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc";
|
||||
import { SettingsPageHeader } from "@components/SettingsPageheader";
|
||||
import { useSettingsStore } from "@/hooks/stores";
|
||||
|
||||
import notifications from "../notifications";
|
||||
import { SelectMenuBasic } from "../components/SelectMenuBasic";
|
||||
import { SelectMenuBasic } from "@components/SelectMenuBasic";
|
||||
import Fieldset from "@components/Fieldset";
|
||||
import notifications from "@/notifications";
|
||||
|
||||
import { SettingsItem } from "./devices.$id.settings";
|
||||
|
||||
const defaultEdid =
|
||||
"00ffffffffffff0052620188008888881c150103800000780a0dc9a05747982712484c00000001010101010101010101010101010101023a801871382d40582c4500c48e2100001e011d007251d01e206e285500c48e2100001e000000fc00543734392d6648443732300a20000000fd00147801ff1d000a202020202020017b";
|
||||
const edids = [
|
||||
|
|
@ -50,21 +51,27 @@ export default function SettingsVideoRoute() {
|
|||
const [streamQuality, setStreamQuality] = useState("1");
|
||||
const [customEdidValue, setCustomEdidValue] = useState<string | null>(null);
|
||||
const [edid, setEdid] = useState<string | null>(null);
|
||||
const [edidLoading, setEdidLoading] = useState(false);
|
||||
|
||||
// Video enhancement settings from store
|
||||
const {
|
||||
videoSaturation, setVideoSaturation,
|
||||
videoBrightness, setVideoBrightness,
|
||||
videoContrast, setVideoContrast
|
||||
videoSaturation,
|
||||
setVideoSaturation,
|
||||
videoBrightness,
|
||||
setVideoBrightness,
|
||||
videoContrast,
|
||||
setVideoContrast,
|
||||
} = useSettingsStore();
|
||||
|
||||
useEffect(() => {
|
||||
setEdidLoading(true);
|
||||
send("getStreamQualityFactor", {}, (resp: JsonRpcResponse) => {
|
||||
if ("error" in resp) return;
|
||||
setStreamQuality(String(resp.result));
|
||||
});
|
||||
|
||||
send("getEDID", {}, (resp: JsonRpcResponse) => {
|
||||
setEdidLoading(false);
|
||||
if ("error" in resp) {
|
||||
notifications.error(`Failed to get EDID: ${resp.error.data || "Unknown error"}`);
|
||||
return;
|
||||
|
|
@ -89,28 +96,36 @@ export default function SettingsVideoRoute() {
|
|||
}, [send]);
|
||||
|
||||
const handleStreamQualityChange = (factor: string) => {
|
||||
send("setStreamQualityFactor", { factor: Number(factor) }, (resp: JsonRpcResponse) => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to set stream quality: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
send(
|
||||
"setStreamQualityFactor",
|
||||
{ factor: Number(factor) },
|
||||
(resp: JsonRpcResponse) => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to set stream quality: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
notifications.success(`Stream quality set to ${streamQualityOptions.find(x => x.value === factor)?.label}`);
|
||||
setStreamQuality(factor);
|
||||
});
|
||||
notifications.success(
|
||||
`Stream quality set to ${streamQualityOptions.find(x => x.value === factor)?.label}`,
|
||||
);
|
||||
setStreamQuality(factor);
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
const handleEDIDChange = (newEdid: string) => {
|
||||
setEdidLoading(true);
|
||||
send("setEDID", { edid: newEdid }, (resp: JsonRpcResponse) => {
|
||||
setEdidLoading(false);
|
||||
if ("error" in resp) {
|
||||
notifications.error(`Failed to set EDID: ${resp.error.data || "Unknown error"}`);
|
||||
return;
|
||||
}
|
||||
|
||||
notifications.success(
|
||||
`EDID set successfully to ${edids.find(x => x.value === newEdid)?.label}`,
|
||||
`EDID set successfully to ${edids.find(x => x.value === newEdid)?.label ?? "the custom EDID"}`,
|
||||
);
|
||||
// Update the EDID value in the UI
|
||||
setEdid(newEdid);
|
||||
|
|
@ -158,7 +173,7 @@ export default function SettingsVideoRoute() {
|
|||
step="0.1"
|
||||
value={videoSaturation}
|
||||
onChange={e => setVideoSaturation(parseFloat(e.target.value))}
|
||||
className="w-32 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
||||
className="h-2 w-32 cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
|
||||
/>
|
||||
</SettingsItem>
|
||||
|
||||
|
|
@ -173,7 +188,7 @@ export default function SettingsVideoRoute() {
|
|||
step="0.1"
|
||||
value={videoBrightness}
|
||||
onChange={e => setVideoBrightness(parseFloat(e.target.value))}
|
||||
className="w-32 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
||||
className="h-2 w-32 cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
|
||||
/>
|
||||
</SettingsItem>
|
||||
|
||||
|
|
@ -188,7 +203,7 @@ export default function SettingsVideoRoute() {
|
|||
step="0.1"
|
||||
value={videoContrast}
|
||||
onChange={e => setVideoContrast(parseFloat(e.target.value))}
|
||||
className="w-32 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
||||
className="h-2 w-32 cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
|
||||
/>
|
||||
</SettingsItem>
|
||||
|
||||
|
|
@ -205,60 +220,64 @@ export default function SettingsVideoRoute() {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SettingsItem
|
||||
title="EDID"
|
||||
description="Adjust the EDID settings for the display"
|
||||
>
|
||||
<SelectMenuBasic
|
||||
size="SM"
|
||||
label=""
|
||||
fullWidth
|
||||
value={customEdidValue ? "custom" : edid || "asd"}
|
||||
onChange={e => {
|
||||
if (e.target.value === "custom") {
|
||||
setEdid("custom");
|
||||
setCustomEdidValue("");
|
||||
} else {
|
||||
setCustomEdidValue(null);
|
||||
handleEDIDChange(e.target.value as string);
|
||||
}
|
||||
}}
|
||||
options={[...edids, { value: "custom", label: "Custom" }]}
|
||||
/>
|
||||
</SettingsItem>
|
||||
{customEdidValue !== null && (
|
||||
<>
|
||||
<SettingsItem
|
||||
title="Custom EDID"
|
||||
description="EDID details video mode compatibility. Default settings works in most cases, but unique UEFI/BIOS might need adjustments."
|
||||
/>
|
||||
<TextAreaWithLabel
|
||||
label="EDID File"
|
||||
placeholder="00F..."
|
||||
rows={3}
|
||||
value={customEdidValue}
|
||||
onChange={e => setCustomEdidValue(e.target.value)}
|
||||
/>
|
||||
<div className="flex justify-start gap-x-2">
|
||||
<Button
|
||||
size="SM"
|
||||
theme="primary"
|
||||
text="Set Custom EDID"
|
||||
onClick={() => handleEDIDChange(customEdidValue)}
|
||||
/>
|
||||
<Button
|
||||
size="SM"
|
||||
theme="light"
|
||||
text="Restore to default"
|
||||
onClick={() => {
|
||||
<Fieldset disabled={edidLoading} className="space-y-2">
|
||||
<SettingsItem
|
||||
title="EDID"
|
||||
description="Adjust the EDID settings for the display"
|
||||
loading={edidLoading}
|
||||
>
|
||||
<SelectMenuBasic
|
||||
size="SM"
|
||||
label=""
|
||||
fullWidth
|
||||
value={customEdidValue ? "custom" : edid || "asd"}
|
||||
onChange={e => {
|
||||
if (e.target.value === "custom") {
|
||||
setEdid("custom");
|
||||
setCustomEdidValue("");
|
||||
} else {
|
||||
setCustomEdidValue(null);
|
||||
handleEDIDChange(defaultEdid);
|
||||
}}
|
||||
handleEDIDChange(e.target.value as string);
|
||||
}
|
||||
}}
|
||||
options={[...edids, { value: "custom", label: "Custom" }]}
|
||||
/>
|
||||
</SettingsItem>
|
||||
{customEdidValue !== null && (
|
||||
<>
|
||||
<SettingsItem
|
||||
title="Custom EDID"
|
||||
description="EDID details video mode compatibility. Default settings works in most cases, but unique UEFI/BIOS might need adjustments."
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<TextAreaWithLabel
|
||||
label="EDID File"
|
||||
placeholder="00F..."
|
||||
rows={3}
|
||||
value={customEdidValue}
|
||||
onChange={e => setCustomEdidValue(e.target.value)}
|
||||
/>
|
||||
<div className="flex justify-start gap-x-2">
|
||||
<Button
|
||||
size="SM"
|
||||
theme="primary"
|
||||
text="Set Custom EDID"
|
||||
loading={edidLoading}
|
||||
onClick={() => handleEDIDChange(customEdidValue)}
|
||||
/>
|
||||
<Button
|
||||
size="SM"
|
||||
theme="light"
|
||||
text="Restore to default"
|
||||
loading={edidLoading}
|
||||
onClick={() => {
|
||||
setCustomEdidValue(null);
|
||||
handleEDIDChange(defaultEdid);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -94,6 +94,17 @@ export const formatters = {
|
|||
},
|
||||
};
|
||||
|
||||
export function someIterable<T>(
|
||||
iterable: Iterable<T>,
|
||||
predicate: (item: T) => boolean,
|
||||
): boolean {
|
||||
for (const item of iterable) {
|
||||
if (predicate(item)) return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
export const VIDEO = new Blob(
|
||||
[
|
||||
new Uint8Array([
|
||||
|
|
|
|||
Loading…
Reference in New Issue