summaryrefslogtreecommitdiff
path: root/apps/web/src/components/editor/audio-waveform.tsx
diff options
context:
space:
mode:
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, 22 insertions, 20 deletions
diff --git a/apps/web/src/components/editor/audio-waveform.tsx b/apps/web/src/components/editor/audio-waveform.tsx
index 75a5ae06..a673f995 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,9 +63,8 @@ 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);
@@ -90,7 +89,10 @@ 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>
);
@@ -103,13 +105,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; \ No newline at end of file
+export default AudioWaveform;