murmuraba
Version:
Real-time audio noise reduction with advanced chunked processing for web applications
17 lines (16 loc) • 3.98 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { SyncedWaveforms } from '../../synced-waveforms/synced-waveforms';
import '../audio-controls.css';
export function AudioControls({ chunkId: _chunkId, index: _index, isPlaying, hasProcessedAudio, hasOriginalAudio, isValid, onTogglePlayback, onDownload, processedAudioUrl, originalAudioUrl, currentlyPlayingType }) {
return (_jsxs("div", { className: "details__section", children: [_jsx("h4", { className: "section__title", children: "\uD83C\uDFB5 Audio Controls" }), processedAudioUrl && originalAudioUrl && (_jsx(SyncedWaveforms, { processedAudioUrl: processedAudioUrl, originalAudioUrl: originalAudioUrl, isPlaying: isPlaying && currentlyPlayingType !== null, disabled: false, showVolumeControls: true, showPlaybackControls: true, processedLabel: "Processed Audio", originalLabel: "Original Audio", onPlayingChange: (playing) => {
if (playing) {
onTogglePlayback('processed');
}
else {
// Stop current playback
if (currentlyPlayingType) {
onTogglePlayback(currentlyPlayingType);
}
}
} })), _jsxs("div", { className: "audio-controls-grid", children: [hasOriginalAudio && (_jsxs("div", { className: "audio-group", children: [_jsx("h5", { className: "audio-group__title", children: "Original Audio" }), _jsxs("div", { className: "audio-controls__row", children: [_jsxs("button", { className: `btn btn-secondary ${isPlaying && currentlyPlayingType === 'original' ? 'btn--playing' : ''}`, onClick: () => onTogglePlayback('original'), disabled: !hasOriginalAudio || !isValid, "aria-label": `${isPlaying && currentlyPlayingType === 'original' ? 'Pause' : 'Play'} original audio`, type: "button", children: [_jsx("span", { className: "btn__icon", "aria-hidden": "true", children: isPlaying && currentlyPlayingType === 'original' ? '⏸️' : '▶️' }), _jsxs("span", { children: [isPlaying && currentlyPlayingType === 'original' ? 'Pause' : 'Play', " Original"] })] }), _jsx("button", { className: "btn btn-ghost btn--small", onClick: () => onDownload('wav', 'original'), disabled: !hasOriginalAudio || !isValid, "aria-label": "Download original audio as WAV", type: "button", children: "\uD83D\uDCC4 Original WAV" }), _jsx("button", { className: "btn btn-ghost btn--small", onClick: () => onDownload('mp3', 'original'), disabled: !hasOriginalAudio || !isValid, "aria-label": "Download original audio as MP3", type: "button", children: "\uD83C\uDFB5 Original MP3" })] })] })), _jsxs("div", { className: "audio-group", children: [_jsx("h5", { className: "audio-group__title", children: "Processed Audio" }), _jsxs("div", { className: "audio-controls__row", children: [_jsxs("button", { className: `btn btn-secondary ${isPlaying && currentlyPlayingType === 'processed' ? 'btn--playing' : ''}`, onClick: () => onTogglePlayback('processed'), disabled: !hasProcessedAudio || !isValid, "aria-label": `${isPlaying && currentlyPlayingType === 'processed' ? 'Pause' : 'Play'} processed audio`, type: "button", children: [_jsx("span", { className: "btn__icon", "aria-hidden": "true", children: isPlaying && currentlyPlayingType === 'processed' ? '⏸️' : '▶️' }), _jsxs("span", { children: [isPlaying && currentlyPlayingType === 'processed' ? 'Pause' : 'Play', " Processed"] })] }), _jsx("button", { className: "btn btn-ghost btn--small", onClick: () => onDownload('wav', 'processed'), disabled: !hasProcessedAudio || !isValid, "aria-label": "Download processed audio as WAV", type: "button", children: "\uD83D\uDCC4 WAV" }), _jsx("button", { className: "btn btn-ghost btn--small", onClick: () => onDownload('mp3', 'processed'), disabled: !hasProcessedAudio || !isValid, "aria-label": "Download processed audio as MP3", type: "button", children: "\uD83C\uDFB5 MP3" })] })] })] })] }));
}