lu-audio-waveform

1"use client";
2 
3import { cn } from "@/lib/utils";
4import type { Variants } from "motion/react";
5import {
6 LazyMotion,
7 domMin,
8 m,
9 useAnimation,
10 useReducedMotion,
11} from "motion/react";
12import {
13 forwardRef,
14 useCallback,
15 useImperativeHandle,
16 useRef,
17 type HTMLAttributes,
18} from "react";
19 
20export interface AudioWaveformIconHandle {
21 startAnimation: () => void;
22 stopAnimation: () => void;
23}
24 
25interface AudioWaveformIconProps extends Omit<
26 HTMLAttributes<HTMLDivElement>,
27 | "color"
28 | "onDrag"
29 | "onDragStart"
30 | "onDragEnd"
31 | "onAnimationStart"
32 | "onAnimationEnd"
33 | "onAnimationIteration"
34> {
35 size?: number;
36 duration?: number;
37 isAnimated?: boolean;
38 color?: string;
39}
40 
41const WAVE_D =
42 "M2 13a2 2 0 0 0 2-2V7a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0V4a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0v-4a2 2 0 0 1 2-2";
43 
44const HEAD = 0.16;
45 
46const AudioWaveformIcon = forwardRef<
47 AudioWaveformIconHandle,
48 AudioWaveformIconProps
49>(
50 (
51  {
52   onMouseEnter,
53   onMouseLeave,
54   className,
55   size = 24,
56   duration = 1,
57   isAnimated = true,
58   color,
59   ...props
60  },
61  ref,
62 ) => {
63  const controls = useAnimation();
64  const reduced = useReducedMotion();
65  const isControlled = useRef(false);
66 
67  const start = useCallback(() => {
68   if (reduced) return;
69   controls.start("sweep");
70  }, [controls, reduced]);
71 
72  const stop = useCallback(() => {
73   controls.start("rest");
74  }, [controls]);
75 
76  useImperativeHandle(ref, () => {
77   isControlled.current = true;
78   return {
79    startAnimation: start,
80    stopAnimation: stop,
81   };
82  });
83 
84  const handleEnter = useCallback(
85   (e?: React.MouseEvent<HTMLDivElement>) => {
86    if (!isAnimated || reduced) return;
87    if (!isControlled.current) start();
88    else onMouseEnter?.(e as any);
89   },
90   [isAnimated, reduced, start, onMouseEnter],
91  );
92 
93  const handleLeave = useCallback(
94   (e: React.MouseEvent<HTMLDivElement>) => {
95    if (!isControlled.current) stop();
96    else onMouseLeave?.(e);
97   },
98   [stop, onMouseLeave],
99  );
100 
101  const trackVariants: Variants = {
102   rest: {
103    opacity: 1,
104    transition: { duration: 0.26 * duration, ease: "easeOut" },
105   },
106   sweep: {
107    opacity: 0.3,
108    transition: { duration: 0.18 * duration, ease: "easeOut" },
109   },
110  };
111 
112  const playheadVariants: Variants = {
113   rest: {
114    pathLength: 1,
115    pathOffset: 0,
116    transition: { duration: 0.28 * duration, ease: "easeOut" },
117   },
118   sweep: {
119    pathLength: [HEAD, HEAD],
120    pathOffset: [-HEAD, 1],
121    transition: {
122     duration: 1.25 * duration,
123     ease: "linear",
124// … truncated