diff options
| author | Hayden Bleasel <hello@haydenbleasel.com> | 2025-07-24 14:41:34 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-07-25 00:41:34 +0300 |
| commit | 5931ddb77aac23ffe1b82d9d7c03afde3e671109 (patch) | |
| tree | 3e2ead9cc6e13c01132a78c21b64f2be7b00e215 /apps/web/src/components/editor/audio-waveform.tsx | |
| parent | 7b840e9b4e198212eb34861c21469b2215157914 (diff) | |
| download | opencut-5931ddb77aac23ffe1b82d9d7c03afde3e671109.tar.gz | |
feat: add ultracite (#452)
* Init ultracite
* Update scripts and biome.jsonc
* Update biome.jsonc
* Update biome.jsonc
* Update biome.jsonc
* Run format
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, 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; |
