murmuraba
Version:
Real-time audio noise reduction with advanced chunked processing for web applications
6 lines (5 loc) • 1.68 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { formatPercentage } from '../formatters';
export function ProcessingMetrics({ inputLevel, outputLevel, frameCount, droppedFrames }) {
return (_jsxs("div", { className: "details__section", children: [_jsx("h4", { className: "section__title", children: "\uD83D\uDCCA Processing Metrics" }), _jsxs("div", { className: "metrics-grid", children: [_jsxs("div", { className: "metric-item", children: [_jsx("span", { className: "metric__label", children: "Input Level" }), _jsx("span", { className: "metric__value", children: formatPercentage(inputLevel * 100) }), _jsx("div", { className: "metric__bar", children: _jsx("div", { className: "metric__fill metric__fill--input", style: { width: `${inputLevel * 100}%` }, "aria-hidden": "true" }) })] }), _jsxs("div", { className: "metric-item", children: [_jsx("span", { className: "metric__label", children: "Output Level" }), _jsx("span", { className: "metric__value", children: formatPercentage(outputLevel * 100) }), _jsx("div", { className: "metric__bar", children: _jsx("div", { className: "metric__fill metric__fill--output", style: { width: `${outputLevel * 100}%` }, "aria-hidden": "true" }) })] }), _jsxs("div", { className: "metric-item", children: [_jsx("span", { className: "metric__label", children: "Frames Processed" }), _jsx("span", { className: "metric__value", children: frameCount.toLocaleString() })] }), _jsxs("div", { className: "metric-item", children: [_jsx("span", { className: "metric__label", children: "Dropped Frames" }), _jsx("span", { className: "metric__value metric__value--warning", children: droppedFrames })] })] })] }));
}