waveform

1"use client"
2 
3import {
4  useCallback,
5  useEffect,
6  useMemo,
7  useRef,
8  useState,
9  type HTMLAttributes,
10} from "react"
11 
12import { cn } from "@/lib/utils"
13 
14export type WaveformProps = HTMLAttributes<HTMLDivElement> & {
15  data?: number[]
16  barWidth?: number
17  barHeight?: number
18  barGap?: number
19  barRadius?: number
20  barColor?: string
21  fadeEdges?: boolean
22  fadeWidth?: number
23  height?: string | number
24  active?: boolean
25  onBarClick?: (index: number, value: number) => void
26}
27 
28export const Waveform = ({
29  data = [],
30  barWidth = 4,
31  barHeight: baseBarHeight = 4,
32  barGap = 2,
33  barRadius = 2,
34  barColor,
35  fadeEdges = true,
36  fadeWidth = 24,
37  height = 128,
38  onBarClick,
39  className,
40  ...props
41}: WaveformProps) => {
42  const canvasRef = useRef<HTMLCanvasElement>(null)
43  const containerRef = useRef<HTMLDivElement>(null)
44  const heightStyle = typeof height === "number" ? `${height}px` : height
45 
46  useEffect(() => {
47    const canvas = canvasRef.current
48    const container = containerRef.current
49    if (!canvas || !container) return
50 
51    const resizeObserver = new ResizeObserver(() => {
52      const rect = container.getBoundingClientRect()
53      const dpr = window.devicePixelRatio || 1
54 
55      canvas.width = rect.width * dpr
56      canvas.height = rect.height * dpr
57      canvas.style.width = `${rect.width}px`
58      canvas.style.height = `${rect.height}px`
59 
60      const ctx = canvas.getContext("2d")
61      if (ctx) {
62        ctx.scale(dpr, dpr)
63        renderWaveform()
64      }
65    })
66 
67    const renderWaveform = () => {
68      const ctx = canvas.getContext("2d")
69      if (!ctx) return
70 
71      const rect = canvas.getBoundingClientRect()
72      ctx.clearRect(0, 0, rect.width, rect.height)
73 
74      const computedBarColor =
75        barColor ||
76        getComputedStyle(canvas).getPropertyValue("--foreground") ||
77        "#000"
78 
79      const barCount = Math.floor(rect.width / (barWidth + barGap))
80      const centerY = rect.height / 2
81 
82      for (let i = 0; i < barCount; i++) {
83        const dataIndex = Math.floor((i / barCount) * data.length)
84        const value = data[dataIndex] || 0
85        const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)
86        const x = i * (barWidth + barGap)
87        const y = centerY - barHeight / 2
88 
89        ctx.fillStyle = computedBarColor
90        ctx.globalAlpha = 0.3 + value * 0.7
91 
92        if (barRadius > 0) {
93          ctx.beginPath()
94          ctx.roundRect(x, y, barWidth, barHeight, barRadius)
95          ctx.fill()
96// … truncated