summaryrefslogtreecommitdiff
path: root/apps/web/src/components/editor/audio-waveform.tsx
diff options
context:
space:
mode:
authorKha Nguyen <hi@khanguyen.com>2025-07-24 17:04:27 -0500
committerKha Nguyen <hi@khanguyen.com>2025-07-24 17:04:27 -0500
commit8e737d87e0accbf1d433f4c8b1e8e0f125849799 (patch)
tree386560ac1449991da1ab6d43637e82046a725e71 /apps/web/src/components/editor/audio-waveform.tsx
parent1ccacf6bb5db579cf6f343d9de57bce92d296f5f (diff)
downloadopencut-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.tsx42
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