murmuraba/dist/components/chunk-results/chunk-header/chunk-header.js

Real-time audio noise reduction with advanced chunked processing for web applications

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { VadDisplay } from '../vad-display/vad-display';
export function ChunkHeader({ index, duration, noiseReduction, processingLatency, averageVad, vadData, isValid, isPlaying, isExpanded, hasProcessedAudio, onTogglePlayback, onToggleExpansion, onKeyDown, formatTime, formatPercentage }) {
    return (_jsxs("div", { className: "chunk__header", children: [_jsxs("div", { className: "chunk__info", children: [_jsxs("h3", { className: "chunk__title", children: ["Chunk ", index + 1, !isValid && (_jsx("span", { className: "chunk__error-badge", "aria-label": "Error", children: "\u274C" }))] }), averageVad !== undefined && (_jsx(VadDisplay, { averageVad: averageVad, vadData: vadData, chunkIndex: index })), _jsxs("div", { className: "chunk__meta", children: [_jsxs("span", { className: "meta-item", children: [_jsx("span", { className: "meta-label", children: "Duration:" }), _jsx("span", { className: "meta-value", children: formatTime(duration) })] }), _jsxs("span", { className: "meta-item", children: [_jsx("span", { className: "meta-label", children: "Noise Reduced:" }), _jsx("span", { className: "meta-value meta-value--highlight", children: formatPercentage(noiseReduction) })] }), _jsxs("span", { className: "meta-item", children: [_jsx("span", { className: "meta-label", children: "Latency:" }), _jsxs("span", { className: "meta-value", children: [processingLatency.toFixed(1), "ms"] })] })] })] }), _jsxs("div", { className: "chunk__controls", children: [_jsxs("button", { className: `btn btn-primary ${isPlaying ? 'btn--playing' : ''}`, onClick: onTogglePlayback, onKeyDown: (e) => onKeyDown(e, onTogglePlayback), disabled: !hasProcessedAudio || !isValid, "aria-label": `${isPlaying ? 'Pause' : 'Play'} processed chunk ${index + 1}`, type: "button", children: [_jsx("span", { className: "btn__icon", "aria-hidden": "true", children: isPlaying ? '⏸️' : '▶️' }), _jsx("span", { className: "btn__text", children: isPlaying ? 'Pause' : 'Play' })] }), _jsxs("button", { className: `btn btn-ghost ${isExpanded ? 'btn--active' : ''}`, onClick: onToggleExpansion, onKeyDown: (e) => onKeyDown(e, onToggleExpansion), "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} details for chunk ${index + 1}`, "aria-expanded": isExpanded, type: "button", children: [_jsx("span", { className: "btn__icon", "aria-hidden": "true", children: isExpanded ? '▲' : '▼' }), _jsx("span", { className: "btn__text", children: "Details" })] })] })] }));
}