Merge branch 'staging'

1 files changed, 97 insertions, 99 deletions

diff --git a/apps/web/src/components/editor/audio-waveform.tsx b/apps/web/src/components/editor/audio-waveform.tsx
index cae2359b..75a5ae06 100644
--- a/apps/web/src/components/editor/audio-waveform.tsx
+++ b/apps/web/src/components/editor/audio-waveform.tsx
@@ -1,117 +1,115 @@
-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;
-	height?: number;
-	className?: string;
+  audioUrl: string;
+  height?: number;
+  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);
-	const [isLoading, setIsLoading] = useState(true);
-	const [error, setError] = useState(false);
+  const waveformRef = useRef<HTMLDivElement>(null);
+  const wavesurfer = useRef<WaveSurfer | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(false);
 
-	useEffect(() => {
-		let mounted = true;
+  useEffect(() => {
+    let mounted = true;
 
-		const initWaveSurfer = async () => {
-			if (!waveformRef.current || !audioUrl) return;
+    const initWaveSurfer = async () => {
+      if (!waveformRef.current || !audioUrl) return;
 
-			try {
-				// Clean up any existing instance
-				if (wavesurfer.current) {
-					try {
-						wavesurfer.current.destroy();
-					} catch (e) {
-						// Silently ignore destroy errors
-					}
-					wavesurfer.current = null;
-				}
+      try {
+        // Clean up any existing instance
+        if (wavesurfer.current) {
+          try {
+            wavesurfer.current.destroy();
+          } catch (e) {
+            // Silently ignore destroy errors
+          }
+          wavesurfer.current = null;
+        }
 
-				wavesurfer.current = WaveSurfer.create({
-					container: waveformRef.current,
-					waveColor: "rgba(255, 255, 255, 0.6)",
-					progressColor: "rgba(255, 255, 255, 0.9)",
-					cursorColor: "transparent",
-					barWidth: 2,
-					barGap: 1,
-					height: height,
-					normalize: true,
-					interact: false,
-				});
+        wavesurfer.current = WaveSurfer.create({
+          container: waveformRef.current,
+          waveColor: 'rgba(255, 255, 255, 0.6)',
+          progressColor: 'rgba(255, 255, 255, 0.9)',
+          cursorColor: 'transparent',
+          barWidth: 2,
+          barGap: 1,
+          height: height,
+          normalize: true,
+          interact: false,
+        });
 
-				// Event listeners
-				wavesurfer.current.on("ready", () => {
-					if (mounted) {
-						setIsLoading(false);
-						setError(false);
-					}
-				});
+        // Event listeners
+        wavesurfer.current.on('ready', () => {
+          if (mounted) {
+            setIsLoading(false);
+            setError(false);
+          }
+        });
 
-				wavesurfer.current.on("error", (err) => {
-					console.error("WaveSurfer error:", err);
-					if (mounted) {
-						setError(true);
-						setIsLoading(false);
-					}
-				});
+        wavesurfer.current.on('error', (err) => {
+          console.error('WaveSurfer error:', err);
+          if (mounted) {
+            setError(true);
+            setIsLoading(false);
+          }
+        });
 
-				await wavesurfer.current.load(audioUrl);
-			} catch (err) {
-				console.error("Failed to initialize WaveSurfer:", err);
-				if (mounted) {
-					setError(true);
-					setIsLoading(false);
-				}
-			}
-		};
+        await wavesurfer.current.load(audioUrl);
 
-		initWaveSurfer();
+      } catch (err) {
+        console.error('Failed to initialize WaveSurfer:', err);
+        if (mounted) {
+          setError(true);
+          setIsLoading(false);
+        }
+      }
+    };
 
-		return () => {
-			mounted = false;
-			if (wavesurfer.current) {
-				try {
-					wavesurfer.current.destroy();
-				} catch (e) {
-					// Silently ignore destroy errors
-				}
-				wavesurfer.current = null;
-			}
-		};
-	}, [audioUrl, height]);
+    initWaveSurfer();
 
-	if (error) {
-		return (
-			<div
-				className={`flex items-center justify-center ${className}`}
-				style={{ height }}
-			>
-				<span className="text-xs text-foreground/60">Audio unavailable</span>
-			</div>
-		);
-	}
+    return () => {
+      mounted = false;
+      if (wavesurfer.current) {
+        try {
+          wavesurfer.current.destroy();
+        } catch (e) {
+          // Silently ignore destroy errors
+        }
+        wavesurfer.current = null;
+      }
+    };
+  }, [audioUrl, height]);
 
-	return (
-		<div className={`relative ${className}`}>
-			{isLoading && (
-				<div className="absolute inset-0 flex items-center justify-center">
-					<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"}`}
-				style={{ height }}
-			/>
-		</div>
-	);
+  if (error) {
+    return (
+      <div className={`flex items-center justify-center ${className}`} style={{ height }}>
+        <span className="text-xs text-foreground/60">Audio unavailable</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`relative ${className}`}>
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <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'}`}
+        style={{ height }}
+      />
+    </div>
+  );
 };
 
-export default AudioWaveform;
+export default AudioWaveform;
\ No newline at end of file