diff options
| author | Kha Nguyen <hi@khanguyen.com> | 2025-07-24 17:04:27 -0500 |
|---|---|---|
| committer | Kha Nguyen <hi@khanguyen.com> | 2025-07-24 17:04:27 -0500 |
| commit | 8e737d87e0accbf1d433f4c8b1e8e0f125849799 (patch) | |
| tree | 386560ac1449991da1ab6d43637e82046a725e71 /apps/web/src/components/editor/audio-waveform.tsx | |
| parent | 1ccacf6bb5db579cf6f343d9de57bce92d296f5f (diff) | |
| download | opencut-8e737d87e0accbf1d433f4c8b1e8e0f125849799.tar.gz | |
Revert "merge main"
This reverts commit 1ccacf6bb5db579cf6f343d9de57bce92d296f5f.
Diffstat (limited to 'apps/web/src/components/editor/audio-waveform.tsx')
| -rw-r--r-- | apps/web/src/components/editor/audio-waveform.tsx | 42 |
1 files changed, 20 insertions, 22 deletions
diff --git a/apps/web/src/components/editor/audio-waveform.tsx b/apps/web/src/components/editor/audio-waveform.tsx index a673f995..75a5ae06 100644 --- a/apps/web/src/components/editor/audio-waveform.tsx +++ b/apps/web/src/components/editor/audio-waveform.tsx @@ -1,5 +1,5 @@ -import React, { useEffect, useRef, useState } from "react"; -import WaveSurfer from "wavesurfer.js"; +import React, { useEffect, useRef, useState } from 'react'; +import WaveSurfer from 'wavesurfer.js'; interface AudioWaveformProps { audioUrl: string; @@ -7,10 +7,10 @@ interface AudioWaveformProps { className?: string; } -const AudioWaveform: React.FC<AudioWaveformProps> = ({ - audioUrl, - height = 32, - className = "", +const AudioWaveform: React.FC<AudioWaveformProps> = ({ + audioUrl, + height = 32, + className = '' }) => { const waveformRef = useRef<HTMLDivElement>(null); const wavesurfer = useRef<WaveSurfer | null>(null); @@ -36,26 +36,26 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({ wavesurfer.current = WaveSurfer.create({ container: waveformRef.current, - waveColor: "rgba(255, 255, 255, 0.6)", - progressColor: "rgba(255, 255, 255, 0.9)", - cursorColor: "transparent", + waveColor: 'rgba(255, 255, 255, 0.6)', + progressColor: 'rgba(255, 255, 255, 0.9)', + cursorColor: 'transparent', barWidth: 2, barGap: 1, - height, + height: height, normalize: true, interact: false, }); // Event listeners - wavesurfer.current.on("ready", () => { + wavesurfer.current.on('ready', () => { if (mounted) { setIsLoading(false); setError(false); } }); - wavesurfer.current.on("error", (err) => { - console.error("WaveSurfer error:", err); + wavesurfer.current.on('error', (err) => { + console.error('WaveSurfer error:', err); if (mounted) { setError(true); setIsLoading(false); @@ -63,8 +63,9 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({ }); await wavesurfer.current.load(audioUrl); + } catch (err) { - console.error("Failed to initialize WaveSurfer:", err); + console.error('Failed to initialize WaveSurfer:', err); if (mounted) { setError(true); setIsLoading(false); @@ -89,10 +90,7 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({ if (error) { return ( - <div - className={`flex items-center justify-center ${className}`} - style={{ height }} - > + <div className={`flex items-center justify-center ${className}`} style={{ height }}> <span className="text-xs text-foreground/60">Audio unavailable</span> </div> ); @@ -105,13 +103,13 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({ <span className="text-xs text-foreground/60">Loading...</span> </div> )} - <div - ref={waveformRef} - className={`w-full transition-opacity duration-200 ${isLoading ? "opacity-0" : "opacity-100"}`} + <div + ref={waveformRef} + className={`w-full transition-opacity duration-200 ${isLoading ? 'opacity-0' : 'opacity-100'}`} style={{ height }} /> </div> ); }; -export default AudioWaveform; +export default AudioWaveform;
\ No newline at end of file |
